/* ============================================================
   Apollo — 00 tokens + reset
   Strategy: "cobalt on cool paper — committed restraint".
   Theme is automatic via prefers-color-scheme. No toggle, no JS, no FOUC.
   Components consume ONLY role tokens; the dark theme is one token re-map.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* --- Light (primary): cool paper, NOT cream --- */
  --bg: #F4F6FB;
  --bg-tint: #EEF2FB;          /* faintly cobalt-tinted band */
  --surface: #FFFFFF;
  --surface-2: #ECF0F8;
  --ink: #0B0E1A;
  --text: #3D4354;
  --muted: #565D70;
  --line: rgba(11, 14, 26, 0.10);
  --line-strong: rgba(11, 14, 26, 0.16);

  --accent: #1B4DFF;
  --accent-press: #143CD6;
  --accent-soft: #E6EBFF;
  --accent-ink: #FFFFFF;
  --accent-glow: rgba(27, 77, 255, 0.22);
  --ok: #157A41;
  --err: #C8362F;

  --shadow-sm: 0 1px 2px rgba(11, 14, 26, 0.06), 0 1px 1px rgba(11, 14, 26, 0.04);
  --shadow: 0 12px 30px -14px rgba(13, 22, 55, 0.22);
  --shadow-lg: 0 40px 80px -32px rgba(13, 22, 55, 0.30);

  /* --- Type --- */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- Layout --- */
  --maxw: 1200px;
  --maxw-prose: 68ch;
  --gutter: clamp(20px, 5vw, 72px);
  --section-y: clamp(72px, 9vw, 140px);
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 160ms;
  --dur: 320ms;
  --dur-slow: 720ms;

  /* --- Z scale (semantic) --- */
  --z-nav: 100;
  --z-float: 900;
  --z-backdrop: 1000;
  --z-modal: 1010;
  --z-toast: 1100;
}

/* Dark tokens: applied automatically when the OS prefers dark (unless the user forced
   light), and applied always when the user forced dark via the theme chooser/toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07090F;
    --bg-tint: #0B0F18;
    --surface: #141925;
    --surface-2: #1B2230;
    --ink: #F4F6FB;
    --text: #C2C8D6;
    --muted: #99A2B5;
    --line: rgba(255, 255, 255, 0.11);
    --line-strong: rgba(255, 255, 255, 0.20);

    --accent: #5B7CFF;
    --accent-press: #5273FF;
    --accent-soft: rgba(91, 124, 255, 0.16);
    --accent-ink: #07090F;
    --accent-glow: rgba(91, 124, 255, 0.42);
    --ok: #4ADE80;
    --err: #FF6B61;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 50px 100px -36px rgba(0, 0, 0, 0.8);
  }
}

:root[data-theme="dark"] {
  --bg: #07090F;
  --bg-tint: #0B0F18;
  --surface: #141925;
  --surface-2: #1B2230;
  --ink: #F4F6FB;
  --text: #C2C8D6;
  --muted: #99A2B5;
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.20);

  --accent: #5B7CFF;
  --accent-press: #5273FF;
  --accent-soft: rgba(91, 124, 255, 0.16);
  --accent-ink: #07090F;
  --accent-glow: rgba(91, 124, 255, 0.42);
  --ok: #4ADE80;
  --err: #FF6B61;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 50px 100px -36px rgba(0, 0, 0, 0.8);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { min-height: 100%; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--accent-ink); }
