/* ============================================================================
   DESIGN TOKENS & VARIABLES CSS
   
   Système de design centralisé - Toutes les valeurs de style sont ici.
   Permet de maintenir la cohérence visuelle sur l'ensemble du site.
   
   Utilisation : Ces variables sont utilisées dans tous les autres fichiers CSS
   ============================================================================ */

:root {
    /* ========================================
       PALETTE DE COULEURS
    ======================================== */
    --color-primary: #1A3A52;      /* Bleu profond - Fond principal */
    --color-secondary: #0D1F2D;    /* Bleu nuit - Header, Footer */
    --color-accent: #0099FF;       /* Bleu électrique - Survols, CTA */
    --color-gold: #D4AF37;         /* Or - Labels premium, détails */
    --color-text: #FFFFFF;         /* Blanc pur - Texte principal */
    --color-success: #00C896;      /* Vert - Messages de succès */
    --color-error: #FF4757;        /* Rouge - Messages d'erreur */
    
    --project-color: #1A3A52;      /* Couleur dynamique du projet actuel */
    
    /* ========================================
       TRANSPARENCES & OVERLAYS
    ======================================== */
    --overlay-light: rgba(255, 255, 255, 0.1);
    --overlay-medium: rgba(255, 255, 255, 0.85);
    
    /* ========================================
       SYSTÈME D'ESPACEMENT
       Échelle harmonique pour la cohérence
    ======================================== */
    --spacing-xs: 10px;
    --spacing-sm: 20px;
    --spacing-md: 40px;
    --spacing-lg: 60px;
    --spacing-xl: 100px;
    
    /* ========================================
       TYPOGRAPHIE
    ======================================== */
    --font-display: 'Bebas Neue', sans-serif;    /* Titres impactants */
    --font-body: 'Inter', sans-serif;            /* Texte courant */
    --font-mono: 'JetBrains Mono', monospace;    /* Labels techniques */
    
    /* ========================================
       Z-INDEX - Gestion des couches
    ======================================== */
    --z-background: 0;      /* Grille et cercles animés */
    --z-content: 1;         /* Contenu principal */
    --z-nav-dots: 900;      /* Navigation latérale */
    --z-header: 1000;       /* Header fixe */
    --z-cursor: 10000;      /* Curseur custom (toujours au-dessus) */
}