/* =========================================================================
   WEDAWAYS TOKENS — from design/DESIGN-SPEC-DRAFT.md (FROZEN v1, 17 Jul 2026).
   Source: Figma a5kqPxSwlwuvioEmDRyGdu, frames 2013:797 (1920) / 6271:1642 (430).
   Components reference these tokens and never hardcode. Type and space scale
   fluidly via clamp() (linear 430→1920), so media queries are layout flips only.
   ========================================================================= */

:root {

  /* --- COLOUR — brand palette (Visual Guidelines v1.2 / Figma variables) ---
     Semantic name ← brand name. Ebony = #332E29 per Figma (spec OQ#1). */
  --bg:        #FBF9F6;   /* Alabaster — page base, nav bar, on-dark text     */
  --surface:   #ECE9E5;   /* Limestone — section bands, on-image text         */
  --ink:       #332E29;   /* Ebony — primary text                             */
  --accent:    #998772;   /* Linen — numbers, CTAs, chips, footer band        */
  --line:      #998772;   /* hairline rules render in Linen in the design     */

  /* scrims + effects (exact Figma fills) */
  --scrim-hero:      rgba(0, 0, 0, 0.32);   /* Figma 0.20 — Chiara: darker */
  --scrim-hero-grad: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.70) 100%);
  --scrim-card-grad: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.86) 100%);
  --chip-bg:         rgba(153, 135, 114, 0.25);
  --nav-shadow:      0 4px 4px rgba(0, 0, 0, 0.25);
  --shadow-panel:    0 18px 40px rgba(28, 28, 27, 0.08);   /* wide + faint — dropdown panel lift */

  /* --- TYPE FAMILIES — self-hosted woff2 in /fonts -------------------------
     Kudryashev Display (licensed — client annual licence Jun 2026).
     Lato 300/400/700 (700 stands in for Figma's SemiBold 600). */
  --font-display: 'Kudryashev Display', Georgia, serif;
  --font-body:    'Lato', 'Helvetica Neue', sans-serif;

  /* --- TYPE SCALE — one ladder (spec §3b) ---------------------------------- */
  --type-display: clamp(33px, 23.06px + 2.3112vw, 63px);  /* hero H1, step numbers */
  --type-h1:      clamp(29px, 24.67px + 1.0067vw, 44px);  /* section H2s, card/story titles, newsletter H — Chiara 21 Jul: 55 → 44; 23 Jul: mobile floor 27 → 29 */
  --type-h2:      clamp(22px, 18.25px + 0.8725vw, 35px);  /* hero subhead (lh 1.2) — 23 Jul: mobile floor 20 → 22 */
  --type-stat:    clamp(45px, 32.41px + 2.9276vw, 83px);  /* stat numbers */
  --type-body:    clamp(16px, 15.13px + 0.2013vw, 19px);  /* Lato Light, lh 1.39 — Chiara: cap 19 (Figma 23 → 21 → 20 → 19); 23 Jul: mobile floor 14 → 16 */
  --type-sub:     clamp(14px, 13.01px + 0.2311vw, 17px);  /* Lato 700; property names — Chiara 21 Jul: 19 → 17 */
  --type-eyebrow: clamp(10px, 9.01px + 0.2311vw, 13px);   /* Lato 400, caps, ls .15em — Chiara 21 Jul: 17 → 13 */
  --type-meta:    clamp(12px, 10.67px + 0.3082vw, 16px);  /* Lato 700; chips, form text */
  --type-menu:    clamp(17px, 15.34px + 0.3852vw, 22px);  /* Kudryashev; dropdown menu links (desktop) */

  --lh-heading: 1.09;
  --lh-body:    1.39;
  --lh-body-tight: 1.26;   /* on-image copy, journal, footer links */

  /* --- SPACE SCALE (spec §4) ---------------------------------------------- */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  clamp(24px, 18.70px + 1.2327vw, 40px);
  --space-xl:  clamp(40px, 32.05px + 1.8490vw, 64px);
  --space-2xl: clamp(56px, 42.75px + 3.0817vw, 96px);
  --space-3xl: clamp(88px, 67.46px + 4.7766vw, 150px);
  --col-gap:   clamp(10px, 3.37px + 1.5408vw, 30px);

  /* --- LAYOUT (spec §5) ---------------------------------------------------- */
  --gutter: clamp(20px, 10.06px + 2.3112vw, 50px);
  --max-w:  1820px;

  /* --- BUTTON — client system, NOT the Aura house pill (spec §6) -----------
     Outline Linen pill; hover fills Linen, label goes Limestone. */
  --cta-h:        36px;    /* Chiara-calibrated round 2 (Figma 50 → 40 → 36) */
  --cta-h-sm:     32px;    /* compact pill — mobile menu pair (Figma drew 27; lifted for touch) */
  --cta-h-nav:    36px;
  --cta-h-mobile: 40px;
  --cta-radius:   42px;
  --cta-pad-x:    20px;   /* Figma 35 — Chiara-calibrated */
  --cta-font:     var(--font-body);
  --cta-size:     13px;   /* Chiara 17 Jul: 13px site-wide (Figma component drew 15px) */
  --cta-size-mobile: 11px;   /* Chiara 22 Jul: 12 read big vs 14px body (caps + tracking) */
  --cta-tracking: 0.09em;

  /* --- HAIRLINES ----------------------------------------------------------- */
  /* Every visible 1px line on the site — CTA underlines, active journal title,
     section rules, dividers. One token so they can never drift apart. */
  --hairline:        0.8px;   /* Chiara 21 Jul: was 1px */
  --underline-offset: 8px;    /* text→rule distance on the journal title */

  /* --- MOTION (MOTION-SPEC.md — refinement pass 22 Jul) ---------------------
     Two speeds only. Micro-interactions (hovers on links/buttons) use --ease/--dur
     and stay crisp. Anything that ENTERS or SETTLES (section reveals, crossfades,
     image breathe) uses --ease-float: a long decelerating tail that arrives with
     no bounce and no hard stop — light, not sluggish. Distances stay small
     (≤24px, scale ≤1.04): premium motion is felt, not watched. */
  --ease:       cubic-bezier(.22, .61, .36, 1);
  --ease-float: cubic-bezier(.16, 1, .3, 1);
  --dur:        0.3s;
  --dur-slow:   0.6s;
  --dur-xslow:  1.1s;     /* fades, crossfades, image breathe */
  --dur-float:  1.6s;     /* the settle — transform tail on entrances */
  --stagger:    0.12s;    /* one beat: content leads, CTA follows */
}