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

@layer base {
  html, body {
    @apply h-full bg-gray-50 text-gray-900 antialiased;
  }
  body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }
}

@layer components {
  .card {
    @apply rounded-xl border border-gray-200 bg-white shadow-sm;
  }
  .label {
    @apply mb-1.5 block text-sm font-medium text-gray-700;
  }
  .input {
    @apply w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm
           placeholder:text-gray-400
           focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20;
  }
  .textarea {
    @apply input min-h-[120px] resize-y;
  }
}