/*
 * Icon: inline SVG sized by font-size, painted with currentColor.
 *
 * The DEFAULT colour is the site's Primary brand colour (the brand screen's "Primary" writes the
 * `color.accent` token). An icon dropped on a page is nearly always decorative brand furniture —
 * a bullet, a feature badge, a social link — so inheriting body text made every new one land grey
 * and need colouring by hand. `currentColor` remains the fallback for a site with no brand token,
 * which is the old behaviour, and anything set on the element still wins: this rule is in
 * `loom.base`, the lowest cascade layer.
 */
/*
 * The element's own DEFAULTS live in `loom.base`, the lowest cascade layer, so anything the
 * architect sets on the element (compiled into `loom.elements`) wins. Unlayered they would not:
 * unlayered CSS beats EVERY layer, which is why an icon's colour and size could be set in the
 * inspector, compiled correctly, and still never take effect. Only the element's own baseline
 * rule moves — the widget's internal machinery below stays unlayered so it keeps winning.
 */
@layer loom.base { .lm-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; font-size: 24px; color: var(--lm-color-accent, currentColor); } }
.lm-icon svg { display: block; }