/* =========================================================================
   THE 22 TOKENS — from design/DESIGN-SPEC.md (v1 FROZEN 14 Sep 2026).
   Source: Figma hSTpM1FQrsGeBrKARwV4Xr, frame 3007:40 (1920). Mobile floors
   provisional until Alex's 430 frames land (15 Sep); recalibrate here only.
   Components reference these tokens and never hardcode. Type and space scale IN
   PROPORTION to the viewport (value ÷ 19.2 vw), exactly as the Figma prototype scales
   the 1920 frame down (spec v1.3, 14 Sep); floors = provisional mobile minimums.
   ========================================================================= */

:root {

  /* --- COLOUR (spec §2) --------------------------------------------------- */
  --bg:        #000000;                 /* page ground, dark sections           */
  --ink-2:     #222421;                 /* Figma "Black" — cards, text on paper */
  --ink-3:     #161715;                 /* feature-card tile, a step darker than ink-2 (Chiara 22 Sep) */
  --paper:     #F3EFE8;                 /* nav link colour, light text          */
  --paper-2:   #EBE9E6;                 /* newsletter band, form field ground   */
  --white:     #FFFFFF;
  --white-50:  rgba(255, 255, 255, 0.5);
  --white-25:  rgba(255, 255, 255, 0.25);
  --white-10:  rgba(255, 255, 255, 0.10);
  --accent:    #E2F381;                 /* Mindaro — OQ-1 resolved: toolkit value */
  --line:      #D9D9D9;
  --line-dark: rgba(255, 255, 255, 0.18);
  --nav-glass: rgba(255, 255, 255, 0.22);
  --nav-blur:  25px;
  --scrim-side:   linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
  --scrim-top:    linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
  --scrim-bottom: linear-gradient(0deg,   rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
  --scrim-spot:   radial-gradient(ellipse 45% 42% at 50% 50%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.64) 55%, rgba(0,0,0,0) 100%);   /* Insider copy: photos dim only behind the text (Ben 15 Sep) */
  --scrim-spot-phone: radial-gradient(ellipse 95% 36% at 50% 50%, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.66) 55%, rgba(0,0,0,0) 100%);   /* phones: copy runs full width, so the spotlight is wider and shallower */
  --scrim-spot-phone-tall: radial-gradient(ellipse 110% 58% at 50% 50%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.72) 60%, rgba(0,0,0,0) 100%);   /* phones, long copy over a strip (Sessions London: eyebrow, body, quote, button) (29 Sep) */
  --stripe-fill:  linear-gradient(90deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%);
  --statement-bg: #000000;              /* Alex 16 Sep: no grey grounds, black only (was a #1C1C1C -> #000 gradient) */

  /* --- TYPE FAMILIES (spec §3, §7) — self-hosted latin woff2 in /fonts ---- */
  --font-display: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* --- TYPE SCALE — one ladder, 8 sizes (spec §3) --------------------------- */
  --type-mega:    clamp(72px, 12.5vw, 240px);   /* one-word statements (Sessions "Ready?") */
  --type-display: clamp(36px, 3.1771vw, 61px);  /* section H2s            */
  --type-display-sm: clamp(31px, 2.8878vw, 56px);  /* display minus 5px at every width (Chiara 22 Sep): the two-column intro headings (Work with Ben, Insider, Learn) */
  --type-display-lg: clamp(44px, 4.1667vw, 80px);  /* between display and stat (Chiara 17 Sep): the meetup cities line */
  --type-display-xl: clamp(40px, 4.2245vw, 82px);   /* lede statements (Sessions 'Inside the room'): 10px under the first cut at every width, 73 @1728 (Chiara 23 Sep) */
  --type-stat:    clamp(72px, 7.2917vw, 140px);  /* big numbers (Chiara 17 Sep): above display, for stats only. 105px at 1440, 126px at 1728 */
  --type-display-wide: clamp(34px, 3.0208vw, 58px);  /* display headings that must hold one line; bigger on phones and on a 16in screen (Chiara 16 Sep) */
  --type-fine:         clamp(12px, 0.6771vw, 13px);  /* form notes and legal lines */
  --type-h2:      clamp(30px, 2.3438vw, 45px);  /* Ben Nichols            */
  --type-h3:      clamp(28px, 2.1354vw, 41px);  /* card titles            */
  --type-lead:    clamp(22px, 1.8750vw, 36px);  /* quote, footer links */
  --type-lead-intro: clamp(24px, 1.8750vw, 36px); /* loader strapline — a step below the hero line (Chiara 15 Sep) */
  --type-lead-hero: clamp(28px, 2.2917vw, 44px); /* hero + loader strapline — 44 @1920 (Chiara 15 Sep: one step above Figma's 36), 28px phone floor */
  --type-sub:     clamp(19px, 1.4583vw, 28px);  /* Baskerville sub copy   */
  --type-sub-nl:  clamp(27px, 1.9271vw, 37px);  /* newsletter subheading — +4 again, desktop and phone (Chiara 16 Sep) */
  --type-lead-page: clamp(19px, 1.3542vw, 26px); /* inner-page hero lead — a step above Alex's 23 (Chiara 16 Sep) */
  --type-body:    clamp(16px, 1.0417vw, 20px);  /* Inter body             */
  --type-meta:    clamp(13px, 0.8333vw, 16px);  /* eyebrows, legal        */
  --type-nav:     clamp(12px, 0.7292vw, 14px);  /* nav links, text links  */

  --lh-display: 1.21;
  --lh-heading: 1.15;
  --lh-lead:    1.3;
  --lh-body:    1.5;
  --track-caps: 0.15em;   /* eyebrows (Figma 2.4px @16)      */
  --track-nav:  0.05em;   /* nav links (Figma 0.7px @14)     */
  --track-cta:  0.06em;   /* CTA labels — opened up at the smaller size */

  /* --- SPACE SCALE (spec §4) ---------------------------------------------- */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  clamp(28px, 2.0833vw, 40px);
  --space-xl:  clamp(40px, 3.3333vw, 64px);
  --space-hero-gap: clamp(90px, 8.6806vw, 167px);   /* the space under a page hero (Chiara 16 Sep): 150px at 1728, her screen. Sits above 2xl, so it is named for its job rather than a scale step */
  --space-2xl: clamp(64px, 6.2500vw, 120px);
  --space-3xl: clamp(96px, 10.4167vw, 200px);
  --col-gap:   clamp(12px, 1.0417vw, 20px);      /* Figma 20 @1920 */

  /* --- LAYOUT (spec §5) --------------------------------------------------- */
  --gutter: clamp(20px, 5.2083vw, 100px);        /* 100 @1920      */
  --max-w:  1720px;
  --radius:      5px;
  --radius-pill: 50px;
  --radius-lg:   clamp(20px, 1.5vw, 28px);         /* feature cards (Insider membership, ref apple.com/ipad-pro): a soft rectangle, not a pill (Alex 22 Sep) */
  --logo-tile-h: clamp(76px, 7.6vw, 110px);        /* Insider member-logo tile height (22 Sep) */
  --nav-h:       clamp(48px, 3.2812vw, 63px);
  --nav-top:     clamp(12px, 2.0312vw, 39px);

  /* --- BUTTON — client system (spec §6) ----------------------------------- */
  --cta-h:       40px;                                  /* Chiara 14 Sep: 40 everywhere (Aura house height) */
  --cta-h-sm:    40px;
  --cta-pad-x:   clamp(20px, 1.4583vw, 28px);
  --cta-radius:  var(--radius-pill);
  --cta-font:    var(--font-body);
  --cta-size:    var(--type-nav);                        /* 14 → 12: same rung as the nav caps (Chiara 14 Sep) */
  --cta-weight:  500;

  /* --- MOTION (motion spec) ------------------------------------------------ */
  --ease-out:  cubic-bezier(.22, .61, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --dur:       0.35s;
  --dur-reveal: 0.6s;
}

/* Phone calibration — Alex's 430px mobile frames (15 Sep), measured against the build by text width.
   Floors held: paragraphs ≥ 16px, button labels ≥ 12px (Chiara: readable over Alex's 11–13px). */
@media (max-width: 640px) {
  :root {
    --type-sub: 16px;   /* Alex ≈ 16 (statement paragraph) — was 19 */
    --type-sub-nl: 22px;   /* lead step on the 5 Oct ladder, was 28 (it sat almost level with the 32 H2 above it) —  Alex 16 Sep: newsletter "What's shaping the sport…" above --type-sub on phones; bumped again 16 Sep */
    /* Phone type ladder (Chiara 5 Oct audit): five clear steps, H1 36 > H2 32 > H3 22 > lead 19–22 > body 16.
       Before: H2 ran at 28 to 40 (five sizes), H3 28 equalled section H2 28, and a 28px lead matched both. */
    --type-display: 32px;      /* every H2 */
    --type-display-sm: 32px;
    --type-display-wide: 32px;
    --type-display-xl: 32px;   /* Sessions 'Inside the room' was 40 */
    --type-display-lg: 36px;   /* the cities line */
    --type-h2: 32px;           /* 'Ben Nichols' */
    --type-h3: 22px;           /* card and block titles, was 28 */
    --type-lead: 22px;         /* quotes and leads, was 28 */
    --type-h1: 36px;           /* page-hero H1, one step above H2 */
  }
}