/**
 * =============================================================================
 * CSS VARIABLES - DESIGN SYSTEM
 * =============================================================================
 * 
 * Централизованная система дизайна для всего проекта.
 * Все цвета, размеры, отступы и другие значения определены здесь
 * для обеспечения консистентности и легкого обновления.
 * 
 * Структура:
 * - Colors: Основная цветовая палитра
 * - Typography: Шрифты, размеры, веса
 * - Spacing: Отступы и размеры
 * - Layout: Макетные переменные
 * - Borders: Радиусы и границы
 * - Shadows: Тени для элементов
 * - Transitions: Анимации и переходы
 * - Z-index: Слои элементов
 * - Component specific: Специфичные для компонентов
 * 
 * @author: Carpathians Team
 * @version: 1.0.0
 * @updated: 2024
 */

:root {
    /* ===== COLORS ===== */
    /* Основная цветовая палитра - зеленые тона для туристической тематики */
    
    /* Primary Colors - Основные цвета бренда */
    --color-primary: #46A351;           /* Основной зеленый - логотип, кнопки */
    --color-primary-dark: #3A8A44;      /* Темный зеленый - hover состояния */
    --color-secondary: var(--color-primary); /* Вторичный цвет (алиас) */
    
    /* Accent Colors - Акцентные цвета */
    --color-accent: #6BBF75;            /* Светлый зеленый - акценты */
    --color-accent-dark: #5AA864;       /* Средний зеленый */
    --color-accent-light: #8BCF93;      /* Очень светлый зеленый */
    
    /* Icon Colors - Цвета для иконок (алиасы) */
    --color-icon-green: var(--color-primary); /* Зеленые иконки */
    --color-icon-white: var(--color-white);   /* Белые иконки */
    
    /* SVG Colors - Цвета для SVG элементов (алиасы) */
    --color-svg-green: var(--color-primary);  /* Зеленые SVG */
    --color-svg-white: var(--color-white);    /* Белые SVG */
    
    /* Neutral Colors - Нейтральные цвета */
    --color-white: #FFFFFF;              /* Чистый белый */
    --color-black: #000000;              /* Чистый черный */
    
    /* Gray Scale - Шкала серых цветов */
    --color-gray-50: #FAFAFA;            /* Очень светлый серый - фоны */
    --color-gray-100: #F5F5F5;           /* Светлый серый - разделители */
    --color-gray-200: #EEEEEE;           /* Светлый серый - границы */
    --color-gray-300: #E0E0E0;           /* Средний светлый серый */
    --color-gray-400: #BDBDBD;           /* Средний серый - неактивные элементы */
    --color-gray-500: #9E9E9E;           /* Средний серый - placeholder */
    --color-gray-600: #757575;           /* Темный серый - вторичный текст */
    --color-gray-700: #616161;           /* Темный серый - основной текст */
    --color-gray-800: #424242;           /* Очень темный серый */
    --color-gray-dark: var(--color-gray-800); /* Алиас для темного серого */
    --color-gray-900: #212121;           /* Самый темный серый - заголовки */
    
    /* Overlay Colors - Цвета наложений */
    --color-overlay: rgba(0, 0, 0, 0.4); /* Полупрозрачный черный для оверлеев */
    
    /* ===== TYPOGRAPHY ===== */
    /* Шрифтовые семейства */
    --font-family-primary: 'Neue Haas Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-secondary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Font Sizes - Размеры шрифтов (rem-based для масштабируемости) */
    --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 - заголовки h3 */
    --font-size-3xl: 1.875rem;  /* 30px - заголовки h2 */
    --font-size-4xl: 2.25rem;   /* 36px - заголовки h1 */
    --font-size-5xl: 3rem;      /* 48px - большие заголовки */
    --font-size-6xl: 3.75rem;   /* 60px - hero заголовки */
    
    /* Font Weights - Веса шрифтов */
    --font-weight-light: 300;      /* Светлый - для акцентов */
    --font-weight-normal: 400;     /* Обычный - основной текст */
    --font-weight-medium: 500;     /* Средний - подзаголовки */
    --font-weight-semibold: 600;   /* Полужирный - заголовки */
    --font-weight-bold: 700;       /* Жирный - важные заголовки */
    --font-weight-extrabold: 800;  /* Очень жирный - hero заголовки */
    
    /* Line Heights - Межстрочные интервалы */
    --line-height-tight: 1.25;     /* Плотный - для заголовков */
    --line-height-normal: 1.5;     /* Обычный - для основного текста */
    --line-height-relaxed: 1.75;   /* Расслабленный - для длинного текста */
    
    /* Letter Spacing - Межбуквенные интервалы */
    --tracking-tight: -0.025em;    /* Узкий - для больших заголовков */
    --tracking-normal: 0;          /* Обычный - для основного текста */
    --tracking-wide: 0.025em;      /* Широкий - для акцентов */
    
    /* ===== SPACING ===== */
    /* Система отступов - основана на 4px grid для консистентности */
    --spacing-xs: 0.25rem;   /* 4px - минимальные отступы */
    --spacing-sm: 0.5rem;    /* 8px - малые отступы */
    --spacing-md: 1rem;      /* 16px - стандартные отступы */
    --spacing-lg: 1.5rem;    /* 24px - большие отступы */
    --spacing-xl: 2rem;      /* 32px - очень большие отступы */
    --spacing-2xl: 3rem;     /* 48px - секционные отступы */
    --spacing-3xl: 4rem;     /* 64px - крупные секционные отступы */
    --spacing-4xl: 6rem;     /* 96px - максимальные отступы */
    
    /* ===== LAYOUT ===== */
    /* Макетные переменные */
    --container-max-width: 1720px;  /* Максимальная ширина контейнера */
    --container-padding: 0;         /* Отступы контейнера (переопределяется в медиа-запросах) */
    --header-height: 80px;          /* Высота хедера */
    --footer-height: auto;          /* Высота футера */
    
    /* ===== BORDERS ===== */
    /* Радиусы скругления */
    --border-radius-sm: 0.25rem;   /* 4px - минимальное скругление */
    --border-radius-md: 0.5rem;    /* 8px - стандартное скругление */
    --border-radius-lg: 0.75rem;   /* 12px - большое скругление */
    --border-radius-xl: 1rem;      /* 16px - очень большое скругление */
    --border-radius-2xl: 1.5rem;   /* 24px - максимальное скругление */
    --border-radius-full: 9999px;  /* Полное скругление (круг) */
    
    /* Толщина границ */
    --border-width-thin: 1px;      /* Тонкая граница */
    --border-width-normal: 2px;    /* Обычная граница */
    --border-width-thick: 3px;     /* Толстая граница */
    
    /* ===== SHADOWS ===== */
    /* Система теней для создания глубины и иерархии */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);                    /* Легкая тень - для карточек */
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);  /* Средняя тень - для хедера */
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Большая тень - для модалок */
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Очень большая тень */
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);             /* Максимальная тень */
    --shadow-3xl: 0 35px 70px -15px rgba(0, 0, 0, 0.3);              /* Экстра большая тень */
    
    /* ===== TRANSITIONS ===== */
    /* Стандартные переходы для анимаций */
    --transition-fast: 150ms ease-in-out;    /* Быстрый переход - для hover эффектов */
    --transition-normal: 250ms ease-in-out;  /* Обычный переход - для стандартных анимаций */
    --transition-slow: 350ms ease-in-out;    /* Медленный переход - для сложных анимаций */
    
    /* ===== Z-INDEX ===== */
    /* Слои элементов для правильного наложения */
    --z-fixed: 1030;                        /* Фиксированные элементы (хедер, футер) */
    
    /* ===== COMPONENT SPECIFIC ===== */
    /* Специфичные переменные для компонентов */
    
    /* Hero Section - Главная секция */
    --hero-min-height: 100vh;                    /* Минимальная высота hero секции */
    --hero-content-max-width: 800px;             /* Максимальная ширина контента */
    
    /* Features Section - Секция особенностей */
    --features-image-stack-width: 512px;         /* Ширина стопки изображений */
    --features-image-stack-height: 689px;        /* Высота стопки изображений */
    
    /* Categories Section - Секция категорий */
    --categories-card-hover-transform: translateY(-4px);  /* Трансформация при hover */
    --categories-card-hover-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);  /* Тень при hover */
    
    /* Contact Form - Контактная форма */
    --contact-form-max-width: 500px;             /* Максимальная ширина формы */
    --contact-form-background-blur: 4px;         /* Размытие фона */
    --contact-form-background-brightness: 0.3;   /* Яркость фона */
    
    /* FAQ Section - Секция вопросов */
    --faq-answer-max-height: 200px;              /* Максимальная высота ответа */
    --faq-toggle-size: 24px;                     /* Размер кнопки переключения */
    
    /* Footer - Подвал */
    --footer-social-icon-size: 24px;             /* Размер иконок соцсетей */
    --footer-logo-icon-size: 32px;               /* Размер логотипа */
}

/* ===== RESPONSIVE BREAKPOINTS ===== */
/* Адаптивные переменные для разных размеров экрана */

/* Desktop Large - Большие десктопы */
@media (max-width: 1752px) {
  :root {
    --container-padding: 0 24px;  /* Отступы для больших экранов */
  }
}

/* Mobile - Мобильные устройства */
@media (max-width: 767px) {
  :root {
    --container-padding: 0 16px;  /* Отступы для мобильных устройств */
  }
}