Using CSS vars to style SVG symbols

When using SVG symbol sprites with `<use href="#id">`, CSS selectors can't style inner elements because the `<use>` element creates a shadow root. CSS custom properties (variables) are the one thing that crosses this shadow boundary. By defining a `<style>` block inside the SVG sprite that maps CSS variables to fill properties (e.g., `.bg { fill: var(--bg-fill, currentColor); }`), you can control the appearance of individual symbol layers by setting inline style variables on the wrapper element. The `currentColor` fallback ensures symbols render sensibly without explicit variables.