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

/* Light Theme (Default) */
:root,
[data-theme="light"] {
  /* Background colors */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8FAFC;
  --bg-tertiary: #F1F5F9;
  --bg-card: #FFFFFF;
  --bg-header: #FFFFFF;
  --bg-footer: #0F172A;
  
  /* Text colors */
  --text-primary: #0F172A;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
  --text-inverse: #FFFFFF;
  
  /* Border colors */
  --border-primary: #E2E8F0;
  --border-secondary: #CBD5E1;
  --border-accent: #3B82F6;
  
  /* Accent colors */
  --accent-primary: #3B82F6;
  --accent-secondary: #06B6D4;
  --accent-success: #10B981;
  --accent-warning: #F59E0B;
  --accent-danger: #EF4444;
  --accent-info: #0EA5E9;
  
  /* Shadow */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
  
  /* Input colors */
  --input-bg: #FFFFFF;
  --input-border: #E2E8F0;
  --input-focus: #3B82F6;
  --input-placeholder: #94A3B8;
  
  /* Button colors */
  --btn-primary-bg: #3B82F6;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #2563EB;
  --btn-secondary-bg: #64748B;
  --btn-secondary-text: #FFFFFF;
  --btn-secondary-hover: #475569;
  
  /* Link colors */
  --link-color: #3B82F6;
  --link-hover: #2563EB;
  --link-visited: #7C3AED;
  
  /* Code colors */
  --code-bg: #F1F5F9;
  --code-text: #E11D48;
  --code-border: #E2E8F0;
  
  /* Table colors */
  --table-bg: #FFFFFF;
  --table-border: #E2E8F0;
  --table-stripe: #F8FAFC;
  --table-hover: #F1F5F9;
  
  /* Navbar colors */
  --navbar-bg: #FFFFFF;
  --navbar-text: #0F172A;
  --navbar-border: #E2E8F0;
  --navbar-hover: #F1F5F9;
  
  /* Alert colors */
  --alert-success-bg: rgba(16, 185, 129, 0.1);
  --alert-success-border: #10B981;
  --alert-success-text: #065F46;
  --alert-danger-bg: rgba(239, 68, 68, 0.1);
  --alert-danger-border: #EF4444;
  --alert-danger-text: #991B1B;
  --alert-warning-bg: rgba(245, 158, 11, 0.1);
  --alert-warning-border: #F59E0B;
  --alert-warning-text: #92400E;
  --alert-info-bg: rgba(14, 165, 233, 0.1);
  --alert-info-border: #0EA5E9;
  --alert-info-text: #075985;
  
  /* Badge colors */
  --badge-primary-bg: #3B82F6;
  --badge-primary-text: #FFFFFF;
  --badge-secondary-bg: #64748B;
  --badge-secondary-text: #FFFFFF;
  
  /* Scrollbar colors */
  --scrollbar-track: #F1F5F9;
  --scrollbar-thumb: #CBD5E1;
  --scrollbar-thumb-hover: #94A3B8;
  
  /* Dropdown colors */
  --dropdown-bg: #FFFFFF;
  --dropdown-border: #E2E8F0;
  --dropdown-item-hover: #F1F5F9;
  
  /* Modal colors */
  --modal-bg: #FFFFFF;
  --modal-header-bg: #F8FAFC;
  --modal-backdrop: rgba(0, 0, 0, 0.5);
}

/* Dark Theme */
[data-theme="dark"] {
  /* Background colors */
  --bg-primary: #0F172A;
  --bg-secondary: #1E293B;
  --bg-tertiary: #334155;
  --bg-card: #1E293B;
  --bg-header: #0F172A;
  --bg-footer: #020617;
  
  /* Text colors */
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --text-inverse: #0F172A;
  
  /* Border colors */
  --border-primary: rgba(148, 163, 184, 0.2);
  --border-secondary: rgba(148, 163, 184, 0.1);
  --border-accent: #3B82F6;
  
  /* Accent colors */
  --accent-primary: #3B82F6;
  --accent-secondary: #06B6D4;
  --accent-success: #10B981;
  --accent-warning: #F59E0B;
  --accent-danger: #EF4444;
  --accent-info: #0EA5E9;
  
  /* Shadow */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5);
  
  /* Input colors */
  --input-bg: #1E293B;
  --input-border: rgba(148, 163, 184, 0.2);
  --input-focus: #3B82F6;
  --input-placeholder: #64748B;
  
  /* Button colors */
  --btn-primary-bg: #3B82F6;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #60A5FA;
  --btn-secondary-bg: #475569;
  --btn-secondary-text: #FFFFFF;
  --btn-secondary-hover: #64748B;
  
  /* Link colors */
  --link-color: #60A5FA;
  --link-hover: #93C5FD;
  --link-visited: #A78BFA;
  
  /* Code colors */
  --code-bg: #0F172A;
  --code-text: #FB7185;
  --code-border: rgba(148, 163, 184, 0.2);
  
  /* Table colors */
  --table-bg: #1E293B;
  --table-border: rgba(148, 163, 184, 0.2);
  --table-stripe: #0F172A;
  --table-hover: #334155;
  
  /* Navbar colors */
  --navbar-bg: #0F172A;
  --navbar-text: #F8FAFC;
  --navbar-border: rgba(148, 163, 184, 0.2);
  --navbar-hover: #1E293B;
  
  /* Alert colors */
  --alert-success-bg: rgba(16, 185, 129, 0.15);
  --alert-success-border: #10B981;
  --alert-success-text: #34D399;
  --alert-danger-bg: rgba(239, 68, 68, 0.15);
  --alert-danger-border: #EF4444;
  --alert-danger-text: #F87171;
  --alert-warning-bg: rgba(245, 158, 11, 0.15);
  --alert-warning-border: #F59E0B;
  --alert-warning-text: #FBBF24;
  --alert-info-bg: rgba(14, 165, 233, 0.15);
  --alert-info-border: #0EA5E9;
  --alert-info-text: #38BDF8;
  
  /* Badge colors */
  --badge-primary-bg: #3B82F6;
  --badge-primary-text: #FFFFFF;
  --badge-secondary-bg: #64748B;
  --badge-secondary-text: #FFFFFF;
  
  /* Scrollbar colors */
  --scrollbar-track: #1E293B;
  --scrollbar-thumb: #475569;
  --scrollbar-thumb-hover: #64748B;
  
  /* Dropdown colors */
  --dropdown-bg: #1E293B;
  --dropdown-border: rgba(148, 163, 184, 0.2);
  --dropdown-item-hover: #334155;
  
  /* Modal colors */
  --modal-bg: #1E293B;
  --modal-header-bg: #0F172A;
  --modal-backdrop: rgba(0, 0, 0, 0.8);
}

/* Auto theme based on system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Background colors */
    --bg-primary: #0F172A;
    --bg-secondary: #1E293B;
    --bg-tertiary: #334155;
    --bg-card: #1E293B;
    --bg-header: #0F172A;
    --bg-footer: #020617;
    
    /* Text colors */
    --text-primary: #222222;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --text-inverse: #0F172A;
    
    /* Border colors */
    --border-primary: rgba(148, 163, 184, 0.2);
    --border-secondary: rgba(148, 163, 184, 0.1);
    --border-accent: #3B82F6;
    
    /* Accent colors */
    --accent-primary: #3B82F6;
    --accent-secondary: #06B6D4;
    --accent-success: #10B981;
    --accent-warning: #F59E0B;
    --accent-danger: #EF4444;
    --accent-info: #0EA5E9;
    
    /* Shadow */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5);
    
    /* Input colors */
    --input-bg: #1E293B;
    --input-border: rgba(148, 163, 184, 0.2);
    --input-focus: #3B82F6;
    --input-placeholder: #64748B;
    
    /* Button colors */
    --btn-primary-bg: #3B82F6;
    --btn-primary-text: #FFFFFF;
    --btn-primary-hover: #60A5FA;
    --btn-secondary-bg: #475569;
    --btn-secondary-text: #FFFFFF;
    --btn-secondary-hover: #64748B;
    
    /* Link colors */
    --link-color: #60A5FA;
    --link-hover: #93C5FD;
    --link-visited: #A78BFA;
    
    /* Code colors */
    --code-bg: #0F172A;
    --code-text: #FB7185;
    --code-border: rgba(148, 163, 184, 0.2);
    
    /* Table colors */
    --table-bg: #1E293B;
    --table-border: rgba(148, 163, 184, 0.2);
    --table-stripe: #0F172A;
    --table-hover: #334155;
    
    /* Navbar colors */
    --navbar-bg: #0F172A;
    --navbar-text: #F8FAFC;
    --navbar-border: rgba(148, 163, 184, 0.2);
    --navbar-hover: #1E293B;
    
    /* Alert colors */
    --alert-success-bg: rgba(16, 185, 129, 0.15);
    --alert-success-border: #10B981;
    --alert-success-text: #34D399;
    --alert-danger-bg: rgba(239, 68, 68, 0.15);
    --alert-danger-border: #EF4444;
    --alert-danger-text: #F87171;
    --alert-warning-bg: rgba(245, 158, 11, 0.15);
    --alert-warning-border: #F59E0B;
    --alert-warning-text: #FBBF24;
    --alert-info-bg: rgba(14, 165, 233, 0.15);
    --alert-info-border: #0EA5E9;
    --alert-info-text: #38BDF8;
    
    /* Badge colors */
    --badge-primary-bg: #3B82F6;
    --badge-primary-text: #FFFFFF;
    --badge-secondary-bg: #64748B;
    --badge-secondary-text: #FFFFFF;
    
    /* Scrollbar colors */
    --scrollbar-track: #1E293B;
    --scrollbar-thumb: #475569;
    --scrollbar-thumb-hover: #64748B;
    
    /* Dropdown colors */
    --dropdown-bg: #1E293B;
    --dropdown-border: rgba(148, 163, 184, 0.2);
    --dropdown-item-hover: #334155;
    
    /* Modal colors */
    --modal-bg: #1E293B;
    --modal-header-bg: #0F172A;
    --modal-backdrop: rgba(0, 0, 0, 0.8);
  }
}

/* Smooth transitions for theme switching */
*,
*::before,
*::after {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

/* Exclude animations and transforms from theme transitions */
.animate-*,
[class*="transition-"],
[class*="transform-"] {
  transition-property: none;
}

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