:root {
  color-scheme: dark;
  --page-end: #090807;
  --page-glow: #351c09;
  --surface-0: #080706;
  --surface-1: #0e0c0b;
  --surface-2: #0f0d0b;
  --surface-3: #11100e;
  --surface-glass: #0b0a09e8;
  --warm-panel: #151108;
  --warm-pullquote: #1d1209;
  --chart-glow: #261507;
  --chart-bar: #6d5643;
  --chart-bar-alt: #9c6a35;
  --control-contrast: #130b03;
  --shadow: #0009;
  --shadow-heavy: #000c;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5efe7;
  --panel: #fffaf3;
  --panel-2: #eee3d7;
  --line: #d7c7b7;
  --line-bright: #b79d84;
  --text: #211b17;
  --muted: #665b52;
  --dim: #88786a;
  --accent: #b95000;
  --accent-soft: #7d481d;
  --win: #277149;
  --warn: #8b5f20;
  --page-end: #ece2d7;
  --page-glow: #ffd7af;
  --surface-0: #eee4da;
  --surface-1: #faf5ef;
  --surface-2: #f1e8de;
  --surface-3: #fffaf3;
  --surface-glass: #f5efe7ed;
  --warm-panel: #f8ead7;
  --warm-pullquote: #f7dfc5;
  --chart-glow: #ffe2c4;
  --chart-bar: #a98e76;
  --chart-bar-alt: #876446;
  --control-contrast: #fffaf3;
  --shadow: #6d4b2b2b;
  --shadow-heavy: #5b3c2452;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f5efe7;
    --panel: #fffaf3;
    --panel-2: #eee3d7;
    --line: #d7c7b7;
    --line-bright: #b79d84;
    --text: #211b17;
    --muted: #665b52;
    --dim: #88786a;
    --accent: #b95000;
    --accent-soft: #7d481d;
    --win: #277149;
    --warn: #8b5f20;
    --page-end: #ece2d7;
    --page-glow: #ffd7af;
    --surface-0: #eee4da;
    --surface-1: #faf5ef;
    --surface-2: #f1e8de;
    --surface-3: #fffaf3;
    --surface-glass: #f5efe7ed;
    --warm-panel: #f8ead7;
    --warm-pullquote: #f7dfc5;
    --chart-glow: #ffe2c4;
    --chart-bar: #a98e76;
    --chart-bar-alt: #876446;
    --control-contrast: #fffaf3;
    --shadow: #6d4b2b2b;
    --shadow-heavy: #5b3c2452;
  }
}

.theme-toggle {
  position: relative;
  width: 62px;
  flex: 0 0 62px;
  display: grid;
  grid-template-columns: repeat(2, 30px);
  height: 30px;
  overflow: hidden;
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  background: var(--surface-1);
}

.status { white-space: nowrap; }

.theme-toggle::after {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 1px;
  height: 18px;
  content: "";
  background: var(--line);
}

.theme-toggle[data-theme-mode="system"] {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.theme-choice {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  padding: 0;
  color: var(--dim);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.theme-choice:hover { color: var(--accent); }
.theme-choice[aria-pressed="true"] { color: var(--control-contrast); background: var(--accent); }
.theme-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.theme-choice svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }

body.landing-page {
  background:
    radial-gradient(circle at 72% 42%, var(--page-glow) 0, transparent 34%),
    var(--bg);
}

body.performance-page {
  background:
    radial-gradient(circle at 74% 8%, var(--page-glow) 0, transparent 24rem),
    linear-gradient(180deg, var(--bg), var(--page-end) 55%, var(--bg));
}

.site-header { background: var(--surface-glass); }

.facts li,
.metric,
.tabs button { background: var(--surface-1); }
.frame,
.article-footer { background: var(--surface-0); }
.caption,
.chart { background: var(--surface-3); }
.controls button,
.card,
.architecture div,
.waterfall { background: var(--panel); }
th { background: var(--surface-2); }
tr.shipped td { background: var(--warm-panel); }
.pullquote { background: linear-gradient(90deg, var(--warm-pullquote), var(--panel)); }
.waterfall-track { background: var(--surface-0); }
.chart { background: radial-gradient(circle at 80% 20%, var(--chart-glow), var(--surface-3) 55%); }
.article-footer { background: var(--surface-0); }
.footer-links a:hover,
.signup button { color: var(--control-contrast); }

.performance { color: var(--dim); }
.fact-info { border-color: var(--line-bright); }
.historian-callout { background: var(--panel); border-color: var(--line-bright); box-shadow: 0 18px 60px var(--shadow-heavy); }
.historian-callout::after { background: var(--panel); border-color: var(--line-bright); }
.planned { background: linear-gradient(135deg, var(--panel), var(--surface-0)); }
.planned::before { border-color: var(--line-bright); }
.benchmark-slide { background: radial-gradient(circle at 50% 20%, var(--chart-glow), var(--surface-0) 62%); }

.chart .axis { stroke: var(--line-bright); }
.chart .grid { stroke: var(--line); }
.chart .label { fill: var(--muted); }
.chart .value { fill: var(--text); }
.chart .minor { fill: var(--dim); }

@media (max-width: 560px) {
  .header-actions { gap: 8px !important; }
  .header-actions .header-link { display: none; }
  .header-actions .legal-link { display: grid; }
}