/* ── Dark Mode — base palette from #2a1c14 ─────────────────────────────── */
html.dark { color-scheme: dark; }

/* ── Page backgrounds ───────────────────────────────────────────────────── */
html.dark body,
html.dark .bg-slate-50   { background-color: #2a1c14 !important; }
html.dark .bg-white      { background-color: #38231a !important; }
html.dark .bg-slate-100  { background-color: #452b1f !important; }
html.dark .bg-slate-200  { background-color: #563527 !important; }
html.dark .bg-slate-300  { background-color: #664030 !important; }
html.dark .bg-slate-700  { background-color: #1f1209 !important; }
html.dark .bg-slate-800  { background-color: #180e07 !important; }
html.dark .bg-slate-900  { background-color: #120a04 !important; }

/* ── Text ───────────────────────────────────────────────────────────────── */
html.dark .text-slate-900,
html.dark .text-gray-900 { color: #f0e4da !important; }
html.dark .text-slate-800,
html.dark .text-gray-800 { color: #e0d0c4 !important; }
html.dark .text-slate-700,
html.dark .text-gray-700 { color: #c9b4a4 !important; }
html.dark .text-slate-600,
html.dark .text-gray-600 { color: #b09080 !important; }
html.dark .text-slate-500,
html.dark .text-gray-500 { color: #967060 !important; }
html.dark .text-slate-400,
html.dark .text-gray-400 { color: #7d5a4c !important; }
html.dark .text-slate-300 { color: #9a7060 !important; }
html.dark .text-slate-200 { color: #c0a090 !important; }

/* ── Borders ────────────────────────────────────────────────────────────── */
html.dark .border-slate-50,
html.dark .border-slate-100 { border-color: #4a2e22 !important; }
html.dark .border-slate-200 { border-color: #5a3a2a !important; }
html.dark .border-slate-300 { border-color: #6b4636 !important; }
html.dark .border-slate-800 { border-color: #1f1209 !important; }
html.dark .border-gray-100  { border-color: #4a2e22 !important; }
html.dark .border-gray-400  { border-color: #6b4636 !important; }
html.dark .divide-slate-100 > * + * { border-color: #4a2e22 !important; }

/* ── Indigo / blue accents → warm tone ──────────────────────────────────── */
html.dark .bg-indigo-50,
html.dark .bg-indigo-100  { background-color: #3d2518 !important; }
html.dark .bg-indigo-50\/30 { background-color: rgba(61,37,24,0.3) !important; }
html.dark .text-indigo-800  { color: #f0e4da !important; }
html.dark .border-indigo-100 { border-color: #4a2e22 !important; }

/* ── Rose accents (keep in header/nav, soften elsewhere) ────────────────── */
html.dark .bg-rose-50       { background-color: #3d2518 !important; }
html.dark .border-rose-200  { border-color: #6b3020 !important; }
html.dark .border-rose-300  { border-color: #7d3a28 !important; }

/* ── Hover overrides ────────────────────────────────────────────────────── */
html.dark .hover\:bg-slate-50:hover  { background-color: #452b1f !important; }
html.dark .hover\:bg-slate-100:hover { background-color: #452b1f !important; }
html.dark .hover\:bg-slate-200:hover { background-color: #563527 !important; }
html.dark .hover\:bg-slate-300:hover { background-color: #664030 !important; }
html.dark .hover\:bg-slate-700:hover { background-color: #1f1209 !important; }
html.dark .hover\:bg-slate-800:hover { background-color: #180e07 !important; }

/* ── Shadows ────────────────────────────────────────────────────────────── */
html.dark .shadow-sm  { box-shadow: 0 1px 2px rgba(0,0,0,.5) !important; }
html.dark .shadow     { box-shadow: 0 1px 3px rgba(0,0,0,.6) !important; }
html.dark .shadow-md  { box-shadow: 0 4px 6px rgba(0,0,0,.6) !important; }
html.dark .shadow-lg  { box-shadow: 0 10px 15px rgba(0,0,0,.6) !important; }
html.dark .shadow-xl  { box-shadow: 0 20px 25px rgba(0,0,0,.6) !important; }
html.dark .shadow-2xl { box-shadow: 0 25px 50px rgba(0,0,0,.7) !important; }

/* ── Form inputs ────────────────────────────────────────────────────────── */
html.dark input[type="text"],
html.dark input[type="search"],
html.dark input[type="email"],
html.dark textarea,
html.dark select {
  background-color: #452b1f !important;
  color: #f0e4da !important;
  border-color: #5a3a2a !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #7d5a4c !important; }

/* ── Dropdown / autocomplete panels ────────────────────────────────────── */
html.dark #dealsSearchDropdown,
html.dark #headerSearchDropdown,
html.dark #homeTopSearchDropdown {
  background-color: #38231a !important;
  border-color: #4a2e22 !important;
}

/* ── Home hero search box ────────────────────────────────────────────────── */
html.dark #homeTopSearchWrap .relative.flex {
  background-color: #38231a !important;
  border-color: #4a2e22 !important;
}
html.dark #homeTopSearchWrap input[type="text"] {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* ── line-through (strikethrough price) ────────────────────────────────── */
html.dark .line-through { color: #7d5a4c !important; }

/* ── bg-white/20, bg-black/50 overlays — keep as-is ────────────────────── */

/* ── Scrollbar (thin, warm) ─────────────────────────────────────────────── */
html.dark * { scrollbar-color: #5a3a2a #2a1c14; }
html.dark ::-webkit-scrollbar { width: 6px; height: 6px; }
html.dark ::-webkit-scrollbar-track { background: #2a1c14; }
html.dark ::-webkit-scrollbar-thumb { background: #5a3a2a; border-radius: 3px; }