/**
 * Design System - Badge Components
 * 
 * Small status indicators and labels.
 */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: var(--leading-none);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Badge Variants */
.badge--primary {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
}

.badge--success {
    background: rgba(var(--color-success-rgb), 0.1);
    color: var(--color-success);
}

.badge--warning {
    background: rgba(var(--color-warning-rgb), 0.1);
    color: #996d00;
}

.badge--error {
    background: rgba(var(--color-error-rgb), 0.1);
    color: var(--color-error);
}

.badge--info {
    background: rgba(var(--color-info-rgb), 0.1);
    color: var(--color-info);
}

.badge--neutral {
    background: var(--color-gray-100);
    color: var(--text-primary);
}

/* Solid Badges */
.badge--solid.badge--primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.badge--solid.badge--success {
    background: var(--color-success);
    color: var(--color-white);
}

.badge--solid.badge--warning {
    background: var(--color-warning);
    color: var(--text-primary);
}

.badge--solid.badge--error {
    background: var(--color-error);
    color: var(--color-white);
}

.badge--solid.badge--info {
    background: var(--color-info);
    color: var(--color-white);
}

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

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

/* Badge with Dot */
.badge--dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}