/* Theme Variables */
:root {
  /* Light Theme Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --bg-accent: #f0f7ff;
  
  --text-primary: #1a1a1a;
  --text-secondary: #4a5568;
  --text-tertiary: #718096;
  --text-muted: #a0aec0;
  
  --accent-primary: #0066cc;
  --accent-secondary: #0052a3;
  --accent-hover: #004080;
  
  --border-color: #e2e8f0;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  --success: #48bb78;
  --warning: #ed8936;
  --error: #f56565;
  --info: #4299e1;
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
}

/* Dark Theme Colors */
[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3a3a3a;
  --bg-accent: #1e2a3a;
  
  --text-primary: #f7fafc;
  --text-secondary: #e2e8f0;
  --text-tertiary: #cbd5e0;
  --text-muted: #a0aec0;
  
  --accent-primary: #4da6ff;
  --accent-secondary: #3d8cdb;
  --accent-hover: #66b3ff;
  
  --border-color: #4a5568;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
  
  --success: #68d391;
  --warning: #f6ad55;
  --error: #fc8181;
  --info: #63b3ed;
}

/* Theme Transition */
* {
  transition: background-color var(--transition-normal),
              border-color var(--transition-normal),
              color var(--transition-normal);
}