/* Custom styles beyond Tailwind */

/* Focus styles for accessibility */
:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Custom animations */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Input field focus styles */
input:focus, 
button:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* Custom button hover effects */
button:hover,
a.button:hover {
  transform: translateY(-1px);
}

button:active,
a.button:active {
  transform: translateY(1px);
}