html.dark {
  --bg: #0e0e0e;
  --bg-sunken: #080808;
  --bg-raised: #161616;
  --fg: #d6d6d6;
  --fg-muted: #8a8a8a;
  --fg-faint: #5a5a5a;
  --border: #232323;
  --border-strong: #383838;

  --accent: #f87171;
  --accent-hover: #fca5a5;
  --accent-soft: rgba(248, 113, 113, 0.08);
  --accent-line: rgba(248, 113, 113, 0.4);
  --accent-fg: #0e0e0e;
  --selection: rgba(248, 113, 113, 0.25);

  --code-bg: #161616;
  --code-border: #232323;

  color-scheme: dark;
}

html.dark pre ::selection,
html.dark code ::selection {
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
}

html.dark img {
  opacity: 0.92;
}

html.dark :focus-visible {
  outline-color: var(--accent);
  outline-offset: 3px;
}