:root,
:root[data-theme="light"] {
  /* Public blue, ink, and the light page field. */
  --bg: #f5f7fa;
  --bg-2: #edf0f5;
  --surface: #ffffff;
  --surface-raised: #f8fafc;
  --ink: #252c3d;
  --ink-soft: #3b4150;
  --muted: #4f709e;
  --line: #d4dbe8;
  --line-strong: #a6b8cf;
  --accent: #3366ff;
  --accent-ink: #1a3ef0;
  --accent-contrast: #ffffff;
  --link: #3366ff;
  --header: #ffffff;
  --type-display: Archivo, ui-sans-serif, system-ui, sans-serif;
  --type-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --type-mono: "IBM Plex Mono", ui-monospace, monospace;
  --chrome-header: 4.75rem;
  --r-lg: 0.625rem;
}

:root[data-theme="dark"] {
  --bg: #1e2433;
  --bg-2: #191f2c;
  --surface: #252c3d;
  --surface-raised: #2c3549;
  --ink: #f5f7fa;
  --ink-soft: #e2e8f0;
  --muted: #94a3b8;
  --line: #2e374d;
  --line-strong: #3e4a66;
  --accent: #668CFF;
  --accent-contrast: #1e2433;
  --accent-secondary: #3366FF;
  --link: #668CFF;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #1e2433;
    --bg-2: #191f2c;
    --surface: #252c3d;
    --surface-raised: #2c3549;
    --ink: #f5f7fa;
    --ink-soft: #e2e8f0;
    --muted: #94a3b8;
    --line: #2e374d;
    --line-strong: #3e4a66;
    --accent: #668CFF;
    --accent-contrast: #1e2433;
    --accent-secondary: #3366FF;
    --link: #668CFF;
  }
}