:root {
  color-scheme: dark;
  --bg: #161618;
  --bg-elevated: #1c1c1e;
  --panel: #1f2024;
  --panel-2: #24262b;
  --panel-3: #2a2d33;
  --line: #343741;
  --line-strong: #454a57;
  --ink: #f5f5f7;
  --muted: #a7acb8;
  --accent: #6366f1;
  --accent-rgb: 99, 102, 241;
  --accent-soft: rgba(99, 102, 241, 0.12);
  --accent-border: rgba(99, 102, 241, 0.24);
  --accent-2: #a5b4fc;
  --good: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
  --sidebar-width: 260px;
  --topbar-height: 56px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
}

body.light {
  color-scheme: light;
  --bg: #f4f5f7;
  --bg-elevated: #eeeff2;
  --panel: #ffffff;
  --panel-2: #f7f8fa;
  --panel-3: #f0f2f5;
  --line: #d8dce4;
  --line-strong: #c7ccd8;
  --ink: #181a1f;
  --muted: #69707d;
  --accent: #4f46e5;
  --accent-rgb: 79, 70, 229;
  --accent-soft: rgba(79, 70, 229, 0.1);
  --accent-border: rgba(79, 70, 229, 0.18);
  --accent-2: #818cf8;
  --good: #16a34a;
  --warn: #d97706;
  --bad: #dc2626;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
}