/**
 * Component: Badges
 * Styled after inline code/syntax tokens — a deliberate nod to the
 * subject matter (this is a programming academy), used for taxonomy
 * labels, "featured" flags, and status markers.
 */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-space-1);
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-xs);
  line-height: 1;
  padding: 0.375rem 0.625rem;
  border-radius: var(--sf-radius-sm);
  background: var(--sf-indigo-100);
  color: var(--sf-indigo-600);
  white-space: nowrap;
}

.badge::before { content: "<"; opacity: 0.6; }
.badge::after { content: "/>"; opacity: 0.6; }

.badge--plain::before, .badge--plain::after { content: none; }

.badge--green { background: var(--sf-green-100); color: var(--sf-green); }
.badge--amber { background: var(--sf-amber-100); color: #966420; }
.badge--red { background: var(--sf-red-100); color: var(--sf-red); }
.badge--ink { background: var(--sf-ink); color: var(--sf-on-ink); }

.badge--dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.badge--dot::after { content: none; }