/* ============================================
   v3-light.css — глобальная светлая тема для НЕ-reader страниц
   Извлечено из v3.css 2026-05-31 для изоляции читалки.
   Подключается в layouts/v3.blade.php ПОСЛЕ v3.css.
   В layouts/v3_reader.blade.php НЕ грузится — у читалки своя система тем
   (body[data-theme="dark|sepia|gray|light"]).
   ============================================ */

/* ============================================
   LIGHT THEME — :root[data-theme="light"]
   Симметрично тёмной по контрасту. Жёлто-красный акцент сохранён.
   Активируется JS-переключателем + localStorage 'knigism-theme'.
   ============================================ */
:root[data-theme="light"] {
  /* surfaces — белый/светло-серый */
  --c-bg:        #ffffff;
  --c-bg-2:      #f5f5f7;
  --c-bg-3:      #ebebef;
  --c-bg-4:      #dcdce1;
  --c-border:    rgba(0,0,0,0.09);
  --c-border-2:  rgba(0,0,0,0.16);

  /* text — тёмный на белом */
  --c-text:      #131316;
  --c-text-2:    #4a4a52;
  --c-text-3:    #6e6e76;   /* AA ≥4.5:1 на bg-2 (#f5f5f7) */
  --c-text-4:    #9a9aa2;

  /* accents — жёлтый/красный сохранены, но --c-yellow-2 теперь для
     hover-текстов (нужен тёмный жёлтый, иначе #ffd60a на белом = 1.5:1) */
  --c-yellow:    #ffd60a;   /* фон плашек, бордеры — остаётся */
  --c-yellow-2:  #c8830f;   /* для hover-текстов на белом фоне (AA 4.6:1) */
  --c-orange:    #e07000;
  --c-red:       #e63329;
  --c-red-2:     #b50e06;
  --c-white:     #ffffff;

  /* signal */
  --c-success:   #1ea34a;
  --c-info:      #007aff;

  /* gradients — fire остаётся, dark/glass переопределяем */
  --g-fire:        linear-gradient(135deg, #ffd60a 0%, #ff8a00 50%, #ff3b30 100%);
  --g-fire-soft:   linear-gradient(135deg, rgba(255,214,10,.20) 0%, rgba(255,138,0,.20) 50%, rgba(255,59,48,.20) 100%);
  --g-dark:        linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
  --g-card:        linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0) 100%);
  --g-glass:       linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(245,245,247,.78) 100%);
  --g-glow-yellow: radial-gradient(60% 60% at 50% 50%, rgba(255,214,10,.32) 0%, transparent 65%);
  --g-glow-red:    radial-gradient(60% 60% at 50% 50%, rgba(255,59,48,.28) 0%, transparent 65%);

  /* shadows — на белом более мягкие */
  --s-card:        0 4px 14px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --s-card-hover:  0 10px 28px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --s-glow-y:      0 0 18px rgba(255,184,0,.30), 0 0 40px rgba(255,138,0,.16);
  --s-glow-r:      0 0 18px rgba(255,59,48,.30), 0 0 40px rgba(255,59,48,.14);
}

/* ===== Точечные переопределения для светлой темы ===== */
:root[data-theme="light"] body { background: var(--c-bg); color: var(--c-text); }

/* HEADER — стеклянный белый */
:root[data-theme="light"] .header {
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid var(--c-border);
}
:root[data-theme="light"] .header.scrolled {
  background: rgba(255,255,255,.95);
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}

/* BOTTOM-NAV — белый стеклянный */
:root[data-theme="light"] .bnav {
  background: rgba(255,255,255,.95);
  border-top: 1px solid var(--c-border);
}

/* SEARCH-OVERLAY — белый фон */
:root[data-theme="light"] .search-overlay {
  background: rgba(255,255,255,.98);
}

/* SEARCH input — в v3-hard-overrides уже #ffffff фон,
   на светлой теме делаем чуть-сероватым чтобы был отличим */
:root[data-theme="light"] .header .search input,
:root[data-theme="light"] .search-overlay__head input {
  background: #f5f5f7 !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #131316 !important;
}
:root[data-theme="light"] .header .search input:focus,
:root[data-theme="light"] .search-overlay__head input:focus {
  background: #ffffff !important;
  border-color: var(--c-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255,184,0,.30) !important;
}

/* sticky-cta — градиент к белому фону */
:root[data-theme="light"] .sticky-cta {
  background: linear-gradient(180deg, transparent 0%, var(--c-bg) 30%);
}

/* nav-main активный пункт — текст на жёлтом фоне белый = плохо
   делаем фоном bg-3, текст более тёмный жёлтый (yellow-2) */
:root[data-theme="light"] .nav-main a.active {
  color: var(--c-yellow-2);
  background: var(--c-bg-3);
  box-shadow: inset 0 0 0 1px var(--c-yellow-2);
}
:root[data-theme="light"] .nav-main a.active::after {
  background: var(--c-yellow-2);
  box-shadow: 0 0 12px var(--c-yellow-2);
}
:root[data-theme="light"] .nav-main a:hover { color: var(--c-text); background: var(--c-bg-3); }

/* drawer-overlay — менее тёмный, на белом фоне */
:root[data-theme="light"] .drawer-overlay,
:root[data-theme="light"] .sheet-overlay,
:root[data-theme="light"] .search-overlay { /* ничего тут не трогаем, search-overlay выше */ }
:root[data-theme="light"] .drawer-overlay,
:root[data-theme="light"] .sheet-overlay {
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(4px);
}

/* drawer (sidebar): на белом — bg-2 */
:root[data-theme="light"] .drawer {
  background: var(--c-bg-2);
  border-right: 1px solid var(--c-border);
}

/* header__icon hover — на белом */
:root[data-theme="light"] .header__icon:hover { color: var(--c-yellow-2); background: var(--c-bg-2); }
:root[data-theme="light"] .header__icon:active { background: var(--c-bg-3); }

/* link hover в drawer/sheet — yellow-2 вместо чистого yellow */
:root[data-theme="light"] .drawer__nav a:hover,
:root[data-theme="light"] .drawer__nav a.active { color: var(--c-yellow-2); background: var(--c-bg-3); }
:root[data-theme="light"] .drawer__nav a.active svg { color: var(--c-yellow-2); }

/* footer link hover */
:root[data-theme="light"] .footer a:hover { color: var(--c-yellow-2); }

/* book-card hover glow — мягче на белом */
:root[data-theme="light"] .book-card:hover .book-card__cover {
  box-shadow: var(--s-card-hover), 0 0 24px rgba(255,184,0,.22);
}

/* pagination active text цвет уже #000 в --g-fire — ок.
   Hover на ссылке: текст yellow-2 чтобы был AA */
:root[data-theme="light"] .pagination li > a:hover {
  color: var(--c-yellow-2);
  border-color: var(--c-yellow-2);
  background: var(--c-bg-3);
}

/* pa-card hover */
:root[data-theme="light"] .pa-card:hover { border-color: var(--c-yellow-2); }

/* chip:hover — #000 на жёлтом ок, оставляем как есть */

/* USER MENU dropdown — белый фон с тенью */
:root[data-theme="light"] .user-menu__dropdown {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  box-shadow: 0 20px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
}
:root[data-theme="light"] .user-menu__trigger { border-color: var(--c-border-2); }
:root[data-theme="light"] .user-menu__trigger:hover { border-color: var(--c-yellow-2); }
:root[data-theme="light"] .user-menu__item:hover { background: var(--c-bg-3); color: var(--c-yellow-2); }
:root[data-theme="light"] .user-menu__item:hover svg { color: var(--c-yellow-2); }
:root[data-theme="light"] .user-menu__name { color: var(--c-text); }

/* selection — на жёлтом всегда чёрный текст, оставляем */
/* ::selection задано глобально в :root */

/* ====== THEME TOGGLE BUTTON (в header) ====== */
.theme-toggle {
  width: var(--tap-min); height: var(--tap-min);
  border-radius: var(--r-full);
  display: grid; place-items: center;
  background: transparent; color: var(--c-text-2);
  transition: var(--t-base);
  position: relative;
  min-height: var(--tap-min);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--c-bg-2); color: var(--c-yellow); }
.theme-toggle:active { transform: scale(0.92); background: var(--c-bg-3); }
.theme-toggle svg { width: 22px; height: 22px; }
.theme-toggle__sun  { display: none; }
.theme-toggle__moon { display: block; }
:root[data-theme="light"] .theme-toggle:hover { color: var(--c-yellow-2); background: var(--c-bg-2); }
:root[data-theme="light"] .theme-toggle__sun  { display: block; }
:root[data-theme="light"] .theme-toggle__moon { display: none; }

/* ============================================
   LIGHT THEME — catalog pages audit (2026-05-31)
   Зона: /, /genres, /authors, /series, /impressions, /y/N, /?q=
   Фиксы: жёлтый текст → yellow-2, sticky bars → стеклянный белый,
   badge на легаси-карточках → yellow-2
   ============================================ */

/* — глобальный TODO из брифа: legacy-card badge на bg-3 даёт 1.5:1 — */
:root[data-theme="light"] .legacy-card > .header > .badge {
  color: var(--c-yellow-2);
}

/* — sticky filter bars (genres/authors): хардкод rgba(22,22,28,.92) в inline — */
:root[data-theme="light"] .genres-v3-bar,
:root[data-theme="light"] .authors-v3-bar {
  background: rgba(255,255,255,.92) !important;
  border-top-color: var(--c-border) !important;
  border-bottom-color: var(--c-border) !important;
}

/* — search-summary <b> ("Найдено N серий" — жёлтый акцент) — */
:root[data-theme="light"] .ser-search-summary b {
  color: var(--c-yellow-2);
}

/* — ser-card count badge (yellow text on bg-3 grey) — */
:root[data-theme="light"] .ser-card__count {
  color: var(--c-yellow-2);
}

/* — series pagination hover — */
:root[data-theme="light"] .ser-pagination .pagination li > a:hover {
  background: var(--c-bg-3);
  border-color: var(--c-yellow-2);
  color: var(--c-yellow-2);
}

/* — impressions: hover-цвета имён/комментариев — */
:root[data-theme="light"] .imp-card__name:hover,
:root[data-theme="light"] .imp-card__comments:hover {
  color: var(--c-yellow-2);
}
/* impressions: pagination в локальном <style> блоке (line 418) — */
:root[data-theme="light"] .imp-card + .pagination > li.active > span,
:root[data-theme="light"] .imp-card + .pagination > li > a:hover,
:root[data-theme="light"] .pagination > li.active > span,
:root[data-theme="light"] .pagination > li > a:hover {
  background: var(--c-yellow-2);
  color: #ffffff;
  border-color: var(--c-yellow-2);
}

/* — authors: !important inline → нужно тоже !important — */
:root[data-theme="light"] .pagination > li > a:hover {
  border-color: var(--c-yellow-2) !important;
  color: var(--c-yellow-2) !important;
  background: var(--c-bg-3) !important;
}
/* author-row arrow hover — */
:root[data-theme="light"] .author-row-v3:hover .author-row-v3__arrow {
  color: var(--c-yellow-2);
}

/* — кнопка-«читать» / chip:hover, where chip text becomes yellow — */
:root[data-theme="light"] .chip:hover { color: var(--c-yellow-2); }
:root[data-theme="light"] .all-link { color: var(--c-yellow-2); }
:root[data-theme="light"] .all-link:hover { color: var(--c-red); }

/* — карты и hover-бордеры (.imp-card, .imp-card__book) — */
:root[data-theme="light"] .imp-card:hover,
:root[data-theme="light"] .imp-card__book:hover {
  border-color: var(--c-yellow-2);
}

/* — text-gradient (если используется .text-gradient на заголовках) — */
/* оставляем градиент: он от жёлтого к оранжевому, читается на белом */

/* — алфавитный указатель (.alpha-v3 на /genres + ser-alpha) — */
/* .ser-alpha a уже использует фон --c-bg-3 (светло-серый) и текст --c-text — OK */
/* hover/active: жёлтый фон + #000 текст — OK на обеих темах */
:root[data-theme="light"] .alpha-v3__letter.is-disabled { opacity: .35; }