/* ==========================================================================
   CSS VARIABLES & DESIGN TOKENS
   Thème Dark OLED épuré pour régie son mobile
   ========================================================================== */

:root {
  /* Palette de couleurs */
  --bg-primary: #0a0c10;
  --bg-surface: #13171f;
  --bg-surface-elevated: #1b212c;
  --bg-card: #161b24;
  --bg-card-hover: #1e2430;

  /* États des pistes */
  --state-idle: #242c3b;
  --state-idle-border: #323d50;
  --state-playing: #10b981;
  --state-playing-bg: rgba(16, 185, 129, 0.12);
  --state-playing-border: #10b981;
  --state-playing-glow: rgba(16, 185, 129, 0.35);
  --state-played: #0f131a;
  --state-played-border: #232a36;
  --state-played-text: #6b7280;

  /* Bouton d'urgence Stop */
  --danger-primary: #ef4444;
  --danger-hover: #dc2626;
  --danger-glow: rgba(239, 68, 68, 0.4);

  /* Typographie & Contraste */
  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --text-dim: #6b7280;
  --text-inverse: #000000;

  /* Indicateur Wake Lock / Offline */
  --status-active: #10b981;
  --status-warning: #f59e0b;
  --status-inactive: #ef4444;

  /* Espacements et Rayons */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Touch targets minimum mobile */
  --touch-target-min: 56px;
  --header-height: 64px;
  --footer-height: 88px;

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}