/* ============================================
   ArchiTail AI — Icon System
   ============================================

   Usage:
     <i class="icon icon-search"></i>

   How it works:
   - Each icon is an individual .svg file in /assets/icons/
   - icons.js auto-loads the SVG and injects it inline
   - Icons inherit color via CSS currentColor
   - To swap any icon: replace the .svg file, refresh page

   ============================================ */

/* Icon container */
.icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Injected SVG inside .icon */
.icon > svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Filled icons (like ruler) — override stroke to fill */
.icon-filled > svg {
  fill: currentColor;
  stroke: none;
}

/* Size variants */
.icon-sm, .icon-sm > svg { width: 16px; height: 16px; }
.icon-lg, .icon-lg > svg { width: 24px; height: 24px; }
.icon-xl, .icon-xl > svg { width: 32px; height: 32px; }