/* ═══════════════════════════════════════════════════════════════════════
   Светлая терракотовая шкала — общий слой (2026-08-08).

   Зачем отдельный файл. Сайт переехал в терракоту, но базовые токены в
   tokens.css остались тёмными: --bg #171C28, --surface-2 #1C2438,
   --gold #C4952A. Страницы, переведённые в светлую тему, закрывали это
   локальными шкалами внутри своих обёрток (.service-tail, .home-reviews,
   .pillar-split). Работало ровно до первого элемента, который берёт
   токен напрямую.

   Так и вылез баг, который нашёл владелец: ответ в «Частых вопросах» на
   странице услуги открывался тёмно-синим прямоугольником с тёмным текстом
   поверх — module-process.css задаёт `.faq__a { background: var(--surface-2) }`,
   а --surface-2 на этих страницах остался из тёмной палитры. Локальные
   шкалы его не покрывали, потому что объявлены на классах-обёртках, а не
   на :root.

   Здесь переопределяются сами токены. Подключать ПЕРВЫМ в extra_head:
   локальные шкалы объявлены на классах и всё равно сильнее, а всё
   непокрытое теперь берёт светлые значения вместо тёмных.

   Файл общий для страниц услуг и городов. Городской city-light.css
   оставлен — в нём, кроме токенов, есть правила самого героя города.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #FFFBF7;
  --surface: #F5F0EB;
  --surface-2: #F5F0EB;
  --surface-sunk: #EFE7DA;
  --surface-card: #F5F0EB;

  --border-faint: #E8DFD1;
  --border: #E8DFD1;

  --text: #2D2D2D;
  --text-sub: #4A4A4A;
  --text-muted: #6B6B6B;
  --text-label: #6B6B6B;
  --text-dim: #6B6B6B;
  --text-nav: #4A4A4A;

  --gold: #C75B39;
  --gold-2: #B04E2F;
  --gold-tint: rgba(199, 91, 57, 0.12);
  --gold-on: #FFFBF7;

  --danger: #B91C1C;

  --glow-gold: 0 4px 14px rgba(199, 91, 57, 0.25);
}

/* ═══ Типографская шкала (2026-08-08) ═══
   Те же ступени, что на главной (home-redesign.css). Без них правила вида
   `font-size: var(--fs-title) !important` из reviews-block.css схлопывались:
   переменная не объявлена, значение невалидно, и заголовок «Что говорят
   клиенты» приходил к 15px — вчетверо мельче соседнего «Частые вопросы».
   Тот же обрыв съедал заголовок финального призыва. */
:root {
  --fs-display:  clamp(32px, calc(2.25vw + 27px), 72px);
  --fs-title:    clamp(24px, calc(0.875vw + 22.5px), 40px);
  --fs-subtitle: clamp(18px, calc(0.44vw + 15.25px), 24px);
  --fs-lead:     clamp(15.5px, calc(0.1875vw + 15.25px), 19px);
  --fs-body:     clamp(14.5px, calc(0.1875vw + 13.25px), 17px);
  --fs-small:    clamp(13px, calc(0.1875vw + 11.25px), 15px);
  --fs-micro:    clamp(10.5px, calc(0.1875vw + 8.75px), 12.5px);
  --fs-btn:      clamp(12px, calc(0.1875vw + 10.25px), 14px);

  --lh-title: 1.15;
  --lh-subtitle: 1.28;
  --lh-body: 1.7;
  --lh-micro: 1.45;

  /* Зазор между заголовком секции и подводкой под ним. Без объявления
     правила с ним отключались, и подводка прилипала к заголовку. */
  --gap-title-dek: clamp(8px, 0.7vw, 14px);
}

/* ═══ Базовый кегль заголовка секции (2026-08-08) ═══
   На страницах, у которых нет своей типографской шкалы, заголовки секций
   расходились вдвое: «Доступные документы» 30px, а соседние «Частые вопросы»
   и заголовок призыва — 22px. Задаём одну ступень, ту же, что у страниц услуг
   (pillar-split.css).

   Селектор голый `h2` (вес 0,0,1) — самый слабый из возможных: любое правило
   с классом или id его перебьёт. Поэтому страницы со своей шкалой — главная,
   города, страницы услуг — не затронуты, правило работает только там, где
   кегль не задан вовсе. */
h2 {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.18;
}

/* Заголовки вопросов и призыва набраны своими правилами с классом
   (.faq h2 в module-process.css, .final-cta h2 там же) — голый h2 их не
   перебивает, и на странице оставался разнобой 32 / 22 / 32 / 22.
   Вес 0,1,1 достаточен здесь и заведомо слабее правил главной и городов:
   там та же типографика задана через id и !important. */
/* `body` в начале селектора добавлен ради веса, а не ради вложенности:
   reviews-block.css задаёт этим заголовкам кегль правилом такой же
   специфичности (0,1,1) и подключается позже, поэтому при равном весе
   выигрывал он — заголовок призыва оставался 35px против 32px у соседей.
   С `body` вес становится 0,1,2 и правило берёт верх. */
body .faq > h2,
body .final-cta > h2 {
  /* !important — потому что reviews-block.css задаёт этим заголовкам кегль
     тоже через !important. Специфичность здесь низкая намеренно: правила
     главной (через id) и городов (.city-blocks + .final-cta > h2) весят
     больше и продолжают выигрывать — там заголовок призыва крупнее по
     замыслу. */
  font-size: clamp(24px, 2.4vw, 32px) !important;
  line-height: 1.18;
}

/* ═══ Кнопка «Написать» — в палитре сайта (2026-08-08) ═══
   `.btn--wa` из module-cta.css красится токеном --wa: #4ED88A — зелёным
   WhatsApp из прежней тёмной темы. На терракотовой странице получалась
   блёклая зелёная плашка с зелёной же надписью: рядом с терракотовой
   «Связаться» это читалось как недоделка, а не как второе действие.

   Перекрашиваем сам токен, а не правила: так меняется и фон, и текст, и
   рамка разом, и любые будущие использования --wa останутся в палитре.
   На городских страницах то же самое уже сделано точечно в city-light.css. */
:root {
  --wa: #C75B39;
}

/* Фон, рамка и свечение в module-cta.css заданы хардкодом rgba(78,216,138,…)
   мимо токена, поэтому перекраски одного --wa мало: надпись становилась
   терракотовой, а плашка под ней оставалась зелёной. Переопределяем правило
   целиком — вид совпадает со второй кнопкой первого экрана. */
.btn--wa {
  background: rgba(199, 91, 57, 0.10);
  border-color: rgba(199, 91, 57, 0.32);
  box-shadow: none;
}
.btn--wa:hover {
  background: rgba(199, 91, 57, 0.18);
  box-shadow: 0 0 14px rgba(199, 91, 57, 0.28);
}

/* ═══ Вертикальный ритм секций (2026-08-08) ═══
   Вторая ловушка того же рода, что с --fs-title. reviews-block.css задаёт
   полосам хвоста `padding: var(--sec-pad) !important`, а --sec-pad объявлена
   только в home-redesign.css, то есть существует лишь на главной. Вне её
   значение невалидно, и padding схлопывался в НОЛЬ: заголовок «Что говорят
   клиенты» упирался в верхнюю границу песочной полосы, кнопка «Обсудить мою
   задачу» — в нижнюю. Секция выглядела тесной, сколько бы отступов ни
   добавляли соседним элементам — их съедал нулевой padding самой полосы.

   Значение то же, что на главной. */
:root {
  --sec-pad: clamp(52px, 6vw, 92px);
}