/* ==========================================================================
   tokens.css — the single source of design values
   BRAND_GUIDE.md §11 (verbatim) + §3.2 fluid type scale.
   Load FIRST, before every other stylesheet.
   ========================================================================== */

/* --- §11 CSS Custom Properties (drop-in, verbatim) --------------------- */
:root {
  /* color — strictly monochromatic grays (R=G=B) per §2.1 neutrality rule */
  --paper:#F2F2F2; --surface:#FAFAFA; --surface-2:#E9E9E9;
  --ink:#111111; --ink-60:#5A5A5A; --ink-30:#B0B0B0; --line:#DCDCDC;
  --dark:#0E0E0E; --dark-surface:#1A1A1A; --paper-on-dark:#ECECEC;
  --accent:#C8321F; --accent-hover:#A82817; --accent-tint:#F6E8E5;
  /* One red sitewide. This was #E4523C, a lifted variant for dark grounds, and
     it read as orange next to the real accent — eyebrows on dark bands, footer
     link hovers and the footer logo dot all drifted warm. Aliased to --accent so
     every hover and highlight on the site is literally the same colour; the
     token stays as a named hook in case a lifted variant is ever wanted back. */
  --accent-on-dark:#C8321F;
  /* red-field — home hero only (§2.5); the ONLY gradient on the site */
  --accent-field:linear-gradient(135deg,#D23A25 0%,#C8321F 45%,#A82817 100%);
  --paper-on-accent:#F5F5F5; --paper-on-accent-70:rgba(245,245,245,0.72);
  --line-on-accent:rgba(245,245,245,0.28); --accent-well:#B72D1B;
  /* type — Inter carries the whole site (display, body, and numerals) */
  --font-sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-tech:var(--font-sans);
  --track-label:0.14em;
  /* layout */
  --max-w:1440px; --gutter:24px; --margin:clamp(20px,5vw,80px);
  --frame-inset:clamp(12px,2vw,24px);
  /* motion */
  --ease-out:cubic-bezier(0.22,1,0.36,1); --ease-move:cubic-bezier(0.65,0,0.35,1);
  --t-micro:180ms; --t-reveal:600ms;
  /* radius */
  --radius:2px; --radius-circle:50%;
}

/* --- §3.2 Fluid type scale (clamp values as specified) ---------------- */
:root {
  --type-hero:    clamp(56px, 9vw,   128px);  /* 500 · -0.03em  */
  --type-h1:      clamp(40px, 5.5vw,  72px);  /* 500 · -0.025em */
  --type-h2:      clamp(28px, 3.5vw,  44px);  /* 500 · -0.02em  */
  --type-h3:      clamp(20px, 2.2vw,  26px);  /* 600 · -0.01em  */
  --type-body-lg: clamp(18px, 1.6vw,  21px);  /* 400 · lh 1.55  */
  --type-body:    clamp(16px, 1vw,    17px);  /* 400 · lh 1.65 · max 68ch */
  --type-caption: 13px;                       /* 400 · 0.01em   */
  /* The letterspaced-caps voice — nav links, section eyebrows, the category and
     status lines on each Selected Work panel, button and CTA labels, meta-table
     labels. Raised to 1.2× the guide's original 11–12px: enough to stop the
     caps reading as fine print, without turning them into a second headline. */
  --type-label:   clamp(13.2px, 1.08vw, 14.4px); /* 500 · 0.14em · UPPERCASE */
  --type-index:   13px;                       /* 500 · 0.06em · Inter tabular */
  --type-stat:    clamp(48px, 6vw,    96px);  /* 500 · -0.03em · tabular */

  /* line-heights paired with the scale */
  --lh-display: 1.02;
  --lh-heading: 1.08;
  --lh-lead:    1.55;
  --lh-body:    1.65;
}