/*============= THEME VARIABLES ===============*/

/* Light theme (default) */
:root {
  /* Background colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --bg-card: #ffffff;
  --bg-header: #f8f8f8;
  --bg-footer: #1a1a1a;
  
  /* Text colors */
  --text-primary: #1a1a1a;
  --text-secondary: #6c757d;
  --text-muted: #8e9093;
  --text-inverse: #ffffff;
  
  /* Border colors */
  --border-primary: #dee2e6;
  --border-secondary: #e9ecef;
  --border-accent: #1a1a1a;
  
  /* Accent colors */
  --accent-primary: #1e2f85;
  --accent-secondary: #fb8500;
  --accent-success: #28a745;
  --accent-warning: #ffc107;
  --accent-danger: #dc3545;
  --accent-info: #17a2b8;
  
  /* Shadow */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  
  /* Input colors */
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --input-focus: #80bdff;
  
  /* Button colors */
  --btn-primary-bg: #1e2f85;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #6c757d;
  --btn-secondary-text: #ffffff;
  
  /* Link colors */
  --link-color: #1e2f85;
  --link-hover: #0d1a5c;
  
  /* Code colors */
  --code-bg: #f8f9fa;
  --code-text: #e83e8c;
  
  /* Table colors */
  --table-bg: #ffffff;
  --table-border: #dee2e6;
  --table-stripe: #f8f9fa;
}

/* Dark theme */
[data-theme="dark"] {
  /* Background colors */
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #404040;
  --bg-card: #2d2d2d;
  --bg-header: #1a1a1a;
  --bg-footer: #0d0d0d;
  
  /* Text colors */
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --text-muted: #8e9093;
  --text-inverse: #1a1a1a;
  
  /* Border colors */
  --border-primary: #404040;
  --border-secondary: #2d2d2d;
  --border-accent: #ffffff;
  
  /* Accent colors */
  --accent-primary: #4a6cf7;
  --accent-secondary: #ff9500;
  --accent-success: #28a745;
  --accent-warning: #ffc107;
  --accent-danger: #dc3545;
  --accent-info: #17a2b8;
  
  /* Shadow */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
  
  /* Input colors */
  --input-bg: #2d2d2d;
  --input-border: #404040;
  --input-focus: #4a6cf7;
  
  /* Button colors */
  --btn-primary-bg: #4a6cf7;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #6c757d;
  --btn-secondary-text: #ffffff;
  
  /* Link colors */
  --link-color: #4a6cf7;
  --link-hover: #6a8cff;
  
  /* Code colors */
  --code-bg: #404040;
  --code-text: #ff6b9d;
  
  /* Table colors */
  --table-bg: #2d2d2d;
  --table-border: #404040;
  --table-stripe: #1a1a1a;
}

/* Auto theme based on system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Background colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #404040;
    --bg-card: #2d2d2d;
    --bg-header: #1a1a1a;
    --bg-footer: #0d0d0d;
    
    /* Text colors */
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --text-muted: #8e9093;
    --text-inverse: #1a1a1a;
    
    /* Border colors */
    --border-primary: #404040;
    --border-secondary: #2d2d2d;
    --border-accent: #ffffff;
    
    /* Accent colors */
    --accent-primary: #4a6cf7;
    --accent-secondary: #ff9500;
    --accent-success: #28a745;
    --accent-warning: #ffc107;
    --accent-danger: #dc3545;
    --accent-info: #17a2b8;
    
    /* Shadow */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    
    /* Input colors */
    --input-bg: #2d2d2d;
    --input-border: #404040;
    --input-focus: #4a6cf7;
    
    /* Button colors */
    --btn-primary-bg: #4a6cf7;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #6c757d;
    --btn-secondary-text: #ffffff;
    
    /* Link colors */
    --link-color: #4a6cf7;
    --link-hover: #6a8cff;
    
    /* Code colors */
    --code-bg: #404040;
    --code-text: #ff6b9d;
    
    /* Table colors */
    --table-bg: #2d2d2d;
    --table-border: #404040;
    --table-stripe: #1a1a1a;
  }
}

/*============= THEME VARIABLES END ===============*/