/* School Route Mapper - Theme System */

/* Light Theme (Default) */
:root[data-theme="light"] {
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-hover: #e2e8f0;
  
  /* Text Colors */
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;
  
  /* Border Colors */
  --border-color: #e2e8f0;
  --border-hover: #cbd5e1;
  --border-focus: #3b82f6;
  
  /* Accent Colors */
  --accent-primary: #3b82f6;
  --accent-hover: #2563eb;
  --accent-active: #1d4ed8;
  --accent-light: #dbeafe;
  
  /* Status Colors */
  --success: #10b981;
  --success-light: #d1fae5;
  --warning: #f59e0b;
  --warning-light: #fef3c7;
  --danger: #ef4444;
  --danger-light: #fee2e2;
  --info: #06b6d4;
  --info-light: #cffafe;
  
  /* Grid Colors */
  --grid-color: #94a3b8;
  --grid-alpha: 0.5;
  --grid-hover-alpha: 0.8;
  --grid-background: #f8fafc;
  
  /* Canvas Colors */
  --canvas-background: #f8fafc;
  --canvas-grid-dot: #94a3b8;
  --canvas-selection: #3b82f6;
  --canvas-highlight: #fbbf24;
  
  /* Category Colors (for drawing) */
  --category-ext-wall: #1f2937;
  --category-int-wall: #4b5563;
  --category-corr-bound: #6b7280;
  --category-door: #22c55e;
  --category-stair: #10b981;
  --category-elevator: #0ea5e9;
  --category-ramp: #14b8a6;
  --category-outdoor-path: #2563eb;
  --category-zebra: #1d4ed8;
  --category-road: #7c3aed;
  --category-grass: #84cc16;
  --category-no-go: #ef4444;
  --category-shortcut: #f59e0b;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Overlays */
  --overlay-light: rgba(255, 255, 255, 0.8);
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --overlay-accent: rgba(59, 130, 246, 0.1);
}

/* Dark Theme */
:root[data-theme="dark"] {
  /* Background Colors */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-hover: #475569;
  
  /* Text Colors */
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --text-inverse: #0f172a;
  
  /* Border Colors */
  --border-color: #334155;
  --border-hover: #475569;
  --border-focus: #60a5fa;
  
  /* Accent Colors */
  --accent-primary: #60a5fa;
  --accent-hover: #3b82f6;
  --accent-active: #2563eb;
  --accent-light: #1e3a8a;
  
  /* Status Colors */
  --success: #34d399;
  --success-light: #064e3b;
  --warning: #fbbf24;
  --warning-light: #451a03;
  --danger: #f87171;
  --danger-light: #450a0a;
  --info: #22d3ee;
  --info-light: #083344;
  
  /* Grid Colors */
  --grid-color: #64748b;
  --grid-alpha: 0.6;
  --grid-hover-alpha: 0.9;
  --grid-background: #1e293b;
  
  /* Canvas Colors */
  --canvas-background: #1e293b;
  --canvas-grid-dot: #64748b;
  --canvas-selection: #60a5fa;
  --canvas-highlight: #fbbf24;
  
  /* Category Colors (adjusted for dark theme) */
  --category-ext-wall: #374151;
  --category-int-wall: #6b7280;
  --category-corr-bound: #9ca3af;
  --category-door: #34d399;
  --category-stair: #22d3ee;
  --category-elevator: #38bdf8;
  --category-ramp: #2dd4bf;
  --category-outdoor-path: #60a5fa;
  --category-zebra: #818cf8;
  --category-road: #a78bfa;
  --category-grass: #a3e635;
  --category-no-go: #f87171;
  --category-shortcut: #fbbf24;
  
  /* Shadows (adjusted for dark theme) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  
  /* Overlays */
  --overlay-light: rgba(15, 23, 42, 0.8);
  --overlay-dark: rgba(0, 0, 0, 0.7);
  --overlay-accent: rgba(96, 165, 250, 0.1);
}

/* High Contrast Theme (Accessibility) */
:root[data-theme="high-contrast"] {
  /* Background Colors */
  --bg-primary: #000000;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #333333;
  --bg-hover: #4d4d4d;
  
  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-muted: #999999;
  --text-inverse: #000000;
  
  /* Border Colors */
  --border-color: #666666;
  --border-hover: #888888;
  --border-focus: #ffff00;
  
  /* Accent Colors */
  --accent-primary: #ffff00;
  --accent-hover: #ffff66;
  --accent-active: #ffff99;
  --accent-light: #333300;
  
  /* Status Colors */
  --success: #00ff00;
  --success-light: #003300;
  --warning: #ffaa00;
  --warning-light: #332200;
  --danger: #ff0000;
  --danger-light: #330000;
  --info: #00ffff;
  --info-light: #003333;
  
  /* Grid Colors */
  --grid-color: #888888;
  --grid-alpha: 0.8;
  --grid-hover-alpha: 1.0;
  --grid-background: #1a1a1a;
  
  /* Canvas Colors */
  --canvas-background: #1a1a1a;
  --canvas-grid-dot: #888888;
  --canvas-selection: #ffff00;
  --canvas-highlight: #ff00ff;
  
  /* Category Colors (high contrast) */
  --category-ext-wall: #ffffff;
  --category-int-wall: #cccccc;
  --category-corr-bound: #999999;
  --category-door: #00ff00;
  --category-stair: #00ffff;
  --category-elevator: #0088ff;
  --category-ramp: #00cc88;
  --category-outdoor-path: #0066ff;
  --category-zebra: #6600ff;
  --category-road: #aa00ff;
  --category-grass: #88ff00;
  --category-no-go: #ff0000;
  --category-shortcut: #ffaa00;
  
  /* Shadows (strong for high contrast) */
  --shadow-sm: 0 2px 4px 0 rgba(255, 255, 255, 0.2);
  --shadow-md: 0 6px 8px -1px rgba(255, 255, 255, 0.3), 0 4px 6px -1px rgba(255, 255, 255, 0.2);
  --shadow-lg: 0 12px 18px -3px rgba(255, 255, 255, 0.3), 0 6px 8px -2px rgba(255, 255, 255, 0.2);
  --shadow-xl: 0 24px 30px -5px rgba(255, 255, 255, 0.3), 0 12px 12px -5px rgba(255, 255, 255, 0.2);
  
  /* Overlays */
  --overlay-light: rgba(0, 0, 0, 0.9);
  --overlay-dark: rgba(0, 0, 0, 0.95);
  --overlay-accent: rgba(255, 255, 0, 0.2);
}

/* Colorblind-Friendly Theme */
:root[data-theme="colorblind"] {
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-hover: #e2e8f0;
  
  /* Text Colors */
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;
  
  /* Border Colors */
  --border-color: #e2e8f0;
  --border-hover: #cbd5e1;
  --border-focus: #0066cc;
  
  /* Accent Colors (blue-based, safe for colorblind) */
  --accent-primary: #0066cc;
  --accent-hover: #0052a3;
  --accent-active: #003d7a;
  --accent-light: #cce6ff;
  
  /* Status Colors (colorblind-safe) */
  --success: #006633; /* Dark green */
  --success-light: #ccffcc;
  --warning: #ff6600; /* Orange */
  --warning-light: #ffe6cc;
  --danger: #cc0000; /* Dark red */
  --danger-light: #ffcccc;
  --info: #0066cc; /* Blue */
  --info-light: #cce6ff;
  
  /* Grid Colors */
  --grid-color: #666666;
  --grid-alpha: 0.6;
  --grid-hover-alpha: 0.9;
  --grid-background: #f8fafc;
  
  /* Canvas Colors */
  --canvas-background: #f8fafc;
  --canvas-grid-dot: #666666;
  --canvas-selection: #0066cc;
  --canvas-highlight: #ff6600;
  
  /* Category Colors (colorblind-friendly patterns) */
  --category-ext-wall: #000000;
  --category-int-wall: #333333;
  --category-corr-bound: #666666;
  --category-door: #006633;
  --category-stair: #0066cc;
  --category-elevator: #003d7a;
  --category-ramp: #009999;
  --category-outdoor-path: #0052a3;
  --category-zebra: #4d0066;
  --category-road: #660033;
  --category-grass: #336600;
  --category-no-go: #cc0000;
  --category-shortcut: #ff6600;
  
  /* Standard shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Overlays */
  --overlay-light: rgba(255, 255, 255, 0.8);
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --overlay-accent: rgba(0, 102, 204, 0.1);
}

/* Theme Transition Animation */
:root {
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

* {
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Theme-specific overrides */

/* Dark theme canvas adjustments */
[data-theme="dark"] #main-canvas {
  background-color: var(--canvas-background);
}

[data-theme="dark"] .coordinates-display {
  background-color: rgba(15, 23, 42, 0.9);
  border: 1px solid var(--border-color);
}

/* High contrast theme adjustments */
[data-theme="high-contrast"] button:focus,
[data-theme="high-contrast"] input:focus,
[data-theme="high-contrast"] select:focus {
  outline: 3px solid var(--accent-primary);
  outline-offset: 2px;
}

[data-theme="high-contrast"] .tool-btn.active {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Colorblind theme dash patterns for better differentiation */
[data-theme="colorblind"] .category-item {
  position: relative;
}

[data-theme="colorblind"] .category-item::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: linear-gradient(to right, currentColor 50%, transparent 50%);
  background-size: 4px 2px;
}

/* Print styles */
@media print {
  :root {
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8f8f8;
    --text-primary: #000000;
    --text-secondary: #333333;
    --border-color: #cccccc;
    --accent-primary: #000000;
  }
  
  .top-bar,
  .left-toolbar,
  .right-panel,
  .zoom-controls,
  .modal {
    display: none !important;
  }
  
  .canvas-container {
    width: 100% !important;
    height: 100vh !important;
  }
  
  .coordinates-display {
    display: none !important;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root,
  * {
    transition: none !important;
    animation: none !important;
  }
  
  .pulse,
  .spin {
    animation: none !important;
  }
}

/* Force colors for Windows High Contrast Mode */
@media (forced-colors: active) {
  :root {
    --bg-primary: Canvas;
    --bg-secondary: Canvas;
    --bg-tertiary: Canvas;
    --text-primary: CanvasText;
    --text-secondary: CanvasText;
    --border-color: CanvasText;
    --accent-primary: Highlight;
    --accent-hover: Highlight;
    --accent-active: Highlight;
  }
  
  button {
    border: 1px solid CanvasText;
  }
  
  .tool-btn.active,
  .mode-btn.active,
  .primary-btn {
    background-color: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }
}

/* Theme switcher animation */
.theme-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom scrollbars for different themes */
:root[data-theme="light"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

:root[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

:root[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

:root[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}