/* =============================================================================
 * SERIGRAPHIE-BOUTIQUE — Badges v0.2.0
 * =============================================================================
 * Dépendance : tokens.css
 *
 * Usages :
 * - Badges sur image produit (Nouveau, Promo, -15%)
 * - Badges de statut (Stock, Rupture, Précommande)
 * - Badge compteur panier
 *
 * Différence vs chip : un badge est plus petit, souvent absolu-positionné
 * sur un autre élément (image produit, icône panier).
 * ============================================================================= */

.sb-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sb-sp-1);
  padding: var(--sb-sp-1) var(--sb-sp-3);

  font-family: var(--sb-font-sans);
  font-size: var(--sb-fs-micro);
  font-weight: var(--sb-fw-medium);
  line-height: 1;
  letter-spacing: var(--sb-ls-wider);
  text-transform: uppercase;

  background-color: var(--sb-color-ink);
  color: var(--sb-color-paper);
  border-radius: var(--sb-radius-sm);

  white-space: nowrap;
  user-select: none;
}

/* ---------------------------------------------------------------------------
 * Variantes de couleurs
 * ------------------------------------------------------------------------- */
.sb-badge--accent {
  background-color: var(--sb-color-accent);
  color: var(--sb-text-on-accent);
}

.sb-badge--success {
  background-color: var(--sb-color-success);
  color: var(--sb-color-paper);
}

.sb-badge--warning {
  background-color: var(--sb-color-warning);
  color: var(--sb-color-ink);
}

.sb-badge--danger {
  background-color: var(--sb-color-danger);
  color: var(--sb-color-paper);
}

.sb-badge--info {
  background-color: var(--sb-color-info);
  color: var(--sb-color-paper);
}

/* ---------------------------------------------------------------------------
 * Variante OUTLINE — contour uniquement, pour badges discrets
 * ------------------------------------------------------------------------- */
.sb-badge--outline {
  background-color: transparent;
  border: 1px solid var(--sb-color-ink);
  color: var(--sb-color-ink);
}

.sb-badge--outline.sb-badge--accent {
  border-color: var(--sb-color-accent);
  color: var(--sb-color-accent);
}

/* ---------------------------------------------------------------------------
 * Variante DOT — point coloré + texte, ultra-compact
 * Ex: "• En stock", "• Livraison 48h"
 * ------------------------------------------------------------------------- */
.sb-badge--dot {
  background-color: transparent;
  color: var(--sb-text-secondary);
  padding: 0;
  text-transform: none;
  letter-spacing: var(--sb-ls-normal);
  font-weight: var(--sb-fw-regular);
}

.sb-badge--dot::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--sb-radius-pill);
  margin-right: var(--sb-sp-2);
  background-color: currentColor;
}

.sb-badge--dot.sb-badge--success { color: var(--sb-color-success); }
.sb-badge--dot.sb-badge--warning { color: var(--sb-color-warning); }
.sb-badge--dot.sb-badge--danger { color: var(--sb-color-danger); }

/* ---------------------------------------------------------------------------
 * Badge COUNTER — nombre dans un pill rond (panier, notifications)
 * ------------------------------------------------------------------------- */
.sb-badge--counter {
  min-width: 20px;
  height: 20px;
  padding: 0 var(--sb-sp-2);
  border-radius: var(--sb-radius-pill);
  font-size: var(--sb-fs-micro);
  letter-spacing: 0;
  text-transform: none;
  background-color: var(--sb-color-accent);
  color: var(--sb-text-on-accent);
}

/* ---------------------------------------------------------------------------
 * Positionnement en coin (sur image produit)
 * ------------------------------------------------------------------------- */
.sb-badge--corner {
  position: absolute;
  top: var(--sb-sp-3);
  left: var(--sb-sp-3);
  z-index: var(--sb-z-raised);
}

.sb-badge--corner.sb-badge--corner-right {
  left: auto;
  right: var(--sb-sp-3);
}

.sb-badge--corner.sb-badge--corner-bottom {
  top: auto;
  bottom: var(--sb-sp-3);
}