/* ═══════════════════════════════════════════════════════════════════
   theme-light.css — светлая тема витрины.
   Активируется через <html data-theme="light">.
   ═══════════════════════════════════════════════════════════════════ */

:root[data-theme="light"] {
    color-scheme: light;

    /* ─── Основа ─── */
    --bg-body:    #F7F3EE;
    --bg-surface: #FFFFFF;
    --bg-input:   #EFE9E1;
    --text-main:  #1F1B18;
    --text-muted: #6E655E;
    --border:     #E3D9CE;

    /* ─── Шапка / оверлеи ─── */
    --header-bg: rgba(247, 243, 238, 0.92);
    --overlay-filter-bg: rgba(31, 27, 24, 0.45);
    --overlay-cart-bg: rgba(31, 27, 24, 0.45);
    --overlay-menu-bg: rgba(31, 27, 24, 0.45);
    --overlay-modal-bg: rgba(31, 27, 24, 0.45);
    --modal-backdrop: rgba(31, 27, 24, 0.85);
    --cookie-bg: rgba(255, 255, 255, 0.97);
    --hero-glass: rgba(255, 255, 255, 0.7);
    --btn-overlay-bg: rgba(0, 0, 0, 0.3);
    --btn-overlay-bg-hover: rgba(0, 0, 0, 0.5);

    /* ─── Стекло ─── */
    --bg-surface-glass:        rgba(255, 255, 255, 0.88);
    --bg-surface-glass-strong: rgba(255, 255, 255, 0.97);

    /* ─── Тени ─── */
    --shadow-color: rgba(31, 27, 24, 0.08);
    --shadow-strong: rgba(31, 27, 24, 0.18);
    --shadow-soft: rgba(31, 27, 24, 0.06);
    --shadow-card: 0 10px 30px rgba(31, 27, 24, 0.08);
    --shadow-catalog-desktop: 0 10px 30px rgba(31, 27, 24, 0.08);
    --shadow-catalog-mobile: 0 -10px 40px rgba(31, 27, 24, 0.18);

    /* ─── Skeleton / плейсхолдеры ─── */
    --skeleton-base: rgba(0, 0, 0, 0.03);
    --skeleton-highlight: rgba(0, 0, 0, 0.08);
    --placeholder-color: #999;

    /* ─── Элементы ─── */
    --tag-bg: rgba(0, 0, 0, 0.05);
    --tag-bg-hover: rgba(0, 0, 0, 0.08);
    --thumb-bg: #EFE9E1;
    --button-hover-lighten: rgba(0, 0, 0, 0.04);

    /* --accent, --accent-hover, --accent-rgb, --accent-hover-rgb
       остаются от applyPersonalization() (settings.persAccentColor). */
}

/* ─── Шапка ─── */
:root[data-theme="light"] header {
    background: var(--header-bg);
    border-bottom-color: var(--border);
}

/* ─── Логотип при hover ─── */
:root[data-theme="light"] .logo:hover .logo-main {
    color: var(--accent);
}
:root[data-theme="light"] .logo:hover .logo-slogan {
    color: var(--text-main);
}

/* ─── Skeleton ─── */
:root[data-theme="light"] .skeleton-bg {
    background-color: var(--skeleton-base);
    animation-name: skeleton-pulse;
}

:root[data-theme="light"] .skeleton-block,
:root[data-theme="light"] .skeleton-line {
    background: linear-gradient(90deg,
        var(--skeleton-base),
        var(--skeleton-highlight),
        var(--skeleton-base));
    background-size: 200% 100%;
}

/* ─── Тени — через переменные ─── */
:root[data-theme="light"] .cart-panel {
    box-shadow: -10px 0 30px var(--shadow-color);
}
:root[data-theme="light"] .quick-add-btn {
    box-shadow: 0 4px 14px var(--shadow-soft);
}
:root[data-theme="light"] .hero-image-slider {
    box-shadow: 0 30px 60px var(--shadow-strong);
}
:root[data-theme="light"] .cookie-banner {
    box-shadow: 0 20px 60px var(--shadow-strong);
}
:root[data-theme="light"] .product-card:hover .product-img-wrapper {
    box-shadow: 0 12px 30px var(--shadow-color);
}

/* ─── Мобильное меню ─── */
:root[data-theme="light"] .mobile-menu {
    box-shadow: 6px 0 40px var(--shadow-strong);
}

/* ─── Search suggestions ─── */
:root[data-theme="light"] .search-suggestions {
    box-shadow: 0 12px 40px var(--shadow-color);
}