/* Badge
   A small status or category label. Tone is set with data-tone (neutral,
   primary, success, warning, danger, info). Style is set with data-variant
   (soft is the default, solid for high emphasis). Colour from tokens.css. */

.dp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-space-1);
  font-size: var(--dp-text-xs);
  font-weight: var(--dp-weight-bold);
  line-height: 1;
  padding: 4px var(--dp-space-2);
  border-radius: var(--dp-radius-full);
  white-space: nowrap;
}

.dp-badge svg {
  width: 0.875em;
  height: 0.875em;
}

/* ---- Soft (default): tinted background, strong text ------------------ */
.dp-badge,
.dp-badge[data-tone="primary"] {
  background: var(--dp-primary-soft);
  color: var(--dp-blue-700);
}

.dp-badge[data-tone="neutral"] {
  background: var(--dp-neutral-soft);
  color: var(--dp-text-muted);
}

.dp-badge[data-tone="success"] {
  background: var(--dp-success-soft);
  color: var(--dp-success);
}

.dp-badge[data-tone="warning"] {
  background: var(--dp-warning-soft);
  color: var(--dp-warning);
}

.dp-badge[data-tone="danger"] {
  background: var(--dp-danger-soft);
  color: var(--dp-danger);
}

.dp-badge[data-tone="info"] {
  background: var(--dp-info-soft);
  color: var(--dp-info);
}

/* ---- Solid: filled background, light text ---------------------------- */
.dp-badge[data-variant="solid"] {
  color: var(--dp-white);
}

.dp-badge[data-variant="solid"],
.dp-badge[data-variant="solid"][data-tone="primary"] {
  background: var(--dp-primary-bg);
}

.dp-badge[data-variant="solid"][data-tone="neutral"] {
  background: var(--dp-navy);
}

.dp-badge[data-variant="solid"][data-tone="success"] {
  background: var(--dp-success);
}

.dp-badge[data-variant="solid"][data-tone="warning"] {
  background: var(--dp-warning);
}

.dp-badge[data-variant="solid"][data-tone="danger"] {
  background: var(--dp-danger);
}

.dp-badge[data-variant="solid"][data-tone="info"] {
  background: var(--dp-info);
}