:root, [data-theme="light"] {
  --surface-100: #fdfdfb;
  --surface-200: #ffffff;
  --surface-300: #f6f6f4;
  --ink: #14161f;
  --ink-muted: #565a6b;
  --line: #e4e4de;
  --line-strong: #8a8d99;
  --accent: #2b4bff;
  --on-accent: #ffffff;
  --violet: #2b4bff;
  --on-violet: #ffffff;
  --pink: #2b4bff;
  --on-pink: #ffffff;
  --pink-ink: #1e3ad1;
  --matcha: #2b4bff;
  --on-matcha: #ffffff;
  --matcha-ink: #1e3ad1;
  --danger: #f6b7b3;
  --on-danger: #14161f;
  --danger-ink: #a1324a;
  --tint-blue: #e4e9ff;
  --tint-matcha: #e4e9ff;
  --tint-pink: #eceffe;
  --tint-violet: #e4e9ff;
  --focus: #2b4bff;
  --shadow-float: 0 1px 2px rgba(20, 22, 31, 0.06), 0 8px 24px rgba(20, 22, 31, 0.08);
  --shadow-photo: 0 2px 4px rgba(20, 22, 31, 0.08), 0 12px 28px rgba(20, 22, 31, 0.1);
}
[data-theme="dark"] {
  --surface-100: #0e0f16;
  --surface-200: #161824;
  --surface-300: #1e2130;
  --ink: #f2f1ec;
  --ink-muted: #a3a7b8;
  --line: #2a2d3f;
  --line-strong: #6b7088;
  --accent: #8ea0ff;
  --on-accent: #0e0f16;
  --violet: #b79cff;
  --on-violet: #0e0f16;
  --pink: #ff8fd0;
  --on-pink: #0e0f16;
  --pink-ink: #ff8fd0;
  --matcha: #b7dc9f;
  --on-matcha: #0e0f16;
  --matcha-ink: #b7dc9f;
  --danger: #f6b7b3;
  --on-danger: #0e0f16;
  --danger-ink: #f6b7b3;
  --tint-blue: #1b2148;
  --tint-matcha: #1c2a1a;
  --tint-pink: #34182b;
  --tint-violet: #271b45;
  --focus: #8ea0ff;
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-photo: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.4);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;
  --layout-content: 1120px;
  --layout-prose: 680px;
  --layout-touch: 44px;
  --font-display: "Poppins", "Geist", system-ui, sans-serif;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.display-xl { font-family: var(--font-display); font-size:72px; line-height:1.05; font-weight:600; letter-spacing:-0.03em; font-style:normal; }
.display-lg { font-family: var(--font-display); font-size:52px; line-height:1.1; font-weight:600; letter-spacing:-0.03em; font-style:normal; }
.display-md { font-family: var(--font-display); font-size:36px; line-height:1.15; font-weight:600; letter-spacing:-0.02em; font-style:normal; }
.quote { font-family: var(--font-display); font-size:28px; line-height:1.3; font-weight:500; letter-spacing:-0.01em; font-style:italic; }
.title-lg { font-family: var(--font-display); font-size:32px; line-height:1.2; font-weight:600; letter-spacing:-0.01em; font-style:normal; }
.title-md { font-family: var(--font-display); font-size:24px; line-height:1.3; font-weight:600; letter-spacing:-0.005em; font-style:normal; }
.title-sm { font-family: var(--font-display); font-size:18px; line-height:1.4; font-weight:500; letter-spacing:normal; font-style:normal; }
.body-lg { font-family: var(--font-sans); font-size:18px; line-height:1.6; font-weight:400; letter-spacing:normal; font-style:normal; }
.body { font-family: var(--font-sans); font-size:16px; line-height:1.6; font-weight:400; letter-spacing:normal; font-style:normal; }
.body-sm { font-family: var(--font-sans); font-size:14px; line-height:1.5; font-weight:400; letter-spacing:normal; font-style:normal; }
.label { font-family: var(--font-mono); font-size:12px; line-height:1.3; font-weight:500; letter-spacing:0.08em; font-style:normal; }
.meta { font-family: var(--font-mono); font-size:13px; line-height:1.4; font-weight:400; letter-spacing:0.02em; font-style:normal; }