/* tokens.css — GENERATED from src/styles/tokens.css (wordpress-port S2). Do not hand-edit; source is src/styles/tokens.css + generate-theme-json.cjs */
/* tokens.css — the single source of truth for ALL colours, typography, spacing,
   radii, and motion (bead yodowebsite-48k.1.3; PLAN §3 reconciled with .impeccable §4).
   Every component reads these vars and hardcodes nothing. Gold contrast verified:
   #CEC60B on #161A1D ~9.7:1 (AAA) — no second "legibility gold" needed; --gold-bright
   is a hover-only flourish. Source files are UTF-8 so the ₦ glyph stays intact. */
:root {
  /* surfaces */
  --surface-1000: #000;
  --surface-900: #161A1D;   /* BASE surface — most sections */
  --surface-800: #1E2329;   /* panels / cards */

  /* text */
  --text: #F5F3F4;          /* primary */
  --text-strong: #FFF;      /* emphasis */
  --text-muted: #ADB4BF;    /* secondary */

  /* accent — gold is punctuation, never wallpaper (guardrail #3) */
  --gold: #CEC60B;
  --gold-bright: #E6DD2E;   /* hover-only flourish */
  --on-gold: #161A1D;       /* text on gold fills — 9.7:1 (AAA) */
  --border: rgba(245, 243, 244, 0.12);  /* hairline dividers */

  /* state — the only colour outside the brand palette: form-validation error.
     On the input's --surface-1000 (#000) background it is 6.32:1 (AA for the 14px hint). */
  --error: #E2675B;

  /* fonts — ONE variable family; "display" = expanded WIDTH via font-variation-settings.
     Pair font-family + its --vfs-* on the same selector: the wdth axis does NOT inherit
     reliably when a child overrides font-family alone (guardrail #4). */
  --font-display: "Archivo Variable", "Archivo Fallback", sans-serif;
  --font-text: "Archivo Variable", "Archivo Fallback", sans-serif;
  --vfs-display: "wght" 700, "wdth" 125;  /* expanded — hero + manifesto ONLY */
  --vfs-text: "wght" 400, "wdth" 100;

  /* type scale (fluid clamps, mobile -> desktop) */
  --fs-hero: clamp(2.5rem, 8vw, 4.75rem);   /* ~40px -> 76px */
  --fs-h1: clamp(2rem, 4vw, 3.5rem);        /* ~32px -> 56px */
  --fs-h2: clamp(1.625rem, 3vw, 2.5rem);    /* ~26px -> 40px */
  --fs-h3: clamp(1.25rem, 2vw, 1.75rem);    /* ~20px -> 28px */
  --fs-body: clamp(1rem, 1.2vw, 1.125rem);  /* ~16px -> 18px */
  --fs-small: 0.875rem;                     /* 14px */
  --fs-label: 0.75rem;                      /* 12px — eyebrows */
  --fs-statement: clamp(2rem, 4.5vw, 3.25rem);   /* big-statement tier (ops statements, proof numbers, chapter names) */
  --fs-display-2: clamp(2rem, 4.5vw, 3.25rem);   /* secondary display tier — company names, statements (restored 2026-09-11: dropped in S2 copy, used by CompanyShowcase) */
  --lh-display: 1.05;                       /* hero/display setting (spec §4) */
  --lh-tight: 1.08;
  --lh-h1: 1.1;                             /* spec §4 table */
  --lh-h2: 1.15;
  --lh-snug: 1.2;
  --lh-body: 1.6;
  --track-display: -0.02em;                 /* display + h3 */
  --track-heading: -0.027em;                /* h1 + h2 per spec §4 */
  --track-micro: 0.06em;                    /* status tags, indexes, micro-labels */
  --track-label: 0.08em;                    /* eyebrows +0.08em */

  /* spacing (4px base scale) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --s16: 64px;
  --s20: 80px;
  --s30: 120px;
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-py: clamp(48px, 10vw, 120px);   /* ~48px mobile -> ~120px desktop */

  /* radii */
  --radius: 8px;
  --radius-pill: 9999px;

  /* motion — timings + 3 named easings */
  --dur-micro: 180ms;   /* hover micro-interactions */
  --dur: 400ms;         /* standard transitions */
  --dur-reveal: 500ms;  /* scroll reveals */
  --dur-slow: 800ms;    /* hero carousel cross-fade */
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);   /* reveals */
  --ease-snap: cubic-bezier(0.165, 0.84, 0.44, 1);   /* hover/micro */
  --ease-drama: cubic-bezier(0.77, 0, 0.175, 1);     /* headline reveal — the one dramatic beat */
}