/**
 * Storefront dark mode — loaded when html has .dark (see color-scheme-toggle.js).
 * Complements Tailwind utility classes without editing every template.
 */
html.dark {
    color-scheme: dark;
    --tw-ring-offset-color: #030712;
}

html.dark body {
    background-color: #030712;
    color: #f3f4f6;
}

/* Surfaces */
html.dark .bg-white {
    background-color: #111827 !important;
}
html.dark .bg-gray-50 {
    background-color: #111827 !important;
}
html.dark .bg-gray-50\/50 {
    background-color: rgba(17, 24, 39, 0.65) !important;
}
html.dark .bg-gray-50\/70 {
    background-color: rgba(17, 24, 39, 0.78) !important;
}
html.dark .bg-gray-50\/80 {
    background-color: rgba(17, 24, 39, 0.86) !important;
}
html.dark .bg-gray-50\/90 {
    background-color: rgba(17, 24, 39, 0.92) !important;
}
html.dark .bg-gray-100 {
    background-color: #1f2937 !important;
}

/* Text */
html.dark .text-gray-400 {
    color: #9ca3af !important;
}
html.dark .text-gray-500 {
    color: #9ca3af !important;
}
html.dark .text-gray-600 {
    color: #d1d5db !important;
}
html.dark .text-gray-700 {
    color: #e5e7eb !important;
}
html.dark .text-gray-800 {
    color: #f3f4f6 !important;
}
html.dark .text-gray-900 {
    color: #f9fafb !important;
}

/* Borders */
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: transparent !important;
}
html.dark .border-gray-200\/80 {
    border-color: transparent !important;
}
html.dark .border-gray-200\/70 {
    border-color: transparent !important;
}
html.dark .border-gray-200\/60 {
    border-color: transparent !important;
}
html.dark .border-gray-100\/80 {
    border-color: transparent !important;
}
html.dark .border-gray-300 {
    border-color: transparent !important;
}

/* Hover surfaces */
html.dark .hover\:bg-gray-50:hover {
    background-color: #1f2937 !important;
}
html.dark .hover\:bg-gray-100:hover {
    background-color: #374151 !important;
}
html.dark .hover\:bg-gray-50\/60:hover {
    background-color: rgba(31, 41, 55, 0.82) !important;
}
html.dark .hover\:bg-gray-50\/80:hover {
    background-color: rgba(31, 41, 55, 0.9) !important;
}

/* Primary tints (active nav, badges) */
html.dark .bg-primary-50 {
    background-color: rgba(37, 99, 235, 0.2) !important;
}
html.dark .text-primary-600 {
    color: #93c5fd !important;
}
html.dark .text-primary-700 {
    color: #bfdbfe !important;
}
html.dark .group-hover\:text-primary-600:hover {
    color: #93c5fd !important;
}
html.dark .hover\:text-primary-600:hover {
    color: #93c5fd !important;
}

/* Form controls */
html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark select,
html.dark textarea {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}
html.dark select option {
    background-color: #1f2937;
    color: #f3f4f6;
}

/* Flash / alerts */
html.dark .bg-green-50 {
    background-color: rgba(20, 83, 45, 0.35) !important;
}
html.dark .text-green-800 {
    color: #86efac !important;
}
html.dark .border-green-200 {
    border-color: #166534 !important;
}
html.dark .bg-red-50 {
    background-color: rgba(127, 29, 29, 0.35) !important;
}
html.dark .text-red-800 {
    color: #fca5a5 !important;
}
html.dark .border-red-200 {
    border-color: #991b1b !important;
}
html.dark .bg-blue-50 {
    background-color: rgba(30, 58, 138, 0.35) !important;
}
html.dark .text-blue-800 {
    color: #93c5fd !important;
}
html.dark .border-blue-200 {
    border-color: #1e40af !important;
}

/* Footer (already dark — slightly deeper in site dark mode) */
html.dark footer.bg-gray-900 {
    background-color: #000000 !important;
}
html.dark footer .border-gray-800 {
    border-color: #1f2937 !important;
}

/* Nav shell (explicit; also covered by .bg-white override) */
html.dark nav.border-gray-200 {
    border-color: transparent !important;
}

/* Rings on dropdowns */
html.dark .ring-black.ring-opacity-5,
html.dark .ring-black\/5 {
    --tw-ring-color: transparent !important;
}
html.dark .ring-gray-200\/80 {
    --tw-ring-color: transparent !important;
}
html.dark .ring-gray-200\/70 {
    --tw-ring-color: transparent !important;
}

/* Brand logo adjustments in dark mode */
/* Keep uploaded logos crisp and aligned in the header */
.storefront-logo-image {
    display: block;
    width: auto;
    max-width: 180px;
    max-height: 2.5rem;
    object-fit: contain;
    background: transparent !important;
    mix-blend-mode: normal;
}

html.dark .storefront-logo-image {
    filter: brightness(1.1) contrast(1.08);
}

/* Prevent accidental inherited brand background classes on header logo */
html.dark .storefront-brand-link,
html.dark .storefront-brand-link * {
    background-color: transparent !important;
}
html.dark .storefront-brand-link:focus-visible {
    background-color: transparent !important;
}

/* CountryType select visual fix (account dashboard) */
#profile-countryCode {
    line-height: 1.25rem;
}

html.dark #profile-countryCode {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
    -webkit-appearance: none;
    appearance: none;
}

/* Common gradient hero backgrounds on account / marketing */
html.dark .from-gray-50.to-white,
html.dark .from-gray-50\/90.to-white {
    background-image: linear-gradient(to bottom, #111827, #030712) !important;
}

/* Stat / accent chips (dashboard) */
html.dark .bg-emerald-50 {
    background-color: rgba(6, 78, 59, 0.45) !important;
}
html.dark .text-emerald-600,
html.dark .text-emerald-700,
html.dark .text-emerald-900 {
    color: #6ee7b7 !important;
}
html.dark .bg-violet-50 {
    background-color: rgba(76, 29, 149, 0.35) !important;
}
html.dark .text-violet-600 {
    color: #c4b5fd !important;
}

/* Order status pills (account dashboard) */
html.dark .bg-slate-100 {
    background-color: rgba(51, 65, 85, 0.55) !important;
}
html.dark .text-slate-800 {
    color: #e2e8f0 !important;
}
html.dark .bg-amber-50 {
    background-color: rgba(120, 53, 15, 0.4) !important;
}
html.dark .text-amber-900 {
    color: #fde68a !important;
}
html.dark .bg-indigo-50 {
    background-color: rgba(49, 46, 129, 0.4) !important;
}
html.dark .text-indigo-900 {
    color: #c7d2fe !important;
}
html.dark .bg-sky-50 {
    background-color: rgba(12, 74, 110, 0.4) !important;
}
html.dark .text-sky-900 {
    color: #bae6fd !important;
}
html.dark .text-red-900 {
    color: #fecaca !important;
}