:root {
  /* ── Neutrals / Dark surfaces ─────────────── */
  --pitch:       #141412;   /* high-impact dark — hero, footer, CTA */
  --surface:     #1C1C1A;   /* dark surface — reframe, dark cards */
  --carbon:      #1E1E1A;   /* v1.3: dedicated dark content section token */
  --card-dark:   #242422;   /* dark surface — proof card */
  --gunmetal:    #3A3A36;   /* dark borders */
  --border-d:    rgba(255,255,255,0.07);
  --border-dm:   rgba(255,255,255,0.14);

  /* ── Neutrals / Light surfaces ───────────── */
  --salt:        #F5F4EF;   /* default page background */
  --bone:        #E4E2DA;   /* cards, dividers on light */
  --stone:       #C8C6BE;   /* secondary / meta on light */
  --border-l:    #D4D2CA;

  /* ── Text / Light surfaces ───────────────── */
  --pitch-text:  #2A2A26;   /* primary text on light */
  --body-text:   #3A3A36;   /* body text on light */
  --secondary:   #636058;   /* meta/label on light — darkened for AA at 16px body */

  /* ── Text / Dark surfaces ─────────────────── */
  --white:       #FFFFFF;
  --salt-text:   #F5F4EF;   /* primary text on dark */
  --muted-d:     #C8C6BE;   /* secondary text on dark (AAA on pitch) */
  --dim-d:       #7A7A73;   /* labels/meta on dark */

  /* ── Primary accent — ACID (dark-surface-only) ── */
  --acid:        #CAFF2E;   /* primary accent, CTAs on dark */
  --acid-dark:   #A8D620;   /* hover state */
  --acid-deep:   #0F1A02;   /* text on Acid fill */
  --acid-tint:   #EEF9C4;   /* light accent bg · tags on light */
  --acid-tint-translucent: rgba(202,255,46,0.12); /* dark-surface translucent overlay (offering pages) */
  --acid-glow:   rgba(202,255,46,0.10);
  --acid-dim:    rgba(202,255,46,0.05);

  /* ── Accent · muted companions (new in v1.1) ── */
  --acid-muted:    #A8B85C;  /* desaturated Acid — quiet emphasis on dark or light */
  --acid-muted-dk: #7D8A3F;  /* hover state for acid-muted */
  --acid-muted-lt: #CFE384;  /* v1.1: dark-surface variant of acid-muted */
  --sand:          #C2A878;  /* warm tertiary — editorial accents, index marks */
  --sand-tint:     #F1E9D4;  /* light-surface tint for sand */

  /* ── Secondary palette (data, charts) ────── */
  --ember:       #FF6B2B;
  --ember-tint:  #FFF0E8;
  --pulse:       #5A7BA3;  /* v1.1: desaturated blue, reads as companion not competitor */
  --pulse-light: #7B98BE;  /* v1.1: alt/hover, dark-surface variant */
  --pulse-tint:  #EEF2F7;  /* v1.1: light-surface tint */

  /* ── Extended data-viz (series 4+) ─────── */
  --cedar:       #2F6F5E;
  --plum:        #6B4E8A;
  --clay:        #B83C4B;
  --slate-blue:  #1B3A5C;

  /* ── Semantic emphasis aliases (v1.1) ─── */
  --fg-emphasis-high: var(--acid);        /* hero emphasis, primary CTAs */
  --fg-emphasis-mid:  var(--acid-muted);  /* meta labels, subtle highlights, eyebrows on dark */
  --fg-emphasis-warm: var(--sand);        /* section numbers, index marks, editorial accents */
  --fg-support:       var(--pulse);       /* v1.1: supporting accent — always with Acid or Acid Muted */

  /* ── Semantic foreground / background ─── */
  --bg:              var(--salt);
  --bg-secondary:    var(--bone);
  --bg-inverse:      var(--pitch);
  --bg-inverse-secondary: var(--surface);

  --fg1:             var(--pitch-text);    /* primary text on light */
  --fg2:             var(--body-text);     /* body text on light */
  --fg3:             var(--secondary);     /* meta/label on light */
  --fg-on-dark-1:    var(--salt-text);     /* primary text on dark */
  --fg-on-dark-2:    var(--muted-d);       /* secondary text on dark */
  --fg-on-dark-3:    var(--dim-d);         /* labels/meta on dark */
  --fg-accent:       var(--acid);          /* accent fg on dark */

  --border:          rgba(20,20,18,0.10);
  --border-bone:     var(--bone);
  --border-dark:     var(--gunmetal);

  /* ── Status / semantic ────────────────── */
  --success-fg:  #085041;             /* Acid Deep on Acid Tint */
  --success-bg:  var(--acid-tint);
  --warning-fg:  #993C1D;             /* Ember on Ember Tint */
  --warning-bg:  var(--ember-tint);
  --info-fg:     #2C3E58;             /* v1.1: derived from revised Pulse */
  --info-bg:     var(--pulse-tint);
  --error-fg:    var(--clay);         /* Clay-Red — dedicated error token */
  --error-bg:    #F9ECEC;

  /* ── Typography families ─────────────── */
  --font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-sans:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Type scale — 1.25 modular, role-named (v1.1) ── */
  --fs-display:    clamp(56px, 9vw, 128px);   /* hero display */
  --fs-h1:         clamp(36px, 4.4vw, 52px);  /* page H1 / section opener */
  --fs-h2:         clamp(28px, 3.4vw, 40px);  /* section headline */
  --fs-h3:         clamp(20px, 2.4vw, 24px);  /* section subtitle / H3 as heading */
  --fs-card-title: 20px;                       /* card headings (Tier C — Montserrat) */
  --fs-lede:       18px;                       /* lede / subheadline body */
  --fs-body:       16px;                       /* default body */
  --fs-body-sm:    14px;                       /* small body / captions */
  --fs-eyebrow:    12px;                       /* eyebrow / label / chrome */
  --fs-mono:       13px;                       /* code / mono */
  --fs-nav:        11px;                       /* nav links (chrome) */

  /* ── Spacing (8px base) ──────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 88px;
  --space-5xl: 100px;

  /* ── Radii ───────────────────────────── */
  --r-sm:   2px;
  --r-md:   3px;
  --r-lg:   4px;
  --r-xl:   8px;
  --r-full: 9999px;

  /* ── Borders ─────────────────────────── */
  --hairline: 1px;   /* 1px default; 0.5px scoped under DPR-2 media query */

  /* ── Motion (architectural — no bounce) ── */
  --d-micro:  100ms;
  --d-short:  200ms;
  --d-medium: 320ms;
  --d-long:   500ms;
  --e-out:    ease-out;
  --e-inout:  ease-in-out;
  --e-arch:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ──────────────────────────── */
  --max-content: 1100px;
  --max-reading: 65ch;

  /* ── Button sizes ────────────────────── */
  --btn-sm: 10px 20px;
  --btn-md: 14px 30px;
  --btn-lg: 18px 40px;
}

/* Retina hairline refinement: restore 0.5px only where hardware can render it */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  :root { --hairline: 0.5px; }
}