:root {
  --color-bg: #FBFAF6;
  --color-bg-alt: #EFE9DC;
  --color-text: #21271F;
  --color-muted: #6B7566;
  --color-border: #ECE6D9;
  --color-accent: #2E7D4F;
  --color-danger: #B3261E;
  /* Text/icon color placed ON TOP OF --color-accent/--color-danger. Kept as
     separate tokens (not a hardcoded #fff) because the dark theme's lighter
     accent/danger values need dark text to stay above 4.5:1 contrast. */
  --color-on-accent: #FFFFFF;
  --color-on-danger: #FFFFFF;
  --radius: 14px;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #14170F;
    --color-bg-alt: #1D2118;
    --color-text: #F2F1EA;
    --color-muted: #A3AC9A;
    --color-border: #2A3023;
    --color-accent: #5FBF88;
    --color-danger: #FF7A70;
    /* Dark mode lightens accent/danger for visibility against the dark
       background, which flips which text color passes 4.5:1 contrast on
       top of them — deep-ink text, not white, is what stays readable here. */
    --color-on-accent: #21271F;
    --color-on-danger: #21271F;
  }
}