/* =============================================================================
   LUXING DASHBOARD — ICON SYSTEM (Lucide)
   Usage:
     <svg class="lx-icon"><use href="#lx-icon-home"/></svg>
     <svg class="lx-icon lx-icon-lg"><use href="#lx-icon-sparkles"/></svg>
   ============================================================================= */

.lx-icon {
    display: inline-block;
    width: 1.125em;
    height: 1.125em;
    vertical-align: -0.2em;
    flex-shrink: 0;
    stroke-width: 1.75;
    transition: transform var(--lx-transition-fast), color var(--lx-transition-fast);
}

/* Tailles explicites */
.lx-icon-xs { width: 0.875em; height: 0.875em; }
.lx-icon-sm { width: 1em;     height: 1em;     }
.lx-icon-md { width: 1.25em;  height: 1.25em;  }
.lx-icon-lg { width: 1.5em;   height: 1.5em;   }
.lx-icon-xl { width: 2em;     height: 2em;     }
.lx-icon-2xl{ width: 2.5em;   height: 2.5em;   }

/* Tailles absolues (pixel-perfect) */
.lx-icon-16 { width: 16px; height: 16px; }
.lx-icon-18 { width: 18px; height: 18px; }
.lx-icon-20 { width: 20px; height: 20px; }
.lx-icon-24 { width: 24px; height: 24px; }
.lx-icon-32 { width: 32px; height: 32px; }

/* Stroke weight variants */
.lx-icon-thin   { stroke-width: 1.25; }
.lx-icon-bold   { stroke-width: 2.25; }

/* Couleurs sémantiques */
.lx-icon-muted   { color: var(--lx-text-muted); }
.lx-icon-accent  { color: var(--lx-accent); }
.lx-icon-gold    { color: var(--lx-highlight); }
.lx-icon-success { color: var(--lx-success-500); }
.lx-icon-warning { color: var(--lx-warning-500); }
.lx-icon-danger  { color: var(--lx-danger-500); }

/* Conteneur rond style "tile" (pour KPI cards, action buttons) */
.lx-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--lx-radius-md);
    background: var(--lx-bg-subtle);
    color: var(--lx-text-body);
    transition: background var(--lx-transition-fast), color var(--lx-transition-fast);
}
.lx-icon-tile .lx-icon { width: 20px; height: 20px; }
.lx-icon-tile-lg { width: 48px; height: 48px; }
.lx-icon-tile-lg .lx-icon { width: 24px; height: 24px; }

.lx-icon-tile-accent { background: var(--lx-accent-soft); color: var(--lx-accent); }
.lx-icon-tile-gold   { background: var(--lx-highlight-soft); color: var(--lx-highlight-hover); }
.lx-icon-tile-success{ background: var(--lx-success-50); color: var(--lx-success-600); }
.lx-icon-tile-info   { background: var(--lx-info-50); color: var(--lx-info-600); }
.lx-icon-tile-warning{ background: var(--lx-warning-50); color: var(--lx-warning-600); }

/* Tile gradient (usage hero cards) */
.lx-icon-tile-gradient-brand {
    background: var(--lx-gradient-brand);
    color: var(--lx-neutral-0);
}
.lx-icon-tile-gradient-gold {
    background: var(--lx-gradient-gold);
    color: var(--lx-neutral-0);
}

/* Micro-animation sur hover parent (ex. boutons) */
.lx-btn:hover .lx-icon-arrow-anim,
.lx-card-link:hover .lx-icon-arrow-anim {
    transform: translateX(2px);
}