.v2-badge,
.v2-pill,
.v2-status {
    --v2-badge-bg: rgba(19, 102, 214, 0.08);
    --v2-badge-color: var(--color-brand-600);
    --v2-badge-border: rgba(19, 102, 214, 0.12);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 1.75rem;
    padding: 0.32rem 0.72rem;
    border: 1px solid var(--v2-badge-border);
    border-radius: var(--radius-pill);
    background: var(--v2-badge-bg);
    color: var(--v2-badge-color);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.v2-badge i,
.v2-pill i,
.v2-status i {
    font-size: 0.95em;
}

.v2-badge--soft,
.v2-pill--soft {
    --v2-badge-bg: #f3f7ff;
    --v2-badge-border: #dee9ff;
    --v2-badge-color: var(--color-brand-600);
}

.v2-badge--outline,
.v2-pill--outline {
    --v2-badge-bg: transparent;
    --v2-badge-border: var(--border-default);
    --v2-badge-color: var(--text-body);
}

.v2-badge--accent,
.v2-pill--accent {
    --v2-badge-bg: rgba(242, 138, 24, 0.12);
    --v2-badge-border: rgba(242, 138, 24, 0.2);
    --v2-badge-color: var(--color-accent-600);
}

.v2-badge--success,
.v2-status--success {
    --v2-badge-bg: rgba(15, 159, 110, 0.1);
    --v2-badge-border: rgba(15, 159, 110, 0.16);
    --v2-badge-color: var(--color-success);
}

.v2-badge--warning,
.v2-status--warning {
    --v2-badge-bg: rgba(234, 179, 8, 0.12);
    --v2-badge-border: rgba(234, 179, 8, 0.18);
    --v2-badge-color: #a16207;
}

.v2-badge--danger,
.v2-status--danger {
    --v2-badge-bg: rgba(220, 38, 38, 0.1);
    --v2-badge-border: rgba(220, 38, 38, 0.16);
    --v2-badge-color: var(--color-danger);
}

.v2-badge--neutral,
.v2-status--neutral {
    --v2-badge-bg: rgba(91, 103, 122, 0.08);
    --v2-badge-border: rgba(91, 103, 122, 0.14);
    --v2-badge-color: var(--text-soft);
}

.v2-badge--sm,
.v2-pill--sm,
.v2-status--sm {
    min-height: 1.55rem;
    padding: 0.25rem 0.58rem;
    font-size: var(--font-size-2xs);
}

.v2-badge--lg,
.v2-pill--lg,
.v2-status--lg {
    min-height: 2rem;
    padding: 0.42rem 0.82rem;
    font-size: var(--font-size-sm);
}
