/* ========================================================
   tokens.css — Design tokens (CSS variables + font imports)
   v1.5.4: tách từ style.css. Load đầu tiên trong index.html.
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Color Palette (HSL for modern harmony) */
  --bg-primary: hsl(224, 25%, 8%);
  --bg-secondary: hsl(222, 24%, 12%);
  --bg-surface: hsla(223, 20%, 16%, 0.5);
  --bg-glass-input: hsla(223, 20%, 10%, 0.6);
  
  --primary: hsl(250, 85%, 65%);
  --primary-glow: hsla(250, 85%, 65%, 0.3);
  --primary-light: hsl(250, 95%, 75%);
  
  --secondary: hsl(190, 95%, 50%);
  --secondary-glow: hsla(190, 95%, 50%, 0.25);
  
  --success: hsl(145, 80%, 45%);
  --success-glow: hsla(145, 80%, 45%, 0.2);
  --warning: hsl(35, 95%, 55%);
  --danger: hsl(350, 85%, 55%);
  
  --text-primary: hsl(0, 0%, 96%);
  --text-secondary: hsl(220, 15%, 70%);
  --text-muted: hsl(220, 10%, 50%);
  
  --border-light: hsla(0, 0%, 100%, 0.08);
  --border-glow: hsla(250, 85%, 65%, 0.15);
  --border-cyan: hsla(190, 95%, 50%, 0.2);

  /* AI Glowing Colors */
  --ai-purple: hsl(280, 90%, 65%);
  --ai-purple-glow: hsla(280, 90%, 65%, 0.35);
  --ai-gradient: linear-gradient(135deg, hsl(280, 90%, 65%), hsl(190, 95%, 50%));

  --font-display: 'Outfit', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  --shadow-main: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --shadow-neon-primary: 0 0 15px var(--primary-glow);
  --shadow-neon-secondary: 0 0 15px var(--secondary-glow);
  --shadow-neon-ai: 0 0 20px var(--ai-purple-glow);
}