/* Badge — WowVendor DS. Бейджи для статусов и лейблов.
   Оси: Accent (primary/secondary) × Size (sm/md/lg) × Color (brand/gray/
        orange/green/blue/red/purple/teal).

   Primary — сплошная заливка, текст и точка белые (gray-0).
   Secondary — светлый фон, текст и точка в цвет.
   Точка (Dot 6px) есть у Medium и Large; у Small её нет.

   Значения — только токены. Точка — инлайновый <svg>, красится currentColor
   от color бейджа (одинаков у текста и точки). Типографика — utility-классами
   в разметке (.text-body-11m / .text-body-12m / .text-body-14m). */

.badge {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: var(--radius-4);
  overflow: hidden;
  font-family: var(--font-family-base);
  white-space: nowrap;
}

.badge__dot {
  flex: none;
  width: 6px;
  height: 6px;
}
.badge__dot svg { display: block; width: 100%; height: 100%; }

/* ---- Размеры ---- */
.badge--sm { padding: var(--spacing-4); }
.badge--md { gap: var(--spacing-6); padding: var(--spacing-4) var(--spacing-8); }
.badge--lg { gap: var(--spacing-6); padding: var(--spacing-4) var(--spacing-10); }

/* ==== Primary: сплошная заливка, foreground белый ==== */
.badge--primary { color: var(--color-gray-0); }
.badge--primary.badge--brand  { background: var(--color-accent-400); }
.badge--primary.badge--gray   { background: var(--color-gray-400); }
.badge--primary.badge--orange { background: var(--color-warning-300); }
.badge--primary.badge--green  { background: var(--color-positive-400); }
.badge--primary.badge--blue   { background: var(--color-information-400); }
.badge--primary.badge--red    { background: var(--color-negative-400); }
.badge--primary.badge--purple { background: var(--color-loot-epic); }
.badge--primary.badge--teal   { background: var(--color-teal-400); }

/* ==== Secondary: светлый фон, foreground в цвет ==== */
.badge--secondary.badge--brand  { background: var(--color-accent-25);      color: var(--color-accent-600); }
.badge--secondary.badge--gray   { background: var(--color-gray-25);        color: var(--color-gray-500); }
.badge--secondary.badge--orange { background: var(--color-warning-25);     color: var(--color-warning-400); }
.badge--secondary.badge--green  { background: var(--color-positive-50);    color: var(--color-positive-500); }
.badge--secondary.badge--blue   { background: var(--color-information-25);  color: var(--color-information-500); }
.badge--secondary.badge--red    { background: var(--color-negative-50);    color: var(--color-negative-500); }
.badge--secondary.badge--purple { background: var(--color-purple-25);      color: var(--color-loot-epic); }
.badge--secondary.badge--teal   { background: var(--color-teal-25);        color: var(--color-teal-500); }

/* ==== Карточные пресеты =====================================================
   В Figma это тот же мастер Badge, но с параметрами, которых нет в его осях
   (белая заливка у таймер-бейджа, промежуточный между sm и md паддинг у
   ценника). Жили локально в product-card; понадобились второму блоку
   (product-card-banner) → по правилу CLAUDE.md «повышение локального элемента»
   вынесены сюда, дублей в блоках не осталось.

   Оба пресета самостоятельны: --timer идёт БЕЗ badge--primary/--secondary,
   --sale — поверх любого цвета (в макете green primary), но БЕЗ badge--sm/md/lg. */
.badge--timer { background: var(--color-gray-0); color: var(--color-gray-900); }
.badge--sale  { padding: var(--spacing-4) var(--spacing-6); }