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

@layer base {
  :root { color-scheme: light; }
}

@layer components {
  .btn { @apply inline-flex items-center justify-center h-11 px-5 rounded-md font-semibold transition-colors; }
  .btn-primary { @apply inline-flex items-center justify-center h-11 px-5 rounded-md bg-slate-900 text-white hover:bg-slate-800 disabled:opacity-50; }
  .btn-secondary { @apply inline-flex items-center justify-center h-11 px-5 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 disabled:opacity-50; }
  .btn-outline { @apply inline-flex items-center justify-center h-11 px-5 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-50 disabled:opacity-50; }
  .form-control, input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], textarea { @apply w-full border border-gray-300 rounded-lg px-3 py-2; }
  .form-select, select { @apply w-full border border-gray-300 rounded-lg px-3 py-2 bg-white; }
  .form-check-input { @apply w-4 h-4 border border-gray-300 rounded; }
  .card { @apply rounded-xl border border-slate-200 bg-white shadow-sm; }
  .modal-sm { @apply max-w-md; }
  .modal-md { @apply max-w-xl; }
  .modal-lg { @apply max-w-3xl; }
}