/*! Icon Theme Variables - Theme-aware icon coloring system */

/* Dark theme overrides for icon colors */
.dark {
  --icon-primary: #f9fafb;         /* Off-white - readable on dark backgrounds */
  --icon-secondary: #e5e7eb;       /* Light gray - for secondary icons */ 
  --icon-muted: #d1d5db;          /* Medium gray - for muted/disabled icons */
  --icon-stroke: #f3f4f6;         /* Light stroke color for outlined icons */
}

/* Icon utility classes - following basecoat pattern */
.icon-themed {
  color: var(--icon-primary);
}

.icon-secondary {
  color: var(--icon-secondary);  
}

.icon-muted {
  color: var(--icon-muted);
}

/* Dark mode specific icon utilities */
.dark\:icon-primary {
  &:is(.dark *) {
    color: var(--icon-primary);
  }
}

.dark\:icon-secondary {
  &:is(.dark *) {
    color: var(--icon-secondary);
  }
}

.dark\:icon-muted {
  &:is(.dark *) {
    color: var(--icon-muted);
  }
}

/* Enhanced contrast for accessibility */
.icon-high-contrast {
  color: var(--icon-primary);
  stroke-width: 2.5;
}

/* Special icon states */
.icon-interactive {
  color: var(--icon-primary);
  transition: color 150ms ease-in-out;
}

.icon-interactive:hover {
  color: var(--icon-stroke);
}

/* Dark mode interactive states */
.dark\:icon-interactive:hover {
  &:is(.dark *) {
    color: var(--icon-secondary);
  }
}

/* Ensure SVG icons inherit color properly */
svg.icon-themed,
svg.icon-secondary,
svg.icon-muted,
svg.icon-interactive {
  stroke: currentColor;
  fill: none;
}

/* Special handling for filled icons */
svg.icon-filled {
  fill: currentColor;
  stroke: none;
}

/* Icon size variants with proper scaling */
.icon-xs {
  width: 12px;
  height: 12px;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-md {
  width: 20px;
  height: 20px;
}

.icon-lg {
  width: 24px;
  height: 24px;
}

/* Ensure proper contrast ratios */
@media (prefers-contrast: high) {
  .icon-themed,
  .icon-secondary,
  .icon-muted {
    stroke-width: 2.5;
  }
}

/* Support for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .icon-interactive {
    transition: none;
  }
}