/* ============================================
   VARIABLES.CSS — Design tokens & thème global
   ============================================ */

:root {
  /* Couleurs principales */
  --bg:        #07070d;
  --bg2:       #0e0e18;
  --bg3:       #14141f;
  --bg4:       #1a1a28;

  /* Bordures */
  --border:    rgba(255, 255, 255, 0.06);
  --border2:   rgba(255, 255, 255, 0.13);
  --border3:   rgba(255, 255, 255, 0.22);

  /* Accent violet */
  --accent:    #7c6aff;
  --accent-h:  #9e80ff;
  --accent-d:  #5a4acc;

  /* Accent rose */
  --pink:      #ff6a9e;
  --pink-h:    #ff8ab8;

  /* Accent vert/teal */
  --teal:      #6affd4;
  --teal-d:    #3ae0b0;

  /* Accent orange */
  --orange:    #ffaa4d;

  /* Texte */
  --text:      #e8e8f0;
  --muted:     #6868a0;
  --muted2:    #4a4a78;

  /* Typographie */
  --font-mono:    'Space Mono', monospace;
  --font-display: 'Syne', sans-serif;

  /* Espacements */
  --gap-sm:  0.75rem;
  --gap-md:  1.5rem;
  --gap-lg:  3rem;
  --gap-xl:  6rem;

  /* Rayons */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 12px;

  /* Transitions */
  --t-fast:   0.15s ease;
  --t-normal: 0.25s ease;
  --t-slow:   0.4s ease;

  /* Largeur max du contenu */
  --max-w: 920px;
}