:root {
  color-scheme: light;

  --color-canvas: #f5f3ee;
  --color-surface: #fffdf9;
  --color-surface-muted: #eef3ec;
  --color-text: #243028;
  --color-text-muted: #56645b;
  --color-border: #cfd8d0;
  --color-primary: #356247;
  --color-primary-hover: #234b34;
  --color-on-primary: #ffffff;
  --color-accent: #b85f13;
  --color-focus: #b85f13;
  --color-danger: #982c2c;
  --color-danger-hover: #771f1f;
  --color-danger-surface: #fff0ef;
  --color-success: #246b3c;
  --color-success-surface: #edf8f0;
  --color-warning: #745000;
  --color-warning-surface: #fff7df;
  --color-info: #245a78;
  --color-info-surface: #edf7fc;

  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 3vw, 2rem);
  --text-2xl: clamp(2rem, 5vw, 3rem);
  --leading-tight: 1.2;
  --leading-normal: 1.6;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-pill: 999px;
  --shadow-card: 0 0.75rem 2rem rgb(35 75 52 / 10%);
  --content-wide: 78rem;
  --content-reading: 52rem;
  --control-min: 2.75rem;

  /* Compatibility aliases for the existing responsive recipe stylesheet. */
  --bg: var(--color-canvas);
  --surface: var(--color-surface);
  --surface-soft: var(--color-surface-muted);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --primary: var(--color-primary);
  --primary-dark: var(--color-primary-hover);
  --accent: var(--color-accent);
  --border: var(--color-border);
  --shadow: var(--shadow-card);
  --radius: 18px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-canvas: #111714;
  --color-surface: #18211c;
  --color-surface-muted: #223028;
  --color-text: #f1f5f2;
  --color-text-muted: #bac8bd;
  --color-border: #526357;
  --color-primary: #9bd3ae;
  --color-primary-hover: #c5ead0;
  --color-on-primary: #102117;
  --color-accent: #ffb56b;
  --color-focus: #ffb56b;
  --color-danger: #e88989;
  --color-danger-hover: #f2abab;
  --color-danger-surface: #3b1f20;
  --color-success: #8ed3a5;
  --color-success-surface: #173524;
  --color-warning: #e7bd63;
  --color-warning-surface: #372d16;
  --color-info: #8ac6e6;
  --color-info-surface: #172f3c;
  --shadow-card: 0 0.75rem 2rem rgb(0 0 0 / 35%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --color-canvas: #111714;
    --color-surface: #18211c;
    --color-surface-muted: #223028;
    --color-text: #f1f5f2;
    --color-text-muted: #bac8bd;
    --color-border: #526357;
    --color-primary: #9bd3ae;
    --color-primary-hover: #c5ead0;
    --color-on-primary: #102117;
    --color-accent: #ffb56b;
    --color-focus: #ffb56b;
    --color-danger: #e88989;
    --color-danger-hover: #f2abab;
    --color-danger-surface: #3b1f20;
    --color-success: #8ed3a5;
    --color-success-surface: #173524;
    --color-warning: #e7bd63;
    --color-warning-surface: #372d16;
    --color-info: #8ac6e6;
    --color-info-surface: #172f3c;
    --shadow-card: 0 0.75rem 2rem rgb(0 0 0 / 35%);
  }
}