/* type.css — типографическая шкала.
   Девять ролей, между ними пусто: очень крупно и спокойно-мелко.
   Промежуточных размеров нет намеренно — они и делают страницу похожей на шаблон. */

/* Мера абзаца из base.css не распространяется на роли-объекты:
   заголовок, число и микро-метка живут по ширине колонки. */
.d1, .d2, .d3, .h1, .h2, .num, .micro, .marker {
  max-width: none;
}

/* Дисплейные: работают как объект, а не как строка текста */
.d1 {
  font-size: var(--as-fs-d1);
  line-height: var(--as-lh-display);
  letter-spacing: var(--as-tr-display);
  font-weight: var(--as-w-semibold);
  text-transform: uppercase;
}

.d2 {
  font-size: var(--as-fs-d2);
  line-height: var(--as-lh-display);
  letter-spacing: var(--as-tr-display);
  font-weight: var(--as-w-semibold);
  text-transform: uppercase;
}

.d3 {
  font-size: var(--as-fs-d3);
  line-height: var(--as-lh-head);
  letter-spacing: var(--as-tr-display);
  font-weight: var(--as-w-medium);
  text-transform: uppercase;
}

/* Заголовки */
.h1 {
  font-size: var(--as-fs-h1);
  line-height: var(--as-lh-head);
  letter-spacing: var(--as-tr-head);
  font-weight: var(--as-w-semibold);
}

.h2 {
  font-size: var(--as-fs-h2);
  line-height: var(--as-lh-head);
  letter-spacing: var(--as-tr-head);
  font-weight: var(--as-w-medium);
}

/* Текст */
.lead {
  font-size: var(--as-fs-lead);
  line-height: var(--as-lh-lead);
  letter-spacing: var(--as-tr-body);
  font-weight: var(--as-w-regular);
  max-width: var(--as-measure);
}

.body {
  font-size: var(--as-fs-body);
  line-height: var(--as-lh-body);
  letter-spacing: var(--as-tr-body);
  font-weight: var(--as-w-regular);
  max-width: var(--as-measure);
}

/* Микро-метка над блоком: держит ритм и заменяет декор */
.micro {
  font-size: var(--as-fs-micro);
  line-height: var(--as-lh-flat);
  letter-spacing: var(--as-tr-micro);
  font-weight: var(--as-w-medium);
  text-transform: uppercase;
}

/* Число как графика: крупно и тонко */
.num {
  font-size: var(--as-fs-num);
  line-height: var(--as-lh-flat);
  letter-spacing: var(--as-tr-display);
  font-weight: var(--as-w-regular);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Модификаторы тона — единственные, что разрешены поверх шкалы */
.t-mute {
  color: var(--as-text-on-dark-mute);
}

.on-light .t-mute,
.t-mute-light {
  color: var(--as-text-on-light-mute);
}

.t-accent {
  color: var(--as-accent-400);
}

.on-light .t-accent {
  color: var(--as-accent-500);
}