/**
 * variables.css
 * Design tokens — palette inspirée Pathé (noir, gris, jaune)
 */
:root {
  /* ── Palette principale ─────────────────────────────────── */
  --bg:          #0a0a0a;
  --bg2:         #111111;
  --card:        #181818;
  --card-hover:  #1f1f1f;
  --border:      #272727;
  --border2:     #333333;

  /* Jaune Pathé */
  --yellow:      #f5c518;
  --yellow-dark: #d4aa12;
  --yellow-dim:  rgba(245, 197, 24, 0.12);
  --yellow-glow: rgba(245, 197, 24, 0.2);

  /* Gris */
  --grey-100:    #f0f0f0;
  --grey-200:    #c8c8c8;
  --grey-400:    #888888;
  --grey-600:    #555555;
  --grey-800:    #2a2a2a;

  /* Texte */
  --text:        #f0f0f0;
  --text-muted:  #888888;
  --text-dim:    #555555;

  /* États */
  --red:         #e63946;
  --red-dim:     rgba(230, 57, 70, 0.12);
  --green:       #2dc653;

  /* ── Typography ─────────────────────────────────────────── */
  --font-title:  'Bebas Neue', 'Impact', sans-serif;
  --font-body:   'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono:   'JetBrains Mono', monospace;

  /* ── Espacements ────────────────────────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  36px;
  --space-2xl: 48px;

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px  rgba(0,0,0,0.6);
  --shadow-md:   0 8px 32px rgba(0,0,0,0.7);
  --shadow-yellow: 0 0 20px rgba(245,197,24,0.18);

  /* ── Transitions ────────────────────────────────────────── */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.18s;

  /* ── Toast ──────────────────────────────────────────────── */
  --toast-duration: 3500;
}