// CSS Custom Properties for theme switching
// This allows dynamic switching between light and dark themes

:root {
  // Light theme (default)
  --color-bg-primary: #{$color__background-body};
  --color-bg-secondary: #{$color__background-screen};
  --color-bg-card: #{$color__background-card};
  --color-bg-header: #{$color__background-header};
  
  --color-text-primary: #{$color__text-main};
  --color-text-secondary: #{$color__text-muted};
  --color-text-tertiary: #{$color__text-light};
  
  --color-link: #{$color__link};
  --color-link-visited: #{$color__link-visited};
  --color-link-hover: #{$color__link-hover};
  
  --color-border-primary: #{$color__border-main};
  --color-border-secondary: #{$color__border-input};
  
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  
  // Transitions
  --transition-default: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-fast: all 0.15s ease-in-out;
}

// Dark theme
[data-theme="dark"] {
  --color-bg-primary: #{$color__dark-background-body};
  --color-bg-secondary: #{$color__dark-background-screen};
  --color-bg-card: #{$color__dark-background-card};
  --color-bg-header: #{$color__dark-background-header};
  
  --color-text-primary: #{$color__dark-text-main};
  --color-text-secondary: #{$color__dark-text-muted};
  --color-text-tertiary: #{$color__dark-text-light};
  
  --color-link: #{$color__dark-link};
  --color-link-visited: #{$color__dark-link-visited};
  --color-link-hover: #{$color__dark-link-hover};
  
  --color-border-primary: #{$color__dark-border-main};
  --color-border-secondary: #{$color__dark-border-input};
  
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.7), 0 10px 10px rgba(0, 0, 0, 0.8);
}

// Prefers dark color scheme
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary: #{$color__dark-background-body};
    --color-bg-secondary: #{$color__dark-background-screen};
    --color-bg-card: #{$color__dark-background-card};
    --color-bg-header: #{$color__dark-background-header};
    
    --color-text-primary: #{$color__dark-text-main};
    --color-text-secondary: #{$color__dark-text-muted};
    --color-text-tertiary: #{$color__dark-text-light};
    
    --color-link: #{$color__dark-link};
    --color-link-visited: #{$color__dark-link-visited};
    --color-link-hover: #{$color__dark-link-hover};
    
    --color-border-primary: #{$color__dark-border-main};
    --color-border-secondary: #{$color__dark-border-input};
    
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
    --shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.7), 0 10px 10px rgba(0, 0, 0, 0.8);
  }
}