/* ============================================================================
   MLC SKIN · Black Label — Design Tokens
   Every value traces to a source asset (Rule 6). Colors extracted from pixels;
   contrast ratios computed (WCAG 2.1). See DESIGN-SYSTEM.md for the evidence.
   ========================================================================== */
:root {
  /* — Ground & surface (dominant near-black clusters across all 4 assets) — */
  --bg:        #0B0B0A; /* primary ground — all assets                          */
  --bg-pure:   #050505; /* cinematic full-bleed sections — deck darkest cluster  */
  --surface:   #16140F; /* lifted warm charcoal card — from #141310 / #1A1714    */
  --surface-2: #1E1B15; /* elevated card — sheet-eye #1A1714 / #2A231C           */

  /* — Text: warm cream ramp (sampled cream #D4C5B6; headline peak ~#EDE3D2) — */
  --cream:      #EDE3D2; /* headings/wordmark — hero & sheet-eye    15.49:1 AAA   */
  --text:       #D4C5B6; /* default body — sheet-eye/why body       11.68:1 AAA   */
  --muted:      #A89E8F; /* secondary/caption — lifted #9A8D7A       7.46:1 AAA   */
  --text-floor: #8A8175; /* hard floor; no real text dimmer          5.14:1 AA    */

  /* — Gold: peak-decile sample #BE8F61; warm gold ramp — */
  --gold:        #BE8F61; /* rules, ring-icons, borders, large gold   6.84:1 AA   */
  --gold-bright: #C9A06A; /* links, small gold text, focus ring       8.18:1 AAA  */
  --gold-hi:     #D6B27D; /* gold highlight (hover / scroll cue)      9.87:1 AAA  */

  /* — Lines — */
  --border:      #2A2620;               /* dim warm hairline (decorative)         */
  --border-gold: rgba(190,143,97,0.32); /* subtle gold hairline = --gold @ 32%    */

  /* — Typography: Cormorant Garamond display+italic; native system sans for body+labels — */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-eyebrow: clamp(0.70rem, 0.66rem + 0.20vw, 0.78rem);
  --fs-body:    clamp(1.00rem, 0.97rem + 0.20vw, 1.0625rem);
  --fs-lead:    clamp(1.10rem, 1.00rem + 0.50vw, 1.30rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + 1.00vw, 1.75rem);
  --fs-h2:      clamp(1.90rem, 1.40rem + 2.60vw, 3.00rem);
  --fs-statement: clamp(2.10rem, 1.40rem + 3.60vw, 4.25rem);
  --fs-display: clamp(2.75rem, 1.60rem + 6.00vw, 6.00rem);

  --lh-display: 1.04;  --lh-head: 1.16;  --lh-body: 1.65;
  --ls-caps: 0.22em;

  /* — Spacing (4px base; luxury = generous negative space) — */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-6: 1.5rem;
  --sp-8: 2rem;  --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; --sp-32: 8rem;
  --section-y: clamp(4rem, 4rem + 8vw, 10rem);
  --gutter:    clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --measure:   62ch;
  --maxw:      1200px;

  /* — Radius: sharp by default; pill for tags, circle for ring-icons — */
  --r-sm: 2px; --r-pill: 999px; --r-circle: 50%;

  /* — Elevation: shadows barely register on near-black → hairline + lift + glow — */
  --elev-card: inset 0 0 0 1px var(--border-gold);
  --glow-gold: 0 0 0 1px var(--border-gold), 0 18px 50px -24px rgba(190,143,97,0.28);

  /* — Motion: slow, cinematic; gated by prefers-reduced-motion — */
  --dur-fast: 180ms; --dur: 360ms; --dur-slow: 760ms;
  --ease-out: cubic-bezier(.2,.6,.2,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
}