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

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

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

/* Устанавливаем базовый размер 15px (ПЕРЕКРЫВАЕТ Bootstrap 16px) */
html {
    font-size: 15px; /* Базовый размер для всего проекта */
    font-weight: 500;
}

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

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

/* Глобальный размер small - адаптирован под базовый размер 15px */
small,
.small {
    font-size: 0.920em; /* 13.8px от 15px базового
                           Bootstrap использует .875em (14px от 16px)
                           Но при базовом 15px: .875em = 13.125px (слишком мало)
                           Поэтому используем .920em = 13.8px (ближе к 14px) */
}

/* UI Kit переопределение для компонентов - точный размер 14px */
small.gc-list-meta,
.gc-list-meta small {
    font-size: var(--font-size-sm); /* 14px (0.875rem) - фиксированный, не относительный */
}

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

/* Утилиты для размеров текста */
.text-xs { font-size: var(--font-size-xs); } /* 12px */
.text-sm { font-size: var(--font-size-sm); } /* 14px */
.text-md { font-size: var(--font-size-md); } /* 16px */
.text-lg { font-size: var(--font-size-lg); } /* 18px */
.text-xl { font-size: var(--font-size-xl); } /* 20px */

/* UI Kit варианты с префиксом gc- */
.gc-text-xs { font-size: var(--font-size-xs) !important; } /* 12px */
.gc-text-sm { font-size: var(--font-size-sm) !important; } /* 14px */
.gc-text-md { font-size: var(--font-size-md) !important; } /* 16px */
.gc-text-lg { font-size: var(--font-size-lg) !important; } /* 18px */
.gc-text-xl { font-size: var(--font-size-xl) !important; } /* 20px */

/* Утилиты для веса шрифта */
.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(--font-primary); }
.text-secondary { color: var(--font-secondary); }
.text-secondary-color { color: var(--font-secondary); }
.text-tertiary { color: var(--font-tertiary); }
.text-accent { color: var(--accent-link); }

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

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

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

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

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

.gc-section-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--font-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

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

/*
Базовый стиль <small>:
  <small>Относительный размер 13.8px</small>
  
UI Kit стиль в списках:
  <small class="gc-list-meta">Фиксированный размер 14px</small>
  
Утилиты размеров:
  <p class="text-sm">14px текст</p>
  <span class="text-xs">12px текст</span>
  
Утилиты цветов:
  <p class="text-primary">Основной цвет</p>
  <span class="text-tertiary">Третичный цвет</span>
*/