/* ZevStore — Master Stylesheet (Phase 02 UI/UX System) */
@import "./tokens.css";
@import "./components.css";
@import "./layout.css";

:root {
  --zs-purple: #7C3AED;
}

/* Legacy foundation compatibility classes (Phase 01 checks) */
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--zs-border-subtle);
  border-radius: var(--zs-radius-full);
  background: var(--zs-surface-2);
  color: var(--zs-text-secondary);
  font-size: var(--zs-fs-xs);
  font-weight: 600;
  transition: border-color var(--zs-dur-base) ease;
}

.dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #fbbf24;
  animation: zs-pulse 1.4s ease-in-out infinite;
}

.status[data-state="ok"] {
  border-color: rgba(16, 185, 129, 0.4);
}

.status[data-state="ok"] .dot {
  background: var(--zs-success);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
  animation: none;
}

.status[data-state="error"] {
  border-color: rgba(244, 63, 94, 0.4);
}

.status[data-state="error"] .dot {
  background: var(--zs-error);
  animation: none;
}

@keyframes zs-pulse {
  50% { opacity: 0.35; }
}