/**
 * Badge — atomic primitive.
 *
 * Compact label for status, count, or category. Inline with text.
 * Three colour variants × two sizes × pill or rectangle.
 *
 * Markup:
 *   <span class="ds-badge ds-badge--brand">New</span>
 *   <span class="ds-badge ds-badge--neutral ds-badge--sm">12</span>
 *   <span class="ds-badge ds-badge--action ds-badge--rect">Limited</span>
 */

.ds-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-3xs);

  /* Default size = md */
  padding: var(--ds-space-3xs) var(--ds-space-2xs);
  min-height: var(--ds-space-md);

  font-family: var(--ds-font-body);
  font-size: var(--ds-text-caption);
  font-weight: var(--ds-weight-strong);
  line-height: var(--ds-leading-heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;

  border-radius: var(--ds-radius-pill);
  border: 1px solid transparent;
}

/* ─── Sizes ──────────────────────────────────────────────────── */
.ds-badge--sm {
  padding: 0 var(--ds-space-2xs);
  min-height: var(--ds-space-sm);
  font-size: var(--ds-text-caption);
}

/* ─── Shape modifier ─────────────────────────────────────────── */
.ds-badge--rect { border-radius: var(--ds-radius-sm); }

/* ─── Variants ───────────────────────────────────────────────── */
.ds-badge--brand {
  background-color: var(--ds-color-brand-primary);
  color: var(--ds-color-text-inverse);
}
.ds-badge--action {
  background-color: var(--ds-color-brand-action);
  color: var(--ds-color-text-inverse);
}
.ds-badge--warm {
  background-color: var(--ds-color-brand-warm);
  color: var(--ds-color-text-primary);
}
.ds-badge--highlight {
  background-color: var(--ds-color-brand-highlight);
  color: var(--ds-color-text-primary);
}
.ds-badge--neutral {
  background-color: var(--ds-color-surface-sunken);
  color: var(--ds-color-text-secondary);
}
.ds-badge--neutral-inverse {
  background-color: var(--ds-color-surface-inverse);
  color: var(--ds-color-text-inverse);
}
.ds-badge--outline {
  background-color: transparent;
  color: var(--ds-color-brand-primary);
  border-color: var(--ds-color-border-brand);
}