/* ══════════════════════════════════════════
   RELAY — Variables CSS
   ══════════════════════════════════════════ */

:root {
  /* Palette */
  --relay-cyan:       #06b6d4;
  --relay-cyan-dark:  #0891b2;
  --relay-cyan-dim:   rgba(6, 182, 212, 0.12);
  --relay-cyan-glow:  rgba(6, 182, 212, 0.35);

  /* Gradient signature */
  --relay-gradient: linear-gradient(135deg, #06b6d4, #0891b2);

  /* Backgrounds */
  --relay-bg:         #080d14;
  --relay-bg-2:       #0d1520;
  --relay-surface:    #111d2e;
  --relay-surface-2:  #192638;

  /* Texte */
  --relay-text:       #e2e8f0;
  --relay-text-muted: #64748b;
  --relay-text-dim:   #94a3b8;

  /* Bordures */
  --relay-border:     rgba(255, 255, 255, 0.07);
  --relay-border-active: rgba(6, 182, 212, 0.4);

  /* Player bar */
  --relay-player-h:   72px;

  /* Sidebar */
  --relay-sidebar-w:  220px;

  /* Radii */
  --relay-radius:     12px;
  --relay-radius-sm:  8px;
  --relay-radius-lg:  16px;

  /* Transitions */
  --relay-transition: 0.2s ease;

  /* Typo */
  --relay-font: 'Inter', system-ui, -apple-system, sans-serif;
}