/* ============================================================ s-tokens.css — design tokens for /dashboard-story ----------------------------------------------------------- Register: academic / data-journalism (see plan docs/plan/todo/2026-04-19-dashboard-story-visual-unification.md §0.1 in the envistor-data repo). Scope: everything is scoped to `.n-page--story` (set on ) so these tokens do NOT leak into /dashboard-narrative or the legacy /realtime-sensor surface. Theme convention (matches s-narrative.css): - LIGHT is the default (no class). - DARK is applied via `body.n-page--story:not(.theme-light)`. No component styles here — tokens only. Components live in s-components.css and consume these tokens by name. ============================================================ */ /* ───── LIGHT (default, primary theme) ─────────────────────── */ .n-page--story { /* ── Font families ──────────────────────────────────────── */ /* Serif is display-only (h1/h2/h3/intro beat). Same type family as the sans (IBM Plex Serif + IBM Plex Sans) so metrics, x-height, and numerals align. Mono reserved for .s-cite /

. */
  --font-sans:  "IBM Plex Sans",  -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", Times, serif;
  --font-mono:  "IBM Plex Mono",  ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

  /* ── Type scale (atomic) ────────────────────────────────── */
  /* Sizes */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-34: 34px;
  --fs-display: clamp(34px, 4.5vw, 46px);

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;

  /* Line-heights */
  --lh-tight:    1.15;
  --lh-compact:  1.3;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;

  /* Letter-spacing */
  --ls-normal: 0;
  --ls-micro:  0.01em;
  --ls-caps:   0.11em;  /* eyebrow uppercase tracking */

  /* ── Spacing (4 px grid) ────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ── Radii ──────────────────────────────────────────────── */
  /* Near-geometric corners — academic register, not app-bubble. */
  --r-pill: 999px;   /* status pills */
  --r-sm:   3px;     /* code blocks, chips */
  --r-md:   6px;     /* cards, accordion rows, KPI tiles */
  --r-lg:   10px;    /* intro modal only */

  /* ── Color — UI chrome (warm neutrals, stone undertone) ── */
  --c-ink:   #1c1917;
  --c-ink-2: #44403c;
  --c-ink-3: #78716c;
  --c-ink-4: #a8a29e;

  --c-paper:   #f4f2ed;   /* page background — warm off-white, paper-feel */
  --c-paper-2: #ebe8e1;   /* second-tier band (rare) */
  --c-surface: #fbfaf7;   /* cards — half-tone lighter than paper */
  --c-surface-raised: #efece5;   /* wells, callouts, code blocks */

  --c-line:        rgba(28, 25, 23, 0.10);  /* primary hairline — does all card separation */
  --c-line-strong: rgba(28, 25, 23, 0.18);  /* section rules, active borders */

  /* ── Color — single accent (muted botanical green) ─────── */
  --c-accent:      #3f6b54;
  --c-accent-weak: #e3ebe5;
  --c-accent-ink:  #2d4f3d;

  --c-focus-ring:  rgba(63, 107, 84, 0.45);

  /* ── Color — status (desaturated, journal-grade) ───────── */
  /* Good reuses the accent — "all is well" is unified with the
     one accent token, so good/live/on-time all read the same. */
  --s-good:     #3f6b54;
  --s-moderate: #a7742b;
  --s-poor:     #a13a2c;

  /* ── Color — data encoding (chart marks ONLY) ──────────── */
  /* Palette draws from Our World in Data + Okabe-Ito; survives
     print + colorblind screening; stays recessive relative to
     chrome so the narrative reads first, data second.

     RULE: any element outside