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

@layer base {
  /* Touch targets for interactive elements only */
  button,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Prevent iOS zoom on input focus */
  @media (max-width: 768px) {
    input,
    select,
    textarea {
      font-size: 16px;
    }
  }
}

/* HTMX loading state */
.htmx-swapping {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

/* Dropdown animation */
@keyframes dropdown {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.animate-dropdown {
  animation: dropdown 0.1s ease-out;
}