/* Общие токены бренда для подстраниц (/api/, /prices/, /get/).
 *
 * Зачем отдельный файл: раньше каждая подстраница держала свою копию :root —
 * три набора по 9–14 значений. Они уже начали расходиться (--ink-3 был
 * #78828D на /get/ против #919BA6 в основной теме), и при смене бренда
 * правился бы один файл, а остальные тихо остались бы старыми.
 *
 * Главный лендинг сюда НЕ смотрит: у него полный :root внутри css/styles.css,
 * где токенов втрое больше (типографика, motion, слои). Значения здесь —
 * подмножество и обязаны совпадать с ним побайтово.
 */
:root {
  /* Бренд. Один цвет — один литерал, алиасы через var(). */
  --blue:      #00AFEC;      /* Небо */
  --blue-dark: #0071BA;      /* Трасса */
  --green:     #00B359;      /* Выгода */
  --amber:     #FAAC39;      /* Янтарь */
  --red:       #D0021B;      /* Стоп — только заливки */
  --red-text:  #FF6B73;      /* красный для текста на тёмном: #D0021B даёт 3,15:1 */

  /* Поверхности и текст */
  --bg:        #14181D;      /* Ночь */
  --surface:   #1F242B;      /* Гараж */
  --surface-2: #2A3038;      /* Бетон */
  --ink:       #EAF0F6;
  --ink-2:     #9AA4AF;
  --ink-3:     #919BA6;      /* AA на всех трёх поверхностях */
  --line:      rgba(255,255,255,0.1);
  --line-2:    rgba(255,255,255,0.18);

  /* Форма и движение */
  --r-sm:  12px;
  --r-md:  18px;
  --r-tile: 16px;
  --r-pill: 999px;
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

/* Общие состояния для всех подстраниц.
 *
 * Живут здесь, а не в шаблонах: правило focus-visible и отклик кнопки были
 * только на главной и на /prices/, а 54 сгенерированные региональные страницы
 * их не получили — фокус там полагался на дефолт браузера, а единственная
 * кнопка установки не реагировала на нажатие. Один файл чинит все страницы
 * разом и не даёт им разъехаться при следующей правке шаблона.
 */
:where(a, button, summary, [role="slider"]):focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-radius: 8px;
}

.cta {
  transition: scale 140ms var(--e-out), box-shadow 200ms var(--e-out), background 200ms var(--e-out);
}
.cta:active { scale: .97; }
@media (hover: hover) and (pointer: fine) {
  .cta:hover {
    background: #2FC6F7;
    box-shadow: 0 14px 30px -12px rgba(0,175,236,.9);
  }
}
@media (prefers-reduced-motion: reduce) { .cta { transition: none; } }