/* Design tokens — PRD section 3. The ONLY source of color/size values. */
:root {
  /* Color (PRD 3.2, light theme default) */
  --color-bg: #FDFBF7;
  --color-text: #1F2933;
  --color-primary: #1B6E64;
  --color-primary-text: #FFFFFF;
  --color-accent: #C97B2D;
  --color-accent-soft: #F5E3CE;
  --color-success: #2E6B34;
  --color-error: #A62E2E;
  --color-surface: #FFFFFF;
  --color-border: #C9CFD6;
  --color-focus: #1F2933;

  /* Typography (PRD 3.1) */
  --font-body: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --text-base: 1.125rem;      /* 18px at default root */
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --line-height: 1.5;
  --measure: 70ch;

  /* Interaction (PRD 3.3) */
  --tap-target: 48px;
  --tap-gap: 8px;
  --focus-ring: 3px solid var(--color-focus);

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  --radius: 12px;
}

@media (min-width: 1024px) {
  :root {
    --text-base: 1.25rem;     /* 20px on wide screens (PRD 3.1) */
  }
}

/* Dark theme (PRD 3.2) — opt-in via the header toggle, persisted. */
html[data-theme="dark"] {
  --color-bg: #16211F;
  --color-text: #F2F0EA;
  --color-primary: #4DB6A9;
  --color-primary-text: #12211E;
  --color-accent: #E39A4F;
  --color-accent-soft: #4A3117;
  --color-success: #7CC98A;
  --color-error: #E08585;
  --color-surface: #1F2E2B;
  --color-border: #3A4A46;
  --color-focus: #F2F0EA;
}