/**
 * Rainbow Theme - Bunt und froehlich
 * Regenbogenfarben fuer maximale Freude
 * Kindgerechter Stil mit grossen, runden Elementen
 */

[data-theme="rainbow"],
:root {
  /* Hauptfarben - Lebendige Regenbogentoene */
  --color-primary: #ff6b6b;
  --color-secondary: #feca57;
  --color-background: #667eea;
  --color-surface: rgba(255, 255, 255, 0.25);
  --color-surface-hover: rgba(255, 255, 255, 0.35);
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.8);
  --color-panel-header: #ffffff;

  /* Akzentfarben */
  --color-accent-1: #48dbfb;
  --color-accent-2: #ff9ff3;
  --color-accent-3: #54a0ff;
  --color-success: #1dd1a1;
  --color-danger: #ff6b6b;

  /* Grid/Sequencer */
  --color-grid-line: rgba(255, 255, 255, 0.5);
  --color-playhead: rgba(255, 107, 107, 0.35);
  --color-cell-occupied: rgba(254, 202, 87, 0.6);
  --color-cell-active: rgba(29, 209, 161, 0.7);
  --color-marker: #1dd1a1;
  --color-marker-corner: #feca57;

  /* Kindgerechte Border-Radius */
  --radius-panel: 24px;
  --radius-button: 16px;
  --radius-card: 20px;

  /* Schatten mit Farbe */
  --shadow-glow: 0 0 30px rgba(255, 107, 107, 0.5);
  --shadow-button: 0 8px 25px rgba(0, 0, 0, 0.2);

  /* Rainbow Gradient */
  --gradient-rainbow: linear-gradient(
    90deg,
    #ff6b6b 0%,
    #feca57 25%,
    #48dbfb 50%,
    #ff9ff3 75%,
    #54a0ff 100%
  );
}

/* Rainbow-spezifische Styles */
[data-theme="rainbow"] body {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

[data-theme="rainbow"] .btn-play {
  background: var(--gradient-rainbow);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
  border-radius: 50%;
  box-shadow: 0 8px 30px rgba(255, 107, 107, 0.4);
}

[data-theme="rainbow"] .btn-play:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 40px rgba(255, 107, 107, 0.5);
}

[data-theme="rainbow"] .btn-play.playing {
  animation: shimmer 1s linear infinite;
}

[data-theme="rainbow"] .transport {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-panel);
  backdrop-filter: blur(10px);
}

[data-theme="rainbow"] .panel {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-panel);
  backdrop-filter: blur(8px);
}

[data-theme="rainbow"] .audio-init-btn {
  background: var(--gradient-rainbow);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite, wiggle 2s ease-in-out infinite;
  border-radius: 50%;
  box-shadow: 0 10px 40px rgba(255, 107, 107, 0.5);
}

/* Kindgerechte Button-Styles */
[data-theme="rainbow"] .btn {
  border-radius: var(--radius-button);
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="rainbow"] .btn:hover {
  transform: translateY(-2px) scale(1.02);
}

[data-theme="rainbow"] .btn:active {
  transform: scale(0.98);
}

/* Groessere Touch-Targets */
[data-theme="rainbow"] .btn-icon {
  min-width: 48px;
  min-height: 48px;
}