:root {
  color-scheme: light;
  --background: #e9ebea;
  --surface: #ffffff;
  --surface-muted: #f6f7f6;
  --text: #111813;
  --text-muted: #59665f;
  --border: #dce3de;
  --income: #047857;
  --expense: #9a3412;
  --danger: #b91c1c;
  --shadow: 0 18px 50px rgb(17 24 19 / 0.08);
  --radius-card: 22px;
  --radius-field: 12px;
  --radius-pill: 999px;
  --space-page: 32px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --background: #101815;
  --surface: #19251f;
  --surface-muted: #23332b;
  --text: #f2f7f3;
  --text-muted: #b3c3b9;
  --border: #40574a;
  --income: #6ee7b7;
  --expense: #fdba74;
  --danger: #fca5a5;
  --shadow: 0 18px 50px rgb(0 0 0 / 0.22);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    color-scheme: dark;
    --background: #101815;
    --surface: #19251f;
    --surface-muted: #23332b;
    --text: #f2f7f3;
    --text-muted: #b3c3b9;
    --border: #40574a;
    --income: #6ee7b7;
    --expense: #fdba74;
    --danger: #fca5a5;
    --shadow: 0 18px 50px rgb(0 0 0 / 0.22);
  }
}