:root {
  color-scheme: dark;
  --surface-lowest: #060e20;
  --surface: #0b1326;
  --surface-low: #131b2e;
  --surface-container: #171f33;
  --surface-high: #222a3d;
  --surface-highest: #2d3449;
  --surface-bright: #31394d;
  --text: #dae2fd;
  --text-strong: #e9feff;
  --text-muted: #aababb;
  --text-faint: #7f9095;
  --outline: #3a494a;
  --outline-strong: #526365;
  --cyan: #00f5ff;
  --cyan-dim: #00dce5;
  --cyan-ink: #002b2e;
  --emerald: #4edea3;
  --emerald-dim: #00a572;
  --indigo: #8f91ff;
  --amber: #f5c451;
  --coral: #ffb4ab;
  --danger: #ff7b72;
  --sidebar-width: 256px;
  --topbar-height: 72px;
  --content-gutter: clamp(20px, 2.2vw, 40px);
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-signal: 0 0 24px rgba(0, 245, 255, 0.08);
  --font-headline: "Segoe UI Variable Display", "Aptos Display", "Segoe UI", sans-serif;
  --font-body: "Segoe UI Variable Text", "Aptos", "Segoe UI", sans-serif;
  --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}

:root[data-theme="light"] {
  color-scheme: light;
  --surface-lowest: #e6eff2;
  --surface: #f5f9fa;
  --surface-low: #edf4f5;
  --surface-container: #ffffff;
  --surface-high: #e3edef;
  --surface-highest: #d6e3e5;
  --surface-bright: #cadadd;
  --text: #12262b;
  --text-strong: #07181d;
  --text-muted: #475e63;
  --text-faint: #64787d;
  --outline: #b7c9cc;
  --outline-strong: #82999d;
  --cyan: #007c83;
  --cyan-dim: #006b71;
  --cyan-ink: #f2ffff;
  --emerald: #087a55;
  --emerald-dim: #d6f5e7;
  --indigo: #5558bf;
  --amber: #8a5b00;
  --coral: #a7332d;
  --danger: #a82d27;
  --shadow-signal: 0 0 20px rgba(0, 124, 131, 0.1);
}