:root {
  color-scheme: light dark;
  --color-canvas: #F8F7F4;
  --color-surface: #FFFFFF;
  --color-ink: #182428;
  --color-muted-ink: #46565C;
  --color-accent: #26179C;
  --color-signal: #26179C;
  --font-display: "Bitter";
  --font-body: "Atkinson Hyperlegible";
  --font-mono: "IBM Plex Mono";
  --radius: 14px;
  --border-width: 2px;
}

:root[data-theme="light"] {
  --color-canvas: #F8F7F4;
  --color-surface: #FFFFFF;
  --color-ink: #182428;
  --color-muted-ink: #46565C;
  --color-accent: #26179C;
  --color-signal: #26179C;
}

:root[data-theme="dark"] {
  --color-canvas: #0D1720;
  --color-surface: #16242E;
  --color-ink: #F6F0E4;
  --color-muted-ink: #B8C7CA;
  --color-accent: #877AEB;
  --color-signal: #877AEB;
}

.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;
}