:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #0b1015;
  --ui-surface: #121a21;
  --ui-surface-raised: #18232b;
  --ui-surface-subtle: #0e151b;
  --ui-surface-inset: #0e151b;
  --ui-panel: #11171d;
  --ui-border: #2a3942;
  --ui-border-strong: #49616d;
  --ui-text: #e9f0f2;
  --ui-text-muted: #9aadb5;
  --ui-text-subtle: #71858e;
  --ui-accent: #6ed7e8;
  --ui-accent-strong: #9be8f2;
  --ui-accent-soft: rgba(110, 215, 232, .12);
  --ui-hover: rgba(110, 215, 232, .08);
  --ui-input: #080d12;
  --ui-overlay: rgba(0, 0, 0, .58);
  --ui-success: #66d391;
  --ui-warning: #e6b45b;
  --ui-warning-strong: #ffd36d;
  --ui-danger: #ed7774;
  --ui-info: #86b7ee;
  --ui-chart-grid: rgba(233, 240, 242, .11);
  --ui-shadow: 0 10px 28px rgba(0, 0, 0, .24);
  --ui-shadow-overlay: 0 20px 56px rgba(0, 0, 0, .42);
}

html[data-theme="light"] {
  color-scheme: light;
  --ui-bg: #f4f6f8;
  --ui-surface: #ffffff;
  --ui-surface-raised: #ffffff;
  --ui-surface-subtle: #eef2f5;
  --ui-surface-inset: #eaf0f4;
  --ui-panel: #ffffff;
  --ui-border: #d5e0e6;
  --ui-border-strong: #aebfc9;
  --ui-text: #1d2a32;
  --ui-text-muted: #5d707b;
  --ui-text-subtle: #71848e;
  --ui-accent: #168da3;
  --ui-accent-strong: #087487;
  --ui-accent-soft: rgba(22, 141, 163, .11);
  --ui-hover: rgba(22, 141, 163, .07);
  --ui-input: #ffffff;
  --ui-overlay: rgba(22, 38, 48, .34);
  --ui-success: #197a4a;
  --ui-warning: #9a6200;
  --ui-warning-strong: #855200;
  --ui-danger: #b33d42;
  --ui-info: #2868a5;
  --ui-chart-grid: rgba(29, 42, 50, .14);
  --ui-shadow: 0 8px 24px rgba(49, 75, 89, .12);
  --ui-shadow-overlay: 0 18px 48px rgba(49, 75, 89, .2);
  /* Compatibility aliases for the staged legacy CSS layer. */
  --color-bg: var(--ui-bg);
  --color-surface: var(--ui-surface);
  --color-surface-raised: var(--ui-surface-raised);
  --color-surface-subtle: var(--ui-surface-subtle);
  --color-border: var(--ui-border);
  --color-border-strong: var(--ui-border-strong);
  --color-text: var(--ui-text);
  --color-text-muted: var(--ui-text-muted);
  --color-text-subtle: var(--ui-text-subtle);
  --color-primary: var(--ui-accent);
  --color-primary-strong: var(--ui-accent-strong);
}

:root {
  /* Legacy aliases keep non-migrated pages operational during staged rollout. */
  --bg: var(--ui-bg);
  --panel: var(--ui-surface);
  --panel2: var(--ui-surface-raised);
  --line: var(--ui-border);
  --text: var(--ui-text);
  --muted: var(--ui-text-muted);
  --amber: var(--ui-warning);
  --amber2: var(--ui-warning-strong);
  --green: var(--ui-success);
  --yellow: var(--ui-warning);
  --red: var(--ui-danger);
  --cyan: var(--ui-accent);
  --shadow: var(--ui-shadow);
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-control-height: 40px;
  --ui-content-max: 1840px;
  --ui-content-gutter: 32px;
  --ui-sidebar-width: 216px;
  --ui-sidebar-compact: 64px;
  --ui-radius-control: 6px;
  --ui-radius-row: 8px;
  --ui-radius-panel: 10px;
  --ui-shadow-raised: 0 10px 28px rgba(0, 0, 0, .24);
  --ui-shadow-overlay: 0 20px 56px rgba(0, 0, 0, .42);
}