/* badges.css — pricing/tier badges and the eyebrow label (12 §2.4, §5). Badges always carry text. */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--free { color: var(--badge-free-fg); background: var(--badge-free-bg); }
.badge--pro { color: var(--badge-pro-fg); background: var(--badge-pro-bg); }
.badge--premium { color: var(--badge-premium-fg); background: var(--badge-premium-bg); }
.badge--paid { color: var(--badge-paid-fg); background: var(--badge-paid-bg); }
.badge--new { color: var(--badge-new-fg); background: var(--badge-new-bg); }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.eyebrow a { color: inherit; }
.eyebrow--brand { color: var(--primary); }

/* Pricing legend (_PricingLegend on /apps and /pro) */
.legend { display: grid; gap: var(--sp-2); margin: var(--sp-4) 0; }
.legend__row { display: grid; grid-template-columns: calc(var(--sp-8) + var(--sp-5)) 1fr; align-items: center; gap: var(--sp-3); }
.legend__row dd { margin: 0; color: var(--text); }