/* ============================================
   GrapoliX Badges Component
   DESIGN.md — UI Components — BADGE / TAG
   ============================================ */

/* ── Base Badge ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* ── Color Variants ── */
.badge--gold {
  color: var(--gold);
  background: rgba(232, 213, 163, 0.08);
  border-color: rgba(232, 213, 163, 0.25);
}

.badge--garnet {
  color: #e05c6a;
  background: rgba(110, 20, 35, 0.15);
  border-color: rgba(110, 20, 35, 0.4);
}

.badge--silver {
  color: var(--silver);
  background: rgba(192, 192, 192, 0.08);
  border-color: rgba(192, 192, 192, 0.2);
}

.badge--muted {
  color: var(--muted);
  background: transparent;
  border-color: var(--border);
}

.badge--success {
  color: #4caf7d;
  background: rgba(45, 106, 79, 0.12);
  border-color: rgba(45, 106, 79, 0.3);
}

/* ── Size Variants ── */
.badge--sm {
  padding: 3px 8px;
  font-size: 8px;
  letter-spacing: 1px;
}

.badge--lg {
  padding: 7px 16px;
  font-size: 10px;
  letter-spacing: 3px;
}

/* ── Dot indicator ── */
.badge__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}