/***************************************************************************
* Calc Size
*
* Beispiel – Alle Elemente Proporional größer darstellen:
* @media screen and (min-width:100em){
*     :root {
*         --typo-calc-size: 1.125;
*     }
* }
****************************************************************************/
:root {
    --typo-calc-size: 1;
}


/***************************************************************************
* Colors
****************************************************************************/
:root {
    --typo-color-text: #0a0a0a;
    --typo-color-light-grey: #ebe9e6;
    --typo-color-orange: #e73801;
}

/***************************************************************************
* Basics
****************************************************************************/
:root {
    --typo-border-radius: calc(var(--typo-calc-size) * 1rem);
}


/***************************************************************************
* Gaps
****************************************************************************/
:root {
    --typo-gap: calc(var(--typo-calc-size) * 1rem);
    --typo-half-gap: calc(var(--typo-calc-size) * 0.5rem);
    --typo-double-gap: calc(var(--typo-calc-size) * 2rem);
    --typo-section-gap: calc(var(--typo-calc-size) * 2rem);
}

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

@media screen and (min-width:64em){
    :root {
        --typo-section-gap: calc(var(--typo-calc-size) * 6rem);
    }
}

/***************************************************************************
* Font-Sizes
****************************************************************************/
:root {
    --typo-font-size-default: calc(var(--typo-calc-size) * 1rem);
    --typo-font-size-h1: calc(var(--typo-calc-size) * 1.75rem);
    --typo-font-size-h2: calc(var(--typo-calc-size) * 1.5rem);
    --typo-font-size-h3: calc(var(--typo-calc-size) * 1.375rem);
    --typo-font-size-h4: calc(var(--typo-calc-size) * 1.25rem);
}

@media screen and (min-width:40em){
    :root {
        --typo-font-size-h1: calc(var(--typo-calc-size) * 2.25rem);
        --typo-font-size-h2: calc(var(--typo-calc-size) * 1.875rem);
        --typo-font-size-h3: calc(var(--typo-calc-size) * 1.5rem);
        --typo-font-size-h4: calc(var(--typo-calc-size) * 1.375rem);
    }
}

@media screen and (min-width:64em){
    :root {
        --typo-font-size-h1: calc(var(--typo-calc-size) * 2.75rem);
        --typo-font-size-h2: calc(var(--typo-calc-size) * 2.125rem);
        --typo-font-size-h3: calc(var(--typo-calc-size) * 1.75rem);
        --typo-font-size-h4: calc(var(--typo-calc-size) * 1.5rem);
    }
}