/*
  Типографика ДС: фиксированные размеры по утверждённой таблице
  для ширин 375, 600, 850, 1000, 1280, 1440, 1920 CSS px.
  H1–H3, основной текст и кнопки не используют fluid-масштабирование.
  База действует до 600px (включая 375 и меньше), далее — min-width.
  Между точками размеры постоянные; на 1920+ действует последняя ступень.
  Значения в px исключают повторное масштабирование через rem.
  scale.css продолжает управлять остальными размерами макета.

  ПУНКТУАЦИЯ ПОДЗАГОЛОВКОВ — правило всего сайта, всех страниц и компонентов:
  если подзаголовок состоит из одного предложения, завершающую точку не ставим.
  В нескольких предложениях пунктуацию сохраняем. Вопросительный/восклицательный
  знак, многоточие, точки сокращений и инициалов не удаляем.
  Новый подзаголовок помечается data-subtitle (вместе с ролью .text-body*).
  Общее применение к статическому и динамическому контенту — site/typography-rules.js;
  CSS не умеет определять границы предложений. Правило не меняет шрифт или размер.
*/

:root {
  /* --- Семейства шрифтов ---
     Playfair Display 400 — все заголовки сайта, включая Главную и попапы.
     IBM Plex Mono — основной текст и кнопки.
     Начертания и unicode-range подключаются в fonts.08fb285002f2.css. */
  --font-family-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-family-body: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* --- Заголовки: один и тот же шрифт на всех уровнях — отличается
     только font-size (см. --font-size-* ниже), family/вес/интерлиньяж
     одни на всех: Display/H1/H2/H3. Вес — regular (400).
     Контрастная антиква с засечками, латиница и кириллица. */
  --letter-spacing-heading: 0;
  --line-height-heading: 1.04;

  /* --- Обычный текст и кнопки: один размер/интерлиньяж/трекинг на весь
     сайт, снят с подзаголовка Главной (.mood-subtitle) — кнопки
     дополнительно берут тот же трекинг (.mood-primary использует его же). */
  --font-size-text: 14px;
  --line-height-text: 1.42;
  --letter-spacing-text: -0.03em;

  /* --- Размеры для 375px и меньше; базовая ступень до 600px --- */
  --font-size-3xs: 9.9084px;
  --font-size-2xs: 11.8901px;
  --font-size-sm: 13.8718px;
  --font-size-base: 15.8535px;

  --font-size-lg: 22px;
  --font-size-xl: 26px;
  --font-size-2xl: 34px;
  --font-size-3xl: 47.5604px;
  --font-size-4xl: 59.4505px;

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

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

  /* --- Трекинг ---
     Заголовочные роли (Display/H1–H3) используют --letter-spacing-heading
     выше, эти два — не для ролей, только для крупных декоративных цифр
     на страницах кейсов (.case-head__num/.case-stat__value и т.п.). */
  --letter-spacing-tight: -0.01em;
  --letter-spacing-tighter: -0.02em;
  --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 второго элемента в
     паре). Заголовки на новых брейкпоинтах становятся крупнее —
     их отступы в 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;            /* текст → новый заголовок — начало новой секции, отступ крупнее, чем внутри группы */
}

/* Размеры каждой контрольной ширины до следующего брейкпоинта. */
@media (min-width: 600px) {
  :root {
    --font-size-3xs: 11.2821px;
    --font-size-2xs: 13.5385px;
    --font-size-sm: 15.7949px;
    --font-size-base: 18.0513px;

    --font-size-lg: 24px;
    --font-size-xl: 32px;
    --font-size-2xl: 40px;
    --font-size-3xl: 54.1538px;
    --font-size-4xl: 67.6923px;
    --font-size-text: 16px;
  }
}

@media (min-width: 850px) {
  :root {
    --font-size-3xs: 12.8083px;
    --font-size-2xs: 15.37px;
    --font-size-sm: 17.9316px;
    --font-size-base: 20.4933px;

    --font-size-lg: 28px;
    --font-size-xl: 36px;
    --font-size-2xl: 46px;
    --font-size-3xl: 61.4799px;
    --font-size-4xl: 76.8498px;
    --font-size-text: 18px;
  }
}

@media (min-width: 1000px) {
  :root {
    --font-size-3xs: 13.4188px;
    --font-size-2xs: 16.1026px;
    --font-size-sm: 18.7863px;
    --font-size-base: 21.4701px;

    --font-size-lg: 30px;
    --font-size-xl: 38px;
    --font-size-2xl: 48px;
    --font-size-3xl: 64.4103px;
    --font-size-4xl: 80.5128px;
    --font-size-text: 20px;
  }
}

@media (min-width: 1280px) {
  :root {
    --font-size-3xs: 13.4188px;
    --font-size-2xs: 16.1026px;
    --font-size-sm: 18.7863px;
    --font-size-base: 21.4701px;

    --font-size-lg: 32px;
    --font-size-xl: 40px;
    --font-size-2xl: 52px;
    --font-size-3xl: 68px;
    --font-size-4xl: 84px;
    --font-size-text: 20px;
  }
}

@media (min-width: 1440px) {
  :root {
    --font-size-3xs: 13.4188px;
    --font-size-2xs: 16.1026px;
    --font-size-sm: 18.7863px;
    --font-size-base: 21.4701px;

    --font-size-lg: 32px;
    --font-size-xl: 40px;
    --font-size-2xl: 52px;
    --font-size-3xl: 68px;
    --font-size-4xl: 84px;
    --font-size-text: 20px;
  }
}

@media (min-width: 1920px) {
  :root {
    --font-size-3xs: 13.4188px;
    --font-size-2xs: 16.1026px;
    --font-size-sm: 18.7863px;
    --font-size-base: 21.4701px;

    --font-size-lg: 34px;
    --font-size-xl: 44px;
    --font-size-2xl: 58px;
    --font-size-3xl: 76px;
    --font-size-4xl: 96px;
    --font-size-text: 22px;
  }
}

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

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

.text-display-lg,
.text-display,
.text-h1,
.text-h2,
.text-h3 {
  font-family: var(--font-family-heading);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-heading);
  margin: 0;
}

.text-display-lg {
  font-size: var(--font-size-4xl);
}

.text-display {
  font-size: var(--font-size-3xl);
}

.text-h1 {
  font-size: var(--font-size-2xl);
}

/* Banner headings keep fixed DS sizes between breakpoints.
   The semantic heading remains h1; phones use the H2 visual size. */
.mood-title,
.case-cover__title {
  font-size: var(--font-size-2xl);
  overflow-wrap: anywhere;
}
@media (max-width: 599px) {
  .mood-title,
  .case-cover__title { font-size: var(--font-size-xl); }
}

.text-h2 {
  font-size: var(--font-size-xl);
}

.text-h3 {
  font-size: var(--font-size-lg);
}


/* Обычный текст сайта — один стиль на всех ролях (подзаголовок Главной),
   .text-body-lg/.text-body-sm остаются отдельными классами только ради
   max-width (длина строки), не ради другого шрифта/размера. */
.text-body-lg,
.text-body,
.text-body-sm {
  font-family: var(--font-family-body);
  font-size: var(--font-size-text);
  line-height: var(--line-height-text);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-text);
  margin: 0;
}

.text-body-lg {
  max-width: var(--measure-body-lg);
}

.text-body {
  max-width: var(--measure-body);
}

.text-body-sm {
  max-width: var(--measure-body-sm);
}

.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;
}

/* Текст кнопок — один и тот же на любой кнопке сайта (большой или
   маленькой), снят с кнопок Главной (.mood-primary): та же пара
   размер/трекинг и начертание, что и у обычного текста (regular). */
.text-button {
  font-family: var(--font-family-body);
  font-size: var(--font-size-text);
  line-height: var(--line-height-default);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-text);
}

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

  1) Заголовок → более мелкий заголовок сразу под ним ("подзаголовок",
     напр. Display → H1, H1 → H2, H2 → H3, включая пропуск
     уровня вроде H1 → H3) — самая тесная группировка, читаются как пара.
  2) Заголовок → лид/текст сразу под ним (напр. H1 → Body-lg, как
     "Вы искали продуктового дизайнера" → "И вы его нашли") — чуть
     свободнее, но всё ещё явно "принадлежит" заголовку сверху.
  3) Текст → текст (Body/Body-lg/Body-sm вперемешку) — обычный ритм
     абзацев.
  4) Текст → новый заголовок — начало новой секции, самый большой отступ:
     заголовок явно отделяется от предыдущего блока и группируется с тем,
     что идёт ПОСЛЕ него (см. случаи 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 {
  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 {
  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)
  + :is(.text-display-lg, .text-display, .text-h1, .text-h2, .text-h3) {
  margin-top: var(--space-stack-section);
}

:is(
  .text-display-lg, .text-display, .text-h1, .text-h2, .text-h3,
  .text-body-lg, .text-body, .text-body-sm
):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-body-lg,
.text-body,
.text-body-sm {
  text-wrap: pretty;
}