/* ============================================
   DARK-THEME.CSS — Theme sombre
   Catalogue Boutique v2.0
   ============================================ */

[data-theme="dark"] {
    /* Backgrounds */
    --bg: #0F172A;
    --bg-alt: #1E293B;
    --surface: #1E293B;
    --surface-hover: #334155;
    --surface-glass: rgba(30, 41, 59, 0.8);

    /* Text */
    --text: #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-muted: #64748B;
    --text-inverse: #0F172A;

    /* Accent (brighter in dark) */
    --accent: #818CF8;
    --accent-light: #A5B4FC;
    --accent-dark: #6366F1;
    --accent-rgb: 129, 140, 248;
    --accent-glow: rgba(129, 140, 248, 0.25);

    /* Borders */
    --border: #334155;
    --border-light: #1E293B;
    --divider: rgba(255, 255, 255, 0.06);

    /* Semantic */
    --success: #34D399;
    --warning: #FBBF24;
    --danger: #FB7185;
    --info: #22D3EE;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px rgba(129, 140, 248, 0.2);

    /* Navbar & Footer */
    --navbar-bg: rgba(30, 41, 59, 0.8);
    --navbar-text: #F1F5F9;
    --footer-bg: #020617;
    --footer-text: #94A3B8;

    /* Buttons */
    --btn-color: #818CF8;
    --btn-text: #FFFFFF;

    /* Price */
    --price-color: var(--accent);

    /* Hero & Promo */
    --hero-start: #4338CA;
    --hero-end: #312E81;
    --hero-text: #FFFFFF;
    --promo-color: #FB7185;
    --promo-bg: #1C1917;
    --promo-text: #FFFFFF;
}

/* ---------- Body ---------- */
[data-theme="dark"] body {
    background: var(--bg);
    color: var(--text);
}

/* ---------- Navbar ---------- */
[data-theme="dark"] .navbar {
    background: var(--surface-glass);
    border-bottom-color: var(--divider);
}

[data-theme="dark"] .navbar.scrolled {
    box-shadow: var(--shadow-sm);
}

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

[data-theme="dark"] .navbar-brand-text {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    -webkit-background-clip: text;
    background-clip: text;
}

/* Bottom nav dark */
[data-theme="dark"] .bottom-nav {
    background: rgba(15, 23, 42, 0.85);
    border-top-color: var(--divider);
    box-shadow: 0 -4px 30px rgba(0,0,0,0.15);
}

[data-theme="dark"] .bottom-nav-item.active::before {
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
}

/* ---------- Buttons ---------- */
[data-theme="dark"] .btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .btn-secondary:hover {
    border-color: var(--btn-color);
    color: var(--btn-color);
}

[data-theme="dark"] .btn-ghost:hover {
    background: var(--bg-alt);
}

/* ---------- Cards ---------- */
[data-theme="dark"] .card {
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .product-card {
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

[data-theme="dark"] .product-card-image {
    background: var(--bg);
}

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

/* ---------- Badges ---------- */
[data-theme="dark"] .badge-unavailable {
    background: rgba(100, 116, 139, 0.8);
}

/* ---------- Favorite button ---------- */
[data-theme="dark"] .btn-favorite {
    background: rgba(30, 41, 59, 0.85);
    color: var(--text-muted);
}

[data-theme="dark"] .btn-favorite.active {
    color: var(--danger);
    background: rgba(30, 41, 59, 0.95);
}

/* ---------- Product prices ---------- */
[data-theme="dark"] .price {
    color: var(--price-color);
}

[data-theme="dark"] .price-lg {
    color: var(--price-color);
}

[data-theme="dark"] .price-savings {
    background: rgba(251, 113, 133, 0.12);
    color: var(--danger);
}

/* ---------- Variant items ---------- */
[data-theme="dark"] .variant-item {
    background: var(--bg);
    border-color: var(--border);
}

/* ---------- Categories ---------- */
[data-theme="dark"] .category-tile-overlay {
    background: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, transparent 60%);
}

[data-theme="dark"] .subcategory-chip {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .subcategory-chip:hover,
[data-theme="dark"] .subcategory-chip.active {
    background: var(--btn-color);
    color: #FFFFFF;
    border-color: var(--btn-color);
}

/* ---------- Catalog filters ---------- */
[data-theme="dark"] .catalog-filters {
    background: var(--surface);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .filters-header {
    background: var(--surface);
}

[data-theme="dark"] .filter-group input,
[data-theme="dark"] .filter-group select {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .filter-toggle {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .catalog-sort select {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .filters-actions {
    background: var(--surface);
}

/* ---------- Pagination ---------- */
[data-theme="dark"] .pagination-link {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .pagination-link:hover {
    border-color: var(--btn-color);
    color: var(--btn-color);
}

[data-theme="dark"] .pagination-link.active {
    background: var(--btn-color);
    color: #FFFFFF;
    border-color: var(--btn-color);
}

/* ---------- Product detail ---------- */
[data-theme="dark"] .product-main-image {
    background: var(--bg);
}

[data-theme="dark"] .gallery-thumb {
    border-color: transparent;
}

[data-theme="dark"] .gallery-thumb.active {
    border-color: var(--accent);
}

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

/* ---------- Tags ---------- */
[data-theme="dark"] .tag-link {
    background: var(--bg);
    color: var(--text-secondary);
}

[data-theme="dark"] .tag-link:hover {
    background: rgba(129, 140, 248, 0.12);
    color: var(--accent);
}

/* ---------- Reviews ---------- */
[data-theme="dark"] .review-form {
    background: var(--bg);
}

[data-theme="dark"] .review-form textarea,
[data-theme="dark"] .review-form input[type="text"] {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .review-item {
    border-bottom-color: var(--border);
}

/* ---------- Flash messages ---------- */
[data-theme="dark"] .flash-toast {
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

/* ---------- Login page ---------- */
[data-theme="dark"] .login-card,
[data-theme="dark"] .login-box {
    background: var(--surface);
}

[data-theme="dark"] .login-body .input-wrapper input,
[data-theme="dark"] .input-icon input {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .login-page-body {
    background: var(--bg);
}

[data-theme="dark"] .login-footer {
    border-top-color: var(--border);
}

[data-theme="dark"] .login-error {
    background: rgba(251, 113, 133, 0.12);
    color: var(--danger);
}

/* ---------- Footer ---------- */
[data-theme="dark"] .site-footer {
    background: var(--footer-bg);
    color: var(--footer-text);
}

/* ---------- Footer wave ---------- */
[data-theme="dark"] .footer-wave svg path {
    fill: var(--footer-bg);
}

/* ---------- Hero wave ---------- */
[data-theme="dark"] .hero-wave svg path {
    fill: var(--bg);
}

/* ---------- USP items ---------- */
[data-theme="dark"] .usp-item {
    background: var(--surface);
    border: 1px solid var(--border);
}

[data-theme="dark"] .usp-icon {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}

/* ---------- Product card border ---------- */
[data-theme="dark"] .product-card {
    border-color: var(--border);
}

/* Product card image overlay - darker for dark theme */
[data-theme="dark"] .product-card-image::after {
    background: linear-gradient(to top, rgba(0,0,0,0.12), transparent);
}

/* ---------- CTA card ---------- */
[data-theme="dark"] .cta-card {
    background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

[data-theme="dark"] .cta-card .btn {
    background: rgba(255,255,255,0.95);
    color: var(--hero-end);
}

/* ---------- Hero badge ---------- */
[data-theme="dark"] .hero-badge {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ---------- Hero pattern ---------- */
[data-theme="dark"] .hero-pattern {
    opacity: 0.02;
}

/* ---------- Breadcrumb ---------- */
[data-theme="dark"] .breadcrumb a {
    color: var(--text-muted);
}

[data-theme="dark"] .breadcrumb-current {
    color: var(--text);
}

/* ---------- Empty state ---------- */
[data-theme="dark"] .empty-state h3 {
    color: var(--text);
}

/* ---------- Product availability ---------- */
[data-theme="dark"] .availability-in-stock,
[data-theme="dark"] .product-availability.available {
    background: rgba(52, 211, 153, 0.12);
    color: var(--success);
}

[data-theme="dark"] .availability-out-of-stock,
[data-theme="dark"] .product-availability.unavailable {
    background: rgba(251, 113, 133, 0.12);
    color: var(--danger);
}

/* ---------- Promo banner ---------- */
[data-theme="dark"] .promo-banner {
    background: var(--promo-color);
    background: linear-gradient(135deg, var(--promo-color), color-mix(in srgb, var(--promo-color), #000 30%));
}

[data-theme="dark"] .promo-card {
    background: var(--surface);
}

[data-theme="dark"] .promo-card-info h2 { color: var(--text); }
[data-theme="dark"] .promo-card-info p { color: var(--text-secondary); }

/* ---------- Category banner ---------- */
[data-theme="dark"] .category-banner-overlay {
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 100%);
}

/* ---------- Product detail overrides ---------- */
[data-theme="dark"] .product-info-category { color: var(--text-secondary); }
[data-theme="dark"] .gallery-main { background: var(--bg); }
[data-theme="dark"] .gallery-placeholder { background: var(--bg); }
[data-theme="dark"] .product-card-placeholder { background: var(--bg); }

/* ---------- Star rating ---------- */
[data-theme="dark"] .star-btn { color: #4B5563; }
[data-theme="dark"] .star-btn.active,
[data-theme="dark"] .star-btn:hover { color: #F59E0B; }

/* ---------- Theme toggle float ---------- */
[data-theme="dark"] .theme-toggle-float {
    background: var(--surface);
    color: var(--text);
}

/* ---------- Social links ---------- */
[data-theme="dark"] .social-link {
    background: rgba(255, 255, 255, 0.06);
    color: #94A3B8;
}

[data-theme="dark"] .social-link:hover {
    background: var(--accent);
    color: #FFFFFF;
}

/* ---------- Scrollbar ---------- */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border);
}

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

/* ---------- Selection ---------- */
[data-theme="dark"] ::selection {
    background: rgba(129, 140, 248, 0.3);
    color: var(--text);
}

/* ---------- Focus visible ---------- */
[data-theme="dark"] :focus-visible {
    outline-color: var(--accent);
}