:root{
    
    --cml-green_primary-color:              #00BD7E;
    --cml-brand-color-red:                  #E63E39;
    --cml-web-color-dark-grey:              #666666;
    --cml-web-color-mid-grey:               #9B9A9A;
    --cml-web-color-light-grey:             #BCBCBB;
    --cml-web-color-bg-grey:                #f7f7f7;
    --cml-green-background:                 #eafff8;
    --cml-body-color:                       #323232;
    --cml-gray_primary-color:               #666666; /* same as --cml-web-color-dark-grey */
    
    --cml-h1-size:                          40px;
    --cml-title-size:                       30px;
    --cml-subtitle-size:                    25px;
    --cml-body-size:                        20px;
    --cml-body-sub-size:                    18px;
    --cml-small-size:                       15px;
    
}

@media (max-width: 990px) {
    :root{
        --cml-h1-size:                          30px;
        --cml-title-size:                       25px;
        --cml-subtitle-size:                    20px;
        --cml-body-size:                        17px;
        --cml-body-sub-size:                    15px;
    }
}



/* === Color Utilities === */
.color-green-primary     { color: var(--cml-green_primary-color); }
.color-red               { color: var(--cml-brand-color-red); }
.color-dark-grey         { color: var(--cml-web-color-dark-grey); }
.color-mid-grey          { color: var(--cml-web-color-mid-grey); }
.color-light-grey        { color: var(--cml-web-color-light-grey); }
.color-bg-grey           { color: var(--cml-web-color-bg-grey); }
.color-green-bg          { color: var(--cml-green-background); }
.color-body              { color: var(--cml-body-color); }
.color-gray-primary      { color: var(--cml-gray_primary-color); }

/* === Background Color Utilities === */
.bg-green-primary        { background-color: var(--cml-green_primary-color); }
.bg-red                  { background-color: var(--cml-brand-color-red); }
.bg-dark-grey            { background-color: var(--cml-web-color-dark-grey); }
.bg-mid-grey             { background-color: var(--cml-web-color-mid-grey); }
.bg-light-grey           { background-color: var(--cml-web-color-light-grey); }
.bg-bg-grey              { background-color: var(--cml-web-color-bg-grey); }
.bg-green-bg             { background-color: var(--cml-green-background); }
.bg-body                 { background-color: var(--cml-body-color); }
.bg-gray-primary         { background-color: var(--cml-gray_primary-color); }

/* === Font Size Utilities === */
.text-h1                 { font-size: var(--cml-h1-size); }
.text-title              { font-size: var(--cml-title-size); }
.text-subtitle           { font-size: var(--cml-subtitle-size); }
.text-body               { font-size: var(--cml-body-size); }
.text-body-sub           { font-size: var(--cml-body-sub-size); }
.text-small              { font-size: var(--cml-small-size); }



.title-s {
    font-size: var(--cml-title-size);
    text-align: center;
    font-weight: 400;
}

.subtitle-s {
    font-size: var(--cml-subtitle-size);
    font-weight: 400;
}

.text-small-s {
    font-size: var(--cml-small-size);
/*    color: var(--cml-gray_primary-color);*/
    font-weight: 300;
}

.green_cml {
    color: var(--cml-green_primary-color);
}

/* {
    letter-spacing: 0.5px;
}*/