@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

/* Base styles */
@layer base {
  html {
    font-family: 'Inter', system-ui, sans-serif;
  }
  
  body {
    @apply bg-gray-50 text-gray-900 antialiased;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', system-ui, sans-serif;
    @apply font-semibold;
  }
  
  /* Scrollbar styling */
  ::-webkit-scrollbar {
    @apply w-2;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-gray-100;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
  }
}

/* Component styles */
@layer components {
  /* Button variants */
  .btn-primary {
    @apply bg-primary-900 hover:bg-primary-800 text-white font-medium px-4 py-2 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:ring-offset-2;
  }
  
  .btn-secondary {
    @apply bg-secondary-300 hover:bg-secondary-400 text-primary-900 font-medium px-4 py-2 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-secondary-500 focus:ring-offset-2;
  }
  
  .btn-success {
    @apply bg-success-400 hover:bg-success-500 text-white font-medium px-4 py-2 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-success-500 focus:ring-offset-2;
  }
  
  .btn-gold {
    @apply bg-gold-500 hover:bg-gold-600 text-white font-medium px-4 py-2 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:ring-offset-2;
  }
  
  .btn-outline {
    @apply border border-gray-300 hover:border-gray-400 text-gray-700 hover:text-gray-900 font-medium px-4 py-2 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
  }
  
  .btn-ghost {
    @apply text-gray-600 hover:text-gray-900 hover:bg-gray-100 font-medium px-4 py-2 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
  }
  
  /* Card styles */
  .card {
    @apply bg-white rounded-xl shadow-soft border border-gray-100;
  }
  
  .card-hover {
    @apply card hover:shadow-medium transition-shadow duration-200;
  }
  
  /* Input styles */
  .input-field {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gold-500 focus:border-transparent transition-colors duration-200;
  }
  
  /* Sidebar styles */
  .sidebar-item {
    @apply flex items-center px-4 py-3 text-white/80 hover:text-white hover:bg-white/10 rounded-lg transition-colors duration-200 cursor-pointer;
  }
  
  .sidebar-item.active {
    @apply text-white bg-white/20;
  }
  
  /* Stats card styles */
  .stats-card {
    @apply card p-6 hover:shadow-medium transition-shadow duration-200;
  }
  
  .stats-card-primary {
    @apply bg-gradient-to-br from-primary-900 to-primary-800 text-white;
  }
  
  .stats-card-success {
    @apply bg-gradient-to-br from-success-400 to-success-500 text-white;
  }
  
  .stats-card-gold {
    @apply bg-gradient-to-br from-gold-500 to-gold-600 text-white;
  }
  
  .stats-card-secondary {
    @apply bg-gradient-to-br from-secondary-300 to-secondary-400 text-primary-900;
  }
  
  /* Course card styles */
  .course-card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1;
  }
  
  .course-card-featured {
    @apply border-gold-500 shadow-gold-100;
  }
  
  .course-card-progress {
    @apply bg-gradient-to-r from-success-400 to-success-500;
  }
  
  /* Loading spinner */
  .spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-primary-600;
  }
  
  /* Toast styles */
  .toast-success {
    @apply bg-success-500 text-white;
  }
  
  .toast-error {
    @apply bg-error-500 text-white;
  }
  
  .toast-warning {
    @apply bg-gold-500 text-white;
  }
  
  .toast-info {
    @apply bg-secondary-400 text-primary-900;
  }
}

/* Utility classes */
@layer utilities {
  .text-gradient {
    @apply bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent;
  }
  
  .bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  .bg-gradient-secondary {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  }
  
  .bg-gradient-success {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  }
  
  .bg-gradient-warning {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  }
  
  /* Accessibility */
  .sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
  }
  
  /* High contrast mode */
  .high-contrast {
    filter: contrast(150%) brightness(110%);
  }
  
  .high-contrast .card {
    @apply border-2 border-gray-400;
  }
  
  .high-contrast .btn-primary {
    @apply bg-black text-white border-2 border-white;
  }
  
  /* Focus visible for keyboard navigation */
  .focus-visible {
    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
  }
}

/* Animation keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Animation utilities */
.animate-fadeIn {
  animation: fadeIn 0.3s ease-out;
}

.animate-slideIn {
  animation: slideIn 0.3s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.3s ease-out;
}

.animate-slide-down {
  animation: slideDown 0.3s ease-out;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}