/* =========================================================================
   tokens.css — custom properties ONLY. No selectors beyond :root / body.
   ========================================================================= */

:root {
  /* ---- Colour -------------------------------------------------------- */
  --mint:      #A8DDD3;
  --teal:      #1E7A6B;
  --teal-deep: #0E3F38;
  --bubblegum: #F6ADCD;
  --hot-pink:  #FF4FA3;
  --lilac:     #AEB8F7;
  --cream:     #FFF7EF;   /* page background */
  --sand:      #F4E3CE;
  --cocoa:     #5C3521;   /* body text — warm, never pure black */
  --ink:       #1A120C;

  /* RGB channels for rgba() composition (scrims, tints, shadows). */
  --ink-rgb:   26, 18, 12;
  --cocoa-rgb: 92, 53, 33;
  --cream-rgb: 255, 247, 239;

  /* ---- 60/30/10 section tints ---------------------------------------
     One pastel per section, held for the whole section.
     --section-tint is stepped on <body> as sections enter (4% wash).
     --card-tint is a SEPARATE layer written by card hover, so the two
     never overwrite each other. Both default to transparent. */
  --section-tint: transparent;
  --card-tint:    transparent;
  --tint-strength: .04;

  /* ---- Type ----------------------------------------------------------
     Fallback stacks are load-bearing: Google Fonts is the one remaining
     network dependency and the page must survive it failing. */
  --font-display: 'Fraunces', 'Times New Roman', Times, Georgia, serif;
  --font-script:  'Grand Hotel', 'Brush Script MT', 'Segoe Script', cursive;
  --font-ui:      'Bricolage Grotesque', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

  /* Fluid scale */
  --fs-hero:    clamp(52px, 11vw, 180px);
  --fs-display: clamp(38px, 6.4vw, 92px);
  --fs-h2:      clamp(30px, 4.4vw, 62px);
  --fs-h3:      clamp(21px, 2.1vw, 30px);
  --fs-script:  clamp(26px, 3.6vw, 52px);
  --fs-body:    clamp(15px, 1.05vw, 18px);
  --fs-lead:    clamp(17px, 1.35vw, 22px);
  --fs-small:   clamp(12px, .85vw, 14px);
  --fs-eyebrow: clamp(12px, .95vw, 15px);

  /* Fraunces variable axes — opsz 9..144, wght 100..900, SOFT 0..100, WONK 0..1
     opsz is an OPTICAL SIZE axis: it is meant to track the size the glyphs
     are actually rendered at, thickening hairlines and opening counters as
     type gets smaller. Left at one value it does nothing useful, so there is
     a step per type role rather than a single --wonk-sub everywhere. */
  --wonk-hero: 'opsz' 144, 'SOFT' 80, 'WONK' 1;   /* 90px+   display */
  --wonk-h2:   'opsz' 72,  'SOFT' 60, 'WONK' 1;   /* 30-90px headings */
  --wonk-sub:  'opsz' 48,  'SOFT' 30, 'WONK' 0;   /* 20-30px subheads */
  --wonk-body: 'opsz' 18,  'SOFT' 12, 'WONK' 0;   /* under 20px */

  /* Tracking scales INVERSELY with size. Display type needs the negative
     tracking that makes it look set rather than typed; small UI text needs
     none at all, and a flat -.03em on 12px labels closes the counters. */
  --track-hero: -.035em;
  --track-h2:   -.022em;
  --track-h3:   -.012em;
  --track-body:  0;
  --track-ui:    .01em;

  /* ---- Radii ---------------------------------------------------------- */
  --r-sm:   12px;
  --r-md:   22px;
  --r-lg:   40px;
  --r-pill: 999px;
  --r-arch: 50% 50% 0 0 / 32% 32% 0 0;

  /* ---- Spacing — 4px base --------------------------------------------- */
  --s-1:  4px;   --s-2:  8px;   --s-3:  12px;  --s-4:  16px;
  --s-5:  20px;  --s-6:  24px;  --s-8:  32px;  --s-10: 40px;
  --s-12: 48px;  --s-16: 64px;  --s-20: 80px;  --s-24: 96px;

  /* The 10vw term was the problem: at 1440 it resolved to 144px top AND
     bottom, so every section boundary was a 288px void and the page read
     as disassembled. Measured with tools/verify/rhythm.js — 21.6% of the
     page was empty space in gaps over 100px. */
  --pad-section: clamp(56px, 6vw, 112px);
  /* Statement breaks legitimately want air. Air means ~1.4x a normal
     section, not 3x. */
  --pad-statement: clamp(78px, 8.4vw, 157px);
  --pad-gutter:  clamp(20px, 4.2vw, 72px);
  --maxw:        1440px;
  --maxw-text:   62ch;

  /* ---- Motion ----------------------------------------------------------
     Durations scale with the SIZE of the thing moving. A 40px control and a
     full section sharing one duration is what makes an interface feel
     mechanical: small things should settle before you notice, large things
     should take long enough to be followed. */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-control: .18s;   /* buttons, chips, links, dots */
  --dur-fast:    .22s;
  --dur-card:    .4s;    /* cards, tiles, panels */
  --dur-mid:     .45s;
  --dur-section: .8s;    /* whole sections, page wipes */
  --dur-slow:    .9s;

  /* ---- Elevation --------------------------------------------------------
     Three stacked shadows, not one blur. Real light produces a tight
     contact shadow, a mid-range ambient one, and a wide soft cast; a single
     20px blur produces none of those and reads as a template. The alphas
     fall off faster than the radii grow, which is what keeps a stack from
     turning into grey mud. */
  --shadow-sm:
    0 1px 1px rgba(var(--cocoa-rgb), .05),
    0 2px 4px rgba(var(--cocoa-rgb), .05);
  --shadow-md:
    0 1px 2px rgba(var(--cocoa-rgb), .05),
    0 4px 8px rgba(var(--cocoa-rgb), .05),
    0 12px 28px rgba(var(--cocoa-rgb), .07);
  --shadow-lg:
    0 2px 4px rgba(var(--cocoa-rgb), .05),
    0 10px 20px rgba(var(--cocoa-rgb), .07),
    0 28px 56px rgba(var(--cocoa-rgb), .11);

  /* Semantic aliases — components refer to these, so the scale can be
     retuned in one place. */
  --shadow-card:  var(--shadow-md);
  --shadow-lift:  var(--shadow-lg);
  --shadow-panel:
    0 2px 6px rgba(var(--cocoa-rgb), .06),
    0 18px 40px rgba(var(--cocoa-rgb), .12),
    0 40px 90px rgba(var(--cocoa-rgb), .18);

  /* ---- Focus ----------------------------------------------------------
     The INK ring is the load-bearing indicator (17.44:1 on cream, 6.07:1
     against the pink halo). The hot-pink halo is decorative reinforcement
     only — hot pink on cream is 2.87:1 and must never carry the signal. */
  --focus-ring:  3px solid var(--ink);
  --focus-halo:  0 0 0 5px var(--hot-pink);
  --focus-offset: 3px;

  /* ---- Z-index ladder — named, no ad-hoc values anywhere else ---------- */
  --z-below:       0;
  --z-content:     1;
  --z-nav:       100;
  --z-totop:     200;
  --z-assistant: 300;
  --z-loader:    900;
  --z-cursor:   1000;

  /* ---- Component sizing ------------------------------------------------ */
  --nav-h:       clamp(72px, 7vw, 104px);
  --nav-h-solid: clamp(60px, 5.4vw, 76px);

  /* §4's visible title IS the rotating arc — its <h2> is u-sr-only — so the
     section must reserve this band above the cards. Declared at :root
     because BOTH .section--best (padding) and .arc (mask) read it, and a
     custom property declared on the child cannot be seen by the parent. */
  --arc-band: clamp(96px, 9vw, 140px);

  /* Hero bottom scrim. Computed, not guessed: at .88 alpha the darkest
     possible underlay still gives cream 12.73:1 and hot pink 4.43:1,
     which holds even when the photo is missing and the CSS fallback
     (cream -> sand gradient) shows through. */
  --hero-scrim: .88;

  /* Left-weighted headline scrim, added when the hero became a photographic
     slider. Value set by measurement against the LIGHTEST pixel of the
     brightest slide, not by eye — see suite M. */
  --hero-scrim-text: .66;

  /* Subpage title band. Higher than --hero-scrim-text because the band is
     ~40vh rather than a full viewport: the same fade has a third of the
     distance to travel, and both the nav and the title have to be legible
     inside it. Set from the rendered pixels of the brightest band (meni,
     slide-1 mint) in suite T, not scaled off the hero value. */
  --band-scrim: .78;
}