/* ============================================
   Design Tokens — Light & Dark themes
   ============================================ */

:root {
  /* ---- Brand colors ---- */
  --primary:       #6C3CE1;
  --primary-light: #A855F7;
  --secondary:     #06B6D4;
  --accent-pink:   #F472B6;
  --accent-orange: #FB923C;

  /* ---- Hero gradient ---- */
  --hero-gradient: linear-gradient(135deg, #6C3CE1, #06B6D4, #F472B6, #6C3CE1);

  /* ---- Light-mode surfaces ---- */
  --bg:            #FAFAFA;
  --bg-alt:        #F3F0FF;
  --surface:       #FFFFFF;
  --surface-hover: #F5F3FF;
  --border:        #E5E7EB;

  /* ---- Light-mode text ---- */
  --text:          #1F2937;
  --text-muted:    #6B7280;
  --text-on-gradient: #FFFFFF;

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 20px rgba(108,60,225,0.25);

  /* ---- Radii ---- */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-full: 9999px;

  /* ---- Spacing scale ---- */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ---- Transition ---- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.4s ease;

  /* ---- Typography ---- */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;
  --font-display: 'Inter', system-ui, sans-serif;
}

/* ---- Dark mode ---- */
[data-theme="dark"] {
  --bg:            #0F0D1A;
  --bg-alt:        #1E1B2E;
  --surface:       #262040;
  --surface-hover: #322A54;
  --border:        #3D3560;

  --text:          #F1F0F7;
  --text-muted:    #A09CB5;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.30);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.40);
  --shadow-glow: 0 0 20px rgba(168,85,247,0.35);
}