/*
  Типографика — шкала ролей текста (Display/H1–H4/Body/Caption/Label/…)
  поверх fluid-скейлинга из scale.css.

  Два независимых механизма роста, каждый работает в своей зоне:

  1) 390–950px — все размеры в rem, поэтому каждая роль растёт вместе с
     html font-size автоматически (см. scale.css), без единой лишней
     строчки CSS. К 950px root уже вырос ×1.342 от базы — то есть каждая
     роль тоже в 1.342 раза крупнее мобильного значения ниже.

  2) 950px+ — root заморожен (осознанно, чтобы обычный текст не раздувался
     на десктопе, см. комментарий в scale.css), а вместе с ним замерли бы
     и все rem-размеры. Заголовочные роли (H2–H4, Display) на 1101/1441
     ниже получают явные шаги в px — на широких экранах у них достаточно
     воздуха, чтобы иерархия продолжала расти, а тело текста (body/
     caption/label/button) сознательно оставлено на замороженном размере:
     длинный текст не должен становиться крупнее с одной лишь шириной
     экрана. Шаги рассчитаны так, чтобы на стыке зон не было скачка —
     каждый следующий чуть крупнее предыдущего, без разрывов.
*/

:root {
  /* --- Семейства шрифтов --- */
  --font-family-heading: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* --- Шкала размеров (база 390px = 16px root) ---
     Значения в rem: 1rem = текущий font-size html (см. scale.css). Шаг
     между соседними ролями нигде не уже ~12% — иначе на глаз размеры
     сливаются и иерархия перестаёт читаться. */
  --font-size-3xs: 0.625rem;  /* 10px — самые мелкие лейблы/индексы */
  --font-size-2xs: 0.75rem;   /* 12px — caption, ×1.20 к 3xs */
  --font-size-sm: 0.875rem;   /* 14px — body small/label/button, ×1.17 */
  --font-size-base: 1rem;     /* 16px — body, ×1.14 */
  --font-size-md: 1.125rem;   /* 18px — body large / H4, ×1.13 */
  --font-size-lg: 1.375rem;   /* 22px — H3, ×1.22 */
  --font-size-xl: 1.75rem;    /* 28px — H2, ×1.27 */
  --font-size-2xl: 2.25rem;   /* 36px — H1, ×1.29 */
  --font-size-3xl: 3rem;      /* 48px — Display, ×1.33 */
  --font-size-4xl: 3.75rem;   /* 60px — Display large, ×1.25 */

  /* --- Начертания --- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- Межстрочные интервалы (unitless-множители — сами масштабируются
     вместе с font-size, отдельно на брейкпоинты подстраивать не нужно) --- */
  --line-height-tight: 1.1;    /* крупные display/H1 */
  --line-height-heading: 1.25; /* H2–H4 */
  --line-height-default: 1.3;  /* короткие UI-строки (кнопки, лейблы) */
  --line-height-body: 1.5;     /* длинный текст-абзац */

  /* --- Трекинг --- */
  --letter-spacing-tight: -0.01em;   /* крупные заголовки */
  --letter-spacing-tighter: -0.02em; /* display на очень крупных размерах (1101+) */
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;     /* overline/лейблы КАПСОМ */

  /* --- Оптимальная длина строки для длинного текста, в ch (устойчива
     к масштабу — считается от размера самого элемента, а не root) --- */
  --measure-body: 66ch;
  --measure-body-lg: 58ch;
  --measure-body-sm: 72ch;

  /* --- Вертикальный ритм (отступы между ролями) ---
     Всё в em — то есть каждое значение считается от font-size ТОГО
     элемента, на который падает отступ (margin-top второго элемента в
     паре). Заголовки на 1101/1441 становятся крупнее (см. шаги выше) —
     их отступы в em вырастают вместе с ними автоматически, без отдельных
     переопределений под брейкпоинты. */
  --space-stack-heading-heading: 0.4em;  /* заголовок → подзаголовок-заголовок сразу под ним (Display→H1, H1→H2, …) — тесная группировка */
  --space-stack-heading-lead: 0.55em;    /* заголовок → лид/текст сразу под ним (H1→Body-lg, как "Вы искали…" → "И вы его нашли") */
  --space-stack-paragraph: 1em;          /* текст → текст — обычный ритм абзацев */
  --space-stack-section: 2em;            /* текст → новый заголовок — начало новой секции, отступ крупнее, чем внутри группы */
}

/*
  Зона "десктоп" (1101+, root уже заморожен на 950px) — первый явный шаг
  роста для заголовков и display, продолжающий иерархию, которую дальше
  сам по себе fluid-скейлинг уже не тянет.
*/
@media (min-width: 1101px) {
  :root {
    --font-size-lg: 2rem;      /* 32px — H3 */
    --font-size-xl: 2.5rem;    /* 40px — H2 */
    --font-size-2xl: 3.25rem;  /* 52px — H1 */
    --font-size-3xl: 4.25rem;  /* 68px — Display */
    --font-size-4xl: 5.25rem;  /* 84px — Display large */
  }
}

/* Зона "десктоп XL" (1441+) — второй, чуть более крупный шаг той же
   лестницы: hero/display-заголовки на очень широких экранах выигрывают
   от продолжения роста. Тело текста (body/caption/…) от ширины экрана
   по-прежнему не зависит нигде. */
@media (min-width: 1441px) {
  :root {
    --font-size-lg: 2.125rem;  /* 34px — H3 */
    --font-size-xl: 2.75rem;   /* 44px — H2 */
    --font-size-2xl: 3.625rem; /* 58px — H1 */
    --font-size-3xl: 4.75rem;  /* 76px — Display */
    --font-size-4xl: 6rem;     /* 96px — Display large */
  }
}

/* --- Базовый сброс для примеров/страниц, использующих эту шкалу --- */
body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
}

/* --- Роли (utility-классы) ---
   Называем по смыслу роли, а не по тегу — один и тот же класс можно
   вешать на любой элемент (div/span/h1/p), верстая по BEM-компонентам,
   как в остальном проекте. */

.text-display-lg {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0;
}

.text-display {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0;
}

.text-h1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0;
}

.text-h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.text-h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.text-h4 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-md);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.text-body-lg {
  font-family: var(--font-family-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
  max-width: var(--measure-body-lg);
  margin: 0;
}

.text-body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
  max-width: var(--measure-body);
  margin: 0;
}

.text-body-sm {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
  max-width: var(--measure-body-sm);
  margin: 0;
}

.text-caption {
  font-family: var(--font-family-body);
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-default);
  font-weight: var(--font-weight-regular);
  margin: 0;
}

.text-micro {
  font-family: var(--font-family-body);
  font-size: var(--font-size-3xs);
  line-height: var(--line-height-default);
  font-weight: var(--font-weight-regular);
  margin: 0;
}

.text-label {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-default);
  font-weight: var(--font-weight-semibold);
}

.text-overline {
  font-family: var(--font-family-body);
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-default);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.text-button {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-default);
  font-weight: var(--font-weight-semibold);
}

.text-link {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.text-code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
}

/* На крупных display-размерах (1101+, см. шаги выше) трекинг слегка
   поджимается дополнительно — оптически крупные буквы кажутся более
   разреженными, чем тот же -0.01em на мобильном размере. */
@media (min-width: 1101px) {
  .text-display-lg,
  .text-display {
    letter-spacing: var(--letter-spacing-tighter);
  }
}

/*
  Вертикальный ритм — отступ между соседними ролями зависит от того, ЧТО
  за чем идёт (margin-top на втором элементе пары; см. --space-stack-*
  выше). Три смысловых случая, все сочетания ролей внутри каждого:

  1) Заголовок → более мелкий заголовок сразу под ним ("подзаголовок",
     напр. Display → H1, H1 → H2, H2 → H3, H3 → H4, включая пропуск
     уровня вроде H1 → H3) — самая тесная группировка, читаются как пара.
  2) Заголовок → лид/текст сразу под ним (напр. H1 → Body-lg, как
     "Вы искали продуктового дизайнера" → "И вы его нашли") — чуть
     свободнее, но всё ещё явно "принадлежит" заголовку сверху.
  3) Текст → текст (Body/Body-lg/Body-sm вперемешку) — обычный ритм
     абзацев.
  4) Текст (или caption/micro) → новый заголовок — начало новой секции,
     самый большой отступ: заголовок явно отделяется от предыдущего блока
     и группируется с тем, что идёт ПОСЛЕ него (см. случаи 1–2 выше).

  Первый элемент в контейнере — без отступа сверху (см. :first-child в
  конце), чтобы не было лишнего воздуха у самого начала блока.
*/

.text-display-lg + .text-display,
.text-display-lg + .text-h1,
.text-display + .text-h1,
.text-display + .text-h2,
.text-h1 + .text-h2,
.text-h1 + .text-h3,
.text-h2 + .text-h3,
.text-h2 + .text-h4,
.text-h3 + .text-h4 {
  margin-top: var(--space-stack-heading-heading);
}

.text-display-lg + .text-body-lg,
.text-display-lg + .text-body,
.text-display + .text-body-lg,
.text-display + .text-body,
.text-h1 + .text-body-lg,
.text-h1 + .text-body,
.text-h2 + .text-body-lg,
.text-h2 + .text-body,
.text-h3 + .text-body-lg,
.text-h3 + .text-body,
.text-h4 + .text-body-lg,
.text-h4 + .text-body {
  margin-top: var(--space-stack-heading-lead);
}

.text-body-lg + .text-body-lg,
.text-body-lg + .text-body,
.text-body-lg + .text-body-sm,
.text-body + .text-body-lg,
.text-body + .text-body,
.text-body + .text-body-sm,
.text-body-sm + .text-body-sm,
.text-body-sm + .text-body {
  margin-top: var(--space-stack-paragraph);
}

:is(.text-body-lg, .text-body, .text-body-sm, .text-caption, .text-micro)
  + :is(.text-display-lg, .text-display, .text-h1, .text-h2, .text-h3, .text-h4) {
  margin-top: var(--space-stack-section);
}

:is(
  .text-display-lg, .text-display, .text-h1, .text-h2, .text-h3, .text-h4,
  .text-body-lg, .text-body, .text-body-sm, .text-caption, .text-micro
):first-child {
  margin-top: 0;
}

/* --- Выравнивание ---
   Отдельные utility-классы, независимые от роли — вешаются вторым
   классом на тот же элемент (напр. class="text-h1 text-align-center"). */
.text-align-left {
  text-align: left;
}

.text-align-center {
  text-align: center;
}

.text-align-right {
  text-align: right;
}

/* --- Висячие предлоги и союзы ---
   Чистым CSS нельзя запретить одиночному предлогу/союзу остаться в конце
   строки — для этого нужно заменить пробел после него на неразрывный
   (U+00A0) прямо в тексте, см. typography.js (hangPrepositions/
   initTypography). Здесь только браузерная подстраховка для остального
   переноса строк — там, где .js по каким-то причинам не подключён,
   text-wrap: pretty снижает число некрасивых висячих слов и переносов
   вообще (поддержка Chrome/Edge 117+, в остальных браузерах просто
   игнорируется как невалидное значение). */
.text-display-lg,
.text-display,
.text-h1,
.text-h2,
.text-h3,
.text-h4,
.text-body-lg,
.text-body,
.text-body-sm {
  text-wrap: pretty;
}