/* =========================================================
   Component — Badge
   Status, plan tier, and delta. Colour alone never carries the
   meaning: every badge also carries a word.
   ========================================================= */
.badge {
  --badge-bg: var(--color-primary-soft);
  --badge-fg: var(--color-primary-text);

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  white-space: nowrap;
}

.badge--success { --badge-bg: var(--color-success-soft); --badge-fg: var(--color-success); }
.badge--warning { --badge-bg: var(--color-warning-soft); --badge-fg: var(--color-warning); }
.badge--danger  { --badge-bg: var(--color-danger-soft);  --badge-fg: var(--color-danger); }
.badge--growth  { --badge-bg: var(--color-growth-soft);  --badge-fg: var(--color-growth-text); }
.badge--neutral { --badge-bg: var(--color-surface-sunken); --badge-fg: var(--color-text-secondary); }

/* Entry tier — the first paid plan, and nothing else */
.badge--entry {
  --badge-bg: var(--color-entry-soft);
  --badge-fg: var(--color-entry-text);
  box-shadow: inset 0 0 0 1px var(--color-line-entry);
}

/* Gold tier — the highest plan, and nothing else */
.badge--gold {
  --badge-bg: var(--color-gold-soft);
  --badge-fg: var(--color-gold-text);
  box-shadow: inset 0 0 0 1px var(--color-line-gold);
}

.badge__dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.badge__figure {
  font-family: var(--font-figures);
  font-variant-numeric: tabular-nums;
}

/* Pill used as a hero eyebrow — larger, quieter */
.badge--hero {
  --badge-bg: var(--color-surface-raised);
  --badge-fg: var(--color-text-secondary);
  padding: 0.45rem 1rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  box-shadow: inset 0 0 0 1px var(--color-line);
}

/* Small — a row of them under a card's note, where the standard
   size would outweigh the name above it. */
.badge--sm {
  padding: 0.1rem var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
}