/* =========================================================
   🏷️ BADGES – BASE
   ---------------------------------------------------------
   Återanvändbara badges för hela siten
   ========================================================= */

.badge {
  display: inline-block;

  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-small);
  font-weight: 600;

  border-radius: var(--radius-sm);
  width: fit-content;

  color: var(--color-bg);
}


/* =========================================================
   🔥 BADGE VARIANTER
   ---------------------------------------------------------
   Olika typer av badges
   ========================================================= */

.badge--popular {
  background: #ff385c; /* kan senare bli variabel */
}

.badge--value {
  background: var(--color-accent);
}


/* =========================================================
   ✨ OPTIONAL SHADOW
   ---------------------------------------------------------
   Kan användas där det behövs
   ========================================================= */

.badge--shadow {
  box-shadow: var(--shadow-sm);
}