/* ============================================================
   Auditorium — Typography
   Шрифты и типографика в соответствии с дизайном Figma
   ============================================================ */

/* ============================================================
   1. Подключение шрифтов
   ============================================================ */

/* Bebas Neue Cyrillic — основной заголовочный шрифт */
@font-face {
    font-family: 'Bebas Neue Cyrillic';
    src: local('Bebas Neue Cyrillic'),
         local('Bebas Neue'),
         url('../fonts/BebasNeueCyrillic.woff2') format('woff2'),
         url('../fonts/BebasNeueCyrillic.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Arial MT — используется системный аналог */
/* Браузеры автоматически подставят Arial, если Arial MT недоступен */

/* ============================================================
   2. Базовые стили текста
   ============================================================ */

html {
    font-family: var(--font-body);
    font-size: var(--fs-16-reg);
    font-weight: var(--fw-16-reg);
    line-height: var(--lh-16-reg);
    color: var(--color-text);
}

/* ============================================================
   3. Заголовки (Bebas Neue Cyrillic)
   ============================================================ */

h1, .h1 {
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    font-weight: var(--fw-h1);
    line-height: var(--lh-h1);
    letter-spacing: 0;
    color: var(--color-text);
}

h2, .h2 {
    font-family: var(--font-heading);
    font-size: 43px;
    font-weight: var(--fw-h1);
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--color-text);
}

h3, .h3 {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: var(--fw-h1);
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--color-text);
}

h4, .h4 {
    font-family: var(--font-heading);
    font-size: 23px;
    font-weight: var(--fw-h1);
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--color-text);
}

h5, .h5 {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: var(--fw-h1);
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--color-text);
}

h6, .h6 {
    font-family: var(--font-heading);
    font-size: var(--fs-18-bold);
    font-weight: var(--fw-18-bold);
    line-height: var(--lh-18-bold);
    letter-spacing: 0;
    color: var(--color-text);
}

/* ============================================================
   4. Текстовые стили (Arial MT)
   ============================================================ */

/* 18 bold — кнопки, акцентный текст */
.text-18-bold {
    font-family: var(--font-body);
    font-size: var(--fs-18-bold);
    font-weight: var(--fw-18-bold);
    line-height: var(--lh-18-bold);
}

/* 16 med — подзаголовки статистики */
.text-16-med {
    font-family: var(--font-body);
    font-size: var(--fs-16-med);
    font-weight: var(--fw-16-med);
    line-height: var(--lh-16-med);
}

/* 16 bold — жирный текст */
.text-16-bold {
    font-family: var(--font-body);
    font-size: var(--fs-16-bold);
    font-weight: var(--fw-16-bold);
    line-height: var(--lh-16-bold);
}

/* 16 reg — основной текст */
.text-16-reg {
    font-family: var(--font-body);
    font-size: var(--fs-16-reg);
    font-weight: var(--fw-16-reg);
    line-height: var(--lh-16-reg);
}

/* 14 bold — мелкий жирный текст */
.text-14-bold {
    font-family: var(--font-body);
    font-size: var(--fs-14-bold);
    font-weight: var(--fw-14-bold);
    line-height: var(--lh-14-bold);
}

/* 14 reg — мелкий текст (подписи, копирайт) */
.text-14-reg {
    font-family: var(--font-body);
    font-size: var(--fs-14-reg);
    font-weight: var(--fw-14-reg);
    line-height: var(--lh-14-reg);
}

/* 12 — самый мелкий текст */
.text-12 {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
}

/* ============================================================
   5. Специальные стили
   ============================================================ */

/* Статистика (большие фиолетовые цифры) */
.stat-number {
    font-family: var(--font-heading);
    font-size: 57px;
    font-weight: var(--fw-h1);
    line-height: var(--lh-h1);
    color: var(--color-primary);
}

/* Хлебные крошки */
.breadcrumbs {
    font-family: var(--font-body);
    font-size: var(--fs-16-reg);
    font-weight: var(--fw-16-reg);
    line-height: var(--lh-16-reg);
    color: var(--color-link);
}

.breadcrumbs .breadcrumbs__current {
    font-weight: var(--fw-16-bold);
    color: var(--color-text);
}

.breadcrumbs .breadcrumbs__sep {
    margin: 0 4px;
}

/* Текст в Header (верхняя панель) */
.header-text {
    font-family: var(--font-heading);
    font-size: var(--fs-18-bold);
    line-height: normal;
    color: var(--color-white);
}

/* Кнопки (текст) */
.btn-text {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: var(--fw-h1);
    line-height: normal;
}

/* Подвал — заголовки секций */
.footer-heading {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: var(--fw-h1);
    line-height: normal;
    color: var(--color-text);
}

/* Подвал — ссылки */
.footer-link {
    font-family: var(--font-body);
    font-size: var(--fs-16-reg);
    font-weight: var(--fw-16-reg);
    line-height: var(--lh-16-reg);
    text-decoration: underline;
    text-underline-offset: from-font;
}

/* Страница статьи — контент */
.article-content p {
    font-family: var(--font-body);
    font-size: var(--fs-16-reg);
    font-weight: var(--fw-16-reg);
    line-height: var(--lh-16-reg);
    margin-bottom: 16px;
}

.article-content strong,
.article-content b {
    font-weight: var(--fw-16-bold);
}