:root {
  /* Superfici */
  --bg-app:         #18181e;
  --bg-panel:       #20202a;
  --bg-control:     #28282f;
  --bg-elevated:    #32323e;

  /* Bordi */
  --border-subtle:  #36364a;
  --border-strong:  #4e4e62;

  /* Testo */
  --text-primary:   #ededf0;
  --text-secondary: #a8a8be;
  --text-muted:     #6e6e82;
  --text-label:     #8a8a9e;

  /* Accenti funzionali */
  --accent-play:    #23d18b;
  --accent-rec:     #e8453c;
  --accent-solo:    #f0b429;
  --accent-loop:    #f0b429;   /* LOOP_RGB di track-view.js, in componenti per il canvas */
  --accent-blue:    #4a9eff;
  --accent-purple:  #c084fc;

  /* Colori tracce drum machine */
  --track-kick:     #ff3e3e;
  --track-snare:    #23d18b;
  --track-clap:     #e040fb;
  --track-hihat:    #e8e8ec;
  --track-tom:      #ffaa00;
  --track-rim:      #00d4ff;
  --track-cowbell:  #4a9eff;
  --track-maracas:  #f0f060;
  --track-claves:   #ff8800;

  /* Geometria */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* Spaziatura */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Tipografia */
  --font-ui:   'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs:   9px;
  --text-sm:  11px;
  --text-md:  13px;
  --text-lg:  16px;
  --text-xl:  20px;

  /* Z-index */
  --z-base:    10;
  --z-panel:   20;
  --z-overlay: 50;
  --z-modal:  100;

  /* Transizioni */
  --transition-fast: 80ms ease;
  --transition-mid: 160ms ease;
}