style: reorganize and enhance button styles with additional variables

src/styles.scss

@@ -1,6 +1,35 @@
-@use "@fortawesome/fontawesome-free/css/all.min.css";
+
-@use "bootstrap/scss/bootstrap";
+
+$primary:#6376F3;
+$danger: #FF8888;
+$secondary:#A0A0A0;
+
+$primary-button-hover-shade-amount: 40%;
+$primary-button-disabled-tint-amount: 50%;
+
+@import "../node_modules/bootstrap/scss/bootstrap";
+
+.btn-primary,
+.btn-secondary,
+.btn-danger {
+  --bs-btn-color: #fff;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-active-color: #fff;
+}
+
+.btn-primary {
+  $primary-disabled-bg: tint-color($primary, $primary-button-disabled-tint-amount);
+
+  --bs-btn-hover-bg: #{shade-color($primary, $primary-button-hover-shade-amount)};
+  --bs-btn-hover-border-color: #{shade-color($primary, $primary-button-hover-shade-amount)};
+  --bs-btn-disabled-color: #{color-contrast($primary-disabled-bg)};
+  --bs-btn-disabled-bg: #{$primary-disabled-bg};
+  --bs-btn-disabled-border-color: #{$primary-disabled-bg};
+  --bs-btn-disabled-opacity: 1;
+}
 
 :root {
   --bs-body-font-family: "Gotham", sans-serif;
+
+  
 }