/* Typography System - Простая и стандартизированная система работы с текстом */

/* ============================================
   БАЗОВЫЕ НАСТРОЙКИ ТИПОГРАФИКИ
   ============================================ */
:root {
    /* Шрифт - современный sans-serif для мобильных приложений */
    /* Используем системные шрифты + Inter для лучшей читаемости */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    
    /* Альтернатива: Inter (нужно подключить через Google Fonts) */
    /* --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; */
    
    /* Дополнительные размеры шрифтов для типографики */
    --font-size-xxs: 0.625rem;   /* 10px */
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 2rem;        /* 32px */
    --font-size-4xl: 2.25rem;     /* 36px */
    
    /* Цвета текста */
    --text-color-primary: #1F2937;      /* Основной темно-серый */
    --text-color-secondary: #6B7280;    /* Вторичный серый */
    --text-color-muted: #9CA3AF;        /* Приглушенный серый */
    --text-color-light: #BDBDBD;         /* Светло-серый (placeholder) */
    --text-color-white: #FFFFFF;         /* Белый */
    --text-color-placeholder: #BDBDBD;  /* Placeholder */
    
    /* Цвета для брендов (можно расширить) */
    --text-color-brand-purple: #9B59B6;
    --text-color-brand-pink: #EC4899;
    --text-color-brand-green: #10B981;
    --text-color-brand-red: #EF4444;
    --text-color-brand-orange: #F59E0B;
}

/* ============================================
   БАЗОВЫЙ ШРИФТ ДЛЯ ВСЕГО ДОКУМЕНТА
   ============================================ */
body {
    font-family: var(--font-family-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   ЗАГОЛОВКИ (HEADINGS)
   ============================================ */

/* Большие заголовки - для баннеров, главных заголовков */
.text-heading-display {
    font-family: var(--font-family-base);
    font-size: var(--font-size-4xl);     /* 36px */
    font-weight: var(--font-weight-bold); /* 700 */
    line-height: 1.2;
    color: var(--text-color-white);
    margin: 0;
}

.text-heading-display-secondary {
    font-size: var(--font-size-3xl);     /* 32px */
    font-weight: var(--font-weight-bold); /* 700 */
    line-height: 1.2;
    color: var(--text-color-white);
    margin: 0;
}

/* Заголовки секций - "Каталог", "Магазины", "Рекомендуем" */
.text-heading-section {
    font-size: var(--font-size-lg);       /* 18px */
    font-weight: var(--font-weight-semibold); /* 600 */
    line-height: 1.3;
    color: var(--text-color-primary);
    margin: 0;
}

/* Заголовки подсекций */
.text-heading-subsection {
    font-size: var(--font-size-base);     /* 16px */
    font-weight: var(--font-weight-semibold); /* 600 */
    line-height: 1.4;
    color: var(--text-color-primary);
    margin: 0;
}

/* ============================================
   ОСНОВНОЙ ТЕКСТ (BODY TEXT)
   ============================================ */

/* Обычный текст */
.text-body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);     /* 16px */
    font-weight: var(--font-weight-normal); /* 400 */
    line-height: var(--line-height-base);
    color: var(--text-color-primary);
}

/* Малый текст */
.text-body-small {
    font-size: var(--font-size-sm);       /* 14px */
    font-weight: var(--font-weight-normal); /* 400 */
    line-height: 1.4;
    color: var(--text-color-primary);
}

/* Очень малый текст */
.text-body-xs {
    font-size: var(--font-size-xs);       /* 12px */
    font-weight: var(--font-weight-normal); /* 400 */
    line-height: 1.3;
    color: var(--text-color-secondary);
}

/* ============================================
   ЦВЕТА ТЕКСТА
   ============================================ */

.text-color-primary {
    color: var(--text-color-primary) !important;
}

.text-color-secondary {
    color: var(--text-color-secondary) !important;
}

.text-color-muted {
    color: var(--text-color-muted) !important;
}

.text-color-light {
    color: var(--text-color-light) !important;
}

.text-color-white {
    color: var(--text-color-white) !important;
}

/* Брендовые цвета */
.text-color-brand-purple {
    color: var(--text-color-brand-purple) !important;
}

.text-color-brand-pink {
    color: var(--text-color-brand-pink) !important;
}

.text-color-brand-green {
    color: var(--text-color-brand-green) !important;
}

.text-color-brand-red {
    color: var(--text-color-brand-red) !important;
}

.text-color-brand-orange {
    color: var(--text-color-brand-orange) !important;
}

/* ============================================
   ВЕСА ШРИФТА
   ============================================ */

.text-weight-normal {
    font-weight: var(--font-weight-normal) !important; /* 400 */
}

.text-weight-medium {
    font-weight: var(--font-weight-medium) !important; /* 500 */
}

.text-weight-semibold {
    font-weight: var(--font-weight-semibold) !important; /* 600 */
}

.text-weight-bold {
    font-weight: var(--font-weight-bold) !important; /* 700 */
}

/* ============================================
   ЦЕНЫ (PRICES)
   ============================================ */

/* Старая цена - зачеркнутая */
.text-price-old {
    font-size: var(--font-size-xs);       /* 12px */
    font-weight: var(--font-weight-normal); /* 400 */
    color: var(--text-color-light);
    text-decoration: line-through;
}

/* Новая цена - жирная */
.text-price-new {
    font-size: var(--font-size-sm);       /* 14px */
    font-weight: var(--font-weight-bold); /* 700 */
    color: var(--text-color-primary);
}

/* Цена с приращением (например, "+118 Р") */
.text-price-increment {
    font-size: var(--font-size-sm);       /* 14px */
    font-weight: var(--font-weight-bold); /* 700 */
    color: var(--text-color-primary);
}

/* Минимальная цена заказа (например, "От 500 Р") */
.text-price-min {
    font-size: var(--font-size-sm);       /* 14px */
    font-weight: var(--font-weight-normal); /* 400 */
    color: var(--text-color-primary);
}

/* ============================================
   БЕЙДЖИ И СКИДКИ (BADGES & DISCOUNTS)
   ============================================ */

.text-badge {
    font-size: var(--font-size-sm);       /* 14px */
    font-weight: var(--font-weight-bold); /* 700 */
    color: var(--text-color-white);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm);
    display: inline-block;
    line-height: 1;
}

/* Бейджи с цветами */
.text-badge-yellow {
    background-color: #FCD34D;
    color: var(--text-color-primary);
}

.text-badge-purple {
    background-color: var(--text-color-brand-purple);
    color: var(--text-color-white);
}

.text-badge-dark-purple {
    background-color: #6B21A8;
    color: var(--text-color-white);
}

.text-badge-red {
    background-color: var(--text-color-brand-red);
    color: var(--text-color-white);
}

/* ============================================
   НАЗВАНИЯ МАГАЗИНОВ И БРЕНДОВ
   ============================================ */

.text-store-name {
    font-size: var(--font-size-lg);       /* 18px */
    font-weight: var(--font-weight-bold); /* 700 */
    line-height: 1.2;
}

/* Можно использовать с цветами брендов */
.text-store-name.text-color-brand-pink { }
.text-store-name.text-color-brand-green { }
.text-store-name.text-color-brand-red { }
.text-store-name.text-color-brand-orange { }

/* ============================================
   НАЗВАНИЯ ТОВАРОВ
   ============================================ */

.text-product-name {
    font-size: var(--font-size-base);     /* 16px */
    font-weight: var(--font-weight-semibold); /* 600 */
    line-height: 1.3;
    color: var(--text-color-primary);
}

/* ============================================
   РЕЙТИНГИ (RATINGS)
   ============================================ */

.text-rating {
    font-size: var(--font-size-xs);       /* 12px */
    font-weight: var(--font-weight-normal); /* 400 */
    color: var(--text-color-primary);
}

/* ============================================
   НАВИГАЦИЯ И ССЫЛКИ
   ============================================ */

.text-nav-item {
    font-size: var(--font-size-base);     /* 16px */
    font-weight: var(--font-weight-normal); /* 400 */
    color: var(--text-color-primary);
    text-decoration: none;
}

.text-link {
    font-size: var(--font-size-sm);       /* 14px */
    font-weight: var(--font-weight-normal); /* 400 */
    color: var(--text-color-brand-purple);
    text-decoration: none;
}

.text-link:hover {
    text-decoration: underline;
}

/* "Все >" ссылки */
.text-link-view-all {
    font-size: var(--font-size-sm);       /* 14px */
    font-weight: var(--font-weight-normal); /* 400 */
    color: var(--text-color-brand-purple);
    text-decoration: none;
}

/* ============================================
   PLACEHOLDER ТЕКСТ
   ============================================ */

.text-placeholder {
    font-size: var(--font-size-base);     /* 16px */
    font-weight: var(--font-weight-normal); /* 400 */
    color: var(--text-color-placeholder);
}

/* ============================================
   ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ
   ============================================ */

/* Информация о доставке/происхождении */
.text-info {
    font-size: var(--font-size-xs);       /* 12px */
    font-weight: var(--font-weight-normal); /* 400 */
    color: var(--text-color-secondary);
}

/* Время/индикатор (например, "400=55 мин") */
.text-indicator {
    font-size: var(--font-size-base);     /* 16px */
    font-weight: var(--font-weight-bold); /* 700 */
    color: var(--text-color-white);
}

/* Подписи под иконками (например, "Надежнее", "Корзина") */
.text-icon-label {
    font-size: var(--font-size-xs);       /* 12px */
    font-weight: var(--font-weight-normal); /* 400 */
    color: var(--text-color-white);
    text-align: center;
}

/* ============================================
   ЛОГОТИПЫ И БРЕНДИНГ
   ============================================ */

.text-logo {
    font-size: var(--font-size-2xl);      /* 24px */
    font-weight: var(--font-weight-bold); /* 700 */
    color: var(--text-color-white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   УТИЛИТЫ
   ============================================ */

/* Обрезка текста многоточием */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Многострочная обрезка (2 строки) */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Многострочная обрезка (3 строки) */
.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Выравнивание текста */
.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

/* Преобразование текста */
.text-uppercase {
    text-transform: uppercase !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

.text-capitalize {
    text-transform: capitalize !important;
}

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

@media (max-width: 768px) {
    .text-heading-display {
        font-size: var(--font-size-3xl);  /* 32px на мобильных */
    }
    
    .text-heading-display-secondary {
        font-size: var(--font-size-2xl);  /* 24px на мобильных */
    }
    
    .text-heading-section {
        font-size: var(--font-size-lg);   /* 19px на мобильных - было 16px */
    }
    
    .text-heading-subsection {
        font-size: var(--font-size-base); /* 17px на мобильных */
    }
    
    .text-body {
        font-size: var(--font-size-base); /* 17px на мобильных */
    }
    
    .text-body-small {
        font-size: var(--font-size-sm);   /* 16px на мобильных */
    }
    
    .text-body-xs {
        font-size: var(--font-size-xs);   /* 14px на мобильных */
    }
    
    .text-logo {
        font-size: var(--font-size-xl);   /* 24px на мобильных */
    }
    
    /* Цены - крупнее на мобильных */
    .text-price-old {
        font-size: var(--font-size-sm);
    }
    
    .text-price-new {
        font-size: var(--font-size-base);
    }
    
    .text-price-increment {
        font-size: var(--font-size-base);
    }
    
    /* Названия товаров */
    .text-product-name {
        font-size: var(--font-size-base);
    }
    
    /* Ссылки */
    .text-link,
    .text-link-view-all {
        font-size: var(--font-size-base);
    }
    
    /* Рейтинги */
    .text-rating {
        font-size: var(--font-size-sm);
    }
    
    /* Информация */
    .text-info {
        font-size: var(--font-size-sm);
    }
}