.base-badge {
display: inline-flex;
align-items: center;
font-weight: 600;
border-radius: 999rpx;
white-space: nowrap;
}
/* Sizes */
.base-badge--xs { font-size: 20rpx; padding: 4rpx 14rpx; line-height: 1.4; }
.base-badge--sm { font-size: 22rpx; padding: 6rpx 18rpx; line-height: 1.4; }
.base-badge--md { font-size: 24rpx; padding: 8rpx 24rpx; line-height: 1.5; }
/* Variants */
.base-badge--primary {
background: rgba(249, 115, 22, 0.12);
color: var(--color-primary, $brand-primary);
}
.base-badge--success {
background: rgba(34, 197, 94, 0.12);
color: var(--color-success, $status-success-2);
}
.base-badge--warning {
background: rgba(245, 158, 11, 0.12);
color: var(--color-warning, $dim-wealth);
}
.base-badge--error {
background: rgba(239, 68, 68, 0.12);
color: var(--color-error, $status-danger);
}
.base-badge--accent {
background: rgba(14, 165, 233, 0.12);
color: var(--color-accent, $uni-info);
}
.base-badge--muted {
background: rgba(148, 163, 184, 0.12);
color: var(--muted, $app-text-subtle);
}