:root {
  --badge-radius: 999px;
  --badge-font-size: 0.8125rem; /* 13px */
  --badge-padding-y: 0.16rem;
  --badge-padding-x: 0.56rem;
  --badge-gap: 0.36rem;

  /* palette derived from your vars (subtle style like 'pending') */
  --badge-active-bg: #e8f8ec; /* soft green */
  --badge-active-text: #19bb34;
  --badge-active-border: rgba(0, 124, 21, 0.1);

  --badge-inactive-bg: #fdecea; /* soft red */
  --badge-inactive-text: #c62828;
  --badge-inactive-border: rgba(198, 40, 40, 0.1);

  --badge-info-bg: #e7f3fe;
  --badge-info-text: #0b60b0;
  --badge-info-border: rgba(11, 96, 176, 0.08);

  --badge-warning-bg: #fff8e1;
  --badge-warning-text: #e6b52f;
  --badge-warning-border: rgba(230, 181, 47, 0.08);

  --badge-pending-bg: #fff7ed; /* your liked style */
  --badge-pending-text: #b76a00;
  --badge-pending-border: rgba(183, 106, 0, 0.08);

  --badge-muted-bg: #f3f2ef;
  --badge-muted-text: #2b2b2b;
  --badge-muted-border: rgba(0, 0, 0, 0.04);

  --badge-offline-bg: #f5f5f5;
  --badge-offline-text: #8a8a8a;
  --badge-offline-border: rgba(0, 0, 0, 0.04);

  --badge-promo-bg: #f0fbf5; /* subtle promo (light green tint) */
  --badge-promo-text: #1ad83a;
  --badge-promo-border: rgba(35, 102, 46, 0.06);
  /* purple badge (add to your :root) */
  --badge-purple-bg: #f3ecff;
  --badge-purple-text: #5e2ca8;
  --badge-purple-border: rgba(94, 44, 168, 0.08);

  --badge-purple-solid-bg: #5e2ca8;
  --badge-purple-solid-text: #ffffff;

  /* optional dot color */
  --badge-purple-dot: #5e2ca8;
}

/* base */
.badge-custom {
  display: inline-flex;
  align-items: center;
  gap: var(--badge-gap);
  padding: var(--badge-padding-y) var(--badge-padding-x);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  min-height: 1.6rem;
  border: 1px solid transparent;
  box-shadow: none;
  vertical-align: middle;
}

/* tiny colored dot (optional) */
.badge-dot {
  width: 0.56rem;
  height: 0.56rem;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: none;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

/* states — all subtle like pending */
.badge-active {
  background: var(--badge-active-bg);
  color: var(--badge-active-text);
  border-color: var(--badge-active-border);
}
.badge-inactive {
  background: var(--badge-inactive-bg);
  color: var(--badge-inactive-text);
  border-color: var(--badge-inactive-border);
}
.badge-info {
  background: var(--badge-info-bg);
  color: var(--badge-info-text);
  border-color: var(--badge-info-border);
}
.badge-warning {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-text);
  border-color: var(--badge-warning-border);
}
.badge-pending {
  background: var(--badge-pending-bg);
  color: var(--badge-pending-text);
  border-color: var(--badge-pending-border);
}
.badge-muted {
  background: var(--badge-muted-bg);
  color: var(--badge-muted-text);
  border-color: var(--badge-muted-border);
}
.badge-offline {
  background: var(--badge-offline-bg);
  color: var(--badge-offline-text);
  border-color: var(--badge-offline-border);
}
.badge-promo {
  background: var(--badge-promo-bg);
  color: var(--badge-promo-text);
  border-color: var(--badge-promo-border);
  font-weight: 700;
}
/* subtle purple (همان سبک pending) */
.badge-purple {
  background: var(--badge-purple-bg);
  color: var(--badge-purple-text);
  border-color: var(--badge-purple-border);
}

/* solid purple (برای تاکید بیشتر) */
.badge--solid.badge-purple {
  background: var(--badge-purple-solid-bg);
  color: var(--badge-purple-solid-text);
  border-color: transparent;
}

/* sizes */
.badge-sm {
  font-size: 0.72rem;
  padding: 0.45rem 0.75rem;
  min-height: 1.2rem;
}
.badge-lg {
  font-size: 0.92rem;
  padding: 0.22rem 0.7rem;
  min-height: 1.9rem;
}