/* Badge v2 Component — UI Comprehensive Refactor v2
 * Requires: tokens.css
 *
 * Usage:
 *   <span class="badge badge--success">Active</span>
 *   <span class="badge badge--warning badge--solid">Pending</span>
 *   <span class="badge badge--neutral badge--no-dot">Draft</span>
 *
 * Variants:  --success | --warning | --error | --neutral | --info
 * Modifiers: --solid (full bg fill) | --no-dot (hide status dot)
 */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);           /* 2px 8px */
  border-radius: var(--radius-full);
  font-size: var(--font-2xs);            /* 11px */
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

/* ── Status dot prefix ── */
.badge::before {
  content: "●";
  font-size: 6px;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Semantic variants (subtle background @ 0.12 opacity) ─────────────── */
.badge--success {
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-success-500);
}

.badge--warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-warning-500);
}

.badge--error {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-error-500);
}

.badge--neutral {
  background: var(--surface-hover);
  color: var(--text-secondary);
}

.badge--info {
  background: rgba(6, 182, 212, 0.12);
  color: var(--color-info-500);
}

/* ── Solid modifier (prominent labels — full bg fill) ─────────────────── */
.badge--solid.badge--success {
  background: var(--color-success-500);
  color: var(--text-on-brand);
}

.badge--solid.badge--warning {
  background: var(--color-warning-500);
  color: var(--text-on-brand);
}

.badge--solid.badge--error {
  background: var(--color-error-500);
  color: var(--text-on-brand);
}

.badge--solid.badge--neutral {
  background: var(--text-secondary);
  color: var(--surface-card);
}

.badge--solid.badge--info {
  background: var(--color-info-500);
  color: var(--text-on-brand);
}

/* ── No-dot modifier ── */
.badge--no-dot::before {
  content: none;
}