/* ============================================================
 * Taiyaari 360 — Font Awesome Icon System
 * Consistent sizing, alignment, and animation tokens
 * ============================================================ */

.icon,
i.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1;
    text-align: center;
    color: currentColor;
    font-style: normal;
}

/* Preserve Font Awesome font families (do not inherit site fonts) */
i.icon.fa-solid,
.icon.fa-solid {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

i.icon.fa-regular,
.icon.fa-regular {
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
}

i.icon.fa-brands,
.icon.fa-brands {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
}

/* Optical size tokens — match component `size` prop */
i.icon.icon-12, .icon.icon-12 { font-size: 12px; min-width: 12px; }
i.icon.icon-14, .icon.icon-14 { font-size: 14px; min-width: 14px; }
i.icon.icon-16, .icon.icon-16 { font-size: 16px; min-width: 16px; }
i.icon.icon-18, .icon.icon-18 { font-size: 18px; min-width: 18px; }
i.icon.icon-20, .icon.icon-20 { font-size: 20px; min-width: 20px; }
i.icon.icon-22, .icon.icon-22 { font-size: 22px; min-width: 22px; }
i.icon.icon-24, .icon.icon-24 { font-size: 24px; min-width: 24px; }
i.icon.icon-26, .icon.icon-26 { font-size: 26px; min-width: 26px; }
i.icon.icon-28, .icon.icon-28 { font-size: 28px; min-width: 28px; }
i.icon.icon-32, .icon.icon-32 { font-size: 32px; min-width: 32px; }
i.icon.icon-40, .icon.icon-40 { font-size: 40px; min-width: 40px; }
i.icon.icon-48, .icon.icon-48 { font-size: 48px; min-width: 48px; }
i.icon.icon-64, .icon.icon-64 { font-size: 64px; min-width: 64px; }

/* Contextual sizing */
.sidebar-link .icon { font-size: 20px; min-width: 20px; }
.topbar-search .icon { font-size: 18px; min-width: 18px; }
.btn .icon { pointer-events: none; }
.btn-sm .icon { font-size: 16px; min-width: 16px; }
.alert .icon { font-size: 20px; min-width: 20px; flex-shrink: 0; }
.kpi-card .icon { font-size: 24px; min-width: 24px; }
.empty-state-icon { font-size: 48px; min-width: 48px; opacity: 0.45; }
.social-links .icon { font-size: 18px; min-width: 18px; }

/* Animation */
.icon-spin,
.fa-spin,
.spin-icon {
    animation: iconSpin 0.8s linear infinite;
}

@keyframes iconSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Theme-aware contrast */
[data-theme="dark"] .icon {
    color: currentColor;
}