/**
 * Theme System CSS Custom Properties
 * Comprehensive theme variables for light and dark modes
 * Supports smooth transitions and accessibility compliance
 */

/* Light Theme Variables (Default) */
:root {
  /* Primary Backgrounds */
  --theme-bg-primary: #ffffff;
  --theme-bg-secondary: #f8fafc;
  --theme-bg-tertiary: #f1f5f9;
  --theme-bg-elevated: #ffffff;
  
  /* Text Colors */
  --theme-text-primary: #0f172a;
  --theme-text-secondary: #334155;
  --theme-text-muted: #64748b;
  --theme-text-inverse: #ffffff;
  
  /* Brand Colors (Light Theme) */
  --theme-brand-primary: #007bff;
  --theme-brand-secondary: #667eea;
  --theme-brand-accent: #5ac8fa;
  --theme-brand-success: #10b981;
  --theme-brand-warning: #f59e0b;
  --theme-brand-error: #ef4444;
  
  /* Interactive States */
  --theme-hover-bg: rgba(0, 123, 255, 0.05);
  --theme-active-bg: rgba(0, 123, 255, 0.1);
  --theme-focus-ring: rgba(0, 123, 255, 0.25);
  --theme-selected-bg: rgba(0, 123, 255, 0.08);
  
  /* Borders and Dividers */
  --theme-border-primary: #e2e8f0;
  --theme-border-secondary: #cbd5e1;
  --theme-border-muted: #f1f5f9;
  --theme-border-focus: #007bff;
  
  /* Shadows */
  --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --theme-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  
  /* Form Elements */
  --theme-input-bg: #ffffff;
  --theme-input-border: #d1d5db;
  --theme-input-focus-border: #007bff;
  --theme-input-placeholder: #9ca3af;
  
  /* Navigation */
  --theme-nav-bg: #ffffff;
  --theme-nav-border: #e5e7eb;
  --theme-nav-link: #374151;
  --theme-nav-link-hover: #007bff;
  --theme-nav-link-active: #007bff;
  
  /* Cards and Panels */
  --theme-card-bg: #ffffff;
  --theme-card-border: #e5e7eb;
  --theme-panel-bg: #f9fafb;
  
  /* Overlays and Modals */
  --theme-overlay-bg: rgba(0, 0, 0, 0.5);
  --theme-modal-bg: #ffffff;
  --theme-modal-border: #e5e7eb;
  
  /* Transition Properties */
  --theme-transition-fast: 150ms ease-in-out;
  --theme-transition-normal: 250ms ease-in-out;
  --theme-transition-slow: 350ms ease-in-out;
  
  /* Theme Toggle Specific */
  --theme-toggle-bg: #e5e7eb;
  --theme-toggle-thumb: #ffffff;
  --theme-toggle-track: #d1d5db;
}

/* Dark Theme Variables - 参考苹果和阿里的设计 */
[data-theme="dark"] {
  /* Primary Backgrounds - 更柔和的深色调 */
  --theme-bg-primary: #0f172a;
  --theme-bg-secondary: #1e293b;
  --theme-bg-tertiary: #334155;
  --theme-bg-elevated: #1e293b;
  
  /* Text Colors - 更好的对比度 */
  --theme-text-primary: #f8fafc;
  --theme-text-secondary: #e2e8f0;
  --theme-text-muted: #94a3b8;
  --theme-text-inverse: #f8fafc;
  
  /* Brand Colors (Dark Theme Adjusted) - 更柔和的蓝色系 */
  --theme-brand-primary: #60a5fa;
  --theme-brand-secondary: #7dd3fc;
  --theme-brand-accent: #93c5fd;
  --theme-brand-success: #34d399;
  --theme-brand-warning: #fbbf24;
  --theme-brand-error: #f87171;
  
  /* Interactive States */
  --theme-hover-bg: rgba(59, 130, 246, 0.1);
  --theme-active-bg: rgba(59, 130, 246, 0.2);
  --theme-focus-ring: rgba(59, 130, 246, 0.4);
  --theme-selected-bg: rgba(59, 130, 246, 0.15);
  
  /* Borders and Dividers */
  --theme-border-primary: #475569;
  --theme-border-secondary: #64748b;
  --theme-border-muted: #334155;
  --theme-border-focus: #3b82f6;
  
  /* Shadows (Adjusted for Dark Backgrounds) */
  --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --theme-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
  
  /* Form Elements */
  --theme-input-bg: #334155;
  --theme-input-border: #475569;
  --theme-input-focus-border: #3b82f6;
  --theme-input-placeholder: #64748b;
  
  /* Navigation */
  --theme-nav-bg: #1e293b;
  --theme-nav-border: #334155;
  --theme-nav-link: #e2e8f0;
  --theme-nav-link-hover: #60a5fa;
  --theme-nav-link-active: #3b82f6;
  
  /* Cards and Panels */
  --theme-card-bg: #1e293b;
  --theme-card-border: #334155;
  --theme-panel-bg: #0f172a;
  
  /* Overlays and Modals */
  --theme-overlay-bg: rgba(0, 0, 0, 0.7);
  --theme-modal-bg: #1e293b;
  --theme-modal-border: #334155;
  
  /* Theme Toggle Specific */
  --theme-toggle-bg: #475569;
  --theme-toggle-thumb: #f1f5f9;
  --theme-toggle-track: #334155;
}

/* Smooth Transitions for Theme Switching */
* {
  transition: 
    background-color var(--theme-transition-normal),
    border-color var(--theme-transition-normal),
    color var(--theme-transition-normal),
    box-shadow var(--theme-transition-normal);
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

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

/* Theme-aware focus styles */
:focus-visible {
  outline: 2px solid var(--theme-border-focus);
  outline-offset: 2px;
}

/* Ensure proper contrast for selection */
::selection {
  background-color: var(--theme-brand-primary);
  color: var(--theme-text-inverse);
}

/* Theme-aware scrollbar (webkit browsers) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--theme-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--theme-border-secondary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-text-muted);
}