/* Chips -see docs/strategy/design-system/11-chip.md */

.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: var(--font-size-micro);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

.chip.primary {
  background: var(--primary-light);
  border-color: var(--primary-light);
  color: var(--primary);
}

.chip.success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}

.chip.warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning);
}

.chip.error {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error);
}

.chip.info {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info);
}

.chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--surface);
}

.chip.pro {
  background: var(--admin-accent-bg);
  border-color: var(--admin-accent-border);
  color: var(--admin-accent);
}

/* Draft / unsaved-state chip. Distinct from .pro (which is the
 * permission boundary). Used wherever a row, sheet, or banner is
 * showing a draft that hasn't been published yet (recipe
 * configurator's "v5 → next" pill is the canonical example).
 * Tokens come from the --draft-* family in tokens.css (ADR
 * 2026-05-15). */
.chip.draft {
  background: var(--draft-bg);
  border-color: var(--draft-border);
  color: var(--draft-dark);
}

.chip.muted,
.chip.neutral {
  background: var(--surface-soft);
  border-color: var(--divider);
  color: var(--muted);
}