/* =====================================================================
   DESIGN TOKENS: the only file that defines colours, type and motion.
   Components use the semantic tokens (second block), never the raw
   palette, so a palette change happens here and nowhere else.
   ===================================================================== */
:root{
  color-scheme:dark;

  /* ---- Raw palette: "Graphite & Bone" ----
     Near-blacks and cool graphite greys, warm off-whites. Neutral, but
     not a flat black-and-white layer. */
  --onyx:#0a0a0b;
  --graphite:#1c1c1f;
  --charcoal:#2c2c30;
  --ash:#8e8e93;
  --stone:#aeaeb2;
  --silver:#d1d1d6;
  --bone:#efede8;
  --ivory:#faf9f6;

  /* ---- Semantic tokens: what components actually use ---- */
  --bg:#0b0b0c;                     /* page background (matches --scene-base) */
  --text:var(--ivory);             /* headings, primary text */
  --text-2:var(--silver);          /* strong secondary */
  --text-3:var(--stone);           /* body copy, captions: smallest readable */
  --text-4:var(--ash);             /* decorative only */
  --line:rgba(255,255,255,.12);    /* hairlines */
  --accent:var(--ivory);           /* primary actions (solid pill), focus ring */
  --accent-2:var(--bone);          /* lower stop of the primary pill */
  --on-accent:var(--onyx);
  --shadow:0,0,0;                  /* RGB for rgba(var(--shadow), a) */
  --signal:#e9b77f;                /* the one warm accent: friction markers, "now": use sparingly */
  --media-filter:none;             /* case images: full colour */

  /* Materials (see site.css): glass panels, inner tiles, controls */
  --glass-hi:rgba(255,255,255,.1);     /* top of a glass panel */
  --glass-lo:rgba(255,255,255,.035);   /* bottom of a glass panel */
  --glass-blur:36px;
  --tile:rgba(255,255,255,.075);       /* lighter tiles inside a panel */
  --tile-hover:rgba(255,255,255,.12);
  --smoked:rgba(10,10,11,.42);         /* darker glass (card back, sheet) */
  --surface:rgba(255,255,255,.035);    /* quiet cards that sit on the scene without blur */
  --surface-hover:rgba(255,255,255,.06);
  --hairline:rgba(255,255,255,.09);    /* borders on surfaces */

  /* The scene behind everything (site.css): near-black with one warm and one
     cool light. Raise the alphas for more atmosphere, lower them for less. */
  --scene-base:#0b0b0c;
  --scene-warm:rgba(233,183,127,.13);
  --scene-cool:rgba(120,150,210,.08);

  /* ---- Type ---- */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  --fs-display:clamp(2.75rem,1.2rem + 4.8vw,5.75rem);  /* hero */
  --fs-h1:clamp(2.5rem,1.4rem + 4.2vw,5rem);          /* page titles */
  --fs-h2:clamp(2.25rem,1.3rem + 3.4vw,4.25rem);      /* section headlines */
  --fs-h3:clamp(1.375rem,1.15rem + .8vw,1.875rem);
  --fs-statement:clamp(1.375rem,1.05rem + 1.3vw,2.25rem);
  --fs-lead:clamp(1.125rem,1rem + .5vw,1.4375rem);
  --fs-eyebrow:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --fs-meta:.8125rem;                                  /* small metadata labels */

  /* ---- Layout ---- */
  --gx:max(16px,calc((100vw - 1180px) / 2));
  --section:clamp(112px,13vw,200px);  /* space between major sections */
  --gap-lg:clamp(48px,6vw,88px);      /* headline → content */
  --radius:clamp(26px,3vw,36px);   /* glass panel corners */
  --nav-h:60px;

  /* ---- Motion ---- */
  --ease:cubic-bezier(.25,.1,.25,1);
  --spring:cubic-bezier(.2,.9,.25,1);

  /* ---- Runtime (set by core.js; defaults here) ---- */
  --la:135deg;  /* light angle for glass rims */
  --sx:30%;     /* light position for glass sheen */
}