.ui-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(28px, 7.5vw, 36px);
    padding: 0 var(--ui-space-2);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-color-brand-soft);
    color: var(--ui-color-brand);
    font-size: var(--ui-font-xs);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.ui-badge--accent {
    background: color-mix(in srgb, var(--ui-color-accent) 10%, #FFF8EC);
    color: var(--ui-color-accent);
}