/* GoTe dark theme — opt-in via html[data-theme="dark"] (toggle in header).
   Remaps the dominant surface/text/border utilities to dark tokens with !important
   so it overrides Tailwind utilities without editing thousands of class usages.
   Brand/alert colors, already-dark sections (Black Friday, price radar) and opacity
   variants (bg-white/10 etc.) are intentionally left untouched. */

html[data-theme="dark"] {
  --gote-surface: #111827;
  --gote-surface-2: #0b1220;
  --gote-elevated: #1e293b;
  --gote-text: #e5e7eb;
  --gote-text-muted: #94a3b8;
  --gote-border: #1f2a3c;
  background: #0b1220;
  color-scheme: dark;
}

html[data-theme="dark"] body { background: #0b1220; }

/* Page wrapper background (mockup pages use bg-[#f8f9fc]). */
html[data-theme="dark"] .gote-mockup-page,
html[data-theme="dark"] .bg-\[\#f8f9fc\],
html[data-theme="dark"] .bg-\[\#f8fafc\] { background-color: #0b1220 !important; }

/* Surfaces */
html[data-theme="dark"] .bg-white { background-color: var(--gote-surface) !important; }
html[data-theme="dark"] .bg-gray-50 { background-color: var(--gote-surface-2) !important; }
html[data-theme="dark"] .bg-gray-100 { background-color: var(--gote-elevated) !important; }

/* Text */
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800 { color: var(--gote-text) !important; }
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500 { color: var(--gote-text-muted) !important; }
html[data-theme="dark"] .text-gray-400 { color: #64748b !important; }

/* Dark CTAs: bg-gray-900/800 buttons (white text) would blend into the dark page.
   Lift them to a mid surface so the primary actions stay visible. Hover variants
   are intentionally flattened. (bg-gray-950 stays — used only by already-dark BF.) */
html[data-theme="dark"] .bg-gray-900,
html[data-theme="dark"] .bg-gray-800 { background-color: #374151 !important; }

/* Borders & rings */
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300 { border-color: var(--gote-border) !important; }
html[data-theme="dark"] .ring-gray-100,
html[data-theme="dark"] .ring-gray-200 { --tw-ring-color: var(--gote-border) !important; }

/* Soft brand tints stay readable on dark */
html[data-theme="dark"] .bg-brand-50 { background-color: #1e293b !important; }
html[data-theme="dark"] .text-brand-700,
html[data-theme="dark"] .text-brand-900 { color: #a5b4fc !important; }

/* Inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background-color: var(--gote-elevated) !important; color: var(--gote-text) !important; border-color: var(--gote-border) !important; }
html[data-theme="dark"] ::placeholder { color: #64748b !important; }

/* Theme toggle icon swap */
html[data-theme="dark"] [data-theme-icon-light] { display: none; }
html:not([data-theme="dark"]) [data-theme-icon-dark] { display: none; }