/* ============================================
   CSS ПЕРЕМЕННЫЕ
   Все цвета, шрифты и размеры проекта
   ============================================ */

:root {
    /* === ЦВЕТА === */
    --noir: #0f0f0f;
    --blanc: #f5f5f0;
    --rouge: #ff3333;
    --gris: #6b6b6b;
    --gris-clair: #d4d4d0;
    
    /* === ТИПОГРАФИКА === */
    --font-display: 'Archivo', sans-serif;
    --font-body: 'Archivo', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    
    /* Размеры шрифтов */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --text-3xl: 36px;
    --text-4xl: 48px;
    --text-5xl: 64px;
    --text-6xl: 80px;
    --text-hero: clamp(64px, 8vw, 120px);
    
    /* === ОТСТУПЫ === */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 80px;
    --space-4xl: 120px;
    
    /* === КОНТЕЙНЕРЫ === */
    --container-max: 1600px;
    --container-padding: 80px;
    
    /* === АНИМАЦИИ === */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    
    /* === ТЕНИ === */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    
    /* === РАДИУСЫ === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
}

/* === MEDIA QUERIES === */
@media (max-width: 1024px) {
    :root {
        --container-padding: 32px;
        --space-4xl: 80px;
        --space-3xl: 60px;
    }
}

@media (max-width: 640px) {
    :root {
        --container-padding: 24px;
        --space-4xl: 60px;
        --space-3xl: 48px;
        --space-2xl: 40px;
    }
}