/* ==========================================================================
   AntStoreVN - Unified Theme System (Light, Dark, System)
   ========================================================================== */

/* Base transitions */
html {
  transition: background-color 0.25s ease, color 0.25s ease;
}

body {
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* ==========================================================================
   LIGHT MODE OVERRIDES
   Applied whenever html does NOT have class "dark"
   ========================================================================== */
html:not(.dark) {
  color-scheme: light;
}

html:not(.dark) body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* Backgrounds in Light Mode */
html:not(.dark) .bg-dark-950 {
  background-color: #f8fafc !important;
}

html:not(.dark) .bg-dark-900 {
  background-color: #ffffff !important;
}

html:not(.dark) .bg-dark-850 {
  background-color: #ffffff !important;
}

html:not(.dark) .bg-dark-800 {
  background-color: #f1f5f9 !important;
}

/* Gradient overrides in Light Mode - Completely eliminate any dark band */
html:not(.dark) .bg-gradient-to-b:not([class*="from-brand"]) {
  background-image: linear-gradient(180deg, #ffffff 0%, #fff7ed 40%, #f8fafc 100%) !important;
}

html:not(.dark) .from-dark-950,
html:not(.dark) .from-dark-900,
html:not(.dark) .from-slate-900 {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html:not(.dark) .via-dark-950,
html:not(.dark) .via-dark-900 {
  --tw-gradient-to: rgb(255 247 237 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #fff7ed var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

html:not(.dark) .to-dark-950,
html:not(.dark) .to-dark-900,
html:not(.dark) .to-slate-900 {
  --tw-gradient-to: #f8fafc var(--tw-gradient-to-position) !important;
}

/* Glass Header in Light Mode */
html:not(.dark) .glass-header {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06) !important;
}

/* Borders in Light Mode */
html:not(.dark) .border-white\/5,
html:not(.dark) .border-white\/10,
html:not(.dark) .border-white\/15,
html:not(.dark) .border-white\/20,
html:not(.dark) .border-white\/30 {
  border-color: #e2e8f0 !important;
}

/* Dark Overlays in Light Mode */
html:not(.dark) .bg-dark-950\/90,
html:not(.dark) .bg-dark-900\/90 {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.08) !important;
}
html:not(.dark) .bg-dark-950\/90 h4,
html:not(.dark) .bg-dark-900\/90 h4 {
  color: #0f172a !important;
}

/* Headings in Light Mode */
html:not(.dark) h1:not([class*="bg-clip-text"]):not(.text-slate-950):not(.text-brand-400):not(.text-brand-500):not(.text-brand-600),
html:not(.dark) h2:not([class*="bg-clip-text"]):not(.text-slate-950):not(.text-brand-400):not(.text-brand-500):not(.text-brand-600),
html:not(.dark) h3:not([class*="bg-clip-text"]):not(.text-slate-950):not(.text-brand-400):not(.text-brand-500):not(.text-brand-600),
html:not(.dark) h4:not([class*="bg-clip-text"]):not(.text-slate-950):not(.text-brand-400):not(.text-brand-500):not(.text-brand-600),
html:not(.dark) h5:not([class*="bg-clip-text"]):not(.text-slate-950):not(.text-brand-400):not(.text-brand-500):not(.text-brand-600) {
  color: #0f172a !important;
}

/* General Text in Light Mode */
html:not(.dark) .text-white:not(button):not([class*="bg-brand"]):not([class*="bg-rose"]):not([class*="bg-amber"]):not([class*="bg-gradient"]):not(.badge-item) {
  color: #0f172a !important;
}

html:not(.dark) .text-slate-100:not(button):not([class*="bg-"]):not([class*="bg-gradient"]) {
  color: #0f172a !important;
}

html:not(.dark) .text-slate-200:not(button):not([class*="bg-"]):not([class*="bg-gradient"]) {
  color: #1e293b !important;
}

html:not(.dark) .text-slate-300:not(button):not([class*="bg-"]):not([class*="bg-gradient"]) {
  color: #475569 !important;
}

html:not(.dark) .text-slate-400:not(button):not([class*="bg-"]):not([class*="bg-gradient"]) {
  color: #64748b !important;
}

html:not(.dark) .text-brand-400 {
  color: #ea580c !important;
}

/* Inputs, Textareas, Selects in Light Mode */
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html:not(.dark) select,
html:not(.dark) textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #94a3b8 !important;
}

/* Quick Categories & Cards in Light Mode */
html:not(.dark) .group.bg-dark-850 {
  background-color: #ffffff !important;
  box-shadow: 0 2px 10px -2px rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) .group.bg-dark-850:hover {
  background-color: #ffffff !important;
  box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.12) !important;
}

/* Shadows in Light Mode */
html:not(.dark) .shadow-2xl,
html:not(.dark) .shadow-xl {
  box-shadow: 0 12px 30px -6px rgba(15, 23, 42, 0.08), 0 4px 10px -4px rgba(15, 23, 42, 0.04) !important;
}

/* Navigation items in Light Mode */
html:not(.dark) nav a.text-slate-300 {
  color: #334155 !important;
}
html:not(.dark) nav a.text-slate-400 {
  color: #64748b !important;
}

/* Top Announcement bar in Light Mode */
html:not(.dark) .top-announcement-bar {
  background: linear-gradient(90deg, #fff7ed 0%, #ffedd5 50%, #fff7ed 100%) !important;
  border-bottom: 1px solid #fed7aa !important;
  color: #7c2d12 !important;
}
html:not(.dark) .top-announcement-bar strong {
  color: #c2410c !important;
}
html:not(.dark) .top-announcement-bar span {
  color: #7c2d12 !important;
}

/* Scrollbar in Light Mode */
html:not(.dark) ::-webkit-scrollbar-track {
  background: #f1f5f9;
}


/* ==========================================================================
   DARK MODE OVERRIDES (Applies when html.dark is present)
   Specially for species.html and light-coded components
   ========================================================================== */
html.dark {
  color-scheme: dark;
}

html.dark body {
  background-color: #0a0a0d !important;
  color: #f1f5f9 !important;
}

/* In dark mode, convert slate-50 / white backgrounds to dark */
html.dark .bg-slate-50 {
  background-color: #0a0a0d !important;
}

html.dark .bg-white {
  background-color: #121217 !important;
}

html.dark .bg-slate-100 {
  background-color: #18181f !important;
}

html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .text-slate-900,
html.dark .text-slate-800 {
  color: #f8fafc !important;
}

html.dark .text-slate-700,
html.dark .text-slate-600 {
  color: #cbd5e1 !important;
}

html.dark .text-slate-500 {
  color: #94a3b8 !important;
}

/* Glass Header in Dark Mode */
html.dark .glass-header {
  background: rgba(18, 18, 23, 0.94) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
}

/* Top Announcement bar in Dark Mode */
html.dark .top-announcement-bar {
  background: linear-gradient(90deg, #0a0a0d 0%, #431407 50%, #0a0a0d 100%) !important;
  border-bottom: 1px solid rgba(154, 52, 18, 0.4) !important;
  color: #e2e8f0 !important;
}

/* Form controls in Dark Mode */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.dark select,
html.dark textarea {
  background-color: #121217 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

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

/* Modals & Popups in Dark Mode */
html.dark #speciesModal > div,
html.dark #authModal > div,
html.dark #cartModal > div,
html.dark #vipRechargeModal > div {
  background-color: #121217 !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark table tbody tr {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark table tr.bg-slate-50 {
  background-color: #18181f !important;
}

html.dark .bg-amber-50\/60,
html.dark .bg-amber-50 {
  background-color: rgba(69, 26, 3, 0.4) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

html.dark .text-amber-900 {
  color: #fde68a !important;
}

/* Scrollbar in Dark Mode */
html.dark ::-webkit-scrollbar-track {
  background: #0f172a;
}