/* Phoros UI icon helper
 * ─────────────────────
 * Tiny stylesheet that gives <svg class="phoros-icon"> a sensible default
 * size, color inheritance, and dark-mode accent shift. Pair with the
 * `assets/icons/phoros-icons.svg` sprite:
 *
 *   <svg class="phoros-icon" aria-hidden="true">
 *     <use href="/assets/icons/phoros-icons.svg#icon-arrow-right" />
 *   </svg>
 *
 * To recolor the anchor dot, set `--phoros-accent` on the icon (or any
 * ancestor): `<svg class="phoros-icon" style="--phoros-accent: #ef4444">`.
 */

.phoros-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.2em;
  color: currentColor;             /* drives the linework via stroke="currentColor" */
  --phoros-accent: #4338CA;        /* indigo anchor dot */
  flex-shrink: 0;
}

/* Dark-mode shift mirrors the global token swap */
:root.dark .phoros-icon,
:root[data-theme="dark"] .phoros-icon,
.theme-dark .phoros-icon {
  --phoros-accent: #8B82FF;
}

/* Size utility classes */
.phoros-icon.is-sm { width: 1em;    height: 1em; }       /* 16px @ 16px body */
.phoros-icon.is-md { width: 1.25em; height: 1.25em; }    /* default */
.phoros-icon.is-lg { width: 1.5em;  height: 1.5em; }     /* 24px @ 16px body */
.phoros-icon.is-xl { width: 2em;    height: 2em; }