Dark mode badge

.dmb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dmb-badge--ok {
  color: oklch(0.92 0.05 165);
  background: oklch(0.32 0.09 165 / 0.55);
  border: 1px solid oklch(0.55 0.12 165 / 0.5);
}

You are a design-system engineer implementing dark-theme badges.

Goal: Pill badges for Live / Beta / Draft (or success / warning / neutral) with great contrast on var(--card).

Technical constraints:
- Colors must use oklch(); never raw hex in the snippet.
- Each variant needs a visible border so badges don’t disappear in high-contrast themes.
- Keep height compact for use beside headings and in tables.
- Optional leading dot uses currentColor for the indicator.

Framework variant A: HTML + CSS.
Framework variant B: Vue SFC with a <Badge variant="ok|warn|neutral"> API.

Edge cases:
- Badge text may be localized — allow extra width; don’t fixed-width unless necessary.
- Screen readers: decorative dots get aria-hidden; the label text carries meaning.
- prefers-contrast: more if users need stronger separation — document a CSS tweak.

Return HTML + CSS.