/* ============================================================================
   tokens.css — design tokens for the CNN MANIFESTATION interface.
   Same family as the GPT-2 demo; CNN accent shifts toward violet/amber
   to signal class-conditional (rather than positional) reasoning.
   ============================================================================ */
:root {
  /* Ink & paper */
  --ink: #0a0e1a;  --ink-soft: #1e293b;
  --muted: #64748b; --muted-soft: #94a3b8;
  --paper: #ffffff; --surface: #f8fafc; --surface-2: #f1f5f9;
  --border: #e2e8f0; --border-2: #cbd5e1;

  /* Brand — indigo / violet (CNN flavour) */
  --indigo: #4f46e5; --indigo-d: #3730a3; --indigo-l: #eef2ff;
  --violet: #7c3aed; --violet-d: #5b21b6; --violet-l: #f3eaff;
  --amber:  #d97706; --amber-l:  #fef3c7;
  --cyan:   #06b6d4; --cyan-d:   #0e7490; --cyan-l:   #ecfeff;

  /* Heat scale (CNN: low → high selectivity) */
  --heat-0: #f1f5f9;
  --heat-1: #ddd6fe;
  --heat-2: #a78bfa;
  --heat-3: #7c3aed;
  --heat-4: #5b21b6;
  --heat-5: #2e1065;

  --good: #059669; --warn: #d97706; --bad: #dc2626;

  /* Typography */
  --font-sans: "Inter","Inter Tight",-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono: "JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px; --fs-16:16px;
  --fs-18:18px; --fs-20:20px; --fs-24:24px; --fs-32:32px; --fs-44:44px; --fs-56:56px;

  /* Layout */
  --col-max: 1280px;
  --gap-1:4px; --gap-2:8px; --gap-3:12px; --gap-4:16px; --gap-5:24px;
  --gap-6:32px; --gap-7:48px; --gap-8:64px; --gap-9:96px;

  /* Radii / shadow / motion */
  --r-1:4px; --r-2:8px; --r-3:12px; --r-4:16px; --r-pill:999px;
  --sh-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --sh-2: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --sh-3: 0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);
  --sh-glow: 0 0 0 3px rgba(124,58,237,.18);
  --motion-fast: 140ms cubic-bezier(.4,0,.2,1);
  --motion-base: 240ms cubic-bezier(.4,0,.2,1);
  --motion-slow: 480ms cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}