:root {
  color-scheme: light;
}

:root[data-theme="dark"],
body.dark-mode {
  color-scheme: dark;
  --bg: #08100b;
  --surface: #111b16;
  --surface-soft: #14261b;
  --surface-muted: #162f22;
  --primary: #8ac24b;
  --primary-soft: rgba(138, 194, 75, 0.18);
  --secondary: #97bb7d;
  --accent: #e2be42;
  --text: #eef1e7;
  --text-muted: #aeb7a4;
  --border: rgba(255,255,255,0.08);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
  --surface-elevated: #16261d;
  --surface-contrast: #1b3324;
}

:root[data-theme="dark"] .header,
body.dark-mode .header {
  background: rgba(7, 17, 11, 0.94);
  border-color: rgba(255,255,255,0.08);
}

:root[data-theme="dark"] .nav__list,
:root[data-theme="dark"] .nav__list a,
:root[data-theme="dark"] .nav-actions,
:root[data-theme="dark"] .brand__text small,
body.dark-mode .nav__list,
body.dark-mode .nav__list a,
body.dark-mode .nav-actions,
body.dark-mode .brand__text small {
  color: var(--text);
}

:root[data-theme="dark"] .header.header--scrolled,
body.dark-mode .header.header--scrolled {
  background: rgba(10, 18, 12, 0.95);
}

:root[data-theme="dark"] .menu-toggle,
:root[data-theme="dark"] .btn--secondary,
:root[data-theme="dark"] .search-bar,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .stats-card,
:root[data-theme="dark"] .faq-card,
:root[data-theme="dark"] .newsletter,
:root[data-theme="dark"] .footer-grid,
:root[data-theme="dark"] .footer-bottom,
body.dark-mode .menu-toggle,
body.dark-mode .btn--secondary,
body.dark-mode .search-bar,
body.dark-mode .card,
body.dark-mode .stats-card,
body.dark-mode .faq-card,
body.dark-mode .newsletter,
body.dark-mode .footer-grid,
body.dark-mode .footer-bottom {
  background: var(--surface);
}

:root[data-theme="dark"] .search-input,
:root[data-theme="dark"] .newsletter input,
:root[data-theme="dark"] .calculator-panel input,
:root[data-theme="dark"] .calculator-panel select,
:root[data-theme="dark"] .faq-answer,
:root[data-theme="dark"] .article-content,
:root[data-theme="dark"] .toc,
body.dark-mode .search-input,
body.dark-mode .newsletter input,
body.dark-mode .calculator-panel input,
body.dark-mode .calculator-panel select,
body.dark-mode .faq-answer,
body.dark-mode .article-content,
body.dark-mode .toc {
  background: var(--surface-soft);
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .faq-card,
:root[data-theme="dark"] .newsletter,
:root[data-theme="dark"] .footer-grid,
:root[data-theme="dark"] .footer-bottom,
body.dark-mode .card,
body.dark-mode .faq-card,
body.dark-mode .newsletter,
body.dark-mode .footer-grid,
body.dark-mode .footer-bottom {
  border-color: rgba(255,255,255,0.08);
}

:root[data-theme="dark"] .footer,
body.dark-mode .footer {
  background: #08110b;
}

:root[data-theme="dark"] .primary-btn,
body.dark-mode .primary-btn {
  background: var(--primary);
}

:root[data-theme="dark"] .secondary-btn,
:root[data-theme="dark"] .btn--secondary,
body.dark-mode .secondary-btn,
body.dark-mode .btn--secondary {
  border-color: rgba(138, 194, 75, 0.18);
  color: var(--text);
}

:root[data-theme="dark"] a:hover,
:root[data-theme="dark"] a:focus-visible,
:root[data-theme="dark"] .card__meta,
:root[data-theme="dark"] .breadcrumb a,
body.dark-mode a:hover,
body.dark-mode a:focus-visible,
body.dark-mode .card__meta,
body.dark-mode .breadcrumb a {
  color: var(--primary);
}