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

@layer base {
  body {
    @apply antialiased;
  }
}

@layer components {
  .input-field-enhanced {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 
           bg-gray-50 focus:bg-white 
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent 
           sm:text-sm transition-all duration-150 ease-in-out;
  }
  .input-normal {
      @apply border-gray-300 focus:ring-blue-500;
  }
  .input-warning {
      @apply border-yellow-400 ring-1 ring-yellow-400 focus:ring-yellow-500 focus:border-yellow-500;
  }
  .input-error {
      @apply border-red-400 ring-1 ring-red-400 focus:ring-red-500 focus:border-red-500;
  }
}

@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}
.animate-fade-in-down {
  animation: fadeInDown 0.3s ease-out forwards;
}