/* =============================================================
   Socle · Badge (.sc-badge)
   Marqueur de statut compact, non interactif.
   Variantes : --accent, --success, --warning, --danger
   Modificateur : --solid (fond plein) · Élément : __dot
   ============================================================= */

.sc-badge {
  /* Tokens de composant : les variantes ne font que réassigner ceci. */
  --_badge-bg: var(--color-bg-subtle);
  --_badge-text: var(--color-text-secondary);
  /* Détouré comme les quatre variantes teintées : la charte veut des
     pilules à filet, et le neutre est le badge le plus employé, donc
     celui qui énonce la règle. Le cran fort plutôt que --color-border,
     qui vaut la même valeur que le fond en thème sombre. */
  --_badge-border: var(--color-border-strong);
  --_badge-icon-size: var(--space-12);

  display: inline-flex;
  align-items: center;
  gap: var(--gap-2xs);
  padding: var(--padding-2xs) var(--padding-s);
  border: var(--border-hairline) solid var(--_badge-border);
  border-radius: var(--radius-pill);
  background: var(--_badge-bg);
  color: var(--_badge-text);
  font-family: var(--font-body);
  font-size: var(--text-caption-size);
  font-weight: var(--text-label-weight);
  line-height: var(--leading-tight);
  white-space: nowrap;
  vertical-align: middle;
}

/* L'icône se cale sur la taille de la légende plutôt que sur la
   grille 16px : le badge garde la même hauteur avec ou sans elle, donc
   deux badges voisins s'alignent. Le balisage documenté écrit la même
   valeur, et --_badge-icon-size reste le seul point de réglage. */
.sc-badge svg {
  flex-shrink: 0;
  width: var(--_badge-icon-size);
  height: var(--_badge-icon-size);
}

/* Point de statut : un cercle en currentColor, il suit la variante. */
.sc-badge__dot {
  flex-shrink: 0;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  background: currentColor;
}

/* ---- Variantes teintées ---- */

.sc-badge--accent {
  --_badge-bg: var(--color-accent-subtle);
  --_badge-text: var(--color-accent-text);
  --_badge-border: var(--color-accent-border);
}

.sc-badge--success {
  --_badge-bg: var(--color-success-subtle);
  --_badge-text: var(--color-success-text);
  --_badge-border: var(--color-success-border);
}

.sc-badge--warning {
  --_badge-bg: var(--color-warning-subtle);
  --_badge-text: var(--color-warning-text);
  --_badge-border: var(--color-warning-border);
}

.sc-badge--danger {
  --_badge-bg: var(--color-danger-subtle);
  --_badge-text: var(--color-danger-text);
  --_badge-border: var(--color-danger-border);
}

/* ---- Fond plein ----
   Placé après les variantes teintées : seul, il rend le badge
   neutre inversé ; combiné, la double classe reprend la main. */

.sc-badge--solid {
  --_badge-bg: var(--color-bg-inverse);
  --_badge-text: var(--color-text-inverse);
  --_badge-border: transparent;
}

.sc-badge--accent.sc-badge--solid {
  --_badge-bg: var(--color-accent);
  --_badge-text: var(--color-text-on-accent);
}

/* Le vert et le rouge passent au cran 500 en thème sombre, donc plus
   clair qu'en thème clair : un texte clair fixe n'y tient plus. Ces deux
   fonds ont leur propre rôle de texte, qui bascule avec eux, comme
   l'ambre juste en dessous. */
.sc-badge--success.sc-badge--solid {
  --_badge-bg: var(--color-success);
  --_badge-text: var(--color-text-on-success);
}

.sc-badge--danger.sc-badge--solid {
  --_badge-bg: var(--color-danger);
  --_badge-text: var(--color-text-on-danger);
}

/* Le blanc ne passe pas sur l'ambre, et --color-text bascule
   avec le thème : ce rôle-ci reste sombre dans les deux. */
.sc-badge--warning.sc-badge--solid {
  --_badge-bg: var(--color-warning);
  --_badge-text: var(--color-text-on-warning);
}