/* ══════════════════════════════════════════════════════════════
   Light Theme — Scent & Chill
   This file lives in public/ so it is served RAW—
   PostCSS / Tailwind / Next.js never process it.
   All special characters in CSS selectors are properly escaped.
   ══════════════════════════════════════════════════════════════ */

/* ── Body ──────────────────────────────────────────────────── */
html.light body {
  background-color: #F0E8FA !important;
  color: #1A0E2A !important;
}

/* ── Page backgrounds ──────────────────────────────────────── */
html.light .bg-\[\#0F0F1A\] {
  background-color: #F0E8FA !important;
}

/* ── Alt-section backgrounds (ProductHighlight, Testimonials) */
html.light .bg-\[\#1A1A2E\] {
  background-color: #E9E0F8 !important;
}

/* ── Cards / surfaces ──────────────────────────────────────── */
html.light .bg-\[\#1E1E32\] {
  background-color: #F8F5FE !important;
}

/* ── Footer (stays dark) ───────────────────────────────────── */
html.light .bg-\[\#111827\] {
  background-color: #2D1B4E !important;
}

/* ── Misc dark elements ────────────────────────────────────── */
html.light .bg-\[\#2A2A45\] {
  background-color: #E3D9F4 !important;
}

/* ── Borders ───────────────────────────────────────────────── */
html.light .border-\[\#2A2A45\] {
  border-color: #D4CAEA !important;
}

/* ── Gradients (hero sections, overlays) ───────────────────── */
html.light .from-\[\#1E1E32\] {
  --tw-gradient-from: #E9E0F8 !important;
}
html.light .to-\[\#0F0F1A\] {
  --tw-gradient-to: #F0E8FA !important;
}
html.light .from-\[\#1E1E32\]\/95 {
  --tw-gradient-from: rgb(237 232 255 / 0.95) !important;
}
html.light .to-\[\#0F0F1A\]\/95 {
  --tw-gradient-to: rgb(245 240 255 / 0.95) !important;
}
html.light .from-\[\#1E1E32\] .to-\[\#2A2A45\] {
  --tw-gradient-to: #EAE0FF !important;
}

/* ── Text inside light-bg containers ───────────────────────
   Attribute selector catches text-white AND text-white/90,
   text-white/70, etc. in one rule.
   Scoped so footer (bg-[#111827]) keeps its white text.    */
html.light .bg-\[\#0F0F1A\] [class*="text-white"],
html.light .bg-\[\#1E1E32\] [class*="text-white"],
html.light .bg-\[\#1A1A2E\] [class*="text-white"] {
  color: #1A0E2A !important;
}

/* ── Lavender accent text → darken for contrast ────────────── */
html.light .bg-\[\#0F0F1A\] .text-\[\#B8A5D6\],
html.light .bg-\[\#1E1E32\] .text-\[\#B8A5D6\],
html.light .bg-\[\#1A1A2E\] .text-\[\#B8A5D6\] {
  color: #6B5B8C !important;
}

/* ── bg-white/NN icon circles → subtle purple tint ─────────── */
html.light .bg-\[\#0F0F1A\] [class*="bg-white\/"],
html.light .bg-\[\#1E1E32\] [class*="bg-white\/"],
html.light .bg-\[\#1A1A2E\] [class*="bg-white\/"] {
  background-color: rgba(107, 91, 140, 0.12) !important;
}

/* ── Placeholder text ──────────────────────────────────────── */
html.light .bg-\[\#0F0F1A\] [class*="placeholder\:text-white"]::placeholder,
html.light .bg-\[\#1E1E32\] [class*="placeholder\:text-white"]::placeholder {
  color: rgba(26, 14, 42, 0.35) !important;
}

/* ── Form inputs inside card surfaces ──────────────────────── */
html.light .bg-\[\#1E1E32\] input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
html.light .bg-\[\#1E1E32\] textarea,
html.light .bg-\[\#1E1E32\] select {
  background-color: #F0EAFF !important;
  color: #1A0E2A !important;
  border-color: #DDD5F5 !important;
}

/* ── Form labels (text-gray-300 is too faint on light cards) ── */
html.light .bg-\[\#1E1E32\] .text-gray-300,
html.light .bg-\[\#1A1A2E\] .text-gray-300,
html.light .bg-\[\#0F0F1A\] .text-gray-300 {
  color: #374151 !important;  /* gray-700 — readable on white/light surfaces */
}

/* ── Dark-page containers (coupons, checkout, etc.) ─────────── */
/* bg-[#0D0D1F] is intentionally NOT overridden, 
   so pages that use it as root keep their dark palette */
html.light .bg-\[\#0D0D1F\] .bg-\[\#1E1E32\] {
  background-color: #1E1E32 !important;
}
html.light .bg-\[\#0D0D1F\] .bg-\[\#2A2A45\] {
  background-color: #2A2A45 !important;
}
html.light .bg-\[\#0D0D1F\] .border-\[\#2A2A45\] {
  border-color: #2A2A45 !important;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
html.light ::-webkit-scrollbar-track {
  background: #F5F0FF;
}