:root {
    /* HEX */
    --rh-red: #CE3044;
    --rh-dark-blue: #0C3657;
    --rh-light-blue: #2AACE2;
    /* RGBA */
    --rh-red-rgba: rgba(206, 48, 68, 1);
    --rh-dark-blue-rgba: rgba(12, 54, 87, 1);
    --rh-light-blue-rgba: rgba(42, 172, 226, 1);
}

/* ================ RED ================ */

.btn-rh-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #CE3044;
    --bs-btn-border-color: #CE3044;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #A22737;
    --bs-btn-focus-shadow-rgb: 224, 68, 88;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #A22737;
    --bs-btn-active-border-color: #972433;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #CE3044;
    --bs-btn-disabled-border-color: #CE3044;
}

.btn-rh-primary {
    background-color: var(--bs-btn-bg);
}

    .btn-rh-primary:hover {
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn-rh-primary:active {
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
    }

    .btn-rh-primary:focus {
        box-shadow: 0 0 0px 2px rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
    }

    .btn-rh-primary:active:focus {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-btn-focus-shadow-rgb),.5);
    }

    .btn-rh-primary:focus-visible {
        background-color: #B52B3D;
        border-color: #A22737;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb),.5);
    }

.bg-rh-red {
    background-color: var(--rh-red);
}

/* ================ DARK BLUE ================ */
.btn-rh-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0C3657;
    --bs-btn-border-color: #0C3657;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0A2F4C;
    --bs-btn-hover-border-color: #092A45;
    --bs-btn-focus-shadow-rgb: 17, 80, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #092A45;
    --bs-btn-active-border-color: #08263F;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0C3657;
    --bs-btn-disabled-border-color: #0C3657;
}

.btn-rh-dark {
    background-color: var(--bs-btn-bg);
}

    .btn-rh-dark:hover {
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn-rh-dark:active {
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
    }

    .btn-rh-dark:focus {
        box-shadow: 0 0 0px 2px rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
    }

    .btn-rh-dark:active:focus {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-btn-focus-shadow-rgb),.5);
    }

    .btn-rh-dark:focus-visible {
        background-color: #B52B3D;
        border-color: #A22737;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb),.5);
    }

.bg-rh-dark {
    background-color: var(--rh-dark-blue);
}

/* ================ LIGHT BLUE ================ */
.btn-rh-light {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2AACE2;
    --bs-btn-border-color: #2AACE2;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2497C9;
    --bs-btn-hover-border-color: #218DBB;
    --bs-btn-focus-shadow-rgb: 76, 184, 232;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #218DBB;
    --bs-btn-active-border-color: #1F85AF;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #2AACE2;
    --bs-btn-disabled-border-color: #2AACE2;
}

.btn-rh-light {
    background-color: var(--bs-btn-bg);
}

    .btn-rh-light:hover {
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn-rh-light:active {
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
    }

    .btn-rh-light:focus {
        box-shadow: 0 0 0px 2px rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
    }

    .btn-rh-light:active:focus {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-btn-focus-shadow-rgb),.5);
    }

    .btn-rh-light:focus-visible {
        background-color: #B52B3D;
        border-color: #A22737;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb),.5);
    }