/* Icon library: {% icon "set/name" %} inline SVGs from static/img/icons/ (docs/styleguide.md "Icon library").
   The SVGs paint with four inputs:
     currentColor        lines (the .icon's `color`)
     --icon-accent       accent strokes (thin lines: accessible accent on light tones)
     --icon-accent-fill  accent fills (areas: the soft mint on light tones)
     --icon-surface      occluding "paper" fills (the background the icon sits on)
   Tones set them below; components with their own background set --icon-surface. Tokens only, no hex here. */

.icon { display: inline-block; flex: none; vertical-align: middle; overflow: visible; }
svg.icon { max-width: none; } /* never squeezed by the img/svg max-width reset */

/* Line colour. ui-14 glyphs always follow the text colour; the two-tone line-32 and spot-96 drawings use
   --icon-line, which is the text colour on light tones and a quieter grey on dark tones (the theme's line art
   on dark was a dim grey with the mint carrying the drawing). */
.icon--line-32, .icon--spot-96 { color: var(--icon-line, currentColor); }
.icon.icon--inherit { color: inherit; } /* opt out: lines follow the surrounding text colour */

/* ---- tones -------------------------------------------------------------------------------------------- */
:root, body, .tone-black, .tone-dark, .tone-dark-grey {
  --icon-accent: var(--primary);
  --icon-accent-fill: var(--primary);
  --icon-surface: var(--surface, transparent);
  --icon-line: var(--light-grey);
}
.tone-white, .tone-light {
  --icon-accent: var(--accent-large-on-light);  /* >= 3:1 for thin accent strokes */
  --icon-accent-fill: var(--secondary);          /* accent areas under a dark line: the theme's soft mint */
  --icon-surface: var(--surface, transparent);
  --icon-line: currentColor;
}

/* components that sit on their own background */
.topic-card { --icon-surface: var(--card); }
/* support pages: .cat-card, .guide-card, .help-contact … set it in static/css/pages/support.css */
.nav-card { --icon-surface: transparent; } /* translucent card in the (dark) header dropdown */

/* ---- links and buttons -------------------------------------------------------------------------------- */
/* Icons inside links/buttons follow the control: lines take the link colour on hover/focus. */
:is(a, button):is(:hover, :focus-visible) .icon { --icon-line: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .icon { transition: color var(--transition); }
}

/* ---- inside existing components ----------------------------------------------------------------------
   Sizes come from the tag (size=…) or from the component's own class (.cat-card__icon, .guide-card__icon,
   .nav-card__icon, .feature__icon); these only replace rules that components.css writes for <img>. */
.icon-list .icon { margin-top: 1px; }
.tabs__tab .icon { margin-right: 8px; }