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

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--neutral-800);
    background-color: var(--neutral-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--neutral-900);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-4);
}

.heading-hero {
    font-size: var(--text-6xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
}

.heading-section {
    font-size: var(--text-4xl);
    font-weight: var(--weight-semibold);
}

.body-large {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--neutral-700);
}

.body-regular {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

/* Fluid Typography for Mobile */
@media (max-width: 768px) {
    .heading-hero {
        font-size: var(--text-4xl);
    }

    .heading-section {
        font-size: var(--text-3xl);
    }
}