:root{
    --op-brand-color-green:                 #5cba98;
    --op-brand-color-orange:                #ed6c4d;
    --op-web-color-bg-grey:                 #f7f7f7;
    --op-web-color-bg-cold:                 #c7e3d0;
    --op-web-color-bg-warm:                 #f5edd9;
    --op-body-color-dark-neutral:           #202020;
    --op-secondary-brand-color-blue:        #016978;
    --op-secondary-brand-color-yellow:      #fac753;
    
    
    
    --op-h1-size:                          40px;
    --op-title-size:                       30px;
    --op-subtitle-size:                    25px;
    --op-body-size:                        20px;
    --op-body-sub-size:                    18px;
    --op-small-size:                       15px;
    
}

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



/* === Color Utilities === */
.color-green-primary     { color: var(--op-brand-color-green); }
.color-red               { color: var(--op-brand-color-orange); }
.color-dark-grey         { color: var(--op-body-color-dark-neutral); }
.color-mid-grey          { color: var(--op-body-color-dark-neutral); }
.color-light-grey        { color: var(--op-body-color-dark-neutral); }
.color-bg-grey           { color: var(--op-web-color-bg-grey); }
.color-green-bg          { color: var(--op-web-color-bg-cold); }
.color-body              { color: var(--op-body-color-dark-neutral); }
.color-gray-primary      { color: var(--op-body-color-dark-neutral); }

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

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



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

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

.text-small-s {
    font-size: var(--op-small-size);
    font-weight: 300;
}

.green_op {
    color: var(--op-brand-color-green);
}

/*Font families*/
body{
    font-family: 'Manrope', sans-serif;
    font-size: var(--op-body-size);
}

h1, h2{
    font-family: 'Comfortaa', sans-serif;
}