/* WSU Navigators Theme System */
:root {
  /* Primary Theme Colors */
  --color-primary: #0A4C95;
  --color-primary-light: #1560B3;
  --color-primary-dark: #083A78;
  
  /* Secondary Theme Colors */
  --color-secondary: #F6C949;
  --color-secondary-light: #F8D56B;
  --color-secondary-dark: #E5B632;
  
  /* Accent Colors */
  --color-accent: #10b981;
  --color-accent-light: #34d399;
  --color-accent-dark: #059669;
  
  /* Background Colors */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-tertiary: #e9ecef;
  --color-bg-soft: #F8F9FA;
  
  /* Text Colors */
  --color-text-primary: #212529;
  --color-text-secondary: #6c757d;
  --color-text-muted: #adb5bd;
  
  /* Border Colors */
  --color-border-light: #e9ecef;
  --color-border-medium: #ced4da;
  --color-border-dark: #adb5bd;
  
  /* Status Colors */
  --color-success: #198754;
  --color-warning: #ffc107;
  --color-error: #dc3545;
  --color-info: #0dcaf0;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* Border Radius */
  --radius-sm: 0.125rem;
  --radius-base: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;
  
  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-base: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3rem;
  
  /* Typography */
  --font-family-sans: 'Montserrat', Arial, sans-serif;
  --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  
  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}

/* Dark Theme */
[data-theme="dark"], .dark {
  /* Background Colors */
  --color-bg-primary: #0E1117;
  --color-bg-secondary: #161b22;
  --color-bg-tertiary: #21262d;
  --color-bg-soft: #0E1117;
  
  /* Text Colors */
  --color-text-primary: #f0f6fc;
  --color-text-secondary: #8b949e;
  --color-text-muted: #6e7681;
  
  /* Border Colors */
  --color-border-light: #30363d;
  --color-border-medium: #21262d;
  --color-border-dark: #6e7681;
  
  /* Adjust primary colors for dark theme */
  --color-primary-light: #2670d9;
  --color-primary-dark: #0550ae;
  
  /* Shadows for dark theme */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);
}

/* Theme Utility Classes */
.theme-primary { color: var(--color-primary); }
.theme-secondary { color: var(--color-secondary); }
.theme-accent { color: var(--color-accent); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }

.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }
.border-accent { border-color: var(--color-accent); }

/* Theme-aware components */
.btn {
  background-color: var(--color-primary);
  color: var(--color-bg-primary);
  border: 1px solid var(--color-primary);
  padding: var(--space-sm) var(--space-base);
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.btn:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-secondary);
}

.btn-secondary:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-bg-primary);
}

.card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
  padding: var(--space-lg);
  transition: all var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.input {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-medium);
  color: var(--color-text-primary);
  padding: var(--space-sm) var(--space-base);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgb(10 76 149 / 0.1);
}

/* Theme toggle animations */
.theme-transition {
  transition: background-color var(--transition-base), 
              color var(--transition-base), 
              border-color var(--transition-base);
}

/* Responsive design helpers */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print styles */
@media print {
  :root {
    --color-bg-primary: #ffffff;
    --color-text-primary: #000000;
    --shadow-base: none;
  }
  
  .card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --color-border-light: #000000;
    --color-border-medium: #000000;
    --color-text-secondary: #000000;
  }
  
  [data-theme="dark"], .dark {
    --color-border-light: #ffffff;
    --color-border-medium: #ffffff;
    --color-text-secondary: #ffffff;
  }
}