:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-raised: #f5f5f5;
  --ink: #111111;
  --muted: #666666;
  --line: #d9d9d9;
  --line-strong: #111111;
  --accent: #111111;
  --accent-ink: #ffffff;
  --focus: #2271d1;
  --highlight: #fff09b;
  --radius: 14px;
  --shadow: 0 12px 36px rgb(0 0 0 / 8%);
  --target: 44px;
}

:root[data-theme="dark"] {
  --bg: #0b0b0b;
  --surface: #121212;
  --surface-raised: #1c1c1c;
  --ink: #f7f7f7;
  --muted: #aaaaaa;
  --line: #333333;
  --line-strong: #f7f7f7;
  --accent: #f7f7f7;
  --accent-ink: #111111;
  --focus: #72aef5;
  --highlight: #745f00;
  --shadow: 0 12px 36px rgb(0 0 0 / 45%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b0b;
    --surface: #121212;
    --surface-raised: #1c1c1c;
    --ink: #f7f7f7;
    --muted: #aaaaaa;
    --line: #333333;
    --line-strong: #f7f7f7;
    --accent: #f7f7f7;
    --accent-ink: #111111;
    --focus: #72aef5;
    --highlight: #745f00;
    --shadow: 0 12px 36px rgb(0 0 0 / 45%);
  }
}