:root {
  /* Surfaces */
  --paper: #FAF7F2;
  --paper2: #F1ECE2;
  --paper3: #EAE3D7;
  --tint: #F6EEE1;
  --charcoal: #211C17;
  --charcoal2: #221C16;
  --charcoal3: #1C130A;

  /* Text */
  --ink: #1D1712;
  --ink2: #4B423A;
  --muted: #696158; /* darkened from #8B8075 — the lighter value measured ~3.6:1 on paper, failing WCAG AA (needs 4.5:1) */
  --on-dark: #F3ECE2;
  --on-dark-body: rgba(243, 236, 226, 0.9);
  --on-dark-muted: rgba(243, 236, 226, 0.66);
  --on-dark-rule: rgba(243, 236, 226, 0.12);

  /* Brand */
  --red: #B0392C;
  --red2: #8E2A1F;

  /* Call-to-action buttons — on-brand amber with dark-brown ink.
     Kept separate from --red so link/stat/focus accents stay unchanged.
     #2A1E0A on #F59E0B measures ~7.6:1, on the #D97706 hover ~5.1:1 (both pass AA). */
  --cta: #F59E0B;
  --cta-hover: #D97706;
  --cta-text: #2A1E0A;
  --amber: #E3891C;
  --amber-text: #915812; /* darkened amber for text on light backgrounds — #E3891C measures ~2.5:1 on paper/tint, failing AA. Keep --amber for icons/dots/decorative use and dark backgrounds, where it already passes. */
  --orange: #D9633A;
  --orange-text: #A6491F; /* darkened orange for annotation label text — #D9633A measures ~3.15:1 on tint/paper, failing AA at normal (17px) sizes and only barely clearing the 3:1 large-text minimum at 24px. This measures ~5:1. Keep --orange for the hand-drawn arrow art and decorative strokes. */

  /* Hairlines */
  --rule: rgba(29, 23, 18, 0.11);
  --rule2: rgba(29, 23, 18, 0.06);

  /* Story-arc / export beat palette */
  --beat-green: #2E9E52;
  --beat-blue: #3E78C9;
  --beat-amber: #E3891C;
  --beat-red: #B0392C;
  --beat-orange: #D9633A;
  --beat-green-dark: #4FCB77;
  --beat-blue-dark: #7DB0FF;
  --beat-amber-dark: #EDA646;
  --beat-gold-dark: #DBA43A;
  --beat-red-dark: #EE7B6C;

  /* Type */
  --font-head: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Newsreader', Georgia, serif;
  --font-note: 'Caveat', cursive;
  --font-ui: 'Quicksand', var(--font-head);

  /* Layout */
  --max-w: 1200px;
  --side-pad: 32px;
  --radius-sm: 9px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-pill: 100px;
  /* App/screenshot "window" corner — kept sharp with just a slight round so
     the framed UI mockups match the real app's edges, not an over-rounded card. */
  --ui-radius: 10px;

  /* Shadow — warm sepia */
  --shadow-sm: 0 1px 3px rgba(60, 32, 8, 0.10);
  --shadow: 0 2px 6px rgba(60, 32, 8, 0.08), 0 24px 56px rgba(60, 32, 8, 0.16);
  --shadow-lg: 0 2px 8px rgba(60, 32, 8, 0.10), 0 26px 54px rgba(60, 32, 8, 0.18);
  --shadow-float: 0 2px 6px rgba(60, 32, 8, 0.10), 0 30px 70px rgba(60, 32, 8, 0.20);
}