/* Design tokens — the only place raw colors live. See docs/DESIGN_SYSTEM.md */
:root {
  color-scheme: dark;
  --bg: #0b1026;
  --bg-2: #141a3d;
  --bg-glow-1: rgb(217 164 65 / .42);
  --bg-glow-2: rgb(63 181 196 / .32);
  --bg-glow-3: rgb(129 92 214 / .30);
  --glass: rgb(255 255 255 / .08);
  --glass-strong: rgb(20 26 56 / .74);
  --glass-border: rgb(255 255 255 / .18);
  --glass-highlight: rgb(255 255 255 / .22);
  --glass-shadow: 0 12px 40px rgb(0 0 0 / .32);
  --text: #f5f2ea;
  --muted: #b9bcd6;
  --accent: #e8b84f;
  --accent-ink: #1a1205;
  --info: #7fd6e2;
  --warn: #f0b46a;
  --focus: #ffd977;
  --letters: rgb(232 184 79 / .10);

  --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem;
  --fs-2xl: 2rem; --fs-3xl: 3rem; --fs-hero: clamp(3.5rem, 18vw, 4.5rem);
  --font-display: "Frank Ruhl Libre", "Noto Serif", "David Libre", Georgia, serif;
  --font-body: "Heebo", "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 240ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --tap: 44px;
  --card-w: 560px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f1ea;
  --bg-2: #e9e3d6;
  --bg-glow-1: rgb(232 184 79 / .45);
  --bg-glow-2: rgb(63 181 196 / .28);
  --bg-glow-3: rgb(170 140 230 / .28);
  --glass: rgb(255 255 255 / .55);
  --glass-strong: rgb(255 255 255 / .84);
  --glass-border: rgb(20 26 56 / .12);
  --glass-highlight: rgb(255 255 255 / .9);
  --glass-shadow: 0 12px 36px rgb(40 30 10 / .14);
  --text: #1a1d33;
  --muted: #4f5372;
  --accent: #8a5d0c;
  --accent-ink: #ffffff;
  --info: #0f6f7c;
  --warn: #8a4b00;
  --focus: #1b4dd8;
  --letters: rgb(138 93 12 / .08);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f4f1ea; --bg-2: #e9e3d6;
    --bg-glow-1: rgb(232 184 79 / .45); --bg-glow-2: rgb(63 181 196 / .28); --bg-glow-3: rgb(170 140 230 / .28);
    --glass: rgb(255 255 255 / .55); --glass-strong: rgb(255 255 255 / .84);
    --glass-border: rgb(20 26 56 / .12); --glass-highlight: rgb(255 255 255 / .9);
    --glass-shadow: 0 12px 36px rgb(40 30 10 / .14);
    --text: #1a1d33; --muted: #4f5372; --accent: #8a5d0c; --accent-ink: #ffffff;
    --info: #0f6f7c; --warn: #8a4b00; --focus: #1b4dd8; --letters: rgb(138 93 12 / .08);
  }
}