/* ==========================================================================
   Stylish English — Design Tokens (css/tokens.css)
   Single source of truth for colors, type, radii and motion. Every new
   component stylesheet (voice-ui.css, curriculum.css, ...) reads from these
   --vf-* variables; change the look here and it changes everywhere.
   Load order: app.min.css -> tokens.css -> voice-ui.css -> curriculum.css
   ========================================================================== */
:root {
  --vf-bg: #0b0b14;
  --vf-surface: #12121e;
  --vf-surface-2: #1a1a2b;
  --vf-surface-3: #232338;
  --vf-border: rgba(255, 255, 255, 0.08);
  --vf-border-strong: rgba(167, 139, 250, 0.35);

  --vf-text: #f4f2ff;
  --vf-text-2: #b9b4d6;
  --vf-text-3: #7d789c;

  --vf-accent: #8b5cf6;          /* violet — brand, Alexa speaking */
  --vf-accent-2: #a78bfa;
  --vf-accent-glow: rgba(139, 92, 246, 0.45);
  --vf-listen: #22d3ee;          /* cyan — student speaking */
  --vf-listen-glow: rgba(34, 211, 238, 0.4);
  --vf-meaning: #fbbf24;         /* amber — Arabic meaning */
  --vf-success: #34d399;
  --vf-warn: #f59e0b;
  --vf-danger: #f87171;
  --vf-pink: #f472b6;

  --vf-font-ar: "Tajawal", "Cairo", system-ui, sans-serif;
  --vf-font-head: "Cairo", "Tajawal", system-ui, sans-serif;
  --vf-font-en: "Sora", "Geist", system-ui, sans-serif;
  --vf-lh: 1.6;

  --vf-radius-sm: 10px;
  --vf-radius: 16px;
  --vf-radius-lg: 22px;

  --vf-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vf-fast: 160ms;
  --vf-med: 280ms;
}