:root {
   --hue-color_red    : 12;
   --hue-color_orange : 32;
   --hue-color_green  : 121;
   --hue-color_blue   : 212;
   --hue-color_purple : 300;

   --bs-color_green-1  : #1a5328;
   --bs-color_green-2  : #d4edda;
   --bs-color_green-3  : #c4e4cc;
   --bs-color_orange-1 : #856403;
   --bs-color_orange-2 : #FFF3CD;
   --bs-color_orange-3 : #FFEEBA;
   --bs-color_red-1    : #721d24;
   --bs-color_red-2    : #f7d7da;
   --bs-color_red-3    : #F5C6CC;
   
   --color_red    : hsl(var(--hue-color_red), 96%, 41%);
   --color_orange : hsl(var(--hue-color_orange), 96%, 47%);
   --color_green  : hsl(var(--hue-color_green), 89%, 28%);
   /* --color_green-light  : hsl(121, 83%, 40%); */
   --color_blue   : hsl(var(--hue-color_blue), 80%, 35%);
   --color-purple : hsl(300, 70%, 35%);
}

.background_red {
   background-color: var(--color_red);
}
.background_orange {
   background-color: var(--color_orange);
}
.background_green {
   background-color: var(--color_green);
}
.background_blue {
   background-color: var(--color_blue);
}
.background_purple {
   background-color: var(--color-purple);
}

.background_red:hover:not(:disabled, .disabled) {
   background-color: hsl(var(--hue-color_red), 98%, 36%);
}
.background_orange:hover:not(:disabled, .disabled) {
   background-color: hsl(var(--hue-color_orange), 98%, 42%);
}
.background_green:hover:not(:disabled, .disabled) {
   background-color: hsl(var(--hue-color_green), 91%, 23%);
}
.background_blue:hover:not(:disabled, .disabled) {
   background-color: hsl(var(--hue-color_blue), 82%, 30%);
}

.background_red:active:not(:disabled, .disabled) {
   background-color: hsl(var(--hue-color_red), 96%, 31%);
}
.background_orange:active:not(:disabled, .disabled) {
   background-color: hsl(var(--hue-color_orange), 96%, 37%);
}
.background_green:active:not(:disabled, .disabled) {
   background-color: hsl(var(--hue-color_green), 89%, 18%);
}
.background_blue:active:not(:disabled, .disabled) {
   background-color: hsl(var(--hue-color_blue), 80%, 25%);
}