/**
 * Icon block — atomic primitive.
 *
 * Square container for an SVG icon. Tints the icon, keeps it on the
 * 4pt grid, and pairs cleanly with text in cards / hero blocks.
 *
 * Markup pattern — wrap any SVG in a container with the right size:
 *   <span class="ds-icon ds-icon--md ds-icon--brand">
 *     <svg viewBox="0 0 24 24" aria-hidden="true">...</svg>
 *   </span>
 *
 * Sized with `--ds-icon-size`, recolored via `currentColor` on the SVG
 * (set `stroke="currentColor"` or `fill="currentColor"` in your SVG).
 *
 * Anti-pattern reminder (per sugoi-brand-guidelines):
 *   • No emoji as icons. Use real SVG only.
 *   • Real Heroicons-style stroke icons preferred over filled.
 *   • Do NOT recreate the Sugoi logo via icon-block — use the logo SVG.
 */

.ds-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: var(--ds-icon-size, var(--ds-space-md));
  height: var(--ds-icon-size, var(--ds-space-md));

  color: currentColor;
  vertical-align: middle;
}

.ds-icon > svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ─── Sizes ──────────────────────────────────────────────────── */
.ds-icon--xs { --ds-icon-size: var(--ds-space-sm); }   /* 16px — inline within text */
.ds-icon--sm { --ds-icon-size: var(--ds-space-md); }   /* 24px — buttons, labels */
.ds-icon--md { --ds-icon-size: var(--ds-space-lg); }   /* 32px — card heads */
.ds-icon--lg { --ds-icon-size: var(--ds-space-xl); }   /* 48px — feature headers */
.ds-icon--xl { --ds-icon-size: var(--ds-space-2xl); }  /* 64px — hero callouts */

/* ─── Color modifiers ────────────────────────────────────────── */
.ds-icon--brand    { color: var(--ds-color-brand-primary); }
.ds-icon--action   { color: var(--ds-color-brand-action); }
.ds-icon--warm     { color: var(--ds-color-brand-warm); }
.ds-icon--inverse  { color: var(--ds-color-text-inverse); }
.ds-icon--muted    { color: var(--ds-color-text-muted); }
.ds-icon--current  { color: currentColor; }

/* ─── Surface modifier — circular tinted background ──────────── */
.ds-icon--bg {
  background: var(--ds-color-surface-sunken);
  border-radius: var(--ds-radius-full);
  padding: var(--ds-space-2xs);
}
.ds-icon--bg-brand {
  background: var(--ds-color-brand-primary);
  color: var(--ds-color-text-inverse);
  border-radius: var(--ds-radius-full);
  padding: var(--ds-space-2xs);
}