:root {
    --base-blue: #273284;
    --base-purple: #632d6a;
    --base-red: #ad1a28;
    --base-gold: #ac892f;
}

/* === BASE PURPLE === */
.btn-base-purple {
    background-color: var(--base-purple) !important;
    border-color: var(--base-purple) !important;
    color: #fff !important;
}
.btn-base-purple:hover,
.btn-base-purple:focus {
    background-color: #521e59 !important;
    border-color: #521e59 !important;
}

/* === BASE BLUE === */
.btn-base-blue {
    background-color: var(--base-blue) !important;
    border-color: var(--base-blue) !important;
    color: #fff !important;
}
.btn-base-blue:hover,
.btn-base-blue:focus {
    background-color: #1c2467 !important;
    border-color: #1c2467 !important;
}

/* === BASE RED === */
.btn-base-red {
    background-color: var(--base-red) !important;
    border-color: var(--base-red) !important;
    color: #fff !important;
}
.btn-base-red:hover,
.btn-base-red:focus {
    background-color: #941320 !important;
    border-color: #941320 !important;
}

/* === BASE GOLD === */
.btn-base-gold {
    background-color: var(--base-gold) !important;
    border-color: var(--base-gold) !important;
    color: #fff !important;
}
.btn-base-gold:hover,
.btn-base-gold:focus {
    background-color: #957422 !important;
    border-color: #957422 !important;
}

/* === Text Color Utilities === */
.text-base-purple { color: var(--base-purple) !important; }
.text-base-blue   { color: var(--base-blue) !important; }
.text-base-red    { color: var(--base-red) !important; }
.text-base-gold   { color: var(--base-gold) !important; }

/* === Background Color Utilities === */
.bg-base-purple { background-color: var(--base-purple) !important; color: #fff !important; }
.bg-base-blue   { background-color: var(--base-blue) !important; color: #fff !important; }
.bg-base-red    { background-color: var(--base-red) !important; color: #fff !important; }
.bg-base-gold   { background-color: var(--base-gold) !important; color: #fff !important; }

.symbol-base-blue { background-color: var(--base-blue) !important; color: #fff !important;}
.symbol-base-purple { background-color: var(--base-purple) !important; color: #fff !important; }
.symbol-base-red     { background-color: var(--base-red) !important; color: #fff !important; }
.symbol-base-gold { background-color: var(--base-gold) !important; color: #fff !important; }