/* ==========================================================================
 * tokens.css — the design contract (R5: no hex or raw px outside this file)
 *
 * Light theme defaults live on :root. Dark theme overrides live on
 * [data-theme="dark"]. Component files may keep "always-dark island"
 * colors (#0e0d0a / #f4ecd8) explicit when the element stays dark in BOTH
 * themes — that is by design, documented case.
 * ========================================================================== */

:root{
  /* Tells the UA which color schemes the page supports so native chrome
     (scrollbars, form controls, autofill) matches the active theme and
     does not flash light on first paint when dark mode is active. */
  color-scheme: light dark;

  /* ---- color (existing palette — light) ---------------------------------- */
  --bg:#f1ede2;
  --paper:#faf7ed;
  --ink:#0e0d0a;
  --line:#0e0d0a;
  --muted:#3a352d;
  --accent:#1a3aff;       /* electric blue */
  --accent-2:#ffd83b;     /* sun yellow  */
  --accent-3:#ff5e3a;     /* hot orange  */
  --grid-dot: rgba(14,13,10,0.18);

  /* ---- line + shadow ---------------------------------------------------- */
  --bw: 2.5px;
  --bw-thick: 4px;
  --b: var(--bw) solid var(--line);
  --b-thick: var(--bw-thick) solid var(--line);
  --shadow-sm:  3px  3px 0 0 var(--line);
  --shadow:     6px  6px 0 0 var(--line);
  --shadow-lg: 10px 10px 0 0 var(--line);
  /* Worst-case outer reach of any shadow tier on x/y (currently --shadow-lg = 10px).
     Mobile shell paddings add this so the heaviest cards' shadows still breathe
     inside the viewport. MUST be bumped if any shadow tier above grows. */
  --shadow-extent: 10px;

  /* ---- spacing scale (4px base) ---------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* ---- type ------------------------------------------------------------- */
  --ff-sans:  'Space Grotesk', system-ui, sans-serif;
  --ff-mono:  'JetBrains Mono', monospace;
  --ff-pixel: 'VT323', monospace;
  --fz-xs: 12px;
  --fz-sm: 14px;
  --fz-base: 16px;
  --fz-md: 20px;
  --fz-lg: 28px;
  --fz-xl: 40px;
  --fz-2xl: 56px;
  --fz-3xl: 84px;
  --lh-tight: 1.1;
  --lh-base: 1.5;

  /* ---- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms;
  --dur-base: 240ms;

  /* ---- focus ------------------------------------------------------------ */
  --focus-ring: 3px solid var(--accent-2);
}

[data-theme="dark"]{
  color-scheme: dark;
  --bg:#100e0a;
  --paper:#1a1813;
  --ink:#f4ecd8;          /* cream becomes the "ink" */
  --line:#f4ecd8;
  --muted:#a89e88;
  --accent:#5b78ff;       /* electric blue, lifted  */
  --accent-2:#ffd83b;     /* sun yellow stays       */
  --accent-3:#ff7a5c;     /* warmer orange          */
  --grid-dot: rgba(244,236,216,0.12);
}