/* ==========================================================================
   tokens.css — the whole design system lives here
   Palette: cool paper, graphite ink, one accent (deep pine). No gradients.
   Type:    Archivo (headings) / Newsreader (body) / IBM Plex Mono (data)
   ========================================================================== */

:root {
  /* --- type families ------------------------------------------------------ */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* --- type scale ---------------------------------------------------------
     Fluid between a 360px phone and a 1200px desktop. */
  --step-display: clamp(2.3rem, 1.35rem + 4.2vw, 4rem);
  --step-h2: clamp(1.55rem, 1.2rem + 1.5vw, 2.1rem);
  --step-h3: 1.125rem;
  --step-lead: clamp(1.08rem, 1rem + 0.4vw, 1.3rem);
  --step-body: 1.0625rem;
  --step-small: 0.9375rem;
  --step-mono: 0.78rem;
  --step-mono-sm: 0.72rem;

  /* --- spacing ------------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  /* --- structure ---------------------------------------------------------- */
  --shell-max: 1080px;
  --shell-pad: clamp(1.25rem, 4vw, 2.5rem);
  --gutter-col: 9rem;
  --masthead-h: 3.75rem;

  /* --- motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 120ms;
  --slow: 320ms;
}

/* --- light: ink on drafting paper ---------------------------------------- */
:root,
html[data-theme="light"] {
  color-scheme: light;

  --paper: #fbfbf9;
  --paper-sunk: #f2f2ee;
  --paper-raised: #ffffff;

  --ink: #17191a;
  --ink-soft: #5a5f63;
  --ink-faint: #8a9094;

  --rule: #dcdcd5;
  --rule-strong: #b8b8ae;

  --signal: #1b5e4f;
  --signal-hover: #12463a;
  --signal-wash: rgba(27, 94, 79, 0.07);
}

/* --- dark: same document, printed in reverse ----------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;

  --paper: #131517;
  --paper-sunk: #1a1d20;
  --paper-raised: #1e2225;

  --ink: #e9e9e4;
  --ink-soft: #9ba1a4;
  --ink-faint: #6f7679;

  --rule: #2c3134;
  --rule-strong: #454b4f;

  --signal: #6fbfa8;
  --signal-hover: #8fd4c1;
  --signal-wash: rgba(111, 191, 168, 0.09);
}