:root {

    --grid-col-count: 12;
    --grid-col-gap: 40px;
    --grid-col-inline-margin: 40px;
    
    
    --white: #fff;
    --black: #000;
    --copyright: #E7E7E7;

    --granite-25: #F7F7F7;
    --granite-50: #F0F0F0;
    --granite-100: #D3D5D7;
    --granite-200: #B6BCBF;
    --granite-300: #9AA2A8;
    --granite-400: #7E8890;
    --granite-500: #616F78;
    --granite-600: #455560;
    --granite-700: #34434D;
    --granite-800: #233039;
    --granite-900: #121E26;
    
    --azure-25: #E4EBF0;
    --azure-100: #C0D0DC;
    --azure-200: #9BB4C9;
    --azure-300: #7799B5;
    --azure-400: #537EA1;
    --azure-500: #2E628E;
    --azure-600: #0A477A;
    --azure-700: #0F3B61;
    --azure-800: #142E47;
    --azure-900: #00162D;
    
    --glacier-50: #F6FBFF;
    --glacier-100: #DAF0FD;
    --glacier-200: #BFE5FA;
    --glacier-300: #A5DAF6;
    --glacier-400: #8CCFF2;
    --glacier-500: #74C4EC;
    --glacier-600: #5FA0C7;
    --glacier-700: #4B7DA1;
    --glacier-800: #375C7A;
    --glacier-900: #253C53;

    --watersaver-blue: #0093D0;
    --nuovafar-green: #7FB847;
    --guardian-orange: #F78E1E;
    --broen-red: #E12827;
    --oval-red: #C42032;
    
    --corner-radius-sm: 8px;
    --corner-radius-lg: 20px;

    --spacing-2: 2px;
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-30: 30px;
    --spacing-40: 40px;
    --spacing-50: 50px;
    --spacing-60: 60px;
    --spacing-80: 80px;
    --spacing-100: 100px;
    --spacing-120: 120px;
    --spacing-140: 140px;
    --margin: 40px;
    

    --font-size-2xl: 6.4rem; /* 64px */
    --font-size-xl: 4.8rem; /* 48px */
    --font-size-lg: 3.6rem; /* 36px */
    --font-size-md: 2.4rem; /* 24px */
    --font-size-sm: 2.0rem; /* 20px */
    --font-size-xs: 1.6rem; /* 16px */
    --font-size-2xs: 1.4rem; /* 14px */
    --font-size-nav: 1.6rem; /* 16px */


    --line-height-2xl: 7.0rem; /* 70px */
    --line-height-xl: 5.0rem; /* 50px */
    --line-height-lg: 4.2rem; /* 42px */
    --line-height-md: 2.8rem; /* 28px */
    --line-height-sm: 2.4rem; /* 24px */
    --line-height-xs: 2.0rem; /* 20px */
    --line-height-2xs: 1.6rem; /* 16px */
    --line-height-nav: 1.6rem; /* 16px */

    --paragraph-spacing-2xl: 4.0rem; /* 40px */
    --paragraph-spacing-xl: 3.6rem; /* 36px */
    --paragraph-spacing-lg: 3.0rem; /* 30px */
    --paragraph-spacing-md: 2.0rem; /* 20px */
    --paragraph-spacing-sm: 1.6rem; /* 16px */
    --paragraph-spacing-xs: 1.2rem; /* 12px */
    --paragraph-spacing-2xs: 1.0rem; /* 10px */
    --paragraph-spacing-nav: .0rem; /* 0px */


    --letter-spacing-2xl: -0.25px;
    --letter-spacing-xl: -0.5px;
    --letter-spacing-lg: -0.25px;
    --letter-spacing-md: -0.25px;
    --letter-spacing-sm: -0.25px;
    --letter-spacing-xs: 0px;
    --letter-spacing-2xs: 0.75px;
    --letter-spacing-nav: 0px;
    
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

}


@media (max-width: 1250px) {
    :root {
        --grid-col-count: 8;
        --grid-col-gap: 24px;
        --grid-col-inline-margin: 30px;
        
        --font-size-2xl: 6.4rem; /* 64px */
        --font-size-xl: 4.8rem; /* 48px */
        --font-size-lg: 3.6rem; /* 36px */
        --font-size-md: 2.4rem; /* 24px */
        --font-size-sm: 2.0rem; /* 20px */
        --font-size-xs: 1.6rem; /* 16px */
        --font-size-2xs: 1.4rem; /* 14px */
        --font-size-nav: 1.6rem; /* 16px */

        --spacing-2: 2px;
        --spacing-4: 4px;
        --spacing-8: 8px;
        --spacing-12: 12px;
        --spacing-16: 16px;
        --spacing-20: 20px;
        --spacing-24: 24px;
        --spacing-30: 30px;
        --spacing-40: 40px;
        --spacing-50: 46px;
        --spacing-60: 50px;
        --spacing-80: 60px;
        --spacing-100: 80px;
        --spacing-120: 100px;
        --spacing-140: 120px;
        --margin: 30px;


        --font-size-2xl: 5.0rem; /* 50px */
        --font-size-xl: 4.0rem; /* 40px */
        --font-size-lg: 3.0rem; /* 30px */
        --font-size-md: 2.0rem; /* 20px */
        --font-size-sm: 1.6rem; /* 16px */
        --font-size-xs: 1.4rem; /* 14px */
        --font-size-2xs: 1.4rem; /* 14px */
        --font-size-nav: 1.4rem; /* 14px */


        --line-height-2xl: 5.8rem; /* 58px */
        --line-height-xl: 4.4rem; /* 44px */
        --line-height-lg: 3.4rem; /* 34px */
        --line-height-md: 2.4rem; /* 24px */
        --line-height-sm: 2.0rem; /* 20px */
        --line-height-xs: 1.8rem; /* 18px */
        --line-height-2xs: 1.6rem; /* 16px */
        --line-height-nav: 1.4rem; /* 14px */

        --paragraph-spacing-2xl: 3.0rem; /* 30px */
        --paragraph-spacing-xl: 2.0rem; /* 20px */
        --paragraph-spacing-lg: 1.4rem; /* 14px */
        --paragraph-spacing-md: 1.2rem; /* 12px */
        --paragraph-spacing-sm: .8rem; /* 8px */
        --paragraph-spacing-xs: .6rem; /* 6px */
        --paragraph-spacing-2xs: .6rem; /* 6px */
        --paragraph-spacing-nav: 0rem; /* 0px */


        --letter-spacing-2xl: -0.25px; 
        --letter-spacing-xl: -0.5px; 
        --letter-spacing-lg: -0.25px; 
        --letter-spacing-md: -0.25px; 
        --letter-spacing-sm: -0.25px; 
        --letter-spacing-xs: 0px; 
        --letter-spacing-2xs: 0.75px; 
        --letter-spacing-nav: 0px; 
        
    }

}

@media (max-width: 767px) {
    :root {
        --grid-col-count: 4;
        --grid-col-gap: 16px;
        --grid-col-inline-margin: 16px;
        
        --spacing-2: 2px;
        --spacing-4: 4px;
        --spacing-8: 8px;
        --spacing-12: 12px;
        --spacing-16: 16px;
        --spacing-20: 20px;
        --spacing-24: 24px;
        --spacing-30: 30px;
        --spacing-40: 36px;
        --spacing-50: 36px;
        --spacing-60: 40px;
        --spacing-80: 50px;
        --spacing-100: 60px;
        --spacing-120: 80px;
        --spacing-140: 100px;
        --margin: 16px;


        --font-size-2xl: 4.4rem; /* 44px */
        --font-size-xl: 3.2rem; /* 32px */
        --font-size-lg: 2.6rem; /* 26px */
        --font-size-md: 1.8rem; /* 18px */
        --font-size-sm: 1.6rem; /* 16px */
        --font-size-xs: 1.4rem; /* 14px */
        --font-size-2xs: 1.4rem; /* 14px */
        --font-size-nav: 2.4rem; /* 24px */


        --line-height-2xl: 4.8rem; /* 48px */
        --line-height-xl: 3.6rem; /* 36px */
        --line-height-lg: 3.0rem; /* 30px */
        --line-height-md: 2.2rem; /* 22px */
        --line-height-sm: 2.0rem; /* 20px */
        --line-height-xs: 1.8rem; /* 18px */
        --line-height-2xs: 1.6rem; /* 16px */
        --line-height-nav: 2.4rem; /* 24px */

        --paragraph-spacing-2xl: 2.4rem; /* 24px */
        --paragraph-spacing-xl: 2.0rem; /* 20px */
        --paragraph-spacing-lg: 1.4rem; /* 14px */
        --paragraph-spacing-md: 1.2rem; /* 12px */
        --paragraph-spacing-sm: .8rem; /* 8px */
        --paragraph-spacing-xs: .6rem; /* 6px */
        --paragraph-spacing-2xs: .6rem; /* 6px */
        --paragraph-spacing-nav: 0rem; /* 0px */


        --letter-spacing-2xl: -0.25px;
        --letter-spacing-xl: -0.5px;
        --letter-spacing-lg: -0.25;
        --letter-spacing-md: -0.25;
        --letter-spacing-sm: -0.25;
        --letter-spacing-xs: 0;
        --letter-spacing-2xs: 0.75;
        --letter-spacing-nav: 0;
        
        
    }

}