.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Variants */
.badge-default {
    background: var(--gray-100);
    color: var(--gray-700);
}

.badge-primary {
    background: var(--primary-100);
    color: var(--primary-700);
}

.badge-success {
    background: var(--success-50);
    color: var(--success-600);
}

.badge-warning {
    background: var(--warning-50);
    color: var(--warning-600);
}

.badge-error {
    background: var(--error-50);
    color: var(--error-600);
}

.badge-info {
    background: var(--info-50);
    color: var(--info-600);
}

/* Sizes */
.badge-small {
    padding: 2px var(--space-2);
    font-size: 10px;
}

.badge-medium {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
}

.badge-large {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
}

/* Dot */
.badge-dot-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}