:root {
  --bg-primary: #faf7f0;
  --bg-secondary: #f3eee2;
  --surface-primary: #fffdfc;
  --surface-reading: #f7f1e6;
  --surface-elevated: #ffffff;

  --text-primary: #13263f;
  --text-secondary: #3d5063;
  --text-muted: #627383;
  --text-on-brand: #f6f8fa;

  --border-soft: #d9d3c7;
  --border-strong: #b7ae9b;

  --brand-navy: #15304b;
  --brand-ink: #1e3a5f;
  --accent-saffron-muted: #b9872e;
  --accent-saffron-soft: #d9b56b;

  --success-soft: #e8f3ec;
  --success-text: #285b3e;
  --warning-soft: #fbf3e2;
  --warning-text: #835f17;
  --danger-soft: #fbe9e8;
  --danger-text: #842e29;
  --info-soft: #eaf1f8;
  --info-text: #234a73;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(19, 38, 63, 0.08);
  --shadow-2: 0 3px 12px rgba(19, 38, 63, 0.1);

  --focus-outline: 2px solid var(--brand-ink);
  --focus-offset: 2px;

  --header-height-mobile: 56px;
  --header-height-desktop: 64px;
  --content-max-width: 1200px;
  --reading-max-width: 760px;
}