/* css/variables.css */

:root {
    /* ==========================================================================
       PALETTE DE COULEURS
       ========================================================================== */
    --color-orange: #f07100;
    --color-orange-yellow: #f0ba00;
    --color-bg-main: #1d3f71;          /* Bleu marine foncé */
    --color-blue-light: #70c0f1;       /* Bleu clair d'accent */
    --color-white: #ffffff;            /* Blanc pur */
    
    /* Textes */
    --color-text-primary: #e8edf5;     /* Blanc cassé */
    --color-text-secondary: #a0b0c8;   /* Gris bleu secondaire */
    
    /* Surfaces, fonds et overlays */
    --color-bg-alt: #162d56;           /* Fond sections alternatif (plus sombre) */
    --color-bg-card: #1e4880;          /* Fond des cartes (plus clair) */
    --color-border: rgba(112, 192, 241, 0.15);
    --color-overlay: rgba(29, 63, 113, 0.95);

    /* Palette thème clair (sections à fond blanc) */
    --color-ink: #16233f;               /* Titres sur fond clair */
    --color-ink-body: #3f4d63;          /* Texte par défaut sur fond clair */
    --color-ink-secondary: #5b6b82;     /* Texte courant / descriptions */
    --color-ink-muted: #8492a8;         /* Labels, texte discret */
    --color-ink-faint: #c2ccdb;         /* Texte très atténué */
    --color-surface: #f5f8fc;           /* Fond de carte claire */
    --color-surface-alt: #eef3fa;       /* Fond de section claire alternée */

    /* ==========================================================================
       DÉGRADÉS (GRADIENTS)
       ========================================================================== */
    --gradient-orange: linear-gradient(135deg, #f07100, #f0ba00);
    --gradient-blue: linear-gradient(135deg, #1d3f71, #162d56);
    --gradient-hero: linear-gradient(180deg, #0f1e3a 0%, #1d3f71 100%);

    /* ==========================================================================
       TYPOGRAPHIE
       ========================================================================== */
    --font-primary: 'Outfit', sans-serif;
    --font-secondary: 'Inter', sans-serif;
    
    --font-base-size: 16px;
    --font-base-line-height: 1.6;

    /* Échelle typographique */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-hero: clamp(2.5rem, 5vw, 4.5rem);

    /* ==========================================================================
       ESPACEMENTS (SPACING)
       ========================================================================== */
    /* Layout */
    --max-width: 1200px;
    --space-sm: 1rem;      /* 16px  — utilisé dans .container padding */
    --space-md: 1.5rem;    /* 24px  — utilisé dans .container padding */
    --space-xxl: 6rem;     /* 96px  — utilisé dans .section-padding */

    /* Couleurs manquantes */
    --color-text-muted: #a0b0c8;
    --color-border-hover: rgba(112, 192, 241, 0.4);

    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */

    /* Angles arrondis (Border radius) */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* ==========================================================================
       OMBRES POUR THÈME SOMBRE (SHADOWS)
       ========================================================================== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
    --shadow-orange: 0 4px 20px rgba(240, 113, 0, 0.3);

    /* ==========================================================================
       TRANSITIONS
       ========================================================================== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* ==========================================================================
       PROFONDEUR (Z-INDEX)
       ========================================================================== */
    --z-nav: 100;
    --z-overlay: 150;
    --z-modal: 200;
}

/* ==========================================================================
   BREAKPOINTS MÉDIAS QUERIES (Pour rappel lors du développement)
   ========================================================================== 
   @media (max-width: 767px)  => Mobile
   @media (min-width: 768px)  => Tablet (768px - 1024px)
   @media (min-width: 1025px) => Desktop (> 1024px)
   @media (min-width: 1281px) => Wide (> 1280px)
   ========================================================================== */