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

   Structure (consumer composes):
     .empty-state            wrapper (centered, padded)
       .empty-state-icon     48×48 SVG slot (compact: 32×32), low-opacity
       .empty-state-title    14px (--text-md) / 600 / gray-700 (snapped in MB8)
       .empty-state-body     13px muted, max-width 320, centered
       .empty-state-action   margin-top spacing for a .btn child

   Sizes:
     default                 full-card empty (py-13)
     .empty-state--compact   inline narrow (py-5), smaller icon, no max-width
                              on body — for "No leads match filters" inline
                              messaging.

   A11y: visual primitive only. Consumer adds role="status" / aria-live as
   appropriate per use case.
   ════════════════════════════════════════════════════════════════════════ */

.empty-state {
  text-align: center;
  padding: 52px var(--sp-6);
  color: var(--muted);
}

.empty-state-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--sp-4);
  opacity: .25;
  display: block;
}

.empty-state-title {
  font-size: var(--text-md);      /* snapped 15 → 14 in MB8 (closes primitive-build deferral) */
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
}

.empty-state-body {
  font-size: var(--text-base);
  color: var(--muted);
  line-height: 1.6;
  max-width: 320px;
  margin: 0 auto;
}

.empty-state-action {
  margin-top: var(--sp-5);
}

/* ── Compact variant — inline narrow empty messaging ────── */
.empty-state--compact {
  padding: var(--sp-5) var(--sp-4);
}
.empty-state--compact .empty-state-icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--sp-2);
}
.empty-state--compact .empty-state-title {
  font-size: var(--text-md);
  margin-bottom: 4px;
}
.empty-state--compact .empty-state-body {
  font-size: var(--text-sm);
  max-width: none;
}
.empty-state--compact .empty-state-action {
  margin-top: var(--sp-3);
}