/* Theme System - Dark and Light Mode */
/* Uses CSS custom properties for theme colors */

/* ===== LIGHT THEME (default) ===== */
:root,
[data-theme="light"] {
  color-scheme: light;
  
  /* Background colors */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-tertiary: #e9ecef;
  --color-bg-elevated: #ffffff;
  --color-bg-overlay: rgba(0, 0, 0, 0.5);
  
  /* Text colors */
  --color-text-primary: #212529;
  --color-text-secondary: #495057;
  --color-text-tertiary: #6c757d;
  --color-text-inverse: #ffffff;
  
  /* Border colors */
  --color-border-default: #dee2e6;
  --color-border-light: #e9ecef;
  --color-border-dark: #adb5bd;
  
  /* Brand colors */
  --color-brand-primary: #1F3B73; /* navy */
  --color-brand-primary-hover: #162a52;
  --color-brand-secondary: #223b73;
  --color-brand-secondary-hover: #1a2f5a;
  
  /* Design system colors */
  --color-cyan-accent: #00D9FF;
  --color-spectral-silver: #C0C0C0;
  --color-neural-blue: #1F3B73;
  --color-obsidian-black: #0A0A0A;
  
  /* Semantic colors */
  --color-success: #28a745;
  --color-success-light: #d4edda;
  --color-warning: #ffc107;
  --color-warning-light: #fff3cd;
  --color-error: #dc3545;
  --color-error-light: #f8d7da;
  --color-info: #17a2b8;
  --color-info-light: #d1ecf1;
  
  /* Interactive states */
  --color-link: var(--color-brand-primary);
  --color-link-hover: var(--color-brand-primary-hover);
  --color-focus-ring: rgba(31, 59, 115, 0.35);
  
  /* Component-specific */
  --color-button-primary-bg: var(--color-brand-primary);
  --color-button-primary-text: #ffffff;
  --color-button-primary-hover: var(--color-brand-primary-hover);
  --color-button-secondary-bg: transparent;
  --color-button-secondary-text: var(--color-brand-primary);
  --color-button-secondary-border: var(--color-brand-primary);
  --color-button-secondary-hover-bg: var(--color-brand-primary);
  --color-button-secondary-hover-text: #ffffff;
  
  --color-header-bg: rgba(255, 255, 255, 0.95);
  --color-header-border: var(--color-border-light);
  --color-footer-bg: var(--color-bg-secondary);
  --color-card-bg: var(--color-bg-primary);
  --color-card-border: var(--color-border-default);
  
  --color-filter-label: var(--color-brand-primary);
  --color-logo-text: var(--color-brand-primary);
  /* Use a brighter blue for hover to be distinct from the dark navy */
  --color-logo-text-hover: #3d8bfd;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  color-scheme: dark;
  
  /* Background colors */
  --color-bg-primary: #1a1a1a;
  --color-bg-secondary: #242424;
  --color-bg-tertiary: #2e2e2e;
  --color-bg-elevated: #2e2e2e;
  --color-bg-overlay: rgba(0, 0, 0, 0.7);
  
  /* Text colors */
  --color-text-primary: #f8f9fa;
  --color-text-secondary: #adb5bd;
  --color-text-tertiary: #6c757d;
  --color-text-inverse: #1a1a1a;
  
  /* Border colors */
  --color-border-default: #3a3a3a;
  --color-border-light: #2e2e2e;
  --color-border-dark: #4a4a4a;
  
  /* Brand colors */
  --color-brand-primary: #3d8bfd;
  --color-brand-primary-hover: #6ea8fe;
  --color-brand-secondary: #8b7ff4;
  --color-brand-secondary-hover: #a99ff7;
  
  /* Design system colors */
  --color-cyan-accent: #00D9FF;
  --color-spectral-silver: #C0C0C0;
  --color-neural-blue: #1F3B73;
  --color-obsidian-black: #0A0A0A;
  
  /* Semantic colors */
  --color-success: #4ade80;
  --color-success-light: #1a3a2a;
  --color-warning: #facc15;
  --color-warning-light: #3a3420;
  --color-error: #f87171;
  --color-error-light: #3a1a1a;
  --color-info: #38bdf8;
  --color-info-light: #1a2f3a;
  
  /* Interactive states */
  --color-link: var(--color-brand-primary);
  --color-link-hover: var(--color-brand-primary-hover);
  --color-focus-ring: rgba(61, 139, 253, 0.5);
  
  /* Component-specific */
  --color-button-primary-bg: var(--color-brand-primary);
  --color-button-primary-text: #ffffff;
  --color-button-primary-hover: var(--color-brand-primary-hover);
  --color-button-secondary-bg: transparent;
  --color-button-secondary-text: var(--color-brand-primary);
  --color-button-secondary-border: var(--color-brand-primary);
  --color-button-secondary-hover-bg: var(--color-brand-primary);
  --color-button-secondary-hover-text: #ffffff;
  
  --color-header-bg: rgba(26, 26, 26, 0.95);
  --color-header-border: var(--color-border-default);
  --color-footer-bg: var(--color-bg-secondary);
  --color-card-bg: var(--color-bg-elevated);
  --color-card-border: var(--color-border-default);
  
  --color-filter-label: var(--color-cyan-accent);
  --color-logo-text: var(--color-cyan-accent);
  --color-logo-text-hover: var(--color-brand-primary);
}

/* ===== SYSTEM PREFERENCE DETECTION ===== */
/* Automatically apply dark theme if user's OS prefers dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    
    /* Apply dark theme colors */
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #242424;
    --color-bg-tertiary: #2e2e2e;
    --color-bg-elevated: #2e2e2e;
    --color-bg-overlay: rgba(0, 0, 0, 0.7);
    
    --color-text-primary: #f8f9fa;
    --color-text-secondary: #adb5bd;
    --color-text-tertiary: #6c757d;
    --color-text-inverse: #1a1a1a;
    
    --color-border-default: #3a3a3a;
    --color-border-light: #2e2e2e;
    --color-border-dark: #4a4a4a;
    
    --color-brand-primary: #3d8bfd;
    --color-brand-primary-hover: #6ea8fe;
    --color-brand-secondary: #8b7ff4;
    --color-brand-secondary-hover: #a99ff7;
    
    --color-success: #4ade80;
    --color-success-light: #1a3a2a;
    --color-warning: #facc15;
    --color-warning-light: #3a3420;
    --color-error: #f87171;
    --color-error-light: #3a1a1a;
    --color-info: #38bdf8;
    --color-info-light: #1a2f3a;
    
    --color-link: var(--color-brand-primary);
    --color-link-hover: var(--color-brand-primary-hover);
    --color-focus-ring: rgba(61, 139, 253, 0.5);
    
    --color-button-primary-bg: var(--color-brand-primary);
    --color-button-primary-text: #ffffff;
    --color-button-primary-hover: var(--color-brand-primary-hover);
    --color-button-secondary-bg: transparent;
    --color-button-secondary-text: var(--color-brand-primary);
    --color-button-secondary-border: var(--color-brand-primary);
    --color-button-secondary-hover-bg: var(--color-brand-primary);
    --color-button-secondary-hover-text: #ffffff;
    
    --color-header-bg: rgba(26, 26, 26, 0.95);
    --color-header-border: var(--color-border-default);
    --color-footer-bg: var(--color-bg-secondary);
    --color-card-bg: var(--color-bg-elevated);
    --color-card-border: var(--color-border-default);
    
    --color-filter-label: var(--color-cyan-accent);
    --color-logo-text: var(--color-cyan-accent);
    --color-logo-text-hover: var(--color-brand-primary);
  }
}