/* ============================================================================
   cab-badge — étiquette de statut. Portage du cockpit (src/components/ui/badge.tsx).

   La règle que ce composant fait respecter par construction : la couleur vive
   ne sert JAMAIS de texte. Elle porte le point, le contour, le fond ou le filet ;
   le texte passe toujours par la teinte « ink », assez foncée pour tenir le AA.
   Deux variables par ton : --cab-badge-vif et --cab-badge-ink.

   Trois variantes : outline (défaut), soft (fond teinté), filet (listes denses).
   Casse normale, jamais de mono majuscule : celui-ci est réservé aux eyebrows.
   ============================================================================ */

.cab-badge {
  --cab-badge-vif: var(--cab-ink-3, #687585);
  --cab-badge-ink: var(--cab-ink-2, #4D5B68);

  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--cab-radius-pill, 999px);
  padding: 3px 10px;
  font-family: var(--cab-font-sans, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--cab-badge-ink);
}

/* Le point : c'est lui qui porte la couleur, pas le texte. */
.cab-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 999px;
  background: var(--cab-badge-vif);
}

.cab-badge--outline {
  border: 1px solid color-mix(in srgb, var(--cab-badge-vif) 40%, transparent);
  background: var(--cab-surface, #fff);
}

.cab-badge--soft {
  background: color-mix(in srgb, var(--cab-badge-vif) 15%, transparent);
}

/* Filet : pour une liste dense, où un contour par ligne ferait du bruit. */
.cab-badge--filet {
  border-radius: 0;
  padding: 0 0 1px;
  gap: 0;
  font-weight: 600;
  border-bottom: 2px solid var(--cab-badge-vif);
}
.cab-badge--filet::before { display: none; }

/* --- les six tons ---------------------------------------------------------- */

.cab-badge[data-ton="ember"] {
  --cab-badge-vif: var(--cab-accent, #9A1B38);
  --cab-badge-ink: var(--cab-accent-ink, #9A1B38);
}
.cab-badge[data-ton="teal"] {
  --cab-badge-vif: var(--cab-ok, #0E9F6E);
  --cab-badge-ink: var(--cab-ok-ink, #0B7A55);
}
.cab-badge[data-ton="amber"] {
  --cab-badge-vif: var(--cab-warn, #E0A106);
  --cab-badge-ink: var(--cab-warn-ink, #8A6A00);
}
.cab-badge[data-ton="danger"] {
  --cab-badge-vif: var(--cab-danger, #E5484D);
  --cab-badge-ink: var(--cab-danger-ink, #C2334A);
}
.cab-badge[data-ton="info"] {
  --cab-badge-vif: var(--cab-info, #3B82F6);
  --cab-badge-ink: var(--cab-info-ink, #2D5FB8);
}
.cab-badge[data-ton="neutral"] {
  --cab-badge-vif: var(--cab-ink-3, #687585);
  --cab-badge-ink: var(--cab-ink-2, #4D5B68);
}