/**
 * 🎨 ДИЗАЙН-СИСТЕМА АННЫ БУСЕЛ
 * Цветовая схема и переменные для Reader Bot Telegram Mini App
 * 
 * Основана на официальном сайте annabusel.org
 * Поддерживает светлую и темную темы Telegram
 * 🔧 ИСПРАВЛЕНО: Размеры компонентов после удаления хедеров из архитектуры
 */

/* ============================================================================
   🔤 VARIABLE FONTS
   ============================================================================ */

@font-face {
    font-family: 'InterVariable';
    src: url('../assets/fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2-variations');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'InterVariable';
    src: url('../assets/fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2-variations');
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'MerriweatherVariable';
    src: url('../assets/fonts/Merriweather-VariableFont_opsz,wdth,wght.woff2') format('woff2-variations');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MerriweatherVariable';
    src: url('../assets/fonts/Merriweather-Italic-VariableFont_opsz,wdth,wght.woff2') format('woff2-variations');
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}

/* ============================================================================
   🌟 ОСНОВНЫЕ ЦВЕТА БРЕНДА
   ============================================================================ */

:root {
    /* 🎨 Основная цветовая палитра Анны Бусел */
    --primary-color: #D2452C;           /* Терракотовый - основной цвет бренда */
    --primary-light: #E5674F;           /* Светлый терракотовый */
    --primary-dark: #B73A24;            /* Темный терракотовый */
    
    /* 🌱 Дополнительные цвета */
    --accent-color: #8B4513;            /* Коричневый акцент */
    --accent-light: #A0522D;            /* Светло-коричневый */
    
    /* 📖 Фоновые цвета */
    --bg-primary: #F5F2EC;              /* Светло-бежевый основной фон */
    --bg-secondary: #FEFCF8;            /* Очень светлый бежевый */
    --bg-card: #FFFFFF;                 /* Белый для карточек */
    --bg-overlay: rgba(210, 69, 44, 0.1); /* Полупрозрачный терракотовый */
    
    /* 🔲 Рамки и границы */
    --border: #E0D6D0;                  /* Основной цвет границ */
    --border-light: #F0E8E2;            /* Светлый цвет границ */
    --border-dark: #D0C4BE;             /* Темный цвет границ */
    
    /* ✏️ Текстовые цвета */
    --text-primary: #2C1810;            /* Темно-коричневый основной текст */
    --text-secondary: #5D4037;          /* Средне-коричневый вторичный текст */
    --text-muted: #8D6E63;              /* Приглушенный коричневый */
    --text-inverse: #FFFFFF;            /* Белый текст на цветном фоне */
    
    /* 🎯 Статусные цвета */
    --success-color: #4CAF50;           /* Зеленый для успеха */
    --success-light: #81C784;           /* Светло-зеленый */
    --warning-color: #FF9800;           /* Оранжевый для предупреждений */
    --error-color: #F44336;             /* Красный для ошибок */
    --info-color: #2196F3;              /* Синий для информации */
}

/* ============================================================================
   🌙 ТЕМНАЯ ТЕМА (автоматически применяется в темной теме Telegram)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    :root {
        /* 🎨 Адаптация основных цветов для темной темы */
        --primary-color: #E5674F;           /* Более яркий терракотовый */
        --primary-light: #FF8A65;           /* Светлый для контраста */
        --primary-dark: #D2452C;            /* Более темный */
        
        /* 📖 Темные фоны */
        --bg-primary: #1A1A1A;              /* Темно-серый основной */
        --bg-secondary: #2D2D2D;            /* Средне-серый */
        --bg-card: #3A3A3A;                 /* Серый для карточек */
        --bg-overlay: rgba(229, 103, 79, 0.15); /* Полупрозрачный яркий терракотовый */
        
        /* 🔲 Темные границы */
        --border: #404040;                  /* Основной цвет границ */
        --border-light: #505050;            /* Светлый цвет границ */
        --border-dark: #303030;             /* Темный цвет границ */
        
        /* ✏️ Светлые тексты */
        --text-primary: #FFFFFF;            /* Белый основной текст */
        --text-secondary: #E0E0E0;          /* Светло-серый вторичный */
        --text-muted: #BDBDBD;              /* Приглушенный серый */
        --text-inverse: #2C1810;            /* Темный текст на светлом фоне */
    }
}

/* ============================================================================
   📐 РАЗМЕРЫ И ОТСТУПЫ
   ============================================================================ */

:root {
    /* 📏 Базовые размеры */
    --base-unit: 4px;                   /* Базовая единица для расчетов */
    
    /* 📦 Отступы */
    --spacing-2xs: calc(var(--base-unit) * 1.5); /* 6px */
    --spacing-xs: calc(var(--base-unit) * 1);    /* 4px */
    --spacing-sm: calc(var(--base-unit) * 2);    /* 8px */
    --spacing-md: calc(var(--base-unit) * 4);    /* 16px */
    --spacing-lg: calc(var(--base-unit) * 6);    /* 24px */
    --spacing-xl: calc(var(--base-unit) * 8);    /* 32px */
    --spacing-2xl: calc(var(--base-unit) * 12);  /* 48px */
    
    /* 📐 Радиусы скругления */
    --radius-sm: 4px;                   /* Маленький радиус */
    --radius-md: 8px;                   /* Средний радиус */
    --radius-lg: 12px;                  /* Большой радиус */
    --radius-xl: 16px;                  /* Очень большой радиус */
    --radius-round: 50%;                /* Полностью круглый */
    
    /* 🎯 ИСПРАВЛЕННЫЕ РАЗМЕРЫ КОМПОНЕНТОВ после удаления хедеров */
    /* ✅ ПОСЛЕ УДАЛЕНИЯ ХЕДЕРОВ: Обновляем переменные под новую архитектуру */
    --header-height: 0px;               /* ✅ ХЕДЕРЫ УБРАНЫ - высота 0px */
    --bottom-nav-height: 96px;          /* ✅ Instagram-style nav - увеличено до 96px */
    --button-height: 44px;              /* Стандартная высота кнопок */
    --input-height: 48px;               /* Высота полей ввода */
}

/* ============================================================================
   ✏️ ТИПОГРАФИКА
   ============================================================================ */

:root {
    /* 🔤 Семейства шрифтов */
    --font-family-primary: 'InterVariable', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 
                          'Helvetica Neue', Arial, sans-serif;
    --font-family-secondary: 'MerriweatherVariable', serif;
    --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 
                       Consolas, 'Courier New', monospace;
    
    /* 📏 Размеры шрифтов */
    --font-size-xs: 12px;               /* Очень маленький */
    --font-size-sm: 14px;               /* Маленький */
    --font-size-base: 16px;             /* Базовый размер */
    --font-size-lg: 18px;               /* Большой */
    --font-size-xl: 20px;               /* Очень большой */
    --font-size-2xl: 24px;              /* Заголовки */
    --font-size-3xl: 32px;              /* Большие заголовки */
    
    /* 📐 Высота строк */
    --line-height-tight: 1.2;          /* Плотная */
    --line-height-normal: 1.5;          /* Нормальная */
    --line-height-loose: 1.8;           /* Просторная */
    
    /* 🎨 Толщина шрифтов */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* ============================================================================
   ✨ АНИМАЦИИ И ПЕРЕХОДЫ
   ============================================================================ */

:root {
    /* ⏱️ Длительность анимаций */
    --duration-fast: 150ms;             /* Быстрые переходы */
    --duration-normal: 250ms;           /* Обычные переходы */
    --duration-slow: 400ms;             /* Медленные переходы */
    
    /* 🎬 Готовые переходы */
    --transition-fast: all var(--duration-fast) var(--ease-out);
    --transition-normal: all var(--duration-normal) var(--ease-out);
    --transition-slow: all var(--duration-slow) var(--ease-out);
    
    /* 📈 Функции плавности */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* 🎭 Тени */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    
    /* 🌟 Тени с брендовым цветом */
    --shadow-primary: 0 4px 14px rgba(210, 69, 44, 0.25);
    --shadow-primary-lg: 0 8px 25px rgba(210, 69, 44, 0.35);
}

/* ============================================================================
   📱 МОБИЛЬНЫЕ ПЕРЕМЕННЫЕ
   ============================================================================ */

:root {
    /* 📐 Адаптивные размеры */
    --mobile-padding: var(--spacing-md);       /* Отступы на мобильных */
    --mobile-font-scale: 1;                    /* Масштаб шрифтов на мобильных */
    
    /* 🎯 Touch-friendly размеры */
    --touch-target-min: 44px;                  /* Минимальный размер для касания */
    --safe-area-top: env(safe-area-inset-top, 0);
    --safe-area-bottom: env(safe-area-inset-bottom, 0);
    
    /* 📱 Z-index слои */
    --z-index-modal: 1000;
    --z-index-dropdown: 100;
    --z-index-header: 50;
    --z-index-nav: 40;
}

/* ============================================================================
   🎨 ДОПОЛНИТЕЛЬНЫЕ УТИЛИТАРНЫЕ ПЕРЕМЕННЫЕ
   ============================================================================ */

:root {
    /* 🔄 Состояния интерактивных элементов */
    --hover-opacity: 0.8;
    --active-opacity: 0.6;
    --disabled-opacity: 0.4;
    
    /* 📊 Прогресс бары и индикаторы */
    --progress-height: 4px;
    --progress-bg: var(--bg-secondary);
    --progress-fill: var(--primary-color);
    
    /* 🎯 Бейджи и индикаторы */
    --badge-size: 20px;
    --badge-font-size: var(--font-size-xs);
    
    /* 📝 Формы */
    --input-border: 1px solid var(--text-muted);
    --input-border-focus: 2px solid var(--primary-color);
    --input-bg: var(--bg-card);
}

/* ============================================================================
   🔧 КАСТОМНЫЕ СВОЙСТВА ДЛЯ TELEGRAM WEB APP
   ============================================================================ */

:root {
    /* 🎨 Интеграция с Telegram темами */
    --tg-theme-bg-color: var(--bg-primary);
    --tg-theme-text-color: var(--text-primary);
    --tg-theme-hint-color: var(--text-muted);
    --tg-theme-link-color: var(--primary-color);
    --tg-theme-button-color: var(--primary-color);
    --tg-theme-button-text-color: var(--text-inverse);
    
    /* 📱 Адаптация под viewport Telegram */
    --tg-viewport-height: 100vh;
    --tg-viewport-stable-height: 100vh;
}

/* ============================================================================
   💡 ПРИМЕНЕНИЕ ПЕРЕМЕННЫХ ИЗ TELEGRAM
   Автоматически обновляет цвета при изменении темы в Telegram
   ============================================================================ */

body[data-theme="telegram"] {
    --bg-primary: var(--tg-theme-bg-color, #F5F2EC);
    --text-primary: var(--tg-theme-text-color, #2C1810);
    --text-muted: var(--tg-theme-hint-color, #8D6E63);
}

/* ===== Mobile-only font scale: +1px across type scale, base -> 17px ===== */
@media (hover: none) and (pointer: coarse) {
  :root {
    --font-size-xs: 13px; /* 12 -> 13 */
    --font-size-sm: 15px; /* 14 -> 15 */
    --font-size-base: 17px; /* 16 -> 17 */
    --font-size-lg: 19px; /* 18 -> 19 */
    --font-size-xl: 21px; /* 20 -> 21 */
    --font-size-2xl: 26px; /* 24 -> 26 */
    --font-size-3xl: 34px; /* 32 -> 34 */
  }
}

/* Fallback for webviews that misreport pointer/hover */
@media (max-width: 820px) {
  :root {
    --font-size-xs: 13px;
    --font-size-sm: 15px;
    --font-size-base: 17px;
    --font-size-lg: 19px;
    --font-size-xl: 21px;
    --font-size-2xl: 26px;
    --font-size-3xl: 34px;
  }
}