/* Surve.AI mockup design tokens — layered on top of Tailwind via CDN */

:root {
  --brand: #6366f1;        /* indigo-500 — primary */
  --brand-dark: #4338ca;   /* indigo-700 */
  --brand-light: #eef2ff;  /* indigo-50 */
  --ai-accent: #06b6d4;    /* cyan-500 — "AI generated" highlight */
  --ai-accent-light: #ecfeff;
  --positive: #10b981;     /* emerald-500 — positive sentiment / success */
  --neutral-tone: #f59e0b; /* amber-500 — neutral sentiment / warning */
  --negative: #ef4444;     /* red-500 — negative sentiment / error */
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
}

/* Soft card shadow used across all surfaces — keep identical everywhere */
.card-shadow {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -8px rgba(15, 23, 42, 0.10);
}

/* AI badge — used to mark anything machine-generated (questions, themes, suggestions) */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ai-accent);
  background: var(--ai-accent-light);
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: 9999px;
  padding: 0.15rem 0.55rem;
}

/* Sentiment dots */
.dot-positive { background: var(--positive); }
.dot-neutral  { background: var(--neutral-tone); }
.dot-negative { background: var(--negative); }

/* Subtle animated pulse for "live" / "analyzing" indicators */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.35); }
  70%  { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
.live-dot {
  animation: pulse-ring 2s infinite;
}

/* Skeleton shimmer for loading states */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 37%, #e2e8f0 63%);
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite;
}

/* Smooth, restrained transitions on interactive elements */
a, button, .transition-base {
  transition: all 0.15s ease;
}

/* Focus ring consistent with brand */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Scrollbar polish (webkit) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }