/* Hu3Hmong — dark theme. Light tokens stay in base.css. */

html[data-theme="dark"] {
  color-scheme: dark;
  --fg-rgb: 244, 238, 230;
  --page: #140f18;
  --surface: #24182e;
  --ink: #f4eee6;
  --ink-soft: #eadcf6;
  --gray-50: #1c1524;
  --gray-100: #2a2036;
  --gray-200: #413552;
  --gray-400: #c9bcd2;
  --gray-500: #ddd0e4;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  --admin-bg: #120e16;
  --admin-soft: #2a2236;
  --admin-surface: #1e1728;
  --admin-sidebar: #140e1c;
  --admin-border: rgba(244, 238, 230, 0.12);
  --admin-text: #f4eee6;
  --admin-muted: #cbbfd4;
  --admin-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --affiliate-ink: #f4eee6;
  --affiliate-muted: #cbbfd4;
  --affiliate-line: rgba(244, 238, 230, 0.12);
  --affiliate-surface: #24182e;
  --affiliate-bg: #140f18;
  --affiliate-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--ink);
  font-size: 1.05rem;
  transition: var(--transition);
}

.theme-toggle:hover {
  background: rgba(75, 31, 94, 0.06);
  color: var(--brand);
  transform: translateY(-2px);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.theme-toggle__icon--sun { display: none; }

html[data-theme="dark"] .theme-toggle__icon--moon { display: none; }

html[data-theme="dark"] .theme-toggle__icon--sun { display: inline-block; }

html[data-theme="dark"] .theme-toggle {
  color: var(--ink);
}

html[data-theme="dark"] .theme-toggle:hover {
  background: rgba(244, 238, 230, 0.08);
  color: var(--gold-light);
}

.theme-toggle--admin {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--admin-text, var(--ink));
}

.theme-toggle--admin:hover {
  transform: none;
  background: var(--admin-bg, rgba(244, 238, 230, 0.08));
}

.theme-toggle--floating {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 40;
  background: var(--surface);
  box-shadow: var(--shadow);
}

@media (max-width: 768px) {
  .home-header__actions .lang-dropdown,
  .home-header__actions .icon-btn--wish,
  .home-header__actions .icon-btn--account {
    display: none;
  }

  .home-header__actions .theme-toggle,
  .home-header__actions .icon-btn,
  .home-header__actions .mobile-toggle {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
}

@media (hover: none) {
  .theme-toggle:hover {
    transform: none;
  }
}

.admin-popup-shell__tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

html[data-theme="dark"] .home-header {
  background: rgba(20, 15, 24, 0.92);
  border-bottom-color: rgba(201, 163, 78, 0.28);
}

html[data-theme="dark"] .home-nav__link,
html[data-theme="dark"] .lang-switch__btn,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .mobile-toggle,
html[data-theme="dark"] .mobile-nav__close,
html[data-theme="dark"] .home-footer__tagline,
html[data-theme="dark"] .home-footer__copy,
html[data-theme="dark"] .auth-tab,
html[data-theme="dark"] .auth-sub,
html[data-theme="dark"] .auth-field label {
  color: rgba(244, 238, 230, 0.78);
}

html[data-theme="dark"] .home-nav__link:hover,
html[data-theme="dark"] .home-nav__link--active {
  color: var(--gold-light);
  background: rgba(244, 238, 230, 0.08);
}

html[data-theme="dark"] .icon-btn:hover {
  background: rgba(244, 238, 230, 0.08);
  color: var(--gold-light);
}

html[data-theme="dark"] .lang-switch,
html[data-theme="dark"] .auth-tabs,
html[data-theme="dark"] .lang-dropdown__trigger {
  background: rgba(244, 238, 230, 0.06);
  border-color: rgba(244, 238, 230, 0.14);
  color: var(--ink);
}

html[data-theme="dark"] .lang-switch__btn.active,
html[data-theme="dark"] .plp-card__badge--gold,
html[data-theme="dark"] .affiliate-sidebar__avatar {
  color: var(--brand);
}

html[data-theme="dark"] .home-footer {
  border-top-color: rgba(201, 163, 78, 0.22);
}

html[data-theme="dark"] .flash,
html[data-theme="dark"] .flash--homepage-lead,
html[data-theme="dark"] .categories {
  background: var(--page);
  border-color: rgba(244, 238, 230, 0.1);
}

html[data-theme="dark"] .hero-shell {
  background: var(--surface);
  border-color: rgba(244, 238, 230, 0.12);
  box-shadow: none;
}

html[data-theme="dark"] .hero-intro {
  background: linear-gradient(135deg, #2a1c36, #1a1222);
}

html[data-theme="dark"] .flash__sub,
html[data-theme="dark"] .story__text,
html[data-theme="dark"] .values__label {
  color: rgba(244, 238, 230, 0.7);
}

html[data-theme="dark"] .home-footer__social-link,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .mobile-nav__link {
  border-color: rgba(244, 238, 230, 0.12);
}

html[data-theme="dark"] .home-footer__list,
html[data-theme="dark"] .home-footer__list a,
html[data-theme="dark"] .mobile-nav__link {
  color: var(--ink);
}

html[data-theme="dark"] .search-panel__input,
html[data-theme="dark"] .auth-field input,
html[data-theme="dark"] .auth-field select,
html[data-theme="dark"] .auth-field textarea {
  border-color: rgba(244, 238, 230, 0.16);
}

html[data-theme="dark"] .search-panel__input::placeholder,
html[data-theme="dark"] .auth-field input::placeholder,
html[data-theme="dark"] .auth-field textarea::placeholder {
  color: rgba(244, 238, 230, 0.42);
}

html[data-theme="dark"] .settings-panel__body,
html[data-theme="dark"] #viewSettings .admin-panel:last-child .admin-panel__body,
html[data-theme="dark"] .perm-panel__header,
html[data-theme="dark"] .media-upload-zone {
  background: var(--admin-surface);
}

html[data-theme="dark"] .homong-confirm__box {
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .homong-confirm__title {
  color: var(--ink);
}

html[data-theme="dark"] .homong-confirm__message {
  color: var(--gray-500);
}

html[data-theme="dark"] .homong-confirm__header {
  border-bottom-color: var(--gray-200);
}

html[data-theme="dark"] .homong-confirm__btn--cancel,
html[data-theme="dark"] .homong-confirm__actions .adm-btn--gray {
  background: var(--gray-100);
  color: var(--ink);
  border-color: var(--gray-200);
}

html[data-theme="dark"] ::selection {
  background: rgba(201, 163, 78, 0.35);
  color: var(--ink);
}