/* badge.css — компактные label'ы / pill'ы для статусов и тегов.
 *
 * Два визуальных режима:
 *   - filled  (DONE-стиль): сплошной фон + контрастный текст
 *   - text    (vector-стиль): только цветной текст, без фона
 *
 * Variant определяет и цвет, и режим по умолчанию.
 */

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--ds-radius, 2px);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* text-only badges — без uppercase / letter-spacing, как обычный inline-text. */
.ds-badge--info-text,
.ds-badge--muted-text,
.ds-badge--success-text,
.ds-badge--warn-text,
.ds-badge--error-text {
    padding: 0;
    background: transparent;
}

/* ───────────── filled variants (с фоном) ───────────── */

.ds-badge--success {
    background: color-mix(in srgb, var(--ds-success) 25%, var(--bg) 75%);
    color: color-mix(in srgb, var(--ds-success) 70%, var(--fg) 30%);
}
.ds-badge--warn {
    background: color-mix(in srgb, var(--ds-warn) 25%, var(--bg) 75%);
    color: color-mix(in srgb, var(--ds-warn) 70%, var(--fg) 30%);
}
.ds-badge--error {
    background: color-mix(in srgb, var(--ds-error) 25%, var(--bg) 75%);
    color: color-mix(in srgb, var(--ds-error) 70%, var(--fg) 30%);
}
.ds-badge--info {
    /* "filled info" — для ID-номеров и тегов в pill-форме. */
    background: color-mix(in srgb, var(--ds-info) 22%, var(--bg) 78%);
    color: var(--fg);
}

/* ───────────── text variants (без фона, цвет текста) ───────────── */

.ds-badge--info-text {
    color: var(--ds-info);
    background: transparent;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.ds-badge--muted-text {
    color: var(--muted);
    background: transparent;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.ds-badge--success-text {
    color: var(--ds-success);
    background: transparent;
}
.ds-badge--warn-text {
    color: var(--ds-warn);
    background: transparent;
}
.ds-badge--error-text {
    color: var(--ds-error);
    background: transparent;
}