/* ═══════════════════════════════════════════════════════════════════════
   Stoling — Light ("day") theme overrides for the legacy shared chrome.
   Loaded AFTER site.css. Scoped to [data-theme='light'] so it only applies
   when the user's theme (stoling.theme, set by the head bootstrap + ui-kit
   ThemeProvider) resolves to light. The [data-theme='light'] prefix raises
   specificity above the base .as-* rules, so overrides win without !important.

   Scope (Phase 4a): the shared shell that appears on every page — top nav,
   footer, dropdowns, search, avatar, mobile menu — plus the core design
   tokens so variable-driven content flips too. Deep legacy page bodies
   (Shop/Feed/Profile) get their full light theme in the upcoming
   React + ui-kit rewrite; this keeps the chrome consistent meanwhile.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Core tokens: flip everything variable-driven to the light palette ── */
[data-theme='light'] {
    --bg: #f7f5fb;
    --surface: #ffffff;
    --text: #1a1530;
    --muted: #6b7280;
    --border: rgba(17, 12, 46, 0.10);
    --shadow: 0 2px 8px rgba(17, 12, 46, .06), 0 4px 16px rgba(17, 12, 46, .05);

    --homepage-bg-start: #f7f5fb;
    --homepage-bg-end: #efe9fb;

    --card-bg: #ffffff;
    --card-border: rgba(124, 58, 237, 0.16);
    --card-border-hover: rgba(124, 58, 237, 0.4);
    --card-shadow: 0 18px 50px rgba(17, 12, 46, 0.10);
    --card-shadow-hover: 0 24px 60px rgba(17, 12, 46, 0.14);

    --text-primary: #1a1530;
    --text-secondary: #4b4667;
    --text-muted: #6b7280;
}

/* ── Page backgrounds ── */
[data-theme='light'] body {
    background: var(--bg);
    color: var(--text);
}
[data-theme='light'] .page-home {
    background: #f7f5fb;
}

/* ── Top navigation ── */
[data-theme='light'] .as-nav {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.78));
    border-color: rgba(124, 58, 237, 0.14);
    box-shadow: 0 6px 24px rgba(17, 12, 46, 0.08);
}
[data-theme='light'] .as-nav.is-scrolled {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9));
    border-color: rgba(124, 58, 237, 0.2);
}
[data-theme='light'] .as-nav-link {
    color: rgba(26, 21, 48, 0.72);
}
[data-theme='light'] .as-nav-link:hover {
    color: #1a1530;
    background: rgba(124, 58, 237, 0.08);
    text-shadow: none;
}
[data-theme='light'] .as-nav-link.is-active {
    color: #4c1d95;
    background: rgba(124, 58, 237, 0.12);
}
[data-theme='light'] .as-nav-link.is-active .as-nav-ico {
    color: #7c3aed;
}
[data-theme='light'] .as-nav-ico-only:hover {
    background: rgba(124, 58, 237, 0.10);
}
[data-theme='light'] .as-nav-divider {
    background: rgba(17, 12, 46, 0.12);
}

/* ── Search ── */
[data-theme='light'] .as-search-input {
    background: rgba(17, 12, 46, 0.04);
    border-color: rgba(17, 12, 46, 0.10);
    color: #1a1530;
}
[data-theme='light'] .as-search-input:focus {
    background: #ffffff;
    border-color: rgba(124, 58, 237, 0.5);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
[data-theme='light'] .as-search-input::placeholder {
    color: rgba(26, 21, 48, 0.45);
}
[data-theme='light'] .as-search-clear {
    background: rgba(17, 12, 46, 0.08);
    color: rgba(26, 21, 48, 0.6);
}
[data-theme='light'] .as-search-clear:hover {
    background: rgba(17, 12, 46, 0.14);
    color: #1a1530;
}
[data-theme='light'] .as-search-results {
    background: #ffffff;
    border-color: rgba(124, 58, 237, 0.18);
    box-shadow: 0 18px 50px rgba(17, 12, 46, 0.14);
}
[data-theme='light'] .as-search-item-link:hover,
[data-theme='light'] .as-search-item-link.is-active {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(99, 102, 241, 0.06));
    border-color: rgba(124, 58, 237, 0.28);
    color: #1a1530;
}

/* ── Dropdowns (notif / avatar / lang) ── */
[data-theme='light'] .as-dropdown,
[data-theme='light'] .as-avatar-dropdown {
    background: #ffffff;
    border-color: rgba(124, 58, 237, 0.18);
    box-shadow: 0 18px 50px rgba(17, 12, 46, 0.16);
    color: #1a1530;
}
[data-theme='light'] .as-dropdown-item {
    color: #1a1530;
}
[data-theme='light'] .as-dropdown-item:hover {
    background: rgba(124, 58, 237, 0.10);
    color: #4c1d95;
}
[data-theme='light'] .as-dropdown-divider {
    background: rgba(17, 12, 46, 0.08);
}
[data-theme='light'] .as-notif-item:hover {
    background: rgba(124, 58, 237, 0.08);
}

/* ── Avatar button ── */
[data-theme='light'] .as-avatar-btn {
    background: rgba(17, 12, 46, 0.04);
    border-color: rgba(17, 12, 46, 0.10);
}
[data-theme='light'] .as-avatar-btn:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.35);
}

/* ── Language switch ── */
[data-theme='light'] .as-dropdown-lang,
[data-theme='light'] .as-lang-switch {
    background: rgba(124, 58, 237, 0.06);
    border-color: rgba(124, 58, 237, 0.16);
}
[data-theme='light'] .as-lang-btn:hover {
    color: #1a1530;
    background: rgba(124, 58, 237, 0.10);
}

/* ── Mobile menu panel ── */
[data-theme='light'] .as-nav-links {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(17, 12, 46, 0.08);
}
[data-theme='light'] .as-burger span {
    background: #1a1530;
}

/* ── Footer ── */
[data-theme='light'] .as-footer {
    background: linear-gradient(145deg, #efe9fb, #f7f5fb);
    color: #4b4667;
    border-top: 1px solid rgba(17, 12, 46, 0.06);
}
[data-theme='light'] .as-footer-links a {
    color: #4b4667;
}
[data-theme='light'] .as-footer-links a:hover {
    color: #1a1530;
}
[data-theme='light'] .as-footer-copy {
    color: #8b86a0;
}