/* KOS AI Operating Model — Atlas design tokens (verbatim from the webapp's
   src/index.css), shared by every part of the interviewer UI so it matches the
   client deliverable's design language. Light theme; indigo → violet → sky. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Playfair+Display:wght@600;700;800&display=swap');

:root {
  /* Atlas palette — light theme, indigo → violet → sky */
  --paper: #fafbff;
  --paper-2: #f3f4ff;
  --paper-3: #f1f5f9;
  --ink: #0b1020;
  --ink-2: #1e293b;
  --ink-3: #334155;
  --mute: #475569;
  --mute-2: #64748b;
  --mute-3: #94a3b8;
  --line: #e2e8f0;
  --line-2: #e6e9f2;
  --line-3: #eef2f7;

  /* primary scale */
  --indigo: #4338ca;
  --indigo-2: #6366f1;
  --violet: #a855f7;
  --violet-2: #7c3aed;
  --sky: #0ea5e9;
  --teal: #0891b2;
  --cyan: #22d3ee;
  --emerald: #16a34a;
  --rose: #dc2626;
  --rose-soft: #fee2e2;
  --gold: #d97706;

  /* the four operating-model dimension accents */
  --dim-org: #4338ca;
  --dim-process: #a855f7;
  --dim-tech: #0ea5e9;
  --dim-enablers: #0891b2;

  /* automation tier colours */
  --tier-auto: #a855f7;
  --tier-assisted: #7c3aed;
  --tier-manual: #94a3b8;

  /* lavender accent scale — the interviewer's signature (soft, airy purple) */
  --lav-50: #f7f5ff;
  --lav-100: #efeafe;
  --lav-200: #ddd6fe;
  --lav-300: #c4b5fd;
  --lav-400: #a78bfa;
  --lav-500: #8b5cf6;
  --lav-600: #7c3aed;
  --peri: #818cf8;        /* periwinkle — the "hearing you" cool tint */

  /* typography */
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* LIGHT lavender "stage" for the voice-agent visualizer pocket */
  --stage-1: #f6f3ff;
  --stage-2: #ece6fb;
  --brand-grad: linear-gradient(135deg, var(--lav-600), var(--lav-400));
}

/* Atlas fine-grid backdrop (from the webapp) */
.grid-backdrop {
  background-image: linear-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
}

@keyframes shimmer { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes meshDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2%, 1%, 0) scale(1.05); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}