/**
 * BADGE — کامپوننت بج/برچسب کوچک
 * کاربرد نمونه: «تازه»، «پرمصرف‌ترین»، «پروتئین بالا»، «موجودی محدود»
 * وابسته به: styles/base/tokens.css
 * استفاده در PHP: template-parts/components/badge.php
 */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.8;
  white-space: nowrap;
}

/* طلایی: پیش‌فرض برای برچسب‌های مثبت/تشویقی (کنتراست تست‌شده ~5.7:1) */
.badge--gold {
  background-color: var(--color-tala-500);
  color: var(--color-brown-950);
}

/* زرشکی: برای برچسب‌های برجسته/فروش ویژه */
.badge--zereshk {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* outline: برای برچسب‌های خنثی/اطلاعاتی روی پس‌زمینه روشن */
.badge--outline {
  background-color: transparent;
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-brown-700);
}