/* ==========================================================================
   LIGHT/DARK THEME SYSTEM

   Loaded from public/ to bypass Tailwind v4's tree-shaking.
   This file contains:
     1. Semantic CSS variables (:root = light, html.dark = dark)
     2. Base element overrides (body, h1-h4)
     3. Tailwind utility class overrides for light mode
     4. Custom component light-mode adjustments
     5. Footer dark-on-light preservation
   ========================================================================== */

/* ===== 0. VIETNAMESE FONT ===== */

html.lang-vi {
  --font-vi: 'Be Vietnam Pro', 'Inter', system-ui, sans-serif;
}

html.lang-vi body,
html.lang-vi input,
html.lang-vi textarea,
html.lang-vi select,
html.lang-vi button {
  font-family: var(--font-vi) !important;
}

html.lang-vi h1,
html.lang-vi h2,
html.lang-vi h3,
html.lang-vi h4 {
  font-family: var(--font-vi) !important;
}

/* Elements with inline font-family styles need override */
html.lang-vi [style*="font-family"] {
  font-family: var(--font-vi) !important;
}

/* ===== 1. SEMANTIC VARIABLES ===== */

:root {
  color-scheme: light;

  --surface-primary: #FFFFFF;
  --surface-secondary: #F8FAFC;
  --surface-tertiary: #F1F5F9;
  --surface-alt: #F1F5F9;
  --surface-card: #FFFFFF;
  --surface-card-hover: #F8FAFC;
  --surface-footer: #1E293B;
  --surface-overlay: rgba(248, 250, 252, 0.9);

  --text-primary: #020617;
  --text-secondary: #1E293B;
  --text-tertiary: #334155;
  --text-muted: #475569;

  --border-default: rgba(15, 23, 42, 0.12);
  --border-subtle: rgba(15, 23, 42, 0.08);

  --shadow-color: rgba(0, 0, 0, 0.06);
  --shadow-heavy: rgba(0, 0, 0, 0.10);
}

html.dark {
  color-scheme: dark;

  --surface-primary: #08080F;
  --surface-secondary: #0C0C16;
  --surface-tertiary: #12121E;
  --surface-alt: #0C0C16;
  --surface-card: #181826;
  --surface-card-hover: #1E1E2E;
  --surface-footer: #040408;
  --surface-overlay: rgba(8, 8, 15, 0.9);

  --text-primary: #FFFFFF;
  --text-secondary: #E2E8F0;
  --text-tertiary: #94A3B8;
  --text-muted: #64748B;

  --border-default: rgba(255, 255, 255, 0.10);
  --border-subtle: rgba(255, 255, 255, 0.06);

  --shadow-color: rgba(0, 0, 0, 0.4);
  --shadow-heavy: rgba(0, 0, 0, 0.6);
}

/* ===== 2. BASE ELEMENT OVERRIDES ===== */

:root:not(.dark) body {
  background-color: var(--surface-primary) !important;
  color: var(--text-secondary) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

:root:not(.dark) h1,
:root:not(.dark) h2,
:root:not(.dark) h3,
:root:not(.dark) h4 {
  color: var(--text-primary) !important;
}

:root:not(.dark) body::after { opacity: 0.008 !important; }

/* Scrollbar */
:root:not(.dark) ::-webkit-scrollbar-track { background: var(--surface-primary) !important; }
:root:not(.dark) ::-webkit-scrollbar-thumb { background: #CBD5E1 !important; }

/* ===== 3. TAILWIND UTILITY OVERRIDES (light mode) ===== */

/* --- Backgrounds --- */
:root:not(.dark) .bg-dark-500 { background-color: var(--surface-primary) !important; }
:root:not(.dark) .bg-dark-400 { background-color: var(--surface-alt) !important; }
:root:not(.dark) .bg-dark-300 { background-color: var(--surface-tertiary) !important; }
:root:not(.dark) .bg-dark-200 { background-color: var(--surface-card) !important; }
:root:not(.dark) .bg-dark-100 { background-color: var(--surface-card-hover) !important; }
:root:not(.dark) .bg-dark-600 { background-color: var(--surface-footer) !important; }
:root:not(.dark) .bg-dark-700 { background-color: var(--surface-tertiary) !important; }
:root:not(.dark) .bg-dark-50  { background-color: #E2E8F0 !important; }
:root:not(.dark) .bg-dark-500\/90 { background-color: rgba(255, 255, 255, 0.92) !important; }

/* --- Gradients --- */
:root:not(.dark) .from-dark-500 { --tw-gradient-from: var(--surface-primary) !important; }
:root:not(.dark) .from-dark-300 { --tw-gradient-from: var(--surface-tertiary) !important; }
:root:not(.dark) .from-dark-200 { --tw-gradient-from: var(--surface-card) !important; }
:root:not(.dark) .via-dark-300  { --tw-gradient-via: var(--surface-tertiary) !important; }
:root:not(.dark) .via-dark-200  { --tw-gradient-via: var(--surface-card) !important; }

/* --- Text --- */
:root:not(.dark) .text-white { color: var(--text-primary) !important; }
:root:not(.dark) .text-neutral-200 { color: var(--text-secondary) !important; }
:root:not(.dark) .text-neutral-300 { color: var(--text-secondary) !important; }
:root:not(.dark) .text-neutral-400 { color: var(--text-tertiary) !important; }
:root:not(.dark) .text-neutral-500 { color: var(--text-muted) !important; }
:root:not(.dark) .text-neutral-600 { color: var(--text-muted) !important; }

/* Keep white text on colored backgrounds */
:root:not(.dark) .bg-primary-600 .text-white,
:root:not(.dark) .bg-primary-500 .text-white,
:root:not(.dark) .bg-primary-700 .text-white,
:root:not(.dark) .bg-error .text-white,
:root:not(.dark) .bg-success .text-white,
:root:not(.dark) [class*="bg-primary-"] > .text-white,
:root:not(.dark) .btn-glow.text-white,
:root:not(.dark) a[class*="bg-primary-"].text-white,
:root:not(.dark) button[class*="bg-primary-"].text-white { color: #FFFFFF !important; }

/* --- Borders --- */
:root:not(.dark) .border-white\/5   { border-color: var(--border-subtle) !important; }
:root:not(.dark) .border-white\/10  { border-color: var(--border-default) !important; }
:root:not(.dark) .border-white\/20  { border-color: rgba(15, 23, 42, 0.15) !important; }
:root:not(.dark) .border-white\/\[0\.04\] { border-color: var(--border-subtle) !important; }
:root:not(.dark) .border-white\/\[0\.05\] { border-color: var(--border-subtle) !important; }
:root:not(.dark) .border-white\/\[0\.06\] { border-color: var(--border-default) !important; }

/* Dividers */
:root:not(.dark) .divide-white\/5 > :not(:first-child)  { border-color: var(--border-subtle) !important; }
:root:not(.dark) .divide-white\/10 > :not(:first-child) { border-color: var(--border-default) !important; }

/* Rings */
:root:not(.dark) .ring-white\/5  { --tw-ring-color: var(--border-subtle) !important; }
:root:not(.dark) .ring-white\/10 { --tw-ring-color: var(--border-default) !important; }

/* --- Background with opacity --- */
:root:not(.dark) .bg-white\/5   { background-color: rgba(15, 23, 42, 0.03) !important; }
:root:not(.dark) .bg-white\/10  { background-color: rgba(15, 23, 42, 0.05) !important; }
:root:not(.dark) .bg-white\/\[0\.02\] { background-color: rgba(15, 23, 42, 0.02) !important; }
:root:not(.dark) .bg-white\/\[0\.03\] { background-color: rgba(15, 23, 42, 0.03) !important; }
:root:not(.dark) .bg-white\/\[0\.04\] { background-color: rgba(15, 23, 42, 0.03) !important; }
:root:not(.dark) .bg-black\/50  { background-color: rgba(0, 0, 0, 0.3) !important; }
:root:not(.dark) .bg-black\/70  { background-color: rgba(0, 0, 0, 0.4) !important; }

/* --- Hover states --- */
:root:not(.dark) .hover\:bg-white\/5:hover  { background-color: rgba(15, 23, 42, 0.06) !important; }
:root:not(.dark) .hover\:bg-white\/10:hover { background-color: rgba(15, 23, 42, 0.08) !important; }
:root:not(.dark) .hover\:text-white:hover   { color: var(--text-primary) !important; }
:root:not(.dark) .hover\:border-white\/20:hover { border-color: rgba(15, 23, 42, 0.15) !important; }

/* --- Shadows --- */
:root:not(.dark) .shadow-lg { --tw-shadow-color: rgba(0, 0, 0, 0.06) !important; }
:root:not(.dark) .shadow-black\/20 { --tw-shadow-color: var(--shadow-color) !important; }
:root:not(.dark) .shadow-black\/30 { --tw-shadow-color: var(--shadow-heavy) !important; }
:root:not(.dark) .shadow-black\/40 { --tw-shadow-color: var(--shadow-heavy) !important; }

/* Placeholder */
:root:not(.dark) .placeholder-white\/20::placeholder { color: rgba(15, 23, 42, 0.3) !important; }

/* ===== 4. CUSTOM COMPONENT OVERRIDES ===== */

/* Cards */
:root:not(.dark) .product-card,
:root:not(.dark) .category-card {
  background: var(--surface-card) !important;
  border-color: var(--border-subtle) !important;
}
:root:not(.dark) .product-card:hover { box-shadow: 0 16px 32px -8px var(--shadow-heavy) !important; }
:root:not(.dark) .category-card:hover { background: var(--surface-card-hover) !important; }

:root:not(.dark) .glass-card {
  background: var(--surface-overlay) !important;
  border-color: var(--border-subtle) !important;
}

/* Cards inside alt-background sections */
:root:not(.dark) .bg-dark-400 .product-card,
:root:not(.dark) .bg-dark-400 .category-card {
  background: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}
:root:not(.dark) .bg-dark-400 .glass-card { background: rgba(255, 255, 255, 0.85) !important; }

/* Image overlay */
:root:not(.dark) .image-card .overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 50%) !important;
}

/* Gradient orbs, dot grid, grid lines */
:root:not(.dark) .gradient-orb { opacity: 0.05 !important; }
:root:not(.dark) .dot-grid {
  background-image: radial-gradient(circle, rgba(99, 102, 241, 0.08) 1px, transparent 1px) !important;
}
:root:not(.dark) .grid-lines {
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.04) 1px, transparent 1px) !important;
}

/* Chips */
:root:not(.dark) .chip {
  border-color: rgba(99, 102, 241, 0.2) !important;
  background: rgba(99, 102, 241, 0.08) !important;
  color: #4F46E5 !important;
}
:root:not(.dark) .chip-accent {
  border-color: rgba(16, 185, 129, 0.25) !important;
  background: rgba(16, 185, 129, 0.08) !important;
  color: #65A30D !important;
}

/* Section divider */
:root:not(.dark) .section-divider { background: var(--border-subtle) !important; }

/* FAQ accordion items — Alpine sets bg-dark-300/30 and bg-dark-300/50 via :class */
:root:not(.dark) .bg-dark-300\/30 {
  background-color: #FFFFFF !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
:root:not(.dark) .bg-dark-300\/50 {
  background-color: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
:root:not(.dark) .border-accent-500\/30 {
  border-color: rgba(132, 204, 22, 0.3) !important;
}
:root:not(.dark) .hover\:border-accent-500\/20:hover {
  border-color: rgba(132, 204, 22, 0.25) !important;
}

/* Form inputs */
:root:not(.dark) .input-dark {
  background-color: var(--surface-tertiary) !important;
  border-color: var(--border-default) !important;
  color: var(--text-secondary) !important;
}
:root:not(.dark) .input-dark::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.6 !important;
}

/* Prose / Typography — blog articles & product descriptions */
:root:not(.dark) .prose.prose-invert {
  --tw-prose-body: var(--text-secondary) !important;
  --tw-prose-headings: var(--text-primary) !important;
  --tw-prose-links: #4F46E5 !important;
  --tw-prose-bold: var(--text-primary) !important;
  --tw-prose-counters: var(--text-tertiary) !important;
  --tw-prose-bullets: var(--text-tertiary) !important;
  --tw-prose-hr: var(--border-default) !important;
  --tw-prose-quotes: var(--text-secondary) !important;
  --tw-prose-quote-borders: rgba(79, 70, 229, 0.3) !important;
  --tw-prose-code: #4F46E5 !important;
  --tw-prose-pre-code: var(--text-secondary) !important;
  --tw-prose-pre-bg: var(--surface-tertiary) !important;
  color: var(--text-secondary) !important;
}

/* Override the per-element prose classes used on blog posts */
:root:not(.dark) .prose-headings\:text-white :is(:where(h1,h2,h3,h4,h5,h6)) {
  color: var(--text-primary) !important;
}
:root:not(.dark) .prose-p\:text-neutral-300 :is(:where(p)) {
  color: var(--text-secondary) !important;
}
:root:not(.dark) .prose-li\:text-neutral-300 :is(:where(li)) {
  color: var(--text-secondary) !important;
}
:root:not(.dark) .prose-strong\:text-white :is(:where(strong)) {
  color: var(--text-primary) !important;
}
:root:not(.dark) .prose-blockquote\:text-neutral-400 :is(:where(blockquote)) {
  color: var(--text-tertiary) !important;
}
:root:not(.dark) .prose-code\:text-primary-300 :is(:where(code)) {
  color: #4F46E5 !important;
}
:root:not(.dark) .prose-code\:bg-dark-300 :is(:where(code)) {
  background-color: var(--surface-tertiary) !important;
}
:root:not(.dark) .prose-pre\:bg-dark-300 :is(:where(pre)) {
  background-color: var(--surface-tertiary) !important;
}
:root:not(.dark) .prose-pre\:border-white\/10 :is(:where(pre)) {
  border-color: var(--border-default) !important;
}
:root:not(.dark) .prose-img\:border-white\/10 :is(:where(img)) {
  border-color: var(--border-default) !important;
}
:root:not(.dark) .prose-hr\:border-white\/10 :is(:where(hr)) {
  border-color: var(--border-default) !important;
}
:root:not(.dark) .prose-a\:text-primary-400 :is(:where(a)) {
  color: #4F46E5 !important;
}

/* Blog & Product cards — opacity bg overrides */
:root:not(.dark) .bg-dark-200\/80 {
  background-color: rgba(255, 255, 255, 0.5) !important;
}
:root:not(.dark) .bg-dark-300\/80 {
  background-color: rgba(255, 255, 255, 0.45) !important;
}
:root:not(.dark) .bg-dark-400\/80 {
  background-color: rgba(255, 255, 255, 0.85) !important;
}
:root:not(.dark) .bg-dark-400\/60 {
  background-color: rgba(241, 245, 249, 0.8) !important;
}
:root:not(.dark) .bg-dark-50\/50 {
  background-color: rgba(241, 245, 249, 0.7) !important;
}
:root:not(.dark) .group:hover .group-hover\:text-accent-400 {
  color: #4F46E5 !important;
}
:root:not(.dark) .hover\:border-accent-500\/20:hover {
  border-color: rgba(79, 70, 229, 0.2) !important;
}

/* CTA section — "Free Consultation" glass card */
:root:not(.dark) .bg-primary-500\/10 {
  background-color: rgba(79, 70, 229, 0.08) !important;
}
:root:not(.dark) .border-primary-500\/20 {
  border-color: rgba(79, 70, 229, 0.18) !important;
}
:root:not(.dark) .bg-accent-500\/\[0\.06\] {
  background-color: rgba(22, 163, 74, 0.06) !important;
}
:root:not(.dark) .border-accent-500\/\[0\.12\] {
  border-color: rgba(22, 163, 74, 0.15) !important;
}
:root:not(.dark) .text-accent-400 {
  color: #15803D !important;
}
:root:not(.dark) .text-dark-700 {
  color: #020204 !important;
}

/* Category filter tabs on /products */
:root:not(.dark) .bg-primary-600.text-white {
  color: #FFFFFF !important;
}

/* Product description prose-dark */
:root:not(.dark) .prose-dark {
  color: var(--text-secondary) !important;
}

/* Google Maps — dark filter only in dark mode */
html.dark .map-iframe {
  filter: invert(90%) hue-rotate(180deg) brightness(0.95) contrast(0.9) !important;
}
.map-iframe {
  filter: none;
  transition: filter 0.3s ease;
}

/* ===== 5. FOOTER: keep dark in light mode ===== */

:root:not(.dark) footer .text-white       { color: #FFFFFF !important; }
:root:not(.dark) footer .text-neutral-400  { color: #CBD5E1 !important; }
:root:not(.dark) footer .text-neutral-500  { color: #94A3B8 !important; }
:root:not(.dark) footer .text-neutral-600  { color: #94A3B8 !important; }
:root:not(.dark) footer .text-neutral-300  { color: #E2E8F0 !important; }
:root:not(.dark) footer .border-white\/\[0\.04\] { border-color: rgba(255, 255, 255, 0.04) !important; }
:root:not(.dark) footer .border-white\/\[0\.06\] { border-color: rgba(255, 255, 255, 0.06) !important; }
:root:not(.dark) footer .hover\:text-neutral-300:hover { color: #94A3B8 !important; }
:root:not(.dark) footer .hover\:text-accent-400:hover  { color: #A3E635 !important; }
:root:not(.dark) footer h1,
:root:not(.dark) footer h2,
:root:not(.dark) footer h3,
:root:not(.dark) footer h4 { color: #FFFFFF !important; }
:root:not(.dark) footer .section-divider { background: rgba(255, 255, 255, 0.05) !important; }
:root:not(.dark) footer .text-gradient { color: #A3E635 !important; }
:root:not(.dark) footer .theme-toggle-footer {
  color: #64748B !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
:root:not(.dark) footer .theme-toggle-footer:hover {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ===== 6. HERO IMAGE OVERLAY ===== */

/*
 * Multi-layer hero system:
 *   Layer 1  .hero-image-overlay   – base darkening over the <img>
 *   Layer 2  .hero-noise           – subtle film-grain texture
 *   Layer 3  .hero-radial-glow     – primary-color radial glow
 *   Layer 4  .hero-bottom-fade-*   – gradient that dissolves into next section
 */

/* --- Layer 1: Base darkening overlay --- */
html.dark .hero-image-overlay {
  background: linear-gradient(
    to bottom,
    rgba(8,8,15,0.55) 0%,
    rgba(8,8,15,0.65) 60%,
    rgba(8,8,15,0.70) 100%
  ) !important;
}
:root:not(.dark) .hero-image-overlay {
  background: linear-gradient(
    to bottom,
    rgba(15,23,42,0.35) 0%,
    rgba(15,23,42,0.45) 60%,
    rgba(15,23,42,0.55) 100%
  ) !important;
}

/* --- Layer 2: Noise texture (film grain) --- */
.hero-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.03;
}

/* --- Layer 3: Radial glow (primary accent) --- */
html.dark .hero-radial-glow {
  background: radial-gradient(ellipse at center, rgba(99,102,241,0.10) 0%, transparent 70%);
}
:root:not(.dark) .hero-radial-glow {
  background: radial-gradient(ellipse at center, rgba(79,70,229,0.08) 0%, transparent 70%);
}

/* --- Layer 4: Bottom fade into next section --- */

/* Fade into bg-dark-400 (#0C0C16 dark / #F1F5F9 light) — used on /about */
html.dark .hero-bottom-fade-400 {
  background: linear-gradient(to top, #0C0C16 0%, rgba(12,12,22,0.6) 30%, transparent 70%) !important;
}
:root:not(.dark) .hero-bottom-fade-400 {
  background: linear-gradient(to top, #F1F5F9 0%, rgba(241,245,249,0.6) 30%, transparent 70%) !important;
}

/* Fade into bg-dark-500 (#08080F dark / #FFFFFF light) — used on /faq, /contact */
html.dark .hero-bottom-fade-500 {
  background: linear-gradient(to top, #08080F 0%, rgba(8,8,15,0.6) 30%, transparent 70%) !important;
}
:root:not(.dark) .hero-bottom-fade-500 {
  background: linear-gradient(to top, #FFFFFF 0%, rgba(255,255,255,0.6) 30%, transparent 70%) !important;
}

/* --- Text protection: force white on hero images in both themes --- */
:root:not(.dark) .hero-image-overlay ~ .hero-noise ~ .hero-radial-glow ~ [class*="hero-bottom-fade"] ~ .container .text-white,
:root:not(.dark) .hero-image-overlay ~ .container .text-white { color: #FFFFFF !important; }

:root:not(.dark) .hero-image-overlay ~ .hero-noise ~ .hero-radial-glow ~ [class*="hero-bottom-fade"] ~ .container .text-neutral-400,
:root:not(.dark) .hero-image-overlay ~ .container .text-neutral-400 { color: rgba(255,255,255,0.75) !important; }

/* Also protect headings from the base :root:not(.dark) h1 override */
:root:not(.dark) .hero-image-overlay ~ .container h1,
:root:not(.dark) .hero-image-overlay ~ .hero-noise ~ .hero-radial-glow ~ [class*="hero-bottom-fade"] ~ .container h1 {
  color: #FFFFFF !important;
}

/* ===== 7. HEADER ===== */

/* Nav links: darker text for inactive items */
:root:not(.dark) header .nav-link.text-neutral-400 {
  color: #475569 !important;
}
:root:not(.dark) header .nav-link.text-neutral-400:hover {
  color: #020617 !important;
}

/* Active nav link: primary color + subtle bg pill */
:root:not(.dark) header .nav-active {
  color: #4F46E5 !important;
  background-color: rgba(99, 102, 241, 0.08) !important;
}

/* Mobile nav: darker inactive links */
:root:not(.dark) header .text-neutral-500 {
  color: #64748B !important;
}
:root:not(.dark) header .text-neutral-500:hover,
:root:not(.dark) header .hover\:text-white:hover {
  color: #020617 !important;
}

/* Mobile active link */
:root:not(.dark) header .nav-active.text-white {
  color: #4F46E5 !important;
}

/* CTA button keeps white text */
:root:not(.dark) header a[class*="bg-primary-"].text-white { color: #FFFFFF !important; }
:root:not(.dark) header .btn-glow.text-white { color: #FFFFFF !important; }

/* Logo text */
:root:not(.dark) header .text-white:not(.nav-active):not(.btn-glow) {
  color: #020617 !important;
}

/* Scrolled header: light bg with subtle bottom border */
:root:not(.dark) header .shadow-lg {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}