:root {
  /* "Warm & Human" palette (design handoff 2026-07-04): sand/cream paper,
     terracotta accent, warm inks. Exact values from the handoff spec. */
  --bg: #f8f4ec;            /* paper */
  --bg-tint: #f3ede1;
  --surface: #fffdf8;       /* cards */
  --surface-2: #f4eee1;
  --surface-3: #ece4d3;
  --border: #e7ddcc;        /* line */
  --border-soft: #efe7d8;
  --text: #2a2620;          /* ink */
  --text-dim: #5b5344;      /* ink-dim */
  --text-faint: #938876;    /* ink-faint: meta/labels only */

  /* Terracotta accent. */
  --accent: #bb5a3c;
  --accent-2: #9d4227;      /* hover / accent-colored text (AA on paper) */
  --accent-ink: #fffaf3;    /* text on accent */
  --accent-soft: #f1e2d4;   /* accent tint backgrounds (icon tiles, chips) */
  --accent-line: #dcc3a0;   /* open-card border */

  /* Safety banner (danger is semantic, separate from the accent). */
  --danger: #8a3b1f;        /* danger ink */
  --danger-bg: #f7e9df;
  --danger-line: #e6c8ad;

  /* Evidence tiers (names referenced by graphic.js via var()). */
  --tier-strong: #4a7346;
  --tier-moderate: #9a6a1c;
  --tier-limited: #857a68;
  --tier-strong-bg: #e7edda;
  --tier-moderate-bg: #f2e6cf;
  --tier-limited-bg: #ece5d7;

  /* Hero infographic: the "well" figure. */
  --figure-muted: #cabda8;

  /* Type: Source Serif 4 display, Public Sans body. */
  --font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Modular type scale (1.25 ratio, base 17px). */
  --fs-xs: 0.72rem;
  --fs-sm: 0.84rem;
  --fs-base: 1rem;
  --fs-md: 1.15rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.75rem;
  --fs-3xl: 3.6rem;

  /* Spacing. */
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
  --space-5: 40px; --space-6: 64px; --space-7: 96px;

  /* Radii per handoff: cards 20, inner 13, pills 999. */
  --radius: 13px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --maxw: 1120px;
  --measure: 68ch;

  /* Depth: warm-tinted, soft. */
  --shadow-sm: 0 1px 2px rgba(120, 70, 40, .07);
  --shadow-md: 0 6px 18px -6px rgba(120, 70, 40, .14);
  --shadow-lg: 0 20px 44px -20px rgba(120, 70, 40, .26);

  /* Focus ring + accent glow + hero radial glow. */
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --glow: 0 4px 18px -6px rgba(187, 90, 60, .35);
  --hero-glow: radial-gradient(60% 55% at 50% 38%, rgba(187, 90, 60, .06), rgba(187, 90, 60, .02) 45%, transparent 72%);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}