:root {
    /* FONT FAMILY */
    --font-family-body:     var(--font-primary);
    --font-family-heading:  var(--font-secondary);
    --font-family-label:    var(--font-tertiary);
    --font-family-code:     var(--font-code);

    --font-size-heading-multiplier:   1;
    --font-size-body-multiplier:      1;
    --font-size-label-multiplier:     1;

    --line-height-heading-multiplier: 1;
    --line-height-body-multiplier:    1;
    --line-height-label-multiplier:   1;

    /* FONT SCALING */
    --font-scaling-desktop: 16px;
    --font-scaling-tablet:  16px;
    --font-scaling-mobile:  17px;

    /* FONT WEIGHT */
    --font-weight-thin:       100;
    --font-weight-extraLight: 200;
    --font-weight-light:      300;
    --font-weight-normal:     400;
    --font-weight-medium:     500;
    --font-weight-semiBold:   600;
    --font-weight-bold:       700;
    --font-weight-extraBold:  800;

    --font-weight-10: var(--font-weight-light);
    --font-weight-20: var(--font-weight-normal);
    --font-weight-30: var(--font-weight-bold);
    --font-weight-40: var(--font-weight-extraBold);

    /* FONT SIZE */
    --font-size-display-xl:   5rem;
    --font-size-display-l:    4rem;
    --font-size-display-m:    3rem;
    --font-size-display-s:    2.5rem;
    --font-size-display-xs:   2rem;

    --font-size-heading-xl:   1.5rem;
    --font-size-heading-l:    1.33rem;
    --font-size-heading-m:    1.25rem;
    --font-size-heading-s:    1.125rem;
    --font-size-heading-xs:   1rem;

    --font-size-body-xl:      1.25rem;
    --font-size-body-l:       1.125rem;
    --font-size-body-m:       1rem;
    --font-size-body-s:       0.875rem;
    --font-size-body-xs:      0.75rem;

    --font-size-label-l:      1rem;
    --font-size-label-m:      0.925rem;
    --font-size-label-s:      0.825rem;

    /* LINE HEIGHT */
    --line-height-display-xl: 5rem;
    --line-height-display-l:  4.25rem;
    --line-height-display-m:  3.25rem;
    --line-height-display-s:  3rem;
    --line-height-display-xs: 2.5rem;

    --line-height-heading-xl: 2rem;
    --line-height-heading-l:  1.75rem;
    --line-height-heading-m:  1.5rem;
    --line-height-heading-s:  1.5rem;
    --line-height-heading-xs: 1.25rem;

    --line-height-body-xl:    1.75rem;
    --line-height-body-l:     1.5rem;
    --line-height-body-m:     1.5rem;
    --line-height-body-s:     1.125rem;
    --line-height-body-xs:    1rem;

    --line-height-label-l:    1.25rem;
    --line-height-label-m:    1.25rem;
    --line-height-label-s:    1rem;
}

@media (--m) {
    :root {
        /* FONT SIZE */
        --font-size-display-xl:   3.5rem;
        --font-size-display-l:    3.25rem;
        --font-size-display-m:    2.75rem;
        --font-size-display-s:    2.25rem;
        --font-size-display-xs:   1.75rem;
    
        --font-size-heading-xl:   1.33rem;
        --font-size-heading-l:    1.25rem;
        --font-size-heading-m:    1.125rem;
    
        /* LINE HEIGHT */
        --line-height-display-xl: 3.75rem;
        --line-height-display-l:  3.5rem;
        --line-height-display-m:  3rem;
        --line-height-display-s:  2.5rem;
        --line-height-display-xs: 2rem;
    
        --line-height-heading-xl: 1.75rem;
        --line-height-heading-l:  1.5rem;
        --line-height-heading-m:  1.25rem;
    }
}

@media (--s) {
    :root {
        /* FONT SIZE */
        --font-size-display-xl:   2.75rem;
        --font-size-display-l:    2.5rem;
        --font-size-display-m:    2.25rem;
        --font-size-display-s:    2rem;
    
        /* LINE HEIGHT */
        --line-height-display-xl: 3rem;
        --line-height-display-l:  3rem;
        --line-height-display-m:  2.5rem;
        --line-height-display-s:  2.5rem;
    }
}