/**
 * Theme-aware utility classes using design tokens.
 * Use these instead of inline color/background for theme support.
 */
.bg-app-surface {
  background-color: var(--app-surface);
}
.bg-app-surface-elevated {
  background-color: var(--app-surface-elevated);
}
.bg-app-bg {
  background-color: var(--app-bg);
}
.text-app-muted {
  color: var(--app-text-muted);
}
.text-app {
  color: var(--app-text);
}

/* Metronome fullscreen container – token-based so theme applies */
.metronome-standalone-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background-color: var(--app-surface);
}

/* Setlist/song break row */
.setlist-break-row,
.song-break-row {
  background-color: var(--app-surface-elevated);
  font-style: italic;
}

/* Waveform canvas (songs) – theme-aware background */
.waveform-canvas {
  background-color: var(--app-surface);
}