/* =====================================================================
   Strata · design tokens
   A dark band of moving print-layer lines over calm, precise working
   surfaces. The hero and closing bands are always night (--hero*); the
   working surfaces between them follow light or dark.
   Dark mode follows the visitor's system setting unless <html> carries
   data-theme="light" | "dark".
   Keep in sync with tokens.json (scripts/sync-tokens.mjs copies this file
   into template/css/tokens.css).
   ===================================================================== */
:root {
  /* ---- working surfaces ---- */
  --bg: #f5f6fa;            /* page */
  --surface: #ffffff;       /* tiles, cards, frames */
  --sunk: #eef0f6;          /* wells inside tiles, columns, inputs */
  --ink: #0b1020;
  --ink-2: #3a4157;
  --muted: #646b82;         /* source #6a7188, nudged darker to pass AA on --sunk */
  --line: #e3e6ef;
  --line-2: #d2d7e3;

  /* ---- the triad: one cool, one warm, one fresh ---- */
  --violet: #6847ff;
  --coral: #ff5a3c;
  --aqua: #10c4b4;
  --accent: #5a3cf4;        /* links, focus, selected states */
  --accent-soft: #efebff;
  --on-accent: #ffffff;

  /* ---- states ---- */
  --ok: #109a6a;  --ok-soft: #e3f6ee;
  --warn: #d98e0b; --warn-soft: #fcf1dc;
  --bad: #e0434a; --bad-soft: #fde9ea;

  /* ---- night bands (hero, agents band, closing) ---- */
  --hero: #090d1d;
  --hero-ink: #f1f2fa;
  --hero-muted: #a3a9c4;
  --hero-lift: #161c40;     /* the lit corner of the band's radial wash */
  --term: #070a16;          /* consoles and logs on the band */

  /* ---- the italic sheen on <em> in headlines ---- */
  --sheen: linear-gradient(100deg, #b7a8ff, var(--coral) 45%, #ffc36b 70%, #b7a8ff);
  --sheen-light: linear-gradient(100deg, var(--accent), var(--coral) 75%);

  /* ---- depth ---- */
  --shadow: 0 1px 2px rgba(11, 16, 32, 0.05), 0 6px 18px -8px rgba(11, 16, 32, 0.12);
  --shadow-lg: 0 24px 60px -18px rgba(11, 16, 32, 0.35), 0 2px 6px rgba(11, 16, 32, 0.06);
  --shadow-frame: 0 70px 120px -40px rgba(6, 9, 20, 0.7), 0 30px 70px -30px rgba(104, 71, 255, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);

  /* ---- type ---- */
  --ui: "Geist", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --fs-h1: clamp(46px, 7.6vw, 112px);
  --fs-h2: clamp(36px, 5.2vw, 66px);
  --fs-cta: clamp(42px, 7vw, 100px);
  --fs-lead: 18px;
  --fs-body: 15px;
  --fs-small: 13.5px;
  --fs-key: 11.5px;

  /* ---- space ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 116px; --s-10: 160px;
  --wrap: 1200px;
  --gutter: 24px;

  /* ---- shape ---- */
  --r-chip: 999px; --r-xs: 6px; --r-sm: 10px; --r-card: 11px; --r-btn: 12px; --r-md: 14px;
  --r-vis: 16px; --r-frame: 18px; --r-panel: 20px; --r-tile: 24px;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --d-rise: 0.95s;          /* scroll reveal: rise from blur */
  --d-load: 1s;             /* hero load stagger, 90ms apart */
  --d-sheen: 9s;            /* italic gradient drift */
  --d-drift: 18s;           /* background glows */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080b15; --surface: #0f1326; --sunk: #0b0f1f; --ink: #eceef8; --ink-2: #c2c7da; --muted: #8b92ad; --line: #1c2240; --line-2: #2a3154;
    --accent: #9381ff; --accent-soft: #1b1840; --on-accent: #0b0d1c;
    --ok: #39c98f; --ok-soft: #0f2a20; --bad: #ff6b70; --bad-soft: #321418; --warn: #f0b24a; --warn-soft: #2e2410;
    --hero: #060914; --hero-lift: #121733;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -10px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #080b15; --surface: #0f1326; --sunk: #0b0f1f; --ink: #eceef8; --ink-2: #c2c7da; --muted: #8b92ad; --line: #1c2240; --line-2: #2a3154;
  --accent: #9381ff; --accent-soft: #1b1840; --on-accent: #0b0d1c;
  --ok: #39c98f; --ok-soft: #0f2a20; --bad: #ff6b70; --bad-soft: #321418; --warn: #f0b24a; --warn-soft: #2e2410;
  --hero: #060914; --hero-lift: #121733;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -10px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}