/* ==========================================================================
   Badge Component – CAAT Design System
   ========================================================================== */

.caat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--caat-font-primary);
  font-size: var(--caat-font-size-2xs);
  font-weight: 700;
  line-height: 1;
  padding: 0.35em 0.65em;
  border-radius: 0.375rem;
  white-space: nowrap;
  vertical-align: baseline;
}

/* --- Variants --- */
.caat-badge--primary {
  background-color: var(--caat-blue-900, #003750);
  color: var(--caat-color-text-inverse);
}

.caat-badge--secondary {
  background-color: var(--caat-green-700, #367f32);
  color: var(--caat-color-text-inverse);
}

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

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

.caat-badge--danger {
  background-color: var(--caat-danger);
  color: var(--caat-color-text-inverse);
}

.caat-badge--light {
  background-color: var(--caat-grey);
  color: var(--caat-color-text);
  border: 1px solid var(--caat-color-border);
}

.caat-badge--dark {
  background-color: var(--caat-ink, #102637);
  color: var(--caat-color-text-inverse);
}

/* --- Pill --- */
.caat-badge--pill {
  border-radius: 50rem;
  padding: 0.35em 0.75em;
}

/* Light-outline pill (for category labels on cards) */
.caat-badge--outline {
  background: transparent;
  border: 1px solid var(--caat-color-border);
  color: var(--caat-color-text);
}

/* --- Soft variants (pastel bg + dark text — for category pills on cards) --- */
.caat-badge--soft-blue {
  background: var(--caat-blue-100);
  color: var(--caat-blue-900);
}
.caat-badge--soft-green {
  background: var(--caat-green-100);
  color: var(--caat-green-900);
}
.caat-badge--soft-teal {
  background: var(--caat-teal-100);
  color: var(--caat-teal-900);
}
.caat-badge--soft-warning {
  background: var(--caat-warning-bg, #fff3cd);
  color: var(--caat-warning-text, #664d03);
}
.caat-badge--soft-danger {
  background: var(--caat-danger-bg, #fde8e8);
  color: var(--caat-danger-accent, #c0392b);
}

/* --- Status badges (member dashboard) --- */
.caat-badge--active {
  background-color: var(--caat-success-bg, #d1e7dd);
  color: var(--caat-success-text, #0a3622);
}

.caat-badge--pending {
  background-color: var(--caat-warning-bg, #fff3cd);
  color: var(--caat-warning-text, #664d03);
}

.caat-badge--retired {
  background-color: var(--caat-blue-100, #e7f4fb);
  color: var(--caat-blue-900, #003750);
}

/* --- Icon inside badge --- */
.caat-badge .bi {
  font-size: 0.85em;
}

/* --- Badge on button (positioned) --- */
.caat-badge--count {
  position: relative;
  top: -0.1em;
  font-size: var(--caat-font-size-2xs);
  padding: 0.25em 0.5em;
  border-radius: 50rem;
  margin-left: 0.35rem;
}