:root {
  color-scheme: light;
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-input: #fbfcfd;
  --color-text: #1f2933;
  --color-muted: #627d98;
  --color-border: #d9e2ec;
  --color-accent: #3d5a80;
  --color-accent-soft: #e8eef5;
  --color-on-accent: #ffffff;
  --color-danger: #9b1c1c;
  --color-danger-bg: #fdf2f2;
  --color-ok: #276749;
  --color-ok-bg: #f0fff4;
  --color-mark: #c5d4e8;
  --color-preview: #eef1f5;
  --color-checker-a: #d9e2ec;
  --color-checker-b: #ffffff;
  --color-toast-bg: #1f2933;
  --color-toast-text: #ffffff;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06);
  --radius: 10px;
  --sidebar-width: 248px;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #12151a;
  --color-surface: #1b2028;
  --color-input: #151a21;
  --color-text: #e8edf2;
  --color-muted: #9aa8b8;
  --color-border: #2d3642;
  --color-accent: #8ba3c7;
  --color-accent-soft: #243044;
  --color-on-accent: #12151a;
  --color-danger: #f0a3a3;
  --color-danger-bg: #3a2222;
  --color-ok: #8fd3a8;
  --color-ok-bg: #1c3326;
  --color-mark: #3d5a80;
  --color-preview: #151a21;
  --color-checker-a: #2d3642;
  --color-checker-b: #1b2028;
  --color-toast-bg: #e8edf2;
  --color-toast-text: #12151a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.28);
}