/* ═══════════════════════════════════════════════════════════
   Gap Moment DESIGN_SYSTEM.md v1 — single source of truth
   8 colors only. Legacy aliases map to these 8 (no new hex).
   ═══════════════════════════════════════════════════════════ */

:root {
  /* §1 Color (exactly 8) */
  --paper: #faf7f1;     /* page background */
  --paper-2: #f3eee5;   /* alternating section / band */
  --card: #fffdf9;      /* card surface */
  --line: #e7dfd1;      /* only border color (1px) */
  --ink: #181512;       /* titles */
  /* Visual sprint 2026-08-06: darker body/muted for ~AA on paper */
  --body: #3f3a34;      /* body text (was #564f47 — too light on paper) */
  --muted: #6b645c;     /* helper / meta (was #827a70) */
  --green: #243029;     /* only accent: primary btn, focus, link hover */
  --measure: 40rem;     /* ideal long-prose max width (~65ch) */
  /* v2 A1 — scrim + sheet radius (exactly 10 surface tokens) */
  --scrim: rgba(24, 21, 18, 0.5);   /* only allowed alpha: hold overlay */
  --radius-sheet: 20px;

  /* §2 Type families */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "DM Sans", "Segoe UI", system-ui, sans-serif;

  /* §2 Type scale — v1.1 C upgrade */
  --fs-h1: clamp(38px, 6.5vw, 68px);
  /* was 1.08 — too tight on mobile (38/41); 1.15 keeps display weight readable */
  --lh-h1: 1.15;
  --fs-h2: clamp(30px, 4.5vw, 48px);
  --lh-h2: 1.15;
  --fs-h3: clamp(20px, 2.5vw, 24px);
  --lh-h3: 1.3;
  --fs-body: 17px;
  --lh-body: 1.65;
  --fs-small: 14px;
  --lh-small: 1.5;
  --fs-eyebrow: 12px;
  --ls-eyebrow: 0.12em;

  /* §3 Spacing (8px grid only) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --container-max: 1120px;
  --container-pad-m: 24px;
  --container-pad-d: 32px;
  /* v1.2 rhythm (was 64/96 — inflated empty air on mobile) */
  --section-pad-m: 40px;
  --section-pad-d: 64px;
  --head-to-content: 48px;
  --card-pad-m: 24px;
  --card-pad-d: 32px;
  --col-gap: 32px;

  /* §5 Radius */
  --radius-input: 12px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 16px;
  --radius-2xl: 16px;

  /* §6 Card shadow — the only shadow formula allowed */
  --shadow-card: 0 1px 2px rgba(24, 21, 18, 0.04), 0 8px 24px rgba(24, 21, 18, 0.06);
  --shadow-soft: var(--shadow-card);
  --shadow-lift: var(--shadow-card);
  --shadow-glow: none;
  --focus-ring: 0 0 0 2px var(--green);

  /* §6 Control sizes */
  --control-h: 52px;
  --sticky-h: 64px;
  --btn-pad-x: 28px;
  --modal-max: 420px;

  /* §7 Motion */
  --ease-out: ease-out;
  --dur: 200ms;

  /* ── Legacy aliases → constitution (no extra hex) ── */
  --color-bg: var(--paper);
  --color-bg-elevated: var(--card);
  --color-bg-nested: var(--paper-2);
  --color-bg-subtle: var(--line);
  --color-band: var(--paper-2);
  --color-fg: var(--ink);
  --color-fg-muted: var(--body);
  --color-fg-subtle: var(--muted);
  --color-border: var(--line);
  --color-border-strong: var(--line);
  --color-accent: var(--green);
  --color-accent-fg: var(--card);
  --color-sage: var(--green);   /* legacy sage → green */
  --color-clay: var(--body);    /* was saturated — collapsed */
  --color-glow: var(--line);    /* was warm glow — collapsed */
}