:root {
  color-scheme: dark;
  --site-background: #181a1b;
  --site-foreground: #e0e0e0;
  --site-muted: #c5cbd3;
  --site-primary: #6b9eff;
  --site-link: #9dc0ff;
  --site-surface: #202328;
  --site-border: #343a44;
  --site-surface-foreground: #f1f3f6;
}

:root.light-theme {
  color-scheme: light;
  --site-background: #f6f8fb;
  --site-foreground: #263244;
  --site-muted: #3e4b5e;
  --site-primary: #135aa6;
  --site-link: #135aa6;
  --site-surface: #fff;
  --site-border: #d8e0eb;
  --site-surface-foreground: #263244;
}

html,
body {
  background: var(--site-background);
  color: var(--site-foreground);
}

a { color: var(--site-link); }
a:focus-visible { outline: 3px solid var(--site-primary); outline-offset: 3px; }