:root{--badge-dot-size:8px;--badge-count-height:24px}@layer components{.badge{align-items:center;gap:var(--space-1);padding-block:var(--space-px);padding-inline:var(--space-1);border-radius:var(--radius-full);font-family:var(--font-ui);font-size:var(--text-label-md);font-weight:var(--font-weight-medium);line-height:1;display:inline-flex}.badge__dot{inline-size:var(--badge-dot-size);block-size:var(--badge-dot-size);border-radius:var(--radius-full);flex-shrink:0}.badge--success{background:var(--color-success-soft);color:var(--color-success-strong)}.badge--success .badge__dot{background:var(--color-success)}.badge--warning{background:var(--color-warning-soft);color:var(--color-warning-strong)}.badge--warning .badge__dot{background:var(--color-warning)}.badge--danger{background:var(--color-danger-soft);color:var(--color-danger-strong)}.badge--danger .badge__dot{background:var(--color-danger)}.badge--info{background:var(--color-info-soft);color:var(--color-info-strong)}.badge--info .badge__dot{background:var(--color-info)}.badge--neutral{background:var(--color-neutral-soft);color:var(--color-neutral-strong)}.badge--neutral .badge__dot{background:var(--color-neutral)}.badge--tag{background:var(--color-surface-light);border:1px solid var(--color-border-hairline-on-light);color:var(--color-text-on-light)}.badge--solid-dark{background:var(--color-surface-dark);color:var(--color-text-on-dark)}.badge--solid-brand{background:var(--color-brand);color:var(--color-text-on-light);font-weight:var(--font-weight-semibold)}.badge--numeric{font-variant-numeric:tabular-nums}.badge--count{block-size:var(--badge-count-height);padding-inline:var(--space-1);font-size:var(--text-label-md);font-weight:var(--font-weight-medium);color:var(--color-text-on-dark)}.badge--count-dark{background:var(--color-surface-dark)}.badge--count-danger{background:var(--color-danger-strong)}.badge--delta-up{background:var(--color-success-soft);color:var(--color-success-strong);font-weight:var(--font-weight-semibold)}.badge--delta-down{background:var(--color-danger-soft);color:var(--color-danger-strong);font-weight:var(--font-weight-semibold)}}