/* Arcane Circuits icons.
   Use:  <svg class="ac-icon" aria-hidden="true"><use href="sprite.svg#ac-hat"/></svg>
   The icon takes the text colour (currentColor). Tint the optional duotone layer
   with --ac-icon-accent on any ancestor; .ac-icon--glow sets it to --glow. */

.ac-icon {
  width: 1em;
  height: 1em;
  flex: none;
  display: inline-block;
  vertical-align: -0.125em;
  color: inherit;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* Sizes (the icons are drawn for 16, 24 and 48; others scale cleanly). */
.ac-icon--xs { width: 12px; height: 12px; }
.ac-icon--sm { width: 16px; height: 16px; }
.ac-icon--md { width: 24px; height: 24px; }
.ac-icon--lg { width: 32px; height: 32px; }
.ac-icon--xl { width: 48px; height: 48px; }

/* The duotone layer: a faint fill that pages can tint. Icons read without it. */
.ac-icon .ac-icon-accent {
  fill: var(--ac-icon-accent, currentColor);
  opacity: var(--ac-icon-accent-opacity, 0.2);
}

/* Glow variant: tints the duotone layer with the --glow token and lights the line. */
.ac-icon--glow {
  --ac-icon-accent: var(--glow, #47cfd4);
  --ac-icon-accent-opacity: 0.35;
  color: var(--glow, #47cfd4);
  filter: drop-shadow(0 0 3px var(--glow, #47cfd4));
}

/* Quiet variant: no duotone layer at all. */
.ac-icon--plain { --ac-icon-accent-opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ac-icon { transition: none; }
}