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

@layer components {
  .btn-emerald {
    @apply bg-[#065f46] hover:bg-[#064e3b] text-white font-bold py-3 px-6 rounded-2xl transition-all duration-300 shadow-lg active:scale-95 disabled:opacity-50 disabled:pointer-events-none;
  }
  
  .input-emerald {
    @apply bg-white border border-emerald-100 rounded-2xl py-4 px-6 focus:outline-none focus:ring-2 focus:ring-emerald-500/30 text-emerald-950 placeholder-emerald-300 transition-all;
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

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