/**
 * FlowPay design system — shared tokens, status colors, skeletons, animations.
 * Load after flowpay-brand.css, before app.css / operator.css.
 */
:root {
  --fp-font: 'Inter', system-ui, -apple-system, sans-serif;
  --fp-text-base: 14px;
  --fp-text-meta: 12px;

  --fp-status-waiting: #3b82f6;
  --fp-status-requisite: #a855f7;
  --fp-status-pay: #f97316;
  --fp-status-check: #eab308;
  --fp-status-success: #22c55e;
  --fp-status-fail: #ef4444;

  --fp-skeleton-base: rgba(255, 255, 255, 0.06);
  --fp-skeleton-shine: rgba(255, 255, 255, 0.12);
}

html {
  font-family: var(--fp-font);
  font-size: var(--fp-text-base);
}

.muted-sm, .hint, .sub, .label {
  font-size: var(--fp-text-meta);
}

/* Status pills — unified palette */
.status-pill.waiting,
.status-pill.wait,
.badge.status-waiting { background: color-mix(in srgb, var(--fp-status-waiting) 18%, transparent); color: var(--fp-status-waiting); }
.status-pill.rek,
.status-pill.requisite,
.badge.status-requisite { background: color-mix(in srgb, var(--fp-status-requisite) 18%, transparent); color: var(--fp-status-requisite); }
.status-pill.pay,
.badge.status-pay { background: color-mix(in srgb, var(--fp-status-pay) 18%, transparent); color: var(--fp-status-pay); }
.status-pill.check,
.badge.status-check { background: color-mix(in srgb, var(--fp-status-check) 22%, transparent); color: var(--fp-status-check); }
.status-pill.success,
.badge.status-success { background: color-mix(in srgb, var(--fp-status-success) 18%, transparent); color: var(--fp-status-success); }
.status-pill.fail,
.badge.status-fail { background: color-mix(in srgb, var(--fp-status-fail) 18%, transparent); color: var(--fp-status-fail); }

/* Health / alert cards */
.health-card { border-radius: 10px; padding: .85rem 1rem; }
.health-card.ok { border: 1px solid color-mix(in srgb, var(--fp-status-success) 40%, transparent); }
.health-card.warn { border: 1px solid color-mix(in srgb, var(--fp-status-check) 50%, transparent); }
.health-card.danger { border: 1px solid color-mix(in srgb, var(--fp-status-fail) 45%, transparent); }

/* Skeleton loading */
@keyframes fp-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton,
.skeleton-line,
.skeleton-card {
  background: linear-gradient(90deg, var(--fp-skeleton-base) 25%, var(--fp-skeleton-shine) 50%, var(--fp-skeleton-base) 75%);
  background-size: 200% 100%;
  animation: fp-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}

.skeleton-line { height: 14px; margin-bottom: .5rem; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }
.skeleton-card { height: 72px; }

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem;
}

/* Tab / panel transitions */
.tab:not(.hidden) {
  animation: fp-fade-in .18s ease-out;
}

@keyframes fp-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Critical timer pulse only */
.timer.urgent,
.timer[data-urgent="1"] {
  animation: fp-pulse-urgent 1.2s ease-in-out infinite;
}

@keyframes fp-pulse-urgent {
  0%, 100% { opacity: 1; }
  50% { opacity: .65; }
}

/* Shared empty state */
.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted, #8b95a8);
  font-size: var(--fp-text-meta);
}

/* Stat card baseline */
.stat-card .label {
  font-size: var(--fp-text-meta);
  text-transform: none;
  letter-spacing: 0;
}

:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--fp-cyan) 70%, white);
  outline-offset: 2px;
}

.table-wrap thead th,
.history-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface, #111827);
}

@media (pointer: coarse) {
  :where(button, .btn, input, select, summary) { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}