@import "tailwindcss";
@source "../views";

@layer components {
  /* Enhanced Button System */
  .btn {
    @apply inline-flex items-center justify-center whitespace-nowrap rounded-xl text-sm font-semibold transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
  }
  
  .btn-sm { @apply h-9 px-3; }
  .btn-md { @apply h-10 px-4 py-2; }
  .btn-lg { @apply h-12 px-6; }
  .btn-xl { @apply h-14 px-8 text-base; }
  
  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 shadow-lg shadow-blue-500/25 hover:shadow-xl hover:shadow-blue-500/40 hover:scale-[1.02] focus-visible:ring-blue-500;
  }
  
  .btn-success {
    @apply bg-emerald-600 text-white hover:bg-emerald-700 shadow-lg shadow-emerald-500/25 hover:shadow-xl hover:shadow-emerald-500/40 hover:scale-[1.02] focus-visible:ring-emerald-500;
  }
  
  .btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 shadow-lg shadow-red-500/25 hover:shadow-xl hover:shadow-red-500/40 hover:scale-[1.02] focus-visible:ring-red-500;
  }
  
  .btn-secondary {
    @apply bg-gray-600 text-white hover:bg-gray-700 shadow-lg shadow-gray-500/25 hover:shadow-xl hover:shadow-gray-500/40 hover:scale-[1.02] focus-visible:ring-gray-500;
  }
  
  .btn-disabled {
    @apply bg-gray-300 text-gray-500 cursor-not-allowed hover:bg-gray-300 hover:shadow-none hover:scale-100 opacity-60;
  }

  /* Card Components */
  .card {
    @apply bg-white rounded-2xl border border-gray-100 shadow-sm transition-all duration-300 hover:shadow-lg;
  }
  
  .card-premium {
    @apply bg-gradient-to-br from-white via-white to-gray-50/30 rounded-2xl border border-gray-200/50 shadow-xl shadow-gray-900/5 backdrop-blur-sm;
  }

  /* Animation Classes */
  .animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
  }
  
  .animate-slide-up {
    animation: slideUp 0.4s ease-out forwards;
  }
  
  .animate-bounce-in {
    animation: bounceIn 0.6s ease-out forwards;
  }
}

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

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

@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}