/* ========================================
   UI Kit - Typography (Базовые текстовые стили)
   ======================================== */

/* ВАЖНО: Этот файл должен загружаться ПОСЛЕ Bootstrap, чтобы перекрыть его стили
   Порядок загрузки в header.php:
   1. variables.css → 2. Bootstrap (16px) → 3. typography.css (16px root) → 4. styles.css
*/

/* =================================
   Базовый размер шрифта
   ================================= */

html {
    font-size: var(--font-size-base);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-base);
    font-optical-sizing: none;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Inter: tabular numbers для счётчиков, цен, результатов */
    font-variant-numeric: tabular-nums;
}

/* Шрифт для заголовков */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-family-heading);
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0;
}

h1, .h1 {
    font-size: var(--type-heading-h1-size);
    line-height: var(--type-heading-h1-line-height);
    font-weight: 500;
}

h2, .h2 {
    font-size: var(--type-heading-h2-size);
    line-height: var(--type-heading-h2-line-height);
    font-weight: 500;
}

h3, .h3 {
    font-size: var(--type-heading-h3-size);
    line-height: var(--type-heading-h3-line-height);
    font-weight: 500;
}

h4, .h4 {
    font-size: var(--type-heading-h4-size);
    line-height: var(--type-heading-h4-line-height);
    font-weight: 500;
}

h5, .h5 {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line-height);
    font-weight: 500;
}

h6, .h6 {
    font-size: var(--type-ui-caption-size);
    line-height: var(--type-ui-caption-line-height);
    font-weight: 500;
}

/* Нейтральный heading-паттерн для non-heading элементов */
.gc-heading-text {
    font-size: var(--type-ui-caption-size);
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

/* =================================
   Базовый стиль для тега <small>
   ================================= */

/* Ровно 14px — Figma UI/Caption/Regular (--type-ui-caption-size) */
small,
.small {
    font-size: var(--type-ui-caption-size);
    line-height: var(--type-ui-caption-line-height);
    font-weight: 400;
}

/* UI Kit — мета в списках: caption (14px), не xs */
small.gc-list-meta,
.gc-list-meta small {
    font-size: inherit;
    line-height: inherit;
}

/* =================================
   Типографские утилиты
   ================================= */

/* Утилиты для размеров текста */
.text-xs { font-size: var(--type-ui-meta-size); }
.text-sm { font-size: var(--type-ui-caption-size); }
.text-md { font-size: var(--type-body-size); }
.text-lg { font-size: var(--type-heading-h4-size); }
.text-xl { font-size: var(--type-heading-h3-size); }

/* UI Kit варианты с префиксом gc- */
.gc-text-xs { font-size: var(--type-ui-meta-size) !important; }
.gc-text-sm { font-size: var(--type-ui-caption-size) !important; }
.gc-text-md { font-size: var(--type-body-size) !important; }
.gc-text-lg { font-size: var(--type-heading-h4-size) !important; }
.gc-text-xl { font-size: var(--type-heading-h3-size) !important; }

/* Утилиты для веса шрифта */
.gc-font-normal { font-weight: 400 !important; }
.gc-font-medium { font-weight: 500 !important; }
.gc-font-semibold { font-weight: 600 !important; }
.gc-font-bold { font-weight: 700 !important; }

/* Утилиты для цвета текста (UI Kit) */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-secondary-color { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-accent { color: var(--accent-link); }

/* UI Kit варианты с префиксом gc- */
.gc-text-primary { color: var(--text-primary) !important; }
.gc-text-secondary { color: var(--text-secondary) !important; }
.gc-text-tertiary { color: var(--text-tertiary) !important; }
.gc-text-disabled { color: var(--text-disabled) !important; }
.gc-text-accent { color: var(--accent-link) !important; }

/* Текст пустого состояния внутри карточки */
.gc-empty-text {
    font-size: var(--type-ui-caption-size);
    color: var(--text-secondary);
    margin: 0;
}

/* Утилита для сохранения переносов строк */
.text-preline {
    white-space: pre-line;
}

.gc-text-preline {
    white-space: pre-line !important;
}

/* =================================
   Figma Text Styles (type roles)
   ================================= */

.type-ui-micro {
    font-size: var(--type-ui-micro-size);
    line-height: var(--type-ui-micro-line-height);
    font-weight: 400;
}

.type-ui-micro-medium {
    font-size: var(--type-ui-micro-size);
    line-height: var(--type-ui-micro-line-height);
    font-weight: 500;
}

.type-ui-meta {
    font-size: var(--type-ui-meta-size);
    line-height: var(--type-ui-meta-line-height);
    font-weight: 400;
}

.type-ui-caption {
    font-size: var(--type-ui-caption-size);
    line-height: var(--type-ui-caption-line-height);
    font-weight: 400;
}

.type-ui-caption-medium {
    font-size: var(--type-ui-caption-size);
    line-height: var(--type-ui-caption-line-height);
    font-weight: 500;
}

.type-ui-title {
    font-size: var(--type-ui-title-size);
    line-height: var(--type-ui-title-line-height);
    font-weight: 500;
}

/* Вторичный многострочный текст (empty state, placeholder, подсказки) — 14px + prose rhythm */
.type-ui-description {
    font-size: var(--font-size-14);
    line-height: var(--line-height-prose);
    font-weight: 400;
}

.type-body {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line-height);
    font-weight: 400;
}

.type-body-medium {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line-height);
    font-weight: 500;
}

.type-heading-h4 {
    font-size: var(--type-heading-h4-size);
    line-height: var(--type-heading-h4-line-height);
    font-weight: 500;
}

.type-heading-h3 {
    font-size: var(--type-heading-h3-size);
    line-height: var(--type-heading-h3-line-height);
    font-weight: 500;
}

.type-heading-h2 {
    font-size: var(--type-heading-h2-size);
    line-height: var(--type-heading-h2-line-height);
    font-weight: 500;
}

.type-heading-h1 {
    font-size: var(--type-heading-h1-size);
    line-height: var(--type-heading-h1-line-height);
    font-weight: 500;
}

/* Каталог / индекс: Climate Crisis + аватар справа (оружие, не event-info-*) */
.gc-page-heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.gc-page-heading__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.gc-page-heading__title {
    margin: 0;
    font-family: var(--font-family-heading-alt);
    font-size: var(--type-heading-h1-size);
    font-weight: 400;
    line-height: var(--type-heading-h1-line-height);
    color: var(--text-primary);
}

.gc-page-heading__row > a {
    display: inline-flex;
    flex-shrink: 0;
    color: inherit;
    text-decoration: none;
}

/* =================================
   Section Headers
   ================================= */

/* Заголовок секции для группировки контента */
.gc-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.gc-section-title {
    font-size: var(--type-ui-caption-size);
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}

/* =================================
   ИСПОЛЬЗОВАНИЕ
   ================================= */

/*
Figma Text Styles → CSS:
  Regular body/caption/meta — font-weight 400 (body, .type-ui-caption, .gc-list-meta)
  Medium — font-weight 500 (.type-ui-title, .gc-list-title, headings)

Утилиты размеров (legacy scale):
  <p class="text-sm">14px текст</p>
  <span class="text-xs">13px meta</span>
  
Утилиты цветов:
  <p class="text-primary">Основной цвет</p>
  <span class="text-tertiary">Третичный цвет</span>
*/