/**
 * Light Mode
 *
 * Palette claire — activée par la classe .light sur <html>.
 * Override les variables sombres par défaut.
 *
 * @package Bipauto
 * @since   1.0.0
 */

html.light {
    --bg:               var(--lm-bg);
    --surface-1:        var(--lm-surface-1);
    --surface-2:        var(--lm-surface-2);
    --surface-3:        var(--lm-surface-3);
    --border:           var(--lm-border);
    --border-hover:     var(--lm-border-hover);
    --text:             var(--lm-text);
    --text-secondary:   var(--lm-text-secondary);
    --text-muted:       var(--lm-text-muted);
    --overlay:          var(--lm-overlay);

    color-scheme: light;
}

html.light body {
    background-color: var(--lm-bg);
    color: var(--lm-text);
}

/* ── Header light mode ───────────────────────────────────── */
html.light .site-header {
    background: rgba(245, 245, 245, 0.85);
    border-bottom-color: var(--lm-border);
}

html.light .site-header.scrolled {
    background: rgba(245, 245, 245, 0.95);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/* ── Hamburger lines in light mode ───────────────────────── */
html.light .hamburger-line {
    background: var(--lm-text);
}

/* ── Shadows reduced in light mode ───────────────────────── */
html.light {
    --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg:        0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-card:      0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-header:    0 2px 20px rgba(0, 0, 0, 0.06);
}

/* ── Green glow reduced in light mode ────────────────────── */
html.light {
    --glow-sm:          0 0 6px rgba(8, 159, 0, 0.15);
    --glow-md:          0 0 16px rgba(8, 159, 0, 0.18);
    --glow-lg:          0 0 30px rgba(8, 159, 0, 0.12);
    --glow-border:      0 0 4px rgba(8, 159, 0, 0.25);
}

/* ── Product card hover in light mode ────────────────────── */
html.light .product-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), var(--glow-md);
}

/* ── Feature card hover ──────────────────────────────────── */
html.light .feature-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), var(--glow-sm);
}

/* ── Wholesale card ──────────────────────────────────────── */
html.light .glow-orb--1 {
    background: rgba(8, 159, 0, 0.06);
}

html.light .glow-orb--2 {
    background: rgba(110, 220, 74, 0.04);
}

/* ── Mobile menu in light mode ───────────────────────────── */
html.light .mobile-menu-inner {
    background: var(--lm-surface-1);
}

html.light .mobile-menu-close:hover {
    background: rgba(0, 0, 0, 0.04);
}

html.light .mobile-nav-list li a:hover {
    background: rgba(8, 159, 0, 0.04);
}

/* ── Dropdown in light mode ──────────────────────────────── */
html.light .lang-dropdown {
    background: var(--lm-surface-1);
    border-color: var(--lm-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* ── Select fields in light mode ─────────────────────────── */
html.light .search-field select {
    background-color: var(--lm-surface-1);
    border-color: var(--lm-border);
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%23888888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ── Scrollbar for light mode ────────────────────────────── */
html.light {
    scrollbar-color: var(--lm-border-hover) var(--lm-bg);
}

html.light ::-webkit-scrollbar-track {
    background: var(--lm-bg);
}

html.light ::-webkit-scrollbar-thumb {
    background: var(--lm-border-hover);
}

html.light ::-webkit-scrollbar-thumb:hover {
    background: var(--lm-text-muted);
}

/* ── Error 404 code in light mode ────────────────────────── */
html.light .error-code {
    opacity: 0.15;
}