:root {

    --body-bg: #FCFCFC;

    --primary: #2E1A47;
    --tonic: #2DCCD3;
    --highlight: #FFC600;
    --neutral: #F2F2F2;
    --white: #FCFCFC;
    --black: #191919;

    
    --blue: #61A5C5;
    --red: #DE7C6A;
    --redwine: #C47389;
    --purple: #A05EB5;
    --orange: #E59A31;

    --primary-hover: #1b0e2c;
    --tonic-hover: #1eafb7;
    --highlight-hover: #e79a00;
    --neutral-hover: #e1e1e1;

    /*
    --neutral-to-white-gradient: linear-gradient(0deg, #FFFFFF 20%, var(--neutral) 84%);
    --white-to-neutral-gradient: linear-gradient(180deg, #FFFFFF 24%, var(--neutral) 90%);
    --primary-to-tonic-gradient: linear-gradient(90deg, var(--primary) 16%,var(--tonic) 96%);
    */

    --logo-height-mobile: 53px;
    --logo-height-tablet: 61px;
    --logo-height-desktop: 81px;
    
    --header-mobile-height: calc(var(--logo-height-mobile) + .8rem);
    --header-tablet-height: calc(var(--logo-height-tablet) + 2rem);
    --header-desktop-height: calc(var(--logo-height-desktop) + 2rem);

    --header-bg-color: rgba(252,252,252,.75);
    --topbar-bg-color: var(--tonic);
    --burger-bg-color: var(--primary);
    --menu-mobile-bg-color: var(--tonic);

    --fontsize-base: 1rem;
    --fontsize-base-mobile : .9rem;
    --fontsize-scale: 1.25;
    --fontsize-scale-mobile: 1.2;

    --button-01-bg-color: var(--tonic);
    --button-01-bg-color-hover: var(--tonic-hover);
    --button-01-text-color: #FFF;
    --button-02-bg-color: var(--highlight);
    --button-02-bg-color-hover: var(--highlight-hover);
    --button-02-text-color: #FFF;
    --button-03-bg-color: var(--primary);
    --button-03-bg-color-hover: var(--primary-hover);
    --button-03-text-color: #FFF;
    --button-default-padding-x: 2.5rem;
    --button-default-padding-y: 1.25rem;
    --button-default-radius: .625rem;

    --icon-social-radius: 10rem;
    --icon-social-bg-color: var(--tonic);
    --icon-social-color: #FFF;

    --fontfamily: montserrat, sans-serif;

    --heading-fontfamily: montserrat, sans-serif;
    --heading-fontcolor: var(--primary);
    --heading-fontweight: 700;
    --heading-fontweight-strong: 700;
    
    --marge-y-block: 2rem;
    --column-gap: 1.5rem;

    --container-gutter: 25px;
}
@media screen and (max-width:781px){
    :root {
        --marge-y-block: 2rem;
    }
}