@scope (badge-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --badge-bg:        var(--a-bg-muted);
    --badge-fg:        var(--a-fg);
    --badge-radius:    var(--a-radius-md);
    --badge-px:        var(--a-space-2);
    --badge-py:        2px;
    --badge-gap:       var(--a-space-1);
    --badge-font-size: var(--a-ui-sm);
    --badge-font-family: var(--a-font-family-ui);
    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
}

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--badge-gap);
    width: fit-content;
    padding: var(--badge-py) var(--badge-px);
    background: var(--badge-bg);
    color: var(--badge-fg);
    font: inherit;
    /* font-family floor — see segment.css rationale. */
    font-family: var(--badge-font-family);
    font-size: var(--badge-font-size);
    font-weight: 500;
    line-height: 1;
    border-radius: var(--badge-radius);
    white-space: nowrap;
    vertical-align: middle;
  }

  /* `[text]` attribute selector gates the ::after so consumers using
     slotted content (`<badge-ui>3</badge-ui>`) don't get an empty
     pseudo-element flex item — which would otherwise inherit the
     host's `gap` and add a phantom `--badge-gap`-wide trailing space
     after the slotted content. Mirrors `button.css` / `tag.css`. */
  :scope[text]::after {
    content: attr(text);
  }

  /* Leading icon stamped by JS (when [icon] is set). Inherits the badge's
     foreground color so legend chips read as a single color-coded unit
     (e.g. accent variant → accent-colored dot + accent-colored label). */
  :scope > icon-ui {
    --a-icon-size: 0.75em;
    color: currentColor;
    flex-shrink: 0;
  }

  /* ── Variants ──
     Badge fg pairs with the muted (tinted) bg — use --a-{family}-text, which
     flips with scheme (shade in light, tint in dark) for proper contrast.
     --a-{family}-text-strong is for solid fills (--a-{family}-bg) and would
     collapse contrast on muted: warning fails in dark, danger fails in light.
     Accent keeps the saturated-text-on-tint look (intentional brand emphasis). */
  :scope[variant="accent"] {
    --badge-bg: var(--a-accent-muted);
    --badge-fg: var(--a-accent-text);
  }

  :scope[variant="info"] {
    --badge-bg: var(--a-info-muted);
    --badge-fg: var(--a-info-text);
  }

  :scope[variant="success"] {
    --badge-bg: var(--a-success-muted);
    --badge-fg: var(--a-success-text);
  }

  :scope[variant="warning"] {
    --badge-bg: var(--a-warning-muted);
    --badge-fg: var(--a-warning-text);
  }

  :scope[variant="danger"] {
    --badge-bg: var(--a-danger-muted);
    --badge-fg: var(--a-danger-text);
  }

  /* `primary` is the accent-filled variant — solid bg + on-accent text,
     used for "PRO"-style emphasis chips that should read as a brand
     stamp rather than tinted-on-canvas. Uses the L3 primary-* surface
     matrix so it tracks the same accent-strong source as button-ui's
     primary variant. */
  :scope[variant="primary"] {
    --badge-bg: var(--a-primary-bg);
    --badge-fg: var(--a-primary-fg);
  }

  /* `muted` and `neutral` are semantic aliases of the base — same tokens
     as the default variant, declared explicitly so the yaml enum and the
     CSS contract agree. Use cases: passive metadata chips (counts, IDs,
     "Not set" states) where the badge should read as quiet chrome. */
  :scope[variant="muted"],
  :scope[variant="neutral"] {
    --badge-bg: var(--a-bg-muted);
    --badge-fg: var(--a-fg);
  }

  /* ── Tone modifier — orthogonal to [variant] ──
     Badge's default tone is `muted` (the rules above) — quiet metadata is
     the primitive's identity. `[tone="solid"]` opts into the saturated-fill
     pair (same shape <tag-ui>'s solid default uses); `[tone="outline"]`
     into the transparent-fill + colored-ring shape. Same vocabulary as
     <tag-ui>; different defaults reflecting each primitive's role.

     Warning uses --a-warning-20-tint as bg (a bright amber, scheme-
     independent) instead of --a-warning-bg — the latter pair collapses
     to muddy brown-on-brown (-text-strong is dark, -bg is mid-tone).
     See <tag-ui>'s identical workaround. Token-system follow-up planned. */
  :scope[tone="solid"][variant="info"] {
    --badge-bg: var(--a-info-bg);
    --badge-fg: var(--a-info-fg);
  }
  :scope[tone="solid"][variant="success"] {
    --badge-bg: var(--a-success-bg);
    --badge-fg: var(--a-success-fg);
  }
  :scope[tone="solid"][variant="warning"] {
    /* --a-warning-bg is the bright-amber step (semantics.css L3 redirect
       to -20-tint) — see also <tag-ui>'s warning solid pair. */
    --badge-bg: var(--a-warning-bg);
    --badge-fg: var(--a-warning-fg);
  }
  :scope[tone="solid"][variant="danger"] {
    --badge-bg: var(--a-danger-bg);
    --badge-fg: var(--a-danger-fg);
  }
  :scope[tone="solid"][variant="accent"] {
    --badge-bg: var(--a-accent-bg);
    --badge-fg: var(--a-accent-fg);
  }
  /* Solid on neutral default → high-contrast inverse stamp. */
  :scope[tone="solid"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="accent"]):not([variant="primary"]) {
    --badge-bg: var(--a-fg);
    --badge-fg: var(--a-bg);
  }

  /* ── `[tone="outline"]` — transparent bg + family-colored border + text ── */
  :scope[tone="outline"] {
    --badge-bg: transparent;
    border: 1px solid var(--badge-border, transparent);
  }
  :scope[tone="outline"][variant="info"] {
    --badge-fg:     var(--a-info-text);
    --badge-border: var(--a-info-border);
  }
  :scope[tone="outline"][variant="success"] {
    --badge-fg:     var(--a-success-text);
    --badge-border: var(--a-success-border);
  }
  :scope[tone="outline"][variant="warning"] {
    --badge-fg:     var(--a-warning-text);
    --badge-border: var(--a-warning-border);
  }
  :scope[tone="outline"][variant="danger"] {
    --badge-fg:     var(--a-danger-text);
    --badge-border: var(--a-danger-border);
  }
  :scope[tone="outline"][variant="accent"] {
    --badge-fg:     var(--a-accent-text);
    --badge-border: var(--a-accent-border);
  }
  /* Outline on neutral — fg-muted text + subtle ring. */
  :scope[tone="outline"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="accent"]):not([variant="primary"]) {
    --badge-fg:     var(--a-fg-muted);
    --badge-border: var(--a-border);
  }

  /* Size handled by universal [size] attribute system. */
}
