/* Шрифты */

/* Forma DJR Cyrillic Deck — платный шрифт, лицензия есть, self-host.
   Файл forma-djr-cyrillic-deck.woff2 в src/assets/fonts на деле не WOFF2
   (проверено `file` — внутри сырые данные PostScript Type 1, экспорт
   был с ошибкой) — браузер каждый раз пытается его распарсить, ловит
   ошибку и только потом откатывается на .woff ниже по списку, поэтому
   до появления шрифта на странице всегда доходит с задержкой на
   заведомо провальную попытку. Пока нет корректного экспорта, ссылку на
   woff2 убрал — .woff валиден и загружается сразу, без обхода. Когда
   появится настоящий .woff2 (меньше по весу), можно вернуть первым
   источником. */
@font-face {
  font-family: "Forma DJR Cyrillic Deck";
  src: url("../fonts/forma-djr-cyrillic-deck.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Forma DJR Cyrillic Deck", sans-serif;
  --font-text: "Manrope", sans-serif;
  --font-ui: "Manrope", sans-serif;
}

body {
  font-family: var(--font-text);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
}

/* Корневой font-size — один рычаг для всей типографики и отступов
   (всё в rem/em), два флюидных участка стыкуются на брейкпоинте 769px:

   Мобилка (≤768px): растёт от --mobile-fs-min (14px, самые узкие
   телефоны, ~320px) до 16px — опорная точка не произвольная, это
   ширина мобильного макета Figma (393px), где токены шрифтов
   (typography.css, переопределены на этом же брейкпоинте) дают ровно
   пиксели из макета. От 393px до 768px держится плоских 16px (clamp
   сам "упирается" в потолок) — это тот же
   диапазон, что был раньше, теперь он просто не ломается на совсем
   узких экранах ниже макета.
   Десктоп (≥769px): флюидный от 12px до 16px, пропорционально ширине
   вьюпорта — выглядит одинаково просторно что на узком окне ноутбука,
   что на широком мониторе, а не «одна и та же абсолютная величина то
   тесно, то просторно». Опорная точка 1512px = 16px — точное
   совпадение с десктопным макетом Figma (94.5 = 1512/16). Ниже ~1134px
   рост упирается в пол 12px; выше 1512px — потолок 16px, чтобы не
   разрасталось до бесконечности на широких мониторах.

   На стыке (768→769px) значение может скакнуть с 16px на пол 12px —
   уже так было и на чисто десктопном участке; если это будет заметно
   на вёрстке, сюда стоит вернуться и сделать переход непрерывным. */

html {
  --mobile-fs-min: 14; /* px на самых узких телефонах (~320px) */
  --mobile-fs-max: 16; /* px на 393px — ширина мобильного макета Figma, дальше держится плоско */
  --mobile-vw-min: 320;
  --mobile-vw-max: 393;

  font-size: clamp(
    calc(var(--mobile-fs-min) * 1px),
    calc(
      var(--mobile-fs-min) * 1px +
        (var(--mobile-fs-max) - var(--mobile-fs-min)) *
        ((100vw - var(--mobile-vw-min) * 1px) / (var(--mobile-vw-max) - var(--mobile-vw-min)))
    ),
    calc(var(--mobile-fs-max) * 1px)
  );
}

@media (min-width: 769px) {
  html {
    --desktop-fs-min: 12; /* px — пол на «зажатых» окнах ноутбука (~1134px) */
    --desktop-fs-max: 16; /* px на 1512px — ширина десктопного макета Figma */
    --desktop-vw-max: 1512;

    font-size: clamp(
      calc(var(--desktop-fs-min) * 1px),
      calc(100vw * var(--desktop-fs-max) / var(--desktop-vw-max)),
      calc(var(--desktop-fs-max) * 1px)
    );
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}