// Primary colors
$primary-colors: (
  25: #f5f6fd,
  50: #e2e5fa,
  100: #ced4f6,
  200: #a8b2ef,
  300: #8190e8,
  400: #243dc6,
  500: #162578,
  600: #132067,
  700: #111c5b,
  800: #0e184f,
  900: #0c1442,
);
// secondary colors
$neutral-colors: (
  25: #fcfcfd,
  50: #f9fafb,
  100: #f2f4f7,
  200: #eaecf0,
  300: #d0d5dd,
  400: #98a2b3,
  500: #667085,
  600: #475467,
  700: #344054,
  800: #1d2939,
  900: #101828,
);

// warning colors
$warning-colors: (
  25: #fff4ef,
  50: #ffe8ca,
  100: #ffddb0,
  200: #ffce8d,
  300: #ffbf6a,
  400: #ff9200,
  500: #e58300,
  600: #be6c00,
  700: #9e5a00,
  800: #7e4800,
  900: #5f3600,
);

// error colors
$warning-colors: (
  25: #fffbfa,
  50: #fef3f2,
  100: #fee4e2,
  200: #fecdca,
  300: #fda29b,
  400: #f97066,
  500: #e58300,
  600: #be6c00,
  700: #9e5a00,
  800: #7e4800,
  900: #5f3600,
);

//

:root {
  @each $key, $value in $secondary-colors {
    --_secondary-#{$key}: #{$value};
  }

  @each $key, $value in $primary-colors {
    --_primary-#{$key}: #{$value};
  }
}

// Secondary Utilities
@each $key, $value in $secondary-colors {
  .bg-secondary-#{$key} {
    background-color: var(--_secondary-#{$key}) !important;
  }

  .text-secondary-#{$key} {
    color: var(--_secondary-#{$key}) !important;
  }

  .hover\:bg-secondary-#{$key}:hover {
    background-color: var(--_secondary-#{$key}) !important;
  }

  .hover\:text-secondary-#{$key}:hover {
    color: var(--_secondary-#{$key}) !important;
  }
}

// Primary Utilities
@each $key, $value in $primary-colors {
  .bg-primary-#{$key} {
    background-color: var(--_primary-#{$key}) !important;
  }

  .text-primary-#{$key} {
    color: var(--_primary-#{$key}) !important;
  }

  .hover\:bg-primary-#{$key}:hover {
    background-color: var(--_primary-#{$key}) !important;
  }

  .hover\:text-primary-#{$key}:hover {
    color: var(--_primary-#{$key}) !important;
  }
}