/* ================= DARK THEME (enabled when html has class: theme-dark - no need to change anything here!) ================= */

html.theme-dark {
  --bg: #121212;
  --outer-bg: #0a0a0a;
  --surface: #1b1b1b;
  --text: rgba(255, 255, 255, 0.94);
  --muted: rgba(255, 255, 255, 0.70);
  --line: rgba(255, 255, 255, 0.14);

  --nav-bg: #161616;
  --footer-bg: #141414;

  --page-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

}

html.theme-dark .banner-overlay {
  background: rgba(0, 0, 0, 0.55);
}

html.theme-dark .nav-links a.active {
  background: rgba(255, 255, 255, 0.10);
}

html.theme-dark .nav-links a:hover {
  background: rgba(255, 255, 255, 0.08);
}

html.theme-dark .nav-cta,
html.theme-dark .nav-dark,
html.theme-dark .nav-toggle {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text);
}

html.theme-dark .nav-cta:hover,
html.theme-dark .nav-dark:hover,
html.theme-dark .nav-toggle:hover {
  background: rgba(255, 255, 255, 0.10);
}

html.theme-dark .site-header {
  box-shadow: none;
}

html.theme-dark a {
  text-decoration-color: rgba(255, 255, 255, 0.22);
}

html.theme-dark a:hover {
  text-decoration-color: rgba(255, 255, 255, 0.35);
}