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

@layer base {
  body {
    @apply bg-gray-50 text-gray-900 antialiased;
  }
}

@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
  }

  .btn-secondary {
    @apply bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-blue-500;
  }

  .btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
  }

  .btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
  }

  .btn-outline {
    @apply bg-transparent text-blue-600 border border-blue-600 hover:bg-blue-50 focus:ring-blue-500;
  }

  .input {
    @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm;
  }

  .label {
    @apply block text-sm font-medium text-gray-700;
  }

  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden;
  }

  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .badge-green {
    @apply bg-green-100 text-green-800;
  }

  .badge-yellow {
    @apply bg-yellow-100 text-yellow-800;
  }

  .badge-red {
    @apply bg-red-100 text-red-800;
  }

  .badge-blue {
    @apply bg-blue-100 text-blue-800;
  }

  .badge-gray {
    @apply bg-gray-100 text-gray-800;
  }

  .badge-dark-red {
    @apply bg-red-800 text-white;
  }

  .badge-light-red {
    @apply bg-red-200 text-red-900;
  }

  .badge-dark-green {
    @apply bg-green-800 text-white;
  }

  .badge-light-green {
    @apply bg-green-200 text-green-900;
  }

  .badge-black {
    @apply bg-black text-white;
  }

  .badge-darker-red {
    @apply bg-red-900 text-white;
  }

  .badge-red {
    @apply bg-red-500 text-white;
  }

  .badge-yellow-orange {
    @apply bg-yellow-500 text-white;
  }

  .badge-dark-blue {
    @apply bg-blue-800 text-white;
  }

  .badge-light-blue {
    @apply bg-blue-400 text-white;
  }

  .badge-lighter-blue {
    @apply bg-blue-300 text-white;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}