:root {
  --bs-primary: #4550a8;
  --bs-primary-rgb: 69, 80, 168;
  --bs-primary-bg: #e1e4f4;
  --bs-primary-bg-active: #cfd5ee;

  --bs-primary-text-emphasis: var(--bs-primary);
  --bs-primary-bg-subtle: var(--bs-primary-bg);
  --bs-primary-border-subtle: var(--bs-primary);

  --bs-secondary: #f07a5f;
  --bs-secondary-rgb: 240, 122, 95;
  --bs-secondary-bg: #fde9e5;
  --bs-secondary-bg-active: #f8c3b7;

  --bs-secondary-text-emphasis: var(--bs-secondary);
  --bs-secondary-bg-subtle: var(--bs-secondary-bg);
  --bs-secondary-border-subtle: var(--bs-secondary);

  --bs-warning: #ffa800;
  --bs-warning-rgb: 255, 168, 0;
  --bs-warning-bg: #ffeccc;
  --bs-warning-bg-active: #ffdf99;

  --bs-warning-text-emphasis: var(--bs-warning);
  --bs-warning-bg-subtle: var(--bs-warning-bg);
  --bs-warning-border-subtle: var(--bs-warning);

  --bs-success: #198754;
  --bs-success-rgb: 25, 135, 84;
  --bs-success-bg: #d1e7dd;
  --bs-success-bg-active: #bfdacc;

  --bs-form-valid-color: var(--bs-success-bg-active);
  --bs-form-valid-border-color: var(--bs-success-bg-active);

  --bs-danger: #dc3545;
  --bs-danger-rgb: 220, 53, 69;
  --bs-danger-bg: #f8d7da;
  --bs-danger-bg-active: #f1c6c9;

  --bs-form-invalid-color: var(--bs-danger-bg-active);
  --bs-form-invalid-border-color: var(--bs-danger-bg-active);

  --bs-info: #8ba2d3;
  --bs-info-rgb: 139, 162, 211;
  --bs-info-bg: #e6ebf5;
  --bs-info-bg-active: #d1ddea;

  --bs-info-text-emphasis: var(--bs-info);
  --bs-info-bg-subtle: var(--bs-info-bg);
  --bs-info-border-subtle: var(--bs-info);

  --bs-light: #6d6d6d;
  --bs-light-rgb: 109, 109, 109;
  --bs-light-bg: #f0f0f0;
  --bs-light-bg-active: #d9d9d9;
  --bs-link-color: var(--bs-light);

  --bs-light-text-emphasis: var(--bs-light);
  --bs-light-bg-subtle: var(--bs-light-bg);
  --bs-light-border-subtle: var(--bs-light);

  /** Card */
  --bs-card-cap-color: var(--bs-light);
  --bs-card-cap-bg: var(--bs-light-bg);

  --bs-dark: #2b2b2b;
  --bs-dark-rgb: 43 43 43;
  --bs-dark-bg: #454545;
  --bs-dark-bg-active: #333333;

  --bs-dark-text-emphasis: var(--bs-dark);
  --bs-dark-bg-subtle: var(--bs-dark-bg);
  --bs-dark-border-subtle: var(--bs-dark);

  --bs-black: #000000;
  --bs-black-rgb: 0, 0, 0;
  --bs-black-bg: #1a1a1a;
  --bs-black-bg-active: #000000;

  --bs-white: #ffffff;
  --bs-white-rgb: 255, 255, 255;

  /** Custom colors */
  --bs-cp1-bg-color: #ffe599;
  --bs-cp2-bg-color: #d9ead3;
  --bs-cp3-bg-color: #cfe2f3;
  --bs-cp4-bg-color: var(--bs-white);
}

.bg-danger {
  background-color: var(--bs-danger-bg) !important;
  color: var(--bs-danger) !important;
  --bs-border-color: var(--bs-danger);
  --bs-body-bg: var(--bs-danger-bg-active);

  &:hover {
    background-color: var(--bs-danger-bg-active) !important;
  }
}

.bg-success {
  background-color: var(--bs-success-bg) !important;
  color: var(--bs-success) !important;
  --bs-border-color: var(--bs-success);
  --bs-body-bg: var(--bs-success-bg-active);

  &:hover {
    background-color: var(--bs-success-bg-active) !important;
  }
}

.bg-info {
  background-color: var(--bs-info-bg) !important;
  color: var(--bs-info) !important;
  --bs-border-color: var(--bs-info);
  --bs-body-bg: var(--bs-info-bg-active);

  &:hover {
    background-color: var(--bs-info-bg-active) !important;
  }
}

.bg-warning {
  background-color: var(--bs-warning-bg) !important;
  color: var(--bs-warning) !important;
  --bs-border-color: var(--bs-warning);
  --bs-body-bg: var(--bs-warning-bg-active);

  &:hover {
    background-color: var(--bs-warning-bg-active) !important;
  }
}

.bg-light {
  background-color: var(--bs-light-bg) !important;
  color: var(--bs-light) !important;
  --bs-border-color: var(--bs-light);
  --bs-body-bg: var(--bs-light-bg-active);

  &:hover {
    background-color: var(--bs-light-bg-active) !important;
  }
}