/* =============================================================================
   Badge — docs/components/badge.md. A pill label for categories, years and
   status tags. Raleway 700 / 14px / uppercase, 8px 16px, --border-radius-pill.

   EdTech contrast rule (contracts.md §1): the division accent #5ecec3 is light,
   so text on it is --color-primary-darkest, NEVER white.
   ============================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--border-radius-pill);
  background-color: var(--color-accent-cyan-dark);
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Division (EdTech) — light accent, dark text */
.badge--division,
.badge--secondary,
.badge--accent {
  background-color: var(--color-accent);
  color: var(--color-primary-darkest);
}

/* Pale — the quiet variant */
.badge--pale,
.badge--primary {
  background-color: var(--color-primary-pale);
  color: var(--color-primary-darkest);
}

.badge .icon {
  color: currentColor;
}