/* Global Base Styles - Typography and Elements */

/* Global Font Settings */
body {
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    color: #000000;
}

/* Typography - Headings */
/* Mobile-first typography: Start with mobile sizes, scale up for larger screens */

/* Mobile (default) */
h1, .h1 {
    font-size: 38px;
    line-height: 116%;
    font-weight: 700;
    color: var(--color-heading);
}

h2, .h2 {
    font-size: 31px;
    line-height: 116%;
    font-weight: 600;
    color: var(--color-heading);
}

h3, .h3 {
    font-size: 26px;
    font-weight: 600;
    line-height: 48px;
    color: var(--color-heading);
}

h4, .h4 {
    font-size: 20px;
    line-height: 160%;
    color: var(--color-heading);
}

h5, .h5 {
    font-size: 18px;
    font-weight: 600;
    line-height: 160%;
    color: var(--color-heading);
}

h6, .h6 {
    font-size: 16px;
    color: var(--color-heading);
}

p {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 160%;
    color: var(--color-text);
}

a, .btn-link {
    color: #0071c1;
}

h1:focus {
    outline: none;
}

/* Tablet (769px+) */
@media (min-width: 769px) {
    h1, .h1 {
        font-size: 52px;
        line-height: 60px;
    }

    h2, .h2 {
        font-size: 40px;
        line-height: 48px;
    }

    h3, .h3 {
        font-size: 32px;
    }

    h4, .h4 {
        font-size: 22px;
        line-height: 36px;
    }

    p {
        line-height: 26px;
    }
}

/* Desktop (1025px+) */
@media (min-width: 1025px) {
    h1, .h1 {
        font-size: 64px;
        line-height: 77px;
    }

    h2, .h2 {
        font-size: 48px;
        line-height: 56px;
    }

    h3, .h3 {
        font-size: 40px;
    }
}