/* Custom Components for Sport Live Design System */
@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900;
  }
  
  .btn-secondary {
    @apply bg-gray-800 hover:bg-gray-700 text-gray-200 font-medium py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-900;
  }
  
  .btn-ghost {
    @apply bg-transparent hover:bg-gray-800 text-blue-500 font-medium py-2 px-4 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900;
  }
  
  .card {
    @apply bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105 overflow-hidden;
  }
  
  .card-hover {
    @apply hover:shadow-blue-500/50 transition-all duration-300;
  }
  
  .live-badge {
    @apply bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full animate-pulse;
  }
  
  .sport-badge-football {
    @apply bg-green-500 text-white text-xs font-bold px-2 py-1 rounded;
  }
  
  .sport-badge-basketball {
    @apply bg-orange-400 text-white text-xs font-bold px-2 py-1 rounded;
  }
  
  .sport-badge-tennis {
    @apply bg-yellow-300 text-gray-900 text-xs font-bold px-2 py-1 rounded;
  }
  
  .sport-badge-hockey {
    @apply bg-blue-400 text-white text-xs font-bold px-2 py-1 rounded;
  }
  
  .sport-badge-baseball {
    @apply bg-yellow-700 text-white text-xs font-bold px-2 py-1 rounded;
  }
  
  .match-card {
    @apply card relative group cursor-pointer;
  }
  
  .match-card-overlay {
    @apply absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300;
  }
  
  .nav-link {
    @apply text-gray-300 hover:text-blue-500 transition-colors duration-200 font-medium;
  }
  
  .nav-link-active {
    @apply text-blue-500;
  }
  
  .input-field {
    @apply bg-gray-800 border border-gray-600 text-gray-50 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200;
  }
  
  .input-field-error {
    @apply border-red-500 focus:ring-red-500;
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-gradient-to-r from-blue-500 to-green-500 bg-clip-text text-transparent;
  }
  
  .bg-gradient-sport {
    @apply bg-gradient-to-br from-gray-900 via-gray-800 to-gray-700;
  }
  
  .bg-gradient-primary {
    @apply bg-gradient-to-r from-blue-500 to-blue-600;
  }
  
  .bg-gradient-card {
    @apply bg-gradient-to-br from-gray-800 to-gray-700;
  }
  
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .animate-pulse-slow {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  .animate-slide-up {
    animation: slideUp 0.3s ease-out;
  }
  
  .animate-fade-in {
    animation: fadeIn 0.3s ease-out;
  }
}

/* Custom Animations */
@keyframes slideUp {
  0% { 
    transform: translateY(10px); 
    opacity: 0; 
  }
  100% { 
    transform: translateY(0); 
    opacity: 1; 
  }
}

@keyframes fadeIn {
  0% { 
    opacity: 0; 
  }
  100% { 
    opacity: 1; 
  }
}

/* Base Styles */
@layer base {
  :root {
    --sport-primary: 59 130 246;
    --sport-secondary: 16 185 129;
    --sport-tertiary: 245 158 11;
    --sport-live: 239 68 68;
  }
  
  body {
    font-family: 'Inter', system-ui, sans-serif;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
  }
}

/* Custom Colors for CDN */
.bg-sport-bg-dark {
  background-color: rgb(15 23 42);
}

.bg-sport-bg-medium {
  background-color: rgb(30 41 59);
}

.bg-sport-bg-light {
  background-color: rgb(51 65 85);
}

.text-sport-primary {
  color: rgb(59 130 246);
}

.text-sport-primary-hover {
  color: rgb(37 99 235);
}

.text-sport-secondary {
  color: rgb(16 185 129);
}

.text-sport-tertiary {
  color: rgb(245 158 11);
}

.text-sport-live {
  color: rgb(239 68 68);
}

.bg-sport-primary {
  background-color: rgb(59 130 246);
}

.bg-sport-primary-hover {
  background-color: rgb(37 99 235);
}

.bg-sport-secondary {
  background-color: rgb(16 185 129);
}

.bg-sport-tertiary {
  background-color: rgb(245 158 11);
}

.bg-sport-live {
  background-color: rgb(239 68 68);
}

.bg-sport-football {
  background-color: rgb(34 197 94);
}

.bg-sport-basketball {
  background-color: rgb(251 146 60);
}

.bg-sport-tennis {
  background-color: rgb(253 224 71);
}

.bg-sport-hockey {
  background-color: rgb(96 165 250);
}

.bg-sport-baseball {
  background-color: rgb(161 98 7);
}

.border-sport-primary {
  border-color: rgb(59 130 246);
}

.hover\:bg-sport-primary:hover {
  background-color: rgb(59 130 246);
}

.hover\:bg-sport-primary-hover:hover {
  background-color: rgb(37 99 235);
}

.hover\:bg-sport-bg-light:hover {
  background-color: rgb(51 65 85);
}

.hover\:text-sport-primary:hover {
  color: rgb(59 130 246);
}

.hover\:text-sport-primary-hover:hover {
  color: rgb(37 99 235);
}

.focus\:ring-sport-primary:focus {
  --tw-ring-color: rgb(59 130 246);
}

.focus\:ring-offset-sport-bg-dark:focus {
  --tw-ring-offset-color: rgb(15 23 42);
}

.shadow-glow {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.shadow-glow-red {
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.shadow-glow-green {
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}