:root {
  --c-bg: #f6f8fa;
  --c-surface: #ffffff;
  --c-text: #1f2933;
  --c-muted: #616e7c;
  --c-border: #d9e2ec;
  --c-primary: #2b4a6b;
  --c-primary-text: #ffffff;
  --c-focus: #3b82f6;
  --c-income: #4c9fd6;
  --c-spending: #e0855f;
  --c-track: #e4ebf2;
  --c-up: #1f7a4d;
  --c-down: #b42318;
  --c-warning: #8a5a00;
  --c-warning-bg: #fff7e6;
  --c-error-bg: #fdecea;
  --c-hard: #b42318;
  --c-soft: #d69e2e;
  --c-tick: #1f2933;
  --c-compare: #7b8794;
  --c-selected: #e3eefb;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --radius: 8px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size: 16px;
  --font-small: 0.875rem;
  --shadow: 0 2px 12px rgba(15, 23, 42, 0.18);
  --toolbar-height: 56px;
  --c-glass: #9aaabb;
  --c-frosted: #e6ebf0;
  --c-water-income-top: #a4dcbf;
  --c-water-income-bottom: #4f9e7b;
  --c-water-spending-top: #8fd0f2;
  --c-water-spending-bottom: #3f8fc4;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #111827;
    --c-surface: #1f2937;
    --c-text: #e5e7eb;
    --c-muted: #9ca3af;
    --c-border: #374151;
    --c-primary: #93c5fd;
    --c-primary-text: #111827;
    --c-track: #374151;
    --c-up: #4ade80;
    --c-down: #f87171;
    --c-warning: #fbbf24;
    --c-warning-bg: #3b2f12;
    --c-error-bg: #3f1d1d;
    --c-tick: #e5e7eb;
    --c-selected: #1e3a5f;
    --c-glass: #6b7a8c;
    --c-frosted: #2b3542;
    --c-water-income-top: #5fb38c;
    --c-water-income-bottom: #2f6e52;
    --c-water-spending-top: #5aa8d8;
    --c-water-spending-bottom: #2a6896;
  }
}