/**
 * Faretti - Оптимизированные шрифты
 * 
 * В этом файле настроены оптимальные параметры для подключения шрифтов:
 * - TT Norms Pro Variable (основной шрифт для текстов)
 * - TT Norms Pro Compact Bold (для заголовков)
 * - TT Livret Variable Italic (для выделенных текстов и цитат)
 */

/* Основной переменный шрифт */
@font-face {
    font-family: 'TT Norms Pro';
    src: url('./fonts/TTNormsProVariable.ttf') format('truetype');
    font-weight: 100 900; /* Поддержка всех начертаний */
    font-style: normal;
    font-display: swap; /* Предотвращает FOIT (мигание невидимого текста) */
    font-variation-settings: "wght" 400; /* Начальное значение */
}

/* Специальный шрифт для заголовков */
@font-face {
    font-family: 'TT Norms Pro Compact';
    src: url('./fonts/TTNormsProCompact-Bold.ttf') format('truetype'),
         url('./fonts/TTNormsProCompact-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Курсивный шрифт для выделений и цитат */
@font-face {
    font-family: 'TT Livret';
    src: url('./fonts/TT_Livret_Trial_Italic_Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
    font-variation-settings: "wght" 400;
}

/* Переменные для использования шрифтов */
:root {
    --font-primary: 'TT Norms Pro', sans-serif;
    --font-heading: 'TT Norms Pro Compact', sans-serif;
    --font-accent: 'TT Livret', serif;
}

/**
 * Классы для разной толщины шрифта
 * Пример использования: <p class="font-light">Легкий текст</p>
 */
.font-thin {
    font-variation-settings: "wght" 100;
}

.font-extra-light {
    font-variation-settings: "wght" 200;
}

.font-light {
    font-variation-settings: "wght" 300;
}

.font-regular {
    font-variation-settings: "wght" 400;
}

.font-medium {
    font-variation-settings: "wght" 500;
}

.font-semi-bold {
    font-variation-settings: "wght" 600;
}

.font-bold {
    font-variation-settings: "wght" 700;
}

.font-extra-bold {
    font-variation-settings: "wght" 800;
}

.font-black {
    font-variation-settings: "wght" 900;
}

/* Установка основных стилей */
body {
    font-family: var(--font-primary);
    font-variation-settings: "wght" 400;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: bold;
}

.accent-text, em, blockquote, .quote, .subtitle, .section-subtitle {
    font-family: var(--font-accent);
    font-style: italic;
}

/* Предзагрузка шрифтов для улучшения производительности */
.font-preload {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
}

.font-preload .regular {
    font-family: var(--font-primary);
    font-variation-settings: "wght" 400;
}

.font-preload .bold {
    font-family: var(--font-heading);
    font-weight: bold;
}

.font-preload .italic {
    font-family: var(--font-accent);
    font-style: italic;
}

/* Особые стили для элементов лендинга */
.hero-title {
    font-family: var(--font-heading);
    font-weight: bold;
    letter-spacing: -0.03em;
}

.product-title {
    font-family: var(--font-heading);
    font-weight: bold;
}

.product-description {
    font-family: var(--font-primary);
    font-variation-settings: "wght" 400;
}

/* Стили для заголовков секций */
.section-title, .section-header h2, .section-header-title {
    font-family: var(--font-heading);
    font-weight: bold;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* Стили для заголовков "История бренда" и "Производство" */
.section-header-title {
    font-family: var(--font-heading);
    font-weight: bold;
    letter-spacing: -0.02em;
    font-size: 2.8rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Специальные стили для заголовка FARETTI PERFETTO */
.cake-line .section-header h2 {
    font-family: var(--font-heading);
    font-weight: bold;
    letter-spacing: -0.02em;
    font-size: 3rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* Стили для подзаголовка "итальянский десерт" */
.section-subtitle, .cake-line .section-header p.section-subtitle {
    font-family: var(--font-accent);
    font-style: italic;
    font-variation-settings: "wght" 400;
    letter-spacing: 0.02em;
    font-size: 1.5rem;
    margin-top: 0.25rem;
    color: #777;
}

/* Оптимизация для мобильных устройств */
@media (max-width: 768px) {
    body {
        font-variation-settings: "wght" 450; /* Немного толще на мобильных */
    }
    
    .hero-title {
        letter-spacing: -0.02em;
    }
    
    .cake-line .section-header h2 {
        font-size: 2.2rem;
    }
    
    .section-subtitle, .cake-line .section-header p.section-subtitle {
        font-size: 1.2rem;
    }
    
    .section-header-title {
        font-size: 2.2rem;
    }
}