/* ============================================================
   DESIGN TOKENS — METFP Plateforme Diplômes
   Source unique de vérité pour toutes les valeurs visuelles.
   ============================================================ */

:root {
  /* ----- COULEURS ----- */

  /* Vert République (couleur institutionnelle principale) */
  --color-primary:      #005C2E;
  --color-primary-600:  #007A3D;
  --color-primary-500:  #009B4D;
  --color-primary-100:  #E8F5ED;
  --color-primary-50:   #F3FAF6;

  /* Bleu institutionnel (hero, sections d'impact, crédibilité) */
  --color-navy:      #0B1E3D;
  --color-navy-800:  #1A3A5C;
  --color-navy-700:  #1E4976;
  --color-navy-600:  #2463A0;
  --color-navy-100:  #E8F0FA;
  --color-navy-50:   #F0F5FF;

  /* Or Diplôme (réussite, CTA diplôme) */
  --color-gold:         #FFC200;
  --color-gold-light:   #FEF3E2;

  /* États sémantiques */
  --color-success:        #27AE60;
  --color-success-light:  #E8F8EE;
  --color-danger:         #C0392B;
  --color-danger-light:   #FDECEA;
  --color-warning:        #E67E22;
  --color-warning-light:  #FEF6E8;
  --color-info:           #2980B9;
  --color-info-light:     #EBF5FB;

  /* Neutres */
  --color-neutral-900: #1A1A2E;
  --color-neutral-700: #2D3748;
  --color-neutral-600: #4A5568;
  --color-neutral-400: #A0AEC0;
  --color-neutral-300: #CBD5E0;
  --color-neutral-200: #E2E8F0;
  --color-neutral-100: #EDF2F7;
  --color-neutral-50:  #F7FAFC;
  --color-white:       #FFFFFF;

  /* ----- TYPOGRAPHIE ----- */
  --font-family:           'Poppins', sans-serif;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  1.875rem;  /* 30px */
  --font-size-4xl:  2.25rem;   /* 36px */

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.25;
  --line-height-base:    1.6;
  --line-height-relaxed: 1.8;

  /* ----- ESPACEMENTS (base 4px) ----- */
  --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 */

  /* ----- RADIUS ----- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ----- OMBRES ----- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 10px 15px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.10), 0 20px 48px rgba(0,0,0,0.06);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.12);

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

  /* ----- LAYOUT ----- */
  --header-height:       80px;
  --container-max:       1200px;
  --container-padding:   1.5rem;

  /* ----- Z-INDEX ----- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-toast:    1500;
}