:root {
  color-scheme: light dark;
  --color-canvas: #0B1523;
  --color-surface: #142434;
  --color-ink: #EAF2FB;
  --color-muted-ink: #A9BCD0;
  --color-accent: #6FB4FF;
  --color-signal: #FF7A7A;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 14px;
  --border-width: 2px;
}

:root[data-theme="light"] {
  --color-canvas: #F1F6FD;
  --color-surface: #FFFFFF;
  --color-ink: #0E1A2B;
  --color-muted-ink: #4A5B72;
  --color-accent: #0B5FD0;
  --color-signal: #C62828;
}

:root[data-theme="dark"] {
  --color-canvas: #0B1523;
  --color-surface: #142434;
  --color-ink: #EAF2FB;
  --color-muted-ink: #A9BCD0;
  --color-accent: #6FB4FF;
  --color-signal: #FF7A7A;
}

.theme-toggle {
  display: inline-grid;
  min-width: 2.5rem;
  min-height: 2.5rem;
  margin-left: auto;
  place-items: center;
  border: var(--border-width) solid color-mix(in srgb, var(--color-ink) 24%, transparent);
  border-radius: 999px;
  padding: .35rem;
  color: var(--color-ink);
  background: var(--color-surface);
  font: inherit;
  cursor: pointer;
}

.theme-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--color-signal);
  outline-offset: 3px;
}