/* Day overrides leave the original night palette intact. */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f8;
  --panel: #fff;
  --line: #d3dfe5;
  --cyan: #00758c;
  --muted: #4b5c6c;
  --white: #152a38;
}
html[data-theme="light"] body { background: var(--bg); }
html[data-theme="light"] .hero-art img {
  content: url("/learn-assets/hero-light.png");
  filter: none;
  mix-blend-mode: normal;
  mask-image: radial-gradient(ellipse, black 58%, transparent 82%);
}
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .art-caption { color: #006d83; }
html[data-theme="light"] .panel { background: #fff; }
html[data-theme="light"] .card { background: #f7fafb; border-color: var(--line); }
html[data-theme="light"] .channels span {
  background: #e8f2f4;
  border-color: #c6dce1;
  color: #285361;
}
html[data-theme="light"] .button {
  background: #00758c;
  border-color: #00758c;
  color: #fff;
}
html[data-theme="light"] .button:hover {
  background: #005c70;
  border-color: #005c70;
  box-shadow: 0 5px 20px rgba(0, 84, 106, .15);
}
html[data-theme="light"] .button.outline {
  background: #fff;
  border-color: #a5bec7;
  color: #165568;
}
html[data-theme="light"] .button.outline:hover { background: #e8f2f4; }
html[data-theme="light"] .notice {
  background: #edf6f7;
  border-color: #b4d7dd;
  color: #1d5965;
}
html[data-theme="light"] .notice span { color: #946000; }
html[data-theme="light"] .tag { background: #ffdf9e; color: #523b08; }
html[data-theme="light"] .checklist li,
html[data-theme="light"] .help-list details { border-bottom-color: var(--line); }
html[data-theme="light"] .evidence { background: #eef4f6; }
html[data-theme="light"] .cta { background: #e3f0f3; border-color: #afcfd7; }
html[data-theme="light"] .skip { background: #00758c; color: #fff; }
html[data-theme="light"] main :is(a, summary):focus-visible {
  outline-color: #00758c;
}
/* Keep the supplied white footer wordmark legible in both themes. */
html[data-theme="light"] footer {
  max-width: none;
  padding-left: max(24px, calc((100% - 1170px) / 2));
  padding-right: max(24px, calc((100% - 1170px) / 2));
  background: #0d1016;
  color: #fff;
}
html[data-theme="light"] footer p,
html[data-theme="light"] footer > a:last-child { color: #b0c5df; }

.learn-theme-toggle {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  transition: border-color 150ms, background-color 150ms, color 150ms;
}
.learn-theme-toggle:hover {
  border-color: rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .07);
  color: #fff;
}
.learn-theme-toggle svg { display: block; width: 18px; height: 18px; }
.learn-theme-toggle .learn-theme-moon,
html[data-theme="light"] .learn-theme-toggle .learn-theme-sun { display: none; }
html[data-theme="light"] .learn-theme-toggle .learn-theme-moon { display: block; }
.learn-theme-toggle.is-menu {
  display: flex;
  width: 100%;
  min-height: 46px;
  height: auto;
  justify-content: flex-start;
  gap: 12px;
  margin: 4px 0 0;
  padding: 0 12.8px;
  border-color: rgba(255, 255, 255, .12);
  font-size: 14px;
  font-weight: 700;
}
@media (min-width: 640px) {
  .learn-theme-toggle { display: inline-flex; }
}