/* ═══════════════════════════════════════════════════════════════════
   Cronac Give  ·  css/components/badges.css
   Shared badge / pill system — shared across all features.
   Uses shared accent tokens from core/theme.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base badge ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Semantic status variants ────────────────────────────────────── */
.badge--primary {
  background: var(--org-primary-light);
  color: var(--org-primary-dark);
}

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

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

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

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

.badge--neutral {
  background: var(--accent-neutral-bg);
  color: var(--accent-neutral-fg);
}

/* ── Accent color variants (from shared accent tokens) ───────────── */
.badge--blue {
  background: var(--accent-blue-bg);
  color: var(--accent-blue-fg);
}

.badge--green {
  background: var(--accent-green-bg);
  color: var(--accent-green-fg);
}

.badge--purple {
  background: var(--accent-purple-bg);
  color: var(--accent-purple-fg);
}

.badge--amber {
  background: var(--accent-amber-bg);
  color: var(--accent-amber-fg);
}

.badge--rose {
  background: var(--accent-rose-bg);
  color: var(--accent-rose-fg);
}

/* ── Recurring payment status badges ────────────────────────────── */
.badge--rdp-status-active   { background: var(--color-success-bg); color: var(--color-success); }
.badge--rdp-status-paused   { background: var(--color-warning-bg); color: var(--color-warning); }
.badge--rdp-status-canceled { background: var(--accent-neutral-bg); color: var(--accent-neutral-fg); }
.badge--rdp-status-failed   { background: var(--color-error-bg);   color: var(--color-error); }

/* ── Campaign status badges ──────────────────────────────────────── */
.badge--campaign-status-active   { background: var(--color-success-bg);   color: var(--color-success); }
.badge--campaign-status-draft    { background: var(--accent-neutral-bg);  color: var(--accent-neutral-fg); }
.badge--campaign-status-paused   { background: var(--color-warning-bg);   color: var(--color-warning); }
.badge--campaign-status-ended    { background: var(--accent-rose-bg);     color: var(--accent-rose-fg); }
.badge--campaign-status-archived { background: var(--accent-neutral-bg);  color: var(--color-text-light); }

/* ── Constituent type badges ─────────────────────────────────────── */
.badge--type-person       { background: var(--accent-blue-bg);   color: var(--accent-blue-fg); }
.badge--type-organization { background: var(--accent-green-bg);  color: var(--accent-green-fg); }
.badge--type-household    { background: var(--accent-amber-bg);  color: var(--accent-amber-fg); }

/* ── Recurring frequency badges ──────────────────────────────────── */
.badge--freq-monthly   { background: var(--accent-blue-bg);   color: var(--accent-blue-fg); }
.badge--freq-quarterly { background: var(--accent-green-bg);  color: var(--accent-green-fg); }
.badge--freq-annually  { background: var(--accent-amber-bg);  color: var(--accent-amber-fg); }

/* ── Dataset badges (custom reports) ────────────────────────────── */
.badge--dataset {
  font-size:      var(--text-xs);
  font-weight:    var(--font-semi);
  padding:        2px 8px;
  border-radius:  var(--radius-full);
  text-transform: capitalize;
  white-space:    nowrap;
}

.badge--dataset-donations    { background: var(--accent-blue-bg);   color: var(--accent-blue-fg); }
.badge--dataset-constituents { background: var(--accent-amber-bg);  color: var(--accent-amber-fg); }
.badge--dataset-campaigns    { background: var(--accent-green-bg);  color: var(--accent-green-fg); }

.badge--shared {
  font-size:     var(--text-xs);
  font-weight:   var(--font-medium);
  padding:       2px 6px;
  border-radius: var(--radius-full);
  background:    var(--color-surface-3);
  color:         var(--color-text-muted);
  margin-left:   var(--space-2);
}