.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1.4;
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.badge--success {
  background: var(--success-subtle);
  color: var(--success);
}

.badge--warning {
  background: var(--warning-subtle);
  color: var(--warning);
}

.badge--error {
  background: var(--error-subtle);
  color: var(--error);
}

.badge--accent {
  background: var(--accent-subtle);
  color: var(--accent-text);
}

.badge--beginner {
  background: rgba(99, 168, 117, 0.14);
  color: #72bd86;
}

.badge--intermediate {
  background: rgba(212, 164, 62, 0.14);
  color: #e0b44e;
}

.badge--advanced {
  background: rgba(180, 110, 182, 0.14);
  color: #cc9ace;
}

.tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: var(--bg-elevated);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}