:root {
    --bg-site: #f2f2f2;
    --bg-primary: #01225D;
    --bg-primary-overlay: #f6f3ee;
    --bg-secondary: #ff501a;
    --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: #01225D;
    --text-secondary: rgb(255 255 255);
    --text-link: #ff501a;
    --text-link-hover: #1565C0;
    --border-primary: #dddddd;
    --border-radius: 2px;
    --bg-footer: #01225D;
    --bg-header: #ffffff;
    --bg-header-fixed: #ffffff;
    --text-heading-family:
            "Archivo", sans-serif;
    --text-body-family:
            'Roboto', sans-serif !important;
    --grid-gap: 18px;
    --card-padding: 20px 22px;
    --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;
    }
}