/* v15-design-language-v20260514a.css — 2026-05-14
 *
 * Canonical design tokens. Loaded LAST so cascade wins.
 *
 * Problem audit findings:
 *   - `--ds-ink-soft` had THREE conflicting canonical values across the
 *     codebase: `#3F3B36`, `#222`, `#C8C0B0` (dark) — plus inline-style
 *     fallbacks `#6a6555`, `#8a8478`, `#6f6a60` that matched nothing.
 *   - Two parallel clay variables `--ds-clay` and `--dr-clay` with subtly
 *     different fallback values across the cascade.
 *   - Three different font-family stacks used inline for body / UI chrome:
 *     `'Atkinson Hyperlegible', system-ui, sans-serif` (canonical body font),
 *     `-apple-system, BlinkMacSystemFont, 'Inter var', system-ui, sans-serif`
 *     ('Inter var' is never loaded → fallback chain noise),
 *     `-apple-system, BlinkMacSystemFont, system-ui, sans-serif` (UI variant).
 *   - Two Fraunces stacks: with and without `'Times New Roman'` fallback.
 *
 * Resolution:
 *   - Single source of truth for color and font tokens, both themes.
 *   - Legacy variable names (`--muted`, `--dr-clay`, etc.) aliased to the
 *     canonical tokens so old CSS keeps working.
 *   - Body type system: Atkinson Hyperlegible (ADHD-friendly). Headings &
 *     pull quotes: Fraunces. No third font stack.
 */

/* ═══════════════════════════════════════════════════════════════════
   CANONICAL TOKENS — LIGHT THEME (default)
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Surface ────────────────────────────────────────────────────── */
  --ds-bg:        #faf7f2;   /* page background — warm cream */
  --ds-paper:     #faf7f2;
  --ds-paper-deep:#f4f0e7;   /* card / section alt background */
  --ds-paper-warm:#f7f1e3;

  /* ── Ink (text) ─────────────────────────────────────────────────── */
  --ds-ink:       #14140e;   /* primary text — near-black with warm undertone */
  --ds-ink-soft:  #3F3B36;   /* secondary text — readable, WCAG AA */
  --ds-ink-faint: #6f6a60;   /* tertiary text — labels, eyebrow */

  /* ── Accent (clay-orange) ───────────────────────────────────────── */
  --ds-clay:      #c9613f;   /* primary accent — clay-terracotta */
  --ds-clay-deep: #a04a2c;   /* hover / pressed */
  --ds-clay-lift: #e88e5f;   /* lifted / highlighted */
  --ds-clay-tint: rgba(201,97,63,0.12);
  --ds-clay-haze: rgba(201,97,63,0.06);

  /* ── Rule / border ──────────────────────────────────────────────── */
  --ds-rule:        #e8e1d2;
  --ds-rule-strong: #d6cdba;

  /* ── Status colors ──────────────────────────────────────────────── */
  --ds-green:  #2DA44E;
  --ds-red:    #B91C1C;

  /* ── Typography ─────────────────────────────────────────────────── */
  --ds-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ds-font-sans:  'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* ── Legacy aliases — keep old code working ─────────────────────── */
  --muted:         var(--ds-ink-soft);
  --dr-clay:       var(--ds-clay);
  --dr-clay-deep:  var(--ds-clay-deep);
  --dr-clay-lift:  var(--ds-clay-lift);
  --dr-clay-tint:  var(--ds-clay-tint);
  --dr-clay-haze:  var(--ds-clay-haze);
  --dr-ink:        var(--ds-ink);
  --dr-ink-soft:   var(--ds-ink-soft);
  --dr-muted:      var(--ds-ink-soft);
  --dr-paper:      var(--ds-paper);
  --dr-paper-deep: var(--ds-paper-deep);
  --dr-paper-warm: var(--ds-paper-warm);
  --dr-rule:       var(--ds-rule);
  --dr-green:      var(--ds-green);
  --ink:           var(--ds-ink);
  --cream:         var(--ds-bg);
}

/* ═══════════════════════════════════════════════════════════════════
   CANONICAL TOKENS — DARK THEME
   ═══════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --ds-bg:        #1a1814;
  --ds-paper:     #1a1814;
  --ds-paper-deep:#1f1d19;
  --ds-paper-warm:#221e18;

  --ds-ink:       #f0ebe4;
  --ds-ink-soft:  #C8C0B0;
  --ds-ink-faint: #8a8070;

  --ds-clay:      #e88e5f;   /* lifted in dark for contrast */
  --ds-clay-deep: #c9613f;
  --ds-clay-lift: #f5b89d;
  --ds-clay-tint: rgba(232,142,95,0.16);
  --ds-clay-haze: rgba(232,142,95,0.08);

  --ds-rule:        #3a3630;
  --ds-rule-strong: #4a4640;

  --ds-green: #4ade80;
  --ds-red:   #f87171;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL TYPE BASELINE
   ═══════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--ds-font-sans);
  color: var(--ds-ink);
  background: var(--ds-bg);
}

h1, h2, h3, h4, h5, h6,
.hero-vp h1,
.hero-vp h2,
blockquote {
  font-family: var(--ds-font-serif);
  color: var(--ds-ink);
}

/* ═══════════════════════════════════════════════════════════════════
   INLINE-STYLE NORMALIZATION
   These selectors target the small set of elements where inline styles
   in index.html may have wrong fallback hex codes. They lock the color
   to the canonical token regardless of the inline fallback.
   ═══════════════════════════════════════════════════════════════════ */
.hero-cta-sub,
.hero-tools-hint,
.hero-aspiration,
.dr-receipt span,
.brm-key,
.brm-val,
.afm-summary,
.attr,
.small,
.hint-text,
.hpc-pullquote figcaption {
  color: var(--ds-ink-soft);
}

.hero-vp .hero-eyebrow,
.section-eyebrow .label {
  color: var(--ds-clay);
}

/* All inline-style links in the hero hint paragraphs use --dr-clay,
   which is now an alias for --ds-clay. No selector override needed. */