/* ============================================================
   Component · Badge / Pill
   Variants: neutral, action, accent, success, warning, danger,
             skill-listening|reading|writing|speaking,
             mode-manual|randomized|adaptive
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gio-space-1);
  height: 22px;
  padding: 0 var(--gio-space-2);
  border-radius: var(--gio-radius-pill);
  font-size: var(--gio-text-xs);
  font-weight: var(--gio-w-semibold);
  letter-spacing: var(--gio-tracking-default);
  white-space: nowrap;
  background: var(--gio-color-bg-subtle);
  color: var(--gio-color-text-strong);
  border: 1px solid var(--gio-color-border);
}
.badge--lg { height: 26px; padding: 0 var(--gio-space-3); font-size: var(--gio-text-sm); }
.badge--solid {
  background: var(--gio-color-action);
  color: var(--gio-color-text-on-action);
  border-color: transparent;
}
.badge--action  { background: var(--gio-color-action-soft); color: var(--gio-color-action); border-color: transparent; }
.badge--accent  { background: var(--gio-color-accent-soft); color: var(--gio-color-accent-strong); border-color: transparent; }
.badge--success { background: var(--gio-color-success-soft); color: var(--gio-color-success); border-color: transparent; }
.badge--warning { background: var(--gio-color-warning-soft); color: var(--gio-color-warning); border-color: transparent; }
.badge--danger  { background: var(--gio-color-danger-soft); color: var(--gio-color-danger); border-color: transparent; }

.badge--skill-listening { background: rgba(139,92,246,0.12); color: var(--gio-color-skill-listening); border-color: transparent; }
.badge--skill-reading   { background: rgba(249,115,22,0.12); color: var(--gio-color-skill-reading); border-color: transparent; }
.badge--skill-writing   { background: rgba(37,99,235,0.12); color: var(--gio-color-skill-writing); border-color: transparent; }
.badge--skill-speaking  { background: rgba(20,184,166,0.12); color: var(--gio-color-skill-speaking); border-color: transparent; }

.badge--mode-manual     { background: var(--gio-color-bg-subtle); color: var(--gio-color-text-strong); }
.badge--mode-randomized { background: var(--gio-color-action-soft); color: var(--gio-color-action); border-color: transparent; }
.badge--mode-adaptive   { background: var(--gio-color-accent-soft); color: var(--gio-color-accent-strong); border-color: transparent; }

.badge__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}