/* ============================================================================================
   ITG DESIGN TOKENS — the single source of truth for colour, type, space and motion.
   Loaded FIRST. Contains variables only, no component styling.

   THE CONTEXT RULE: a module never hardcodes a colour. It reads --fg / --accent / --eyebrow and
   the surrounding band redefines them. That is what makes a component work on a dark ground and
   on the white band without a second copy — and it makes the brand's lime rule structural:
   #96ff00 is forbidden on light grounds, so --accent simply IS #8ed800 there.

   Extracted from index.html 2026-08-14 so every page can share it.
   ============================================================================================ */

:root{
  /* ── brand palette (knowledge/itg/brand.md) ───────────────────────────────────────────── */
  --itg-lime-dark:#96ff00;    /* lime on DARK grounds only */
  --itg-lime-light:#8ed800;   /* lime on LIGHT grounds only */
  --itg-cyan:#36ecff;
  --itg-blue:#0661aa;
  --itg-ink:#04060a;          /* page ground */
  --itg-near-black:#1b242a;
  --itg-surface:#0a0e12;      /* card surface on dark */
  --itg-navy:#0f3557;
  --itg-white:#ffffff;

  /* ── type ─────────────────────────────────────────────────────────────────────────────── */
  --font:'Titillium Web',sans-serif;
  --w-body:400;
  --w-strong:700;
  --w-display:900;            /* web-display only; see brand.md, approved 2026-08-13 */
  --t-display:84px;   --lh-display:0.92;
  --t-h2:46px;        --lh-h2:1.02;
  --t-term:22px;     /* accented term headings: def-list terms and feature-card titles */
  /* 20px -> 32px on 2026-08-14. The token had NO consumer at 20px, so nothing moved; it now has
     one (`.sec-title--h3`, the host names on about.html) and needed a value that reads as a title
     under a 46px section heading rather than as a label. Scale: 84 display / 46 h2 / 32 h3 /
     22 term / 20 body / 17 small. */
  --t-h3:32px;
  --t-body:20px;      --lh-body:1.65;
  --t-small:17px;
  --t-eyebrow:20px;
  --t-label:14px;
  /* Added 2026-08-14 by the audit. Both were already in the system as repeated literals, which is
     the definition of a missing token:
       16px on .btn-ghost, .input, .textarea, .fcard-d  -> --t-ui   (interface text)
       13px on .field-l, .ab-host .h-role, .ab-host .h-info -> --t-meta (labels, captions)
     Values chosen to match what was there, so nothing moves. */
  --t-ui:16px;
  --t-meta:13px;
  --track-tight:.01em;
  --track-label:.08em;

  /* ── motion ───────────────────────────────────────────────────────────────────────────── */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.28s;

  /* ── radius ───────────────────────────────────────────────────────────────────────────── */
  --r-card:16px;
  --r-badge:20px;
  --r-pill:999px;

  /* ── layout measures ──────────────────────────────────────────────────────────────────── */
  --measure-grid:1280px;      /* default: anything with a grid or a side-by-side row */
  --measure-prose:1080px;     /* centred text-only sections; line-length driven */
}

/* ── CONTEXT SETS ───────────────────────────────────────────────────────────────────────────
   .ctx-dark is the default. .ctx-light is applied by the white band.
   --fg-muted differs by more than an inverted alpha ON PURPOSE: light-on-dark type expands
   optically and dark-on-light contracts, so a mirrored .75 read washed and thin on white
   (6.91:1 vs 20.28:1). Same reason --w-body-ctx steps up on light. */
:root,.ctx-dark{
  --fg:var(--itg-white);
  --fg-muted:rgba(255,255,255,.72);
  --accent:var(--itg-lime-dark);
  --accent-text:var(--itg-lime-dark);   /* 16.03:1 on ink — safe as type here */
  --eyebrow:var(--itg-cyan);
  --line:rgba(255,255,255,.14);
  --surface:var(--itg-surface);
  --w-body-ctx:var(--w-body);
  --glow:0 0 30px rgba(150,255,0,.5);
  /* PILL — the hero chip's edge and fill, generalised so any tag row can use it. The fill is the
     page ground, not transparent: these sit over the dot grid and the lines run straight through
     an unfilled chip (the exact bug the home's hero pill had). */
  --pill-edge:rgba(150,255,0,.45);
  --pill-bg:var(--itg-ink);
}
.ctx-light,.itg-light{
  --fg:var(--itg-near-black);
  --fg-muted:var(--itg-near-black);
  --accent:var(--itg-lime-light);
  /* ACCENT vs ACCENT-TEXT — the distinction the system was missing (2026-08-14, measured).
     --accent is a GRAPHIC colour: fills, rules, wipes, markers. --accent-text is for TYPE.
     On dark they are the same value because lime hits 16.03:1 on ink. On WHITE the brand lime
     #8ed800 measures 1.75:1, which fails even the 3:1 large-text floor, so accented type here
     must be ITG Blue (6.37:1). Never set type to var(--accent) on a light ground. */
  --accent-text:var(--itg-blue);
  --eyebrow:var(--itg-blue);
  --line:rgba(27,36,42,.12);
  --surface:var(--itg-white);
  --w-body-ctx:600;
  /* NO GLOW ON LIGHT. A glow simulates emitted light; white is already at maximum luminance so
     there is nothing to illuminate, and the spread reads as a blurry halo rather than as light.
     On light grounds the hover is carried by fill and border alone. (2026-08-14, Nico) */
  --glow:none;
  /* Lime cannot draw the edge here for the same reason it cannot draw type: ITG Blue does it.
     No fill either — there is no grid showing through a white band. */
  --pill-edge:rgba(6,97,170,.35);
  --pill-bg:transparent;
}

/* ══ SECTION RHYTHM TOKENS ══ (2026-08-14, Nico) ═════════════════════════════════════
       THE KNOB. Every section's vertical padding derives from --sec-pad, so raising that one
       value adds air to the whole page at once. Seam between two sections = the bottom pad of
       one plus the top pad of the next.
         --sec-pad    between two sections that share a background. Seam = 2x this.
         --zone-pad   clearance from a colour-zone edge. Bigger on purpose: the band change is a
                      hard visual break, so content must not crowd it. Corrected 2026-08-14 —
                      the first model had this backwards, adding air between same-ground
                      sections and leaving the band edges tight.
         --sec-group  sections meant to read as ONE unit (video + episodes).
         --sec-tight  utility strips (the platform row).
       Two knobs: --sec-pad controls density inside a zone, --zone-pad controls the band edges. */
    :root{
      --sec-pad:64px;     /* BETWEEN sections inside one colour zone  -> seam 128 */
      --zone-pad:112px;   /* at the EDGE of a colour zone (band start/end) */
      --sec-group:40px;   /* sections that must read as ONE unit      -> seam 80  */
      --sec-tight:24px;   /* utility strips */
      --sec-pad-x:40px;
    }