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

:root {
  --bg: #f8fafc;
  --fg: #0f172a;
}

html, body {
  @apply bg-[var(--bg)] text-[var(--fg)] antialiased;
}
.container {
  @apply mx-auto max-w-6xl px-4;
}
.btn {
  @apply inline-flex items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium transition;
}
.btn-primary {
  @apply btn bg-brand text-white hover:bg-brand-light;
}
.btn-outline {
  @apply btn border-brand text-brand hover:bg-brand/10;
}
.card {
  @apply rounded-xl border border-slate-200 bg-white p-6 shadow-sm;
}