:root {
  
  --noir:        #0A0A0A;
  --blanc:       #FFFFFF;
  --gris-950:    #111111;
  --gris-900:    #1A1A1A;
  --gris-800:    #2A2A2A;
  --gris-700:    #3D3D3D;
  --gris-600:    #555555;
  --gris-500:    #717171;
  --gris-400:    #9A9A9A;
  --gris-300:    #C4C4C4;
  --gris-200:    #E0E0E0;
  --gris-100:    #F0F0F0;
  --gris-50:     #F8F8F8;

  --jaune:       #FFD51F;
  --jaune-hover: #E6BF00;
  --jaune-light: #FFF4CC;
  --jaune-dark:  #FFD51F;

  --vert:        #00CF7C;
  --vert-hover:  #00B56C;
  --vert-light:  #E6FFF4;

  --danger:      #E53E3E;
  --danger-light:#FFF5F5;
  --info:        #3182CE;
  --info-light:  #EBF8FF;
  --warning:     #DD6B20;
  --warning-light:#FFFAF0;

  --glass-bg:          rgba(255, 255, 255, 0.72);
  --glass-border:      rgba(255, 255, 255, 0.25);
  --glass-shadow:      0 8px 32px rgba(0, 0, 0, 0.08);
  --glass-blur:        blur(20px);

  --glass-dark-bg:     rgba(10, 10, 10, 0.82);
  --glass-dark-border: rgba(255, 255, 255, 0.08);

  --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:   5rem;      
  --space-10:  6rem;      
  --space-11:  8rem;      

  --container-max:     1280px;
  --container-padding: 1rem; 

  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-2xl:  10px;
  --radius-full: 6px;

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.16);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  --z-dropdown:  100;
  --z-sticky:    200;
  --z-megamenu:  900;
  --z-header:    1000;
  --z-overlay:   1100;
  --z-modal:     1200;
  --z-toast:     1300;

  --topbar-height: 40px;
  --header-height: 72px;
  --header-height-scrolled: 60px;
  --header-total: calc(var(--topbar-height) + var(--header-height));
}