/**
 * DRD Engineers Badges & Chips Component
 * Monospaced text, high-contrast subtle background tint
 */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: var(--font-size-label-sm);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-container-high);
  color: var(--color-on-surface);
  border: 1px solid var(--color-border-subtle);
}

.badge-primary {
  background-color: var(--color-primary-fixed);
  color: var(--color-on-primary-fixed);
  border-color: var(--color-outline-variant);
}

.badge-secondary {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
  border-color: var(--color-secondary);
}

.badge-outline {
  background-color: transparent;
  border: 1px solid var(--color-outline);
  color: var(--color-on-surface);
}