

:root {
  /* ===================================
     ЦВЕТОВАЯ ПАЛИТРА
     =================================== */
  
  /* Основные цвета */
  --color-primary: #6e3514;
  --color-primary-light: #8a4a1a;
  --color-primary-dark: #5a2b10;
  
  --color-secondary: #272727;
  --color-secondary-light: #454545;
  --color-secondary-dark: #1a1a1a;
  
  --color-accent: #ec4e0f;
  --color-accent-light: #ff5a1a;
  --color-accent-dark: #d13d0a;
  
  /* Нейтральные цвета */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f9f9f9;
  --color-gray-100: #f7f7f7;
  --color-gray-200: #f0f0f0;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #b6b6b6;
  --color-gray-500: #9e9e9e;
  --color-gray-600: #6b6b6b;
  --color-gray-700: #454545;
  --color-gray-800: #333333;
  --color-gray-900: #1a1a1a;
  
  /* Семантические цвета */
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-error: #dc3545;
  --color-info: #17a2b8;
  
  /* Дополнительные цвета для совместимости */
  --black: var(--color-secondary);
  --white: var(--color-white);
  --red-color: var(--color-accent);
  --gray-bg: var(--color-gray-100);
  --gray-stroke: var(--color-gray-400);
  --gray-text: var(--color-gray-700);
  --dark-accent: var(--color-primary);
  --primary-color: var(--color-primary);
  --success-color: var(--color-success);
  --danger-color: var(--color-error);
  --accent-color: #4CAF50;
  --gray-border: var(--color-gray-300);
  
  /* Дополнительные цвета */
  --color-f2f2f2: #f2f2f2;
  --color-d0d0d0: #d0d0d0;
  --color-a0a0a0: #a0a0a0;
  --color-6e3514: #6e3514;
  --color-b4b4b4: #b4b4b4;
  --color-999: #999;
  --color-f7f7f7: #f7f7f7;
  --color-2f2119: #2f2119;
  
  /* ===================================
     ТИПОГРАФИКА
     =================================== */
  
  /* Семейства шрифтов */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-secondary: 'Akrobat-ExtraBold', sans-serif;
  --font-family-inter-regular: 'Inter-Regular', 'Inter', sans-serif;
  --font-family-inter-medium: 'Inter-Medium', 'Inter', sans-serif;
  --font-family-inter-light: 'Inter-Light', 'Inter', sans-serif;
  
  /* Размеры шрифтов */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 22px;
  --font-size-3xl: 24px;
  --font-size-4xl: 28px;
  --font-size-5xl: 32px;
  --font-size-6xl: 36px;
  --font-size-7xl: 42px;
  --font-size-8xl: 48px;
  
  /* Дополнительные размеры для совместимости */
  --font-size-5xl: 48px;
  --font-size-10px: 10px;
  --font-size-11px: 11px;
  --font-size-13px: 13px;
  --font-size-15px: 15px;
  --font-size-17px: 17px;
  --font-size-30px: 30px;
  
  /* Мобильные заголовки */
  --h3-mobile-font-family: "Inter-Medium", sans-serif;
  --h3-mobile-font-size: 22px;
  --h3-mobile-line-height: 130%;
  --h3-mobile-font-weight: 500;
  
  --h4-mobile-font-family: "Inter-Regular", sans-serif;
  --h4-mobile-font-size: 18px;
  --h4-mobile-line-height: 130%;
  --h4-mobile-font-weight: 400;
  --font-size-40px: 40px;
  --font-size-84px: 84px;
  
  /* Высота строк */
  --line-height-tight: 110%;
  --line-height-normal: 130%;
  --line-height-relaxed: 140%;
  --line-height-loose: 145%;
  --line-height-100: 100%;
  --line-height-115: 115%;
  --line-height-120: 120%;
  --line-height-125: 125%;
  --line-height-135: 135%;
  
  /* Дополнительные высоты строк в пикселях */
  --line-height-12px: 12px;
  --line-height-18px: 18px;
  --line-height-20px: 20px;
  --line-height-22px: 22px;
  --line-height-23px: 23.40px;
  --line-height-24px: 24px;
  --line-height-30px: 30px;
  --line-height-84px: 84px;
  
  /* Веса шрифтов */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* ===================================
     РАЗМЕРЫ И ОТСТУПЫ
     =================================== */
  
  /* Базовые отступы */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-base: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 30px;
  --spacing-3xl: 40px;
  --spacing-4xl: 50px;
  --spacing-5xl: 60px;
  
  /* Дополнительные отступы для совместимости */
  --spacing-4xl: 60px;
  --spacing-1px: 1px;
  --spacing-2px: 2px;
  --spacing-3px: 3px;
  --spacing-5px: 5px;
  --spacing-6px: 6px;
  --spacing-10px: 10px;
  --spacing-14px: 14px;
  --spacing-15px: 15px;
  --spacing-18px: 18px;
  --spacing-25px: 25px;
  --spacing-80px: 80px;
  --spacing-104px: 104px;
  
  /* Радиусы скругления */
  --border-radius-sm: 8px;
  --border-radius-base: 12px;
  --border-radius-md: 15px;
  --border-radius-lg: 15px;
  --border-radius-xl: 20px;
  --border-radius-2xl: 25px;
  --border-radius-full: 100px;
  --border-radius-5px: 5px;
  --border-radius-6px: 6px;
  --border-radius-9999px: 9999px;
  --border-radius-10px: 10px;
  --border-radius-30px: 30px;
  --border-radius-40px: 40px;
  
  /* ===================================
     ТЕНИ
     =================================== */
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1);
  --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.1);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.1);
  
  /* Специальные тени для карточек */
  --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-card-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
  
  /* ===================================
     АНИМАЦИИ И ПЕРЕХОДЫ
     =================================== */
  
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Задержки анимации для карточек */
  --animation-delay-0: 0s;
  --animation-delay-1: 0.1s;
  --animation-delay-2: 0.2s;
  --animation-delay-3: 0.3s;
  --animation-delay-4: 0.4s;
  
  /* ===================================
     РАЗМЕРЫ КОНТЕЙНЕРОВ
     =================================== */
  
  --container-max-width: 1320px;
  --container-padding: 20px;
  --container-padding-mobile: 15px;
  
  /* Фиксированные размеры */
  --size-9px: 9px;
  --size-12px: 12px;
  --size-16px: 16px;
  --size-26px: 26px;
  --size-28px: 28px;
  --size-36px: 36px;
  --size-43px: 43px;
  --size-45px: 45px;
  --size-48px: 48px;
  --size-54px: 54px;
  --size-60px: 60px;
  --size-102px: 102px;
  --size-108px: 108px;
  --size-127px: 127px;
  --size-132px: 132px;
  --size-135px: 135px;
  --size-146px: 146px;
  --size-147px: 147px;
  --size-168px: 168px;
  --size-194px: 194px;
  --size-200px: 200px;
  --size-220px: 220px;
  --size-234px: 234px;
  --size-250px: 250px;
  --size-280px: 280px;
  --size-300px: 300px;
  --size-313px: 313px;
  --size-315px: 315px;
  --size-335px: 335px;
  --size-370px: 370px;
  --size-380px: 380px;
  --size-390px: 390px;
  --size-400px: 400px;
  --size-424px: 424px;
  --size-427px: 427px;
  --size-450px: 450px;
  --size-461px: 461px;
  --size-490px: 490px;
  --size-497px: 497px;
  --size-526px: 526px;
  --size-548px: 548px;
  --size-568px: 568px;
  --size-580px: 580px;
  --size-596px: 596px;
  --size-602px: 602px;
  --size-612px: 612px;
  --size-614px: 614px;
  --size-650px: 650px;
  --size-767px: 767px;
  --size-1200px: 1200px;
  --size-1229px: 1229px;
  --size-1320px: 1320px;
  --size-1324px: 1324px;
  
  /* ===================================
     Z-ИНДЕКСЫ
     =================================== */
  
  --z-dropdown: 2147483648;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-1: 1;
  --z-2: 2;
  --z-10: 10;
  
  /* ===================================
     МОБИЛЬНЫЕ ПЕРЕМЕННЫЕ
     =================================== */
  
  --mobile-padding: 15px;
  --mobile-gap: 20px;
  --mobile-border-radius: 15px;
  
  /* ===================================
     СПЕЦИАЛЬНЫЕ ПЕРЕМЕННЫЕ ДЛЯ FRAME-150
     =================================== */
  
  --frame-150-card-bg: rgba(255, 255, 255, 0.8);
  --frame-150-card-border: 1px solid rgba(255, 255, 255, 0.2);
  --frame-150-card-shadow: var(--shadow-card);
  --frame-150-card-padding: 10px 12px;
  --frame-150-card-radius: 10px;
  
  --frame-150-title-color: var(--color-secondary);
  --frame-150-title-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px;
  
  --frame-150-text-color: var(--color-secondary);
  --frame-150-text-color-light: var(--color-gray-700);
  
  --frame-150-number-color: var(--color-primary);
  --frame-150-number-weight: var(--font-weight-medium);
  
  /* ===================================
     СПЕЦИАЛЬНЫЕ ПЕРЕМЕННЫЕ ДЛЯ ВИДЕО БЛОКОВ
     =================================== */
  
  --video-gradient-1: linear-gradient(-71.26deg, rgba(47,33,25,0.3) 0%, rgba(47,33,25,0.9) 100%);
  --video-gradient-2: linear-gradient(-69.42deg, rgba(47,33,25,0.2) 0%, rgba(47,33,25,0.8) 100%);
  --video-text-color: var(--color-white);
  --video-play-icon-size: 60px;
  --video-play-icon-size-mobile: 48px;
  
  /* ===================================
     СПЕЦИАЛЬНЫЕ ПЕРЕМЕННЫЕ ДЛЯ FAQ
     =================================== */
  
  --faq-border-color: var(--color-gray-400);
  --faq-button-bg: var(--color-primary);
  --faq-button-text: var(--color-white);
  --faq-title-color: var(--color-secondary);
  --faq-text-color: var(--color-gray-700);
  
  /* ===================================
     СПЕЦИАЛЬНЫЕ ПЕРЕМЕННЫЕ ДЛЯ ГАЛЕРЕИ
     =================================== */
  
  --gallery-slider-height: 250px;
  --gallery-slider-height-desktop: 400px;
  --gallery-nav-button-size: 40px;
  --gallery-nav-button-size-desktop: 50px;
  
  /* ===================================
     СПЕЦИАЛЬНЫЕ ПЕРЕМЕННЫЕ ДЛЯ FRAME-30
     =================================== */
  
  --frame-30-bg: var(--color-gray-100);
  --frame-30-border-radius: var(--border-radius-md);
  --frame-30-title-color: var(--color-secondary);
  --frame-30-text-color: var(--color-gray-700);
  --frame-30-button-bg: var(--color-primary);
  --frame-30-button-text: var(--color-white);
  
  /* ===================================
     СПЕЦИАЛЬНЫЕ ПЕРЕМЕННЫЕ ДЛЯ ТАЙМЕРА
     =================================== */
  
  --timer-bg: var(--color-gray-100);
  --timer-text-color: var(--color-secondary);
  --timer-number-color: var(--color-accent);
  --timer-border-radius: var(--border-radius-md);
}

/* ===================================
   АДАПТИВНЫЕ ПЕРЕМЕННЫЕ
   =================================== */

@media (max-width: 768px) {
  :root {
    --container-padding: var(--container-padding-mobile);
    --font-size-8xl: 36px;
    --font-size-7xl: 28px;
    --font-size-6xl: 24px;
    --font-size-5xl: 20px;
    --font-size-4xl: 18px;
    --font-size-3xl: 16px;
    --spacing-5xl: 40px;
    --spacing-4xl: 30px;
    --spacing-3xl: 25px;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-8xl: 28px;
    --font-size-7xl: 24px;
    --font-size-6xl: 20px;
    --font-size-5xl: 18px;
    --font-size-4xl: 16px;
    --spacing-5xl: 30px;
    --spacing-4xl: 25px;
    --spacing-3xl: 20px;
  }
}
