/* 
 * MetaVirta Global Dashboard Theme
 * Unified Design System for Modern Metallurgical Interface
 */

:root {
    /* Base Colors - Deep Black for Max Contrast */
    --bg-dark: #000000;
    --bg-panel: rgba(15, 23, 42, 0.85);
    /* Slightly more opaque for readability on pure black */
    --bg-card: #0f172a;
    --glass-border: rgba(255, 255, 255, 0.15);

    /* Accents - EXACT IMAGE MATCH (VIBRANT HEAT) */
    --accent-red: #ff3d00;    /* Vibrant Red-Orange */
    --accent-orange: #ff9d00; /* Rich Safety Orange */
    --accent-yellow: #ffea00; /* Bright Neon Yellow */
    --accent-gold: var(--accent-yellow);
    --accent-green: #10b981;  /* Emerald Green for Career/Success */

    /* Semantic Mappings */
    --accent-primary: var(--accent-orange);
    --accent-secondary: var(--accent-red);
    --accent-heat: var(--accent-red);

    /* Glows - BOOSTED RADIANCE */
    --glow-primary: rgba(255, 157, 0, 0.6);
    --glow-secondary: rgba(255, 61, 0, 0.6);
    --glow-yellow: rgba(255, 234, 0, 0.6);
    --glow-green: rgba(16, 185, 129, 0.6);

    /* Text */
    --text-main: #ffffff;
    --text-muted: #e2e8f0;
    --text-dim: #94a3b8;

    /* Gradients */
    --grad-primary: linear-gradient(135deg, #ff3d00 0%, #ff9d00 50%, #ffea00 100%);
    --grad-magma: linear-gradient(135deg, #ff3d00 0%, #ffea00 100%);
    --grad-fire: linear-gradient(135deg, #ff3d00 10%, #ff9d00 90%);
    --grad-sunset: linear-gradient(135deg, #ff3d00 0%, #ff9d00 100%);
}

/* Heat Utility Classes */
.heat-red { --accent-local: var(--accent-red); --glow-local: var(--glow-secondary); }
.heat-orange { --accent-local: var(--accent-orange); --glow-local: var(--glow-primary); }
.heat-yellow { --accent-local: var(--accent-yellow); --glow-local: var(--glow-yellow); }

/* Common Hover Effects */
.nav-item:hover i, .nav-item.active i {
    color: var(--accent-local, var(--accent-primary));
    text-shadow: 0 0 10px var(--glow-local, var(--glow-primary));
}

.btn-primary {
    background: var(--grad-primary);
    border: none;
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 15px var(--glow-primary);
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--glow-primary);
}