/* Единственный источник шкал. Всё остальное верстается только отсюда:
   произвольные значения вида 18px/10px в других файлах считаются ошибкой
   (design.md §0.2, §9). */

:root {
  /* Brand colors */
  --color-accent: #E53935;      /* Seattle Red */
  --color-accent-dark: #C62828;
  --color-navy: #0D1B2A;        /* dark / text */
  --color-white: #FFFFFF;
  --color-slate: #4A5568;       /* secondary text / icons */
  --color-slate-soft: #E2E8F0;
  --color-bg-soft: #F7F8FA;
  --color-success: #2F855A;
  --color-success-bg: #E6F4EA;
  --color-danger: #C53030;
  --color-danger-bg: #FDECEC;
  /* Подложки строк справочника: прозрачные оттенки, чтобы платное размещение
     читалось как выделенное, а не как другой бренд. */
  --color-accent-tint: rgba(229, 57, 53, 0.06);
  --color-navy-tint: rgba(13, 27, 42, 0.04);
  /* Золото — второй цвет помимо акцента (отступление от design.md §4), просил
     пользователь для строк Premium в справочнике. Первый подбор (#B8860B,
     hsl 43) он назвал «тёмно-лимонным»: у него тон уходит в оливковый. Тон
     сдвинут к мёду (hsl 40) и осветлён, прозрачность поднята с 0.08 до 0.14 —
     подложка стала заметнее (1.121:1 к белому против 1.089 у прежней).
     Рамка даёт 2.36:1 — ниже порога 3:1, и это сознательно: яркость и контраст
     к белому — одна ось, ярче можно только вниз по контрасту. Порог здесь не
     обязателен, потому что рамка ничего не сообщает — тариф написан словом на
     плашке, — а обычная рамка строки (--color-slate-soft) и вовсе 1.24:1. */
  --color-gold: #DF9C16;
  --color-gold-tint: rgba(223, 156, 22, 0.14);
  /* Ярче предыдущего золота — по просьбе клиента для строк Lux в блоке
     предприятий на Auto. Заливка заметно насыщеннее премиальной (#FFEEBF
     против #FBF1DE), поэтому Lux и Premium в одном списке не путаются.
     Текст держится с запасом: navy 15.10:1, slate 6.53:1. Рамка даёт 1.60:1
     против белого — меньше, чем 2.36 у --color-gold, и это осознанно: рамка
     ничего не сообщает (тариф — слово на плашке), а у строки Standard своя
     рамка и вовсе 1.24:1. Яркость и контраст к белому — одна ось в разные
     стороны, ярче и контрастнее одновременно не бывает. */
  --color-gold-bright: #FFC41A;
  --color-gold-bright-tint: rgba(255, 196, 26, 0.28);

  --color-standard: #4A5568;
  --color-lux: #0D1B2A;
  --color-premium: #E53935;

  /* Typography */
  --font-heading: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;

  /* Модульная шкала кеглей, шаг 1.25 (design.md §2). Других размеров нет. */
  --text-xs: 14px;
  --text-sm: 16px;
  --text-base: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 60px;

  /* Шкала отступов, база 8px (design.md §1). Других значений нет. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout.
     --container намеренно 1600px, а не 1200-1280 из design.md §3: согласованное
     отступление. Раньше страницы делились на 1180 и 1400, из-за чего контент
     прыгал по горизонтали при переходе между разделами — это §3 запрещает
     отдельным пунктом. Теперь ширина одна на всём сайте. Не «чинить» без просьбы. */
  --container: 1600px;

  /* Значения ниже переопределяются по брейкпоинтам в конце файла — так
     респонсив-шкала живёт в одном месте, а не размазана по 13 файлам. */
  --gutter: var(--space-4);      /* боковые поля контейнера: 16 / 24 / 32 */
  --section-y: var(--space-16);  /* вертикальные отступы секций: 64 / 80 / 96 */
  --grid-gap: var(--space-4);    /* gutter сеток: 16 / 24 */
  --card-pad: var(--space-6);    /* внутренние отступы карточек: 24 / 32 */

  /* Радиусы — одна шкала (design.md §6) */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow: 0 4px 16px rgba(13, 27, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(13, 27, 42, 0.14);

  /* Замеренная высота липкой шапки: 114px в два ряда, 96px в один
     (переопределяется на 1024px ниже). От неё считают свой top
     липкие сайдбары News / Directory / Auto. */
  --header-height: 116px;
}

/* Mobile-first: базовые значения выше — для узких экранов,
   ниже только то, что включается на более широких (design.md §8). */

@media (min-width: 768px) {
  :root {
    --gutter: var(--space-6);
    /* 80px нет в шкале отступов, но design.md §1 задаёт для планшета именно его */
    --section-y: 80px;
    --grid-gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: var(--space-8);
    --section-y: var(--space-24);
    --card-pad: var(--space-8);
    --header-height: 96px;
  }
}