/* Reusable Component Styles */

/* Button Components */
.btn-primary {
  @apply px-6 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-lg hover:opacity-90 transition-all duration-200 font-medium;
}

.btn-secondary {
  @apply px-6 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-all duration-200 font-medium;
}

.btn-success {
  @apply px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-all duration-200 font-medium;
}

.btn-warning {
  @apply px-6 py-3 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-all duration-200 font-medium;
}

.btn-info {
  @apply px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-all duration-200 font-medium;
}

/* Card Components */
.card {
  @apply bg-white rounded-lg shadow;
}

.feature-card {
  @apply bg-white rounded-lg shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg h-full;
}

/* Hero Section */
.hero-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Utility Classes */
.hover-primary:hover {
  color: rgb(147, 51, 234) !important;
  transition: color 0.2s ease;
}