:root {
    --container-max-xl: 1200px;

    /* font-sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --h1-font-size: 1.875rem;
    --h1-font-size-mobile: 1.25rem;
    --h2-font-size: 1.25rem;
    --h2-font-size-mobile: 1rem;
    --h3-font-size: 1rem;
    --h3-font-size-mobile: 0.875rem;
    --h4-font-size: 0.875rem;
    --h4-font-size-mobile: 0.75rem;
    --h5-font-size: 0.75rem;
    --h5-font-size-mobile: 0.75rem;
    --display-1: 2.625rem;
    --display-1-mobile: 2.25rem;
    --display-2: 2.25rem;
    --display-2-mobile: 1.875rem;
    
    /* spacers */
    --spacer-1: 0.25rem;
    --spacer-2: 0.5rem;
    --spacer-3: 1rem;
    --spacer-4: 1.5rem;
    --spacer-5: 2rem;
    --spacer-6: 3rem;
    --spacer-7: 4.5rem;
    --spacer-8: 6rem;
    --spacer-9: 7.5rem;
    --spacer-10: 10rem;
    

}