/* ================= СВЕТЛАЯ ТЕМА (структурная база) =================
   Эксперимент: светлый сайт вместо тёмного.
   Тёмными «кинематографичными» якорями остаются: block-1 (Porsche),
   hero, cinema-block (автовозы), logistics, geo (флаги/имиджи), cta, footer.
   Контентные секции — светлые. Палитра по умолчанию — тёплый лён.
   Подключается ПОСЛЕ всех секционных CSS. Без accent-sections.css. */

:root {
  --bg: #f3f1ec;            /* тёплый off-white — фон страницы */
  --bg-2: #ffffff;          /* карточки */
  --bg-3: #e9e6df;          /* инпуты / поднятые элементы */
  --ink: #1a1713;           /* основной текст */
  --ink-2: #5c564c;         /* вторичный текст */
  --ink-3: #978f7e;         /* приглушённый текст / eyebrow */
  --line: rgba(20, 16, 10, 0.12);
  --line-2: rgba(20, 16, 10, 0.06);
  --line-strong: rgba(20, 16, 10, 0.22);
  --accent: #1c1813;        /* кнопки — тёмные на светлом */
  --accent-soft: #342f25;
}
body { background: var(--bg); color: var(--ink); }

/* ---- Тёмные якоря: возвращаем тёмную палитру в их скоуп ----
   var() каскадируется → весь текст/линии внутри снова светлые-на-тёмном. */
.hdr,
.block-1,
.hero,
.cinema-block,
.logi,
.geo,
.cta,
.ft,
.hdr-mobile-menu {
  --bg: #0a0a0a;
  --bg-2: #121212;
  --bg-3: #181818;
  --ink: #f5f5f5;
  --ink-2: #a8a8a8;
  --ink-3: #6a6a6a;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.04);
  --line-strong: rgba(255, 255, 255, 0.16);
  --accent: #ffffff;
  --accent-soft: #e8e8e8;
}

/* ---- Кнопки ---- */
.btn-primary { color: #fff; }                      /* тёмная кнопка на светлом */
.hdr .btn-primary,
.hero .btn-primary,
.cta .btn-primary,
.logi .btn-primary,
.cinema-block .btn-primary,
.ft .btn-primary,
.hdr-mobile-menu .btn-primary { color: #0a0a0a; }   /* светлая кнопка на тёмном */
.btn-primary:hover { box-shadow: 0 12px 32px -10px rgba(20, 16, 10, 0.32); }
.hero .btn-primary:hover,
.cta .btn-primary:hover { box-shadow: 0 12px 32px -10px rgba(255, 255, 255, 0.25); }
.btn-ghost:hover { background: rgba(20, 16, 10, 0.05); }
.hero .btn-ghost:hover,
.cta .btn-ghost:hover { background: rgba(255, 255, 255, 0.04); }

/* ---- Выделенная карточка преимуществ остаётся тёмной (премиальный остров) ---- */
.card-hi {
  --ink: #f5f5f5;
  --ink-2: #a8a8a8;
  --ink-3: #6a6a6a;
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.24);
}

/* ---- Точечные правки хардкод-белого в светлых секциях ---- */
.cr-vat { background: rgba(20, 16, 10, 0.05); }
.tr-rows li:hover { background: rgba(20, 16, 10, 0.035); }
.avail-car { background: #ffffff; }
.avail-tags span { background: rgba(20, 16, 10, 0.05); }
.avail-thumbs { background: rgba(20, 16, 10, 0.05); }
.avail-foot a { text-decoration-color: rgba(20, 16, 10, 0.3); }

/* ---- Тёмные «острова» внутри светлых секций ----
   Оверлеи на фото, лайтбокс, cookie-баннер — фон тёмный, поэтому текст
   внутри держим светлым (иначе тянет тёмные цвета светлой темы). */
.avail-stage,
.avail-lb,
.cookie-banner {
  --ink: #f5f5f5;
  --ink-2: #c4c4c4;
  --ink-3: #8a8a8a;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.20);
}

/* Бейдж «в наличии сейчас» — на светлой секции нужен тёмно-зелёный текст
   (хардкод #cce7d4 остался от тёмной версии — был светло-зелёным). */
.avail-badge {
  color: #1c7a32;
  background: rgba(46, 160, 67, 0.14);
  border-color: rgba(46, 160, 67, 0.5);
}

/* ---- Чередование фонов секций (ABAB) ----
   Соседние светлые секции не должны иметь одинаковый фон — иначе блоки
   сливаются и отступы читаются криво. Между тёмными якорями — чистый ABAB. */
.avail, .adv, .how, .transit, .gallery, .about {
  background: var(--bg);            /* A — беж */
}
.brands, .calc, .stats, .stories, .faq {
  background: var(--bg-2);          /* B — светлее */
}