/* Crate2Crate Design System */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Audiowide&display=swap');

/* CSS Variables for theme consistency */
:root {
  --color-neon-pink: #ff0080;
  --color-neon-cyan: #00ffff;
  --color-dark-purple: #6b21a8;
  --color-dark-bg: #1a1a1a;
  --color-gray-bg: #2d2d2d;
}

/* Typography Classes */
.font-heading {
  font-family: 'Audiowide', cursive;
}

.font-display {
  font-family: 'Orbitron', monospace;
}

/* Neon Effects */
.neon-text-pink {
  text-shadow: 
    0 0 10px var(--color-neon-pink),
    0 0 20px var(--color-neon-pink),
    0 0 40px var(--color-neon-pink);
}

.neon-text-cyan {
  text-shadow: 
    0 0 10px var(--color-neon-cyan),
    0 0 20px var(--color-neon-cyan),
    0 0 40px var(--color-neon-cyan);
}

.neon-border-pink {
  box-shadow: 
    0 0 10px var(--color-neon-pink),
    0 0 20px var(--color-neon-pink),
    0 0 40px var(--color-neon-pink);
}

.neon-border-cyan {
  box-shadow: 
    0 0 10px var(--color-neon-cyan),
    0 0 20px var(--color-neon-cyan),
    0 0 40px var(--color-neon-cyan);
}

/* Vinyl Record Styles */
.vinyl-gradient {
  background: radial-gradient(circle at center, 
    var(--color-dark-bg) 30%, 
    var(--color-gray-bg) 50%, 
    var(--color-dark-bg) 100%);
}

.vinyl-icon {
  @apply w-12 h-12 rounded-full border-2 border-pink-500 flex items-center justify-center;
  background: radial-gradient(circle at center, 
    var(--color-dark-bg) 30%, 
    var(--color-gray-bg) 50%, 
    var(--color-dark-bg) 100%);
}

.vinyl-icon-sm {
  @apply w-8 h-8 rounded-full border border-pink-500 flex items-center justify-center;
  background: radial-gradient(circle at center, 
    var(--color-dark-bg) 30%, 
    var(--color-gray-bg) 50%, 
    var(--color-dark-bg) 100%);
}

.vinyl-center {
  @apply w-3 h-3 bg-pink-500 rounded-full;
}

.vinyl-center-sm {
  @apply w-2 h-2 bg-pink-500 rounded-full;
}

/* Button Styles */
.btn-neon-primary {
  @apply bg-gradient-to-r from-pink-600 to-purple-600 px-8 py-4 text-xl font-bold rounded-lg transition-all duration-300;
}

.btn-neon-primary:hover {
  box-shadow: 
    0 0 20px var(--color-neon-pink),
    0 0 40px var(--color-neon-pink);
  transform: translateY(-2px);
}

.btn-neon-secondary {
  @apply border-2 border-cyan-500 px-8 py-4 text-xl font-bold rounded-lg transition-all duration-300;
}

.btn-neon-secondary:hover {
  @apply bg-cyan-500 text-black;
}

.btn-sm-primary {
  @apply bg-pink-600 px-4 py-2 rounded font-bold transition-colors;
}

.btn-sm-primary:hover {
  @apply bg-pink-700;
}

.btn-sm-secondary {
  @apply border border-cyan-500 px-4 py-2 rounded font-bold transition-colors;
}

.btn-sm-secondary:hover {
  @apply bg-cyan-500 text-black;
}

/* Background Patterns */
.record-grid {
  background-image: radial-gradient(circle at 25% 25%, #333 2px, transparent 2px);
  background-size: 20px 20px;
}

/* Card Styles */
.card-neon {
  @apply bg-gradient-to-b from-gray-800 to-gray-900 p-6 rounded-lg border border-gray-700;
}

.card-neon-pink {
  @apply bg-gradient-to-b from-gray-800 to-gray-900 p-6 rounded-lg border border-pink-500/30;
  box-shadow: 
    0 0 10px var(--color-neon-pink),
    0 0 20px var(--color-neon-pink),
    0 0 40px var(--color-neon-pink);
}

.card-neon-cyan {
  @apply bg-gradient-to-b from-gray-800 to-gray-900 p-6 rounded-lg border border-cyan-500/30;
  box-shadow: 
    0 0 10px var(--color-neon-cyan),
    0 0 20px var(--color-neon-cyan),
    0 0 40px var(--color-neon-cyan);
}

.card-setlist {
  @apply bg-gradient-to-r from-gray-900 to-gray-800 p-6 rounded-lg;
}

/* Form Styles */
.form-input {
  @apply w-full px-4 py-3 bg-gray-900/90 border border-gray-600 rounded-lg text-white placeholder-gray-500 focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-500/20 transition-all;
  background-color: rgba(17, 24, 39, 0.9) !important;
}

.form-label {
  @apply block text-sm font-bold text-cyan-400 mb-2;
}

.form-select {
  @apply w-full px-4 py-3 bg-gray-900/90 border border-gray-600 rounded-lg text-white placeholder-gray-500 focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-500/20 transition-all;
  background-color: rgba(17, 24, 39, 0.9) !important;
}

.form-textarea {
  @apply w-full px-4 py-3 bg-gray-900/90 border border-gray-600 rounded-lg text-white placeholder-gray-500 focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-500/20 transition-all resize-none;
  background-color: rgba(17, 24, 39, 0.9) !important;
}

/* Status Badges */
.badge-open {
  @apply bg-green-600 text-white px-3 py-1 rounded-full text-sm font-bold;
}

.badge-closed {
  @apply bg-red-600 text-white px-3 py-1 rounded-full text-sm font-bold;
}

.badge-pending {
  @apply bg-yellow-600 text-white px-3 py-1 rounded-full text-sm font-bold;
}

.badge-accepted {
  @apply bg-green-600 text-white px-3 py-1 rounded-full text-sm font-bold;
}

.badge-rejected {
  @apply bg-red-600 text-white px-3 py-1 rounded-full text-sm font-bold;
}

/* Navigation Styles */
.nav-link {
  @apply text-gray-300 hover:text-pink-400 transition-colors;
}

.nav-link-active {
  @apply text-pink-400;
}

/* Utility Classes */
.text-gradient {
  @apply bg-gradient-to-r from-pink-400 to-cyan-400 bg-clip-text text-transparent;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
  .btn-neon-primary,
  .btn-neon-secondary {
    @apply px-6 py-3 text-lg;
  }
}

/* Animation Classes */
@keyframes pulse-neon {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse-neon {
  animation: pulse-neon 2s ease-in-out infinite;
}

/* Track Meter Visualization */
.track-meter {
  @apply flex space-x-1;
}

.track-meter-bar {
  @apply w-1 bg-gradient-to-t from-green-500 to-yellow-500;
  animation: bounce 0.5s ease-in-out infinite;
}

.track-meter-bar:nth-child(2) {
  animation-delay: 0.1s;
}

.track-meter-bar:nth-child(3) {
  animation-delay: 0.2s;
}

.track-meter-bar:nth-child(4) {
  animation-delay: 0.3s;
}

.track-meter-bar:nth-child(5) {
  animation-delay: 0.4s;
}

/* Loading Spinner */
.spinner-vinyl {
  @apply w-16 h-16 rounded-full border-4 border-pink-500;
  background: radial-gradient(circle at center, 
    var(--color-dark-bg) 30%, 
    var(--color-gray-bg) 50%, 
    var(--color-dark-bg) 100%);
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}