/* ===============================================
   JASHAN.RU - CSS VARIABLES
   Цветовая палитра, типография, spacing
   =============================================== */

:root {
  /* ========== ЦВЕТОВАЯ ПАЛИТРА ========== */
  
  /* Основные цвета */
  --color-primary: #a11450;           /* Первичный фиолетовый */
  --color-primary-dark: #5A3F7A;      /* Темнее для hover */
  --color-primary-darker: #4A2E6A;    /* Еще темнее для active */
  --color-primary-light: #9b6cd7;     /* Светлый для контраста  в темных местах*/
  --color-primary-sp-light: #be9ee8;     /* Светлый для контраста  в темных местах*/
  --color-indicator-active: #141fa1;     /* Цвет активного индикатора карусели */
  --color-secondary: #2D3436;         /* Темно-серый */
  --color-news: #051786;            /* Для новостей */
  --color-accent: #00f6a4;            /* Мятный аккент */
  --color-choice: #ecc68e;              /* Золотистый */
  
  /* Нейтральные цвета */
  --color-dark: #333131;              /* Темный текст */
  --color-light: #fcf4ec;             /* Светлый фон */
  --color-gray: #95A5A6;              /* Серый нейтральный */
  --color-white: rgb(255, 255, 255);
  
  /* Системные цвета */
  --color-error: #E74C3C;
  --color-success: #27AE60;
  --color-warning: #F39C12;
  --color-info: #3498DB;
  
  
  /* ========== ТИПОГРАФИЯ ========== */
  
  /* Шрифты */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  
  /* Размеры шрифтов - Desktop */
  --font-size-h1: 48px;
  --font-size-h2: 36px;
  --font-size-h3: 28px;
  --font-size-h4: 20px;
  --font-size-h5: 16px;
  --font-size-h6: 14px;
  --font-size-body-large: 18px;
  --font-size-body: 16px;
  --font-size-body-small: 14px;
  --font-size-caption: 12px;
  
  /* Размеры шрифтов - Mobile */
  --font-size-h1-mobile: 32px;
  --font-size-h2-mobile: 24px;
  --font-size-h3-mobile: 20px;
  --font-size-body-mobile: 16px;
  
  /* Межстрочный интервал */
  --line-height-tight: 1.2;
  --line-height-normal: 1.3;
  --line-height-relaxed: 1.6;
  
  /* Насыщенность */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  
  /* ========== SPACING (ОТСТУПЫ) ========== */
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-dropdown: 17px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
  --spacing-xxxl: 48px;
  
  
  /* ========== BORDER RADIUS ========== */
  
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  
  
  /* ========== ТЕНИ ========== */
  
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.16);
  --shadow-button: 0 4px 12px rgba(107, 78, 140, 0.3);
  --shadow-button-hover: 0 6px 16px rgba(107, 78, 140, 0.4);
  --shadow-button-active: 0 2px 8px rgba(107, 78, 140, 0.2);
  
  
  /* ========== TRANSITIONS ========== */
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  
  /* ========== Z-INDEX LAYERS ========== */
  
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-tooltip: 600;
  
  
  /* ========== LAYOUT ========== */
  
  --container-max-width: 1200px;
  --container-padding: 20px;
  --gutter: 20px;
  --header-height: 73px;
  
  /* Mobile menu */
  --mobile-menu-width: 300px;
  --mobile-menu-transition: 0.3s ease-out;
}


/* ========== RESPONSIVE VARIABLES ========== */

/* Tablet */
@media (max-width: 1023px) {
  :root {
    --container-max-width: 960px;
    --gutter: 16px;
  }
}

.main-content {
    margin-top: -25px;
  }

/* Mobile */
@media (max-width: 767px) {
  :root {
    --container-padding: 16px;
    --gutter: 12px;

    
    /* Mobile typography */
    --font-size-h1: var(--font-size-h1-mobile);
    --font-size-h2: var(--font-size-h2-mobile);
    --font-size-h3: var(--font-size-h3-mobile);
    --font-size-body: var(--font-size-body-mobile);
  }
  .main-content {
    margin-top: -10px;
  }
}