Preface
I'm doing a coding bootcamp / cohort thing, and although I appreciate and would prefer to use tools like React and SCSS, right now I'm using nothing but HTML, CSS, Javascript, and jQuery. I feel like I'm missing some of the power I need to fully customize MDB, but I'm hoping I can still find a way to customize my color palette.

I'm fairly certain I'm missing some obvious syntax. Can't seem to figure out what it should be. I really tend to stay away from front-end design, haha.

Expected behavior
I expect to change the color of my buttons from Blue to Red and have the color palette respond for all states of buttons.

Actual behavior
I found some code that allows me to change the color of the button, but only by overriding all the states. I'm hoping there is a way to keep Bootstrap's style of relative color changes for hover, effects for click, etc. This also only applies the color to the button, when I'd like for it to change the primary color in all places.

Resources (screenshots, code snippets etc.)

/* This overrides the color for all states, does not adjust the palette */
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #a6192e !important; 
}

Links I found on my way here
How to change Primary (or other) colors
How to: Bootstrap change background color
Customizing primary-color
How to change btn color in Bootstrap

Finally, My Repo
Farm Buddy (WIP)