/* Light mode uses the shared premium palette from site-preferences.css. */
html[data-theme="light"] body {
    background:
        radial-gradient(circle at 78% 2%, rgba(121, 88, 210, .09), transparent 30%),
        var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

html[data-theme="light"] .top {
    border-color: var(--border) !important;
    background: rgba(243, 241, 245, .94) !important;
    box-shadow: 0 8px 24px rgba(55, 45, 76, .08);
}

html[data-theme="light"] .brand,
html[data-theme="light"] .footer b,
html[data-theme="light"] .top nav a.active,
html[data-theme="light"] .top .register,
html[data-theme="light"] .store-name h1,
html[data-theme="light"] .products-head h2,
html[data-theme="light"] .product-body h3,
html[data-theme="light"] .product footer b {
    color: var(--text-primary) !important;
}

html[data-theme="light"] .brand span,
html[data-theme="light"] .footer b span,
html[data-theme="light"] .product footer em,
html[data-theme="light"] .product-body p,
html[data-theme="light"] .announcement b,
html[data-theme="light"] .announcement a {
    color: var(--accent) !important;
}

html[data-theme="light"] .top nav a,
html[data-theme="light"] .top > div > a,
html[data-theme="light"] .store-name p,
html[data-theme="light"] .products-head label,
html[data-theme="light"] .aside-title,
html[data-theme="light"] .products-head p,
html[data-theme="light"] .product-body small,
html[data-theme="light"] .footer {
    color: var(--text-secondary) !important;
}

html[data-theme="light"] .store-profile {
    border-color: var(--border) !important;
    background:
        radial-gradient(circle at 18% 0, rgba(121, 88, 210, .10), transparent 30%),
        var(--surface) !important;
}

html[data-theme="light"] .announcement {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border)) !important;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface)) !important;
    color: #55466f !important;
}

html[data-theme="light"] .shop-layout aside button,
html[data-theme="light"] .shop-layout aside a {
    color: var(--text-secondary) !important;
}

html[data-theme="light"] .shop-layout aside button:hover,
html[data-theme="light"] .shop-layout aside a:hover,
html[data-theme="light"] .shop-layout aside button.selected {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border)) !important;
    background: var(--surface-muted) !important;
    color: var(--text-primary) !important;
}

html[data-theme="light"] .shop-layout aside button.selected b {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

html[data-theme="light"] .shop-layout aside hr,
html[data-theme="light"] .product footer {
    border-color: var(--border) !important;
}

html[data-theme="light"] .product {
    border-color: var(--border) !important;
    background: var(--surface-elevated) !important;
    box-shadow: 0 6px 18px rgba(55, 45, 76, .07) !important;
}

html[data-theme="light"] .product:hover {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--border)) !important;
    box-shadow: 0 15px 30px rgba(55, 45, 76, .13) !important;
}

html[data-theme="light"] .products-head select {
    border-color: var(--border) !important;
    background: var(--surface) !important;
    color: var(--text-primary) !important;
}

html[data-theme="light"] .reviews {
    border-color: var(--border) !important;
    background: var(--bg-secondary) !important;
}

html[data-theme="light"] .reviews article {
    border-color: var(--border) !important;
    background: var(--surface) !important;
}

html[data-theme="light"] .reviews blockquote {
    color: #4f4b5b !important;
}

html[data-theme="light"] .footer {
    border-color: var(--border) !important;
    background: var(--surface) !important;
}