Guys, please help me to set custom color variables in style.css correctly.

I have the code:

$ripplecolor:#cccccc;

$accordion-body-padding-x:0;
$accordion-body-padding-y:0;


$font-size-base:1.09rem;

$font-sizes: (
  1: $font-size-base*1.8,//26 h1
  2: $font-size-base*1.6,//24 h2
  3: $font-size-base*1.35,//22 h3
  4: $font-size-base*1.2, //20  h4
  5: $font-size-base*0.95,  //17  body
  6: $font-size-base*0.8,//14 muted text
);
.fs-7{
  font-size: 0.75rem;
}


//$link-color:#E94216;
$line-height-base:1.2;
//$font-family-sans-serif: Roboto,'Helvetica Neue', Arial,sans-serif;
$font-family-base: Inter, 'Helvetica neue', Arial, sans-serif;
//body {
//
//  font-family: 'Inter', sans-serif !important;
//
//}

$primary: #E94216;
$secondary: #f6b4a2;
//$secondary: #a6a6a6;
$success: #00b74a ;
$info: #39c0ed ;
$warning: #ffa900 ;
$danger: #f93154;
$light: #f1f1f1;
$dark: #252525;





@import 'mdb-angular-ui-kit/assets/scss/mdb.scss';
//@import 'node_modules/mdb-angular-ui-kit/assets/scss/mdb.scss';


$mdb-theme-light-background:#f7f5f5;

//Here need to put mdb variables!!!!!!!!!!!!

@import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
@import "node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
@import "node_modules/@fortawesome/fontawesome-free/scss/brands.scss";



@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$my-theme-primary: #E94216; // theme primary color, change this value to customize theme
$my-theme-secondary: #f6b4a2; // theme secondary color, change this value to customize theme



$my-theme: mdb-light-theme($my-theme-primary, $my-theme-secondary); // create the new theme using primary and secondary colors

// include theme styles
@include mdb-theme($my-theme);

//8c290d


$utilities: map-merge(
    $utilities,
    (
      "background-color": (
        property: background-color,
        class: bg,
        values: map-merge(
            $theme-colors,
            (
              //"lblue":#38B6FF,
              //"blue": #0A2B52,
              //"grey": #EEF5FF,
              "lighter": #f5f5f7,
              "red":#8c290d,
            )
        )
      ),
      //"viewport-height": (
      //  property: height,
      //  class: vh,
      //  values: (
      //    "100":100vh,
      //    "90":90vh,
      //    "80":80vh,
      //    "70":70vh,
      //    "60":60vh,
      //    "50":50vh,
      //    "40":40vh,
      //    "30":30vh,
      //    "20":20vh,
      //    "10":10vh,
      //  )
      //),
    )
);



$utilities: map-merge(
    $utilities,
    (
      "color": map-merge(
          map-get($utilities, "color"),
          (
            values: map-merge(
                map-get(map-get($utilities, "color"), "values"),
                (
                  "red":#8c290d,
                ),
            ),
          ),
      ),
    )
);

@import "bootstrap/scss/utilities/api";






.blk_90{
  border-color: #272626;
  color: #272626;
  //color: rgba(0,0,0,0.9);
}
.blk_60{
  color: #6E6E6E;
  border-color: #6E6E6E;
  //border-color: rgba(0,0,0,0.6);
  //color: rgba(0,0,0,0.6);
}
.blk_75{
  border-color: rgba(0,0,0,0.75);
  color: rgba(0,0,0,0.75);
}
.fw-semi{
  font-weight: 600;
}
.fw-m{
  font-weight: 500;
}

.mt-st{
  margin-top:120px;
}

.mt-ste{
  margin-top:160px;
}

.success-message, .error-message{
  font-size:0.75rem !important;
  top:auto !important;
}

.mdb-form-control input::placeholder {
  font-size: 0.75rem !important;
}
.form-outline, .form-control, .form-control-lg{
  font-size: 0.9rem !important;
  border-color: #86868B !important;
  //padding-top: 0.9rem !important;
  //padding-bottom: 0.9rem !important;
}
.form-check-label{
  font-size:0.9rem !important;
}
.toast-success{
  background-color: #d6f0e0 !important;
}
.toast-danger{
  background-color:#f9e1e5 !important; ;
}
.nav-pills{
  justify-content: center;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.stepper-head-text{
  font-size: 0.75rem !important;
}

.numb{
  font-family: Helvetica Now MT Disp W01 XBold,Arial,sans-serif;
  //font-weight: 400 !important;
}

.com{
  font-family: Quicksand,Arial,sans-serif;
  font-weight: 400 !important;
}
textarea ~.error-message{
  bottom: auto !important;
}

//body{
//  background-color: #f7f5f5;
//}
//.modal-content{
//  background-color: #f7f5f5 !important;
//}
.form-outline .form-control{
  background-color: white;
}

and when i have added an accordion - the accordion uses not my theme colors, but inside pro i have found that the accordion should uses $mdb-theme variables. (how to set mdb-theme-correctly?)

Please explain where i should to set mdb-theme-variables and NEED OR NOT a set of {$primary, $secondary, $info and etc} variables if we use $mdb-theme- variables.

Maybe you have a scheme in which order i should to set mdb imports and bootstrap imports. I tired every time ask you how to set up style.css correctly that all work.