:root {
  --color-canvas: #f4f4f0;
  --color-surface: #ffffff;
  --color-surface-muted: #e9e9e3;
  --color-text: #171815;
  --color-text-muted: #5c5e57;
  --color-border: #d2d3cc;
  --color-accent: #324f42;
  --color-accent-strong: #1f382e;
  --color-accent-text: #ffffff;
  --color-danger: #9f2e2e;
  --color-danger-surface: #fff0ef;
  --color-focus: #2c69d1;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-small: 0.5rem;
  --radius-medium: 0.9rem;
  --radius-large: 1.5rem;
  --shadow-card: 0 1.5rem 4rem rgb(20 27 23 / 12%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) {
    --color-canvas: #111310;
    --color-surface: #1a1d19;
    --color-surface-muted: #272b26;
    --color-text: #f3f4ef;
    --color-text-muted: #b7bab1;
    --color-border: #3a3e37;
    --color-accent: #98c5ae;
    --color-accent-strong: #b8dcc9;
    --color-accent-text: #102019;
    --color-danger: #ffaaa3;
    --color-danger-surface: #3a1d1d;
    --color-focus: #8eb8ff;
    --shadow-card: 0 1.5rem 4rem rgb(0 0 0 / 32%);
  }
}

:root[data-appearance="dark"] {
  --color-canvas: #111310;
  --color-surface: #1a1d19;
  --color-surface-muted: #272b26;
  --color-text: #f3f4ef;
  --color-text-muted: #b7bab1;
  --color-border: #3a3e37;
  --color-accent: #98c5ae;
  --color-accent-strong: #b8dcc9;
  --color-accent-text: #102019;
  --color-danger: #ffaaa3;
  --color-danger-surface: #3a1d1d;
  --color-focus: #8eb8ff;
  --shadow-card: 0 1.5rem 4rem rgb(0 0 0 / 32%);
}