/*
 * badges.css
 * Chip layout comes from chip.css. Tones come from tones.css.
 *
 * Default (no tone class) renders muted via the var fallback.
 * Use for categorical status ("active", "pending", "archived").
 *
 * ── Not the count ─────────────────────────────────────────────────────
 *
 * A count or short datum ("12", "99+") is a Pill. This is the word the
 * industry disagrees about: Atlassian's Badge and Material's Badge are both
 * the COUNT — their status words are Lozenge and Chip — and Bootstrap uses
 * `badge` for both. Only Polaris agrees with the sense used here.
 *
 * The failure is silent: a count in a badge renders perfectly, so nothing
 * catches it. See DECISIONS.md for the comparison table.
 */

.badge {
  padding:       var(--space-3xs) var(--space-sm);
  /* Follows --btn-radius unless a theme sets --badge-radius; the fallback
     must resolve here, on the badge, to see .theme-* overrides. */
  border-radius: var(--badge-radius, var(--btn-radius));
  font-size:     var(--text-xs);
  line-height:   1rem;

  /* Skin. --fill is the effective background; chip.css derives readable
     text from it. See the auto-contrast note there. */
  --tone-fill:    var(--bg-mix, var(--color-muted));
  background:     var(--fill, var(--tone-fill));
  color:          var(--on-fill, white);
  font-family:    var(--font-primary);
  font-weight:    var(--badge-font-weight);
  text-transform: var(--badge-text-transform);
  letter-spacing: var(--badge-letter-spacing);
}