/* ════════════════════════════════════════════════════════════════════════
   DS Badge primitive (DS sub-step 2 — primitive 9)
   Refines the .badge system IN PLACE (class names unchanged → app-wide
   upgrade, matching Button/Card/Input/Select precedent). Consumes
   tokens.css. No JS.

   Coverage (DS v1.0 - palette-only, class names preserved):
     11 domain variants kept as class names but re-colored onto the system
       palette (overdue/lost=error, due_today=warning, closed=success,
       qualified/viewing/offer=info, under_contract=cognac, the rest=neutral).
       No off-palette hues remain.
     6 semantic variants (.badge--success / --warning / --error / --info /
       --cognac / --neutral) for new code.

   Sizes:    .badge--sm (9px) · md default (11px) · .badge--lg (13px)
   Modifiers:
     .badge--solid    filled bg + white text (high-attention "NEW", count)
     .badge--count    tight numeric pill (notification counts)
     .badge--dot      ::before colored dot prefix (status display)
   ════════════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);          /* 11px = current */
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
  line-height: 1.4;
}

/* ── Sizes ──────────────────────────────────────────────── */
.badge--sm { padding: 1px 6px; font-size: 9px; }
.badge--lg { padding: 4px 12px; font-size: var(--text-base); }

/* ── Status palette (DS v1.0) ───────────────────────────────
   Collapsed to the system palette - no off-palette hues. The domain
   class names are PRESERVED so every existing call-site keeps working;
   only the colors change. Pipeline stages read neutral by default; deal
   progression reads info; milestones carry a single semantic color
   (under contract = cognac, closed = success, lost = error). Heat is
   rendered cognac-mono elsewhere (ds-lead-row / kanban), never here. */
.badge--error,   .badge--danger, .badge-overdue, .badge-lost
                       { background: var(--error-bg);   color: var(--error); }
.badge--warning, .badge-due_today, .badge--orange
                       { background: var(--warning-bg); color: var(--warning); }
.badge--success, .badge-closed
                       { background: var(--success-bg); color: var(--success); }
.badge--info,    .badge-qualified, .badge-viewing, .badge-offer
                       { background: var(--info-bg);    color: var(--info); }
.badge--cognac,  .badge--accent, .badge-under_contract
                       { background: var(--cf-accent-subtle); color: var(--accent); }
.badge--neutral, .badge-upcoming, .badge-none, .badge-new, .badge-contacted
                       { background: var(--gray-100);   color: var(--gray-600); }

/* ── Solid modifier — filled bg + on-accent text ────────── */
.badge--solid.badge--success  { background: var(--success);   color: var(--cf-on-accent); }
.badge--solid.badge--warning  { background: var(--warning);   color: var(--cf-on-accent); }
.badge--solid.badge--error    { background: var(--error);     color: var(--cf-on-accent); }
.badge--solid.badge--info     { background: var(--info);      color: var(--cf-on-accent); }
.badge--solid.badge--cognac   { background: var(--accent);    color: var(--cf-on-accent); }
.badge--solid.badge--neutral  { background: var(--gray-700);  color: var(--cf-on-accent); }

/* ── Count modifier — tight numeric pill ────────────────── */
.badge--count {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-full);
}

/* ── Dot modifier — ::before colored dot prefix ─────────── */
.badge--dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}