/* =============================================================================
   УНИФИЦИРОВАННАЯ СИСТЕМА ТИПОГРАФИКИ
   ============================================================================= */

/* ============= CSS-ПЕРЕМЕННЫЕ ДЛЯ РАЗМЕРОВ ============= */
:root {
    /* Унифицированные размеры текста */
    --font-size-small: 12px;
    --font-size-medium: 16px;
    --font-size-large: 20px;
    --font-size-xlarge: 24px;
    
    /* Дополнительные размеры для специальных случаев */
    --font-size-tiny: 10px;      /* Для очень мелких элементов */
    --font-size-body: 16px;      /* Базовый размер текста (пока переходный) */
    --font-size-huge: 24px;      /* Для больших чисел (баланс) */
    
    /* Веса шрифтов */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 600;
    
    /* Высота строк */
    --line-height-compact: 1.2;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;
}

/* ============= УТИЛИТАРНЫЕ КЛАССЫ ДЛЯ РАЗМЕРОВ ============= */

/* Размеры текста */
.text-small {
    font-size: var(--font-size-small);
    line-height: var(--line-height-compact);
}

.text-medium {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-normal);
}

.text-large {
    font-size: var(--font-size-large);
    line-height: var(--line-height-normal);
}

.text-xlarge {
    font-size: var(--font-size-xlarge);
    line-height: var(--line-height-compact);
}

/* Специальные размеры */
.text-tiny {
    font-size: var(--font-size-tiny);
    line-height: var(--line-height-compact);
}

.text-body {
    font-size: var(--font-size-body);
    line-height: var(--line-height-normal);
}

.text-huge {
    font-size: var(--font-size-huge);
    line-height: var(--line-height-compact);
}

/* ============= УТИЛИТАРНЫЕ КЛАССЫ ДЛЯ ВЕСОВ ============= */

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* ============= СЕМАНТИЧЕСКИЕ КЛАССЫ ============= */

/* Заголовки */
.heading-page {
    font-size: var(--font-size-xlarge);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-compact);
}

.heading-section {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.heading-card {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-compact);
}

/* Текст */
.text-primary {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

.text-secondary {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--tg-theme-hint-color);
}

.text-caption {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-compact);
    color: var(--tg-theme-hint-color);
}

/* Интерактивные элементы */
.text-button {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-compact);
}

.text-button-small {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-compact);
}

.text-tab {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-compact);
}

.text-nav {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-compact);
}

/* Значения и метрики */
.text-value {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-compact);
}

.text-value-large {
    font-size: var(--font-size-huge);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-compact);
}

.text-progress {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-compact);
}

/* ============= АДАПТИВНОСТЬ ============= */

/* Для маленьких экранов слегка уменьшаем размеры */
@media (max-width: 350px) {
    :root {
        --font-size-xlarge: 22px;
        --font-size-large: 18px;
        --font-size-huge: 28px;
    }
}

/* ============= МИГРАЦИОННЫЕ КЛАССЫ ============= */

/* Классы для постепенной миграции существующего кода */
.migrate-to-small { font-size: var(--font-size-small) !important; }
.migrate-to-medium { font-size: var(--font-size-medium) !important; }
.migrate-to-large { font-size: var(--font-size-large) !important; }
.migrate-to-xlarge { font-size: var(--font-size-xlarge) !important; }

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

/**
 * РЕКОМЕНДАЦИИ ПО ПРИМЕНЕНИЮ:
 * 
 * 1. ЗАГОЛОВКИ:
 *    - Главные страницы: .heading-page или .text-xlarge
 *    - Секции: .heading-section или .text-large
 *    - Карточки: .heading-card или .text-medium
 * 
 * 2. ОСНОВНОЙ ТЕКСТ:
 *    - Важный текст: .text-primary или .text-medium
 *    - Описания: .text-secondary или .text-body
 *    - Подписи: .text-caption или .text-small
 * 
 * 3. ИНТЕРФЕЙС:
 *    - Кнопки: .text-button или .text-medium
 *    - Вкладки: .text-tab или .text-medium
 *    - Навигация: .text-nav или .text-small
 * 
 * 4. ЗНАЧЕНИЯ:
 *    - Обычные значения: .text-value или .text-large
 *    - Баланс, крупные числа: .text-value-large или .text-huge
 *    - Прогресс: .text-progress или .text-small
 * 
 * 5. МИГРАЦИЯ:
 *    - Для быстрого исправления используйте .migrate-to-* классы
 *    - Постепенно заменяйте на семантические классы
 */