/**
 * GokuMusic - Complete Dark Mode Styling & Token Overrides
 * Design System: Swiss Modernism 2.0 & Pro Audio Dark Palette
 * File: assets/css/dark-mode.css
 */

/* ==========================================================================
   1. Dark Mode CSS Tokens & Variables
   ========================================================================== */
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;

  /* Surface Elevation Hierarchy */
  --et-surface-ground:      #070a11; /* Level 0: Deep Obsidian Canvas */
  --et-surface-card:        #0f172a; /* Level 1: Slate 900 Card Surface */
  --et-surface-elevated:    #172033; /* Level 2: Elevated Nav & Panels */
  --et-surface-overlay:     #1e293b; /* Level 3: Modals & Tooltips */
  --et-surface-subtle:      #131b2e; /* Sub-elements inside cards */

  /* Legacy & Theme Mapping */
  --et-bg-canvas:           var(--et-surface-card);
  --et-bg-light:            var(--et-surface-ground);
  --et-white:               var(--et-surface-card);
  --et-dark-color:          #f8fafc; /* Slate 50 (Heading High Contrast) */
  --et-dark-secondary:      #cbd5e1; /* Slate 300 (Body Text) */
  --et-muted-color:         #94a3b8; /* Slate 400 (Muted Info) */
  --et-border-color:        rgba(255, 255, 255, 0.08);
  --et-border-light:        rgba(255, 255, 255, 0.04);
  --et-brand-surface-dark:  #1e293b;
  --et-brand-border-dark:   rgba(255, 255, 255, 0.12);

  /* Typography & Readability */
  --et-text-high:           #f8fafc;
  --et-text-body:           #cbd5e1;
  --et-text-muted:          #94a3b8;
  --et-text-disabled:       #475569;

  /* Commerce Highlights */
  --et-price-color:         #f87171; /* Coral Ruby (7:1 contrast on dark) */
  --et-price-regular:       #64748b;
  --et-sale-badge:          #ef4444;
  --et-hot-badge:           #fb923c;
  --et-rating-gold:         #fbbf24;
  --et-success-color:       #34d399; /* Emerald 400 */

  /* Gold Accents & Glow */
  --et-brand-gold:          #f5dc32;
  --et-brand-gold-warm:     #f59e0b;
  --et-brand-gold-hover:    #fde047;
  --et-brand-gold-shadow:   rgba(234, 179, 8, 0.4);
  --et-brand-gold-light:    rgba(234, 179, 8, 0.12);
  --et-brand-gold-border:   rgba(234, 179, 8, 0.45);

  /* Shadows for Dark Surfaces */
  --shadow-xs:              0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-sm:              0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md:              0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-lg:              0 10px 30px rgba(0, 0, 0, 0.7);
  --shadow-gold-glow:       0 0 20px rgba(234, 179, 8, 0.35);

  /* Hairlines */
  --et-hairline-border:     rgba(255, 255, 255, 0.08);
  --et-hairline-gold:       rgba(234, 179, 8, 0.45);
}

/* ==========================================================================
   2. Smooth Color Transition (UI/UX Best Practice: No 'transition: all')
   ========================================================================== */
body,
.page-wrapper,
.template-content,
.goku-home-page,
.site-header,
.product-card,
.side-banner-card,
.accessory-card,
.category-pill,
.trust-badge-item,
.section-head-bar,
.footer {
  transition: 
    background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   3. Global Page Canvas in Dark Mode
   ========================================================================== */
[data-theme="dark"] body {
  background-color: var(--et-surface-ground) !important;
  color: var(--et-text-high) !important;
}

[data-theme="dark"] .page-wrapper,
[data-theme="dark"] .template-content,
[data-theme="dark"] .main-content-wrapper,
[data-theme="dark"] .content-page,
[data-theme="dark"] .goku-home-page {
  background-color: var(--et-surface-ground) !important;
  color: var(--et-text-high) !important;
}

/* Text Hierarchy */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .section-title,
[data-theme="dark"] .entry-title {
  color: var(--et-text-high) !important;
}

[data-theme="dark"] p,
[data-theme="dark"] .entry-content p,
[data-theme="dark"] .post-content p {
  color: var(--et-text-body);
}

/* ==========================================================================
   4. Goku Home Page Elements
   ========================================================================== */
/* Section Headings */
[data-theme="dark"] .section-head-bar {
  border-bottom-color: var(--et-hairline-border);
}

[data-theme="dark"] .section-pill-tag {
  background: #eab308;
  color: #0b0f19;
}

/* Hero Section */
[data-theme="dark"] .niche-hero-section {
  background: transparent;
}

[data-theme="dark"] .hero-banner-main {
  background: linear-gradient(135deg, #111827 0%, #1e293b 100%) !important;
  border: 1px solid var(--et-hairline-border) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .hero-title {
  color: var(--et-text-high) !important;
}

[data-theme="dark"] .hero-desc {
  color: var(--et-text-body) !important;
}

/* Side Deals Cards */
[data-theme="dark"] .side-banner-card {
  background: var(--et-surface-card) !important;
  border: 1px solid var(--et-hairline-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-theme="dark"] .side-banner-card:hover {
  border-color: var(--et-hairline-gold) !important;
  box-shadow: var(--shadow-md), 0 0 16px rgba(234, 179, 8, 0.2) !important;
  transform: translateY(-2px);
}

[data-theme="dark"] .side-banner-thumb {
  background: var(--et-surface-subtle) !important;
  border: 1px solid var(--et-hairline-border) !important;
}

[data-theme="dark"] .side-banner-thumb img {
  filter: brightness(0.96) contrast(1.02);
}

[data-theme="dark"] .side-banner-title a {
  color: var(--et-text-high) !important;
}

[data-theme="dark"] .side-banner-title a:hover {
  color: var(--et-brand-gold) !important;
}

/* Category Filter Pills */
[data-theme="dark"] .category-pill,
[data-theme="dark"] .cat-tab-btn {
  background: var(--et-surface-card) !important;
  color: var(--et-text-body) !important;
  border: 1px solid var(--et-hairline-border) !important;
}

[data-theme="dark"] .category-pill:hover,
[data-theme="dark"] .cat-tab-btn:hover {
  background: var(--et-surface-elevated) !important;
  color: var(--et-brand-gold) !important;
  border-color: var(--et-hairline-gold) !important;
}

[data-theme="dark"] .category-pill.active,
[data-theme="dark"] .cat-tab-btn.active {
  background: linear-gradient(135deg, #f5dc32, #eab308) !important;
  color: #070a11 !important;
  border-color: #f5dc32 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.35) !important;
}

/* 5-Column Product Cards */
[data-theme="dark"] .product-card {
  background: var(--et-surface-card) !important;
  border: 1px solid var(--et-hairline-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-theme="dark"] .product-card:hover {
  border-color: var(--et-hairline-gold) !important;
  box-shadow: var(--shadow-md), 0 0 16px rgba(234, 179, 8, 0.2) !important;
  transform: translateY(-3px);
}

[data-theme="dark"] .card-img-wrap {
  background: var(--et-surface-subtle) !important;
  border-radius: 6px;
}

[data-theme="dark"] .product-card-img {
  filter: brightness(0.96) contrast(1.02);
}

[data-theme="dark"] .product-title a {
  color: var(--et-text-high) !important;
}

[data-theme="dark"] .product-title a:hover {
  color: var(--et-brand-gold) !important;
}

[data-theme="dark"] .product-price-now,
[data-theme="dark"] .price-now,
[data-theme="dark"] .woocommerce-Price-amount {
  color: var(--et-price-color) !important;
}

[data-theme="dark"] del .woocommerce-Price-amount,
[data-theme="dark"] .product-price-old,
[data-theme="dark"] .price-was {
  color: var(--et-price-regular) !important;
}

[data-theme="dark"] .btn-quickview-overlay {
  background: rgba(15, 23, 42, 0.88) !important;
  color: #f5dc32 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Accessory Cards */
[data-theme="dark"] .accessory-card {
  background: var(--et-surface-card) !important;
  border: 1px solid var(--et-hairline-border) !important;
}

[data-theme="dark"] .accessory-card:hover {
  border-color: var(--et-hairline-gold) !important;
  box-shadow: var(--shadow-md) !important;
}

[data-theme="dark"] .acc-thumb {
  background: var(--et-surface-subtle) !important;
}

[data-theme="dark"] .acc-thumb img {
  filter: brightness(0.96) contrast(1.02);
}

[data-theme="dark"] .acc-title-text a {
  color: var(--et-text-high) !important;
}

[data-theme="dark"] .acc-title-text a:hover {
  color: var(--et-brand-gold) !important;
}

[data-theme="dark"] .acc-price-text {
  color: var(--et-price-color) !important;
}

/* 4 Trust Commitments */
[data-theme="dark"] .trust-badge-item,
[data-theme="dark"] .commitment-card {
  background: var(--et-surface-card) !important;
  border: 1px solid var(--et-hairline-border) !important;
}

[data-theme="dark"] .trust-title {
  color: var(--et-text-high) !important;
}

[data-theme="dark"] .trust-desc {
  color: var(--et-text-muted) !important;
}

/* Showroom Experience Box */
[data-theme="dark"] .showroom-box,
[data-theme="dark"] .showroom-feature-card {
  background: var(--et-surface-card) !important;
  border: 1px solid var(--et-hairline-border) !important;
}

/* Quickview Modal */
[data-theme="dark"] .modal-quickview-content,
[data-theme="dark"] .quick-view-popup {
  background: var(--et-surface-overlay) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85) !important;
  color: var(--et-text-high) !important;
}

/* ==========================================================================
   5. WooCommerce Single Product, Archive & Policy Pages
   ========================================================================== */
[data-theme="dark"] .product-main-summary,
[data-theme="dark"] .product-tabs-wrapper,
[data-theme="dark"] .woocommerce-Tabs-panel,
[data-theme="dark"] .woocommerce-product-gallery,
[data-theme="dark"] .policy-card,
[data-theme="dark"] .policy-box,
[data-theme="dark"] .faq-accordion-item,
[data-theme="dark"] .review-card {
  background: var(--et-surface-card) !important;
  border-color: var(--et-hairline-border) !important;
  color: var(--et-text-body) !important;
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #111827 !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
  border-color: #eab308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.25) !important;
}

/* ==========================================================================
   6. Floating Dark Mode Switch Widget (Accessible & Smooth)
   ========================================================================== */
.goku-dark-toggle-floating {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(11, 15, 25, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(234, 179, 8, 0.4);
  border-radius: 9999px;
  padding: 6px 14px 6px 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 12px rgba(234, 179, 8, 0.2);
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.goku-dark-toggle-floating:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: #f5dc32;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(245, 220, 50, 0.35);
}

.goku-toggle-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eab308;
  color: #0b0f19;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.goku-toggle-circle svg {
  width: 17px;
  height: 17px;
}

.goku-toggle-label {
  font-family: 'Roboto', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Active State when Dark Mode is ON */
[data-theme="dark"] .goku-dark-toggle-floating {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(245, 220, 50, 0.6);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6), 0 0 16px rgba(245, 220, 50, 0.3);
}

[data-theme="dark"] .goku-toggle-circle {
  background: #f5dc32;
  color: #070a11;
  transform: rotate(360deg);
  box-shadow: 0 0 12px rgba(245, 220, 50, 0.6);
}

/* Responsive adjustment for Mobile screens */
@media (max-width: 768px) {
  .goku-dark-toggle-floating {
    bottom: 74px; /* Above the mobile bottom navigation bar */
    left: 14px;
    padding: 5px;
    gap: 0;
  }
  .goku-toggle-label {
    display: none; /* Icon-only on mobile for minimal footprint */
  }
  .goku-toggle-circle {
    width: 36px;
    height: 36px;
  }
}