/**
 * Variables CSS - OpenGraphy Odoo Landing Page
 * Définition de toutes les variables globales
 */

:root {
    /* ==========================================
       COULEURS PRINCIPALES
       ========================================== */
    --primary-black: #2C2C2C;
    --primary-white: #FFFFFF;
    --accent-green: #4CAF50;
    --accent-blue: #1976D2;
    --text-gray: #666666;
    --light-gray: #F5F5F5;
    --border-gray: #E0E0E0;
    --dark-gray: #1a1a1a;
    
    /* ==========================================
       GRADIENTS
       ========================================== */
    --gradient-primary: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-blue) 100%);
    --gradient-text: linear-gradient(135deg, var(--primary-black) 0%, var(--accent-green) 100%);
    --gradient-background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
    --gradient-morphing: linear-gradient(-45deg, #f8f8f8, #ffffff, #f0f8f0, #f8f8f8);
    --gradient-shimmer: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.1), transparent);
    
    /* ==========================================
       OMBRES
       ========================================== */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.15);
    --shadow-green: 0 4px 14px 0 rgba(76, 175, 80, 0.3);
    --shadow-green-hover: 0 8px 24px 0 rgba(76, 175, 80, 0.5);
    --shadow-blue: 0 4px 14px 0 rgba(25, 118, 210, 0.3);
    
    /* ==========================================
       TRANSITIONS & ANIMATIONS
       ========================================== */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.6s ease;
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* ==========================================
       TYPOGRAPHIE
       ========================================== */
    --font-primary: 'Inter', 'Helvetica Neue', Arial, 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: 24px;
    --font-size-3xl: 32px;
    --font-size-4xl: 48px;
    --font-size-5xl: 56px;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.8;
    
    /* ==========================================
       ESPACEMENTS
       ========================================== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 40px;
    --spacing-3xl: 48px;
    --spacing-4xl: 64px;
    --spacing-5xl: 80px;
    --spacing-6xl: 100px;
    
    /* ==========================================
       BORDURES & RADIUS
       ========================================== */
    --border-width: 1px;
    --border-width-thick: 2px;
    --border-style: solid;
    --border-color: var(--border-gray);
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 50%;
    
    /* ==========================================
       LARGEURS & BREAKPOINTS
       ========================================== */
    --container-max-width: 1200px;
    --container-padding: 40px;
    --container-padding-mobile: 20px;
    
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;
    
    /* ==========================================
       Z-INDEX LAYERS
       ========================================== */
    --z-background: -1;
    --z-base: 0;
    --z-content: 100;
    --z-header: 1000;
    --z-progress: 1001;
    --z-modal: 2000;
    --z-cursor: 9999;
    
    /* ==========================================
       PROPRIÉTÉS SPÉCIFIQUES COMPOSANTS
       ========================================== */
    
    /* Navigation */
    --nav-height: 80px;
    --nav-background: rgba(255, 255, 255, 0.98);
    --nav-backdrop-blur: 10px;
    
    /* Boutons */
    --btn-padding-y: 12px;
    --btn-padding-x: 24px;
    --btn-padding-lg-y: 16px;
    --btn-padding-lg-x: 32px;
    --btn-padding-sm-y: 8px;
    --btn-padding-sm-x: 16px;
    
    /* Cards */
    --card-padding: 40px;
    --card-padding-mobile: 24px;
    --card-border-radius: var(--radius-xl);
    
    /* Grilles */
    --grid-gap: 32px;
    --grid-gap-mobile: 20px;
    --grid-columns-mobile: 1;
    --grid-columns-tablet: 2;
    --grid-columns-desktop: 3;
    
    /* Sections */
    --section-padding-y: 100px;
    --section-padding-y-mobile: 60px;
    --section-padding-x: var(--container-padding);
    
    /* ==========================================
       COULEURS ÉTAT & FEEDBACK
       ========================================== */
    --color-success: #27ae5f;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;
    
    --color-success-bg: rgba(16, 185, 129, 0.1);
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    --color-error-bg: rgba(239, 68, 68, 0.1);
    --color-info-bg: rgba(59, 130, 246, 0.1);
    
    /* ==========================================
       ANIMATIONS TIMING
       ========================================== */
    --animation-duration-fast: 0.15s;
    --animation-duration-normal: 0.3s;
    --animation-duration-slow: 0.6s;
    --animation-duration-slower: 1s;
    
    --animation-delay-base: 0.1s;
    --animation-delay-stagger: 0.05s;
}