/* ==========================================================================
   TYPOGRAPHY — шкала і текстові класи
   Розміри плавні через clamp() (токени у variables.css).
   Один H1 на сторінку, ієрархія H2 → H3 без пропусків рівнів.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   ШКАЛА ЗАГОЛОВКІВ
   Класи-двійники (.h1 … .h4) дають візуальний розмір без зміни рівня
   заголовка — потрібні там, де семантика і вигляд розходяться.
   --------------------------------------------------------------------------- */
h1,
.h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h2,
.h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

h3,
.h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

h4,
.h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

h5,
h6 {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

/* ---------------------------------------------------------------------------
   ТЕКСТОВІ РОЛІ
   --------------------------------------------------------------------------- */

/* Надзаголовок над H1 і H2: «ДНІПРО · ОБЛАСТЬ · УКРАЇНА» */
.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-primary-700);
}

/* Підзаголовок під H1 та вступний абзац секції */
.lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text-700);
}

.text-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* Дисклеймер про 103, примітки під ціною, юридичні уточнення.
   Навмисно text-700, а не text-500: примітки часто стоять на bg-soft і
   bg-cream, де text-500 не добирає до AA. Див. попередження у variables.css. */
.text-note {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text-700);
}

.text-xs {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

/* ---------------------------------------------------------------------------
   ВЕРТИКАЛЬНИЙ РИТМ
   Відступ дає лише те, що йде після сусіда, — перший елемент блоку
   ніколи не додає зайвого поля згори.
   --------------------------------------------------------------------------- */
.prose > * + * {
  margin-top: var(--space-4);
}

.prose > * + :is(h2, .h2) {
  margin-top: var(--space-10);
}

.prose > * + :is(h3, .h3, h4, .h4) {
  margin-top: var(--space-8);
}

.prose :is(h2, h3, h4) + * {
  margin-top: var(--space-3);
}

.prose {
  max-width: 68ch;   /* довший рядок читається гірше */
}

/* ---------------------------------------------------------------------------
   СПИСКИ В ТЕКСТІ
   Марковані списки без класу — усередині .prose і статичних сторінок.
   --------------------------------------------------------------------------- */
.prose :is(ul, ol) {
  padding-left: var(--space-6);
}

.prose :is(ul, ol) > li + li {
  margin-top: var(--space-2);
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

/* ---------------------------------------------------------------------------
   ЧИСЛА
   Табличні цифри там, де стовпчик цифр має вирівнюватись, і в ціні —
   щоб «1500» не «стрибало» при зміні ваги шрифта.
   --------------------------------------------------------------------------- */
.num-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------------
   ПЕРЕНОСИ
   Номер телефону і короткі підписи не мають розриватися посередині.
   --------------------------------------------------------------------------- */
.nowrap {
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   АКЦЕНТИ В ТЕКСТІ
   --------------------------------------------------------------------------- */
.text-primary {
  color: var(--color-primary-700);
}

.text-muted {
  color: var(--color-muted);
}

.text-danger {
  color: var(--color-danger-600);
}

.text-success {
  color: var(--color-success-600);
}

/* Підсвічування ключового фрагмента в заголовку.
   Колір не єдиний носій змісту — сам текст лишається самодостатнім. */
.text-highlight {
  color: var(--color-primary-700);
}