/* ============== UNIFIED ICON SYSTEM ============== */
/* Lucide-style, hairline 1.5px stroke, rounded caps & joins.
   All instances share these defaults so size & color come from context. */

.icon {
  display: inline-block;
  vertical-align: middle;
  width: 20px; height: 20px;
  flex-shrink: 0;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke: currentColor;
  /* crisp on hi-dpi */
  shape-rendering: geometricPrecision;
  overflow: visible;
}
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 16px; height: 16px; }
.icon-lg { width: 18px; height: 18px; }
.icon-xl { width: 20px; height: 20px; }
.icon-2xl { width: 24px; height: 24px; }
.icon-3xl { width: 28px; height: 28px; }
.icon-4xl { width: 48px; height: 48px; }

/* the brand monogram is a logo, not an icon — keep crisp but heavier stroke is allowed */
.icon-monogram { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }

/* solid (filled) variants used where appropriate */
.icon[data-fill="true"] { fill: currentColor; stroke: none; }