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

@layer base {
    body {
        @apply bg-slate-100 text-slate-900 antialiased;
    }
}

@layer components {
    .btn {
        @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold transition focus:outline-none focus:ring-2 focus:ring-offset-2;
    }

    .btn-primary {
        @apply btn bg-slate-900 text-white hover:bg-slate-700 focus:ring-slate-700;
    }

    .btn-secondary {
        @apply btn bg-white text-slate-900 ring-1 ring-slate-300 hover:bg-slate-50 focus:ring-slate-400;
    }

    .btn-danger {
        @apply btn bg-rose-600 text-white hover:bg-rose-700 focus:ring-rose-600;
    }

    .input {
        @apply w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm outline-none ring-slate-400 placeholder:text-slate-400 focus:border-slate-400 focus:ring-2;
    }

    .label {
        @apply mb-1 block text-sm font-medium text-slate-700;
    }

    .card {
        @apply rounded-2xl border border-slate-200 bg-white p-5 shadow-sm;
    }
}