/*
 * Badge
 *   <span class="badge badge-outline">Vendue</span>
 *   variants : badge-default · badge-secondary · badge-outline · badge-live · badge-muted
 *   statuts  : badge-success · badge-destructive · badge-warning · badge-info (teinte à 10 %)
 */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  border: 0.5px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: var(--ui-tracking, var(--tracking-wider));
  text-transform: var(--ui-case, uppercase);
  white-space: nowrap;
}

.badge-default   { background: var(--primary); color: var(--primary-foreground); }
.badge-secondary { background: var(--secondary); color: var(--muted-foreground); }
.badge-outline {
  border-color: var(--input);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}
.badge-success     { background: color-mix(in srgb, var(--success) 10%, transparent);     color: var(--success); }
.badge-destructive { background: color-mix(in srgb, var(--destructive) 10%, transparent); color: var(--destructive); }
.badge-warning     { background: color-mix(in srgb, var(--warning) 10%, transparent);     color: var(--warning); }
.badge-info        { background: color-mix(in srgb, var(--info) 10%, transparent);        color: var(--info); }
.badge-muted { background: color-mix(in srgb, var(--background) 92%, transparent); color: var(--muted-foreground); }

/* Point vert animé — "en cours" */
.badge-live { background: color-mix(in srgb, var(--background) 92%, transparent); color: var(--foreground); }
.badge-live::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
  .badge-live::before { animation: none; }
}