:root {
  color-scheme: light;
  --bg: var(--bone-warm);
  --panel: var(--bone);
  --ink: var(--bistre);
  --ink-soft: var(--bistre-80);
  --muted: var(--dove);
  --them: var(--cola);
  --line: var(--rule);
  --line-strong: var(--rule-strong);
  --line-hover: var(--bistre-40);
  --tint: var(--bistre-06);
  --tint-strong: var(--bistre-10);
  --raised: var(--cola);
  --scrim: var(--bistre-80);
  --shadow: var(--bistre-20);
  --on-ink: var(--bone);
  --accent: var(--tomato-ink);
  --accent-fill: var(--tomato);
  --on-accent: var(--white);
  --accent-ink: var(--tomato-ink);
  --ok-ink: var(--tea-ink);
  --pass-bg: var(--tea);
  --pass-ink: var(--bistre);
  --fail-bg: var(--tomato-10);
  --fail-ink: var(--tomato-ink);
  --live: var(--teal);
  --on-live: var(--bistre);
  --think: var(--blue-gray);
  --logo: var(--cola);
  --code-text: var(--bistre);
  --code-keyword: var(--blue-gray-ink);
  --code-type: var(--teal-ink);
  --code-method: var(--lilac-ink);
  --code-string: var(--tomato);
  --code-number: var(--tea-ink);
  --code-comment: var(--dove);
  --code-annotation: var(--tomato-ink);
  --code-delimiter: var(--cola);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: var(--night);
    --panel: var(--bistre);
    --ink: var(--bone);
    --ink-soft: var(--bone-80);
    --muted: var(--dove-glow);
    --them: var(--slate);
    --line: var(--bone-10);
    --line-strong: var(--bone-22);
    --line-hover: var(--bone-40);
    --tint: var(--bone-06);
    --tint-strong: var(--bone-10);
    --raised: var(--slate);
    --scrim: var(--night-80);
    --shadow: var(--night-40);
    --on-ink: var(--bistre);
    --accent: var(--tomato-glow);
    --accent-fill: var(--tomato-glow);
    --on-accent: var(--bistre);
    --accent-ink: var(--tomato-soft-glow);
    --ok-ink: var(--tea);
    --pass-bg: var(--tea-ink);
    --pass-ink: var(--bone);
    --fail-bg: var(--tomato-20);
    --fail-ink: var(--tomato-soft-glow);
    --live: var(--teal);
    --on-live: var(--bistre);
    --think: var(--blue-gray);
    --logo: var(--bone);
    --code-text: var(--bone);
    --code-keyword: var(--blue-gray);
    --code-type: var(--teal);
    --code-method: var(--lilac-glow);
    --code-string: var(--tomato-glow);
    --code-number: var(--tea);
    --code-comment: var(--dove-glow);
    --code-annotation: var(--tomato-soft-glow);
    --code-delimiter: var(--slate);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--night);
  --panel: var(--bistre);
  --ink: var(--bone);
  --ink-soft: var(--bone-80);
  --muted: var(--dove-glow);
  --them: var(--slate);
  --line: var(--bone-10);
  --line-strong: var(--bone-22);
  --line-hover: var(--bone-40);
  --tint: var(--bone-06);
  --tint-strong: var(--bone-10);
  --raised: var(--slate);
  --scrim: var(--night-80);
  --shadow: var(--night-40);
  --on-ink: var(--bistre);
  --accent: var(--tomato-glow);
  --accent-fill: var(--tomato-glow);
  --on-accent: var(--bistre);
  --accent-ink: var(--tomato-soft-glow);
  --ok-ink: var(--tea);
  --pass-bg: var(--tea-ink);
  --pass-ink: var(--bone);
  --fail-bg: var(--tomato-20);
  --fail-ink: var(--tomato-soft-glow);
  --live: var(--teal);
  --on-live: var(--bistre);
  --think: var(--blue-gray);
  --logo: var(--bone);
  --code-text: var(--bone);
  --code-keyword: var(--blue-gray);
  --code-type: var(--teal);
  --code-method: var(--lilac-glow);
  --code-string: var(--tomato-glow);
  --code-number: var(--tea);
  --code-comment: var(--dove-glow);
  --code-annotation: var(--tomato-soft-glow);
  --code-delimiter: var(--slate);
}

.brandLogo, .brandMark {
  display: block; background: var(--logo);
  mask: url('logos/logo-dark.svg') center / contain no-repeat;
}
.brandLogo { aspect-ratio: 473 / 98; }
.brandMark { aspect-ratio: 222 / 97; mask-image: url('logos/mark-dark.svg'); }