/*
 * A colored badge with text you can read.
 *
 * Tabler restyles .badge to a muted foreground - --tblr-badge-color is var(--tblr-secondary) - and
 * Bootstrap's .bg-* utilities set background-color and nothing else. Put together, a
 * `class="badge bg-secondary"` is #6b7280 text on a #6b7280 background. Measured contrast 1.00:
 * the same color, so the badge renders as an empty gray pill and whatever it was counting is
 * invisible.
 *
 * It is not one variant. Every .bg-* on a badge fails, in both schemes:
 *
 *     light   secondary 1.00   danger 1.04   primary 1.42   info 1.58   success 1.76   warning 2.27
 *     dark    secondary 1.00   success 1.08   primary 1.18   info 1.20   warning 1.19   danger 1.84
 *
 * Bootstrap's own .text-bg-* helper is not a reliable escape either. It computes a foreground from
 * Bootstrap's palette rather than Tabler's, so text-bg-warning is 2.04, text-bg-success 2.63 and
 * text-bg-info 2.92 - better than bg-* alone and still short of legible.
 *
 * Tabler already ships the answer as --tblr-<color>-fg, the foreground it intends on each of its
 * theme colors, resolving to var(--tblr-light) or var(--tblr-dark) per color and per scheme. This
 * points both families at it. Nothing here picks a color; it only stops the badge inheriting a
 * muted gray onto a saturated fill.
 *
 * The rules are per color rather than an attribute selector because the property name is part of
 * the color's name, and there is no way to interpolate one in CSS.
 */
.badge.bg-primary,
.badge.text-bg-primary {
	color: var(--tblr-primary-fg);
}

.badge.bg-secondary,
.badge.text-bg-secondary {
	color: var(--tblr-secondary-fg);
}

.badge.bg-success,
.badge.text-bg-success {
	color: var(--tblr-success-fg);
}

.badge.bg-danger,
.badge.text-bg-danger {
	color: var(--tblr-danger-fg);
}

.badge.bg-warning,
.badge.text-bg-warning {
	color: var(--tblr-warning-fg);
}

.badge.bg-info,
.badge.text-bg-info {
	color: var(--tblr-info-fg);
}

.badge.bg-light,
.badge.text-bg-light {
	color: var(--tblr-light-fg);
}

.badge.bg-dark,
.badge.text-bg-dark {
	color: var(--tblr-dark-fg);
}