@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* Base Styles */
body {
    font-family: 'Manrope', sans-serif;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

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

/* Custom UI Effects */
.glass-nav {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.85);
}

.primary-gradient {
    background: linear-gradient(135deg, #29ABE2 0%, #0071BC 100%);
}

.accent-gradient {
    background: linear-gradient(135deg, #F15A24 0%, #FBB03B 100%);
}

.ihui-gradient {
    background: linear-gradient(135deg, #29ABE2 0%, #004d6e 100%);
}

.sky-depth {
    background-color: #f0f9ff;
}

/* Animations that are not natively in Tailwind CDN */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
}

/* Secure inputs */
input, button, textarea {
    font-family: inherit;
    /* Security: disable certain default HTML injections visually */
}

.language-btn {
    color: #64748b;
}

.language-btn.is-active {
    background: #29ABE2;
    color: #ffffff;
}