/*
 * Dark Mode System - WangiWorld Luxury Perfume Store
 * black & white luxury palette inverted for dark mode
 *
 * Light Mode: White backgrounds, black text (default)
 * Dark Mode: Black backgrounds, white text (elegant inversion)
 */

/* ==========================================
   CSS Variables - Light Mode (Default)
   ========================================== */
:root {
  /* Primary Colors */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #FAFAFA;
  --color-bg-tertiary: #F5F5F5;
  --color-bg-elevated: #FFFFFF;

  /* Text Colors */
  --color-text-primary: #000000;
  --color-text-secondary: #333333;
  --color-text-muted: #666666;
  --color-text-placeholder: #A3A3A3;

  /* Border & Divider Colors */
  --color-border: #E5E5E5;
  --color-border-light: #F0F0F0;
  --color-divider: #E5E5E5;

  /* Interactive States */
  --color-hover: rgba(0, 0, 0, 0.05);
  --color-active: rgba(0, 0, 0, 0.1);
  --color-focus-ring: rgba(0, 0, 0, 0.2);

  /* Button Colors */
  --color-btn-primary-bg: #000000;
  --color-btn-primary-text: #FFFFFF;
  --color-btn-primary-hover: #333333;
  --color-btn-secondary-bg: #FFFFFF;
  --color-btn-secondary-text: #000000;
  --color-btn-secondary-border: #000000;

  /* Card & Surface Colors */
  --color-card-bg: #FFFFFF;
  --color-card-border: #E5E5E5;
  --color-card-shadow: rgba(0, 0, 0, 0.08);

  /* Header & Footer */
  --color-header-bg: #FFFFFF;
  --color-header-border: #E5E5E5;
  --color-footer-bg: #000000;
  --color-footer-text: #FFFFFF;

  /* Overlay & Backdrop */
  --color-overlay: rgba(0, 0, 0, 0.4);
  --color-backdrop: rgba(0, 0, 0, 0.5);

  /* Product Badge Colors */
  --color-badge-sale-bg: #000000;
  --color-badge-sale-text: #FFFFFF;
  --color-badge-new-bg: #000000;
  --color-badge-new-text: #FFFFFF;

  /* Input Colors */
  --color-input-bg: #FFFFFF;
  --color-input-border: #E5E5E5;
  --color-input-focus-border: #000000;
  --color-input-text: #000000;

  /* Scrollbar */
  --color-scrollbar-track: #F5F5F5;
  --color-scrollbar-thumb: #D4D4D4;
  --color-scrollbar-thumb-hover: #A3A3A3;

  /* Theme transition */
  --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ==========================================
   CSS Variables - Dark Mode
   ========================================== */
[data-theme="dark"] {
  /* Primary Colors - Inverted for luxury dark aesthetic */
  --color-bg-primary: #0A0A0A;
  --color-bg-secondary: #111111;
  --color-bg-tertiary: #171717;
  --color-bg-elevated: #1A1A1A;

  /* Text Colors */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #E5E5E5;
  --color-text-muted: #A3A3A3;
  --color-text-placeholder: #666666;

  /* Border & Divider Colors */
  --color-border: #262626;
  --color-border-light: #1F1F1F;
  --color-divider: #262626;

  /* Interactive States */
  --color-hover: rgba(255, 255, 255, 0.05);
  --color-active: rgba(255, 255, 255, 0.1);
  --color-focus-ring: rgba(255, 255, 255, 0.2);

  /* Button Colors */
  --color-btn-primary-bg: #FFFFFF;
  --color-btn-primary-text: #000000;
  --color-btn-primary-hover: #E5E5E5;
  --color-btn-secondary-bg: #0A0A0A;
  --color-btn-secondary-text: #FFFFFF;
  --color-btn-secondary-border: #FFFFFF;

  /* Card & Surface Colors */
  --color-card-bg: #111111;
  --color-card-border: #262626;
  --color-card-shadow: rgba(0, 0, 0, 0.4);

  /* Header & Footer */
  --color-header-bg: #0A0A0A;
  --color-header-border: #262626;
  --color-footer-bg: #000000;
  --color-footer-text: #FFFFFF;

  /* Overlay & Backdrop */
  --color-overlay: rgba(0, 0, 0, 0.7);
  --color-backdrop: rgba(0, 0, 0, 0.8);

  /* Product Badge Colors */
  --color-badge-sale-bg: #FFFFFF;
  --color-badge-sale-text: #000000;
  --color-badge-new-bg: #FFFFFF;
  --color-badge-new-text: #000000;

  /* Input Colors */
  --color-input-bg: #171717;
  --color-input-border: #262626;
  --color-input-focus-border: #FFFFFF;
  --color-input-text: #FFFFFF;

  /* Scrollbar - Dark */
  --color-scrollbar-track: #171717;
  --color-scrollbar-thumb: #404040;
  --color-scrollbar-thumb-hover: #525252;
}

/* ==========================================
   System Preference Detection
   ========================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Auto-apply dark mode if user prefers and hasn't explicitly set light */
    --color-bg-primary: #0A0A0A;
    --color-bg-secondary: #111111;
    --color-bg-tertiary: #171717;
    --color-bg-elevated: #1A1A1A;
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #E5E5E5;
    --color-text-muted: #A3A3A3;
    --color-text-placeholder: #666666;
    --color-border: #262626;
    --color-border-light: #1F1F1F;
    --color-divider: #262626;
    --color-hover: rgba(255, 255, 255, 0.05);
    --color-active: rgba(255, 255, 255, 0.1);
    --color-focus-ring: rgba(255, 255, 255, 0.2);
    --color-btn-primary-bg: #FFFFFF;
    --color-btn-primary-text: #000000;
    --color-btn-primary-hover: #E5E5E5;
    --color-btn-secondary-bg: #0A0A0A;
    --color-btn-secondary-text: #FFFFFF;
    --color-btn-secondary-border: #FFFFFF;
    --color-card-bg: #111111;
    --color-card-border: #262626;
    --color-card-shadow: rgba(0, 0, 0, 0.4);
    --color-header-bg: #0A0A0A;
    --color-header-border: #262626;
    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-backdrop: rgba(0, 0, 0, 0.8);
    --color-badge-sale-bg: #FFFFFF;
    --color-badge-sale-text: #000000;
    --color-badge-new-bg: #FFFFFF;
    --color-badge-new-text: #000000;
    --color-input-bg: #171717;
    --color-input-border: #262626;
    --color-input-focus-border: #FFFFFF;
    --color-input-text: #FFFFFF;
    --color-scrollbar-track: #171717;
    --color-scrollbar-thumb: #404040;
    --color-scrollbar-thumb-hover: #525252;
  }
}

/* ==========================================
   Global Dark Mode Styles
   ========================================== */

/* Body & Background */
body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  transition: var(--theme-transition);
}

/* Smooth transition for all elements with theme-aware class */
.theme-transition {
  transition: var(--theme-transition);
}

/* ==========================================
   Header Styles
   ========================================== */
[data-theme="dark"] #main-header,
[data-theme="dark"] header {
  background-color: var(--color-header-bg) !important;
  border-color: var(--color-header-border) !important;
}

[data-theme="dark"] #main-header.bg-white\/95,
[data-theme="dark"] header.bg-white\/95 {
  background-color: rgba(10, 10, 10, 0.95) !important;
}

[data-theme="dark"] #announcement-bar {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
}

/* ==========================================
   Navigation & Menu
   ========================================== */
[data-theme="dark"] nav a,
[data-theme="dark"] .nav-link {
  color: var(--color-text-primary);
}

[data-theme="dark"] nav a:hover,
[data-theme="dark"] .nav-link:hover {
  opacity: 0.7;
}

/* Mega Menu */
[data-theme="dark"] #brands-mega-menu {
  background-color: var(--color-bg-primary) !important;
  border-color: var(--color-border) !important;
}

/* Mobile Drawer Menu */
[data-theme="dark"] .drawer-menu,
[data-theme="dark"] [class*="DrawerMenu"] {
  background-color: var(--color-bg-primary) !important;
}

/* ==========================================
   Product Cards
   ========================================== */
[data-theme="dark"] .product-card,
[data-theme="dark"] .luxury-product-card,
[data-theme="dark"] [class*="ProductCard"] {
  background-color: var(--color-card-bg);
  border-color: var(--color-card-border);
}

[data-theme="dark"] .product-card:hover,
[data-theme="dark"] .luxury-product-card:hover {
  box-shadow: 0 8px 24px var(--color-card-shadow);
}

/* Product Image Background */
[data-theme="dark"] .product-image-wrapper,
[data-theme="dark"] .aspect-\[3\/4\] {
  background-color: var(--color-bg-tertiary);
}

/* Product Text */
[data-theme="dark"] .product-title,
[data-theme="dark"] .product-brand,
[data-theme="dark"] .product-price {
  color: var(--color-text-primary);
}

[data-theme="dark"] .product-brand {
  color: var(--color-text-muted);
}

/* ==========================================
   Buttons
   ========================================== */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] button.bg-black,
[data-theme="dark"] a.bg-black {
  background-color: var(--color-btn-primary-bg) !important;
  color: var(--color-btn-primary-text) !important;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] button.bg-black:hover,
[data-theme="dark"] a.bg-black:hover {
  background-color: var(--color-btn-primary-hover) !important;
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] button.border-black,
[data-theme="dark"] a.border-black {
  background-color: var(--color-btn-secondary-bg) !important;
  color: var(--color-btn-secondary-text) !important;
  border-color: var(--color-btn-secondary-border) !important;
}

/* ==========================================
   Cart Drawer
   ========================================== */
[data-theme="dark"] #cart-drawer-panel > div,
[data-theme="dark"] .cart-drawer {
  background-color: var(--color-bg-primary) !important;
}

[data-theme="dark"] #cart-drawer-panel .border-gray-100,
[data-theme="dark"] #cart-drawer-panel .border-gray-200 {
  border-color: var(--color-border) !important;
}

/* ==========================================
   Forms & Inputs
   ========================================== */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-border);
  color: var(--color-input-text);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--color-input-focus-border);
  outline-color: var(--color-input-focus-border);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--color-text-placeholder);
}

/* ==========================================
   Search
   ========================================== */
[data-theme="dark"] .search-overlay,
[data-theme="dark"] #search-overlay {
  background-color: rgba(0, 0, 0, 0.95) !important;
}

[data-theme="dark"] .search-input-container {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
}

/* ==========================================
   Dropdown Menus
   ========================================== */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] [class*="dropdown"] {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border);
}

[data-theme="dark"] .dropdown-item:hover {
  background-color: var(--color-hover);
}

/* ==========================================
   Modal & Overlay
   ========================================== */
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-content {
  background-color: var(--color-bg-primary);
  border-color: var(--color-border);
}

[data-theme="dark"] .backdrop,
[data-theme="dark"] .overlay {
  background-color: var(--color-backdrop);
}

/* ==========================================
   Sections & Content Areas
   ========================================== */
[data-theme="dark"] section {
  background-color: var(--color-bg-primary);
}

[data-theme="dark"] .bg-white {
  background-color: var(--color-bg-primary) !important;
}

[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-\[\#FAFAFA\],
[data-theme="dark"] .bg-\[\#F5F5F5\] {
  background-color: var(--color-bg-secondary) !important;
}

/* ==========================================
   Text Colors Override
   ========================================== */
[data-theme="dark"] .text-black {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500 {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .text-gray-400,
[data-theme="dark"] .text-gray-300 {
  color: var(--color-text-muted) !important;
}

/* ==========================================
   Border Colors Override
   ========================================== */
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 {
  border-color: var(--color-border) !important;
}

/* ==========================================
   FeyGallery - Product Image Gallery
   ========================================== */
[data-theme="dark"] .fey-product-gallery {
  background-color: transparent;
}

[data-theme="dark"] .fey-thumbnails {
  scrollbar-color: #404040 #171717;
}

[data-theme="dark"] .fey-thumb {
  border-color: #333 !important;
  background: #1a1a1a !important;
}

[data-theme="dark"] .fey-thumb:hover,
[data-theme="dark"] .fey-thumb.active {
  border-color: #fff !important;
}

[data-theme="dark"] .fey-thumb.active {
  box-shadow: 0 0 0 1px #fff !important;
}

[data-theme="dark"] .fey-main-image {
  background: #1a1a1a !important;
  border-color: #333 !important;
}

[data-theme="dark"] .fey-main-img {
  background: #1a1a1a;
}

[data-theme="dark"] .fey-image-counter {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

[data-theme="dark"] .fey-nav-btn {
  background: rgba(30, 30, 30, 0.9) !important;
  border-color: #333 !important;
  color: #fff !important;
}

[data-theme="dark"] .fey-nav-btn:hover {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}

[data-theme="dark"] .fey-dot {
  background: #404040 !important;
}

[data-theme="dark"] .fey-dot.active,
[data-theme="dark"] .fey-dot:hover {
  background: #fff !important;
}

/* ==========================================
   Scrollbar Styling
   ========================================== */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--color-scrollbar-track);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-hover);
}

/* Firefox scrollbar */
[data-theme="dark"] * {
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

/* ==========================================
   Images - Preserve visibility
   ========================================== */
[data-theme="dark"] img {
  /* Don't invert images - they should stay as-is */
  filter: none;
}

/* Slightly reduce brightness of product images for better contrast */
[data-theme="dark"] .product-image img {
  filter: brightness(0.95);
}

/* ==========================================
   Theme Toggle Button Styles
   ========================================== */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: var(--theme-transition);
}

.theme-toggle:hover {
  background-color: var(--color-hover);
}

.theme-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

/* Icon visibility based on theme */
.theme-toggle .icon-sun {
  display: none;
}

.theme-toggle .icon-moon {
  display: block;
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* ==========================================
   Accessibility - Reduced Motion
   ========================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}