/* ============================================================
 * Empty State — "nothing here / no results / load failed"
 * Heilsugátt DS · net-new · CSS-only
 *
 * Anatomy: .empty-state > .empty-state-icon + .empty-state-title
 *          + .empty-state-text + .empty-state-actions
 * Scenario is set by content. The error scenario re-tints the icon
 * chip via scoped custom properties (no new :root tokens).
 * ============================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 48px 24px;
  font-family: var(--font-primary);
}
.empty-state--start { align-items: flex-start; text-align: left; padding: 24px; }

.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: var(--radius-xl);
  background: var(--empty-icon-bg, var(--bg-brand-primary-alt));
  color: var(--empty-icon-fg, var(--icon-fg-brand));
  font-size: 22px;
}
/* Error scenario — scoped override only */
.empty-state--error .empty-state-icon {
  --empty-icon-bg: var(--bg-error-primary);
  --empty-icon-fg: var(--icon-fg-error);
}

.empty-state-title {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.empty-state-text {
  margin: 0;
  max-width: 44ch;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--text-tertiary);
  text-wrap: pretty;
}
.empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.empty-state--start .empty-state-actions { justify-content: flex-start; }