:root{ 
  --primary: #667eea; 
  --primary-2: #764ba2; 

  /* Light Theme Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #edf2f7;
  --bg-quaternary: #f1f5f9;
  --text-primary: #2d3748;
  --text-secondary: #4a5568;
  --text-tertiary: #6b7280;
  --text-quaternary: #9ca3af;
  --border-primary: #e2e8f0;
  --border-secondary: #cbd5e0;
  --shadow: rgba(0,0,0,0.1);
  --shadow-lg: rgba(0,0,0,0.15);
  --overlay: rgba(0,0,0,0.6);
  --sidebar-bg: linear-gradient(180deg,#2d3748 0%,#1a202c 100%);
  --sidebar-text: #ffffff;
  --card-bg: #ffffff;
  
  /* Primary Theme Variations - Generated dynamically by JavaScript */
  --primary-light: #8a9af3;
  --primary-lighter: #7589ee;
  --primary-dark: #4d5fb6;
  --primary-alpha-10: rgba(102, 126, 234, 0.1);
  --primary-alpha-20: rgba(102, 126, 234, 0.2);
  
  /* Button and Interactive Elements */
  --btn-primary: linear-gradient(135deg, var(--primary), var(--primary-2));
  --btn-secondary: #f8fafc;
  --btn-secondary-text: #2d3748;
  --btn-success: linear-gradient(135deg, #48bb78, #38a169);
  --btn-danger: linear-gradient(135deg, #f56565, #e53e3e);
  --btn-warning: linear-gradient(135deg, #ed8936, #dd6b20);
  
  /* Status Colors */
  --success: #48bb78;
  --success-bg: #c6f6d5;
  --warning: #ed8936;
  --warning-bg: #faf089;
  --danger: #f56565;
  --danger-bg: #fed7d7;
  --info: #4299e1;
  --info-bg: #bee3f8;
  
  /* Accent Colors */
  --accent: var(--primary);
  --accent-dark: var(--primary-2);
  --accent-text: #ffffff;
  
  /* Logo and Navigation */
  --logo-color: var(--primary);
  --nav-active-bg: linear-gradient(135deg, var(--primary), var(--primary-2));
  --nav-active-text: #ffffff;
  --nav-hover-bg: var(--primary-alpha-10);
  
  /* Modal and Overlay */
  --modal-bg: #ffffff;
  --modal-overlay: rgba(0,0,0,0.6);
  
  /* Dropdown */
  --dropdown-bg: #ffffff;
  --dropdown-border: #e2e8f0;
  --dropdown-hover: #f8fafc;
  
  /* Cards and Containers */
  --card-hover-border: var(--primary);
  --tile-accent: var(--primary);
  --tile-bg: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  
  /* Batch Controls */
  --batch-bg: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  --batch-text: #ffffff;
  --batch-btn-secondary: rgba(255,255,255,0.2);
  --batch-btn-secondary-border: rgba(255,255,255,0.3);
  --batch-btn-secondary-hover: rgba(255,255,255,0.3);
  --batch-btn-primary: rgba(255,255,255,0.9);
  --batch-btn-primary-text: #4a5568;
  --batch-btn-primary-hover: #ffffff;
}