:root {
  color-scheme: light;
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-subtle: #f1f5f9;
  --surface-raised: #ffffff;
  --surface-inset: #eaf0f5;
  --text: #0f172a;
  --text-secondary: #526174;
  --text-tertiary: #718096;
  --border: #dce3ea;
  --border-strong: #c8d2de;
  --brand: #13b99b;
  --brand-strong: #07977f;
  --brand-soft: #e1f8f3;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-soft: #eaf1ff;
  --success: #059669;
  --success-soft: #e6f7f0;
  --warning: #b7791f;
  --warning-soft: #fff5df;
  --danger: #c24156;
  --danger-soft: #fff0f2;
  --dark: #0b1220;
  --sidebar: #0b1a21;
  --sidebar-surface: #10262e;
  --sidebar-text: #d8e7e8;
  --sidebar-muted: #8ea5ad;
  --focus: rgba(37, 99, 235, 0.32);
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.07);
  --shadow-md: 0 18px 48px rgba(15, 23, 42, 0.1);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --sidebar-width: 260px;
  --topbar-height: 68px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #081119;
  --surface: #0e1a24;
  --surface-subtle: #13222d;
  --surface-raised: #162631;
  --surface-inset: #0a151e;
  --text: #eef5f7;
  --text-secondary: #b4c2ca;
  --text-tertiary: #8ea0aa;
  --border: #263945;
  --border-strong: #38505e;
  --brand: #35d0b2;
  --brand-strong: #5de1c8;
  --brand-soft: #103b35;
  --primary: #75a2ff;
  --primary-hover: #9ab9ff;
  --primary-soft: #172b52;
  --success: #45d39f;
  --success-soft: #12382f;
  --warning: #efc169;
  --warning-soft: #3b2c13;
  --danger: #ff8da0;
  --danger-soft: #40202a;
  --focus: rgba(117, 162, 255, 0.42);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 22px 54px rgba(0, 0, 0, 0.34);
}