/* =============================================================================
   Icons — sizing tokens + base utilities
   -----------------------------------------------------------------------------
   Fractal icons are thin, single-color, stroke-only SVGs on a 32×32 grid.
   The stroke is authored at 2 units and scales with the rendered size
   (1px @ 16 · 1.5px @ 24 · 2px @ 32). See icons-guide.md.
   ========================================================================== */

:root {
  /* Rendered sizes (px). The 32-unit viewBox stroke scales to match. */
  --icon-size-sm: 16px; /* dense UI chrome, inline-with-text          */
  --icon-size-md: 24px; /* default UI size                            */
  --icon-size-lg: 32px; /* emphasis, headers                          */
  --icon-size-xl: 48px; /* feature / empty-state                      */

  /* Authored stroke width, in viewBox user units (32 grid). */
  --icon-stroke: 2;
}

/* -----------------------------------------------------------------------------
   Base class — apply to the <svg> element.
   Inherits text color via currentColor; never fills.
   -------------------------------------------------------------------------- */
.icon {
  display: inline-block;
  flex: none;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: text-bottom; /* aligns to adjacent text baseline */
}

/* Size utilities */
.icon-sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.icon-md { width: var(--icon-size-md); height: var(--icon-size-md); }
.icon-lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.icon-xl { width: var(--icon-size-xl); height: var(--icon-size-xl); }

/* Size to the adjacent text (cap height) when used inline. */
.icon-text { width: 1em; height: 1em; vertical-align: -0.125em; }

/* Muted icon — defer to a color token at the consumer. */
.icon-muted { color: var(--fg-secondary); }