/* Шкала типографики по именованным стилям из Figma. Один токен на
   стиль — значение самой переменной меняется на брейкпоинте, а не
   заводится вторым токеном с суффиксом типа `-mobile`/`-s`: только
   так и только это var(--fs-h1) везде, что на десктопе, что на
   мобилке — какое сейчас значение у переменной, то и применяется.

   factoid.S и body.S — САМОСТОЯТЕЛЬНЫЕ именованные стили в Figma (не
   "мобильная версия" factoid/body), у каждого свои значения:
     factoid   — 104 / 64
     factoid.S —  64 / 48
     body      —  24 / 16
     body.S    —  16 / (в Figma нет отдельного мобильного body.S —
                  совпадает с mobile/body, поэтому не меняется на
                  брейкпоинте)
   h1.S = 64/28 — совпадает с h2 один-в-один на обоих брейкпоинтах,
   отдельного токена не заводим, для h1.S в разметке используем .t-h2. */

:root {
  --fs-h1: 6rem; /* 96px */
  --fs-h2: 4rem; /* 64px */
  --fs-h3: 3rem; /* 48px */
  --fs-h4: 1.75rem; /* 28px */
  --fs-lead: 2.25rem; /* 36px */
  --fs-body: 1.5rem; /* 24px */
  --fs-body-s: 1rem; /* 16px — Figma body.S, не меняется на мобилке */
  --fs-factoid: 6.5rem; /* 104px */
  --fs-factoid-s: 4rem; /* 64px — Figma factoid.S */
  --fs-capitel: 1.125rem; /* 18px */
  --fs-footnote: 0.75rem; /* 12px — не меняется на мобилке */
}

@media (max-width: 768px) {
  :root {
    --fs-h1: 2.25rem; /* 36px */
    --fs-h2: 1.75rem; /* 28px */
    --fs-h3: 1.5rem; /* 24px */
    --fs-h4: 1.25rem; /* 20px */
    --fs-lead: 1.5rem; /* 24px */
    --fs-body: 1rem; /* 16px */
    --fs-factoid: 4rem; /* 64px */
    --fs-factoid-s: 3rem; /* 48px — своё число, не совпадает ни с mobile/factoid (64), ни с desktop/factoid.S (64) */
    --fs-capitel: 0.75rem; /* 12px */
  }
}