:root {

  /* BRAND */
  --color-primary:          #f07f20;
  --color-primary-hover:    #d96c10;
  --color-primary-light:    rgba(240, 127, 32, 0.15);
  --color-primary-rgb:      240, 127, 32;

  --color-secondary:        #dfb000;
  --color-secondary-hover:  #c49c00;
  --color-secondary-light:  rgba(223, 176, 0, 0.15);

  --color-tertiary:         #2d4156;
  --color-tertiary-hover:   #3a5470;
  --color-tertiary-light:   rgba(45, 65, 86, 0.40);

  /* FONDS */
  --color-bg:               #0c0c0c;
  --color-bg-elevated:      #1a1a1a;
  --color-bg-surface:       #222222;
  --color-bg-overlay:       #333333;
  --color-bg-section:       #2d4156;
  --color-bg-header:        rgba(4, 6, 8, 0.85);

  /* OVERLAYS */
  --overlay-light:          rgba(0, 0, 0, 0.267);
  --overlay-mid:            rgba(0, 0, 0, 0.40);
  --overlay-dark:           rgba(0, 0, 0, 0.60);
  --overlay-heavy:          rgba(0, 0, 0, 0.80);

  /* TEXTE */
  --color-text-primary:     rgba(255, 255, 255, 0.80);
  --color-text-strong:      #ffffff;
  --color-text-secondary:   #cccccc;
  --color-text-muted:       rgba(255, 255, 255, 0.35);
  --color-text-inverse:     #0c0c0c;
  --color-text-link:        #f07f20;
  --color-text-link-hover:  #dfb000;

  /* BORDURES */
  --color-border:           rgba(255, 255, 255, 0.10);
  --color-border-mid:       rgba(255, 255, 255, 0.20);
  --color-border-focus:     #f07f20;
  --color-border-subtle:    #333333;

  /* SÉMANTIQUES */
  --color-success:          #2d9e6b;
  --color-success-light:    rgba(45, 158, 107, 0.15);
  --color-warning:          #dfb000;
  --color-warning-light:    #fff3cd;
  --color-danger:           #c0392b;
  --color-danger-light:     rgba(192, 57, 43, 0.15);
  --color-info:             #2d4156;

  /* TYPOGRAPHIE */
  --font-primary:    "Roboto Condensed", sans-serif;
  --font-heading:    "Roboto Condensed", sans-serif;
  --font-mono:       "JetBrains Mono", monospace;
  --text-base:       17px;
  --leading-tight:   1.18;
  --leading-base:    1.60;

  /* SPACING (base 4px) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* GÉOMÉTRIE */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 999px;

  /* OMBRES & GLOWS */
  --shadow-sm:       0 2px 8px  rgba(0, 0, 0, 0.60);
  --shadow-md:       0 6px 20px rgba(0, 0, 0, 0.70);
  --shadow-lg:       0 16px 48px rgba(0, 0, 0, 0.80);
  --glow-primary:    0 0 24px rgba(240, 127, 32, 0.40);
  --glow-primary-sm: 0 0 12px rgba(240, 127, 32, 0.25);
  --glow-secondary:  0 0 20px rgba(223, 176, 0, 0.30);

  /* TRANSITIONS */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms cubic-bezier(.16, 1, .3, 1);

  /* BREAKPOINTS (référence JS uniquement, CSS utilise les valeurs directement) */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;

  /* Z-INDEX */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
}