/* ===== ЕДИНЫЕ CSS ПЕРЕМЕННЫЕ ===== */
/* Все переменные проекта в одном файле для избежания конфликтов */

:root {
  /* ===== ЦВЕТА ===== */
  --primary-color: #2d5c8a;
  --secondary-color: #1e3f5f;
  --accent-color: #ffffff;
  --background-color: #092437;
  --text-color: #ffffff;
  --border-color: rgba(255, 255, 255, 0.3);
  --overlay-color: rgba(255, 255, 255, 0.1);
  
  /* ===== ТЕНИ ===== */
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.3);
  
  /* ===== ПЕРЕХОДЫ ===== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* ===== РАДИУСЫ ===== */
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 12px;
  
  /* ===== РАЗМЕРЫ ШРИФТОВ - МОБИЛЬНЫЕ ===== */
  --mobile-heading-large: 40px;
  --mobile-heading-medium: 36px;
  --mobile-heading-small: 28px;
  --mobile-text-large: 18px;
  --mobile-text-medium: 16px;
  --mobile-text-small: 14px;
  --mobile-text-xs: 12px;
  --mobile-line-height: 1.3;
  --mobile-spacing: 20px;
  
  /* ===== РАЗМЕРЫ ШРИФТОВ - ПЛАНШЕТНЫЕ ===== */
  --tablet-heading-large: 50px;
  --tablet-heading-medium: 42px;
  --tablet-heading-small: 32px;
  --tablet-text-large: 20px;
  --tablet-text-medium: 18px;
  --tablet-text-small: 16px;
  
  /* ===== РАЗМЕРЫ ШРИФТОВ - ДЕСКТОПНЫЕ ===== */
  --desktop-heading-large: 64px;
  --desktop-heading-medium: 48px;
  --desktop-heading-small: 36px;
  --desktop-text-large: 24px;
  --desktop-text-medium: 18px;
  --desktop-text-small: 16px;
  --desktop-line-height: 1.2;
  --desktop-spacing: 40px;
  
  /* ===== АДАПТИВНЫЕ ПЕРЕМЕННЫЕ ===== */
  --wrapper-max-width: 1400px;
  --wrapper-padding: 24px;
  --heading-font-size: 48px;
  --subheading-font-size: 32px;
  --price-heading-font-size: 40px;
  --form-padding: 48px;
  --item-padding: 32px;
  --nav-font-size: 16px;
  --nav-padding: 12px 24px;
  --phone-font-size: 18px;
  --price-min-width: 300px;
  --prices-max-width: 100%;
  
  /* ===== МОБИЛЬНОЕ МЕНЮ ===== */
  --mobile-menu-bg: #2d5c8a;
  --mobile-menu-text: #ffffff;
  --mobile-menu-hover: #1e3f5f;
  --mobile-menu-transition: all 0.3s ease;
  --mobile-menu-gap: 16px;
  --mobile-menu-item-height: 48px;
  --mobile-menu-border-radius: 8px;
  
  /* ===== ЕДИНЫЕ ОТСТУПЫ ДЛЯ МОБИЛЬНЫХ ===== */
  --mobile-padding: 5px;
  
  /* ===== ДОПОЛНИТЕЛЬНЫЕ ПЕРЕМЕННЫЕ ===== */
  --font-size-large: var(--mobile-text-large, 18px);
  --font-size-medium: var(--mobile-text-medium, 16px);
  --font-size-small: var(--mobile-text-small, 14px);
  --font-size-xs: var(--mobile-text-xs, 12px);
}

/* ===== АДАПТИВНЫЕ ПЕРЕМЕННЫЕ ДЛЯ РАЗНЫХ ЭКРАНОВ ===== */

/* Большие экраны (1200px+) */
@media (min-width: 1200px) {
  :root {
    --wrapper-max-width: 1600px;
    --wrapper-padding: 40px;
    --heading-font-size: 56px;
    --subheading-font-size: 42px;
    --price-heading-font-size: 44px;
    --form-padding: 56px;
    --item-padding: 40px;
  }
}

/* Очень большие экраны (1600px+) */
@media (min-width: 1600px) {
  :root {
    --wrapper-max-width: 1800px;
    --wrapper-padding: 50px;
    --heading-font-size: 64px;
    --subheading-font-size: 48px;
    --price-heading-font-size: 48px;
    --form-padding: 56px;
    --item-padding: 40px;
  }
}