/* ============================================================================
   tokens.css — the single source of truth for color, type, space, motion.
   Pasted verbatim from design/work/design-systems-battery.md §1.6.
   NO hardcoded hex anywhere else in the stylesheet layer — reference these.
   Load order: tokens.css → base.css → article.css → components.css
   ============================================================================ */

:root {
  /* color — dark defaults */
  --color-ground:#05060A; --color-panel:#0D1018;
  --color-text:#C7CDD6; --color-text-high:#EEF1F6; --color-text-muted:#8A93A3;
  --color-hairline:#1C2230;
  --accent:#3FE0FF; --accent-glow:rgba(63,224,255,.35);
  --accent-cite-flash:rgba(63,224,255,.22);
  --amber:#FFB020; --caution:#D98A6A;
  --scrim:rgba(5,6,10,.92); --focus-ring:var(--accent);
  /* WIM addition (beyond §1.6): readable ink on an --accent fill (buttons). */
  --accent-ink:#05060A;

  /* type — every name here is loaded (base.ejs's Google Fonts request):
     no ghost fonts. "WIM Display" was never loaded anywhere and silently
     fell back to Space Grotesk; Unbounded is the real, resolved display
     face (Space Grotesk stays as its fallback). */
  --font-display:"Unbounded","Space Grotesk",system-ui,sans-serif;
  --font-body:"Newsreader",Georgia,"Iowan Old Style",serif;
  --font-meta:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;
  --type-h1:700 clamp(2.2rem,5vw,3.4rem)/1.08 var(--font-display);
  --type-h2:600 1.8rem/1.2 var(--font-display);
  --type-h3:600 1.35rem/1.3 var(--font-display);
  --type-body:400 clamp(1.125rem,1.1rem + .2vw,1.25rem)/1.65 var(--font-body);
  --type-standfirst:400 1.3rem/1.45 var(--font-body);
  --type-pullquote:italic 500 1.6rem/1.35 var(--font-body);
  --type-meta:500 0.8rem/1.4 var(--font-meta);
  --type-caption:500 0.85rem/1.45 var(--font-meta);
  --type-ui:500 0.95rem/1.3 var(--font-display);
  --tracking-meta:0.08em;

  /* space / geometry */
  --space-1:4px;--space-2:8px;--space-3:16px;--space-4:24px;--space-5:40px;--space-6:64px;--space-7:96px;
  --block-gap:var(--space-5);--section-gap:var(--space-6);
  --measure:44rem;--measure-wide:52rem;--grid-max:1200px;--grid-gutter:24px;--hero-bleed:100vw;
  --radius-sm:6px;--radius:10px;--radius-lg:16px;

  /* elevation / glow (dark) */
  --glow-hero:0 0 80px var(--accent-glow);
  --glow-pullquote:0 0 40px var(--accent-glow);
  --glow-hover:0 0 24px var(--accent-glow);
  --elev-card:0 2px 8px rgba(0,0,0,.5);
  --elev-popover:0 8px 28px rgba(0,0,0,.6);

  /* motion */
  --dur-fast:100ms;--dur-base:150ms;--dur-slow:200ms;--dur-ambient:6s;
  --ease-out:cubic-bezier(.2,.7,.3,1);--ease-inout:cubic-bezier(.4,0,.2,1);
  --cite-intent-delay:120ms;
}

/* "Orange" theme — warm dark-brown ground / cream ink / rust accent.
   Given values mapped onto the site's real token names (color-ink → text,
   color-cream → ground, color-mid → muted text, color-rule → hairline,
   color-accent-tetrad-full → accent) so switching to this theme actually
   repaints the site. --panel, --scrim, --accent-glow/-ink/-cite-flash, and
   the glow shadows aren't in the
   given palette — derived from the given colors following the exact pattern
   the dark/light blocks already use (glow = accent at ~30% alpha; ink-on-
   accent-fill = the theme's own ground, since #ff631a is bright enough to
   need a dark ink). --amber/--caution aren't in the given palette either, so
   they're intentionally left inherited from :root — tell me the intended
   values if this theme should override them too. */
[data-theme="orange"] {
  color-scheme: light;
  --color-ground:#381c00; --color-panel:color-mix(in srgb, #381c00 72%, #6f4f38 28%);
  --color-text:#f3e2cf; --color-text-high:#f3e2cf; --color-text-muted:#6f4f38;
  --color-hairline:#d8c3a6;
  --accent:#ff631a; --accent-glow:rgba(255,99,26,.35);
  --accent-cite-flash:rgba(255,99,26,.22);
  --scrim:rgba(56,28,0,.92); --accent-ink:#381c00;
}
@media (max-width:640px){ :root{ --grid-gutter:16px; } }

/* ── Vertical taxonomy accents (homepage) ─────────────────────────────────────
   NOTE: intentionally NOT named --accent/--accent-ink — those already mean
   "the house interactive cyan" everywhere else in the stylesheet layer
   (masthead nav, buttons, focus rings, pull quotes, citations). Reusing that
   name for the nine editorial hues would silently repaint house-cyan chrome
   whenever it's nested inside a [data-vertical] card/section. --vertical /
   --vertical-ink are a SEPARATE, additive pair used only for the taxonomy
   thread (eyebrow text, keyline, hover glow) per DESIGN_NORTH_STAR "one
   luminous accent per view": cyan is the only *interactive* accent; these
   nine are labels, never actionable.
   --vertical      → keyline / hover glow only (saturated, not for text).
   --vertical-ink  → eyebrow/label text only, tuned ≥4.5:1 on both grounds. */
:root { --vertical: var(--color-text-muted); --vertical-ink: var(--color-text-muted); }
[data-vertical="finance"]           { --vertical:#3FE0FF; --vertical-ink:#7FEBFF; }
[data-vertical="edge-technologies"] { --vertical:#3F8CFF; --vertical-ink:#8FB8FF; }
[data-vertical="architecture"]      { --vertical:#7A6CFF; --vertical-ink:#ADA4FF; }
[data-vertical="communications"]    { --vertical:#B36BFF; --vertical-ink:#CFA6FF; }
[data-vertical="biohacking"]        { --vertical:#FF5CC0; --vertical-ink:#FF9AD8; }
[data-vertical="environmental"]     { --vertical:#4DE86F; --vertical-ink:#7FEE97; }
[data-vertical="agriculture"]       { --vertical:#B6E84D; --vertical-ink:#C9EE7F; }
[data-vertical="energy"]            { --vertical:#FFCA3A; --vertical-ink:#FFD873; }
[data-vertical="transportation"]    { --vertical:#FF7A3D; --vertical-ink:#FFA476; }
[data-accent="amber"]               { --vertical:#FFB020; --vertical-ink:#FFC65C; } /* sponsor, symbolic */