:root {    
    --accent-100: #FF1940;

    --app-background-100: #FFFFFF;
    --app-background-200: #E5FFF9;
    --app-background-300: #FFF5D9;

    --primary-button-100: #FFD966;
    --primary-button-200: var(--mono-400);
    --primary-button-300: var(--mono-400);

    --mono-100: #19191A;
    --mono-200: #555657;
    --mono-300: #78797A;
    --mono-400: #C8CACC;
    --mono-500: #F5F7FA;
    --mono-600: #FFFFFF;

    --focus-indicator: #FFF2AB;

    --max-content-width: 1440px;
    --content-inset-1440: 80px;
    --content-inset-800: 40px;
    --content-inset-375: 20px;
    --content-inset: var(--content-inset-1440);

    --margin-vertical-1440: 80px;
    --margin-vertical-800: 60px;
    --margin-vertical-375: 40px;
    --margin-vertical: var(--margin-vertical-1440);

    --logo-width-1440: 160px;
    --logo-width-800: 140px;
    --logo-width-375: 90px;
    --logo-width: var(--logo-width-1440);

    --max-character-width-for-h: 12ch;
    --max-character-width-for-p: 50ch;

    /* --header-top-space: 2rem;
    --header-bottom-space: 4rem;
    --section-top-space: 4rem;
    --section-bottom-space: 4rem;
    
    --spinner-size: 24px;
    --spinner-thickness: 3px;

    --img-logo-height: 44px;
    --nav-padding-desktop: 32px;
    --nav-padding-mobile: 20px;

    --nav-height-desktop: calc(var(--img-logo-height) + calc(var(--nav-padding-desktop) * 2.0));
    --nav-height-mobile: calc(var(--img-logo-height) + calc(var(--nav-padding-mobile) * 2.0));

    --max-character-width: 55ch; */

    /* H1 */
    --h1-font-size-1440: 100px;
    --h1-line-height-1440: 96px;
    --h1-margin-top-1440: 151px;
    --h1-margin-bottom-1440: 50px;
    
    --h1-font-size-800: 69px;
    --h1-line-height-800: 69px;
    --h1-margin-top-800: 103px;
    --h1-margin-bottom-800: 34px;

    --h1-font-size-375: 36px;
    --h1-line-height-375: 36px;
    --h1-margin-top-375: 55px;
    --h1-margin-bottom-375: 18px;

    --h1-font-size: var(--h1-font-size-1440);
    --h1-line-height: var(--h1-line-height-1440);
    --h1-margin-top: var(--h1-margin-top-1440);
    --h1-margin-bottom: var(--h1-margin-bottom-1440);

    /* H2 */
    --h2-font-size-1440: 76px;
    --h2-line-height-1440: 76px;
    --h2-margin-top-1440: 114px;
    --h2-margin-bottom-1440: 38px;
    
    --h2-font-size-800: 55px;
    --h2-line-height-800: 55px;
    --h2-margin-top-800: 82px;
    --h2-margin-bottom-800: 27px;

    --h2-font-size-375: 32px;
    --h2-line-height-375: 32px;
    --h2-margin-top-375: 49px;
    --h2-margin-bottom-375: 16px;

    --h2-font-size: var(--h2-font-size-1440);
    --h2-line-height: var(--h2-line-height-1440);
    --h2-margin-top: var(--h2-margin-top-1440);
    --h2-margin-bottom: var(--h2-margin-bottom-1440);

    /* H3 */
    --h3-font-size-1440: 57px;
    --h3-line-height-1440: 65px;
    --h3-margin-top-1440: 85px;
    --h3-margin-bottom-1440: 28px;
    
    --h3-font-size-800: 44px;
    --h3-line-height-800: 51px;
    --h3-margin-top-800: 66px;
    --h3-margin-bottom-800: 22px;

    --h3-font-size-375: 29px;
    --h3-line-height-375: 33px;
    --h3-margin-top-375: 43px;
    --h3-margin-bottom-375: 14px;

    --h3-font-size: var(--h3-font-size-1440);
    --h3-line-height: var(--h3-line-height-1440);
    --h3-margin-top: var(--h3-margin-top-1440);
    --h3-margin-bottom: var(--h3-margin-bottom-1440);

    /* H4 */
    --h4-font-size-1440: 43px;
    --h4-line-height-1440: 49px;
    --h4-margin-top-1440: 64px;
    --h4-margin-bottom-1440: 21px;
    
    --h4-font-size-800: 35px;
    --h4-line-height-800: 40px;
    --h4-margin-top-800: 53px;
    --h4-margin-bottom-800: 18px;

    --h4-font-size-375: 26px;
    --h4-line-height-375: 29px;
    --h4-margin-top-375: 38px;
    --h4-margin-bottom-375: 13px;

    --h4-font-size: var(--h4-font-size-1440);
    --h4-line-height: var(--h4-line-height-1440);
    --h4-margin-top: var(--h4-margin-top-1440);
    --h4-margin-bottom: var(--h4-margin-bottom-1440);

    /* H5 */
    --h5-font-size-1440: 32px;
    --h5-line-height-1440: 37px;
    --h5-margin-top-1440: 48px;
    --h5-margin-bottom-1440: 16px;
    
    --h5-font-size-800: 28px;
    --h5-line-height-800: 32px;
    --h5-margin-top-800: 42px;
    --h5-margin-bottom-800: 14px;

    --h5-font-size-375: 23px;
    --h5-line-height-375: 26px;
    --h5-margin-top-375: 34px;
    --h5-margin-bottom-375: 11px;

    --h5-font-size: var(--h5-font-size-1440);
    --h5-line-height: var(--h5-line-height-1440);
    --h5-margin-top: var(--h5-margin-top-1440);
    --h5-margin-bottom: var(--h5-margin-bottom-1440);

    /* H6 */
    --h6-font-size-1440: 24px;
    --h6-line-height-1440: 28px;
    --h6-margin-top-1440: 36px;
    --h6-margin-bottom-1440: 12px;
    
    --h6-font-size-800: 23px;
    --h6-line-height-800: 26px;
    --h6-margin-top-800: 34px;
    --h6-margin-bottom-800: 11px;

    --h6-font-size-375: 20px;
    --h6-line-height-375: 23px;
    --h6-margin-top-375: 30px;
    --h6-margin-bottom-375: 10px;

    --h6-font-size: var(--h6-font-size-1440);
    --h6-line-height: var(--h6-line-height-1440);
    --h6-margin-top: var(--h6-margin-top-1440);
    --h6-margin-bottom: var(--h6-margin-bottom-1440);

    /* p-large */
    --p-large-font-size-1440: 22px;
    --p-large-line-height-1440: 33px;
    --p-large-margin-top-1440: 33px;
    --p-large-margin-bottom-1440: 33px;
    
    --p-large-font-size-800: 20px;
    --p-large-line-height-800: 28px;
    --p-large-margin-top-800: 28px;
    --p-large-margin-bottom-800: 28px;

    --p-large-font-size-375: 20px;
    --p-large-line-height-375: 28px;
    --p-large-margin-top-375: 28px;
    --p-large-margin-bottom-375: 28px;

    --p-large-font-size: var(--h6-font-size-1440);
    --p-large-line-height: var(--p-large-line-height-1440);
    --p-large-margin-top: var(--h6-margin-top-1440);
    --p-large-margin-bottom: var(--h6-margin-bottom-1440);

    /* p */
    --p-font-size-1440: 18px;
    --p-line-height-1440: 27px;
    --p-margin-top-1440: 27px;
    --p-margin-bottom-1440: 27px;
    
    --p-font-size-800: 18px;
    --p-line-height-800: 27px;
    --p-margin-top-800: 27px;
    --p-margin-bottom-800: 27px;

    --p-font-size-375: 18px;
    --p-line-height-375: 27px;
    --p-margin-top-375: 27px;
    --p-margin-bottom-375: 27px;

    --p-font-size: var(--p-font-size-1440);
    --p-line-height: var(--p-line-height-1440);
    --p-margin-top: var(--p-margin-top-1440);
    --p-margin-bottom: var(--p-margin-bottom-1440);

    /* small */
    --small-font-size-1440: 16px;
    --small-line-height-1440: 24px;
    --small-margin-top-1440: 24px;
    --small-margin-bottom-1440: 24px;
    
    --small-font-size-800: 16px;
    --small-line-height-800: 24px;
    --small-margin-top-800: 24px;
    --small-margin-bottom-800: 24px;

    --small-font-size-375: 16px;
    --small-line-height-375: 24px;
    --small-margin-top-375: 24px;
    --small-margin-bottom-375: 24px;

    --small-font-size: var(--small-font-size-1440);
    --small-line-height: var(--small-line-height-1440);
    --small-margin-top: var(--small-margin-top-1440);
    --small-margin-bottom: var(--small-margin-bottom-1440);

    /* nano */
    --nano-font-size-1440: 14px;
    --nano-line-height-1440: 18px;
    --nano-margin-top-1440: 18px;
    --nano-margin-bottom-1440: 18px;
    
    --nano-font-size-800: 14px;
    --nano-line-height-800: 18px;
    --nano-margin-top-800: 18px;
    --nano-margin-bottom-800: 18px;

    --nano-font-size-375: 14px;
    --nano-line-height-375: 18px;
    --nano-margin-top-375: 18px;
    --nano-margin-bottom-375: 18px;

    --nano-font-size: var(--nano-font-size-1440);
    --nano-line-height: var(--nano-line-height-1440);
    --nano-margin-top: var(--nano-margin-top-1440);
    --nano-margin-bottom: var(--nano-margin-bottom-1440);
}

/* Responsive Typography for 1024 */
@media only screen and (max-width: 1024px) {
    :root {
        --content-inset: var(--content-inset-800);
        --margin-vertical: var(--margin-vertical-800);
        --logo-width: var(--logo-width-800);

        --h1-font-size: var(--h1-font-size-800);
        --h1-line-height: var(--h1-line-height-800);
        --h1-margin-top: var(--h1-margin-top-800);
        --h1-margin-bottom: var(--h1-margin-bottom-800);

        --h2-font-size: var(--h2-font-size-800);
        --h2-line-height: var(--h2-line-height-800);
        --h2-margin-top: var(--h2-margin-top-800);
        --h2-margin-bottom: var(--h2-margin-bottom-800);

        --h3-font-size: var(--h3-font-size-800);
        --h3-line-height: var(--h3-line-height-800);
        --h3-margin-top: var(--h3-margin-top-800);
        --h3-margin-bottom: var(--h3-margin-bottom-800);

        --h4-font-size: var(--h4-font-size-800);
        --h4-line-height: var(--h4-line-height-800);
        --h4-margin-top: var(--h4-margin-top-800);
        --h4-margin-bottom: var(--h4-margin-bottom-800);

        --h5-font-size: var(--h5-font-size-800);
        --h5-line-height: var(--h5-line-height-800);
        --h5-margin-top: var(--h5-margin-top-800);
        --h5-margin-bottom: var(--h5-margin-bottom-800);

        --h6-font-size: var(--h6-font-size-800);
        --h6-line-height: var(--h6-line-height-800);
        --h6-margin-top: var(--h6-margin-top-800);
        --h6-margin-bottom: var(--h6-margin-bottom-800);

        --p-large-font-size: var(--h6-font-size-800);
        --p-large-line-height: var(--p-large-line-height-800);
        --p-large-margin-top: var(--h6-margin-top-800);
        --p-large-margin-bottom: var(--h6-margin-bottom-800);

        --p-font-size: var(--p-font-size-800);
        --p-line-height: var(--p-line-height-800);
        --p-margin-top: var(--p-margin-top-800);
        --p-margin-bottom: var(--p-margin-bottom-800);

        --small-font-size: var(--small-font-size-800);
        --small-line-height: var(--small-line-height-800);
        --small-margin-top: var(--small-margin-top-800);
        --small-margin-bottom: var(--small-margin-bottom-800);

        --nano-font-size: var(--p-font-size-800);
        --nano-line-height: var(--p-line-height-800);
        --nano-margin-top: var(--p-margin-top-800);
        --nano-margin-bottom: var(--p-margin-bottom-800);
    }
}

/* Responsive Typography for 640 */
@media only screen and (max-width: 640px) {
    :root {
        --content-inset: var(--content-inset-375);
        --margin-vertical: var(--margin-vertical-375);
        --logo-width: var(--logo-width-375);

        --h1-font-size: var(--h1-font-size-375);
        --h1-line-height: var(--h1-line-height-375);
        --h1-margin-top: var(--h1-margin-top-375);
        --h1-margin-bottom: var(--h1-margin-bottom-375);

        --h2-font-size: var(--h2-font-size-375);
        --h2-line-height: var(--h2-line-height-375);
        --h2-margin-top: var(--h2-margin-top-375);
        --h2-margin-bottom: var(--h2-margin-bottom-375);

        --h3-font-size: var(--h3-font-size-375);
        --h3-line-height: var(--h3-line-height-375);
        --h3-margin-top: var(--h3-margin-top-375);
        --h3-margin-bottom: var(--h3-margin-bottom-375);

        --h4-font-size: var(--h4-font-size-375);
        --h4-line-height: var(--h4-line-height-375);
        --h4-margin-top: var(--h4-margin-top-375);
        --h4-margin-bottom: var(--h4-margin-bottom-375);

        --h5-font-size: var(--h5-font-size-375);
        --h5-line-height: var(--h5-line-height-375);
        --h5-margin-top: var(--h5-margin-top-375);
        --h5-margin-bottom: var(--h5-margin-bottom-375);

        --h6-font-size: var(--h6-font-size-375);
        --h6-line-height: var(--h6-line-height-375);
        --h6-margin-top: var(--h6-margin-top-375);
        --h6-margin-bottom: var(--h6-margin-bottom-375);

        --p-large-font-size: var(--h6-font-size-375);
        --p-large-line-height: var(--p-large-line-height-375);
        --p-large-margin-top: var(--h6-margin-top-375);
        --p-large-margin-bottom: var(--h6-margin-bottom-375);

        --p-font-size: var(--p-font-size-375);
        --p-line-height: var(--p-line-height-375);
        --p-margin-top: var(--p-margin-top-375);
        --p-margin-bottom: var(--p-margin-bottom-375);

        --small-font-size: var(--small-font-size-375);
        --small-line-height: var(--small-line-height-375);
        --small-margin-top: var(--small-margin-top-375);
        --small-margin-bottom: var(--small-margin-bottom-375);

        --nano-font-size: var(--nano-font-size-375);
        --nano-line-height: var(--nano-line-height-375);
        --nano-margin-top: var(--nano-margin-top-375);
        --nano-margin-bottom: var(--nano-margin-bottom-375);
    }
}