/* Токены оформления. Основание — брендбук фестиваля, docs/brand/brandbook.pdf.
   Палитра фестиваля — ровно два цвета плюс белый. Брендбук запрещает
   произвольное изменение цветов, поэтому новых сюда не добавлять. */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jost-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Фирменная пара из брендбука. Синий ведёт, красный только акцентирует. */
  --brand: #143f6f;
  --accent: #e62e36;
  --paper: #ffffff;

  /* Производные от синего: подложка чередующихся секций и осветление для
     наведения. Это не новые цвета палитры, а оттенки фирменного синего. */
  --mist: #f4f6fa;
  --brand-lift: #1d5591;

  /* Красный на белом даёт 4.37:1 — крупному тексту хватает, мелкому нет.
     Для мелкого текста и ссылок берём затемнённый: он даёт 5.55:1.
     Синий на белом — 10.66:1, на --mist — 9.85:1. */
  --accent-text: #c9252c;

  /* Гарнитура брендбука — Futura PT, у неё платная веб-лицензия. Jost —
     геометрический гротеск того же строя; встаёт первой строкой, пока
     заказчик не решит вопрос с лицензией (#32). */
  --font: 'Jost', 'Trebuchet MS', system-ui, sans-serif;

  --step-hero: clamp(2.75rem, 1.6rem + 5.1vw, 5.5rem);
  --step-1: clamp(2rem, 1.4rem + 2.7vw, 3rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --step-3: 1.5rem;
  --step-4: 1.25rem;
  --step-5: 1rem;
  --step-6: 0.75rem;

  --lead-tight: 1.05;
  --lead-body: 1.35;
  --lead-small: 1.45;
  --track-caps: 0.14em;

  --container: 1200px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 7.5rem);
  --radius: 20px;
  --radius-sm: 12px;

  /* Шаг отступов. Один ряд на весь сайт: блоки не должны договариваться
     о расстояниях по отдельности. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Тень только одна и только для приподнятых карточек: брендбук строит
     оформление на плоскости и цвете, а не на объёме. */
  --shadow: 0 1px 2px rgba(20, 63, 111, 0.06), 0 8px 24px rgba(20, 63, 111, 0.08);

  /* Обводка фокуса. Видимый фокус требует п. 4.4 ТЗ и ГОСТ Р 52872-2019. */
  --focus: 3px solid var(--accent);
  --focus-gap: 2px;

  --line: rgba(20, 63, 111, 0.16);
  --muted: rgba(20, 63, 111, 0.68);

  --ease: 160ms ease;
}

/* Режим повышенной контрастности и увеличенного шрифта (п. 4.4 ТЗ,
   ГОСТ Р 52872-2019). Включается кнопкой в шапке, выбор хранится и
   восстанавливается до отрисовки — иначе страница успевает мигнуть обычным
   видом, и человек, которому этот режим нужен, каждый раз видит вспышку
   мелкого текста.

   Отдельной версии сайта здесь нет намеренно: вторая версия живёт своей
   жизнью и отстаёт от основной на всё, что добавили после. Режим меняет
   только токены, поэтому не может отстать по содержимому. */
:root[data-vision='on'] {
  /* Корневой кегль: весь ряд размеров и отступов меряется в rem, поэтому
     страница увеличивается целиком, а не одним лишь текстом абзацев. */
  font-size: 125%;

  /* Красный уходит в затемнённый: 7,33:1 на белом против прежних 4,37:1.
     Тон остаётся фирменным — это тот же красный, взятый темнее. */
  --accent: #a81d24;
  --accent-text: #a81d24;

  /* Полупрозрачные оттенки синего становятся сплошными: приглушённый текст
     даёт 4,69:1, а в этом режиме обязан давать столько же, сколько основной. */
  --muted: var(--brand);
  --line: rgba(20, 63, 111, 0.55);
  --brand-lift: var(--brand);

  /* Толще обводка фокуса и никаких теней: границу блока показывает линия,
     а не мягкий край. */
  --focus: 4px solid var(--accent);
  --shadow: none;
}