:root {
  /* Floating controls */
  --mv-scrolltop-right: 1.25rem;
  --mv-scrolltop-bottom: 1.25rem;
  --mv-fab-size: 2.75rem;

  /* Floating interaction */
  --mv-focus-ring: rgba(124, 98, 214, 0.9);
  --mv-fab-bg: rgba(246, 249, 252, 0.56);
  --mv-fab-bg-hover: rgba(236, 244, 255, 0.78);
  --mv-fab-border: rgba(15, 23, 42, 0.1);
  --mv-fab-border-hover: rgba(124, 98, 214, 0.24);
  --mv-fab-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  --mv-fab-shadow-hover: 0 12px 28px rgba(15, 23, 42, 0.18),
    0 0 12px rgba(124, 98, 214, 0.18), 0 0 16px rgba(14, 155, 176, 0.12);

  /* Layout offsets */
  --mv-header-offset: 4.25rem;
  --mv-theme-toggle-top: calc(var(--mv-header-offset) + 0.75rem); /* fallback */
  --mv-theme-toggle-z: 75;
}

@supports (top: env(safe-area-inset-top)) {
  :root {
    --mv-theme-toggle-top: calc(env(safe-area-inset-top) + var(--mv-header-offset) + 0.75rem);
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.25rem; /* sticky header offset */
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Helps anchor navigation on pages with lots of headings. */
.main [id] {
  scroll-margin-top: 4.25rem;
}

/* Floating action buttons */
#scrollTopBtn {
  position: fixed;
  right: var(--mv-scrolltop-right);
  width: var(--mv-fab-size);
  height: var(--mv-fab-size);
  border-radius: 9999px;
  overflow: hidden;
  isolation: isolate;
  z-index: 70;
  border: 1px solid var(--mv-fab-border);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease,
    border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  background-color: var(--mv-fab-bg);
  color: var(--mv-text);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: var(--mv-fab-shadow);
}

#themeToggleBtn {
  position: relative;
  z-index: 1;
  width: var(--mv-fab-size);
  height: var(--mv-fab-size);
  padding: 0;
  font-size: 0; /* icon-only button */
  line-height: 0;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--mv-fab-border);
  background-color: var(--mv-fab-bg);
  color: var(--mv-text);
  box-shadow: var(--mv-fab-shadow);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  cursor: pointer;
  will-change: transform;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease,
    transform 0.2s ease;
}

/* Liquid-glass highlight layer (iridescent sheen) */
#scrollTopBtn > *,
#themeToggleBtn > *,
#themeToggleBtnFloating > * {
  position: relative;
  z-index: 1;
}

#scrollTopBtn::before,
#themeToggleBtn::before,
#themeToggleBtnFloating::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 9999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  background:
    radial-gradient(
      700px circle at var(--mx, 50%) var(--my, 40%),
      rgba(255, 255, 255, 0.35),
      transparent 45%
    ),
    linear-gradient(
      135deg,
      rgba(168, 85, 247, 0.22),
      rgba(6, 182, 212, 0.14)
    );
}

#scrollTopBtn:hover::before,
#themeToggleBtn:hover::before,
#themeToggleBtnFloating:hover::before {
  opacity: 0.9;
}

#scrollTopBtn:focus-visible::before,
#themeToggleBtn:focus-visible::before,
#themeToggleBtnFloating:focus-visible::before {
  opacity: 0.65;
}

#scrollTopBtn {
  bottom: var(--mv-scrolltop-bottom);
}

#scrollTopBtn svg {
  width: 1.25rem;
  height: 1.25rem;
}

#scrollTopBtn[data-visible="false"] {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

#scrollTopBtn[data-visible="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#scrollTopBtn:hover {
  background-color: var(--mv-fab-bg-hover);
  border-color: var(--mv-fab-border-hover);
  box-shadow: var(--mv-fab-shadow-hover);
  transform: translateY(-1px);
}

html[data-theme="dark"] #scrollTopBtn:hover {
  background-color: var(--mv-fab-bg-hover);
  border-color: var(--mv-fab-border-hover);
  box-shadow: var(--mv-fab-shadow-hover);
  transform: translateY(-1px);
}

/* Dark theme base styling for scroll-to-top button */
html[data-theme="dark"] #scrollTopBtn {
  background-color: var(--mv-fab-bg);
  border-color: var(--mv-fab-border);
  box-shadow: var(--mv-fab-shadow);
}

html[data-theme="dark"] #scrollTopBtn:focus-visible {
  outline-color: var(--mv-focus-ring) !important;
}

/* Light theme base styling for floating buttons */
html[data-theme="light"] #scrollTopBtn,
html[data-theme="light"] #themeToggleBtn,
html[data-theme="light"] #themeToggleBtnFloating {
  background-color: var(--mv-fab-bg) !important;
  border-color: var(--mv-fab-border) !important;
  box-shadow: var(--mv-fab-shadow) !important;
}

html[data-theme="light"] #themeToggleBtn:hover,
html[data-theme="light"] #themeToggleBtnFloating:hover {
  background-color: var(--mv-fab-bg-hover) !important;
  border-color: var(--mv-fab-border-hover) !important;
  box-shadow: var(--mv-fab-shadow-hover) !important;
}

html[data-theme="light"] #scrollTopBtn:hover {
  background-color: var(--mv-fab-bg-hover) !important;
  border-color: var(--mv-fab-border-hover) !important;
  box-shadow: var(--mv-fab-shadow-hover) !important;
}

#themeToggleBtn:hover {
  background-color: var(--mv-fab-bg-hover);
  border-color: var(--mv-fab-border-hover);
  box-shadow: var(--mv-fab-shadow-hover);
  transform: translateY(-1px);
}

#themeToggleBtn[aria-pressed="true"] {
  /* Keep pressed state informational; visuals stay consistent. */
  background-color: var(--mv-fab-bg);
  border-color: var(--mv-fab-border);
  color: var(--mv-text);
  box-shadow: var(--mv-fab-shadow);
}

#themeToggleBtn:focus-visible,
#scrollTopBtn:focus-visible {
  outline: 2px solid var(--mv-focus-ring);
  outline-offset: 3px;
}

/* Icons inside buttons */
#themeToggleBtn .icon-sun,
#themeToggleBtn .icon-moon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25rem;
  height: 1.25rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#themeToggleBtn .icon-sun {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

#themeToggleBtn .icon-moon {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
}

html[data-theme="dark"] #themeToggleBtn {
  background-color: var(--mv-fab-bg);
  color: var(--mv-text);
  border-color: var(--mv-fab-border);
  box-shadow: var(--mv-fab-shadow);
}

html[data-theme="dark"] #themeToggleBtn:hover {
  background-color: var(--mv-fab-bg-hover);
  border-color: var(--mv-fab-border-hover);
  box-shadow: var(--mv-fab-shadow-hover);
  transform: translateY(-1px);
}

html[data-theme="dark"] #themeToggleBtn[aria-pressed="true"] {
  /* Pressed state should not look like "hover fill". */
  background-color: var(--mv-fab-bg);
  color: var(--mv-text);
  border-color: var(--mv-fab-border);
  box-shadow: var(--mv-fab-shadow) !important;
}

html[data-theme="dark"] #themeToggleBtn[aria-pressed="true"]:hover {
  background-color: var(--mv-fab-bg-hover);
  border-color: var(--mv-fab-border-hover);
  box-shadow: var(--mv-fab-shadow-hover);
  transform: translateY(-1px);
}

/* When page is scrolled - hide header button (so only floating one is interactive). */
#themeToggleBtn[data-visible="false"] {
  opacity: 0;
  pointer-events: none;
}

/* Floating copy (appears/disappears like scrollTopBtn). */
#themeToggleBtnFloating {
  position: fixed;
  top: var(--mv-theme-toggle-top);
  right: var(--mv-scrolltop-right);
  z-index: var(--mv-theme-toggle-z);
  width: var(--mv-fab-size);
  height: var(--mv-fab-size);
  padding: 0;
  font-size: 0;
  line-height: 0;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--mv-fab-border);
  background-color: var(--mv-fab-bg);
  color: var(--mv-text);
  box-shadow: var(--mv-fab-shadow);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease,
    color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#themeToggleBtnFloating[data-visible="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#themeToggleBtnFloating:hover {
  background-color: var(--mv-fab-bg-hover);
  border-color: var(--mv-fab-border-hover);
  box-shadow: var(--mv-fab-shadow-hover);
  transform: translateY(-1px);
}

html[data-theme="dark"] #themeToggleBtnFloating {
  background-color: var(--mv-fab-bg);
  border-color: var(--mv-fab-border);
  box-shadow: var(--mv-fab-shadow);
}

html[data-theme="dark"] #themeToggleBtnFloating:hover {
  background-color: var(--mv-fab-bg-hover);
  border-color: var(--mv-fab-border-hover);
  box-shadow: var(--mv-fab-shadow-hover);
  transform: translateY(-1px);
}

html[data-theme="dark"] #themeToggleBtnFloating[aria-pressed="true"] {
  background-color: var(--mv-fab-bg);
  border-color: var(--mv-fab-border);
  box-shadow: var(--mv-fab-shadow) !important;
}

#themeToggleBtnFloating .icon-sun,
#themeToggleBtnFloating .icon-moon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25rem;
  height: 1.25rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#themeToggleBtnFloating .icon-sun {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

#themeToggleBtnFloating .icon-moon {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
}

html[data-theme="dark"] #themeToggleBtnFloating .icon-sun {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
}

html[data-theme="dark"] #themeToggleBtnFloating .icon-moon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

html[data-theme="dark"] #themeToggleBtn .icon-sun {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
}

html[data-theme="dark"] #themeToggleBtn .icon-moon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Mobile polish */
@media (max-width: 640px) {
  #themeToggleBtn,
  #themeToggleBtnFloating {
    width: 2.45rem;
    height: 2.45rem;
  }

  #themeToggleBtn .icon-sun,
  #themeToggleBtn .icon-moon,
  #themeToggleBtnFloating .icon-sun,
  #themeToggleBtnFloating .icon-moon {
    width: 1.15rem;
    height: 1.15rem;
  }

  #scrollTopBtn svg {
    width: 1.15rem;
    height: 1.15rem;
  }
}

/* ===== Dark theme overrides =====
   Modern visual layer already defines light theme variables in modern-visual.css.
*/
html[data-theme="dark"] {
  --mv-bg-page: #0b1220;
  --mv-bg-surface: #0f1627;
  --mv-bg-elevated: #0f172a;
  --mv-text: #dbdfe6;
  --mv-text-muted: #aab5c4;
  --mv-border: rgba(226, 232, 240, 0.13);
  --mv-border-strong: rgba(226, 232, 240, 0.24);
  --mv-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.45);
  --mv-fab-bg: rgba(226, 232, 240, 0.05);
  --mv-fab-bg-hover: rgba(168, 85, 247, 0.12);
  --mv-fab-border: rgba(226, 232, 240, 0.12);
  --mv-fab-border-hover: rgba(6, 182, 212, 0.34);
  --mv-fab-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  --mv-fab-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.36),
    0 0 12px rgba(168, 85, 247, 0.28), 0 0 18px rgba(6, 182, 212, 0.2);
  --mv-focus-ring: rgba(116, 233, 255, 0.92);
  --mv-interactive-bg: rgba(226, 232, 240, 0.048);
  --mv-interactive-bg-hover: rgba(226, 232, 240, 0.1);
  --mv-interactive-border: rgba(226, 232, 240, 0.14);
  --mv-interactive-border-hover: rgba(6, 182, 212, 0.28);
  --mv-interactive-text: var(--mv-text);
  --mv-interactive-text-hover: rgba(116, 233, 255, 0.94);
  --mv-header-bg: rgba(15, 23, 42, 0.6);
  --mv-header-border: rgba(226, 232, 240, 0.13);
  --mv-header-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 6px 24px rgba(0, 0, 0, 0.35);
  --mv-state-active-bg: rgba(168, 85, 247, 0.11);
  --mv-state-active-text: rgba(116, 233, 255, 0.94);
  --mv-state-active-border: rgba(6, 182, 212, 0.24);
  --mv-state-active-shadow: 0 1px 2px rgba(6, 182, 212, 0.1);
  --mv-hero-radial-1: rgba(59, 130, 246, 0.24);
  --mv-hero-radial-2: transparent;
  --mv-link-color: rgba(116, 233, 255, 0.94);
  --mv-link-hover: rgba(201, 147, 255, 0.98);
  --mv-card-grad-start: rgba(30, 41, 59, 0.72);
  --mv-card-grad-end: rgba(15, 23, 42, 0.86);
  --mv-utility-bg-black: rgba(226, 232, 240, 0.245);
  --mv-glow-soft: 0 0 10px rgba(168, 85, 247, 0.24),
    0 0 14px rgba(6, 182, 212, 0.16);
}

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

html[data-theme="dark"] .site-header.navbar,
html[data-theme="dark"] .navbar.site-header {
  background-color: var(--mv-header-bg) !important;
  border-bottom: 1px solid var(--mv-header-border);
  box-shadow: var(--mv-header-shadow);
}

html[data-theme="dark"] .site-header__link {
  color: var(--mv-interactive-text) !important;
  background-color: var(--mv-interactive-bg) !important;
  border-color: var(--mv-interactive-border) !important;
}

html[data-theme="dark"] .site-header__link:hover {
  background: var(--mv-interactive-bg-hover) !important;
  color: var(--mv-interactive-text-hover) !important;
  border-color: var(--mv-interactive-border-hover) !important;
  box-shadow: var(--mv-glow-soft) !important;
}

html[data-theme="dark"] .site-header__link[aria-current="page"] {
  background: var(--mv-state-active-bg) !important;
  color: var(--mv-state-active-text) !important;
  border-color: var(--mv-state-active-border) !important;
  box-shadow: var(--mv-state-active-shadow) !important;
}

html[data-theme="dark"] .hero.main,
html[data-theme="dark"] .hero.main.svelte-13ia1v2 {
  background: radial-gradient(
      120% 85% at 50% 0%,
      var(--mv-hero-radial-1),
      var(--mv-hero-radial-2) 58%
    ),
    var(--mv-bg-page);
}

html[data-theme="dark"] .hero .mylink.svelte-13ia1v2 {
  background-color: var(--mv-interactive-bg) !important;
  border-color: var(--mv-interactive-border) !important;
  box-shadow: var(--mv-shadow-soft) !important;
}

html[data-theme="dark"] .hero .mylink.svelte-13ia1v2:hover {
  background-color: var(--mv-interactive-bg-hover) !important;
  border-color: var(--mv-interactive-border-hover) !important;
  color: var(--mv-interactive-text-hover) !important;
  box-shadow: var(--mv-glow-soft) !important;
}

/* Fix hardcoded utility classes used in HTML */
html[data-theme="dark"] .text-black {
  color: var(--mv-text) !important;
}

html[data-theme="dark"] .bg-black {
  background-color: var(--mv-utility-bg-black) !important;
}

/* Compiled markup may hardcode card text to black. Make it inherit dark contrast. */
html[data-theme="dark"] .card {
  color: var(--mv-text) !important;
}

/* Compiled markup may hardcode details summary to dark-ish color (#333).
   Ensure it inherits the proper dark-theme contrast. */
html[data-theme="dark"] details > summary {
  color: var(--mv-text) !important;
}

html[data-theme="dark"] .mv-toc {
  background: linear-gradient(
      165deg,
      var(--mv-card-grad-start),
      var(--mv-card-grad-end)
    ),
    var(--mv-bg-elevated) !important;
  border-color: rgba(226, 232, 240, 0.16) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34) !important;
}

html[data-theme="dark"] .mv-card {
  background: linear-gradient(
      165deg,
      var(--mv-card-grad-start),
      var(--mv-card-grad-end)
    ),
    var(--mv-bg-elevated) !important;
  border-color: rgba(226, 232, 240, 0.16) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34) !important;
}

html[data-theme="dark"] .mv-card:hover {
  border-color: rgba(6, 182, 212, 0.32) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4),
    0 0 12px rgba(168, 85, 247, 0.18), 0 0 16px rgba(6, 182, 212, 0.14) !important;
}

html[data-theme="dark"] .mv-toc a {
  color: var(--mv-link-color) !important;
}

html[data-theme="dark"] .mv-toc a:hover {
  color: var(--mv-link-hover) !important;
}

/* Footer links inside dark backgrounds */
html[data-theme="dark"] a.footer-info-link:focus-visible {
  outline: 2px solid rgba(133, 196, 255, 0.84) !important;
}

/* Optional: better contrast for typical blue utility text */
html[data-theme="dark"] .text-blue-400 {
  color: rgba(133, 196, 255, 0.92) !important;
}

/* Footer section titles (h6.footer-title) readability */
html[data-theme="dark"] .footer .footer-title {
  color: var(--mv-text) !important;
  opacity: 1 !important;
}

/* Dark footer: avoid pure white from utility classes (text-white). */
html[data-theme="dark"] .footer .text-white {
  color: var(--mv-text) !important;
}

html[data-theme="dark"] .footer a.text-white {
  color: var(--mv-text) !important;
}

/* Dark footer: calmer link accent. */
html[data-theme="dark"] .footer a.footer-info-link {
  color: var(--mv-link-color) !important;
}

html[data-theme="dark"] .footer a.footer-info-link:hover {
  color: var(--mv-link-hover) !important;
}

/* ===== Light theme readability / palette polish ===== */
html[data-theme="light"] .site-header.navbar,
html[data-theme="light"] .navbar.site-header {
  background-color: var(--mv-header-bg) !important;
  border-bottom-color: var(--mv-header-border) !important;
}

html[data-theme="light"] {
  --mv-header-bg: rgba(249, 250, 255, 0.9);
  --mv-header-border: rgba(124, 98, 214, 0.09);
  --mv-header-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 4px 24px rgba(15, 23, 42, 0.045);
  --mv-state-active-bg: rgba(124, 98, 214, 0.1);
  --mv-state-active-text: rgba(83, 63, 165, 0.9);
  --mv-state-active-border: rgba(124, 98, 214, 0.22);
  --mv-state-active-shadow: 0 1px 2px rgba(124, 98, 214, 0.1);
  --mv-hero-radial-1: rgba(124, 98, 214, 0.12);
  --mv-hero-radial-2: rgba(14, 155, 176, 0.05);
  --mv-link-color: rgba(37, 129, 219, 0.9);
  --mv-link-hover: rgba(124, 98, 214, 0.94);
  --mv-card-grad-start: rgba(255, 255, 255, 0.72);
  --mv-card-grad-end: rgba(255, 255, 255, 0.58);
  --mv-utility-bg-black: rgba(15, 23, 42, 0.22);
}

html[data-theme="light"] .site-header__link:hover {
  background: var(--mv-interactive-bg-hover) !important;
  color: var(--mv-interactive-text-hover) !important;
  border-color: var(--mv-interactive-border-hover) !important;
  box-shadow: var(--mv-glow-soft) !important;
}

html[data-theme="light"] .site-header__link:focus-visible {
  outline-color: rgba(124, 98, 214, 0.9) !important;
}

html[data-theme="light"] .text-black {
  /* Compiled markup may hardcode black text; in light theme we want the calibrated --mv-text instead. */
  color: var(--mv-text) !important;
}

html[data-theme="light"] .bg-black {
  background-color: var(--mv-utility-bg-black) !important;
}

html[data-theme="light"] .hero.main,
html[data-theme="light"] .hero.main.svelte-13ia1v2 {
  background: radial-gradient(
      110% 80% at 50% 0%,
      var(--mv-hero-radial-1),
      var(--mv-hero-radial-2) 30%,
      transparent 62%
    ),
    var(--mv-bg-page) !important;
}

/* Hero CTA hover: reduce vividness on light backgrounds. */
html[data-theme="light"] .hero .mylink.svelte-13ia1v2 {
  border-color: var(--mv-interactive-border) !important;
}

html[data-theme="light"] .hero .mylink.svelte-13ia1v2:hover {
  color: var(--mv-interactive-text-hover) !important;
  border-color: var(--mv-interactive-border-hover) !important;
  box-shadow: var(--mv-glow-soft) !important;
}

html[data-theme="light"] .mv-toc {
  background: linear-gradient(
      165deg,
      var(--mv-card-grad-start),
      var(--mv-card-grad-end)
    ),
    var(--mv-bg-elevated) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: var(--mv-shadow-soft) !important;
}

html[data-theme="light"] .mv-toc a {
  color: var(--mv-link-color) !important;
}

html[data-theme="light"] .mv-toc a:hover {
  color: var(--mv-link-hover) !important;
}

html[data-theme="light"] .text-blue-400 {
  /* Tailwind `text-blue-400` can feel a bit too vivid on the light surface. */
  color: var(--mv-link-color) !important;
}

html[data-theme="light"] a.text-blue-400:hover,
html[data-theme="light"] .text-blue-400:hover {
  color: var(--mv-link-hover) !important;
}

html[data-theme="light"] .card {
  color: var(--mv-text) !important;
}

html[data-theme="light"] details > summary {
  color: var(--mv-text) !important;
}

/* ===== Light theme footer polish ===== */
html[data-theme="light"] .footer {
  background-color: rgba(247, 249, 252, 0.96) !important;
  color: var(--mv-text) !important;
  border-top-color: var(--mv-border) !important;
}

html[data-theme="light"] .footer .text-white {
  color: var(--mv-text) !important;
}

html[data-theme="light"] .footer a.text-white {
  color: var(--mv-text) !important;
}

html[data-theme="light"] .footer a.footer-info-link {
  color: var(--mv-link-color) !important;
}

html[data-theme="light"] .footer a.footer-info-link:hover {
  color: var(--mv-link-hover) !important;
}

/* Light header active state: reduce contrast vs white background. */
html[data-theme="light"] .site-header__link[aria-current="page"] {
  background: var(--mv-state-active-bg) !important;
  color: var(--mv-state-active-text) !important;
  border-color: var(--mv-state-active-border) !important;
  box-shadow: var(--mv-state-active-shadow) !important;
}

html[data-theme="light"] .footer .footer-title {
  color: rgba(47, 63, 85, 0.96) !important;
  opacity: 1 !important;
}