/* ======================================================================
   Yolt v11 — icon base styles
   Source: _DESIGN_HANDOFF/_DESIGN_BATCH_1_block-icons.html (CD ship 2026-05-10)
   Paint via consuming class — `.icon` itself only sizes + sets stroke=currentColor.
   ====================================================================== */

.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  flex: none;
  color: currentColor;
}
.icon svg,
svg.icon {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Size variants — matched to registered SVG variants in icons.js
   (only icons that ship size-specific SVGs honour these explicitly;
    others simply scale via width/height). */
.icon-sm,
.icon.icon-sm,
svg.icon.icon-sm { width: 16px; height: 16px; stroke-width: 1.25; }

.icon-md,
.icon.icon-md,
svg.icon.icon-md { width: 20px; height: 20px; stroke-width: 1.4; }

.icon-lg,
.icon.icon-lg,
svg.icon.icon-lg { width: 32px; height: 32px; stroke-width: 1.6; }

/* Tone helpers — hook for tinting via semantic tokens.
   Apply on a parent or directly on the icon: <span class="icon-tone-good"><svg class="icon" ...></span> */
.icon-tone-brand { color: var(--brand); }
.icon-tone-good  { color: var(--good);  }
.icon-tone-warn  { color: var(--warn);  }
.icon-tone-bad   { color: var(--bad);   }
.icon-tone-info  { color: var(--info);  }
.icon-tone-mute  { color: var(--ink-3); }