/* =====================================================================
   ZYLLO dark mode (Group 4 — dark_mode). Only active when <html> has
   class "dark", which the toggle in partials/dark-mode-toggle.blade.php
   and the pre-paint script in layouts/app.blade.php control.
   Light mode is untouched. These overrides target the utility classes
   the storefront actually uses (bg-white, text-navy, borders, cards,
   inputs). Page-specific inline colours (hard-coded #hex in style
   attributes) are intentionally NOT overridden in v1.
   ===================================================================== */

html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: #0b1220;
    color: #e2e8f0;
}

/* Surfaces */
html.dark .bg-white,
html.dark .bg-gray-50,
html.dark .bg-gray-50\/60,
html.dark .bg-\[\#F6F7FB\],
html.dark .bg-lavender,
html.dark .bg-soft,
html.dark .bg-zylloLight {
    background-color: #1e293b !important;
}

html.dark .bg-page {
    background-color: #0b1220 !important;
}

html.dark .bg-\[\#FFF1E6\],
html.dark .bg-orangeSoft,
html.dark .bg-pinkSoft {
    background-color: #2b2118 !important;
}

/* Text */
html.dark .text-navy,
html.dark .text-\[\#0F172A\],
html.dark .text-\[\#0B1F3A\],
html.dark .text-ink,
html.dark .text-gray-900,
html.dark .text-gray-800 {
    color: #f1f5f9 !important;
}

html.dark .text-\[\#334155\],
html.dark .text-gray-700,
html.dark .text-gray-600 {
    color: #cbd5e1 !important;
}

html.dark .text-\[\#64748B\],
html.dark .text-muted,
html.dark .text-gray-500,
html.dark .text-gray-400,
html.dark .text-\[\#94A3B8\] {
    color: #94a3b8 !important;
}

/* Borders + inputs */
html.dark .border-\[\#EEF0F4\],
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-line {
    border-color: #334155 !important;
}

html.dark input,
html.dark select,
html.dark textarea {
    background-color: #0f172a;
    color: #e2e8f0;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b;
}

/* Hover surfaces that assume a light page */
html.dark .hover\:bg-\[\#F6F7FB\]:hover {
    background-color: #1e293b !important;
}

/* Dropdowns / popovers / cards keep their shadow but sit on dark */
html.dark .shadow-lift,
html.dark .shadow-card {
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7) !important;
}