```
// 1. Import Bootstrap functions first (required)
@import "../../vendor/bower-asset/bootstrap/scss/functions";

// 2. Define your overridden variables WITHOUT !default (your custom theme and base colors)
$theme-colors: (
  "primary": #0c7c94,
  "secondary": #babcc9,
  "success": #6b8f8e,
  "info": #7889a4,
  "warning": #98843e,
  "danger": #822c2a,
  "light": #ebebeb,
  "dark": #65656a
);

$white: #ffffff;
$black: #000000;
$body-color: #333333;

$font-family-sans-serif: 'Roboto', Arial, sans-serif;
$headings-font-family: 'Poppins', Georgia, serif;

$card-cap-bg: #ebebeb;

$gutters: (
  xs: 1rem,
  sm: 1.5rem,
  md: 2rem,
  lg: 2.5rem,
  xl: 3rem,
  xxl: 3.5rem
);

$link-color: map-get($theme-colors, "primary");
$link-hover-color: #5a5f56;

$btn-padding-y: 0.5rem;
$btn-padding-x: 1.2rem;

// === Explicitly generate all required dependent maps ===

// $theme-colors-rgb
$theme-colors-rgb: ();
@each $color, $hex in $theme-colors {
  $theme-colors-rgb: map-merge(
    $theme-colors-rgb,
    ($color: (red($hex), green($hex), blue($hex)))
  );
}

// $theme-colors-text
$theme-colors-text: (
  "primary": $white,
  "secondary": $white,
  "success": $white,
  "info": $white,
  "warning": $body-color,
  "danger": $white,
  "light": $body-color,
  "dark": $white
);

// $theme-colors-text-dark
$theme-colors-text-dark: ();
@each $color, $val in $theme-colors-text {
  $theme-colors-text-dark: map-merge(
    $theme-colors-text-dark,
    ($color: if($color == "dark", $white, $black))
  );
}

// $theme-colors-bg-subtle
$theme-colors-bg-subtle: ();
@each $color, $rgb in $theme-colors-rgb {
  $theme-colors-bg-subtle: map-merge(
    $theme-colors-bg-subtle,
    ($color: rgba(nth($rgb, 1), nth($rgb, 2), nth($rgb, 3), 0.1))
  );
}

// $theme-colors-border-subtle
$theme-colors-border-subtle: ();
@each $color, $rgb in $theme-colors-rgb {
  $theme-colors-border-subtle: map-merge(
    $theme-colors-border-subtle,
    ($color: rgba(nth($rgb, 1), nth($rgb, 2), nth($rgb, 3), 0.25))
  );
}

// $theme-colors-bg-subtle-dark
$theme-colors-bg-subtle-dark: ();
@each $color, $rgb in $theme-colors-rgb {
  $theme-colors-bg-subtle-dark: map-merge(
    $theme-colors-bg-subtle-dark,
    ($color: rgba(nth($rgb, 1), nth($rgb, 2), nth($rgb, 3), 0.15))
  );
}

// $theme-colors-border-subtle-dark
$theme-colors-border-subtle-dark: ();
@each $color, $rgb in $theme-colors-rgb {
  $theme-colors-border-subtle-dark: map-merge(
    $theme-colors-border-subtle-dark,
    ($color: rgba(nth($rgb, 1), nth($rgb, 2), nth($rgb, 3), 0.5))
  );
}

// $utilities-border-colors
$utilities-border-colors: (
  "primary": map-get($theme-colors, "primary"),
  "secondary": map-get($theme-colors, "secondary"),
  "success": map-get($theme-colors, "success"),
  "info": map-get($theme-colors, "info"),
  "warning": map-get($theme-colors, "warning"),
  "danger": map-get($theme-colors, "danger"),
  "light": map-get($theme-colors, "light"),
  "dark": map-get($theme-colors, "dark")
);

// $utilities-border-subtle
$utilities-border-subtle: (
  "primary": rgba(map-get($theme-colors, "primary"), 0.25),
  "secondary": rgba(map-get($theme-colors, "secondary"), 0.25),
  "success": rgba(map-get($theme-colors, "success"), 0.25),
  "info": rgba(map-get($theme-colors, "info"), 0.25),
  "warning": rgba(map-get($theme-colors, "warning"), 0.25),
  "danger": rgba(map-get($theme-colors, "danger"), 0.25),
  "light": rgba(map-get($theme-colors, "light"), 0.25),
  "dark": rgba(map-get($theme-colors, "dark"), 0.25)
);

// $utilities-text-colors
$utilities-text-colors: (
  "primary": map-get($theme-colors, "primary"),
  "secondary": map-get($theme-colors, "secondary"),
  "success": map-get($theme-colors, "success"),
  "info": map-get($theme-colors, "info"),
  "warning": map-get($theme-colors, "warning"),
  "danger": map-get($theme-colors, "danger"),
  "light": map-get($theme-colors, "light"),
  "dark": map-get($theme-colors, "dark")
);

// $utilities-bg-colors
$utilities-bg-colors: (
  "primary": map-get($theme-colors, "primary"),
  "secondary": map-get($theme-colors, "secondary"),
  "success": map-get($theme-colors, "success"),
  "info": map-get($theme-colors, "info"),
  "warning": map-get($theme-colors, "warning"),
  "danger": map-get($theme-colors, "danger"),
  "light": map-get($theme-colors, "light"),
  "dark": map-get($theme-colors, "dark")
);

// *** Add missing variables (this fixes your error) ***

// $utilities-text-emphasis-colors
$utilities-text-emphasis-colors: (
  "primary": rgba(map-get($theme-colors, "primary"), 0.9),
  "secondary": rgba(map-get($theme-colors, "secondary"), 0.9),
  "success": rgba(map-get($theme-colors, "success"), 0.9),
  "info": rgba(map-get($theme-colors, "info"), 0.9),
  "warning": rgba(map-get($theme-colors, "warning"), 0.9),
  "danger": rgba(map-get($theme-colors, "danger"), 0.9),
  "light": rgba(map-get($theme-colors, "light"), 0.9),
  "dark": rgba(map-get($theme-colors, "dark"), 0.9)
);

// $utilities-bg-emphasis-colors
$utilities-bg-emphasis-colors: (
  "primary": rgba(map-get($theme-colors, "primary"), 0.15),
  "secondary": rgba(map-get($theme-colors, "secondary"), 0.15),
  "success": rgba(map-get($theme-colors, "success"), 0.15),
  "info": rgba(map-get($theme-colors, "info"), 0.15),
  "warning": rgba(map-get($theme-colors, "warning"), 0.15),
  "danger": rgba(map-get($theme-colors, "danger"), 0.15),
  "light": rgba(map-get($theme-colors, "light"), 0.15),
  "dark": rgba(map-get($theme-colors, "dark"), 0.15)
);

// $utilities-border-emphasis-colors
$utilities-border-emphasis-colors: (
  "primary": rgba(map-get($theme-colors, "primary"), 0.75),
  "secondary": rgba(map-get($theme-colors, "secondary"), 0.75),
  "success": rgba(map-get($theme-colors, "success"), 0.75),
  "info": rgba(map-get($theme-colors, "info"), 0.75),
  "warning": rgba(map-get($theme-colors, "warning"), 0.75),
  "danger": rgba(map-get($theme-colors, "danger"), 0.75),
  "light": rgba(map-get($theme-colors, "light"), 0.75),
  "dark": rgba(map-get($theme-colors, "dark"), 0.75)
);

// $negative-spacers (required by utilities for negative margin utilities)
$negative-spacers: (
  0: 0,
  1: -0.25rem,
  2: -0.5rem,
  3: -1rem,
  4: -1.5rem,
  5: -3rem
);

// $utilities-links-underline
$utilities-links-underline: (
  "primary": true,
  "secondary": true,
  "success": true,
  "info": true,
  "warning": true,
  "danger": true,
  "light": false,
  "dark": true
);

// $utilities-bg-subtle — add this:
$utilities-bg-subtle: (
  "primary": map-get($theme-colors-bg-subtle, "primary"),
  "secondary": map-get($theme-colors-bg-subtle, "secondary"),
  "success": map-get($theme-colors-bg-subtle, "success"),
  "info": map-get($theme-colors-bg-subtle, "info"),
  "warning": map-get($theme-colors-bg-subtle, "warning"),
  "danger": map-get($theme-colors-bg-subtle, "danger"),
  "light": map-get($theme-colors-bg-subtle, "light"),
  "dark": map-get($theme-colors-bg-subtle, "dark")
);

// ==================
// <<< CUSTOM OVERRIDE FOR FORM CONTROL FOCUS GLOW COLOR
$form-focus-border-color: map-get($theme-colors, "primary");
$form-focus-box-shadow: 0 0 0 0.25rem rgba(
  red(map-get($theme-colors, "primary")),
  green(map-get($theme-colors, "primary")),
  blue(map-get($theme-colors, "primary")),
  0.25
);
// ==================

// 4. Import Bootstrap variables and dark variables AFTER your manual definitions to allow any defaults to fill the rest (safe to import)
@import "../../vendor/bower-asset/bootstrap/scss/variables";
@import "../../vendor/bower-asset/bootstrap/scss/variables-dark";

// 5. Import Bootstrap Mixins
@import "../../vendor/bower-asset/bootstrap/scss/mixins";

// 6. Bootstrap core and components (import only what you need)
@import "../../vendor/bower-asset/bootstrap/scss/root";
@import "../../vendor/bower-asset/bootstrap/scss/reboot";

@import "../../vendor/bower-asset/bootstrap/scss/grid";
@import "../../vendor/bower-asset/bootstrap/scss/buttons";
@import "../../vendor/bower-asset/bootstrap/scss/forms";

@import "../../vendor/bower-asset/bootstrap/scss/alert";
@import "../../vendor/bower-asset/bootstrap/scss/badge";
@import "../../vendor/bower-asset/bootstrap/scss/breadcrumb";
@import "../../vendor/bower-asset/bootstrap/scss/button-group";
@import "../../vendor/bower-asset/bootstrap/scss/card";
@import "../../vendor/bower-asset/bootstrap/scss/carousel";
@import "../../vendor/bower-asset/bootstrap/scss/close";
@import "../../vendor/bower-asset/bootstrap/scss/dropdown";
@import "../../vendor/bower-asset/bootstrap/scss/images";
@import "../../vendor/bower-asset/bootstrap/scss/list-group";
@import "../../vendor/bower-asset/bootstrap/scss/modal";
@import "../../vendor/bower-asset/bootstrap/scss/nav";
@import "../../vendor/bower-asset/bootstrap/scss/navbar";
@import "../../vendor/bower-asset/bootstrap/scss/pagination";
@import "../../vendor/bower-asset/bootstrap/scss/popover";
@import "../../vendor/bower-asset/bootstrap/scss/tables";
@import "../../vendor/bower-asset/bootstrap/scss/transitions";
@import "../../vendor/bower-asset/bootstrap/scss/type";
@import "../../vendor/bower-asset/bootstrap/scss/utilities";

// ==================
// <<< CUSTOM OVERRIDES FOR NAVBAR DROPDOWN MENU ACTIVE/FOCUS AND NAV LINK ACTIVE COLORS
.dropdown-menu {
  .dropdown-item {
    &.active,
    &:active,
    &:focus,
    &:hover {
      color: map-get($theme-colors, "light") !important;               // white text
      background-color: map-get($theme-colors, "primary") !important; // custom primary background
      transition: background-color 0.2s ease, color 0.2s ease;
    }
  }
}

.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link {
  color: map-get($theme-colors, "primary") !important;
}
// ==================

// <<< EXPLICIT OVERRIDE FOR FORM CONTROL FOCUS (force styles with high specificity if needed)
.form-control:focus {
  border-color: map-get($theme-colors, "primary") !important;
  box-shadow: 0 0 0 0.25rem rgba(
    red(map-get($theme-colors, "primary")),
    green(map-get($theme-colors, "primary")),
    blue(map-get($theme-colors, "primary")),
    0.25
  ) !important;
  outline: none;
}
// ==================

.form-select.square {
  background-color: transparent;
  color: inherit;
  border-color: map-get($theme-colors, "secondary");
  border-radius: 0;

  &:focus {
    border-color: map-get($theme-colors, "primary");
    box-shadow: 0 0 0 0.25rem rgba(
      red(map-get($theme-colors, "primary")),
      green(map-get($theme-colors, "primary")),
      blue(map-get($theme-colors, "primary")),
      0.25
    );
    outline: none;
  }

  option:checked {
    background-color: map-get($theme-colors, "primary");
    color: map-get($theme-colors-text, "primary");
  }
}

@supports (-moz-appearance: none) {
  .form-select.square option:hover,
  .form-select.square option:focus {
    background-color: map-get($theme-colors, "primary");
    color: map-get($theme-colors-text, "primary");
  }
}
```

my issue is this
```
.form-select.square {
  background-color: transparent;
  color: inherit;
  border-color: map-get($theme-colors, "secondary");
  border-radius: 0;

  &:focus {
    border-color: map-get($theme-colors, "primary");
    box-shadow: 0 0 0 0.25rem rgba(
      red(map-get($theme-colors, "primary")),
      green(map-get($theme-colors, "primary")),
      blue(map-get($theme-colors, "primary")),
      0.25
    );
    outline: none;
  }

  option:checked {
    background-color: map-get($theme-colors, "primary");
    color: map-get($theme-colors-text, "primary");
  }
}

@supports (-moz-appearance: none) {
  .form-select.square option:hover,
  .form-select.square option:focus {
    background-color: map-get($theme-colors, "primary");
    color: map-get($theme-colors-text, "primary");
  }
}
```
Why is it the field the same color as the background? i just want it simply white.. and I wanted to ONLY change the SELECTION COLOR TO MATCH
MY PRIMARY COLOR FOR THE THEME DESIGN!