/* ═══ SVG Icon System ═══
   Usage: <svg class="icon"><use href="/assets/img/icons.svg#i-image"></use></svg>
   Sizes: icon--sm (14px), default (18px), icon--lg (24px), icon--xl (32px)
*/

.icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
}
.icon--sm { width: 14px; height: 14px; }
.icon--lg { width: 24px; height: 24px; }
.icon--xl { width: 32px; height: 32px; }
.icon--2xl { width: 40px; height: 40px; }

/* Remove stroke for filled icons */
.icon--filled { fill: currentColor; stroke: none; }

/* Color variants */
.icon--primary { color: var(--primary-600); }
.icon--success { color: var(--success); }
.icon--error { color: var(--error); }
.icon--muted { color: var(--text-tertiary); }