/* Badge
 *
 * A short status label. Used by every enum in the product, so it is built on
 * the six shared tones rather than on per-enum colours.
 *
 *   <span class="badge badge--positive">Confirmed</span>
 *
 * THE LABEL IS NEVER OPTIONAL. Colour is additional — remove it and the badge
 * still says what it means. A coloured dot with no text is a guess, and it is
 * invisible to a screen reader and to anyone who cannot separate the hues.
 *
 * ── value → tone ──────────────────────────────────────────────────────────
 * The mapping lives with each enum's story; collected here so the reuse is
 * visible and the tones stay consistent across screens.
 *
 *   Event status        Idea draft · Planned info · Confirmed positive
 *                       Completed neutral · Cancelled danger
 *   Attendance status   Invited draft · Confirmed info · Attended positive
 *                       Cancelled danger
 *   Payment status      Unpaid warning · Paid positive · Comped info
 *                       Refunded neutral
 *   Task priority       Low neutral · Medium info · High warning
 *   Task status         Open draft · In progress info · Completed positive
 *                       Cancelled neutral
 *   Condition           Excellent, Good positive · Fair neutral
 *                       Lightly damaged, Problematic warning · Lost danger
 *
 * Completed is neutral, not positive, in both places it appears: finished
 * things accumulate, and the state needing least attention should be quietest.
 */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  padding-block: var(--space-1);
  padding-inline: var(--space-3);

  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  white-space: nowrap;

  border: 1px solid currentcolor;
  border-radius: var(--radius-full);

  /* Tone sets the text and the border together; the surface shows through, so
   * only one contrast pair needs checking per tone. */
  color: var(--color-tone-neutral);
}

.badge--neutral  { color: var(--color-tone-neutral); }
.badge--draft    { color: var(--color-tone-draft); }
.badge--info     { color: var(--color-tone-info); }
.badge--positive { color: var(--color-tone-positive); }
.badge--warning  { color: var(--color-tone-warning); }
.badge--danger   { color: var(--color-tone-danger); }

/* A filled variant for the one-per-screen case where a status is the headline
 * rather than one cell among many — an Event detail header, say. Used sparingly:
 * a list of filled badges is a list nobody can scan. */
.badge--solid {
  color: var(--color-surface);
  background-color: var(--color-tone-neutral);
  border-color: transparent;
}
.badge--solid.badge--draft    { background-color: var(--color-tone-draft); }
.badge--solid.badge--info     { background-color: var(--color-tone-info); }
.badge--solid.badge--positive { background-color: var(--color-tone-positive); }
.badge--solid.badge--warning  { background-color: var(--color-tone-warning); }
.badge--solid.badge--danger   { background-color: var(--color-tone-danger); }

/* A dot, for the cases where the badge sits beside its own written label
 * already — a filter chip counting matches, for instance. Decorative, so it is
 * aria-hidden in markup and never the only carrier of meaning. */
.badge__dot {
  inline-size: 0.5em;
  block-size: 0.5em;
  border-radius: var(--radius-full);
  background-color: currentcolor;
  flex: none;
}

/* Interactive badge — a status a Member can change from the list. Becomes a
 * <button>, so it needs a real target size and a focus ring. */
button.badge {
  min-block-size: var(--target-min);
  cursor: pointer;
  background: none;
  font-family: inherit;
}

button.badge:hover { background-color: var(--color-surface-sunken); }

button.badge:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}