/* ============================================================
   LEGION COFOUNDER - shared design tokens (SINGLE SOURCE)
   The one place the token scale lives. Consumed by:
     - index.v4.html  (linked directly, before its inline <style>)
     - assets/site.css (@import at top -> reaches all 5 product pages)
   Home-only tokens (hero-panel/ink/vignette) stay in index.v4.html.
   Nothing here is duplicated in either consumer - this file ends the
   hand-synced token fork. Elevation (shadow-fcard/float/chip, bevel),
   section-atmos, and the motion vocab live HERE because both home and
   the product pages consume them (home never links site.css).
   ============================================================ */
:root,:root[data-theme="light"]{
  /* semantic surface + text - cool near-white gray family (cofounder #f5f5f2) */
  --bg:#f5f5f2;
  --surface-1:#fcfcfa;
  --surface-2:#f0f0ec;
  --surface-3:#e9e9e4;
  --text-strong:#171717;
  --text:#3d3d3b;
  --text-muted:#5c5c5a;
  --text-faint:#8a8a87;
  --border:#dedfda;
  --border-2:#e7e7e2;
  --border-strong:#282834;
  --accent:#41a1cf;
  --accent-ink:#2f7fa6;
  --accent-surface:#0081c0;
  --accent-surface-2:#0091d6;
  --success:#2e9e58;
  --warning:#f5bd4f;
  --danger:#f5675a;
  --btn-fill-bg:#1f1f29;
  --btn-fill-fg:#ffffff;
  --btn-fill-bg-hover:#2c2c3a;
  --on-accent:#ffffff;
  --shadow-card:0 1px 1px rgba(0,0,0,0.04),0 3px 10px rgba(20,25,40,0.04);
  --shadow-nav:0 2px 8px rgba(20,25,40,0.07);
  --shadow-lift:0 6px 20px rgba(20,25,40,0.09);
  --edge-light:rgba(255,255,255,0.9);
  --hero-scrim:rgba(18,20,28,0.60);
  --hero-scrim-2:rgba(18,20,28,0.34);
  /* type system - Hanken Grotesk display/UI, departureMono pixel mono */
  --font-serif:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-sans:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'departureMono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --maxw:1200px;
  /* radius scale - every border-radius resolves to one of these */
  --r-sm:6px;
  --r-btn:8px;
  --r-card:14px;
  --r-card-lg:16px;
  --r-surface:20px;
  --r-surface-lg:24px;
  --r-pill:9999px;
  --r-nav:50px;
  /* section rhythm (8px sub-grid: 90 airy / 72 dense band).
     Tightened from 120/96 in the style-parity density pass - 90 sits inside the
     clone DESIGN.md section-spacing spec range (64-96px) while reading denser.
     One rhythm across all 6 pages; mobile steps to 60/48 in each page's own MQ. */
  --section-y:90px;
  --band-y:72px;
  /* elevation family - used by home (.cliblock/.kanban/.dele) AND products */
  --shadow-fcard:0 1px 2px rgba(0,0,0,0.05),0 6px 16px rgba(20,25,40,0.07);
  --shadow-float:0 1px 2px rgba(20,25,40,0.05),0 8px 22px rgba(20,25,40,0.10),inset 0 1px 0 rgba(255,255,255,0.5);
  --shadow-chip:0 1px 2px rgba(20,25,40,0.08),0 8px 18px rgba(20,25,40,0.12),inset 0 1px 0 rgba(255,255,255,0.65);
  --bevel:inset 0 1.5px 0 rgba(255,255,255,0.95),inset 0 -1.5px 0 rgba(20,25,40,0.09),inset 1px 0 0 rgba(255,255,255,0.45),inset -1px 0 0 rgba(20,25,40,0.05);
  /* recessed panel: a top edge-light + a bottom inner shade so carousel art wells sit BELOW the surface, opposite of the raised card lift */
  --shadow-recess:inset 0 1px 0 var(--edge-light),inset 0 -14px 22px -18px rgba(20,25,40,0.16);
  --section-atmos:none;   /* flat sections by design (de-slopped per triage 01) */
  /* motion vocabulary - one source of timing for reveals + hover physics */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --dur-reveal:.62s;
  --dur-lift:.28s;
  /* Pixel-art scene micro-system (fixed-LIGHT by design - the painted scene
     panel keeps its own daylight palette in both themes, so these are
     deliberately theme-invariant; near-duplicate literals collapsed here) */
  --scene-card-bg:#ffffff;
  --scene-surface:#f7f9fb;
  --scene-chip-bg:#f3f6f9;
  --scene-border:#e4e9ee;
  --scene-border-soft:#eaeef2;
  --scene-ink:#182430;
  --scene-ink-soft:#33424f;
  --scene-muted:#7c8794;
  --scene-faint:#9aa4af;
  --scene-accent:#0081c0;
  --scene-run:#2f9bd8;
  --scene-head-ink:#0a2233;
  --scene-head-lead:#123243;
  --scene-head-accent:#0069a6;
  --shadow-scene-card:0 2px 4px rgba(15,40,65,0.06),0 18px 44px rgba(15,40,65,0.22);
  --shadow-scene-glass:0 8px 40px rgba(18,50,80,0.14);
  --shadow-scene-chip:0 2px 10px rgba(20,50,80,0.14);
}
:root[data-theme="dark"]{
  --bg:#161513;
  --surface-1:#1e1c19;
  --surface-2:#232019;
  --surface-3:#282419;
  --text-strong:#ece9e2;
  --text:#c3bfb4;
  --text-muted:#948f83;
  --text-faint:#726d63;
  --border:#38352f;
  --border-2:#302d28;
  --border-strong:#565149;
  --accent:#5bb8e0;
  --accent-ink:#7cc8ea;
  --success:#54c483;
  --warning:#f5c866;
  --danger:#f5817a;
  --accent-surface:#0a5c86;
  --accent-surface-2:#0b6c9d;
  --btn-fill-bg:#ece9e2;
  --btn-fill-fg:#1b1a17;
  --btn-fill-bg-hover:#ffffff;
  --on-accent:#eaf6fc;
  --shadow-card:0 1px 2px rgba(0,0,0,0.35),0 5px 16px rgba(0,0,0,0.28);
  --shadow-nav:0 3px 12px rgba(0,0,0,0.4);
  --shadow-lift:0 8px 24px rgba(0,0,0,0.4);
  --edge-light:rgba(255,255,255,0.06);
  --hero-scrim:rgba(8,9,12,0.66);
  --hero-scrim-2:rgba(8,9,12,0.40);
  --shadow-fcard:0 1px 2px rgba(0,0,0,0.35),0 6px 16px rgba(0,0,0,0.32);
  --shadow-float:0 1px 2px rgba(0,0,0,0.3),0 8px 22px rgba(0,0,0,0.34),inset 0 1px 0 rgba(255,255,255,0.05);
  --shadow-chip:0 1px 2px rgba(0,0,0,0.3),0 8px 18px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.06);
  --bevel:inset 0 1.5px 0 rgba(255,255,255,0.11),inset 0 -1.5px 0 rgba(0,0,0,0.5),inset 1px 0 0 rgba(255,255,255,0.05),inset -1px 0 0 rgba(0,0,0,0.32);
  --shadow-recess:inset 0 1px 0 var(--edge-light),inset 0 -14px 22px -18px rgba(0,0,0,0.4);
  --section-atmos:none;
  /* --scene-* tokens intentionally NOT overridden: the pixel-art scene stays
     fixed-light in dark theme by design */
}

/* ---- shared left-anchored section head ----
   The one definition for the left-aligned, width-matched section head.
   Unifies the former split: home's .section__head--left (no width) and the
   product pages' .section__head--figrow (max-width:960px). Both now use this
   single class. Width matches the ~960px mockup panels so the head's left edge
   lines up with the grid/panel below it. */
.section__head--left{max-width:960px;margin-left:0;margin-right:auto;text-align:left}