/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* Global Resets & Typography */
body {
    background-color: #0e0e0e;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    margin: 0;
}

.font-headline {
    font-family: 'Manrope', sans-serif;
}

.font-manrope {
    font-family: 'Manrope', sans-serif;
}

/* Custom UI Components */
.glass-nav {
    background: rgba(14, 14, 14, 0.8) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.glass-header {
    background: rgba(14, 14, 14, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.gradient-text {
    background: linear-gradient(to right, #bd9dff, #34b5fa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.primary-gradient-btn {
    background: linear-gradient(135deg, #bd9dff, #8a4cfc) !important;
}

.project-card {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.tonal-depth-via-blur {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.ghost-border-primary {
    border: 1px solid rgba(189, 157, 255, 0.15);
}

.neon-glow {
    box-shadow: 0 0 40px -10px rgba(189, 157, 255, 0.15);
}

/* Icons */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}