@layer components {

    /* ========= Base ========= */
    .badge {
        @apply inline-flex items-center justify-center rounded-full border px-2.5 py-1 text-xs font-semibold leading-none whitespace-nowrap;
    }

    /* ========= Sizes ========= */
    .badge-sm {
        @apply px-2 py-0.5 text-[11px];
    }

    .badge-lg {
        @apply px-3 py-1.5 text-sm;
    }

    /* ========= Solid variants ========= */
    .badge-primary {
        @apply border-slate-900 bg-slate-900 text-white;
    }

    .badge-secondary {
        @apply border-slate-200 bg-slate-100 text-slate-800;
    }

    .badge-success {
        @apply border-emerald-600 bg-emerald-600 text-white;
    }

    .badge-danger {
        @apply border-rose-600 bg-rose-600 text-white;
    }

    .badge-warning {
        @apply border-amber-500 bg-amber-500 text-white;
    }

    .badge-info {
        @apply border-sky-600 bg-sky-600 text-white;
    }

    /* ========= Soft variants (recommended for dashboards) ========= */
    .badge-soft-primary {
        @apply border-slate-200 bg-slate-50 text-slate-800;
    }

    .badge-soft-success {
        @apply border-emerald-200 bg-emerald-50 text-emerald-800;
    }

    .badge-soft-danger {
        @apply border-rose-200 bg-rose-50 text-rose-800;
    }

    .badge-soft-warning {
        @apply border-amber-200 bg-amber-50 text-amber-800;
    }

    .badge-soft-info {
        @apply border-sky-200 bg-sky-50 text-sky-800;
    }

    /* ========= Outline variants ========= */
    .badge-outline-primary {
        @apply border-slate-900 bg-transparent text-slate-900;
    }

    .badge-outline-danger {
        @apply border-rose-600 bg-transparent text-rose-700;
    }

    /* ========= With dot (status indicator) ========= */
    .badge-dot::before {
        content: "";
        @apply me-2 h-1.5 w-1.5 rounded-full bg-current opacity-80;
    }

    /* ========= With icon ========= */
    .badge>svg:first-child {
        @apply me-2 h-3.5 w-3.5;
    }

    .badge>svg:last-child {
        @apply ms-2 h-3.5 w-3.5;
    }
}