html[data-effective-theme="light"] {
  color-scheme: light;
}

html[data-effective-theme="night"] {
  color-scheme: dark;
  --page: #151817;
  --surface: #1b1f1d;
  --text: #e6e9e6;
  --muted: #aab4ae;
  --line: #303633;
  --accent: #9bc3b9;
  --accent-soft: #202a26;
  --elsewhere: #b7bf94;
  --top: #aebdca;
  --warning-soft: #2a261e;
  --error-soft: #2b2020;
}

body,
.topbar,
.reader-tools > summary,
.reader-tools-panel,
.weather-drawer,
.light-drawer,
.word-translation {
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

html[data-effective-theme="night"] body {
  background: var(--page);
  color: var(--text);
}

html[data-effective-theme="night"] .topbar {
  background: var(--surface);
  border-color: var(--line);
}

html[data-effective-theme="night"] a {
  color: var(--accent);
}

html[data-effective-theme="night"] a:focus-visible,
html[data-effective-theme="night"] button:focus-visible,
html[data-effective-theme="night"] summary:focus-visible {
  outline-color: #a9c9c1;
}

html[data-effective-theme="night"] ::selection {
  background: #365048;
  color: #f3f5f3;
}

html[data-effective-theme="night"] button {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}

html[data-effective-theme="night"] .reader-tools > summary {
  background: #1d2320;
  border-color: #39413d;
  color: #c0c8c3;
}

html[data-effective-theme="night"] .reader-tools > summary:hover {
  background: #252d29;
  border-color: #53615b;
  color: #eef1ee;
}

html[data-effective-theme="night"] .reader-tools-panel {
  background: #1a1f1d;
  border-color: #333b37;
}

html[data-effective-theme="night"] .level-choice,
html[data-effective-theme="night"] .level-mini,
html[data-effective-theme="night"] .theme-choice {
  background: #202623;
  border-color: #3b4540;
  color: #d8dfdb;
}

html[data-effective-theme="night"] .level-choice:hover,
html[data-effective-theme="night"] .level-mini:hover,
html[data-effective-theme="night"] .theme-choice:hover {
  background: #2a322e;
  border-color: #55635c;
}

html[data-effective-theme="night"] .level-choice.active,
html[data-effective-theme="night"] .level-mini.active,
html[data-effective-theme="night"] .theme-choice.active {
  background: #9bc3b9;
  border-color: #9bc3b9;
  color: #13211d;
}

html[data-effective-theme="night"] .language-mark {
  background: #202724;
  border-color: #3b4540;
  color: #d4dcd7;
}

html[data-effective-theme="night"] .new-badge {
  background: #20362e;
  color: #b8dacb;
}

html[data-effective-theme="night"] .translation-help,
html[data-effective-theme="night"] .why-it-matters,
html[data-effective-theme="night"] .weather-summary {
  background: #1d2622;
  color: #bec8c2;
}

html[data-effective-theme="night"] .why-it-matters strong,
html[data-effective-theme="night"] .translation-help strong {
  color: var(--text);
}

html[data-effective-theme="night"] .word-list {
  border-left-color: #41564e;
}

html[data-effective-theme="night"] .word-translation {
  background: #202522;
  border-color: #46514c;
  color: var(--text);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .38);
}

html[data-effective-theme="night"] .topic-overview {
  background: #1b211e;
  border-color: #333c38;
  border-left-color: #718a82;
}

html[data-effective-theme="night"] .topic-index {
  border-color: #343d39;
}

html[data-effective-theme="night"] .topic-index a {
  color: #c5d3ce;
}

html[data-effective-theme="night"] .category-head {
  border-top-color: #596761;
}

html[data-effective-theme="night"] .elsewhere {
  background: #1b1f19;
  border-color: #353b30;
}

html[data-effective-theme="night"] .feel-good-section {
  background: #211f19;
  border-color: #403b2c;
  border-left-color: #8e815d;
}

html[data-effective-theme="night"] .constructive-mark {
  color: #b9c795;
}

html[data-effective-theme="night"] .notice-info {
  background: #1d2824;
}

html[data-effective-theme="night"] .notice-warn {
  background: #2a261e;
}

html[data-effective-theme="night"] .notice-error {
  background: #2b2020;
}

html[data-effective-theme="night"] .weather-backdrop {
  background: rgba(0, 0, 0, .48);
}

html[data-effective-theme="night"] .weather-drawer,
html[data-effective-theme="night"] .light-drawer {
  background: #181c1a;
  border-color: #303633;
  box-shadow: 0 0 54px rgba(0, 0, 0, .42);
}

html[data-effective-theme="night"] .light-empty {
  background: #202219;
  border-left-color: #89936c;
}

html[data-effective-theme="night"] .aurora-alert {
  background: #1b2a22;
  border-color: #355443;
  border-left-color: #6da180;
}

html[data-effective-theme="night"] .aurora-alert .weather-kicker {
  color: #9bcaae;
}

html[data-effective-theme="night"] .weather-hour {
  border-top-color: #292f2c;
}

html[data-effective-theme="night"] .weather-rain-cell {
  background: rgba(73, 128, 157, calc(.12 + var(--rain) * .48));
  box-shadow: inset 0 -3px 0 rgba(92, 155, 188, calc(var(--rain) * .6));
}

html[data-effective-theme="night"] .weather-cloud-cell {
  background: rgba(154, 166, 172, calc(.08 + var(--cloud) * .25));
}

html[data-effective-theme="night"] .footer {
  border-color: var(--line);
}

html[data-effective-theme="night"] .mobile-reading .side-feature-tab,
html[data-effective-theme="night"] .light-open,
html[data-effective-theme="night"] .weather-open {
  color: var(--muted) !important;
}

@media (max-width: 600px) {
  html[data-effective-theme="night"] .light-open,
  html[data-effective-theme="night"] .weather-open {
    background: rgba(24, 28, 26, .96);
    border-color: #303633;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .22);
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  .topbar,
  .reader-tools > summary,
  .reader-tools-panel,
  .weather-drawer,
  .light-drawer,
  .word-translation {
    transition: none;
  }
}