:root {
    /* Typography tokens */
    --font-size-12: 0.75rem;
    --font-size-13: 0.8125rem;
    --font-size-14: 0.875rem;
    --font-size-15: 0.9375rem;
    --font-size-16: 1rem;
    --font-size-18: 1.125rem;
    --font-size-20: 1.25rem;
    --font-size-22: 1.375rem;
    --font-size-23: 1.4375rem;
    --font-size-24: 1.5rem;
    --font-size-26: 1.625rem;
    --font-size-28: 1.75rem;
    --font-size-32: 2rem;
    --font-size-36: 2.25rem;
    --font-size-40: 2.5rem;
    --font-size-42: 2.625rem;
    --font-size-44: 2.75rem;
    --font-size-48: 3rem;
    --font-size-53: 3.3125rem;
    --font-size-58: 3.625rem;
    --font-size-60: 3.75rem;
    --font-size-64: 4rem;
    --font-size-75: 4.6875rem;
    --font-size-52: 3.25rem;

    --type-caption: var(--font-size-12);
    --type-label-xs: var(--font-size-13);
    --type-label-sm: var(--font-size-14);
    --type-body-sm: var(--font-size-15);
    --type-body-md: var(--font-size-16);
    --type-body-lg: var(--font-size-18);
    --type-subheading: var(--font-size-20);
    --type-heading-sm: var(--font-size-22);
    --type-nav: var(--font-size-23);
    --type-heading-md: var(--font-size-24);
    --type-heading-lg: var(--font-size-26);
    --type-title-sm: var(--font-size-28);
    --type-title-md: var(--font-size-32);
    --type-title-lg: var(--font-size-36);
    --type-display-sm: var(--font-size-40);
    --type-display-md: var(--font-size-42);
    --type-display-lg: var(--font-size-44);
    --type-hero-sm: var(--font-size-48);
    --type-hero-md: var(--font-size-53);
    --type-hero-lg: var(--font-size-58);
    --type-hero-xl: var(--font-size-60);
    --type-banner: var(--font-size-64);
    --type-banner-xl: var(--font-size-75);
    --type-section: var(--font-size-52);

    --text-xs: var(--type-caption);
    --text-sm: var(--type-label-sm);
    --text-base: var(--type-body-md);
    --text-lg: var(--type-body-lg);
    --text-xl: var(--type-subheading);
    --text-2xl: var(--type-heading-md);
    --text-title: var(--type-title-lg);
    --text-3xl: var(--type-hero-sm);
    --text-4xl: var(--type-banner);

    /* Content defaults */
    --main-text-size: 1.0625rem;
    --main-text-line-height: 1.78;
}

/* Keep homepage body size unchanged at 16px baseline */
body {
    font-size: var(--type-body-md);
}

/* Global content typography baseline */
main p,
main li {
    font-size: var(--main-text-size);
    line-height: var(--main-text-line-height);
}

main h1 {
    font-size: clamp(2rem, 2.5vw, 2.875rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
}

main h2 {
    font-size: clamp(1.5rem, 1.5vw, 2rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

main h3 {
    font-size: clamp(1.25rem, 1.15vw, 1.5rem);
    line-height: 1.35;
}

@media (max-width: 1024px) {
    :root {
        --main-text-size: 1rem;
        --main-text-line-height: 1.72;
    }
}

@media (max-width: 768px) {
    main h1 {
        font-size: 2rem;
    }

    main h2 {
        font-size: 1.5rem;
    }

    main h3 {
        font-size: 1.25rem;
    }
}

@media (max-width: 576px) {
    :root {
        --main-text-size: 0.9375rem;
        --main-text-line-height: 1.68;
    }

    main h1 {
        font-size: 1.75rem;
    }

    main h2 {
        font-size: 1.3125rem;
    }

    main h3 {
        font-size: 1.125rem;
    }
}