/**
 * Sistema de Ícones Profissionais - Jurnly
 * Estilos para ícones SVG Lucide Icons
 */

/* Container de ícones */
.icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* Ícones SVG Lucide */
.lucide-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
}

/* Tamanhos padrão */
.icon-xs {
    width: 12px;
    height: 12px;
}

.icon-sm {
    width: 16px;
    height: 16px;
}

.icon-md {
    width: 20px;
    height: 20px;
}

.icon-lg {
    width: 24px;
    height: 24px;
}

.icon-xl {
    width: 32px;
    height: 32px;
}

.icon-2xl {
    width: 48px;
    height: 48px;
}

/* Cores de ícones */
.icon-primary {
    color: var(--blue-royal);
}

.icon-secondary {
    color: var(--text-secondary);
}

.icon-success {
    color: var(--success);
}

.icon-warning {
    color: var(--warning);
}

.icon-error {
    color: var(--error);
}

.icon-white {
    color: white;
}

/* Ícones em contexto */
.module-icon {
    width: 48px;
    height: 48px;
    color: var(--blue-royal);
    margin-bottom: var(--spacing-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-icon {
    width: 32px;
    height: 32px;
    color: var(--blue-royal);
    margin-bottom: var(--spacing-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dimension-icon {
    width: 24px;
    height: 24px;
    color: var(--blue-royal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.use-case-icon {
    width: 48px;
    height: 48px;
    color: var(--blue-royal);
    margin-bottom: var(--spacing-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animações sutis */
.lucide-icon {
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.lucide-icon:hover {
    transform: scale(1.1);
}

/* Espaçamento com texto */
.lucide-icon + span,
span + .lucide-icon {
    margin-left: var(--spacing-1);
}

/* Alinhamento em listas */
ul li .lucide-icon,
ol li .lucide-icon {
    margin-right: var(--spacing-2);
    vertical-align: middle;
}