/* TODO: Determine best way to integrate this with Bootstrap's similar system */

@use "sass:list";

/*****************
* color palettes *
*****************/

$white: #fff;
$borderNeutral: #e4e9f0;
$bgNeutral: #f2f5f8;
$formBorder: #d1d9e3;
$accentNeutral: #7c8a9c;
$accentDeEmphasized: #556272;
$black: #181f2f;

.bg-neutral {
  background-color: $bgNeutral;
}

$purple: (
  #f6ecfd,
  #eddafb,
  #dab5f4,
  #c893eb,
  #b576dd,
  #a15dcb,
  #8b48b3,
  #723695,
  #572674,
  #3e1a53
);

$green: (
  #f5fdee,
  #eafbdd,
  #d3f4bb,
  #bceb9b,
  #a5dd7f,
  #8ecb67,
  #76b351,
  #5f953e,
  #47742d,
  #32531f
);

$blue: (
  #ecf6fd,
  #daedfb,
  #b5d8f4,
  #93c2eb,
  #76abdd,
  #5d94cb,
  #487cb3,
  #366495,
  #264b74,
  #1a3453
);

$red: (
  #fdecf0,
  #fbdae1,
  #f4b5c1,
  #eb93a2,
  #dd7685,
  #cb5d6c,
  #b34855,
  #b34855,
  #74262f,
  #531a20
);

$amber: (
  #fdf9e2,
  #fbf3c6,
  #f4e296,
  #ebca72,
  #ddaa57,
  #cb8644,
  #b36235,
  #954528,
  #742e1d,
  #531d14
);

$palette: (
  "purple": $purple,
  "red": $red,
  "green": $green,
  "blue": $blue,
  "amber": $amber,
);

/****************
* palette utils *
****************/

@each $colorname, $colorlist in $palette {
  @for $i from 1 through 10 {
    $n: $i * 10;
    .#{$colorname}-#{$n} {
      $hex: list.nth($colorlist, $i);
      color: #{$hex};
    }

    .bg-#{$colorname}-#{$n} {
      $hex: list.nth($colorlist, $i);
      background-color: #{$hex};
    }
  }
}
