/* ===== DARK MODE ===== */
[data-theme="dark"] {
  --color-black: #0a0a0a;
  --color-black-light: #1a1a1a;
  --color-white: #f0f0f0;
  --color-cream: #121212;
  --color-beige: #1e1e1e;
  --color-beige-dark: #2a2a2a;
  --color-charcoal: #e0e0e0;
  --color-gray: #b0b0b0;
  --color-gray-light: #888;
  --color-gray-lighter: #555;
  --color-off-white: #1a1a1a;
  --color-text: #f0f0f0;
  --color-text-light: #b0b0b0;
  --color-bg: #0f0f0f;
  --color-bg-white: #1a1a1a;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-light: rgba(255, 255, 255, 0.04);
  --color-card-bg: #1e1e1e;
  --color-card-shadow: rgba(0, 0, 0, 0.3);
  --color-glass-bg: rgba(255, 255, 255, 0.05);
  --color-glass-border: rgba(255, 255, 255, 0.08);
  --color-overlay: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .header-main { background: var(--color-bg); }
[data-theme="dark"] .header.scrolled { background: var(--color-bg); }
[data-theme="dark"] .search-bar { background: var(--color-bg); }
[data-theme="dark"] .cart-sidebar { background: var(--color-bg-white); }
[data-theme="dark"] .mobile-menu { background: var(--color-bg-white); }
[data-theme="dark"] .chat-modal { background: var(--color-bg-white); }

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

[data-theme="dark"] .faq-section { background: var(--color-beige); }
[data-theme="dark"] .faq-item { background: var(--color-card-bg); }

[data-theme="dark"] .category-card { background: var(--color-card-bg); }
[data-theme="dark"] .product-card { background: var(--color-card-bg); }
[data-theme="dark"] .blog-card { background: var(--color-card-bg); }
[data-theme="dark"] .testimonial-card { background: var(--color-card-bg); }
[data-theme="dark"] .brand-item { background: var(--color-card-bg); }

[data-theme="dark"] .contact-item i { background: var(--color-beige); }

[data-theme="dark"] .dropdown-menu { background: var(--color-bg-white); }
[data-theme="dark"] .user-dropdown-menu { background: var(--color-bg-white); }
[data-theme="dark"] .search-suggestions { background: var(--color-bg-white); }

[data-theme="dark"] .skeleton { background: linear-gradient(90deg, var(--color-beige) 25%, var(--color-beige-dark) 50%, var(--color-beige) 75%); background-size: 200% 100%; }

[data-theme="dark"] .newsletter-card { background: rgba(255, 255, 255, 0.03); }

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