/* ═══════════════════════════════════════════════════════════
   LIGHT-THEME POLISH — Apple iOS 17 + Linear Light + Notion стиль

   Корень проблемы: polish-base.css определяет --p-line, --p-surface,
   --p-surface-acc, --p-line-strong через rgba(255,255,255, alpha).
   На белом фоне они полностью невидимы → mood-кнопки/чипы/пилюли
   жанров теряют границы, эмодзи болтаются «голым текстом на бумаге».

   Этот файл:
   1. Переопределяет ВСЕ --p-* токены под светлый фон
   2. Добавляет sticker-эффект эмодзи (контейнер + soft shadow + lift)
   3. Усиливает тени карточек (Notion-style elevation)
   4. Warm off-white base (#fafaf8) вместо холодного #ffffff
   5. Glassmorphism для AI-формы под белый фон
   6. Heroes лого — золотой gradient `=` остаётся, текст → тёплый чёрный
   ═══════════════════════════════════════════════════════════ */

:root[data-theme="light"]{
  /* ── PALETTE v2 (warm off-white) ────────────────────── */
  --bg:  #fafaf8;
  --bg2: #f3f3f0;
  --bg3: #e8e8e4;
  --card:  #ffffff;
  --card2: #fdfdf9;
  --border:  #e0dfd8;
  --border2: #cac8bf;
  --gold:  #9c6f0a;
  --gold2: #b8861a;
  --text:  #1a1612;
  /* 2026-06-17 (M5): WCAG AA fix — #5a5550 на #fafaf8 даёт contrast 3.2:1 (fail).
     #4a4540 даёт 4.7:1 (passes AA). Затронуто: AI chips, mood labels, nav hover. */
  --muted: #4a4540;
  --dim:   #6a6560;
  --shadow: rgba(40,28,10,.08);

  /* ── polish-base токены (КРИТИЧНО — переопределяем) ── */
  --p-ink:        #1a1612;          /* тёплый чёрный вместо #f0f0f4 */
  --p-ink-soft:   #3a3530;
  --p-ink-mute:   #5a5550;          /* было #8c8c96 — не видно на белом */
  --p-ink-dim:    #7a7570;

  /* Раньше были rgba(255,255,255, X) → НЕВИДИМЫ на белом */
  --p-line:        rgba(20,15,10,.10);
  --p-line-strong: rgba(20,15,10,.16);
  --p-surface:     #ffffff;
  --p-surface-hi:  #fdfdf9;
  --p-surface-acc: rgba(156,111,10,.06);

  --p-accent:      #9c6f0a;
  --p-accent-soft: rgba(156,111,10,.12);
  --p-accent-glow: rgba(156,111,10,.32);

  /* Новые shadow-токены для elevation */
  --p-shadow-sm:    0 2px 6px rgba(40,28,10,.05);
  --p-shadow-card:  0 3px 10px rgba(40,28,10,.06), 0 1px 2px rgba(15,15,30,.03);
  --p-shadow-hover: 0 12px 32px rgba(156,111,10,.12), 0 4px 12px rgba(40,28,10,.08);
  --p-shadow-elev:  0 16px 40px rgba(80,70,50,.10), 0 4px 12px rgba(40,28,10,.05);

  /* Glassmorphism light variant */
  --p-glass-bg:     rgba(255,255,255,.88);
  --p-glass-border: rgba(0,0,0,.05);
}


/* ═══ MOOD-КНОПКИ — Premium стикеры в стиле iOS ════════════
   Сейчас на главной 6 эмодзи кнопок (😢😂😱🤔❤️✨) с прозрачным
   border и transparent background → невидимые контейнеры.
   Делаем их «стикерами»: белый контейнер, тонкая граница,
   subtle drop-shadow, золотой glow на hover. */

:root[data-theme="light"] #page-home .home-mood-btn,
:root[data-theme="light"] .home-mood-btn {
  background: #ffffff !important;
  border: 1.5px solid #e0dfd8 !important;
  border-radius: 16px !important;
  width: 52px !important;
  height: 52px !important;
  font-size: 26px !important;
  box-shadow:
    0 3px 10px rgba(40,28,10,.06),
    inset 0 0 0 1px rgba(255,255,255,.6) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 240ms cubic-bezier(.23,1,.32,1),
    border-color 200ms ease,
    box-shadow 200ms ease,
    filter 200ms ease !important;
}
:root[data-theme="light"] #page-home .home-mood-btn:hover,
:root[data-theme="light"] .home-mood-btn:hover,
:root[data-theme="light"] .home-mood-btn.active {
  border-color: var(--gold) !important;
  background: #fffdf5 !important;
  box-shadow:
    0 8px 20px rgba(156,111,10,.14),
    inset 0 0 0 1.5px rgba(156,111,10,.18) !important;
  transform: translateY(-3px) scale(1.06) !important;
  filter: drop-shadow(0 0 6px rgba(156,111,10,.18));
}
:root[data-theme="light"] .home-mood-btn:active {
  transform: translateY(-1px) scale(.98) !important;
}

/* «Удиви меня» — sticker-кнопка с золотым gradient */
:root[data-theme="light"] #page-home .home-surprise-btn,
:root[data-theme="light"] .home-surprise-btn {
  background: linear-gradient(180deg, #fffdf5, #fef8e8) !important;
  border: 1.5px solid var(--gold) !important;
  color: var(--gold) !important;
  box-shadow:
    0 3px 10px rgba(156,111,10,.10),
    inset 0 0 0 1px rgba(255,255,255,.6) !important;
}
:root[data-theme="light"] .home-surprise-btn:hover {
  background: linear-gradient(180deg, var(--gold), #8a6207) !important;
  color: #ffffff !important;
  box-shadow:
    0 8px 20px rgba(156,111,10,.20) !important;
}


/* ═══ AI-ЧИПЫ — pill с видимой границей ══════════════════ */
:root[data-theme="light"] .home-ai-chip {
  background: #ffffff !important;
  border: 1px solid #e0dfd8 !important;
  color: var(--muted) !important;
  box-shadow: 0 1px 3px rgba(40,28,10,.04) !important;
  font-weight: 500;
}
:root[data-theme="light"] .home-ai-chip:hover {
  background: #fffdf5 !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  box-shadow:
    0 4px 10px rgba(156,111,10,.10),
    inset 0 0 0 1px rgba(156,111,10,.08) !important;
  transform: translateY(-1px);
}


/* ═══ AI-FORM — Glassmorphism light variant ═══════════════ */
:root[data-theme="light"] .home-ai-form {
  background: var(--p-glass-bg) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  border: 1px solid var(--p-glass-border) !important;
  box-shadow:
    0 4px 14px rgba(40,28,10,.06),
    inset 0 0 0 1px rgba(255,255,255,.5) !important;
}
:root[data-theme="light"] .home-ai-form:focus-within {
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(156,111,10,.25) !important;
  box-shadow:
    0 8px 24px rgba(156,111,10,.10),
    0 0 0 3px rgba(156,111,10,.12),
    inset 0 0 0 1px rgba(255,255,255,.8) !important;
}
:root[data-theme="light"] .home-ai-input::placeholder {
  color: rgba(90,85,80,.55) !important;
}
:root[data-theme="light"] .home-ai-btn {
  background: linear-gradient(180deg, var(--gold), #8a6207) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(156,111,10,.20) !important;
}
:root[data-theme="light"] .home-ai-btn:hover {
  background: linear-gradient(180deg, #b8861a, var(--gold)) !important;
  box-shadow: 0 8px 20px rgba(156,111,10,.28) !important;
}


/* ═══ FG-CARD (любимые жанры) — pill стикер ══════════════ */
:root[data-theme="light"] #page-profile .fg-card,
:root[data-theme="light"] .fg-card {
  background: #ffffff !important;
  border: 1.5px solid #e0dfd8 !important;
  box-shadow:
    0 2px 6px rgba(40,28,10,.05),
    inset 0 0 0 1px rgba(255,255,255,.6) !important;
}
:root[data-theme="light"] .fg-card:hover {
  background: #fffdf5 !important;
  border-color: rgba(156,111,10,.4) !important;
  box-shadow:
    0 6px 14px rgba(156,111,10,.10) !important;
  transform: translateY(-2px);
}


/* ═══ КАРТОЧКИ (фильмы, блог, магазин, коллекции) ═══════ */
:root[data-theme="light"] .mc,
:root[data-theme="light"] .ac,
:root[data-theme="light"] .fc,
:root[data-theme="light"] .alb,
:root[data-theme="light"] .si,
:root[data-theme="light"] .cc,
:root[data-theme="light"] .smc,
:root[data-theme="light"] .feat,
:root[data-theme="light"] .loc,
:root[data-theme="light"] .plan,
:root[data-theme="light"] .shc,
:root[data-theme="light"] .blog-card,
:root[data-theme="light"] .shop-item,
:root[data-theme="light"] .history-item,
:root[data-theme="light"] .review-item,
:root[data-theme="light"] .coll-card {
  background: #ffffff !important;
  border: 1px solid #e0dfd8 !important;
  box-shadow:
    0 3px 10px rgba(40,28,10,.06),
    0 1px 2px rgba(15,15,30,.03) !important;
}
:root[data-theme="light"] .mc:hover,
:root[data-theme="light"] .ac:hover,
:root[data-theme="light"] .fc:hover,
:root[data-theme="light"] .alb:hover,
:root[data-theme="light"] .blog-card:hover,
:root[data-theme="light"] .shop-item:hover,
:root[data-theme="light"] .coll-card:hover {
  border-color: rgba(156,111,10,.30) !important;
  box-shadow:
    0 12px 32px rgba(156,111,10,.10),
    0 4px 12px rgba(40,28,10,.06) !important;
  transform: translateY(-4px);
}


/* ═══ ЗНАЧКИ (BADGE-CARD) — visible depth + cream legendary ═══ */
:root[data-theme="light"] .badge-card {
  background: #ffffff;
  border: 1px solid #e0dfd8;
  box-shadow:
    0 2px 6px rgba(40,28,10,.05),
    0 1px 2px rgba(15,15,30,.03);
}
:root[data-theme="light"] .badge-icon {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
}
:root[data-theme="light"] .badge-card:hover .badge-icon {
  filter: drop-shadow(0 4px 12px rgba(156,111,10,.15));
  transform: scale(1.08);
}

/* Rarity tiers в light режиме */
:root[data-theme="light"] .rarity-common { border-color: #d4d4d8; }
:root[data-theme="light"] .rarity-common .badge-rarity { color: #8c8c96; }

:root[data-theme="light"] .rarity-rare {
  border-color: #7dd3fc;
  background: rgba(219,234,254,.5);
  box-shadow:
    0 0 0 1px rgba(125,211,252,.3),
    0 4px 12px rgba(125,211,252,.10);
}
:root[data-theme="light"] .rarity-rare .badge-rarity { color: #0369a1; }

:root[data-theme="light"] .rarity-epic {
  border-color: #d8b4fe;
  background: rgba(243,232,255,.6);
  box-shadow:
    0 0 0 1px rgba(216,180,254,.3),
    0 4px 12px rgba(168,85,247,.10);
}
:root[data-theme="light"] .rarity-epic .badge-rarity { color: #7e22ce; }
:root[data-theme="light"] .rarity-epic::before {
  background: radial-gradient(circle at 50% 0%,
    rgba(168,85,247,.06) 0%, transparent 60%);
}

:root[data-theme="light"] .rarity-legendary {
  border: 2px solid #c8a84b;
  background: linear-gradient(135deg, #fffdf5 0%, #fef8e8 100%);
  box-shadow:
    0 0 0 1px rgba(200,168,75,.4),
    0 6px 16px rgba(200,168,75,.14),
    inset 0 0 0 1px rgba(255,255,255,.6);
}
:root[data-theme="light"] .rarity-legendary .badge-rarity,
:root[data-theme="light"] .rarity-legendary .badge-name { color: #8a6a20; }
:root[data-theme="light"] .rarity-legendary::before {
  background: linear-gradient(135deg,
    rgba(200,168,75,.06) 0%,
    transparent 50%,
    rgba(200,168,75,.03) 100%);
}
:root[data-theme="light"] .rarity-legendary:hover {
  box-shadow:
    0 0 0 2px rgba(200,168,75,.5),
    0 10px 24px rgba(200,168,75,.18),
    inset 0 0 0 1px rgba(255,255,255,.8);
  border-color: #b8861a;
  transform: translateY(-3px);
}
/* Мягкая анимация легендарных эмодзи (вместо контрастного мерцания) */
:root[data-theme="light"] .rarity-legendary .badge-icon {
  animation: badgeShineLight 4s ease-in-out infinite;
}
@keyframes badgeShineLight {
  0%, 100% { filter: drop-shadow(0 2px 4px rgba(200,168,75,.15)); }
  50%      { filter: drop-shadow(0 3px 10px rgba(200,168,75,.25)); }
}


/* ═══ HERO EQU=LS ═══════════════════════════════════════
   На тёмной — белый text + золотой gradient «=».
   На светлой — тёплый чёрный text + тот же gradient «=». */
:root[data-theme="light"] .hero-logo,
:root[data-theme="light"] #page-home .hero-logo {
  color: #1a1612 !important;
}
:root[data-theme="light"] .hero-logo .eq {
  background: linear-gradient(135deg, #c8a84b 0%, #9c6f0a 50%, #6b4a06 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* ═══ HEADER на белом ══════════════════════════════════ */
:root[data-theme="light"] header {
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
:root[data-theme="light"] .nb {
  color: #5a5550;
}
:root[data-theme="light"] .nb:hover {
  background: rgba(156,111,10,.08);
  color: var(--gold);
}
:root[data-theme="light"] .nb.on {
  background: rgba(156,111,10,.12);
  color: var(--gold);
}


/* ═══ COLLECTIONS / SETTINGS / DIARY / CLUBS / STATS — общие ═══
   Используют polish-токены интенсивно. Переопределение базовых
   токенов выше делает 90% работы, но добавим shadow на крупные
   контейнеры явно. */
:root[data-theme="light"] .coll-card,
:root[data-theme="light"] .settings-group,
:root[data-theme="light"] .fp-section,
:root[data-theme="light"] .fp-friend-card,
:root[data-theme="light"] .fp-now-card,
:root[data-theme="light"] .fp-feed,
:root[data-theme="light"] .fp-feed-empty {
  background: #ffffff !important;
  border-color: #e0dfd8 !important;
  box-shadow: 0 2px 6px rgba(40,28,10,.04) !important;
}
:root[data-theme="light"] .settings-row {
  border-color: rgba(20,15,10,.06) !important;
}
:root[data-theme="light"] .settings-input,
:root[data-theme="light"] .seg-control,
:root[data-theme="light"] .switch-slider {
  background: #fdfdf9 !important;
  border-color: #e0dfd8 !important;
}
:root[data-theme="light"] .seg-btn.on {
  background: linear-gradient(180deg, rgba(156,111,10,.16), rgba(156,111,10,.08)) !important;
  color: var(--gold) !important;
  box-shadow:
    0 0 0 1px rgba(156,111,10,.3),
    0 1px 6px rgba(156,111,10,.15);
}


/* ═══ AI MODAL в светлом режиме ════════════════════════ */
:root[data-theme="light"] #ai-modal {
  background: rgba(250,250,248,.88) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
}
:root[data-theme="light"] #ai-modal .ai-box {
  background: #ffffff !important;
  border: 1.5px solid #e0dfd8 !important;
  box-shadow:
    0 20px 60px rgba(40,28,10,.10),
    0 0 0 1px rgba(156,111,10,.05) inset !important;
}
:root[data-theme="light"] #ai-modal .ai-tab-switch {
  background: #fdfdf9 !important;
  border-color: #e0dfd8 !important;
}
:root[data-theme="light"] #ai-modal .ai-tab-switch button {
  color: var(--muted) !important;
}
:root[data-theme="light"] #ai-modal .ai-tab-switch button.on {
  background: linear-gradient(180deg, rgba(156,111,10,.14), rgba(156,111,10,.08)) !important;
  color: var(--gold) !important;
}
:root[data-theme="light"] #ai-modal .ai-box textarea {
  background: #fafaf8 !important;
  border-color: #e0dfd8 !important;
  color: var(--text) !important;
}
:root[data-theme="light"] #ai-modal .ai-sug {
  background: #ffffff !important;
  border-color: #e0dfd8 !important;
  color: var(--muted) !important;
}
:root[data-theme="light"] #ai-modal .ai-sug:hover {
  background: rgba(156,111,10,.06) !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}


/* ═══ FOOTER / Mood-section: убрать тёмные backgrounds ═══ */
:root[data-theme="light"] .home-mood-section {
  background: transparent !important;
}


/* ═══ DROPDOWN'ы — профиль / нотификации / каталог / жизнь ═══
   Все эти меню были захардкожены под тёмную тему — на белом фоне
   выпадало тёмное окно с тёмным текстом → ничего не видно. */
:root[data-theme="light"] #my-drop {
  background: rgba(255,255,255,.96) !important;
  border: 1px solid #e0dfd8 !important;
  box-shadow:
    0 18px 40px rgba(40,28,10,.12),
    0 0 0 1px rgba(156,111,10,.04) inset !important;
}
:root[data-theme="light"] #my-drop button {
  color: var(--text) !important;
}
:root[data-theme="light"] #my-drop button:hover {
  background: rgba(156,111,10,.08) !important;
  color: var(--gold) !important;
}
:root[data-theme="light"] #my-drop button [data-lucide] {
  color: var(--muted) !important;
}
:root[data-theme="light"] #my-drop button:hover [data-lucide] {
  color: var(--gold) !important;
}

/* Nav dropdown'ы — Каталог▾ / Жизнь▾ */
:root[data-theme="light"] .nb-drop-menu {
  background: #ffffff !important;
  border: 1px solid #e0dfd8 !important;
  border-top: 2px solid var(--gold) !important;
  box-shadow: 0 14px 36px rgba(40,28,10,.14) !important;
}
:root[data-theme="light"] .nb-drop-menu button {
  color: var(--text) !important;
}
:root[data-theme="light"] .nb-drop-menu button:hover {
  background: rgba(156,111,10,.08) !important;
  color: var(--gold) !important;
}

/* Notifications dropdown */
:root[data-theme="light"] .notif-dropdown {
  background: #ffffff !important;
  border: 1px solid #e0dfd8 !important;
  box-shadow: 0 16px 48px rgba(40,28,10,.14) !important;
}
:root[data-theme="light"] .notif-item {
  border-bottom: 1px solid rgba(20,15,10,.06) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] .notif-item:hover {
  background: #fafaf8 !important;
}
:root[data-theme="light"] .notif-item.unread {
  background: rgba(156,111,10,.08) !important;
  border-left: 2px solid var(--gold) !important;
}
:root[data-theme="light"] .notif-empty {
  color: var(--muted) !important;
}
:root[data-theme="light"] .notif-empty-title {
  color: var(--text) !important;
}
:root[data-theme="light"] .notif-empty-sub {
  color: var(--dim) !important;
}
:root[data-theme="light"] .notif-header {
  color: var(--muted) !important;
  border-bottom: 1px solid rgba(20,15,10,.06) !important;
}

/* Search dropdown (.sdrop) */
:root[data-theme="light"] .sdrop {
  background: #ffffff !important;
  border: 1px solid #e0dfd8 !important;
  box-shadow: 0 16px 48px rgba(40,28,10,.14) !important;
}
:root[data-theme="light"] .sri {
  border-bottom: 1px solid rgba(20,15,10,.04) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] .sri:hover {
  background: #fafaf8 !important;
}

/* Share menu / DM message menu */
:root[data-theme="light"] #share-menu,
:root[data-theme="light"] .share-menu-box,
:root[data-theme="light"] .dm-msg-menu {
  background: #ffffff !important;
  border: 1px solid #e0dfd8 !important;
  box-shadow: 0 16px 48px rgba(40,28,10,.14) !important;
}


/* ═══ Reduced motion ═════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  :root[data-theme="light"] .home-mood-btn,
  :root[data-theme="light"] .rarity-legendary .badge-icon,
  :root[data-theme="light"] .mc:hover,
  :root[data-theme="light"] .coll-card:hover {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}