// ─────────────────────────────────────────────────────────────────────────────
// Component: Badges
// File:      src/scss/components/_badges.scss
//
// Variants:  .badge--open .badge--closed .badge--merged .badge--active
//            .badge--clean .badge--dirty .badge--error
//            .badge--human .badge--agent .badge--verified .badge--deprecated
//            .badge--{status} for CI: success/failure/running/pending/cancelled
// Tokens:    --color-success, --color-danger, --color-purple, --color-warning
//            --domain-agent, --text-secondary
// Usage:     <span class="badge badge--open">open</span>
//
// Notes:     Agent badge uses fuchsia — agents should pop.
//            Human badge is intentionally understated.
// ─────────────────────────────────────────────────────────────────────────────

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
}

// State badges
.badge--open,   .badge-open   { background: var(--color-accent-muted);  color: var(--text-primary);  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.badge--closed, .badge-closed { background: color-mix(in srgb, var(--color-neutral) 15%, transparent); color: var(--text-secondary); border-color: color-mix(in srgb, var(--color-neutral) 30%, transparent); }
.badge--merged, .badge-merged { background: var(--color-purple-bg);  color: var(--text-primary);  border-color: color-mix(in srgb, var(--color-purple) 30%, transparent); }
.badge--active, .badge-active { background: var(--color-success-bg); color: var(--text-primary);  border-color: color-mix(in srgb, var(--color-success) 30%, transparent); }
.badge--clean,  .badge-clean  { background: var(--color-success-bg); color: var(--text-primary); }
.badge--dirty,  .badge-dirty  { background: var(--color-warning-bg); color: var(--text-primary); }
.badge--error,  .badge-error  { background: var(--color-danger-bg);  color: var(--text-primary); }

// CI status badges
.badge--success   { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success);   border-color: color-mix(in srgb, var(--color-success) 25%, transparent); }
.badge--failure   { background: color-mix(in srgb, var(--color-danger) 12%, transparent);  color: var(--color-danger);    border-color: color-mix(in srgb, var(--color-danger) 25%, transparent); }
.badge--running   { background: color-mix(in srgb, var(--color-accent) 12%, transparent);  color: var(--color-accent);    border-color: color-mix(in srgb, var(--color-accent) 25%, transparent); }
.badge--pending   { background: color-mix(in srgb, var(--text-secondary) 10%, transparent); color: var(--text-muted);     border-color: var(--border-subtle); }
.badge--cancelled { background: color-mix(in srgb, var(--text-muted) 10%, transparent);    color: var(--text-muted);     border-color: var(--border-subtle); }
.badge--warning   { background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning);  border-color: color-mix(in srgb, var(--color-warning) 25%, transparent); }

// Identity / provenance badges
.badge--human    { color: var(--text-secondary); border-color: var(--border-default); }
.badge--agent    { background: var(--agent-accent-bg); color: var(--agent-accent); border-color: color-mix(in srgb, var(--agent-accent) 30%, transparent); }
.badge--verified { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 25%, transparent); }
.badge--deprecated { background: color-mix(in srgb, var(--color-orange) 12%, transparent); color: var(--color-orange); border-color: color-mix(in srgb, var(--color-orange) 25%, transparent); }

// MCP tool type badges
.badge--read     { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success);  border-color: color-mix(in srgb, var(--color-success) 20%, transparent); }
.badge--write    { background: color-mix(in srgb, var(--color-accent) 12%, transparent);  color: var(--color-accent);   border-color: color-mix(in srgb, var(--color-accent) 20%, transparent); }
.badge--cli      { background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning);  border-color: color-mix(in srgb, var(--color-warning) 20%, transparent); }
.badge--elicit   { background: color-mix(in srgb, var(--color-purple) 12%, transparent);  color: var(--color-purple);   border-color: color-mix(in srgb, var(--color-purple) 20%, transparent); }
.badge--mist     { background: color-mix(in srgb, var(--domain-mist) 12%, transparent);   color: var(--domain-mist);    border-color: color-mix(in srgb, var(--domain-mist) 20%, transparent); }
.badge--server   { background: var(--bg-hover); color: var(--text-muted); border-color: var(--border-subtle); }
.badge--resource { background: color-mix(in srgb, var(--color-orange) 12%, transparent);  color: var(--color-orange);   border-color: color-mix(in srgb, var(--color-orange) 20%, transparent); }
.badge--prompt   { background: color-mix(in srgb, var(--color-danger) 12%, transparent);  color: var(--color-danger);   border-color: color-mix(in srgb, var(--color-danger) 20%, transparent); }

// Dimension badges (for MIDI/multi-domain views)
.badge-dim-harmonic   { background: var(--dim-harmonic-muted);   color: var(--text-primary); }
.badge-dim-rhythmic   { background: var(--dim-rhythmic-muted);   color: var(--text-primary); }
.badge-dim-melodic    { background: var(--dim-melodic-muted);    color: var(--text-primary); }
.badge-dim-structural { background: var(--dim-structural-muted); color: var(--text-primary); }
.badge-dim-dynamic    { background: var(--dim-dynamic-muted);    color: var(--text-primary); }