/* ==========================================================================
   tokens.css — design tokens (CSS custom properties)
   Single source of truth for colors, spacing, typography.
   ========================================================================== */

:root {
  /* Backgrounds — deep midnight blue */
  --bg: #0a0e1a;
  --surface: #131829;
  --surface2: #1c2340;
  --surface3: #252d4a;
  --border: rgba(255, 255, 255, 0.08);
  --border-m: rgba(255, 255, 255, 0.12);

  /* Primary accent — vibrant purple */
  --accent: #8b5cf6;
  --accent-dim: rgba(139, 92, 246, 0.15);
  --accent2: #a78bfa;
  --accent2-dim: rgba(167, 139, 250, 0.15);
  --accent-glow: rgba(139, 92, 246, 0.25);

  /* Secondary accents */
  --cyan: #06b6d4;
  --cyan-dim: rgba(6, 182, 212, 0.15);
  --cyan-glow: rgba(6, 182, 212, 0.25);
  --green: #10b981;
  --green-dim: rgba(16, 185, 129, 0.15);
  --green-glow: rgba(16, 185, 129, 0.25);
  --amber: #f59e0b;
  --amber-dim: rgba(245, 158, 11, 0.15);
  --amber-glow: rgba(245, 158, 11, 0.25);
  --red: #ef4444;
  --red-dim: rgba(239, 68, 68, 0.15);
  --red-glow: rgba(239, 68, 68, 0.25);
  --pink: #ec4899;
  --pink-dim: rgba(236, 72, 153, 0.15);
  --pink-glow: rgba(236, 72, 153, 0.25);

  /* Text */
  --text: #f8fafc;
  --text-m: #94a3b8;
  --text-d: #64748b;

  /* Engine brand colors */
  --engine-chatgpt: #10a37f;
  --engine-claude: #d97757;
  --engine-gemini: #4285f4;
  --engine-perplexity: #20b2d6;
  --engine-google-ai: #ff6b35;
  --engine-tavily: #20b2db;

  /* Typography */
  --fh: "Matter", "Inter", sans-serif;
  --fb: "Matter", "Inter", sans-serif;
  --fm: "JetBrains Mono", monospace;

  /* Radius */
  --r: 12px;
  --rl: 14px;

  /* Sidebar width */
  --sw: 240px;
}