/* =============================================
   CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================= */

:root {
  /* ─── Couleurs fond ─── */
  --bg-deep:          #05050f;
  --bg-card:          #0d0d1f;
  --bg-glass:         rgba(255, 255, 255, 0.05);
  --bg-glass-border:  rgba(255, 255, 255, 0.08);
  --bg-footer:        #03030a;

  /* ─── Néons ─── */
  --neon-purple:      #a855f7;
  --neon-pink:        #ec4899;
  --neon-blue:        #3b82f6;
  --neon-gold:        #f59e0b;
  --neon-green:       #10b981;
  --neon-red:         #ef4444;

  /* ─── Texte ─── */
  --text-primary:     #f8f8ff;
  --text-secondary:   #94a3b8;
  --text-muted:       #4a5568;

  /* ─── Dégradés ─── */
  --gradient-main:    linear-gradient(135deg, #a855f7, #ec4899, #3b82f6);
  --gradient-card:    linear-gradient(145deg, #0d0d1f, #1a0a2e);
  --gradient-hero:    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(168, 85, 247, 0.12) 0%, transparent 70%);

  /* ─── Lueurs (glow) ─── */
  --glow-purple:      0 0 20px rgba(168, 85, 247, 0.4);
  --glow-purple-lg:   0 0 60px rgba(168, 85, 247, 0.25), 0 0 120px rgba(168, 85, 247, 0.1);
  --glow-pink:        0 0 20px rgba(236, 72, 153, 0.4);
  --glow-blue:        0 0 20px rgba(59, 130, 246, 0.4);

  /* ─── Typographies ─── */
  --font-display:     'Space Grotesk', 'DM Sans', system-ui, sans-serif;
  --font-body:        'Inter', system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', 'Courier New', monospace;

  /* ─── Espacements ─── */
  --space-xs:    0.25rem;   /*  4px */
  --space-sm:    0.5rem;    /*  8px */
  --space-md:    1rem;      /* 16px */
  --space-lg:    1.5rem;    /* 24px */
  --space-xl:    2rem;      /* 32px */
  --space-2xl:   3rem;      /* 48px */
  --space-3xl:   4rem;      /* 64px */
  --space-4xl:   6rem;      /* 96px */
  --space-5xl:   8rem;      /* 128px */

  /* ─── Rayons ─── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ─── Transitions ─── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.6s ease;
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Breakpoints (ref seulement, usage dans responsive.css) ─── */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;

  /* ─── Layout ─── */
  --container-max:    1200px;
  --container-pad:    clamp(1rem, 5vw, 2rem);
  --nav-height:       70px;
  --section-pad-y:    clamp(var(--space-3xl), 8vw, var(--space-5xl));

  /* ─── Z-index ─── */
  --z-particles:    0;
  --z-content:      1;
  --z-float:        2;
  --z-sticky:       100;
  --z-navbar:       200;
  --z-mobile-menu:  300;
  --z-cursor:       9999;
}