/***************************************************************************
* Colors
****************************************************************************/
:root {
    --typo-color-text: #525252;
    --typo-color-h1: #151515;
    --typo-color-headlines: #272727;
    --typo-color-light-grey: #f4f4f4;
    --typo-color-grey: #dedede;
    --typo-color-blue: #52b7c5;
    --typo-color-green: #37ed00;
    --typo-color-red: #c60000;
}

/***************************************************************************
* Gaps
****************************************************************************/
:root {
    --typo-gap: 0.5em;
    --typo-section-gap: 2em;
    --typo-item-gap: 2em;
    --typo-border-radius: 0.375rem;
}

@media screen and (min-width:40em){
    :root {
        --typo-section-gap: 3em;
    }
}

@media screen and (min-width:64em){
    :root {
        --typo-section-gap: 4em;
    }
}

/***************************************************************************
* Font-Sizes
****************************************************************************/
:root {
    --typo-font-size-default: 1rem;
    --typo-font-size-h1: 2.25em;
    --typo-font-size-h2:1.5625em;
    --typo-font-size-h3: 1.25em;
    --typo-font-size-h4: 1.125em;
    --typo-font-size-eyebrow: 0.875em;
}

@media screen and (min-width:40em){
    :root {
        --typo-font-size-default: 1.0625rem;
        --typo-font-size-h1: 2.75em;
        --typo-font-size-h2:1.75em;
        --typo-font-size-h3: 1.375em;
        --typo-font-size-h4: 1.125em;
    }
}

@media screen and (min-width:64em){
    :root {
        --typo-font-size-default: 1.125rem;
        --typo-font-size-h1: 3.5em;
        --typo-font-size-h2: 2em;
        --typo-font-size-h3: 1.5em;
        --typo-font-size-h4: 1.125em;
        --typo-font-size-eyebrow: 0.8125em;
    }
}

@media screen and (min-width:90em){
    :root {
        --typo-font-size-default: 1.25rem;
    }
}