/**
 * CELAP - Variables CSS
 * Définition des variables globales du design system
 */

:root {
    /* ==================== COULEURS ==================== */
    
    /* Backgrounds */
    --color-bg-dark: #0a0a0b;
    --color-bg-card: #141416;
    --color-bg-card-hover: #1a1a1d;
    
    /* Accent - Jaune doré */
    --color-accent: #f0c850;
    --color-accent-dim: #d4a84a;
    --color-accent-dark: #c49a40;
    
    /* Couleurs secondaires pour les badges */
    --color-blue: #50a8f0;
    --color-pink: #f05080;
    --color-green: #49D38A;
    
    /* Texte */
    --color-text-primary: #ffffff;
    --color-text-secondary: #a0a0a5;
    --color-text-muted: #6a6a70;
    
    /* Bordures */
    --color-border: #2a2a2e;
    --color-border-accent: rgba(240, 200, 80, 0.3);
    
    /* ==================== GRADIENTS ==================== */
    --gradient-gold: linear-gradient(135deg, #f0c850 0%, #d4a84a 50%, #c49a40 100%);
    --gradient-bg-section: linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-card) 50%, var(--color-bg-dark) 100%);
    
    /* ==================== OMBRES ==================== */
    --shadow-glow: 0 0 40px rgba(240, 200, 80, 0.15);
    --shadow-glow-strong: 0 0 60px rgba(240, 200, 80, 0.25);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-card-hover: 0 20px 60px rgba(0, 0, 0, 0.3);
    --shadow-button: 0 4px 20px rgba(240, 200, 80, 0.3);
    --shadow-button-hover: 0 8px 30px rgba(240, 200, 80, 0.4);
    
    /* ==================== TYPOGRAPHIE ==================== */
    --font-primary: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
    
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.85rem;     /* ~14px */
    --font-size-base: 0.95rem;   /* ~15px */
    --font-size-md: 1.05rem;     /* ~17px */
    --font-size-lg: 1.2rem;      /* ~19px */
    --font-size-xl: 1.5rem;      /* 24px */
    --font-size-2xl: 2rem;       /* 32px */
    --font-size-3xl: 2.5rem;     /* 40px */
    --font-size-4xl: 3.5rem;     /* 56px */
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    --line-height-tight: 1.1;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.7;
    
    /* ==================== ESPACEMENTS ==================== */
    --spacing-xs: 0.25rem;       /* 4px */
    --spacing-sm: 0.5rem;        /* 8px */
    --spacing-md: 1rem;          /* 16px */
    --spacing-lg: 1.5rem;        /* 24px */
    --spacing-xl: 2rem;          /* 32px */
    --spacing-2xl: 3rem;         /* 48px */
    --spacing-3xl: 4rem;         /* 64px */
    --spacing-4xl: 5rem;         /* 80px */
    
    /* ==================== BORDURES ==================== */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 50%;
    
    /* ==================== TRANSITIONS ==================== */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.4s ease;
    --transition-bounce: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ==================== LAYOUT ==================== */
    --nav-width: 280px;
    --max-width-content: 1400px;
    --max-width-text: 600px;
    --max-width-form: 600px;
    
    /* ==================== Z-INDEX ==================== */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-nav: 1000;
    --z-modal: 1100;
    --z-tooltip: 1200;
}