/*
 * Light-mode overrides for the public site. Hand-written (not run through the
 * Tailwind build) so it ships without a rebuild. Public markup is authored
 * against one fixed dark "glass" palette (bg-slate-950, text-white, bg-white/10
 * translucent panels, a dark Tailwind Typography theme for rich-text
 * descriptions, ...); this file re-points those exact classes to light-mode
 * values, scoped to html[data-theme="light"] — set server-side from the
 * admin's Appearance setting (see admin/preferences), so every visitor sees
 * the same theme. Default (no attribute, or data-theme="dark") is untouched.
 *
 * A few elements set text-white as a button/badge label sitting on a solid
 * color (bg-blue-600, bg-emerald-600, bg-red-600, ...) rather than on the
 * page background — darkening text-white globally would make those
 * unreadable, so the "combo resets" section re-asserts white specifically
 * for those class combinations (higher specificity: two classes beat one).
 */

html[data-theme="light"] {
  color-scheme: light;
}

/* ---- Page/section backgrounds ---- */
html[data-theme="light"] .bg-slate-950,
html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .bg-slate-800 {
  background-color: #f8fafc;
}

html[data-theme="light"] .bg-slate-950\/90 {
  background-color: rgba(248, 250, 252, 0.9);
}

html[data-theme="light"] .from-slate-950,
html[data-theme="light"] .from-slate-900,
html[data-theme="light"] .from-slate-800 {
  --tw-gradient-from: #ffffff;
}

html[data-theme="light"] .from-slate-900\/50 {
  --tw-gradient-from: rgba(255, 255, 255, 0.5);
}

html[data-theme="light"] .to-slate-900,
html[data-theme="light"] .to-slate-950 {
  --tw-gradient-to: #f1f5f9;
}

html[data-theme="light"] .bg-glass-dark {
  --tw-gradient-from: #ffffff;
  --tw-gradient-via: rgba(219, 234, 254, 0.5);
  --tw-gradient-to: #f8fafc;
}

/* ---- "Glass" compound utilities (defined in tailwind-src/input.css) ---- */
html[data-theme="light"] .glass-card,
html[data-theme="light"] .glass-button,
html[data-theme="light"] .glass-input {
  background-color: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .glass-button {
  color: #0f172a;
}

html[data-theme="light"] .glass-card-hover:hover,
html[data-theme="light"] .glass-button:hover {
  background-color: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.16);
}

html[data-theme="light"] .glass-input {
  color: #0f172a;
}

html[data-theme="light"] .glass-input::placeholder {
  color: #94a3b8;
}

html[data-theme="light"] .glass-input:focus {
  background-color: rgba(15, 23, 42, 0.08);
}

/* ---- Borders/dividers ---- */
html[data-theme="light"] .border-white\/10,
html[data-theme="light"] .divide-white\/10 {
  border-color: rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .border-white\/15 {
  border-color: rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .border-white\/20,
html[data-theme="light"] .hover\:border-white\/20:hover,
html[data-theme="light"] .hover\:border-white\/25:hover {
  border-color: rgba(15, 23, 42, 0.16);
}

html[data-theme="light"] .border-white\/30,
html[data-theme="light"] .hover\:border-white\/30:hover {
  border-color: rgba(15, 23, 42, 0.22);
}

html[data-theme="light"] .border-slate-800 {
  border-color: #e2e8f0;
}

html[data-theme="light"] .border-slate-700 {
  border-color: #cbd5e1;
}

html[data-theme="light"] .border-blue-400\/30 {
  border-color: rgba(37, 99, 235, 0.3);
}

html[data-theme="light"] .border-blue-400\/50,
html[data-theme="light"] .hover\:border-blue-400\/50:hover {
  border-color: rgba(37, 99, 235, 0.45);
}

html[data-theme="light"] .border-blue-400\/60,
html[data-theme="light"] .hover\:border-blue-400\/60:hover {
  border-color: rgba(37, 99, 235, 0.55);
}

html[data-theme="light"] .border-blue-400\/70,
html[data-theme="light"] .hover\:border-blue-400\/70:hover {
  border-color: rgba(37, 99, 235, 0.65);
}

html[data-theme="light"] .border-amber-400\/30 {
  border-color: rgba(180, 83, 9, 0.35);
}

html[data-theme="light"] .border-purple-400\/30 {
  border-color: rgba(147, 51, 234, 0.35);
}

/* ---- Primary/neutral text ---- */
html[data-theme="light"] .text-white,
html[data-theme="light"] .hover\:text-white:hover,
html[data-theme="light"] .text-slate-100 {
  color: #0f172a;
}

html[data-theme="light"] .text-slate-200 {
  color: #1e293b;
}

html[data-theme="light"] .text-slate-300,
html[data-theme="light"] .hover\:text-slate-300:hover {
  color: #475569;
}

html[data-theme="light"] .text-slate-400 {
  color: #64748b;
}

/* Unfilled star rating icon: keep it subtle against the (now light) card background */
html[data-theme="light"] .text-slate-600 {
  color: #cbd5e1;
}

html[data-theme="light"] .placeholder-slate-500::placeholder {
  color: #94a3b8;
}

/* ---- Accent text (badges, chips, links) ---- */
html[data-theme="light"] .text-blue-200,
html[data-theme="light"] .group-hover\:text-blue-200:is(:where(.group):hover *) {
  color: #1e40af;
}

html[data-theme="light"] .text-blue-300,
html[data-theme="light"] .hover\:text-blue-300:hover {
  color: #1d4ed8;
}

html[data-theme="light"] .text-blue-400,
html[data-theme="light"] .hover\:text-blue-400:hover {
  color: #2563eb;
}

html[data-theme="light"] .text-indigo-400,
html[data-theme="light"] .hover\:text-indigo-400:hover {
  color: #4f46e5;
}

html[data-theme="light"] .text-purple-200 {
  color: #6b21a8;
}

html[data-theme="light"] .text-amber-100 {
  color: #92400e;
}

html[data-theme="light"] .text-amber-200\/80 {
  color: rgba(146, 64, 14, 0.8);
}

html[data-theme="light"] .text-amber-300\/40 {
  color: rgba(180, 83, 9, 0.4);
}

/*
 * "Filled/active" emphasis states (hero CTA, the selected category pill, the
 * carousel arrow hover) use bg-blue-500/40 with white text — translucent blue
 * over the old dark page read as a solid, confident blue. Over a light page
 * the same 40% tint reads as a pale blue, which fails contrast against the
 * white text these elements all carry. Make it properly solid instead.
 */
html[data-theme="light"] .bg-blue-500\/40 {
  background-color: #2563eb;
}

html[data-theme="light"] .hover\:bg-blue-500\/60:hover {
  background-color: #1d4ed8;
}

/* ---- Carousel dots ---- */
html[data-theme="light"] .bg-slate-600 {
  background-color: #cbd5e1;
}

html[data-theme="light"] .hover\:bg-slate-500:hover {
  background-color: #94a3b8;
}

/* ---- Combo resets: keep button/badge labels white on their solid-color background ---- */
html[data-theme="light"] .bg-emerald-600.text-white,
html[data-theme="light"] .bg-blue-600.text-white,
html[data-theme="light"] .bg-indigo-600.text-white,
html[data-theme="light"] .bg-red-600.text-white,
html[data-theme="light"] .bg-orange-600.text-white,
html[data-theme="light"] .bg-blue-500\/40.text-white,
html[data-theme="light"] .bg-red-600\/90 .text-white {
  color: #ffffff;
}

html[data-theme="light"] .hover\:bg-blue-500\/40:hover.hover\:text-white:hover {
  color: #ffffff;
}

/* ---- Rich-text descriptions (Tailwind Typography): drop the dark ("invert") palette ---- */
html[data-theme="light"] .prose-invert {
  --tw-prose-body: oklch(37.3% 0.034 259.733);
  --tw-prose-headings: oklch(21% 0.034 264.665);
  --tw-prose-lead: oklch(44.6% 0.03 256.802);
  --tw-prose-links: oklch(21% 0.034 264.665);
  --tw-prose-bold: oklch(21% 0.034 264.665);
  --tw-prose-counters: oklch(55.1% 0.027 264.364);
  --tw-prose-bullets: oklch(87.2% 0.01 258.338);
  --tw-prose-hr: oklch(92.8% 0.006 264.531);
  --tw-prose-quotes: oklch(21% 0.034 264.665);
  --tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
  --tw-prose-captions: oklch(55.1% 0.027 264.364);
  --tw-prose-kbd: oklch(21% 0.034 264.665);
  --tw-prose-code: oklch(21% 0.034 264.665);
  --tw-prose-pre-code: oklch(92.8% 0.006 264.531);
  --tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
  --tw-prose-th-borders: oklch(87.2% 0.01 258.338);
  --tw-prose-td-borders: oklch(92.8% 0.006 264.531);
}