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

@layer base {
    html {
        @apply antialiased;
    }
    body {
        @apply font-sans text-slate-700;
    }
}

@layer components {
    /* ── Cards ───────────────────────────────── */
    .card {
        @apply bg-white rounded-2xl shadow-soft border border-slate-200/80;
    }

    /* ── Buttons ─────────────────────────────── */
    .btn {
        @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-sm font-semibold transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 cursor-pointer select-none active:scale-[0.98];
    }
    .btn-primary {
        @apply btn bg-primary-gradient text-white shadow-sm shadow-blue-900/20 hover:shadow-md hover:shadow-blue-900/30 focus-visible:ring-primary-500 hover:brightness-105;
    }
    .btn-secondary {
        @apply btn bg-white text-slate-700 border border-slate-200 hover:bg-slate-50 hover:border-slate-300 focus-visible:ring-slate-400;
    }
    .btn-success {
        @apply btn bg-accent-gradient text-white shadow-sm shadow-green-900/20 hover:shadow-md hover:shadow-green-900/30 focus-visible:ring-accent-500 hover:brightness-105;
    }
    .btn-danger {
        @apply btn bg-red-600 text-white shadow-sm shadow-red-900/20 hover:bg-red-700 focus-visible:ring-red-500;
    }
    .btn-info {
        @apply btn bg-sky-600 text-white shadow-sm shadow-sky-900/20 hover:bg-sky-700 focus-visible:ring-sky-500;
    }
    .btn-warning {
        @apply btn bg-amber-500 text-white shadow-sm shadow-amber-900/20 hover:bg-amber-600 focus-visible:ring-amber-400;
    }
    .btn-ghost {
        @apply btn text-slate-600 hover:bg-slate-100 focus-visible:ring-slate-300;
    }
    .btn-sm {
        @apply px-3 py-1.5 text-xs rounded-lg;
    }

    /* ── Forms ───────────────────────────────── */
    .form-input {
        @apply block w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-sm text-slate-800 placeholder-slate-400 shadow-sm transition-all duration-150 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:shadow-glow;
    }
    .form-select {
        @apply block w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-sm text-slate-800 shadow-sm transition-all duration-150 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:shadow-glow;
    }
    .form-label {
        @apply block text-sm font-semibold text-slate-700 mb-1.5;
    }

    /* ── Badges ──────────────────────────────── */
    .badge {
        @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold;
    }
    .badge-pending {
        @apply badge bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-200;
    }
    .badge-signed {
        @apply badge bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-200;
    }
    .badge-rejected {
        @apply badge bg-red-50 text-red-700 ring-1 ring-inset ring-red-200;
    }
    .badge-draft {
        @apply badge bg-slate-100 text-slate-600 ring-1 ring-inset ring-slate-200;
    }
}