/* ========================================
   CSS Variables
   ======================================== */
:root {
  /* Primary Colors */
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --secondary: #8b5cf6;
  
  /* Backgrounds */
  --bg: #0f1117;
  --bg-secondary: #1a1d27;
  --card: rgba(26, 29, 39, 0.8);
  --card-border: rgba(45, 49, 72, 0.6);
  --card-hover: rgba(30, 34, 53, 0.9);
  
  --sidebar: #12141e;
  --topbar: rgba(18, 20, 30, 0.95);
  
  /* Text */
  --text: #e2e8f0;
  --text-muted: #718096;
  --text-secondary: #a0aec0;
  
  /* Status Colors */
  --success: #10b981;
  --success-bg: rgba(16, 185, 129, 0.15);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.15);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.15);
  --info: #3b82f6;
  --info-bg: rgba(59, 130, 246, 0.15);
  
  /* Border Radius */
  --border-radius: 12px;
  --border-radius-sm: 8px;
  --border-radius-pill: 20px;
  
  /* Shadows */
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  
  /* Transitions */
  --transition: all 0.2s ease;
  --transition-fast: all 0.15s ease;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
}

/* Light Theme */
[data-theme="light"] {
  --bg: #f5f7fa;
  --bg-secondary: #ffffff;
  --card: rgba(255, 255, 255, 0.9);
  --card-border: rgba(226, 232, 240, 0.8);
  --card-hover: rgba(248, 250, 252, 0.95);
  
  --sidebar: #ffffff;
  --topbar: rgba(255, 255, 255, 0.95);
  
  --text: #1a202c;
  --text-muted: #64748b;
  --text-secondary: #475569;
  
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
}