/**
 * Design Tokens - CSS Custom Properties
 * Supports light and dark color schemes
 * WCAG 2.2 AA compliant contrast ratios
 */

:root {
  /* Light Mode (Default) */
  --color-text-primary: #011148;
  --color-text-secondary: #666666;
  --color-text-tertiary: #999999;
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-bg-tertiary: #f6f6f6;
  --color-border: #e5e7eb;
  --color-border-light: #ececec;
  --color-accent: #ef4444;
  --color-accent-hover: #dc2626;
  --color-shadow: rgba(6, 17, 72, 0.08);
  --color-shadow-sm: rgba(6, 17, 72, 0.05);
  --color-scrollbar-bg: #ffffff;
  --color-scrollbar-thumb: #011148;
  
  /* SVG Colors - Inherit from primary */
  --svg-stroke: var(--color-text-primary);
  --svg-fill: var(--color-text-primary);
  --svg-fill-primary: var(--color-text-primary);
  --svg-fill-secondary: var(--color-text-secondary);
  --svg-fill-tertiary: var(--color-text-tertiary);
  --svg-fill-accent: var(--color-accent);
  
  /* SVG Filters for external images */
  --svg-filter-brightness: brightness(1);
  --svg-filter-contrast: contrast(1);
  --svg-filter-invert: invert(0);
  --svg-filter-combined: brightness(1) contrast(1) invert(0);
  
  /* Typography */
  --font-family-base: 'Roboto', sans-serif;
  --font-family-heading: 'norwester', 'Roboto', sans-serif;
  --font-size-base: 17px;
  --font-line-height: 1.75em;
  
  /* Transitions */
  --transition-duration: 0.5s;
  --transition-timing: ease-in-out;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary: #f3f4f6;
    --color-text-secondary: #d1d5db;
    --color-text-tertiary: #9ca3af;
    --color-bg-primary: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-bg-tertiary: #334155;
    --color-border: #334155;
    --color-border-light: #475569;
    --color-accent: #ef4444;
    --color-accent-hover: #fca5a5;
    --color-shadow: rgba(0, 0, 0, 0.3);
    --color-shadow-sm: rgba(0, 0, 0, 0.2);
    --color-scrollbar-bg: #0f172a;
    --color-scrollbar-thumb: #64748b;
    
    /* SVG Colors for dark mode */
    --svg-stroke: var(--color-text-primary);
    --svg-fill: var(--color-text-primary);
    --svg-fill-primary: var(--color-text-primary);
    --svg-fill-secondary: var(--color-text-secondary);
    --svg-fill-tertiary: var(--color-text-tertiary);
    --svg-fill-accent: var(--color-accent);
    
    /* SVG Filters for external images in dark mode */
    --svg-filter-brightness: brightness(0.9);
    --svg-filter-contrast: contrast(1.1);
    --svg-filter-combined: brightness(0.9) contrast(1.1) invert(0);
  }
}

/* Explicit dark mode class (allows user override of system preference) */
html[data-theme="dark"] {
  --color-text-primary: #f3f4f6;
  --color-text-secondary: #d1d5db;
  --color-text-tertiary: #9ca3af;
  --color-bg-primary: #0f172a;
  --color-bg-secondary: #1e293b;
  --color-bg-tertiary: #334155;
  --color-border: #334155;
  --color-border-light: #475569;
  --color-accent: #ef4444;
  --color-accent-hover: #fca5a5;
  --color-shadow: rgba(0, 0, 0, 0.3);
  --color-shadow-sm: rgba(0, 0, 0, 0.2);
  --color-scrollbar-bg: #0f172a;
  --color-scrollbar-thumb: #64748b;
  
  /* SVG Colors for dark mode */
  --svg-stroke: var(--color-text-primary);
  --svg-fill: var(--color-text-primary);
  --svg-fill-primary: var(--color-text-primary);
  --svg-fill-secondary: var(--color-text-secondary);
  --svg-fill-tertiary: var(--color-text-tertiary);
  --svg-fill-accent: var(--color-accent);
  
  /* SVG Filters for dark mode */
  --svg-filter-brightness: brightness(0.9);
  --svg-filter-contrast: contrast(1.1);
  --svg-filter-combined: brightness(0.9) contrast(1.1) invert(0);
}

/* Explicit light mode class (allows user override of system preference) */
html[data-theme="light"] {
  --color-text-primary: #011148;
  --color-text-secondary: #666666;
  --color-text-tertiary: #999999;
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-bg-tertiary: #f6f6f6;
  --color-border: #e5e7eb;
  --color-border-light: #ececec;
  --color-accent: #ef4444;
  --color-accent-hover: #dc2626;
  --color-shadow: rgba(6, 17, 72, 0.08);
  --color-shadow-sm: rgba(6, 17, 72, 0.05);
  --color-scrollbar-bg: #ffffff;
  --color-scrollbar-thumb: #011148;
  
  /* SVG Colors for light mode */
  --svg-stroke: var(--color-text-primary);
  --svg-fill: var(--color-text-primary);
  --svg-fill-primary: var(--color-text-primary);
  --svg-fill-secondary: var(--color-text-secondary);
  --svg-fill-tertiary: var(--color-text-tertiary);
  --svg-fill-accent: var(--color-accent);
  
  /* SVG Filters disabled in light mode for performance */
  --svg-filter-brightness: brightness(1);
  --svg-filter-contrast: contrast(1);
  --svg-filter-combined: brightness(1) contrast(1) invert(0);
}

/**
 * Reduce motion support for accessibility
 * Respects user's motion preference
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-duration: 0.01ms;
  }
}