/***************************************************************************
* Colors
****************************************************************************/
:root {
    --typo-color-text: #333333;
    --typo-color-headline: #000000;
    --typo-color-grey: #F4F4F0;
    --typo-color-dark-grey: #707070;
    --typo-color-blue: #007AB3;
    --typo-color-light-blue: #CCE4F0;
    --typo-color-dark-blue: #113546;
    --typo-border-radius: 0.6875em;;
}

/***************************************************************************
* Gaps
****************************************************************************/
:root {
    --typo-gap: 1em;
    --typo-half-gap: 0.5em;
    --typo-double-gap: 2em;
    --typo-section-gap: 2em;
}

@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.1875em;
    --typo-font-size-h2: 1.9375em;
    --typo-font-size-h3: 1.125em;
    --typo-font-size-h4: 1em;
}

@media screen and (min-width:40em){
    :root {
        --typo-font-size-h1: 2.8125em;
        --typo-font-size-h2: 2.4375em;
        --typo-font-size-h3: 1.1875em;
        --typo-font-size-h4: 1.125em;
    }
}

@media screen and (min-width:64em){
    :root {
        --typo-font-size-default: 1.125rem;
        --typo-font-size-h1: 3.0625em;
        --typo-font-size-h2: 2.6875em;
        --typo-font-size-h3: 1.25em;
        --typo-font-size-h4: 1.125em;
    }
}