/* Dark mode — remaps design tokens so text/surfaces stay readable */

html.theme-dark {
  color-scheme: dark;
  color: #e8eaed;
  --white: 220 16% 11%;
  --body-h: 210;
  --body-s: 12%;
  --body-l: 82%;
  --heading-h: 210;
  --heading-s: 16%;
  --heading-l: 96%;
  --text-h: 210;
  --text-s: 14%;
  --text-l: 90%;
  --text-light: 210 10% 72%;
  --border: 220 12% 24%;
  --light-h: 220;
  --light-s: 14%;
  --light-l: 15%;
  --light-2: 220 14% 17%;
  --light-3: 220 12% 26%;
  --gray-color: 220 10% 32%;
  --black-h: 0;
  --black-s: 0%;
  --black-l: 94%;
  --box-shadow: 0 16px 24px 0 hsl(0 0% 0% / 0.4);
}

html.theme-dark body {
  background: hsl(var(--white));
  color: hsl(var(--body-color));
}

html.theme-dark .bg-white,
html.theme-dark .bg--white,
html.theme-dark .header-area,
html.theme-dark .header-area.bg-white,
html.theme-dark .header-middle,
html.theme-dark .header-top,
html.theme-dark .card,
html.theme-dark .modal-content,
html.theme-dark .dropdown-menu,
html.theme-dark .form--control,
html.theme-dark .form-control,
html.theme-dark .table,
html.theme-dark .product-card,
html.theme-dark .banner-categories,
html.theme-dark .category-dropdown,
html.theme-dark .left-site-category,
html.theme-dark .mobile-menu,
html.theme-dark .cart-sidebar,
html.theme-dark .wishlist-sidebar,
html.theme-dark .preloader {
  background-color: hsl(var(--white)) !important;
  color: hsl(var(--body-color));
}

html.theme-dark .bg-light,
html.theme-dark .bg--light {
  background-color: hsl(var(--light)) !important;
  color: hsl(var(--body-color)) !important;
}

html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark h4,
html.theme-dark h5,
html.theme-dark h6,
html.theme-dark .title,
html.theme-dark .section-title,
html.theme-dark .product-title,
html.theme-dark .card-title,
html.theme-dark .modal-title,
html.theme-dark .navbar-brand,
html.theme-dark .menu li a,
html.theme-dark .ecommerce__text,
html.theme-dark .breadcrumb,
html.theme-dark label,
html.theme-dark .form-label,
html.theme-dark th,
html.theme-dark td,
html.theme-dark p,
html.theme-dark span,
html.theme-dark li,
html.theme-dark a:not(.btn):not(.btn--base):not(.btn--primary) {
  color: inherit;
}

html.theme-dark .text-dark,
html.theme-dark .text-black,
html.theme-dark .text-body,
html.theme-dark .text-muted,
html.theme-dark .text-secondary,
html.theme-dark .text-light {
  color: hsl(var(--text-light)) !important;
}

html.theme-dark .text-muted {
  color: hsl(210 10% 68%) !important;
}

html.theme-dark .border,
html.theme-dark .border-top,
html.theme-dark .border-bottom,
html.theme-dark .border-start,
html.theme-dark .border-end,
html.theme-dark hr {
  border-color: hsl(var(--border)) !important;
}

html.theme-dark .form--control,
html.theme-dark .form-control,
html.theme-dark .form-select,
html.theme-dark select,
html.theme-dark textarea,
html.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
  background-color: hsl(var(--light)) !important;
  color: hsl(var(--heading-color)) !important;
  border-color: hsl(var(--border)) !important;
}

html.theme-dark .form--control::placeholder,
html.theme-dark .form-control::placeholder,
html.theme-dark input::placeholder,
html.theme-dark textarea::placeholder {
  color: hsl(210 10% 60%) !important;
  opacity: 1;
}

html.theme-dark .dropdown-menu,
html.theme-dark .dropdown-item {
  background-color: hsl(220 16% 13%) !important;
  color: hsl(var(--body-color)) !important;
}

html.theme-dark .dropdown-item:hover,
html.theme-dark .dropdown-item:focus {
  background-color: hsl(220 14% 18%) !important;
  color: #fff !important;
}

html.theme-dark .table,
html.theme-dark .table > :not(caption) > * > * {
  background-color: transparent;
  color: hsl(var(--body-color));
  border-color: hsl(var(--border));
}

html.theme-dark .modal-header,
html.theme-dark .modal-footer,
html.theme-dark .card-header,
html.theme-dark .card-footer {
  background-color: hsl(var(--light)) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--heading-color)) !important;
}

html.theme-dark .body-overlay,
html.theme-dark .overlay,
html.theme-dark .overlay-2 {
  background-color: rgba(0, 0, 0, 0.65) !important;
}

html.theme-dark .header-top {
  border-bottom-color: hsl(var(--border)) !important;
}

html.theme-dark .header-middle {
  border-bottom-color: hsl(var(--border)) !important;
}

html.theme-dark .banner-categories {
  border-color: hsl(var(--border)) !important;
}

html.theme-dark .banner-categories .title,
html.theme-dark .ecommerce__text,
html.theme-dark .menu-item,
html.theme-dark .nav-link {
  color: hsl(var(--heading-color)) !important;
}

html.theme-dark .site-logo-light {
  display: none !important;
}

html.theme-dark .site-logo-dark {
  display: block !important;
}

html:not(.theme-dark) .site-logo-dark {
  display: none !important;
}

html:not(.theme-dark) .site-logo-light {
  display: block !important;
}

/* Theme toggle control */
.theme-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid hsl(var(--border));
  border-radius: 50%;
  background: hsl(var(--light));
  color: hsl(var(--heading-color));
  cursor: pointer;
  transition: 0.2s ease;
  padding: 0;
}

.theme-mode-toggle:hover {
  color: hsl(var(--base));
  border-color: hsl(var(--base));
}

.theme-mode-toggle i {
  font-size: 1.15rem;
  line-height: 1;
}

html.theme-dark .theme-mode-toggle .icon-sun {
  display: none;
}

html.theme-dark .theme-mode-toggle .icon-moon {
  display: inline-block;
}

html:not(.theme-dark) .theme-mode-toggle .icon-moon {
  display: none;
}

html:not(.theme-dark) .theme-mode-toggle .icon-sun {
  display: inline-block;
}

html.theme-dark .footer-area,
html.theme-dark footer {
  background-color: hsl(220 16% 9%) !important;
  color: hsl(var(--body-color));
}

html.theme-dark .footer-area a,
html.theme-dark footer a {
  color: hsl(var(--text-light)) !important;
}

html.theme-dark .footer-area a:hover,
html.theme-dark footer a:hover {
  color: hsl(var(--base)) !important;
}

/* Fixed mobile bottom nav — keep high-contrast bar in dark mode */
@media (max-width: 991px) {
  html.theme-dark .mobile-menu-icons {
    background: #0b1016 !important;
    border-top: 1px solid hsl(220 12% 28%);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
  }

  html.theme-dark .mobile-menu-icons .ecommerce__text {
    color: #f3f5f7 !important;
    opacity: 1 !important;
  }

  html.theme-dark .mobile-menu-icons .ecommerce__icon {
    color: #fff !important;
    fill: #fff !important;
  }

  html.theme-dark .mobile-menu-icons .ecommerce__icon img,
  html.theme-dark .mobile-menu-icons .ecommerce__icon svg {
    filter: brightness(0) invert(1);
    opacity: 1;
  }

  html.theme-dark .mobile-menu-icons .ecommerce__is {
    color: #fff !important;
  }

  html.theme-dark .mobile-menu-icons a.ecommerce {
    color: #f3f5f7 !important;
  }
}