:root {
  --navy-900: #0B1F4B;
  --navy-700: #23355E;
  --cobalt-600: #1F4FD8;
  --cobalt-700: #173DB0;
  --sky-400: #6FB1FF;
  --line-200: #C9DAF5;
  --ice-100: #EAF2FF;
  --white: #FFFFFF;
  --amber-400: #FFB020;
  --slate-600: #3A4B73;
  --success-700: #0B7A75;
  --danger-700: #B4410C;
  --surface: var(--white);
  --surface-alt: var(--ice-100);
  --surface-brand: var(--navy-900);
  --ink: var(--navy-900);
  --ink-muted: var(--slate-600);
  --on-brand: var(--white);
  --line: var(--line-200);
  --primary: var(--cobalt-600);
  --primary-hover: var(--cobalt-700);
  --on-primary: var(--white);
  --accent: var(--amber-400);
  --on-accent: var(--navy-900);
  --focus: var(--cobalt-600);
  --font-display: Sora, "Segoe UI", system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 24px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0A1430;
    --surface-alt: #13224D;
    --surface-brand: #050D24;
    --ink: #EAF2FF;
    --ink-muted: #A9B8DA;
    --on-brand: #EAF2FF;
    --line: #2A3F75;
    --primary: #6FB1FF;
    --primary-hover: #9CCAFF;
    --on-primary: var(--navy-900);
    --accent: var(--amber-400);
    --on-accent: var(--navy-900);
    --focus: var(--amber-400);
  }
}