/* 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: the text colour on light tones, a quieter grey on dark tones (the green carries 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 --------------------------------------------------------------------------------------------
   light (white, light): lines #191919, accent strokes green-600 (>= 3:1 for thin lines), accent areas brand green
   mint:                 the same, accent strokes green-700 (green-600 is 2.9 on the pale green)
   dark (dark, black, dark-grey): lines #b3b3b3, accents brand green (9.59 / 7.72)
   green:                lines and accent strokes #191919, accent areas white                                  */
:root, .tone-white, .tone-light, .tone-mint {
  --icon-accent: var(--gp-green-600);
  --icon-accent-fill: var(--gp-green);
  --icon-surface: var(--surface, transparent);
  --icon-line: currentColor;
}
.tone-mint { --icon-accent: var(--gp-green-700); }
.tone-black, .tone-dark, .tone-dark-grey {
  --icon-accent: var(--gp-green);
  --icon-accent-fill: var(--gp-green);
  --icon-surface: var(--surface, transparent);
  --icon-line: var(--gp-grey-on-dark);
}
.tone-green {
  --icon-accent: var(--gp-dark);
  --icon-accent-fill: var(--gp-light);
  --icon-surface: var(--surface, transparent);
  --icon-line: var(--gp-dark);
}

/* components that sit on their own background */
.topic-card, .nav-card, .card, .testimonial, .price-card { --icon-surface: var(--card); }
.card--shadow, .card--raised { --icon-surface: var(--gp-light); }
/* support pages: .cat-card, .guide-card, .help-contact … set it in static/css/pages/support.css */

/* ---- 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; }