/*
  Пропорциональный скейлинг для мобильного диапазона 390–950px.

  Идея: у html растёт font-size вместе с шириной вьюпорта. Все остальные
  токены (отступы, радиусы, размеры шрифта, иконки) заданы в rem — значит
  любое изменение здесь автоматически прокатывается по всему макету.

  База — 390px = 16px root (значения в tokens.css сняты именно с
  390-пиксельного фрейма в Figma, поэтому 1rem там = 1px в макете).

  Рост специально смягчён (÷3 к тому, что дала бы "чистая пропорция"
  16*vw/390): при полностью пропорциональном росте на 950px всё стало
  выглядело слишком крупным. Формула — линейная интерполяция между
  (390, 16) и (950, --scale-max-root), т.е. обычный fluid-scale, просто
  с более пологим наклоном.
*/

:root {
  --scale-max-vw: 950;
  /* "Честный" максимум чистой пропорции 16*950/390 ≈ 38.974, рост до него
     урезан ещё сильнее (÷4.2 вместо ÷3.5 — по повторному фидбэку, на
     десктопе обычный текст всё ещё казался крупноват): 16 + (38.974-16)/4.2
     ≈ 21.470 */
  --scale-max-root: calc(16 + (16 * 950 / 390 - 16) / 4.2);

  /* Отдельная, ещё более смягчённая версия той же кривой — только для
     мелких декоративных элементов карточки (лого-плашка, кнопка-стрелка и
     её иконка, см. project-card.css), которые не должны раздуваться вместе
     с остальным интерфейсом так же сильно: рост урезан ещё вдвое от и без
     того смягчённого --scale-max-root. Используется как обычный px-размер
     через calc(), а не как font-size — html-у нужен ровно один font-size. */
  --icon-scale-max-root: calc(16 + (var(--scale-max-root) - 16) / 2);
  --icon-rem-px: min(
    calc(16px + (var(--icon-scale-max-root) - 16) * ((100vw - 390px) / 560)),
    calc(var(--icon-scale-max-root) * 1px)
  );
}

html {
  /* calc() запрещает умножать два значения с единицами измерения между
     собой (px * vw невалиден и браузер тихо отбрасывает всё объявление).
     16px здесь unitless-число, умножается на длину (vw или px), а не
     на другую длину. */
  font-size: min(
    calc(16px + (var(--scale-max-root) - 16) * ((100vw - 390px) / 560)),
    calc(var(--scale-max-root) * 1px)
  );
}