:root {
  --surface: #FFFFFF;
  --surface-raised: #F4F5F6;
  --hairline: #D6D9DD;
  --ink: #000000;
  --ink-muted: #52575E;
  --accent: #0F3D6E;
  --navy-surface: #0F3D6E;
  --on-navy-muted: #C9D8EC;
  --silver: #8A9099;
  --silver-text: #5F656C;
  --focus-ring: #0F3D6E;
  --brand-navy: #0F3D6E;
  --brand-black: #000000;
  --brand-white: #FFFFFF;
  --font-display: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
}
.dark {
  --surface: #000000;
  --surface-raised: #111214;
  --hairline: #2A2D33;
  --ink: #FFFFFF;
  --ink-muted: #A9AEB5;
  --accent: #8FB3E0;
  --silver: #C0C4C9;
  --silver-text: #C0C4C9;
  --focus-ring: #8FB3E0;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
}