/**
 * iNKPPL Design System — Badge Component
 * .badge base + variants: --category, --status, --style
 */

/* Base */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  line-height: 1.5;
}

/* E10 (2026-06-18): unified brand-accent category badge — no per-category carnival.
   Single gold pill + black text everywhere a .badge--category renders. */
.badge--category { border: 1px solid transparent; }
.badge--category[data-category] { color: #0A0A0A; background: var(--color-brand-accent); border-color: transparent; }

/* Status variant — 5 states via data-status */
.badge--status { border: 1px solid transparent; }
.badge--status[data-status="active"] { color: var(--color-brand-accent); background: rgba(232, 197, 71, 0.12); border-color: rgba(232, 197, 71, 0.25); }
.badge--status[data-status="upcoming"] { color: var(--color-success); background: rgba(76, 175, 80, 0.12); border-color: rgba(76, 175, 80, 0.25); }
.badge--status[data-status="complete"] { color: var(--color-text-muted); background: rgba(163, 163, 163, 0.08); border-color: rgba(163, 163, 163, 0.2); }
.badge--status[data-status="ended"] { color: var(--color-text-muted); background: rgba(163, 163, 163, 0.08); border-color: rgba(163, 163, 163, 0.2); }
.badge--status[data-status="canceled"] { color: var(--color-error); background: rgba(244, 67, 54, 0.12); border-color: rgba(244, 67, 54, 0.25); }
.badge--status[data-status="planned"] { color: rgb(255, 180, 100); background: rgba(255, 180, 100, 0.1); border-color: rgba(255, 180, 100, 0.25); }

/* Style variant — tattoo styles via data-style.
   Unified neutral chip: was 20 hardcoded per-style hex tints that covered only
   part of the styleMap — unmapped styles (data-style="graphic") fell back to bare
   text. Follows the E10 category precedent: no per-style carnival, tokens only. */
.badge--style {
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: color var(--transition-fast),
              border-color var(--transition-fast),
              background-color var(--transition-fast);
}

.badge--style:hover {
  color: var(--color-text-primary);
  border-color: var(--color-brand-accent);
}