:root {
  color-scheme: light;
  --ui-bg: #f4f7fb;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8fafc;
  --ui-surface-strong: #edf3fb;
  --ui-border: #dce5f0;
  --ui-border-soft: #e9eef5;
  --ui-text: #172033;
  --ui-muted: #66758b;
  --ui-primary: #066fd1;
  --ui-primary-hover: #0558a6;
  --ui-primary-soft: #e0effd;
  --ui-nav: #f4f7fb;
  --ui-nav-text: #172033;
  --ui-nav-muted: #334155;
  --ui-success: #2fb344;
  --ui-warning: #f59f00;
  --ui-danger: #d63939;
  --ui-radius-sm: 6px;
  --ui-radius-md: 10px;
  --ui-radius-lg: 14px;
  --ui-shadow-sm: 0 4px 16px rgba(31, 53, 87, 0.06);
  --ui-shadow-md: 0 16px 40px rgba(31, 53, 87, 0.12);
  --ui-nav-width: 232px;
  --ui-content-max: 1680px;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;

  --bg: var(--ui-bg);
  --panel: var(--ui-surface);
  --panel-soft: var(--ui-surface-soft);
  --line: var(--ui-border);
  --line-soft: var(--ui-border-soft);
  --text: var(--ui-text);
  --muted: var(--ui-muted);
  --accent: var(--ui-primary);
  --accent-dark: var(--ui-primary-hover);
  --accent-soft: var(--ui-primary-soft);
  --brand: var(--ui-primary);
  --border: var(--ui-border);
  --danger: var(--ui-danger);
  --ok: var(--ui-success);
  --warn: var(--ui-warning);
  --nav-width: var(--ui-nav-width);
  --shadow-sm: var(--ui-shadow-sm);
  --shadow-md: var(--ui-shadow-md);
}

:root[data-bs-theme="dark"],
body[data-bs-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #0b1120;
  --ui-surface: #111827;
  --ui-surface-soft: #162033;
  --ui-surface-strong: #1b2940;
  --ui-border: rgba(148, 163, 184, 0.24);
  --ui-border-soft: rgba(148, 163, 184, 0.15);
  --ui-text: #e5edf7;
  --ui-muted: #94a3b8;
  --ui-primary: #066fd1;
  --ui-primary-hover: #60a5fa;
  --ui-primary-soft: rgba(59, 130, 246, 0.18);
  --ui-nav: #080f1d;
  --ui-nav-text: #e5edf7;
  --ui-nav-muted: #8ea3c2;
  --ui-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.22);
  --ui-shadow-md: 0 20px 60px rgba(0, 0, 0, 0.36);
}