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

/* Global Resets */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #475569; /* slate-600 */
    background: #FAFAF9; /* stone-50 */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Slab', serif;
    color: #1E293B; /* slate-800 */
}

/* Scroll reveal classes */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Navbar scrolled state */
#navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #F1F5F9; /* slate-100 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}