/* =====================================================================
   Folio · design tokens
   A cool, quiet showroom where the work is the hero. Each piece of work
   sits on its own large rounded plate with its own ground (ink, gridded
   paper, night), shown in overlapping browser and phone frames.
   The page follows light or dark; plates keep their character in both
   (in dark mode the page drops to deep ink and the plates sit lighter).
   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 {
  /* ---- the showroom ---- */
  --page: #f6f7f9;          /* the showroom floor: cool, never cream */
  --card: #ffffff;          /* index cards, option cards, FAQ */
  --sunk: #eef0f3;          /* letter tiles, wells */
  --ink: #0e1116;
  --ink-2: #3b414d;
  --muted: #5c6370;         /* body-small text; 5.6:1 on page */
  --fade: #858c98;          /* the grey second half of headlines; large text only (3.2:1) */
  --line: #e2e5ea;
  --line-2: #cfd4dc;
  --accent: #3d5afe;        /* focus rings and inline links only */
  --on-accent: #ffffff;
  --live: #3ee08f;          /* the live dot on "Play it live" */
  --stop: #ff5a5a;          /* the dot once a demo is playing */
  --tool: rgba(10, 12, 16, 0.78); /* stage tool pills over the frames */
  --invert: #0e1116;        /* the last option card, the closing plate */
  --invert-2: #1d2230;
  --on-invert: #ffffff;
  --on-invert-muted: #b9bfcc;

  /* ---- plate grounds (each plate picks one; add more per customer) ---- */
  --plate-ink: #0b0c10;          /* dark ground */
  --plate-ink-text: #f4f5f7;
  --plate-ink-muted: #b3b8c2;
  --plate-paper: #eceff4;        /* gridded paper ground */
  --plate-grid: #dde2ea;         /* its 24px grid */
  --plate-paper-text: #131a2c;
  --plate-paper-muted: #4a5470;
  --plate-night: #090d1d;        /* night ground */
  --plate-night-lift: #161c40;   /* the lit corner of the night ground */
  --plate-night-text: #f1f2fa;
  --plate-night-muted: #a3a9c4;

  /* ---- depth ---- */
  --shadow-lift: 0 24px 50px -28px rgba(14, 17, 22, 0.35);
  --shadow-browser: 0 40px 80px -36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(127, 127, 127, 0.18);
  --shadow-phone: 0 30px 60px -24px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-detail: 0 18px 40px -24px rgba(0, 0, 0, 0.55);

  /* ---- 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;          /* a plate face, for work that wants it */
  --display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;       /* a plate face, for work that wants it */
  --fs-h1: clamp(44px, 7vw, 104px);
  --fs-h2: clamp(38px, 5.4vw, 76px);
  --fs-name: clamp(64px, 8.4vw, 132px);
  --fs-one: clamp(18px, 1.6vw, 22px);
  --fs-lead: clamp(17px, 1.5vw, 20px);
  --fs-body: 16px;
  --fs-small: 14.5px;
  --fs-eyebrow: 12px;

  /* ---- space ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 22px; --s-6: 28px;
  --s-7: 40px; --s-8: 56px; --s-9: 72px; --s-10: 96px;
  --wrap: 1320px;
  --gutter: 24px;

  /* ---- shape ---- */
  --r-plate: 36px;          /* 26px under 640px */
  --r-card: 20px;           /* index cards */
  --r-path: 22px;           /* option cards, detail cards */
  --r-browser: 14px;
  --r-phone: 26px;
  --r-tile: 12px;           /* letter tiles, mini frames */
  --r-pill: 999px;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --d-rise: 1.1s;           /* plates rise in */
  --d-load: 0.9s;           /* headline lines on load, 90ms apart */
  --d-swap: 0.5s;           /* static frame to live demo */
  --d-tilt: 0.6s;           /* pointer tilt settles back */
  --d-drift: 16s;           /* glows on dark plates */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0b0d11; --card: #15181e; --sunk: #1c2028; --ink: #eef0f4; --ink-2: #c3c8d2; --muted: #969dab; --fade: #6c7380; --line: #23272f; --line-2: #333945;
    --accent: #8c9dff; --on-accent: #0b0d11; --tool: rgba(6, 7, 10, 0.82);
    --invert: #f4f5f7; --invert-2: #dde1e8; --on-invert: #0e1116; --on-invert-muted: #3b414d;
    --plate-ink: #17191f; --plate-ink-muted: #b3b8c2;
    --plate-paper: #1b1f27; --plate-grid: #252a34; --plate-paper-text: #eef0f4; --plate-paper-muted: #a4abba;
    --plate-night: #10152c; --plate-night-lift: #222a5c;
    --shadow-lift: 0 24px 50px -24px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #0b0d11; --card: #15181e; --sunk: #1c2028; --ink: #eef0f4; --ink-2: #c3c8d2; --muted: #969dab; --fade: #6c7380; --line: #23272f; --line-2: #333945;
  --accent: #8c9dff; --on-accent: #0b0d11; --tool: rgba(6, 7, 10, 0.82);
  --invert: #f4f5f7; --invert-2: #dde1e8; --on-invert: #0e1116; --on-invert-muted: #3b414d;
  --plate-ink: #17191f; --plate-ink-muted: #b3b8c2;
  --plate-paper: #1b1f27; --plate-grid: #252a34; --plate-paper-text: #eef0f4; --plate-paper-muted: #a4abba;
  --plate-night: #10152c; --plate-night-lift: #222a5c;
  --shadow-lift: 0 24px 50px -24px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}