// 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")
);

// $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
);

// 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";


Error: Undefined variable.
    ╷
608 │       values: $utilities-text-emphasis-colors
    │               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  vendor/bower-asset/bootstrap/scss/_utilities.scss 608:15  @import
  web/css/app-bootstrap.scss 199:9                          root stylesheet