/* ============================================================
   TOKENS
   ------------------------------------------------------------
   The :root block below is carried forward VERBATIM from the
   2026-09-15 homepage. Those values were tuned against real
   Archivo web rendering, and data/tokens.json says explicitly
   that they win over the Figma-measured numbers, because Figma
   has no 94% width axis and renders ~4% wider.

   DO NOT regenerate this file from data/tokens.json.
   Run `python3 tools/check-tokens.py` instead: it reports drift
   between the two without overwriting the tuning.
   ============================================================ */
/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --bone:#F4F3EC;
  --bone-2:#EAE8DC;
  --ink:#14140F;
  --ink-2:#5A5A6E;
  --blue:#1E27D6;
  --hot:#F24711;
  --line:rgba(20,20,15,.16);
  --line-2:rgba(20,20,15,.28);
  --on-blue-dim:#BFC3F5;
  --on-hot-dim:#330D02;
  --paper:#FFFFFF;
  --hot-ink:#8C2A0B;          /* orange family, AA on light grounds */
  --rule-on-blue:rgba(255,255,255,.4);

  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;

  --pad-x:clamp(18px,4.2vw,58px);
  --maxw:1680px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* Motion. Short for colour, a little longer for movement, slowest for
     image scale so a zoom never feels snappy on a calm page. */
  --dur-quick:.2s;
  --dur-base:.32s;
  --dur-slow:.6s;

  --step-label:clamp(.78rem,.9vw,.86rem);
  --step-body:clamp(1rem,1.05vw,1.15rem);
  --step-lead:clamp(1.18rem,1.7vw,1.6rem);
  --step-h3:clamp(1.9rem,3.4vw,3.2rem);
  --step-h2:clamp(2.4rem,5.4vw,5.2rem);
  --step-case:clamp(2.9rem,7.2vw,6.5rem);   /* case study title, 104px at 1440 */

  /* --- added 2026-09-22: alpha tokens from the Figma collection ---
     Each translucent value is its own token because a bound variable's
     alpha overrides paint opacity. Use as-is, never with opacity. */
  --rule-on-ink:rgba(244,243,236,0.22);     /* rule on ground/ink */
  --hot-10:rgba(242,71,17,0.1);             /* orange wash fill */
  --on-ink-78:rgba(244,243,236,0.78);       /* primary text on ground/ink, band captions */
  --on-ink-72:rgba(244,243,236,0.72);       /* secondary text on ground/ink */
  --on-ink-62:rgba(244,243,236,0.62);       /* tertiary text on ground/ink */

  /* --- layout, from data/tokens.json layout.* --- */
  --content-w:1324px;
  --maxw-frame:1440px;
  --meta-col:306px;
  --meta-cols:4;

  /* --- case study section rhythm (vertical only; x uses --pad-x) --- */
  --pad-backBar-t:20px; --pad-backBar-b:20px; --gap-backBar:0px;
  --pad-hero-t:120px; --pad-hero-b:90px; --gap-hero:30px;
  --pad-leadBand-t:0px; --pad-leadBand-b:32px; --gap-leadBand:0px;
  --pad-idea-t:115px; --pad-idea-b:64px; --gap-idea:58px;
  --pad-closerLook-t:32px; --pad-closerLook-b:115px; --gap-closerLook:58px;
  --pad-process-t:115px; --pad-process-b:115px; --gap-process:58px;
  --pad-palette-t:115px; --pad-palette-b:115px; --gap-palette:58px;
  --pad-nextProject-t:46px; --pad-nextProject-b:110px; --gap-nextProject:22px;
  --pad-footer-t:72px; --pad-footer-b:72px; --gap-footer:48px;
}