/* ============================================================
   EPYK — CSS Variables
   Toutes les valeurs de design system centralisées ici.
   Ne jamais utiliser de couleurs en dur dans les autres fichiers.
   ============================================================ */

:root {
  /* Couleurs — fond */
  --color-bg:        #0B0B0B;
  --color-bg-2:      #111111;
  --color-bg-3:      #1a1a1a;

  /* Couleurs — or (signature EPYK) */
  --color-gold:        #D4AF37;
  --color-gold-hover:  #b8952e;
  --color-gold-glow:   rgba(212, 175, 55, 0.18);
  --color-gold-border: rgba(212, 175, 55, 0.35);
  --color-gold-faint:  rgba(212, 175, 55, 0.07);

  /* Couleurs — texte */
  --color-text:        #f5f0e8;
  --color-text-muted:  rgba(245, 240, 232, 0.42);
  --color-text-faint:  rgba(245, 240, 232, 0.20);

  /* Couleurs — bordures */
  --color-border:      rgba(245, 240, 232, 0.14);
  --color-border-mid:  rgba(245, 240, 232, 0.25);

  /* Couleurs — accents fonctionnels */
  --color-red:   #FF4444;
  --color-blue:  #4A9EFF;
  --color-green: #4CAF7D;

  /* Typographie */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Espacement */
  --spacing-section-v:    100px;
  --spacing-section-h:    60px;
  --spacing-section-hero: 160px;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-medium: 0.3s ease;
  --transition-slow:   0.6s ease;

  /* Border */
  --border-thin:   0.5px solid var(--color-border);
  --border-gold:   0.5px solid var(--color-gold-border);
}