/**
 * =============================================================================
 * TYPOGRAPHY SYSTEM
 * =============================================================================
 * 
 * Система типографики для всего проекта.
 * Определяет стили для заголовков, текста и утилитарные классы
 * для работы с типографикой.
 * 
 * Структура:
 * - Base styles: Базовые стили для body
 * - Heading styles: Стили заголовков (h1-h6)
 * - Text styles: Стили текста
 * - Font weights: Утилиты для веса шрифта
 * - Text colors: Утилиты для цветов текста
 * - Text alignment: Утилиты для выравнивания
 * - Text transforms: Утилиты для трансформации текста
 * - Letter spacing: Утилиты для межбуквенных интервалов
 * - Line heights: Утилиты для высоты строк
 * 
 * @author: Carpathians Team
 * @version: 1.0.0
 * @updated: 2024
 */

/* ===== BASE TYPOGRAPHY ===== */
/* Базовые стили типографики */
body {
  font-family: var(--font-family-primary);  /* Основной шрифт */
  font-size: var(--font-size-base);         /* Базовый размер шрифта */
  font-weight: var(--font-weight-normal);   /* Обычный вес шрифта */
  color: var(--color-gray-900);             /* Основной цвет текста */
}

/* ===== HEADING STYLES ===== */
/* Стили заголовков с использованием утилитарных классов */

.heading-1 {
  font-size: var(--font-size-4xl);        /* 36px - самый большой заголовок */
  font-weight: var(--font-weight-extrabold); /* Очень жирный шрифт */
  line-height: var(--line-height-tight);  /* Плотная высота строки */
  letter-spacing: -0.025em;               /* Узкий межбуквенный интервал */
}

.heading-2 {
  font-size: var(--font-size-3xl);        /* 30px - заголовок h2 */
  font-weight: var(--font-weight-bold);   /* Жирный шрифт */
  line-height: var(--line-height-tight);  /* Плотная высота строки */
}

.heading-3 {
  font-size: var(--font-size-2xl);        /* 24px - заголовок h3 */
  font-weight: var(--font-weight-semibold); /* Полужирный шрифт */
  line-height: var(--line-height-tight);  /* Плотная высота строки */
}

.heading-4 {
  font-size: var(--font-size-xl);         /* 20px - заголовок h4 */
  font-weight: var(--font-weight-semibold); /* Полужирный шрифт */
  line-height: var(--line-height-tight);  /* Плотная высота строки */
}

.heading-5 {
  font-size: var(--font-size-lg);         /* 18px - заголовок h5 */
  font-weight: var(--font-weight-medium); /* Средний шрифт */
  line-height: var(--line-height-tight);  /* Плотная высота строки */
}

.heading-6 {
  font-size: var(--font-size-base);       /* 16px - заголовок h6 */
  font-weight: var(--font-weight-medium); /* Средний шрифт */
  line-height: var(--line-height-tight);  /* Плотная высота строки */
}

/* ===== TYPOGRAPHY UTILITIES ===== */
/* Специфичные утилиты для типографики */

/* Text truncation */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Text selection */
::selection {
  background-color: var(--color-primary);
  color: var(--color-white);
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */
/* Адаптивные стили типографики */

@media (max-width: 767px) {
  .heading-1 {
    font-size: var(--font-size-3xl);  /* Уменьшаем размер на мобильных */
  }
  
  .heading-2 {
    font-size: var(--font-size-2xl);
  }
  
  .heading-3 {
    font-size: var(--font-size-xl);
  }
}

/* ===== ACCESSIBILITY ===== */
/* Стили для улучшения доступности */

/* Улучшение читаемости для пользователей с дислексией */
.dyslexia-friendly {
  font-family: 'OpenDyslexic', 'Comic Sans MS', cursive;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

/* Высокий контраст для пользователей с нарушениями зрения */
.high-contrast {
  color: var(--color-black);
  background-color: var(--color-white);
}

/* Увеличенный размер шрифта для пользователей с нарушениями зрения */
.large-text {
  font-size: 1.25em;
  line-height: 1.6;
}