/* ============================================================
   variables.css — Palette, typographie et espacements globaux
   ============================================================
   ⚠️  SEUL FICHIER à modifier pour changer l'identité visuelle.
   Toutes les autres feuilles utilisent ces variables.
   ============================================================ */

:root {

  /* ── Couleurs principales ─────────────────────────────────── */
  --clr-primary:        #004B9C;   /* Bleu marine SIM            */
  --clr-primary-dark:   #003366;   /* Bleu foncé (hover, ombre)  */
  --clr-primary-light:  #51AEE2;   /* Bleu cyan SIM              */
  --clr-accent:         #51AEE2;   /* Bleu cyan SIM (CTA, badges)*/
  --clr-accent-dark:    #3D9ACD;   /* Bleu moyen (hover accent)    */
  --clr-success:        #2ECC71;   /* Vert confirmation          */
  --clr-danger:         #E74C3C;   /* Rouge erreur/alerte        */

  /* ── Neutres ──────────────────────────────────────────────── */
  --clr-dark:           #1A1A2E;   /* Texte principal            */
  --clr-mid:            #4A5568;   /* Texte secondaire           */
  --clr-light:          #718096;   /* Texte tertiaire / labels   */
  --clr-border:         #E2E8F0;   /* Bordures légères           */
  --clr-bg:             #F8FAFF;   /* Fond de page               */
  --clr-white:          #FFFFFF;

  /* ── Dégradés ─────────────────────────────────────────────── */
  --gradient-hero:      linear-gradient(135deg, #003366 0%, #004B9C 50%, #51AEE2 100%);
  --gradient-accent:    linear-gradient(135deg, #51AEE2 0%, #004B9C 100%);
  --gradient-card:      linear-gradient(180deg, rgba(0,75,156,0.05) 0%, rgba(0,75,156,0) 100%);

  /* ── Typographie ──────────────────────────────────────────── */
  --font-heading:       'Montserrat', sans-serif;       /* Titres      */
  --font-body:          'Montserrat', sans-serif;       /* Corps       */

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* ── Espacements ──────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* ── Arrondis ─────────────────────────────────────────────── */
  --radius-sm:  0.375rem;
  --radius-md:  0.75rem;
  --radius-lg:  1.25rem;
  --radius-xl:  2rem;
  --radius-full: 9999px;

  /* ── Ombres ───────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(27,79,138,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(27,79,138,0.12), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 12px 40px rgba(27,79,138,0.16), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl:  0 24px 64px rgba(27,79,138,0.20);

  /* ── Transitions ──────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ───────────────────────────────────────────────── */
  --container-max:  1200px;
  --navbar-height:  72px;
}