@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=DM+Serif+Display&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'DM Serif Display', serif;
    letter-spacing: -0.02em;
}

/* Custom Accent Color Configuration - #A9C4A6 */
.bg-accent {
    background-color: #A9C4A6;
}

.text-accent {
    color: #A9C4A6;
}

.border-accent {
    border-color: #A9C4A6;
}

/* Using a slightly darker shade for hover to ensure visibility */
.hover-bg-accent:hover {
    background-color: #9ab495;
}

.ring-accent {
    --tw-ring-color: #A9C4A6;
}

/* Smooth transitions for toggle */
.fade-in {
    animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Blog specific fade-in variant (slower, larger movement) */
.fade-in-slow {
    opacity: 0;
    animation: fadeInSlow 0.8s ease-out forwards;
}

@keyframes fadeInSlow {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hide scrollbar for the phone mockup */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}