/* ============================================================
   PALOMA — TOKENS
   Names mirror the Figma variables 1:1 (Paloma collection, 50 vars).
   Figma emits these exact var() names (WEB code-syntax is set),
   so anything copied from Dev Mode drops straight in.
   Single source of truth — never hardcode a value that lives here.
   ============================================================ */
:root{
  /* color */
  --color-paper:#F8F5F0;
  --color-card:#FFFFFF;
  --color-card-warm:#FBF9F6;
  --color-ink:#081D47;
  --color-ink-75:rgba(8,29,71,.75);
  --color-ink-65:rgba(8,29,71,.65); /* AA-safe (5.1:1 on paper) alternative to
     --color-ink-50 (3.23:1, fails AA) for actual text -- --color-ink-50 itself is
     kept for non-text uses (e.g. .wd-calc__rule, a decorative divider line) */
  --color-ink-50:rgba(8,29,71,.5);
  --color-blue:#2E40DC;
  --color-border:rgba(46,64,220,.1);
  --color-blue-50:rgba(46,64,220,.5);
  --color-blue-20:rgba(46,64,220,.2);
  --color-blue-05:rgba(46,64,220,.05);
  --color-blue-02:rgba(46,64,220,.02);
  --color-amber:#FDAD03;
  --color-coral:#D9583B;

  /* space (base 8). --space-5 and up were dialed down ~10% in the
     22 Sep size pass (user feedback: the whole site read as if it
     needed a 90% browser zoom to feel right) — 1–4 are left alone
     since they're already tight micro-spacing, not what was reading
     as oversized. */
  --space-1:8px;  --space-2:12px; --space-3:16px; --space-4:24px;
  --space-5:28px; --space-6:36px; --space-7:44px; --space-8:72px; --space-9:108px;

  /* radius */
  --radius-button:4px; --radius-badge:8px; --radius-tile:12px; --radius-card:24px;

  /* font family */
  --font-family-serif:"Postman's Serif",Georgia,serif;
  --font-family-display:"Funnel Display",system-ui,sans-serif;
  --font-family-body:"Funnel Sans",system-ui,-apple-system,sans-serif;
  --font-family-mono:"JetBrains Mono",ui-monospace,monospace;

  /* font weight */
  --font-weight-light:300; --font-weight-regular:400; --font-weight-medium:500;
  --font-weight-semibold:600; --font-weight-bold:700;

  /* font size. Display/heading/lead sizes were dialed down ~10% in the
     22 Sep size pass (see --space-5 and up above — same pass, same
     reasoning: the site read as if it needed a 90% browser zoom to
     feel right, so the fixed-px display sizes came down a notch
     rather than telling people to zoom out). --font-size-body,
     --font-size-label and --font-size-meta are left at their existing
     values on purpose — they're already at or near the floor for
     comfortable/accessible reading, and weren't what was reading as
     oversized; the hero H1 wrapping to 4 lines on an ordinary laptop
     viewport was the clearest symptom, not body copy. */
  --font-size-h1:72px; --font-size-h2:56px; --font-size-h3:36px; --font-size-quote:24px;
  --font-size-title:20px; --font-size-stat:28px; --font-size-timeline:24px;
  --font-size-lead-lg:20px; --font-size-lead:18px; --font-size-body:16px;
  --font-size-label:16px; --font-size-button-l:18px; --font-size-button-m:14px; --font-size-meta:12px;

  /* font size — mobile (≤700px) overrides, verified against the Figma mobile frame
     (5438:106451, 360px "paloma-homepage-mobile"). h1/h2 flatten to one headline
     size on mobile, which is why they reuse --font-size-h3 below instead of a new
     variable. --font-size-label-mobile is the one genuinely new value — titles,
     body copy and stat numbers are unchanged at this breakpoint. */
  --font-size-label-mobile:14px;

  /* line-height & tracking (no Figma variable type exists for these — kept here for parity) */
  --lh-tight:1.1; --lh-title:1.2; --lh-body:1.5;
  --track-tight:-.02em; --track-label:.06em; --track-button:.02em;

  /* layout */
  /* Narrowed content column (reference: elevenlabs.io) — a real fixed cap,
     not just a slow-growing one, so it locks in at ordinary laptop widths
     and holds there rather than keeping pace with the viewport on big
     monitors. --wrap-max sized as content + 2×gutter-ceiling so the padding
     clamp and the outer cap reach their limits together instead of leaving
     a wide window where content keeps growing after the gutter has already
     maxed out (the old 1440/1680 pair left a 240px such window). */
  --content-max:1176px;
  --wrap-max:1464px;                       /* 1176 content + 2×144 gutter */
  --gutter:clamp(24px,10vw,144px);         /* 144px ceiling (was 160, -10% in the
     22 Sep size pass), 24px floor */
}
/* Mobile: side gutter pinned to exactly 24px on every page/section (all of
   them read --gutter — .container, the .what__strip scroller inset, etc.).
   The fluid 10vw curve gave 39px on a 390px phone, which ate too much of an
   already narrow column; 10vw only reaches 24px at 240px wide, so a plain
   clamp floor alone can't pin it — needs its own breakpoint. */
@media(max-width:640px){
  :root{--gutter:24px}
}