:root {
    /* 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-body-default:    var(--font-weight-normal);
    --font-weight-body-strong:     var(--font-weight-bold);
    --font-weight-label-default:   var(--font-weight-normal);
    --font-weight-label-strong:    var(--font-weight-semiBold);
    --font-weight-code-default:    var(--font-weight-normal);
    --font-weight-code-strong:     var(--font-weight-bold);
    --font-weight-heading-default: var(--font-weight-normal);
    --font-weight-heading-strong:  var(--font-weight-bold);
    --font-weight-display-default: var(--font-weight-light);
    --font-weight-display-strong:  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;
    }
}