:root {
  /* Brand & Theme Colors */
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-light: #e0e7ff;
  
  --secondary: #06b6d4;
  --secondary-hover: #0891b2;
  
  --accent: #a855f7;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  
  /* Neutral Palette (Slate) */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #0b1220;

  /* UI Element Bindings */
  --bg-main: var(--slate-100);
  --bg-surface: rgba(255, 255, 255, 0.92);
  --text-main: var(--slate-900);
  --text-muted: var(--slate-500);
  --text-light: var(--slate-400);
  --border-color: var(--slate-200);
  
  /* Gradients & Effects */
  --bg-gradient: radial-gradient(circle at 20% 20%, var(--primary), transparent 40%),
                 radial-gradient(circle at 80% 30%, var(--secondary), transparent 40%),
                 radial-gradient(circle at 50% 80%, var(--accent), transparent 40%),
                 linear-gradient(135deg, var(--slate-950), var(--slate-900));
                 
  --btn-gradient: linear-gradient(135deg, var(--primary), var(--secondary));
  --success-gradient: linear-gradient(135deg, var(--success), var(--secondary));
  
  --card-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  --card-border: 1px solid rgba(255, 255, 255, 0.25);
  --blur-effect: blur(18px);
  
  /* Typography */
  --font-main: 'Inter', sans-serif;
}