/*
 * components/states.css — Empty / loading / success / warning / error states
 * (Session 5: UI Lab).
 *
 * Paired with templates/components/states.html. Token-driven (D5).
 * State blocks teach and encourage (plan §22-§23), never just report.
 */

.state {
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  margin-bottom: var(--space-4);
}

.state--empty {
  border: 1px dashed var(--color-border);
  background: var(--color-surface);
  color: var(--color-fg-muted);
}

.state--empty .state__title { color: var(--color-fg); }

.state__icon { font-size: var(--fs-2xl); color: var(--color-fg-muted); margin-bottom: var(--space-2); }
.state__title { margin: 0 0 var(--space-2); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.state__desc { margin: 0 0 var(--space-4); font-size: var(--fs-md); }

.state--success { background: var(--color-success-bg); color: var(--color-success-fg); border: 1px solid var(--color-success-fg); }
.state--warning { background: var(--color-warn-bg); color: var(--color-warn-fg); border: 1px solid var(--color-warn-fg); }
.state--error { background: var(--color-danger-bg); color: var(--color-danger-fg); border: 1px solid var(--color-danger-fg); }
.state--info { background: var(--color-info-bg); color: var(--color-info-fg); border: 1px solid var(--color-info-fg); }

/* Loading state — spinner icon + info colors */
.state--loading {
  background: var(--color-info-bg);
  color: var(--color-info-fg);
  border: 1px solid var(--color-info-fg);
}

.state--loading .state__icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: state-spin var(--dur-base) linear infinite;
  margin: 0 auto var(--space-2);
}

@keyframes state-spin {
  to { transform: rotate(360deg); }
}

.state--success .state__title,
.state--warning .state__title,
.state--error .state__title,
.state--info .state__title,
.state--loading .state__title { color: inherit; }

/* Skeletons */
.skeleton {
  height: 1rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-skeleton-highlight) 37%, var(--color-surface-2) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.skeleton-row { display: flex; gap: var(--space-3); }
.skeleton-row .skeleton { flex: 1; }

.skeleton-block { display: flex; flex-direction: column; gap: var(--space-2); }

@keyframes skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  .state--loading .state__icon { animation: none; }
}