/**
 * KLORGRAV — Variables CSS
 * Toutes les valeurs de design centralisées ici
 */

:root {

  /* COULEURS */
  --color-bg:           #0a0a0a;
  --color-bg-alt:       #0f0f0f;
  --color-surface:      #161616;
  --color-surface-alt:  #1e1e1e;
  --color-border:       #252525;

  /* TEXTE */
  --color-text:         #f2f2f2;
  --color-text-muted:   #888888;
  --color-text-subtle:  #444444;

  /* NÉON PALETTE KLORGRAV */
  --color-neon-pink:    #ff2d78;
  --color-neon-yellow:  #ffec00;
  --color-neon-green:   #39ff14;
  --color-neon-blue:    #00d4ff;
  --color-neon-orange:  #ff6b00;
  --color-neon-purple:  #bf00ff;

  /* ACCENT */
  --color-accent:       #ff2d78;
  --color-accent-hover: #ff5a95;

  /* FONTS */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* TAILLES */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

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

  /* LAYOUT */
  --container-max:     1280px;
  --container-narrow:  800px;
  --container-padding: 1.5rem;

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

  /* OMBRES */
  --shadow-sm:          0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:          0 4px 16px rgba(0,0,0,0.6);
  --shadow-lg:          0 8px 40px rgba(0,0,0,0.7);
  --shadow-neon-pink:   0 0 24px rgba(255,45,120,0.35);
  --shadow-neon-yellow: 0 0 24px rgba(255,236,0,0.35);

  /* TRANSITIONS */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Z-INDEX */
  --z-below:   -1;
  --z-base:     0;
  --z-above:   10;
  --z-nav:    100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;

  /* HEADER */
  --header-height: 72px;
}