/* ================================================================
   BADGES — Accent, Founder, Muted, Green, Status variants
   Mobile-first. Uses var(--vc-*) tokens exclusively.
   ================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-full);
  letter-spacing: 0.02em;
}

.badge-accent {
  background: var(--vc-accent-subtle);
  color: var(--vc-accent);
  border: 1px solid var(--vc-accent-border);
}

.badge-founder {
  background: var(--vc-founder-subtle);
  color: var(--vc-founder);
  border: 1px solid var(--vc-founder-border);
}

.badge-muted {
  background: var(--vc-bg-surface-2);
  color: var(--vc-text-muted);
}

.badge-green {
  background: var(--vc-green-subtle);
  color: var(--vc-green);
  border: 1px solid var(--vc-green-border);
}

.badge-available {
  background: var(--vc-green-subtle);
  color: var(--vc-green);
  border: 1px solid var(--vc-green-border);
}

.badge-coming-soon {
  background: var(--vc-bg-surface-2);
  color: var(--vc-text-muted);
}