/**
 * MMA Tower - Custom Icon System
 * ================================
 * Premium SVG icons matching brand aesthetic
 * Sleek, modern line icons with gold accent
 * 
 * Usage: <i class="mma-icon mma-icon-[name]"></i>
 * Sizes: mma-icon-sm, mma-icon-md, mma-icon-lg, mma-icon-xl
 * Colors: mma-icon-gold, mma-icon-white, mma-icon-muted
 */

/* ==========================================
   BASE ICON STYLES
   ========================================== */

.mma-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Icon Sizes */
.mma-icon-xs { font-size: 0.75rem; }
.mma-icon-sm { font-size: 1rem; }
.mma-icon-md { font-size: 1.25rem; }
.mma-icon-lg { font-size: 1.5rem; }
.mma-icon-xl { font-size: 2rem; }
.mma-icon-2xl { font-size: 2.5rem; }
.mma-icon-3xl { font-size: 3rem; }
.mma-icon-4xl { font-size: 4rem; }

/* Icon Colors */
.mma-icon-gold { color: #c5a028; }
.mma-icon-gold-light { color: #d4af37; }
.mma-icon-white { color: #ffffff; }
.mma-icon-muted { color: #94a3b8; }
.mma-icon-emerald { color: #10b981; }
.mma-icon-red { color: #ef4444; }
.mma-icon-amber { color: #f59e0b; }
.mma-icon-blue { color: #3b82f6; }

/* Gold Gradient Effect (for special icons) */
.mma-icon-gradient {
    background: linear-gradient(135deg, #d4af37 0%, #c5a028 50%, #a68a1f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glow Effect */
.mma-icon-glow {
    filter: drop-shadow(0 0 8px rgba(197, 160, 40, 0.5));
}

/* Animation Classes */
.mma-icon-spin {
    animation: mma-spin 1s linear infinite;
}

.mma-icon-pulse {
    animation: mma-pulse 2s ease-in-out infinite;
}

.mma-icon-bounce {
    animation: mma-bounce 1s ease infinite;
}

@keyframes mma-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes mma-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

@keyframes mma-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ==========================================
   ICON CONTAINER FOR INLINE SVG
   ========================================== */

.mma-icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mma-icon-container svg {
    width: 1em;
    height: 1em;
}

/* ==========================================
   ICON BADGE (Icon in circle background)
   ========================================== */

.mma-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(197, 160, 40, 0.2) 0%, rgba(197, 160, 40, 0.1) 100%);
    border: 1px solid rgba(197, 160, 40, 0.3);
}

.mma-icon-badge-solid {
    background: linear-gradient(135deg, #c5a028 0%, #a68a1f 100%);
    color: #0a0a0f;
}

.mma-icon-badge-outline {
    background: transparent;
    border: 2px solid #c5a028;
    color: #c5a028;
}

/* Archetype Badge Variants */
.mma-icon-badge-insurgent {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.mma-icon-badge-sage {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.mma-icon-badge-sovereign {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}