@layer components {
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border-radius: var(--radius);
  background: var(--gray-100);
  color: var(--text);
  transition: background-color var(--transition-fast);
}

/* Size variants */
.badge.badge--sm {
  min-height: 1.25rem;
  padding: calc(var(--spacing-1) / 2) var(--spacing-1);
  font-size: calc(var(--font-size-xs) * 0.9);
}

.badge.badge--lg {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-base);
}

/* Color variants */
.badge.badge--primary {
  color: var(--on-brand);
  background-color: var(--brand);
}

.badge.badge--secondary {
  color: var(--white);
  background-color: var(--text-muted);
}

.badge.badge--success {
  color: var(--white);
  background-color: var(--green-700);
}

.badge.badge--danger {
  color: var(--white);
  background-color: var(--red-700);
}

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

.badge.badge--info {
  color: var(--white);
  background-color: var(--blue-600);
}

/* Status variants — BEM hooks (status_badge helper -> badge--<status>) */
.badge.badge--pending-submission,
.badge.badge--pending-review,
.badge-pending-submission,
.badge-pending-review {
  color: var(--status-pending-fg);
  background-color: var(--status-pending-bg);
  border: var(--border-width) solid var(--status-pending-border);
}

.badge.badge--approved,
.badge-approved {
  color: var(--status-approved-fg);
  background-color: var(--status-approved-bg);
  border: var(--border-width) solid var(--status-approved-border);
}

.badge.badge--rejected,
.badge-rejected {
  color: var(--status-rejected-fg);
  background-color: var(--status-rejected-bg);
  border: var(--border-width-thick) solid var(--status-rejected-border);
}

/* Monochrome status convention is carried by symbols, not color:
   approved = ✓ on solid ink, rejected = ✕ in heavy outline. */
.badge.badge--approved::before,
.badge-approved::before {
  content: "✓ ";
}

.badge.badge--rejected::before,
.badge-rejected::before {
  content: "✕ ";
}
}