/* ===================================================================
   СВЕТЛАЯ ТЕМА (применяется на /landing-light/ через класс html.theme-light)
   Кремовый фон + белые карточки с мягкой тенью — «плашки читаются как плашки».
   v1 — рабочая основа, дальше причёсываем вместе.
   =================================================================== */

html.theme-light {
  --bg: #f4f2ed;            /* тёплый кремовый — страница */
  --bg-secondary: #ffffff;  /* поверхность карточек — белая */
  --ink: #1b1e23;           /* почти чёрный текст */
  --ink-muted: #5c6571;
  --ink-dim: #97a0ab;
  --accent: #d2782f;        /* чуть глубже оранжевый — контраст на светлом */
  --accent-dim: #e8c9a8;
  --border: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.20);
}

html.theme-light body { background: var(--bg); color: var(--ink); }

/* alt-секции — чуть более тёплый крем, чтобы белые карточки выделялись */
html.theme-light .section--alt { background: #ece8e0; }

/* карточки, которые в тёмной теме брали --bg — делаем белыми */
html.theme-light .module,
html.theme-light .selection,
html.theme-light .modules__preview { background: #ffffff; }

/* МЯГКАЯ ТЕНЬ — главное, что делает плашки «плашками» на светлом фоне */
html.theme-light .feat,
html.theme-light .module,
html.theme-light .bundle,
html.theme-light .review,
html.theme-light .vs,
html.theme-light .vs-m,
html.theme-light .selection,
html.theme-light .modcard,
html.theme-light .modmodal__panel,
html.theme-light .solmodal__panel,
html.theme-light .modal__panel {
  box-shadow: 0 1px 2px rgba(20, 22, 30, 0.04), 0 10px 26px rgba(20, 22, 30, 0.07);
}
html.theme-light .feat:hover,
html.theme-light .module:hover,
html.theme-light .bundle:hover,
html.theme-light .review:hover {
  box-shadow: 0 2px 6px rgba(20, 22, 30, 0.08), 0 16px 34px rgba(20, 22, 30, 0.12);
}

/* логотип: в светлой теме НЕ инвертируем (оставляем чёрным) */
html.theme-light .brand__logo { filter: none; }

/* шапка — светлое стекло */
html.theme-light .header { background: rgba(255, 255, 255, 0.82); }
html.theme-light .mobile-menu { background: #ffffff; }

/* зернистость поверх светлого выглядит грязно — убираем */
html.theme-light .grain { display: none; }

/* hover-состояния, завязанные на белый, переводим на чёрный */
html.theme-light .btn:hover { background: rgba(0, 0, 0, 0.05); }
html.theme-light .module__add:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* вторичная кнопка («Продолжить просмотр» и т.п.): белый текст на белом не виден — делаем тёмный */
html.theme-light .btn--secondary { color: var(--ink); border-color: var(--border-strong); }
html.theme-light .btn--secondary:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* плашка-заглушка в превью конфигуратора лежит на тёмном изображении — текст оставляем белым */
html.theme-light .modules__preview-ph { color: #fff; }

/* «Это завод»: подписи/капшены лежат на ТЁМНЫХ фото — в светлой теме оставляем светлыми */
html.theme-light .compare__cap { color: #fff; }
html.theme-light .compare__side--bad .compare__label { color: rgba(255, 255, 255, 0.82); }
html.theme-light .compare__ph { color: rgba(255, 255, 255, 0.72); }

/* hero — это тёмное изображение с белым текстом, в светлой теме его не трогаем
   (тёмный hero на светлом сайте — как у helios-smart.ru с тёмными рендерами) */