@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #0f172a;
}

.dark {
  --background: #09090b;
  --foreground: #fafafa;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ========================================================
   LIGHT THEME DESIGN FIXES (When .dark class is NOT present)
   ======================================================== */
html:not(.dark) {
  /* Main Canvas & Sections */
  .bg-zinc-950 {
    background-color: #ffffff !important;
  }

  /* Cards, Modals, Popups, and Panels */
  .bg-zinc-900,
  .bg-zinc-900\/60,
  .bg-zinc-900\/70 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
  }

  /* Sub-cards, Feature Badges & Inner Containers */
  .bg-zinc-900\/40,
  .bg-zinc-900\/30,
  .bg-zinc-950\/50 {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
  }

  /* Borders across the site */
  .border-zinc-800,
  .border-zinc-800\/80,
  .border-zinc-900 {
    border-color: #e2e8f0 !important;
  }

  /* Headings and Titles to Rich Dark Navy/Black */
  .text-white,
  h1.text-white,
  h2.text-white,
  h3.text-white,
  h4.text-white,
  span.text-white,
  p.text-white {
    color: #0f172a !important;
  }

  /* Body & Subtitle Texts */
  .text-zinc-400,
  .text-zinc-500 {
    color: #64748b !important;
  }

  .text-zinc-300,
  .text-zinc-200,
  .text-zinc-100 {
    color: #334155 !important;
  }

  /* Form Inputs, Dropdowns & Textareas */
  input,
  textarea,
  select {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: #94a3b8 !important;
  }

  /* Soft Category Pills and Badges */
  .bg-indigo-500\/10,
  .bg-indigo-500\/20 {
    background-color: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #4338ca !important;
  }

  /* Navbar Glassmorphism */
  header {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-color: #e2e8f0 !important;
  }
}

/* ========================================================
   PRESERVE SPECIAL UI ELEMENTS (Buttons & Modal Overlays)
   ======================================================== */

/* Indigo Action Buttons: Keep sharp with clean white text */
.bg-indigo-600,
.bg-indigo-500 {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
}

.bg-indigo-600 *,
.bg-indigo-500 * {
  color: #ffffff !important;
}

/* Semi-Transparent Modal & Cart Backdrops */
.bg-black\/60 { background-color: rgba(0, 0, 0, 0.6) !important; }
.bg-black\/70 { background-color: rgba(0, 0, 0, 0.7) !important; }
.bg-black\/80 { background-color: rgba(0, 0, 0, 0.8) !important; }