/* ===== CSS Variables for Light/Dark Themes ===== */

:root {
  /* Light Theme (default) */
  --bg-primary: #f8f9fa;
  --bg-secondary: #ffffff;
  --bg-gradient-start: #e8f4f8;
  --bg-gradient-end: #d1ecf1;
  
  --text-primary: #1a1a2e;
  --text-secondary: #4a4a6a;
  --text-muted: #6c757d;
  
  --accent-primary: #4361ee;
  --accent-secondary: #3a0ca3;
  --accent-success: #06d6a0;
  --accent-warning: #ffd166;
  --accent-danger: #ef476f;
  --accent-info: #118ab2;
  
  --nav-bg: #ffffff;
  --nav-text: #1a1a2e;
  --nav-shadow: rgba(67, 97, 238, 0.15);
  
  --card-bg: #ffffff;
  --card-shadow: rgba(67, 97, 238, 0.15);
  --card-border: rgba(67, 97, 238, 0.1);
  
  --button-primary: #4361ee;
  --button-primary-hover: #3a56d4;
  --button-dark: #1a1a2e;
  --button-dark-hover: #2d2d4e;
  
  --input-bg: #ffffff;
  --input-border: #dee2e6;
  --input-focus: #4361ee;
  
  --modal-overlay: rgba(0, 0, 0, 0.6);
  --modal-bg: #ffffff;
  
  --shadow-sm: 0 2px 8px rgba(67, 97, 238, 0.08);
  --shadow-md: 0 5px 15px rgba(67, 97, 238, 0.15);
  --shadow-lg: 0 10px 30px rgba(67, 97, 238, 0.2);
  
  --border-radius: 12px;
  --border-radius-sm: 8px;
  --border-radius-lg: 16px;
  
  --transition-speed: 0.3s;
}

[data-theme="dark"] {
  /* Dark Theme */
  --bg-primary: #0f0f1a;
  --bg-secondary: #1a1a2e;
  --bg-gradient-start: #16213e;
  --bg-gradient-end: #0f3460;
  
  --text-primary: #e8e8f0;
  --text-secondary: #b8b8d0;
  --text-muted: #8888a0;
  
  --accent-primary: #4cc9f0;
  --accent-secondary: #7209b7;
  --accent-success: #06d6a0;
  --accent-warning: #ffd166;
  --accent-danger: #ef476f;
  --accent-info: #118ab2;
  
  --nav-bg: #1a1a2e;
  --nav-text: #e8e8f0;
  --nav-shadow: rgba(76, 201, 240, 0.15);
  
  --card-bg: #1a1a2e;
  --card-shadow: rgba(76, 201, 240, 0.15);
  --card-border: rgba(76, 201, 240, 0.1);
  
  --button-primary: #4cc9f0;
  --button-primary-hover: #3bb8e0;
  --button-dark: #16213e;
  --button-dark-hover: #1a2a4a;
  
  --input-bg: #1a1a2e;
  --input-border: #2d2d4e;
  --input-focus: #4cc9f0;
  
  --modal-overlay: rgba(0, 0, 0, 0.8);
  --modal-bg: #1a1a2e;
  
  --shadow-sm: 0 2px 8px rgba(76, 201, 240, 0.08);
  --shadow-md: 0 5px 15px rgba(76, 201, 240, 0.15);
  --shadow-lg: 0 10px 30px rgba(76, 201, 240, 0.2);
}