:root {
  color-scheme: light dark;
  --color-bg: #e9f0f5;
  --color-surface: #f8fbfd;
  --color-surface-raised: #ffffff;
  --color-nav-bg: #071b2e;
  --color-text: #0b2135;
  --color-text-muted: #52677a;
  --color-text-subtle: #52677a;
  --color-text-faint: #7b8d9c;
  --color-border: #c6d3dc;
  --color-border-strong: #8aa0af;
  --color-primary: #00b8d9;
  --color-primary-hover: #009bb8;
  --color-primary-text: #006c82;
  --color-primary-20: #d9f7fc;
  --color-primary-50: rgb(0 184 217 / 55%);
  --color-secondary: #087a55;
  --color-secondary-20: rgb(8 122 85 / 14%);
  --color-accent: #006c82;
  --color-accent-20: #d9f7fc;
  --color-accent-55: #006c82;
  --color-on-accent: #ffffff;
  --color-on-primary: #001d24;
  --color-hover: rgb(0 108 130 / 7%);
  --color-active: #ffffff;
  --color-muted-20: rgb(82 103 122 / 18%);
  --color-level-elite: #c98a12;
  --color-overlay: rgb(0 12 22 / 68%);
  --color-success: #087a55;
  --color-warning: #985f00;
  --color-error: #b32635;
  --color-error-bg: rgb(179 38 53 / 9%);
  --color-focus: #007f99;
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-code: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-xs: 6px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --shadow-raised: 0 20px 60px rgb(7 27 46 / 16%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #020b12;
    --color-surface: #081725;
    --color-surface-raised: #0d2030;
    --color-nav-bg: #06121d;
    --color-text: #eef8fc;
    --color-text-muted: #9db0bd;
    --color-text-subtle: #9db0bd;
    --color-text-faint: #718594;
    --color-border: #274050;
    --color-border-strong: #4c697a;
    --color-primary: #35d8f4;
    --color-primary-hover: #6fe4f7;
    --color-primary-text: #8cecff;
    --color-primary-20: #073844;
    --color-primary-50: rgb(53 216 244 / 55%);
    --color-secondary: #55d7a4;
    --color-secondary-20: rgb(85 215 164 / 15%);
    --color-accent: #8cecff;
    --color-accent-20: #073844;
    --color-accent-55: #35d8f4;
    --color-on-accent: #001d24;
    --color-on-primary: #001d24;
    --color-hover: rgb(140 236 255 / 8%);
    --color-active: #0d2030;
    --color-muted-20: rgb(157 176 189 / 18%);
    --color-level-elite: #f4b942;
    --color-overlay: rgb(0 0 0 / 72%);
    --color-success: #55d7a4;
    --color-warning: #ffc66a;
    --color-error: #ff8b99;
    --color-error-bg: rgb(255 139 153 / 10%);
    --color-focus: #65e5fa;
    --shadow-raised: 0 24px 70px rgb(0 0 0 / 52%);
  }
}

:root[data-theme="dark"] {
  --color-bg: #020b12;
  --color-surface: #081725;
  --color-surface-raised: #0d2030;
  --color-nav-bg: #06121d;
  --color-text: #eef8fc;
  --color-text-muted: #9db0bd;
  --color-text-subtle: #9db0bd;
  --color-text-faint: #718594;
  --color-border: #274050;
  --color-border-strong: #4c697a;
  --color-primary: #35d8f4;
  --color-primary-hover: #6fe4f7;
  --color-primary-text: #8cecff;
  --color-primary-20: #073844;
  --color-primary-50: rgb(53 216 244 / 55%);
  --color-secondary: #55d7a4;
  --color-secondary-20: rgb(85 215 164 / 15%);
  --color-accent: #8cecff;
  --color-accent-20: #073844;
  --color-accent-55: #35d8f4;
  --color-on-accent: #001d24;
  --color-on-primary: #001d24;
  --color-hover: rgb(140 236 255 / 8%);
  --color-active: #0d2030;
  --color-muted-20: rgb(157 176 189 / 18%);
  --color-level-elite: #f4b942;
  --color-overlay: rgb(0 0 0 / 72%);
  --color-success: #55d7a4;
  --color-warning: #ffc66a;
  --color-error: #ff8b99;
  --color-error-bg: rgb(255 139 153 / 10%);
  --color-focus: #65e5fa;
  --shadow-raised: 0 24px 70px rgb(0 0 0 / 52%);
}