:root {
  --color-red1: #ffccbc;
  --color-red2: #ff6c5c;
  --color-red3: #c72c1c;
  --color-pink1: #ffbcd8;
  --color-pink2: #fa5c98;
  --color-pink3: #ba1c58;
  --color-purple1: #dcc6e0;
  --color-purple2: #9b59b6;
  --color-purple3: #5e147d;
  --color-blue1: #39d5ff;
  --color-blue2: #1297e0;
  --color-blue3: #0057a0;
  --color-turquoise1: #5efaf7;
  --color-turquoise2: #27cbc0;
  --color-turquoise3: #008b80;
  --color-green1: #8effc1;
  --color-green2: #2ecc71;
  --color-green3: #008c31;
  --color-yellow1: #fde3a7;
  --color-yellow2: #f5ab35;
  --color-yellow3: #d87400;
  --color-orange1: #ffdcb5;
  --color-orange2: #ff926b;
  --color-orange3: #c3522b;
  --color-brown1: #f6c4a3;
  --color-brown2: #ce9c7b;
  --color-brown3: #8e5c3b;
  --color-gray1: #e0e0e0;
  --color-gray2: #909090;
  --color-gray3: #505050;
}

.btn.btn-badge {
  --bs-badge-padding-x: 0.65em;
  --bs-badge-padding-y: 0.35em;
  --bs-badge-font-size: 0.75em;
  --bs-badge-font-weight: 700;
  --bs-badge-color: #fff;
  --bs-badge-border-radius: var(--bs-border-radius);
  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
  font-size: var(--bs-badge-font-size);
  font-weight: var(--bs-badge-font-weight);
  line-height: 1;
  border-radius: var(--bs-badge-border-radius);
  color: var(--pl-badge-text);
  background-color: var(--pl-badge-bg);
  border-color: var(--pl-badge-border);
}
.btn.btn-badge:hover {
  background-color: color-mix(in srgb, var(--pl-badge-bg), black 7%);
  border-color: color-mix(in srgb, var(--pl-badge-border), black 12%);
}
.btn.btn-badge:active,
.btn.btn-badge.active {
  background-color: color-mix(in srgb, var(--pl-badge-bg), black 14%);
  border-color: color-mix(in srgb, var(--pl-badge-border), black 22%);
}
.btn.btn-badge:disabled,
.btn.btn-badge.disabled {
  background-color: var(--pl-badge-bg);
  border-color: var(--pl-badge-border);
}
.btn.btn-badge:focus-visible {
  outline: 2px solid var(--pl-badge-text);
  outline-offset: 1px;
}

.badge.color-red1 {
  color: #c73000;
  background-color: #fff0eb;
  border: 1px solid #ffb9a4;
}

.btn.btn-badge.color-red1 {
  --pl-badge-text: #c73000;
  --pl-badge-bg: #fff0eb;
  --pl-badge-border: #ffb9a4;
}

.badge.color-red2 {
  color: #9c0f00;
  background-color: #ffd3ce;
  border: 1px solid #ff9387;
}

.btn.btn-badge.color-red2 {
  --pl-badge-text: #9c0f00;
  --pl-badge-bg: #ffd3ce;
  --pl-badge-border: #ff9387;
}

.badge.color-red3 {
  color: #5a140d;
  background-color: #f5bbb5;
  border: 1px solid #ec8176;
}

.btn.btn-badge.color-red3 {
  --pl-badge-text: #5a140d;
  --pl-badge-bg: #f5bbb5;
  --pl-badge-border: #ec8176;
}

.badge.color-pink1 {
  color: #c70053;
  background-color: #ffebf3;
  border: 1px solid #ffa4ca;
}

.btn.btn-badge.color-pink1 {
  --pl-badge-text: #c70053;
  --pl-badge-bg: #ffebf3;
  --pl-badge-border: #ffa4ca;
}

.badge.color-pink2 {
  color: #95053c;
  background-color: #fecee0;
  border: 1px solid #fb89b4;
}

.btn.btn-badge.color-pink2 {
  --pl-badge-text: #95053c;
  --pl-badge-bg: #fecee0;
  --pl-badge-border: #fb89b4;
}

.badge.color-pink3 {
  color: #540d28;
  background-color: #f3b2cb;
  border: 1px solid #ea74a1;
}

.btn.btn-badge.color-pink3 {
  --pl-badge-text: #540d28;
  --pl-badge-bg: #f3b2cb;
  --pl-badge-border: #ea74a1;
}

.badge.color-purple1 {
  color: #72437b;
  background-color: #f4eef6;
  border: 1px solid #d8c0dd;
}

.btn.btn-badge.color-purple1 {
  --pl-badge-text: #72437b;
  --pl-badge-bg: #f4eef6;
  --pl-badge-border: #d8c0dd;
}

.badge.color-purple2 {
  color: #472555;
  background-color: #e1cde9;
  border: 1px solid #c39cd3;
}

.btn.btn-badge.color-purple2 {
  --pl-badge-text: #472555;
  --pl-badge-bg: #e1cde9;
  --pl-badge-border: #c39cd3;
}

.badge.color-purple3 {
  color: #2a0938;
  background-color: #d8a1f0;
  border: 1px solid #bf63e6;
}

.btn.btn-badge.color-purple3 {
  --pl-badge-text: #2a0938;
  --pl-badge-bg: #d8a1f0;
  --pl-badge-border: #bf63e6;
}

.badge.color-blue1 {
  color: #006f8c;
  background-color: #c4f2ff;
  border: 1px solid #7ce3ff;
}

.btn.btn-badge.color-blue1 {
  --pl-badge-text: #006f8c;
  --pl-badge-bg: #c4f2ff;
  --pl-badge-border: #7ce3ff;
}

.badge.color-blue2 {
  color: #084465;
  background-color: #b5e1f9;
  border: 1px solid #72c6f4;
}

.btn.btn-badge.color-blue2 {
  --pl-badge-text: #084465;
  --pl-badge-bg: #b5e1f9;
  --pl-badge-border: #72c6f4;
}

.badge.color-blue3 {
  color: #002748;
  background-color: #96cfff;
  border: 1px solid #4fafff;
}

.btn.btn-badge.color-blue3 {
  --pl-badge-text: #002748;
  --pl-badge-bg: #96cfff;
  --pl-badge-border: #4fafff;
}

.badge.color-turquoise1 {
  color: #047573;
  background-color: #cffefd;
  border: 1px solid #89fbf9;
}

.btn.btn-badge.color-turquoise1 {
  --pl-badge-text: #047573;
  --pl-badge-bg: #cffefd;
  --pl-badge-border: #89fbf9;
}

.badge.color-turquoise2 {
  color: #125b56;
  background-color: #bcf2ee;
  border: 1px solid #80e7e0;
}

.btn.btn-badge.color-turquoise2 {
  --pl-badge-text: #125b56;
  --pl-badge-bg: #bcf2ee;
  --pl-badge-border: #80e7e0;
}

.badge.color-turquoise3 {
  color: #003f3a;
  background-color: #90fff6;
  border: 1px solid #48fff1;
}

.btn.btn-badge.color-turquoise3 {
  --pl-badge-text: #003f3a;
  --pl-badge-bg: #90fff6;
  --pl-badge-border: #48fff1;
}

.badge.color-green1 {
  color: #00632d;
  background-color: #ddffec;
  border: 1px solid #96ffc5;
}

.btn.btn-badge.color-green1 {
  --pl-badge-text: #00632d;
  --pl-badge-bg: #ddffec;
  --pl-badge-border: #96ffc5;
}

.badge.color-green2 {
  color: #155c33;
  background-color: #bff1d4;
  border: 1px solid #85e4ad;
}

.btn.btn-badge.color-green2 {
  --pl-badge-text: #155c33;
  --pl-badge-bg: #bff1d4;
  --pl-badge-border: #85e4ad;
}

.badge.color-green3 {
  color: #003f16;
  background-color: #90ffb7;
  border: 1px solid #49ff88;
}

.btn.btn-badge.color-green3 {
  --pl-badge-text: #003f16;
  --pl-badge-bg: #90ffb7;
  --pl-badge-border: #49ff88;
}

.badge.color-yellow1 {
  color: #906503;
  background-color: #fef7e5;
  border: 1px solid #fde09f;
}

.btn.btn-badge.color-yellow1 {
  --pl-badge-text: #906503;
  --pl-badge-bg: #fef7e5;
  --pl-badge-border: #fde09f;
}

.badge.color-yellow2 {
  color: #805106;
  background-color: #fce6c2;
  border: 1px solid #f9ca7e;
}

.btn.btn-badge.color-yellow2 {
  --pl-badge-text: #805106;
  --pl-badge-bg: #fce6c2;
  --pl-badge-border: #f9ca7e;
}

.badge.color-yellow3 {
  color: #613400;
  background-color: #ffd6a7;
  border: 1px solid #ffb55f;
}

.btn.btn-badge.color-yellow3 {
  --pl-badge-text: #613400;
  --pl-badge-bg: #ffd6a7;
  --pl-badge-border: #ffb55f;
}

.badge.color-orange1 {
  color: #995000;
  background-color: #fff5e9;
  border: 1px solid #ffd3a1;
}

.btn.btn-badge.color-orange1 {
  --pl-badge-text: #995000;
  --pl-badge-bg: #fff5e9;
  --pl-badge-border: #ffd3a1;
}

.badge.color-orange2 {
  color: #a32b00;
  background-color: #ffded3;
  border: 1px solid #ffaa8b;
}

.btn.btn-badge.color-orange2 {
  --pl-badge-text: #a32b00;
  --pl-badge-bg: #ffded3;
  --pl-badge-border: #ffaa8b;
}

.badge.color-orange3 {
  color: #582513;
  background-color: #f0cabc;
  border: 1px solid #e39b82;
}

.btn.btn-badge.color-orange3 {
  --pl-badge-text: #582513;
  --pl-badge-bg: #f0cabc;
  --pl-badge-border: #e39b82;
}

.badge.color-brown1 {
  color: #a84d10;
  background-color: #fcede3;
  border: 1px solid #f6c4a2;
}

.btn.btn-badge.color-brown1 {
  --pl-badge-text: #a84d10;
  --pl-badge-bg: #fcede3;
  --pl-badge-border: #f6c4a2;
}

.badge.color-brown2 {
  color: #6c4328;
  background-color: #f0e1d7;
  border: 1px solid #ddbaa3;
}

.btn.btn-badge.color-brown2 {
  --pl-badge-text: #6c4328;
  --pl-badge-bg: #f0e1d7;
  --pl-badge-border: #ddbaa3;
}

.badge.color-brown3 {
  color: #40291b;
  background-color: #e4cdbe;
  border: 1px solid #cfa68b;
}

.btn.btn-badge.color-brown3 {
  --pl-badge-text: #40291b;
  --pl-badge-bg: #e4cdbe;
  --pl-badge-border: #cfa68b;
}

.badge.color-gray1 {
  color: #656565;
  background-color: #f6f6f6;
  border: 1px solid #d2d2d2;
}

.btn.btn-badge.color-gray1 {
  --pl-badge-text: #656565;
  --pl-badge-bg: #f6f6f6;
  --pl-badge-border: #d2d2d2;
}

.badge.color-gray2 {
  color: #414141;
  background-color: #dedede;
  border: 1px solid #bababa;
}

.btn.btn-badge.color-gray2 {
  --pl-badge-text: #414141;
  --pl-badge-bg: #dedede;
  --pl-badge-border: #bababa;
}

.badge.color-gray3 {
  color: #242424;
  background-color: #cbcbcb;
  border: 1px solid #a7a7a7;
}

.btn.btn-badge.color-gray3 {
  --pl-badge-text: #242424;
  --pl-badge-bg: #cbcbcb;
  --pl-badge-border: #a7a7a7;
}