/* Theme roles: accents used for text are separate from filled surfaces. */
:root {
  color-scheme: light;
  --on-accent: #101817;
  --surface: #182321;
  --surface-raised: #202e2a;
  --accent-surface: #203a30;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #101817;
  --ink: #edf3ec;
  --muted: #b0bdb5;
  --blue: #9badff;
  --orange: #ffab88;
  --line: #3a4c44;
  --lime: #d5f18b;
}
.theme-toggle { flex-shrink: 0; }
html[data-theme="dark"] ::selection { background: var(--lime); color: var(--on-accent); }
html[data-theme="dark"] .skip { background: var(--surface-raised); color: var(--ink); }
html[data-theme="dark"] .btn,
html[data-theme="dark"] .brand-symbol { background: var(--blue); color: var(--on-accent); }
html[data-theme="dark"] .btn:hover { background: #bdc9ff; color: var(--on-accent); }
html[data-theme="dark"] .btn.ghost { background: transparent; color: var(--ink); }
html[data-theme="dark"] .btn.ghost:hover { background: var(--surface-raised); }
html[data-theme="dark"] .sticker,
html[data-theme="dark"] .mentor-badge { color: var(--on-accent); }
html[data-theme="dark"] .mentor-caption { color: #172121; }
html[data-theme="dark"] .floating { background: var(--surface-raised); box-shadow: 0 12px 30px #0003; }
html[data-theme="dark"] .plot-grid { background-image: linear-gradient(#b0bdb513 1px,transparent 1px),linear-gradient(90deg,#b0bdb513 1px,transparent 1px); }
html[data-theme="dark"] .route-intro { background: var(--surface-raised); }
html[data-theme="dark"] .route-intro p { color: var(--muted); }
html[data-theme="dark"] .route-intro .route-id { color: #70867b; }
html[data-theme="dark"] .lab { background: #0b1210; color: var(--ink); }
html[data-theme="dark"] .experiment { background: var(--surface); }
html[data-theme="dark"] .answer { color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .answer:hover,
html[data-theme="dark"] .answer.selected { border-color: var(--lime); background: #d5f18b0c; }
html[data-theme="dark"] .materials,
html[data-theme="dark"] .offer-calculator,
html[data-theme="dark"] .extra-faq,
html[data-theme="dark"] .compare-section { background: var(--surface); }
html[data-theme="dark"] .article-card { border-color: var(--line); }
html[data-theme="dark"] .article-illustration { background: #25352f; }
html[data-theme="dark"] .article-card:nth-child(2) .article-illustration { background: #382b24; }
html[data-theme="dark"] .article-card:nth-child(2) .article-illustration strong { color: var(--orange); }
html[data-theme="dark"] .article-card:nth-child(3) .article-illustration { background: #252f46; }
html[data-theme="dark"] .journey-section { background: var(--paper); }
html[data-theme="dark"] .journey-step { background: var(--surface); }
html[data-theme="dark"] .journey-final { background: var(--accent-surface); }
html[data-theme="dark"] .journey-final > span { color: var(--lime); }
html[data-theme="dark"] .journey-final h3 { color: var(--ink); }
html[data-theme="dark"] .journey-final p { color: #c2d5c9; }
html[data-theme="dark"] .calculator-controls { background: var(--surface-raised); }
html[data-theme="dark"] .calc-select-label select { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .calculator-result { background: #0b1210; color: var(--ink); }
html[data-theme="dark"] .calculator-result .btn,
html[data-theme="dark"] .contact .btn { background: var(--lime); color: var(--on-accent); }
html[data-theme="dark"] .calculator-result .btn:hover,
html[data-theme="dark"] .contact .btn:hover { background: #e6ffaf; color: var(--on-accent); }
html[data-theme="dark"] .compare-card.compare-muted { background: var(--paper); }
html[data-theme="dark"] .compare-card.compare-accent { background: var(--accent-surface); color: var(--ink); border-color: #60846d; }
html[data-theme="dark"] .compare-accent h3 { color: var(--lime); }
html[data-theme="dark"] .compare-accent .compare-kicker,
html[data-theme="dark"] .compare-accent .compare-item span { color: #c2d5c9; }
html[data-theme="dark"] .compare-accent .compare-card-head,
html[data-theme="dark"] .compare-accent .compare-item { border-color: #4c6b59; }
html[data-theme="dark"] .roast-lede { background: #30251f; }
html[data-theme="dark"] .roast-lede strong,
html[data-theme="dark"] .compare-muted::before { color: var(--orange); }
html[data-theme="dark"] .contact { background: #192a24; color: var(--ink); border-top: 1px solid var(--line); }
html[data-theme="dark"] .contact p { color: #c2d5c9; }
html[data-theme="dark"] .article-page .callout { background: var(--surface-raised); color: var(--ink); }
html[data-theme="dark"] .article-page code { background: #2a3935; color: var(--ink); }
html[data-theme="dark"] .menu-toggle { color: var(--ink); }
html[data-theme="dark"] .navlinks { background: var(--paper); }
html[data-theme="dark"] .pricing-section { background: var(--paper); }
html[data-theme="dark"] .price-card { background: var(--surface); }
html[data-theme="dark"] .price-featured { background: #25345f; border-color: #6076d8; }
html[data-theme="dark"] .proof-section { background: var(--surface); }
html[data-theme="dark"] .review-card { background: #0b1210; }
html[data-theme="dark"] .journey-section .journey-step { background: #f5f3ec; color: #172121; }
html[data-theme="dark"] .journey-section .journey-step h3 { color: #172121; }
html[data-theme="dark"] .journey-section .journey-step p { color: #59615d; }
html[data-theme="dark"] .journey-section .journey-final { background: var(--lime); }
html[data-theme="dark"] .journey-section .journey-final p { color: #344038; }
html[data-theme="dark"] .offers-section { background: var(--surface); }
html[data-theme="dark"] .offer-card { background: var(--paper); }
html[data-theme="dark"] .offer-card:hover,
html[data-theme="dark"] .offer-card:focus-visible { background: #25345f; color: #fff; }
html[data-theme="dark"] .offer-dialog { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .offer-dialog img { background: #25352f; }