/* * * * * CSS STYLE ORDER * * * * *
    Position (position, top, left ..)
    Box Model ( display, width, height, margin, padding, border)
    Typography
    Misc
       * * * * * * * * * * * * * * * * * * */

/* * * * * VARIABLES * * * * *
       * * * * * * * * * * * * * * * * * * */

html:root {
    /* Typoset */
    --h1: 4rem;
    --h2: 2.6rem;
    --h3: 2rem;
    --h4: 1.6rem;
    --h5: 1.3rem;
    --h6: 1.1rem;
    --textSm: 0.8rem;
    --textMd: 1rem;
    --textLg: 1.1rem;
    --textXl: 1.2rem;

    --font-family: "Roboto", Arial, Helvetica, sans-serif;


    /* Spacing-Wrapper */
    --besideSpacingMobile: var(--space8);
    --besideSpacing: var(--space14);


    /* Border / Box */
    --border: 1px solid var(--c-green-dark);
    --boxShadowSmall:  0 1px 1px 0 rgba(0,0,0,0.25);
    --boxShadow:       0 4px 4px 0 rgba(0,0,0,0.25);
    --boxShadowStrong: 2px 5px 10px 0 rgba(0,0,0,0.3);

    /* Letter Spacing */
    --letteringTight: .01rem;
    --letteringDense: .04rem;
    --lettering: .08rem;
    --letteringLoose: .13rem;
    --letteringWide: .2rem;

    /* Could be added in future:
        - line-height
    */
}