:root {
  color-scheme: light dark;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-xxl: 28px;

  --bg: #f4f6f7;
  --bg-elevated: #ffffff;
  --bg-sunken: #eaeef0;
  --ink: #142026;
  --ink-muted: #5b6870;
  --line: #d8e0e4;
  --primary: #1d6c76;
  --primary-ink: #ffffff;
  --primary-dark: #154d54;
  --danger: #a13a32;
  --danger-bg: #fff3f1;
  --warn: #9a6800;
  --warn-bg: #fff8e5;
  --ok: #28724f;
  --ok-bg: #eff8f3;
  --review: #7552a1;
  --review-bg: #f8f2fb;
  --focus-ring: #4f9dff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10171b;
    --bg-elevated: #182228;
    --bg-sunken: #0c1216;
    --ink: #e7edf0;
    --ink-muted: #93a4ac;
    --line: #2a363d;
    --primary: #4fb8c4;
    --primary-ink: #06282c;
    --primary-dark: #7fd0d9;
    --danger: #e08078;
    --danger-bg: #3a201d;
    --warn: #e0b85c;
    --warn-bg: #3a2f14;
    --ok: #6bcb9a;
    --ok-bg: #12301f;
    --review: #b79bdb;
    --review-bg: #241c33;
    --focus-ring: #7fc0ff;
  }
}

:root[data-theme="dark"] {
  --bg: #10171b;
  --bg-elevated: #182228;
  --bg-sunken: #0c1216;
  --ink: #e7edf0;
  --ink-muted: #93a4ac;
  --line: #2a363d;
  --primary: #4fb8c4;
  --primary-ink: #06282c;
  --primary-dark: #7fd0d9;
  --danger: #e08078;
  --danger-bg: #3a201d;
  --warn: #e0b85c;
  --warn-bg: #3a2f14;
  --ok: #6bcb9a;
  --ok-bg: #12301f;
  --review: #b79bdb;
  --review-bg: #241c33;
  --focus-ring: #7fc0ff;
}