/**
 * SVG Theme Adaptation System
 * Extends base design tokens with SVG-specific color and filter utilities
 * WCAG 2.2 AA accessible with no performance impact
 */

:root {
  /* SVG Stroke/Fill Colors - Inherit from primary text */
  --svg-stroke: var(--color-text-primary);
  --svg-fill: var(--color-text-primary);
  --svg-fill-secondary: var(--color-text-secondary);
  --svg-fill-tertiary: var(--color-text-tertiary);
  
  /* SVG Filters for external images */
  --svg-filter-brightness: brightness(1);
  --svg-filter-contrast: contrast(1);
  --svg-filter-invert: invert(0);
  --svg-filter-hue: hue-rotate(0deg);
  
  /* Combined filter for dark mode compatibility */
  --svg-filter-combined: brightness(1) contrast(1) invert(0);
  
  /* Performance: Disable expensive filters by default */
  --svg-filter-enabled: 0;
}

/* Dark Mode: SVG Color Adjustments */
@media (prefers-color-scheme: dark) {
  :root {
    --svg-stroke: var(--color-text-primary);
    --svg-fill: var(--color-text-primary);
    --svg-fill-secondary: var(--color-text-secondary);
    --svg-fill-tertiary: var(--color-text-tertiary);
    
    /* Filters for external SVGs/images (use sparingly) */
    --svg-filter-brightness: brightness(0.9);
    --svg-filter-contrast: contrast(1.1);
    --svg-filter-invert: invert(0);
    --svg-filter-combined: brightness(0.9) contrast(1.1) invert(0);
  }
}

/* Explicit Dark Mode */
html[data-theme="dark"] {
  --svg-stroke: var(--color-text-primary);
  --svg-fill: var(--color-text-primary);
  --svg-fill-secondary: var(--color-text-secondary);
  --svg-fill-tertiary: var(--color-text-tertiary);
  
  --svg-filter-brightness: brightness(0.9);
  --svg-filter-contrast: contrast(1.1);
  --svg-filter-invert: invert(0);
  --svg-filter-combined: brightness(0.9) contrast(1.1) invert(0);
}

/*
 * ============================================
 * SVG UTILITY CLASSES
 * ============================================
 */

/**
 * Base SVG styling
 * Use on inline SVGs for proper color inheritance
 */
.svg-adaptive {
  fill: var(--svg-fill);
  stroke: var(--svg-stroke);
  color: var(--color-text-primary);
}

.svg-adaptive-secondary {
  fill: var(--svg-fill-secondary);
  stroke: var(--svg-stroke);
}

.svg-adaptive-tertiary {
  fill: var(--svg-fill-tertiary);
  stroke: var(--svg-stroke);
}

/**
 * SVG Icon styles
 * For consistent icon sizing and alignment
 */
.svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
  stroke: currentColor;
}

.svg-icon-sm {
  width: 0.875em;
  height: 0.875em;
}

.svg-icon-lg {
  width: 1.25em;
  height: 1.25em;
}

.svg-icon-2x {
  width: 2em;
  height: 2em;
}

/**
 * SVG with currentColor inheritance
 * Works with font color, perfect for icons
 */
.svg-inherit-color {
  fill: currentColor;
  stroke: currentColor;
}

/**
 * External image SVG handling
 * Apply filters to external SVGs that can't be modified
 * WARNING: Use sparingly - filters are GPU-intensive
 */
.svg-filter-adaptive {
  filter: var(--svg-filter-combined);
  transition: filter var(--transition-duration) var(--transition-timing);
}

.svg-filter-brightness {
  filter: var(--svg-filter-brightness);
}

.svg-filter-contrast {
  filter: var(--svg-filter-contrast);
}

/**
 * Prevent filter application in light mode for performance
 */
@media (prefers-color-scheme: light) {
  .svg-filter-adaptive,
  .svg-filter-brightness,
  .svg-filter-contrast {
    filter: none;
  }
}

html[data-theme="light"] {
  .svg-filter-adaptive,
  .svg-filter-brightness,
  .svg-filter-contrast {
    filter: none;
  }
}

/**
 * Logo Exception Class
 * Prevents theme-based filtering for brand logos
 * 
 * Usage: Logos that have a visual identity independent of theme
 * Example: company logo should show consistent branding
 */
.svg-no-theme,
.logo,
[data-theme-exempt="true"] {
  filter: none !important;
  opacity: 1 !important;
  /* Optionally: add light background in dark mode */
}

/**
 * Logo with light background in dark mode
 * For logos designed to appear on light backgrounds
 */
.logo-light-bg {
  padding: 0.5rem;
  border-radius: 0.25rem;
  background-color: transparent;
  transition: background-color var(--transition-duration) var(--transition-timing);
}

@media (prefers-color-scheme: dark) {
  .logo-light-bg {
    background-color: var(--color-bg-secondary);
  }
}

html[data-theme="dark"] .logo-light-bg {
  background-color: var(--color-bg-secondary);
}

/**
 * Icon states with color inheritance
 */
.svg-icon-hover:hover {
  color: var(--color-accent);
}

.svg-icon-active {
  color: var(--color-accent);
}

/**
 * SVG Text paths and text elements
 */
svg text {
  fill: var(--svg-fill);
  color: var(--color-text-primary);
}

svg tspan {
  fill: var(--svg-fill);
}

/**
 * SVG Group styling
 */
svg g > * {
  fill: var(--svg-fill);
  stroke: var(--svg-stroke);
}

/**
 * Accessible SVG with aria-label
 */
svg[role="img"][aria-label] {
  /* Ensure SVG is accessible */
}

/*
 * ============================================
 * PERFORMANCE OPTIMIZATION
 * ============================================
 */

/**
 * Reduce motion support for SVG animations
 */
@media (prefers-reduced-motion: reduce) {
  svg,
  .svg-adaptive,
  .svg-filter-adaptive {
    animation: none;
    transition: none;
  }
}

/**
 * High contrast mode support
 */
@media (prefers-contrast: more) {
  .svg-adaptive,
  .svg-filter-adaptive {
    --svg-filter-contrast: contrast(1.3);
    --svg-filter-brightness: brightness(1);
  }
}

/*
 * ============================================
 * SPECIFIC SVG PATTERNS
 * ============================================
 */

/**
 * Multi-color illustration adaptation
 * For complex SVGs with multiple colors:
 * 1. Keep primary filled areas using CSS variables
 * 2. Use opacity for secondary elements
 * 3. Adjust specific paths with CSS attribute selectors
 */
.svg-illustration {
  --illustration-primary: var(--svg-fill);
  --illustration-secondary: var(--svg-fill-secondary);
  --illustration-accent: var(--color-accent);
}

/**
 * SVG with stroke-only styling
 * For line-based icons and illustrations
 */
.svg-outline {
  fill: none;
  stroke: var(--svg-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/**
 * Monochrome SVG (all colors same as text)
 */
.svg-monochrome {
  fill: var(--svg-fill);
  stroke: var(--svg-stroke);
}

.svg-monochrome * {
  fill: var(--svg-fill);
  stroke: var(--svg-stroke);
}

/**
 * SVG as background image with filter
 * For SVG background-image elements
 */
.bg-svg-adaptive {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: var(--svg-filter-combined);
  transition: filter var(--transition-duration) var(--transition-timing);
}

@media (prefers-color-scheme: light) {
  .bg-svg-adaptive {
    filter: none;
  }
}

html[data-theme="light"] .bg-svg-adaptive {
  filter: none;
}

/*
 * ============================================
 * ACCESSIBILITY GUIDELINES
 * ============================================
 */

/**
 * SVG Icon with text label
 * Ensures icon + text combination meets contrast requirements
 */
.svg-labeled-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--color-text-primary);
}

.svg-labeled-icon .svg-icon {
  fill: currentColor;
}

/**
 * Decorative SVG (non-essential for understanding)
 * Hide from screen readers
 */
.svg-decorative {
  aria-hidden: "true";
  role: "presentation";
}

/**
 * Semantic SVG (essential for understanding)
 * Ensure proper ARIA labels
 */
.svg-semantic {
  role: "img";
  /* Should have aria-label or aria-labelledby */
}