:root {
    --bg-site: #f5f5f5;
    --bg-primary: #152c4d;
    --bg-primary-overlay: #f6f3ee;
    --bg-secondary: #a8171a;
    --bg-secondary-overlay: #152c4d26;
    --bg-surface: rgb(255 255 255);
    --text-site: #000000;
    --text-light: rgba(0, 0, 0, 0.6);
    --text-primary: rgb(255,255,255);
    --text-heading: #152c4d;
    --text-secondary: rgb(255, 255, 255);
    --text-link: #1954aa;
    --text-link-hover: #a8171a;
    --border-primary: #adb8c8;
    --border-radius: 6px;
    --bg-footer: #152c4d;
    --bg-header: #ffffff;
    --bg-header-fixed: #ffffff;
    --text-heading-family: "Open Sans Condensed", sans-serif;
    --text-body-family: 'Roboto', sans-serif !important;
    --grid-gap: 18px;
    --card-padding: 18px 18px;
    --elevation-1: 1px 1px 1px -1px rgb(0 0 0 / 4%), 0 1px 1px 0 rgb(0 0 0 / 8%), 1px 1px 26px 0 rgb(0 0 0 / 10%), 0px 0px 0px 1px rgb(0 0 0 / 5%);
    --elevation-2: 2px 2px 8px -1px rgb(0 0 0 / 12%), 0px 1px 13px 0 rgb(0 0 0 / 12%), 1px 1px 30px 0 rgb(0 0 0 / 14%);
}
@media (max-width: 1024px) {
    :root {
        --grid-gap: 16px;
        --bg-site: #fff;
    }
}