/* =====================================================================
   VARIABLES.CSS — Design tokens
   CAMP PROVOQUE TON FUTUR 2026
   Palette extraite des maquettes fournies.
   ===================================================================== */

:root {
  /* ---------- Couleurs de marque ---------- */
  --color-navy:        #06122b; /* bleu nuit profond (fond principal)     */
  --color-navy-light:  #0d1832; /* bleu nuit clair (cartes sombres)       */
  --color-navy-soft:   #172441; /* dégradés / survols sombres             */
  --color-orange:      #f05a24; /* orange vif (accent principal / CTA)    */
  --color-orange-dark: #ec4b18; /* orange foncé (dégradés)                */
  --color-yellow:      #f8bd26; /* jaune doré (accent secondaire)         */
  --color-yellow-soft: #ffd164; /* jaune clair (dégradés)                 */
  --color-red:         #e12636; /* rouge ponctuel                         */
  --color-green:       #3ca869; /* vert (bourses / validation)            */
  --color-cream:       #fff8e3; /* blanc cassé                            */
  --color-white:       #ffffff;

  /* ---------- Texte ---------- */
  --color-text:        #0b1224; /* texte principal sur fond clair         */
  --color-text-invert: #ffffff; /* texte sur fond sombre                  */
  --color-muted:       #647087; /* texte secondaire                       */
  --color-muted-light: #b7c0d0; /* texte secondaire sur fond sombre       */

  /* ---------- Surfaces / bordures ---------- */
  --color-bg:          #ffffff;
  --color-bg-alt:      #f7f8fa; /* sections alternées                     */
  --color-border:      #e6e8ee;
  --color-border-dark: rgba(255, 255, 255, 0.16);

  /* ---------- Badges catégories (actualités) ---------- */
  --color-badge-annonce:     var(--color-orange);
  --color-badge-programme:   #2d8ecb;
  --color-badge-partenariat: #dc453c;
  --color-badge-bourse:      var(--color-green);
  --color-badge-portrait:    #8e5cd0;
  --color-badge-communaute:  #e08a1e;

  /* ---------- Typographie ---------- */
  --font-heading: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Échelle fluide (clamp) */
  --fs-display: clamp(2.75rem, 6vw + 1rem, 5.25rem); /* H1 hero          */
  --fs-h1:      clamp(2.25rem, 4vw + 1rem, 4rem);
  --fs-h2:      clamp(1.5rem, 2vw + 0.75rem, 2.25rem);
  --fs-h3:      clamp(1.125rem, 1vw + 0.6rem, 1.4rem);
  --fs-lead:    clamp(1.05rem, 1vw + 0.6rem, 1.35rem);
  --fs-body:    1rem;
  --fs-small:   0.8rem;
  --fs-xsmall:  0.68rem;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 500;
  --fw-black:     500;

  --lh-tight:  1.05;
  --lh-snug:   1.3;
  --lh-normal: 1.6;

  /* ---------- Espacements (échelle 4px) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --section-py: clamp(3.5rem, 6vw, 5.5rem); /* padding vertical section   */

  /* ---------- Rayons ---------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  /* ---------- Ombres ---------- */
  --shadow-soft: 0 8px 22px rgba(6, 18, 43, 0.06);
  --shadow-card: 0 12px 30px rgba(6, 18, 43, 0.10);
  --shadow-lg:   0 18px 45px rgba(6, 18, 43, 0.15);

  /* ---------- Layout ---------- */
  --container-width: 1180px;
  --container-pad:   clamp(1rem, 4vw, 2rem);
  --header-height:   78px;

  /* ---------- Transitions ---------- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   600ms ease;

  /* ---------- Z-index ---------- */
  --z-header:   100;
  --z-menu:     90;
  --z-overlay:  120;
  --z-toast:    200;
}