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

@layer components {
  .link {
    @apply text-primary-800 hover:text-primary-600 underline underline-offset-4;
  }

  .btn {
    @apply w-full py-3 px-4 bg-secondary-800 text-white rounded-xl shadow-lg inline-flex items-center justify-center gap-2 disabled:opacity-40 disabled:blur-sm;
  }
  .btn-primary {
    @apply btn bg-secondary-800 text-white;
  }
  .btn-secondary {
    @apply btn bg-primary-200 text-primary-800;
  }
  .btn-danger-outline {
    @apply btn bg-primary-200 text-red-800 border border-red-800;
  }
  .btn-danger {
    @apply btn bg-red-800 text-primary-100;
  }
}

@layer utilities {
  @keyframes slide-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .animate-slide-up {
    animation: slide-up 0.2s ease-out forwards;
  }
}