@charset "UTF-8";
:root {
  --border-width: 1px;
  --border-style: solid;
  --border-color: gray;
}

.border {
  border: var(--border-width) var(--border-style) var(--border-color);
}

.border-top {
  border-top: var(--border-width) var(--border-style) var(--border-color);
}

.border-bottom {
  border-bottom: var(--border-width) var(--border-style) var(--border-color);
}

.border-start {
  border-left: var(--border-width) var(--border-style) var(--border-color);
}

.border-end {
  border-right: var(--border-width) var(--border-style) var(--border-color);
}

.border-top-0 {
  border-top: none;
}

.border-bottom-0 {
  border-bottom: none;
}

.border-start-0 {
  border-left: none;
}

.border-end-0 {
  border-right: none;
}

.border-0 {
  border-width: 0;
}

.border-1 {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-3 {
  border-width: 3px;
}

.border-4 {
  border-width: 4px;
}

.border-5 {
  border-width: 5px;
}

.rounded {
  border-radius: 4px;
}

.rounded-circle {
  border-radius: 50%;
}

.rounded-pill {
  border-radius: 50rem;
}

.rounded-top-0 {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.rounded-bottom-0 {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.rounded-start-0 {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.rounded-end-0 {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.rounded-0 {
  border-radius: 0;
}

.rounded-1 {
  border-radius: 4px;
}

.rounded-2 {
  border-radius: 8px;
}

.rounded-3 {
  border-radius: 12px;
}

.rounded-4 {
  border-radius: 16px;
}

.rounded-5 {
  border-radius: 20px;
}

.d-none {
  display: none;
}

.d-inline {
  display: inline;
}

.d-inline-block {
  display: inline-block;
}

.d-block {
  display: block;
}

.d-grid {
  display: grid;
}

.d-inline-grid {
  display: inline-grid;
}

.d-table {
  display: table;
}

.d-table-cell {
  display: table-cell;
}

.d-table-row {
  display: table-row;
}

.d-flex {
  display: flex;
}

.d-inline-flex {
  display: inline-flex;
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column {
  flex-direction: column;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

.justify-start {
  justify-content: start;
}

.justify-end {
  justify-content: end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.align-items-start {
  align-items: start;
}

.align-items-end {
  align-items: end;
}

.align-items-center {
  align-items: center;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-stretch {
  align-items: stretch;
}

.align-self-start {
  align-self: flex-start;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-center {
  align-self: center;
}

.align-self-baseline {
  align-self: baseline;
}

.align-self-stretch {
  align-self: stretch;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.align-content-start {
  align-content: start;
}

.align-content-end {
  align-content: end;
}

.align-content-center {
  align-content: center;
}

.align-content-between {
  align-content: space-between;
}

.align-content-around {
  align-content: space-around;
}

.align-content-stretch {
  align-content: stretch;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-visible {
  overflow-y: visible;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.w-25 {
  width: 25%;
}

.w-50 {
  width: 50%;
}

.w-75 {
  width: 75%;
}

.w-100 {
  width: 100%;
}

.w-auto {
  width: auto;
}

.mw-100 {
  max-width: 100%;
}

.vw-100 {
  width: 100vw;
}

.min-vw-100 {
  min-width: 100vw;
}

.h-25 {
  height: 25%;
}

.h-50 {
  height: 50%;
}

.h-75 {
  height: 75%;
}

.h-100 {
  height: 100%;
}

.h-auto {
  height: auto;
}

.mh-100 {
  max-height: 100%;
}

.vh-100 {
  height: 100vh;
}

.min-vh-100 {
  min-height: 100vh;
}

:root {
  --font-h1-size: 2.5rem;
  --font-h2-size: 2rem;
  --font-h3-size: 1.75rem;
  --font-h4-size: 1.5rem;
  --font-h5-size: 1.25rem;
  --font-h6-size: 1rem;
  --font-h1-weight: 500;
  --font-h2-weight: 500;
  --font-h3-weight: 500;
  --font-h4-weight: 500;
  --font-h5-weight: 500;
  --font-h6-weight: 500;
}

h1,
.h1 {
  font-size: var(--font-h1-size);
  font-weight: var(--font-h1-weight);
}

h2,
.h2 {
  font-size: var(--font-h2-size);
  font-weight: var(--font-h2-weight);
}

h3,
.h3 {
  font-size: var(--font-h3-size);
  font-weight: var(--font-h3-weight);
}

h4,
.h4 {
  font-size: var(--font-h4-size);
  font-weight: var(--font-h4-weight);
}

h5,
.h5 {
  font-size: var(--font-h5-size);
  font-weight: var(--font-h5-weight);
}

h6,
.h6 {
  font-size: var(--font-h6-size);
  font-weight: var(--font-h6-weight);
}

.text-start {
  text-align: start;
}

.text-end {
  text-align: end;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.fst-italic {
  font-style: italic;
}

.fst-normal {
  font-style: normal;
}

.text-decoration-underline {
  text-decoration: underline;
}

.text-decoration-line-through {
  text-decoration: line-through;
}

.text-decoration-none {
  text-decoration: none;
}

.text-wrap-nowrap {
  text-wrap: nowrap;
}

.text-wrap-wrap {
  text-wrap: wrap;
}

.text-wrap-balance {
  text-wrap: balance;
}

.text-wrap-pretty {
  text-wrap: pretty;
}

.text-wrap-stable {
  text-wrap: stable;
}

.text-truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:root {
  --shadow-0-offset-x: 0;
  --shadow-0-offset-y: 0;
  --shadow-0-blur: 0;
  --shadow-0-spread: 0;
  --shadow-0-color: transparent;
  --shadow-0: var(--shadow-0-offset-x)
    var(--shadow-0-offset-y)
    var(--shadow-0-blur)
    var(--shadow-0-spread)
    var(--shadow-0-color);
  --shadow-1-offset-x: 0px;
  --shadow-1-offset-y: 2px;
  --shadow-1-blur: 3px;
  --shadow-1-spread: 0px;
  --shadow-1-color: rgba(0, 0, 0, 0.2);
  --shadow-1: var(--shadow-1-offset-x)
    var(--shadow-1-offset-y)
    var(--shadow-1-blur)
    var(--shadow-1-spread)
    var(--shadow-1-color);
  --shadow-2-offset-x: 0px;
  --shadow-2-offset-y: 4px;
  --shadow-2-blur: 6px;
  --shadow-2-spread: 0px;
  --shadow-2-color: rgba(0, 0, 0, 0.2);
  --shadow-2: var(--shadow-2-offset-x)
    var(--shadow-2-offset-y)
    var(--shadow-2-blur)
    var(--shadow-2-spread)
    var(--shadow-2-color);
  --shadow-3-offset-x: 0px;
  --shadow-3-offset-y: 6px;
  --shadow-3-blur: 10px;
  --shadow-3-spread: 0px;
  --shadow-3-color: rgba(0, 0, 0, 0.2);
  --shadow-3: var(--shadow-3-offset-x)
    var(--shadow-3-offset-y)
    var(--shadow-3-blur)
    var(--shadow-3-spread)
    var(--shadow-3-color);
  --shadow-4-offset-x: 0px;
  --shadow-4-offset-y: 8px;
  --shadow-4-blur: 10px;
  --shadow-4-spread: 0px;
  --shadow-4-color: rgba(0, 0, 0, 0.2);
  --shadow-4: var(--shadow-4-offset-x)
    var(--shadow-4-offset-y)
    var(--shadow-4-blur)
    var(--shadow-4-spread)
    var(--shadow-4-color);
  --shadow-5-offset-x: 0px;
  --shadow-5-offset-y: 10px;
  --shadow-5-blur: 10px;
  --shadow-5-spread: 0px;
  --shadow-5-color: rgba(0, 0, 0, 0.2);
  --shadow-5: var(--shadow-5-offset-x)
    var(--shadow-5-offset-y)
    var(--shadow-5-blur)
    var(--shadow-5-spread)
    var(--shadow-5-color);
}

.shadow-0 {
  box-shadow: var(--shadow-0);
}
.shadow-0.inset {
  box-shadow: inset var(--shadow-0);
}

.hover-shadow-0:hover {
  box-shadow: var(--shadow-0);
}
.hover-shadow-0:hover.inset {
  box-shadow: inset var(--shadow-0);
}

.active-shadow-0:active {
  box-shadow: var(--shadow-0);
}
.active-shadow-0:active.inset {
  box-shadow: inset var(--shadow-0);
}

.shadow-1 {
  box-shadow: var(--shadow-1);
}
.shadow-1.inset {
  box-shadow: inset var(--shadow-1);
}

.hover-shadow-1:hover {
  box-shadow: var(--shadow-1);
}
.hover-shadow-1:hover.inset {
  box-shadow: inset var(--shadow-1);
}

.active-shadow-1:active {
  box-shadow: var(--shadow-1);
}
.active-shadow-1:active.inset {
  box-shadow: inset var(--shadow-1);
}

.shadow-2 {
  box-shadow: var(--shadow-2);
}
.shadow-2.inset {
  box-shadow: inset var(--shadow-2);
}

.hover-shadow-2:hover {
  box-shadow: var(--shadow-2);
}
.hover-shadow-2:hover.inset {
  box-shadow: inset var(--shadow-2);
}

.active-shadow-2:active {
  box-shadow: var(--shadow-2);
}
.active-shadow-2:active.inset {
  box-shadow: inset var(--shadow-2);
}

.shadow-3 {
  box-shadow: var(--shadow-3);
}
.shadow-3.inset {
  box-shadow: inset var(--shadow-3);
}

.hover-shadow-3:hover {
  box-shadow: var(--shadow-3);
}
.hover-shadow-3:hover.inset {
  box-shadow: inset var(--shadow-3);
}

.active-shadow-3:active {
  box-shadow: var(--shadow-3);
}
.active-shadow-3:active.inset {
  box-shadow: inset var(--shadow-3);
}

.shadow-4 {
  box-shadow: var(--shadow-4);
}
.shadow-4.inset {
  box-shadow: inset var(--shadow-4);
}

.hover-shadow-4:hover {
  box-shadow: var(--shadow-4);
}
.hover-shadow-4:hover.inset {
  box-shadow: inset var(--shadow-4);
}

.active-shadow-4:active {
  box-shadow: var(--shadow-4);
}
.active-shadow-4:active.inset {
  box-shadow: inset var(--shadow-4);
}

.shadow-5 {
  box-shadow: var(--shadow-5);
}
.shadow-5.inset {
  box-shadow: inset var(--shadow-5);
}

.hover-shadow-5:hover {
  box-shadow: var(--shadow-5);
}
.hover-shadow-5:hover.inset {
  box-shadow: inset var(--shadow-5);
}

.active-shadow-5:active {
  box-shadow: var(--shadow-5);
}
.active-shadow-5:active.inset {
  box-shadow: inset var(--shadow-5);
}

.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mr-1 {
  margin-right: 0.25rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1 {
  margin-left: 0.25rem !important;
}

.mx-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mr-2 {
  margin-right: 0.5rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2 {
  margin-left: 0.5rem !important;
}

.mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mr-3 {
  margin-right: 1rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.ml-3 {
  margin-left: 1rem !important;
}

.mx-3 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mr-4 {
  margin-right: 1.5rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4 {
  margin-left: 1.5rem !important;
}

.mx-4 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mr-5 {
  margin-right: 3rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.ml-5 {
  margin-left: 3rem !important;
}

.mx-5 {
  margin-left: 3rem !important;
  margin-right: 3rem !important;
}

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pr-1 {
  padding-right: 0.25rem !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1 {
  padding-left: 0.25rem !important;
}

.px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pr-2 {
  padding-right: 0.5rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2 {
  padding-left: 0.5rem !important;
}

.px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pr-3 {
  padding-right: 1rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.pl-3 {
  padding-left: 1rem !important;
}

.px-3 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pr-4 {
  padding-right: 1.5rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4 {
  padding-left: 1.5rem !important;
}

.px-4 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pr-5 {
  padding-right: 3rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

.pl-5 {
  padding-left: 3rem !important;
}

.px-5 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.gap-0 {
  gap: 0 !important;
}

.gapx-0 {
  column-gap: 0 !important;
}

.gapy-0 {
  row-gap: 0 !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.gapx-1 {
  column-gap: 0.25rem !important;
}

.gapy-1 {
  row-gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gapx-2 {
  column-gap: 0.5rem !important;
}

.gapy-2 {
  row-gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.gapx-3 {
  column-gap: 1rem !important;
}

.gapy-3 {
  row-gap: 1rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

.gapx-4 {
  column-gap: 1.5rem !important;
}

.gapy-4 {
  row-gap: 1.5rem !important;
}

.gap-5 {
  gap: 3rem !important;
}

.gapx-5 {
  column-gap: 3rem !important;
}

.gapy-5 {
  row-gap: 3rem !important;
}

:root {
  --red-hue: 0;
  --red-saturation: 100%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 50%;
  --palette-gray-saturation: 5%;
  --red-lightness-0: 97%;
  --red-lightness-1: 93%;
  --red-lightness-2: 85%;
  --red-lightness-3: 75%;
  --red-lightness-4: 65%;
  --red-lightness-5: 50%;
  --red-lightness-6: 42%;
  --red-lightness-7: 34%;
  --red-lightness-8: 26%;
  --red-lightness-9: 18%;
  --red-lightness-10: 10%;
  --red-color-0: hsl(
    var(--red-hue),
    var(--red-saturation),
    var(--red-lightness-0)
  );
  --red-color-1: hsl(
    var(--red-hue),
    var(--red-saturation),
    var(--red-lightness-1)
  );
  --red-color-2: hsl(
    var(--red-hue),
    var(--red-saturation),
    var(--red-lightness-2)
  );
  --red-color-3: hsl(
    var(--red-hue),
    var(--red-saturation),
    var(--red-lightness-3)
  );
  --red-color-4: hsl(
    var(--red-hue),
    var(--red-saturation),
    var(--red-lightness-4)
  );
  --red-color-5: hsl(
    var(--red-hue),
    var(--red-saturation),
    var(--red-lightness-5)
  );
  --red-color-6: hsl(
    var(--red-hue),
    var(--red-saturation),
    var(--red-lightness-6)
  );
  --red-color-7: hsl(
    var(--red-hue),
    var(--red-saturation),
    var(--red-lightness-7)
  );
  --red-color-8: hsl(
    var(--red-hue),
    var(--red-saturation),
    var(--red-lightness-8)
  );
  --red-color-9: hsl(
    var(--red-hue),
    var(--red-saturation),
    var(--red-lightness-9)
  );
  --red-color-10: hsl(
    var(--red-hue),
    var(--red-saturation),
    var(--red-lightness-10)
  );
  --red-color-0-ch:
    var(--red-hue), var(--red-saturation),
    var(--red-lightness-0);
  --red-color-1-ch:
    var(--red-hue), var(--red-saturation),
    var(--red-lightness-1);
  --red-color-2-ch:
    var(--red-hue), var(--red-saturation),
    var(--red-lightness-2);
  --red-color-3-ch:
    var(--red-hue), var(--red-saturation),
    var(--red-lightness-3);
  --red-color-4-ch:
    var(--red-hue), var(--red-saturation),
    var(--red-lightness-4);
  --red-color-5-ch:
    var(--red-hue), var(--red-saturation),
    var(--red-lightness-5);
  --red-color-6-ch:
    var(--red-hue), var(--red-saturation),
    var(--red-lightness-6);
  --red-color-7-ch:
    var(--red-hue), var(--red-saturation),
    var(--red-lightness-7);
  --red-color-8-ch:
    var(--red-hue), var(--red-saturation),
    var(--red-lightness-8);
  --red-color-9-ch:
    var(--red-hue), var(--red-saturation),
    var(--red-lightness-9);
  --red-color-10-ch:
    var(--red-hue), var(--red-saturation),
    var(--red-lightness-10);
  --red-gray-0: hsl(
    var(--red-hue),
    var(--palette-gray-saturation),
    var(--red-lightness-0)
  );
  --red-gray-1: hsl(
    var(--red-hue),
    var(--palette-gray-saturation),
    var(--red-lightness-1)
  );
  --red-gray-2: hsl(
    var(--red-hue),
    var(--palette-gray-saturation),
    var(--red-lightness-2)
  );
  --red-gray-3: hsl(
    var(--red-hue),
    var(--palette-gray-saturation),
    var(--red-lightness-3)
  );
  --red-gray-4: hsl(
    var(--red-hue),
    var(--palette-gray-saturation),
    var(--red-lightness-4)
  );
  --red-gray-5: hsl(
    var(--red-hue),
    var(--palette-gray-saturation),
    var(--red-lightness-5)
  );
  --red-gray-6: hsl(
    var(--red-hue),
    var(--palette-gray-saturation),
    var(--red-lightness-6)
  );
  --red-gray-7: hsl(
    var(--red-hue),
    var(--palette-gray-saturation),
    var(--red-lightness-7)
  );
  --red-gray-8: hsl(
    var(--red-hue),
    var(--palette-gray-saturation),
    var(--red-lightness-8)
  );
  --red-gray-9: hsl(
    var(--red-hue),
    var(--palette-gray-saturation),
    var(--red-lightness-9)
  );
  --red-gray-10: hsl(
    var(--red-hue),
    var(--palette-gray-saturation),
    var(--red-lightness-10)
  );
  --red-accent-light-color: hsl(
    var(--red-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --red-accent-dark-color: hsl(
    var(--red-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --red-accent-0: var(--red-accent-dark-color);
  --red-accent-1: var(--red-accent-dark-color);
  --red-accent-2: var(--red-accent-dark-color);
  --red-accent-3: var(--red-accent-dark-color);
  --red-accent-4: var(--red-accent-dark-color);
  --red-accent-5: var(--red-accent-light-color);
  --red-accent-6: var(--red-accent-light-color);
  --red-accent-7: var(--red-accent-light-color);
  --red-accent-8: var(--red-accent-light-color);
  --red-accent-9: var(--red-accent-light-color);
  --red-accent-10: var(--red-accent-light-color);
  --red-lighter: var(--red-color-2);
  --red-accent-lighter: var(--red-accent-2);
  --red-lighter-ch:
    var(--red-hue), var(--red-saturation),
    var(--red-lightness-2);
  --red-light: var(--red-color-3);
  --red-accent-light: var(--red-accent-3);
  --red-light-ch:
    var(--red-hue), var(--red-saturation),
    var(--red-lightness-3);
  --red-default: var(--red-color-5);
  --red-accent-default: var(--red-accent-5);
  --red-default-ch:
    var(--red-hue), var(--red-saturation),
    var(--red-lightness-5);
  --red-dark: var(--red-color-7);
  --red-accent-dark: var(--red-accent-7);
  --red-dark-ch:
    var(--red-hue), var(--red-saturation),
    var(--red-lightness-7);
  --red-darker: var(--red-color-9);
  --red-accent-darker: var(--red-accent-9);
  --red-darker-ch:
    var(--red-hue), var(--red-saturation),
    var(--red-lightness-9);
}

.red {
  --palette-hue: var(--red-hue);
  --palette-saturation: var(--red-saturation);
  --palette-accent-light-color: var(
    --red-accent-light-color
  );
  --palette-accent-dark-color: var(
    --red-accent-dark-color
  );
  --palette-lightness-0: var(
    --red-lightness-0
  );
  --palette-color-0: var(--red-color-0);
  --palette-color-0-ch: var(
    --red-color-0-ch
  );
  --palette-gray-0: var(--red-gray-0);
  --palette-accent-0: var(--red-accent-0);
  --palette-lightness-1: var(
    --red-lightness-1
  );
  --palette-color-1: var(--red-color-1);
  --palette-color-1-ch: var(
    --red-color-1-ch
  );
  --palette-gray-1: var(--red-gray-1);
  --palette-accent-1: var(--red-accent-1);
  --palette-lightness-2: var(
    --red-lightness-2
  );
  --palette-color-2: var(--red-color-2);
  --palette-color-2-ch: var(
    --red-color-2-ch
  );
  --palette-gray-2: var(--red-gray-2);
  --palette-accent-2: var(--red-accent-2);
  --palette-lightness-3: var(
    --red-lightness-3
  );
  --palette-color-3: var(--red-color-3);
  --palette-color-3-ch: var(
    --red-color-3-ch
  );
  --palette-gray-3: var(--red-gray-3);
  --palette-accent-3: var(--red-accent-3);
  --palette-lightness-4: var(
    --red-lightness-4
  );
  --palette-color-4: var(--red-color-4);
  --palette-color-4-ch: var(
    --red-color-4-ch
  );
  --palette-gray-4: var(--red-gray-4);
  --palette-accent-4: var(--red-accent-4);
  --palette-lightness-5: var(
    --red-lightness-5
  );
  --palette-color-5: var(--red-color-5);
  --palette-color-5-ch: var(
    --red-color-5-ch
  );
  --palette-gray-5: var(--red-gray-5);
  --palette-accent-5: var(--red-accent-5);
  --palette-lightness-6: var(
    --red-lightness-6
  );
  --palette-color-6: var(--red-color-6);
  --palette-color-6-ch: var(
    --red-color-6-ch
  );
  --palette-gray-6: var(--red-gray-6);
  --palette-accent-6: var(--red-accent-6);
  --palette-lightness-7: var(
    --red-lightness-7
  );
  --palette-color-7: var(--red-color-7);
  --palette-color-7-ch: var(
    --red-color-7-ch
  );
  --palette-gray-7: var(--red-gray-7);
  --palette-accent-7: var(--red-accent-7);
  --palette-lightness-8: var(
    --red-lightness-8
  );
  --palette-color-8: var(--red-color-8);
  --palette-color-8-ch: var(
    --red-color-8-ch
  );
  --palette-gray-8: var(--red-gray-8);
  --palette-accent-8: var(--red-accent-8);
  --palette-lightness-9: var(
    --red-lightness-9
  );
  --palette-color-9: var(--red-color-9);
  --palette-color-9-ch: var(
    --red-color-9-ch
  );
  --palette-gray-9: var(--red-gray-9);
  --palette-accent-9: var(--red-accent-9);
  --palette-lightness-10: var(
    --red-lightness-10
  );
  --palette-color-10: var(--red-color-10);
  --palette-color-10-ch: var(
    --red-color-10-ch
  );
  --palette-gray-10: var(--red-gray-10);
  --palette-accent-10: var(--red-accent-10);
  --palette-lighter: var(--red-lighter);
  --palette-accent-lighter: var(
    --red-accent-lighter
  );
  --palette-lighter-ch: var(
    --red-lighter-ch
  );
  --palette-light: var(--red-light);
  --palette-accent-light: var(
    --red-accent-light
  );
  --palette-light-ch: var(
    --red-light-ch
  );
  --palette-default: var(--red-default);
  --palette-accent-default: var(
    --red-accent-default
  );
  --palette-default-ch: var(
    --red-default-ch
  );
  --palette-dark: var(--red-dark);
  --palette-accent-dark: var(
    --red-accent-dark
  );
  --palette-dark-ch: var(
    --red-dark-ch
  );
  --palette-darker: var(--red-darker);
  --palette-accent-darker: var(
    --red-accent-darker
  );
  --palette-darker-ch: var(
    --red-darker-ch
  );
}

:root {
  --orange-hue: 30;
  --orange-saturation: 100%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 40%;
  --palette-gray-saturation: 5%;
  --orange-lightness-0: 97%;
  --orange-lightness-1: 93%;
  --orange-lightness-2: 85%;
  --orange-lightness-3: 75%;
  --orange-lightness-4: 65%;
  --orange-lightness-5: 50%;
  --orange-lightness-6: 42%;
  --orange-lightness-7: 34%;
  --orange-lightness-8: 26%;
  --orange-lightness-9: 18%;
  --orange-lightness-10: 10%;
  --orange-color-0: hsl(
    var(--orange-hue),
    var(--orange-saturation),
    var(--orange-lightness-0)
  );
  --orange-color-1: hsl(
    var(--orange-hue),
    var(--orange-saturation),
    var(--orange-lightness-1)
  );
  --orange-color-2: hsl(
    var(--orange-hue),
    var(--orange-saturation),
    var(--orange-lightness-2)
  );
  --orange-color-3: hsl(
    var(--orange-hue),
    var(--orange-saturation),
    var(--orange-lightness-3)
  );
  --orange-color-4: hsl(
    var(--orange-hue),
    var(--orange-saturation),
    var(--orange-lightness-4)
  );
  --orange-color-5: hsl(
    var(--orange-hue),
    var(--orange-saturation),
    var(--orange-lightness-5)
  );
  --orange-color-6: hsl(
    var(--orange-hue),
    var(--orange-saturation),
    var(--orange-lightness-6)
  );
  --orange-color-7: hsl(
    var(--orange-hue),
    var(--orange-saturation),
    var(--orange-lightness-7)
  );
  --orange-color-8: hsl(
    var(--orange-hue),
    var(--orange-saturation),
    var(--orange-lightness-8)
  );
  --orange-color-9: hsl(
    var(--orange-hue),
    var(--orange-saturation),
    var(--orange-lightness-9)
  );
  --orange-color-10: hsl(
    var(--orange-hue),
    var(--orange-saturation),
    var(--orange-lightness-10)
  );
  --orange-color-0-ch:
    var(--orange-hue), var(--orange-saturation),
    var(--orange-lightness-0);
  --orange-color-1-ch:
    var(--orange-hue), var(--orange-saturation),
    var(--orange-lightness-1);
  --orange-color-2-ch:
    var(--orange-hue), var(--orange-saturation),
    var(--orange-lightness-2);
  --orange-color-3-ch:
    var(--orange-hue), var(--orange-saturation),
    var(--orange-lightness-3);
  --orange-color-4-ch:
    var(--orange-hue), var(--orange-saturation),
    var(--orange-lightness-4);
  --orange-color-5-ch:
    var(--orange-hue), var(--orange-saturation),
    var(--orange-lightness-5);
  --orange-color-6-ch:
    var(--orange-hue), var(--orange-saturation),
    var(--orange-lightness-6);
  --orange-color-7-ch:
    var(--orange-hue), var(--orange-saturation),
    var(--orange-lightness-7);
  --orange-color-8-ch:
    var(--orange-hue), var(--orange-saturation),
    var(--orange-lightness-8);
  --orange-color-9-ch:
    var(--orange-hue), var(--orange-saturation),
    var(--orange-lightness-9);
  --orange-color-10-ch:
    var(--orange-hue), var(--orange-saturation),
    var(--orange-lightness-10);
  --orange-gray-0: hsl(
    var(--orange-hue),
    var(--palette-gray-saturation),
    var(--orange-lightness-0)
  );
  --orange-gray-1: hsl(
    var(--orange-hue),
    var(--palette-gray-saturation),
    var(--orange-lightness-1)
  );
  --orange-gray-2: hsl(
    var(--orange-hue),
    var(--palette-gray-saturation),
    var(--orange-lightness-2)
  );
  --orange-gray-3: hsl(
    var(--orange-hue),
    var(--palette-gray-saturation),
    var(--orange-lightness-3)
  );
  --orange-gray-4: hsl(
    var(--orange-hue),
    var(--palette-gray-saturation),
    var(--orange-lightness-4)
  );
  --orange-gray-5: hsl(
    var(--orange-hue),
    var(--palette-gray-saturation),
    var(--orange-lightness-5)
  );
  --orange-gray-6: hsl(
    var(--orange-hue),
    var(--palette-gray-saturation),
    var(--orange-lightness-6)
  );
  --orange-gray-7: hsl(
    var(--orange-hue),
    var(--palette-gray-saturation),
    var(--orange-lightness-7)
  );
  --orange-gray-8: hsl(
    var(--orange-hue),
    var(--palette-gray-saturation),
    var(--orange-lightness-8)
  );
  --orange-gray-9: hsl(
    var(--orange-hue),
    var(--palette-gray-saturation),
    var(--orange-lightness-9)
  );
  --orange-gray-10: hsl(
    var(--orange-hue),
    var(--palette-gray-saturation),
    var(--orange-lightness-10)
  );
  --orange-accent-light-color: hsl(
    var(--orange-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --orange-accent-dark-color: hsl(
    var(--orange-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --orange-accent-0: var(--orange-accent-dark-color);
  --orange-accent-1: var(--orange-accent-dark-color);
  --orange-accent-2: var(--orange-accent-dark-color);
  --orange-accent-3: var(--orange-accent-dark-color);
  --orange-accent-4: var(--orange-accent-dark-color);
  --orange-accent-5: var(--orange-accent-dark-color);
  --orange-accent-6: var(--orange-accent-dark-color);
  --orange-accent-7: var(--orange-accent-light-color);
  --orange-accent-8: var(--orange-accent-light-color);
  --orange-accent-9: var(--orange-accent-light-color);
  --orange-accent-10: var(--orange-accent-light-color);
  --orange-lighter: var(--orange-color-2);
  --orange-accent-lighter: var(--orange-accent-2);
  --orange-lighter-ch:
    var(--orange-hue), var(--orange-saturation),
    var(--orange-lightness-2);
  --orange-light: var(--orange-color-3);
  --orange-accent-light: var(--orange-accent-3);
  --orange-light-ch:
    var(--orange-hue), var(--orange-saturation),
    var(--orange-lightness-3);
  --orange-default: var(--orange-color-5);
  --orange-accent-default: var(--orange-accent-5);
  --orange-default-ch:
    var(--orange-hue), var(--orange-saturation),
    var(--orange-lightness-5);
  --orange-dark: var(--orange-color-7);
  --orange-accent-dark: var(--orange-accent-7);
  --orange-dark-ch:
    var(--orange-hue), var(--orange-saturation),
    var(--orange-lightness-7);
  --orange-darker: var(--orange-color-9);
  --orange-accent-darker: var(--orange-accent-9);
  --orange-darker-ch:
    var(--orange-hue), var(--orange-saturation),
    var(--orange-lightness-9);
}

.orange {
  --palette-hue: var(--orange-hue);
  --palette-saturation: var(--orange-saturation);
  --palette-accent-light-color: var(
    --orange-accent-light-color
  );
  --palette-accent-dark-color: var(
    --orange-accent-dark-color
  );
  --palette-lightness-0: var(
    --orange-lightness-0
  );
  --palette-color-0: var(--orange-color-0);
  --palette-color-0-ch: var(
    --orange-color-0-ch
  );
  --palette-gray-0: var(--orange-gray-0);
  --palette-accent-0: var(--orange-accent-0);
  --palette-lightness-1: var(
    --orange-lightness-1
  );
  --palette-color-1: var(--orange-color-1);
  --palette-color-1-ch: var(
    --orange-color-1-ch
  );
  --palette-gray-1: var(--orange-gray-1);
  --palette-accent-1: var(--orange-accent-1);
  --palette-lightness-2: var(
    --orange-lightness-2
  );
  --palette-color-2: var(--orange-color-2);
  --palette-color-2-ch: var(
    --orange-color-2-ch
  );
  --palette-gray-2: var(--orange-gray-2);
  --palette-accent-2: var(--orange-accent-2);
  --palette-lightness-3: var(
    --orange-lightness-3
  );
  --palette-color-3: var(--orange-color-3);
  --palette-color-3-ch: var(
    --orange-color-3-ch
  );
  --palette-gray-3: var(--orange-gray-3);
  --palette-accent-3: var(--orange-accent-3);
  --palette-lightness-4: var(
    --orange-lightness-4
  );
  --palette-color-4: var(--orange-color-4);
  --palette-color-4-ch: var(
    --orange-color-4-ch
  );
  --palette-gray-4: var(--orange-gray-4);
  --palette-accent-4: var(--orange-accent-4);
  --palette-lightness-5: var(
    --orange-lightness-5
  );
  --palette-color-5: var(--orange-color-5);
  --palette-color-5-ch: var(
    --orange-color-5-ch
  );
  --palette-gray-5: var(--orange-gray-5);
  --palette-accent-5: var(--orange-accent-5);
  --palette-lightness-6: var(
    --orange-lightness-6
  );
  --palette-color-6: var(--orange-color-6);
  --palette-color-6-ch: var(
    --orange-color-6-ch
  );
  --palette-gray-6: var(--orange-gray-6);
  --palette-accent-6: var(--orange-accent-6);
  --palette-lightness-7: var(
    --orange-lightness-7
  );
  --palette-color-7: var(--orange-color-7);
  --palette-color-7-ch: var(
    --orange-color-7-ch
  );
  --palette-gray-7: var(--orange-gray-7);
  --palette-accent-7: var(--orange-accent-7);
  --palette-lightness-8: var(
    --orange-lightness-8
  );
  --palette-color-8: var(--orange-color-8);
  --palette-color-8-ch: var(
    --orange-color-8-ch
  );
  --palette-gray-8: var(--orange-gray-8);
  --palette-accent-8: var(--orange-accent-8);
  --palette-lightness-9: var(
    --orange-lightness-9
  );
  --palette-color-9: var(--orange-color-9);
  --palette-color-9-ch: var(
    --orange-color-9-ch
  );
  --palette-gray-9: var(--orange-gray-9);
  --palette-accent-9: var(--orange-accent-9);
  --palette-lightness-10: var(
    --orange-lightness-10
  );
  --palette-color-10: var(--orange-color-10);
  --palette-color-10-ch: var(
    --orange-color-10-ch
  );
  --palette-gray-10: var(--orange-gray-10);
  --palette-accent-10: var(--orange-accent-10);
  --palette-lighter: var(--orange-lighter);
  --palette-accent-lighter: var(
    --orange-accent-lighter
  );
  --palette-lighter-ch: var(
    --orange-lighter-ch
  );
  --palette-light: var(--orange-light);
  --palette-accent-light: var(
    --orange-accent-light
  );
  --palette-light-ch: var(
    --orange-light-ch
  );
  --palette-default: var(--orange-default);
  --palette-accent-default: var(
    --orange-accent-default
  );
  --palette-default-ch: var(
    --orange-default-ch
  );
  --palette-dark: var(--orange-dark);
  --palette-accent-dark: var(
    --orange-accent-dark
  );
  --palette-dark-ch: var(
    --orange-dark-ch
  );
  --palette-darker: var(--orange-darker);
  --palette-accent-darker: var(
    --orange-accent-darker
  );
  --palette-darker-ch: var(
    --orange-darker-ch
  );
}

:root {
  --yellow-hue: 50;
  --yellow-saturation: 100%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 30%;
  --palette-gray-saturation: 5%;
  --yellow-lightness-0: 97%;
  --yellow-lightness-1: 93%;
  --yellow-lightness-2: 85%;
  --yellow-lightness-3: 75%;
  --yellow-lightness-4: 65%;
  --yellow-lightness-5: 50%;
  --yellow-lightness-6: 42%;
  --yellow-lightness-7: 34%;
  --yellow-lightness-8: 26%;
  --yellow-lightness-9: 18%;
  --yellow-lightness-10: 10%;
  --yellow-color-0: hsl(
    var(--yellow-hue),
    var(--yellow-saturation),
    var(--yellow-lightness-0)
  );
  --yellow-color-1: hsl(
    var(--yellow-hue),
    var(--yellow-saturation),
    var(--yellow-lightness-1)
  );
  --yellow-color-2: hsl(
    var(--yellow-hue),
    var(--yellow-saturation),
    var(--yellow-lightness-2)
  );
  --yellow-color-3: hsl(
    var(--yellow-hue),
    var(--yellow-saturation),
    var(--yellow-lightness-3)
  );
  --yellow-color-4: hsl(
    var(--yellow-hue),
    var(--yellow-saturation),
    var(--yellow-lightness-4)
  );
  --yellow-color-5: hsl(
    var(--yellow-hue),
    var(--yellow-saturation),
    var(--yellow-lightness-5)
  );
  --yellow-color-6: hsl(
    var(--yellow-hue),
    var(--yellow-saturation),
    var(--yellow-lightness-6)
  );
  --yellow-color-7: hsl(
    var(--yellow-hue),
    var(--yellow-saturation),
    var(--yellow-lightness-7)
  );
  --yellow-color-8: hsl(
    var(--yellow-hue),
    var(--yellow-saturation),
    var(--yellow-lightness-8)
  );
  --yellow-color-9: hsl(
    var(--yellow-hue),
    var(--yellow-saturation),
    var(--yellow-lightness-9)
  );
  --yellow-color-10: hsl(
    var(--yellow-hue),
    var(--yellow-saturation),
    var(--yellow-lightness-10)
  );
  --yellow-color-0-ch:
    var(--yellow-hue), var(--yellow-saturation),
    var(--yellow-lightness-0);
  --yellow-color-1-ch:
    var(--yellow-hue), var(--yellow-saturation),
    var(--yellow-lightness-1);
  --yellow-color-2-ch:
    var(--yellow-hue), var(--yellow-saturation),
    var(--yellow-lightness-2);
  --yellow-color-3-ch:
    var(--yellow-hue), var(--yellow-saturation),
    var(--yellow-lightness-3);
  --yellow-color-4-ch:
    var(--yellow-hue), var(--yellow-saturation),
    var(--yellow-lightness-4);
  --yellow-color-5-ch:
    var(--yellow-hue), var(--yellow-saturation),
    var(--yellow-lightness-5);
  --yellow-color-6-ch:
    var(--yellow-hue), var(--yellow-saturation),
    var(--yellow-lightness-6);
  --yellow-color-7-ch:
    var(--yellow-hue), var(--yellow-saturation),
    var(--yellow-lightness-7);
  --yellow-color-8-ch:
    var(--yellow-hue), var(--yellow-saturation),
    var(--yellow-lightness-8);
  --yellow-color-9-ch:
    var(--yellow-hue), var(--yellow-saturation),
    var(--yellow-lightness-9);
  --yellow-color-10-ch:
    var(--yellow-hue), var(--yellow-saturation),
    var(--yellow-lightness-10);
  --yellow-gray-0: hsl(
    var(--yellow-hue),
    var(--palette-gray-saturation),
    var(--yellow-lightness-0)
  );
  --yellow-gray-1: hsl(
    var(--yellow-hue),
    var(--palette-gray-saturation),
    var(--yellow-lightness-1)
  );
  --yellow-gray-2: hsl(
    var(--yellow-hue),
    var(--palette-gray-saturation),
    var(--yellow-lightness-2)
  );
  --yellow-gray-3: hsl(
    var(--yellow-hue),
    var(--palette-gray-saturation),
    var(--yellow-lightness-3)
  );
  --yellow-gray-4: hsl(
    var(--yellow-hue),
    var(--palette-gray-saturation),
    var(--yellow-lightness-4)
  );
  --yellow-gray-5: hsl(
    var(--yellow-hue),
    var(--palette-gray-saturation),
    var(--yellow-lightness-5)
  );
  --yellow-gray-6: hsl(
    var(--yellow-hue),
    var(--palette-gray-saturation),
    var(--yellow-lightness-6)
  );
  --yellow-gray-7: hsl(
    var(--yellow-hue),
    var(--palette-gray-saturation),
    var(--yellow-lightness-7)
  );
  --yellow-gray-8: hsl(
    var(--yellow-hue),
    var(--palette-gray-saturation),
    var(--yellow-lightness-8)
  );
  --yellow-gray-9: hsl(
    var(--yellow-hue),
    var(--palette-gray-saturation),
    var(--yellow-lightness-9)
  );
  --yellow-gray-10: hsl(
    var(--yellow-hue),
    var(--palette-gray-saturation),
    var(--yellow-lightness-10)
  );
  --yellow-accent-light-color: hsl(
    var(--yellow-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --yellow-accent-dark-color: hsl(
    var(--yellow-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --yellow-accent-0: var(--yellow-accent-dark-color);
  --yellow-accent-1: var(--yellow-accent-dark-color);
  --yellow-accent-2: var(--yellow-accent-dark-color);
  --yellow-accent-3: var(--yellow-accent-dark-color);
  --yellow-accent-4: var(--yellow-accent-dark-color);
  --yellow-accent-5: var(--yellow-accent-dark-color);
  --yellow-accent-6: var(--yellow-accent-dark-color);
  --yellow-accent-7: var(--yellow-accent-dark-color);
  --yellow-accent-8: var(--yellow-accent-light-color);
  --yellow-accent-9: var(--yellow-accent-light-color);
  --yellow-accent-10: var(--yellow-accent-light-color);
  --yellow-lighter: var(--yellow-color-2);
  --yellow-accent-lighter: var(--yellow-accent-2);
  --yellow-lighter-ch:
    var(--yellow-hue), var(--yellow-saturation),
    var(--yellow-lightness-2);
  --yellow-light: var(--yellow-color-3);
  --yellow-accent-light: var(--yellow-accent-3);
  --yellow-light-ch:
    var(--yellow-hue), var(--yellow-saturation),
    var(--yellow-lightness-3);
  --yellow-default: var(--yellow-color-5);
  --yellow-accent-default: var(--yellow-accent-5);
  --yellow-default-ch:
    var(--yellow-hue), var(--yellow-saturation),
    var(--yellow-lightness-5);
  --yellow-dark: var(--yellow-color-7);
  --yellow-accent-dark: var(--yellow-accent-7);
  --yellow-dark-ch:
    var(--yellow-hue), var(--yellow-saturation),
    var(--yellow-lightness-7);
  --yellow-darker: var(--yellow-color-9);
  --yellow-accent-darker: var(--yellow-accent-9);
  --yellow-darker-ch:
    var(--yellow-hue), var(--yellow-saturation),
    var(--yellow-lightness-9);
}

.yellow {
  --palette-hue: var(--yellow-hue);
  --palette-saturation: var(--yellow-saturation);
  --palette-accent-light-color: var(
    --yellow-accent-light-color
  );
  --palette-accent-dark-color: var(
    --yellow-accent-dark-color
  );
  --palette-lightness-0: var(
    --yellow-lightness-0
  );
  --palette-color-0: var(--yellow-color-0);
  --palette-color-0-ch: var(
    --yellow-color-0-ch
  );
  --palette-gray-0: var(--yellow-gray-0);
  --palette-accent-0: var(--yellow-accent-0);
  --palette-lightness-1: var(
    --yellow-lightness-1
  );
  --palette-color-1: var(--yellow-color-1);
  --palette-color-1-ch: var(
    --yellow-color-1-ch
  );
  --palette-gray-1: var(--yellow-gray-1);
  --palette-accent-1: var(--yellow-accent-1);
  --palette-lightness-2: var(
    --yellow-lightness-2
  );
  --palette-color-2: var(--yellow-color-2);
  --palette-color-2-ch: var(
    --yellow-color-2-ch
  );
  --palette-gray-2: var(--yellow-gray-2);
  --palette-accent-2: var(--yellow-accent-2);
  --palette-lightness-3: var(
    --yellow-lightness-3
  );
  --palette-color-3: var(--yellow-color-3);
  --palette-color-3-ch: var(
    --yellow-color-3-ch
  );
  --palette-gray-3: var(--yellow-gray-3);
  --palette-accent-3: var(--yellow-accent-3);
  --palette-lightness-4: var(
    --yellow-lightness-4
  );
  --palette-color-4: var(--yellow-color-4);
  --palette-color-4-ch: var(
    --yellow-color-4-ch
  );
  --palette-gray-4: var(--yellow-gray-4);
  --palette-accent-4: var(--yellow-accent-4);
  --palette-lightness-5: var(
    --yellow-lightness-5
  );
  --palette-color-5: var(--yellow-color-5);
  --palette-color-5-ch: var(
    --yellow-color-5-ch
  );
  --palette-gray-5: var(--yellow-gray-5);
  --palette-accent-5: var(--yellow-accent-5);
  --palette-lightness-6: var(
    --yellow-lightness-6
  );
  --palette-color-6: var(--yellow-color-6);
  --palette-color-6-ch: var(
    --yellow-color-6-ch
  );
  --palette-gray-6: var(--yellow-gray-6);
  --palette-accent-6: var(--yellow-accent-6);
  --palette-lightness-7: var(
    --yellow-lightness-7
  );
  --palette-color-7: var(--yellow-color-7);
  --palette-color-7-ch: var(
    --yellow-color-7-ch
  );
  --palette-gray-7: var(--yellow-gray-7);
  --palette-accent-7: var(--yellow-accent-7);
  --palette-lightness-8: var(
    --yellow-lightness-8
  );
  --palette-color-8: var(--yellow-color-8);
  --palette-color-8-ch: var(
    --yellow-color-8-ch
  );
  --palette-gray-8: var(--yellow-gray-8);
  --palette-accent-8: var(--yellow-accent-8);
  --palette-lightness-9: var(
    --yellow-lightness-9
  );
  --palette-color-9: var(--yellow-color-9);
  --palette-color-9-ch: var(
    --yellow-color-9-ch
  );
  --palette-gray-9: var(--yellow-gray-9);
  --palette-accent-9: var(--yellow-accent-9);
  --palette-lightness-10: var(
    --yellow-lightness-10
  );
  --palette-color-10: var(--yellow-color-10);
  --palette-color-10-ch: var(
    --yellow-color-10-ch
  );
  --palette-gray-10: var(--yellow-gray-10);
  --palette-accent-10: var(--yellow-accent-10);
  --palette-lighter: var(--yellow-lighter);
  --palette-accent-lighter: var(
    --yellow-accent-lighter
  );
  --palette-lighter-ch: var(
    --yellow-lighter-ch
  );
  --palette-light: var(--yellow-light);
  --palette-accent-light: var(
    --yellow-accent-light
  );
  --palette-light-ch: var(
    --yellow-light-ch
  );
  --palette-default: var(--yellow-default);
  --palette-accent-default: var(
    --yellow-accent-default
  );
  --palette-default-ch: var(
    --yellow-default-ch
  );
  --palette-dark: var(--yellow-dark);
  --palette-accent-dark: var(
    --yellow-accent-dark
  );
  --palette-dark-ch: var(
    --yellow-dark-ch
  );
  --palette-darker: var(--yellow-darker);
  --palette-accent-darker: var(
    --yellow-accent-darker
  );
  --palette-darker-ch: var(
    --yellow-darker-ch
  );
}

:root {
  --lime-hue: 90;
  --lime-saturation: 100%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 30%;
  --palette-gray-saturation: 5%;
  --lime-lightness-0: 97%;
  --lime-lightness-1: 93%;
  --lime-lightness-2: 85%;
  --lime-lightness-3: 75%;
  --lime-lightness-4: 65%;
  --lime-lightness-5: 50%;
  --lime-lightness-6: 42%;
  --lime-lightness-7: 34%;
  --lime-lightness-8: 26%;
  --lime-lightness-9: 18%;
  --lime-lightness-10: 10%;
  --lime-color-0: hsl(
    var(--lime-hue),
    var(--lime-saturation),
    var(--lime-lightness-0)
  );
  --lime-color-1: hsl(
    var(--lime-hue),
    var(--lime-saturation),
    var(--lime-lightness-1)
  );
  --lime-color-2: hsl(
    var(--lime-hue),
    var(--lime-saturation),
    var(--lime-lightness-2)
  );
  --lime-color-3: hsl(
    var(--lime-hue),
    var(--lime-saturation),
    var(--lime-lightness-3)
  );
  --lime-color-4: hsl(
    var(--lime-hue),
    var(--lime-saturation),
    var(--lime-lightness-4)
  );
  --lime-color-5: hsl(
    var(--lime-hue),
    var(--lime-saturation),
    var(--lime-lightness-5)
  );
  --lime-color-6: hsl(
    var(--lime-hue),
    var(--lime-saturation),
    var(--lime-lightness-6)
  );
  --lime-color-7: hsl(
    var(--lime-hue),
    var(--lime-saturation),
    var(--lime-lightness-7)
  );
  --lime-color-8: hsl(
    var(--lime-hue),
    var(--lime-saturation),
    var(--lime-lightness-8)
  );
  --lime-color-9: hsl(
    var(--lime-hue),
    var(--lime-saturation),
    var(--lime-lightness-9)
  );
  --lime-color-10: hsl(
    var(--lime-hue),
    var(--lime-saturation),
    var(--lime-lightness-10)
  );
  --lime-color-0-ch:
    var(--lime-hue), var(--lime-saturation),
    var(--lime-lightness-0);
  --lime-color-1-ch:
    var(--lime-hue), var(--lime-saturation),
    var(--lime-lightness-1);
  --lime-color-2-ch:
    var(--lime-hue), var(--lime-saturation),
    var(--lime-lightness-2);
  --lime-color-3-ch:
    var(--lime-hue), var(--lime-saturation),
    var(--lime-lightness-3);
  --lime-color-4-ch:
    var(--lime-hue), var(--lime-saturation),
    var(--lime-lightness-4);
  --lime-color-5-ch:
    var(--lime-hue), var(--lime-saturation),
    var(--lime-lightness-5);
  --lime-color-6-ch:
    var(--lime-hue), var(--lime-saturation),
    var(--lime-lightness-6);
  --lime-color-7-ch:
    var(--lime-hue), var(--lime-saturation),
    var(--lime-lightness-7);
  --lime-color-8-ch:
    var(--lime-hue), var(--lime-saturation),
    var(--lime-lightness-8);
  --lime-color-9-ch:
    var(--lime-hue), var(--lime-saturation),
    var(--lime-lightness-9);
  --lime-color-10-ch:
    var(--lime-hue), var(--lime-saturation),
    var(--lime-lightness-10);
  --lime-gray-0: hsl(
    var(--lime-hue),
    var(--palette-gray-saturation),
    var(--lime-lightness-0)
  );
  --lime-gray-1: hsl(
    var(--lime-hue),
    var(--palette-gray-saturation),
    var(--lime-lightness-1)
  );
  --lime-gray-2: hsl(
    var(--lime-hue),
    var(--palette-gray-saturation),
    var(--lime-lightness-2)
  );
  --lime-gray-3: hsl(
    var(--lime-hue),
    var(--palette-gray-saturation),
    var(--lime-lightness-3)
  );
  --lime-gray-4: hsl(
    var(--lime-hue),
    var(--palette-gray-saturation),
    var(--lime-lightness-4)
  );
  --lime-gray-5: hsl(
    var(--lime-hue),
    var(--palette-gray-saturation),
    var(--lime-lightness-5)
  );
  --lime-gray-6: hsl(
    var(--lime-hue),
    var(--palette-gray-saturation),
    var(--lime-lightness-6)
  );
  --lime-gray-7: hsl(
    var(--lime-hue),
    var(--palette-gray-saturation),
    var(--lime-lightness-7)
  );
  --lime-gray-8: hsl(
    var(--lime-hue),
    var(--palette-gray-saturation),
    var(--lime-lightness-8)
  );
  --lime-gray-9: hsl(
    var(--lime-hue),
    var(--palette-gray-saturation),
    var(--lime-lightness-9)
  );
  --lime-gray-10: hsl(
    var(--lime-hue),
    var(--palette-gray-saturation),
    var(--lime-lightness-10)
  );
  --lime-accent-light-color: hsl(
    var(--lime-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --lime-accent-dark-color: hsl(
    var(--lime-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --lime-accent-0: var(--lime-accent-dark-color);
  --lime-accent-1: var(--lime-accent-dark-color);
  --lime-accent-2: var(--lime-accent-dark-color);
  --lime-accent-3: var(--lime-accent-dark-color);
  --lime-accent-4: var(--lime-accent-dark-color);
  --lime-accent-5: var(--lime-accent-dark-color);
  --lime-accent-6: var(--lime-accent-dark-color);
  --lime-accent-7: var(--lime-accent-dark-color);
  --lime-accent-8: var(--lime-accent-light-color);
  --lime-accent-9: var(--lime-accent-light-color);
  --lime-accent-10: var(--lime-accent-light-color);
  --lime-lighter: var(--lime-color-2);
  --lime-accent-lighter: var(--lime-accent-2);
  --lime-lighter-ch:
    var(--lime-hue), var(--lime-saturation),
    var(--lime-lightness-2);
  --lime-light: var(--lime-color-3);
  --lime-accent-light: var(--lime-accent-3);
  --lime-light-ch:
    var(--lime-hue), var(--lime-saturation),
    var(--lime-lightness-3);
  --lime-default: var(--lime-color-5);
  --lime-accent-default: var(--lime-accent-5);
  --lime-default-ch:
    var(--lime-hue), var(--lime-saturation),
    var(--lime-lightness-5);
  --lime-dark: var(--lime-color-7);
  --lime-accent-dark: var(--lime-accent-7);
  --lime-dark-ch:
    var(--lime-hue), var(--lime-saturation),
    var(--lime-lightness-7);
  --lime-darker: var(--lime-color-9);
  --lime-accent-darker: var(--lime-accent-9);
  --lime-darker-ch:
    var(--lime-hue), var(--lime-saturation),
    var(--lime-lightness-9);
}

.lime {
  --palette-hue: var(--lime-hue);
  --palette-saturation: var(--lime-saturation);
  --palette-accent-light-color: var(
    --lime-accent-light-color
  );
  --palette-accent-dark-color: var(
    --lime-accent-dark-color
  );
  --palette-lightness-0: var(
    --lime-lightness-0
  );
  --palette-color-0: var(--lime-color-0);
  --palette-color-0-ch: var(
    --lime-color-0-ch
  );
  --palette-gray-0: var(--lime-gray-0);
  --palette-accent-0: var(--lime-accent-0);
  --palette-lightness-1: var(
    --lime-lightness-1
  );
  --palette-color-1: var(--lime-color-1);
  --palette-color-1-ch: var(
    --lime-color-1-ch
  );
  --palette-gray-1: var(--lime-gray-1);
  --palette-accent-1: var(--lime-accent-1);
  --palette-lightness-2: var(
    --lime-lightness-2
  );
  --palette-color-2: var(--lime-color-2);
  --palette-color-2-ch: var(
    --lime-color-2-ch
  );
  --palette-gray-2: var(--lime-gray-2);
  --palette-accent-2: var(--lime-accent-2);
  --palette-lightness-3: var(
    --lime-lightness-3
  );
  --palette-color-3: var(--lime-color-3);
  --palette-color-3-ch: var(
    --lime-color-3-ch
  );
  --palette-gray-3: var(--lime-gray-3);
  --palette-accent-3: var(--lime-accent-3);
  --palette-lightness-4: var(
    --lime-lightness-4
  );
  --palette-color-4: var(--lime-color-4);
  --palette-color-4-ch: var(
    --lime-color-4-ch
  );
  --palette-gray-4: var(--lime-gray-4);
  --palette-accent-4: var(--lime-accent-4);
  --palette-lightness-5: var(
    --lime-lightness-5
  );
  --palette-color-5: var(--lime-color-5);
  --palette-color-5-ch: var(
    --lime-color-5-ch
  );
  --palette-gray-5: var(--lime-gray-5);
  --palette-accent-5: var(--lime-accent-5);
  --palette-lightness-6: var(
    --lime-lightness-6
  );
  --palette-color-6: var(--lime-color-6);
  --palette-color-6-ch: var(
    --lime-color-6-ch
  );
  --palette-gray-6: var(--lime-gray-6);
  --palette-accent-6: var(--lime-accent-6);
  --palette-lightness-7: var(
    --lime-lightness-7
  );
  --palette-color-7: var(--lime-color-7);
  --palette-color-7-ch: var(
    --lime-color-7-ch
  );
  --palette-gray-7: var(--lime-gray-7);
  --palette-accent-7: var(--lime-accent-7);
  --palette-lightness-8: var(
    --lime-lightness-8
  );
  --palette-color-8: var(--lime-color-8);
  --palette-color-8-ch: var(
    --lime-color-8-ch
  );
  --palette-gray-8: var(--lime-gray-8);
  --palette-accent-8: var(--lime-accent-8);
  --palette-lightness-9: var(
    --lime-lightness-9
  );
  --palette-color-9: var(--lime-color-9);
  --palette-color-9-ch: var(
    --lime-color-9-ch
  );
  --palette-gray-9: var(--lime-gray-9);
  --palette-accent-9: var(--lime-accent-9);
  --palette-lightness-10: var(
    --lime-lightness-10
  );
  --palette-color-10: var(--lime-color-10);
  --palette-color-10-ch: var(
    --lime-color-10-ch
  );
  --palette-gray-10: var(--lime-gray-10);
  --palette-accent-10: var(--lime-accent-10);
  --palette-lighter: var(--lime-lighter);
  --palette-accent-lighter: var(
    --lime-accent-lighter
  );
  --palette-lighter-ch: var(
    --lime-lighter-ch
  );
  --palette-light: var(--lime-light);
  --palette-accent-light: var(
    --lime-accent-light
  );
  --palette-light-ch: var(
    --lime-light-ch
  );
  --palette-default: var(--lime-default);
  --palette-accent-default: var(
    --lime-accent-default
  );
  --palette-default-ch: var(
    --lime-default-ch
  );
  --palette-dark: var(--lime-dark);
  --palette-accent-dark: var(
    --lime-accent-dark
  );
  --palette-dark-ch: var(
    --lime-dark-ch
  );
  --palette-darker: var(--lime-darker);
  --palette-accent-darker: var(
    --lime-accent-darker
  );
  --palette-darker-ch: var(
    --lime-darker-ch
  );
}

:root {
  --green-hue: 125;
  --green-saturation: 100%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 30%;
  --palette-gray-saturation: 5%;
  --green-lightness-0: 97%;
  --green-lightness-1: 93%;
  --green-lightness-2: 85%;
  --green-lightness-3: 75%;
  --green-lightness-4: 65%;
  --green-lightness-5: 50%;
  --green-lightness-6: 42%;
  --green-lightness-7: 34%;
  --green-lightness-8: 26%;
  --green-lightness-9: 18%;
  --green-lightness-10: 10%;
  --green-color-0: hsl(
    var(--green-hue),
    var(--green-saturation),
    var(--green-lightness-0)
  );
  --green-color-1: hsl(
    var(--green-hue),
    var(--green-saturation),
    var(--green-lightness-1)
  );
  --green-color-2: hsl(
    var(--green-hue),
    var(--green-saturation),
    var(--green-lightness-2)
  );
  --green-color-3: hsl(
    var(--green-hue),
    var(--green-saturation),
    var(--green-lightness-3)
  );
  --green-color-4: hsl(
    var(--green-hue),
    var(--green-saturation),
    var(--green-lightness-4)
  );
  --green-color-5: hsl(
    var(--green-hue),
    var(--green-saturation),
    var(--green-lightness-5)
  );
  --green-color-6: hsl(
    var(--green-hue),
    var(--green-saturation),
    var(--green-lightness-6)
  );
  --green-color-7: hsl(
    var(--green-hue),
    var(--green-saturation),
    var(--green-lightness-7)
  );
  --green-color-8: hsl(
    var(--green-hue),
    var(--green-saturation),
    var(--green-lightness-8)
  );
  --green-color-9: hsl(
    var(--green-hue),
    var(--green-saturation),
    var(--green-lightness-9)
  );
  --green-color-10: hsl(
    var(--green-hue),
    var(--green-saturation),
    var(--green-lightness-10)
  );
  --green-color-0-ch:
    var(--green-hue), var(--green-saturation),
    var(--green-lightness-0);
  --green-color-1-ch:
    var(--green-hue), var(--green-saturation),
    var(--green-lightness-1);
  --green-color-2-ch:
    var(--green-hue), var(--green-saturation),
    var(--green-lightness-2);
  --green-color-3-ch:
    var(--green-hue), var(--green-saturation),
    var(--green-lightness-3);
  --green-color-4-ch:
    var(--green-hue), var(--green-saturation),
    var(--green-lightness-4);
  --green-color-5-ch:
    var(--green-hue), var(--green-saturation),
    var(--green-lightness-5);
  --green-color-6-ch:
    var(--green-hue), var(--green-saturation),
    var(--green-lightness-6);
  --green-color-7-ch:
    var(--green-hue), var(--green-saturation),
    var(--green-lightness-7);
  --green-color-8-ch:
    var(--green-hue), var(--green-saturation),
    var(--green-lightness-8);
  --green-color-9-ch:
    var(--green-hue), var(--green-saturation),
    var(--green-lightness-9);
  --green-color-10-ch:
    var(--green-hue), var(--green-saturation),
    var(--green-lightness-10);
  --green-gray-0: hsl(
    var(--green-hue),
    var(--palette-gray-saturation),
    var(--green-lightness-0)
  );
  --green-gray-1: hsl(
    var(--green-hue),
    var(--palette-gray-saturation),
    var(--green-lightness-1)
  );
  --green-gray-2: hsl(
    var(--green-hue),
    var(--palette-gray-saturation),
    var(--green-lightness-2)
  );
  --green-gray-3: hsl(
    var(--green-hue),
    var(--palette-gray-saturation),
    var(--green-lightness-3)
  );
  --green-gray-4: hsl(
    var(--green-hue),
    var(--palette-gray-saturation),
    var(--green-lightness-4)
  );
  --green-gray-5: hsl(
    var(--green-hue),
    var(--palette-gray-saturation),
    var(--green-lightness-5)
  );
  --green-gray-6: hsl(
    var(--green-hue),
    var(--palette-gray-saturation),
    var(--green-lightness-6)
  );
  --green-gray-7: hsl(
    var(--green-hue),
    var(--palette-gray-saturation),
    var(--green-lightness-7)
  );
  --green-gray-8: hsl(
    var(--green-hue),
    var(--palette-gray-saturation),
    var(--green-lightness-8)
  );
  --green-gray-9: hsl(
    var(--green-hue),
    var(--palette-gray-saturation),
    var(--green-lightness-9)
  );
  --green-gray-10: hsl(
    var(--green-hue),
    var(--palette-gray-saturation),
    var(--green-lightness-10)
  );
  --green-accent-light-color: hsl(
    var(--green-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --green-accent-dark-color: hsl(
    var(--green-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --green-accent-0: var(--green-accent-dark-color);
  --green-accent-1: var(--green-accent-dark-color);
  --green-accent-2: var(--green-accent-dark-color);
  --green-accent-3: var(--green-accent-dark-color);
  --green-accent-4: var(--green-accent-dark-color);
  --green-accent-5: var(--green-accent-dark-color);
  --green-accent-6: var(--green-accent-dark-color);
  --green-accent-7: var(--green-accent-dark-color);
  --green-accent-8: var(--green-accent-light-color);
  --green-accent-9: var(--green-accent-light-color);
  --green-accent-10: var(--green-accent-light-color);
  --green-lighter: var(--green-color-2);
  --green-accent-lighter: var(--green-accent-2);
  --green-lighter-ch:
    var(--green-hue), var(--green-saturation),
    var(--green-lightness-2);
  --green-light: var(--green-color-3);
  --green-accent-light: var(--green-accent-3);
  --green-light-ch:
    var(--green-hue), var(--green-saturation),
    var(--green-lightness-3);
  --green-default: var(--green-color-5);
  --green-accent-default: var(--green-accent-5);
  --green-default-ch:
    var(--green-hue), var(--green-saturation),
    var(--green-lightness-5);
  --green-dark: var(--green-color-7);
  --green-accent-dark: var(--green-accent-7);
  --green-dark-ch:
    var(--green-hue), var(--green-saturation),
    var(--green-lightness-7);
  --green-darker: var(--green-color-9);
  --green-accent-darker: var(--green-accent-9);
  --green-darker-ch:
    var(--green-hue), var(--green-saturation),
    var(--green-lightness-9);
}

.green {
  --palette-hue: var(--green-hue);
  --palette-saturation: var(--green-saturation);
  --palette-accent-light-color: var(
    --green-accent-light-color
  );
  --palette-accent-dark-color: var(
    --green-accent-dark-color
  );
  --palette-lightness-0: var(
    --green-lightness-0
  );
  --palette-color-0: var(--green-color-0);
  --palette-color-0-ch: var(
    --green-color-0-ch
  );
  --palette-gray-0: var(--green-gray-0);
  --palette-accent-0: var(--green-accent-0);
  --palette-lightness-1: var(
    --green-lightness-1
  );
  --palette-color-1: var(--green-color-1);
  --palette-color-1-ch: var(
    --green-color-1-ch
  );
  --palette-gray-1: var(--green-gray-1);
  --palette-accent-1: var(--green-accent-1);
  --palette-lightness-2: var(
    --green-lightness-2
  );
  --palette-color-2: var(--green-color-2);
  --palette-color-2-ch: var(
    --green-color-2-ch
  );
  --palette-gray-2: var(--green-gray-2);
  --palette-accent-2: var(--green-accent-2);
  --palette-lightness-3: var(
    --green-lightness-3
  );
  --palette-color-3: var(--green-color-3);
  --palette-color-3-ch: var(
    --green-color-3-ch
  );
  --palette-gray-3: var(--green-gray-3);
  --palette-accent-3: var(--green-accent-3);
  --palette-lightness-4: var(
    --green-lightness-4
  );
  --palette-color-4: var(--green-color-4);
  --palette-color-4-ch: var(
    --green-color-4-ch
  );
  --palette-gray-4: var(--green-gray-4);
  --palette-accent-4: var(--green-accent-4);
  --palette-lightness-5: var(
    --green-lightness-5
  );
  --palette-color-5: var(--green-color-5);
  --palette-color-5-ch: var(
    --green-color-5-ch
  );
  --palette-gray-5: var(--green-gray-5);
  --palette-accent-5: var(--green-accent-5);
  --palette-lightness-6: var(
    --green-lightness-6
  );
  --palette-color-6: var(--green-color-6);
  --palette-color-6-ch: var(
    --green-color-6-ch
  );
  --palette-gray-6: var(--green-gray-6);
  --palette-accent-6: var(--green-accent-6);
  --palette-lightness-7: var(
    --green-lightness-7
  );
  --palette-color-7: var(--green-color-7);
  --palette-color-7-ch: var(
    --green-color-7-ch
  );
  --palette-gray-7: var(--green-gray-7);
  --palette-accent-7: var(--green-accent-7);
  --palette-lightness-8: var(
    --green-lightness-8
  );
  --palette-color-8: var(--green-color-8);
  --palette-color-8-ch: var(
    --green-color-8-ch
  );
  --palette-gray-8: var(--green-gray-8);
  --palette-accent-8: var(--green-accent-8);
  --palette-lightness-9: var(
    --green-lightness-9
  );
  --palette-color-9: var(--green-color-9);
  --palette-color-9-ch: var(
    --green-color-9-ch
  );
  --palette-gray-9: var(--green-gray-9);
  --palette-accent-9: var(--green-accent-9);
  --palette-lightness-10: var(
    --green-lightness-10
  );
  --palette-color-10: var(--green-color-10);
  --palette-color-10-ch: var(
    --green-color-10-ch
  );
  --palette-gray-10: var(--green-gray-10);
  --palette-accent-10: var(--green-accent-10);
  --palette-lighter: var(--green-lighter);
  --palette-accent-lighter: var(
    --green-accent-lighter
  );
  --palette-lighter-ch: var(
    --green-lighter-ch
  );
  --palette-light: var(--green-light);
  --palette-accent-light: var(
    --green-accent-light
  );
  --palette-light-ch: var(
    --green-light-ch
  );
  --palette-default: var(--green-default);
  --palette-accent-default: var(
    --green-accent-default
  );
  --palette-default-ch: var(
    --green-default-ch
  );
  --palette-dark: var(--green-dark);
  --palette-accent-dark: var(
    --green-accent-dark
  );
  --palette-dark-ch: var(
    --green-dark-ch
  );
  --palette-darker: var(--green-darker);
  --palette-accent-darker: var(
    --green-accent-darker
  );
  --palette-darker-ch: var(
    --green-darker-ch
  );
}

:root {
  --teal-hue: 170;
  --teal-saturation: 100%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 40%;
  --palette-gray-saturation: 5%;
  --teal-lightness-0: 97%;
  --teal-lightness-1: 93%;
  --teal-lightness-2: 85%;
  --teal-lightness-3: 75%;
  --teal-lightness-4: 65%;
  --teal-lightness-5: 50%;
  --teal-lightness-6: 42%;
  --teal-lightness-7: 34%;
  --teal-lightness-8: 26%;
  --teal-lightness-9: 18%;
  --teal-lightness-10: 10%;
  --teal-color-0: hsl(
    var(--teal-hue),
    var(--teal-saturation),
    var(--teal-lightness-0)
  );
  --teal-color-1: hsl(
    var(--teal-hue),
    var(--teal-saturation),
    var(--teal-lightness-1)
  );
  --teal-color-2: hsl(
    var(--teal-hue),
    var(--teal-saturation),
    var(--teal-lightness-2)
  );
  --teal-color-3: hsl(
    var(--teal-hue),
    var(--teal-saturation),
    var(--teal-lightness-3)
  );
  --teal-color-4: hsl(
    var(--teal-hue),
    var(--teal-saturation),
    var(--teal-lightness-4)
  );
  --teal-color-5: hsl(
    var(--teal-hue),
    var(--teal-saturation),
    var(--teal-lightness-5)
  );
  --teal-color-6: hsl(
    var(--teal-hue),
    var(--teal-saturation),
    var(--teal-lightness-6)
  );
  --teal-color-7: hsl(
    var(--teal-hue),
    var(--teal-saturation),
    var(--teal-lightness-7)
  );
  --teal-color-8: hsl(
    var(--teal-hue),
    var(--teal-saturation),
    var(--teal-lightness-8)
  );
  --teal-color-9: hsl(
    var(--teal-hue),
    var(--teal-saturation),
    var(--teal-lightness-9)
  );
  --teal-color-10: hsl(
    var(--teal-hue),
    var(--teal-saturation),
    var(--teal-lightness-10)
  );
  --teal-color-0-ch:
    var(--teal-hue), var(--teal-saturation),
    var(--teal-lightness-0);
  --teal-color-1-ch:
    var(--teal-hue), var(--teal-saturation),
    var(--teal-lightness-1);
  --teal-color-2-ch:
    var(--teal-hue), var(--teal-saturation),
    var(--teal-lightness-2);
  --teal-color-3-ch:
    var(--teal-hue), var(--teal-saturation),
    var(--teal-lightness-3);
  --teal-color-4-ch:
    var(--teal-hue), var(--teal-saturation),
    var(--teal-lightness-4);
  --teal-color-5-ch:
    var(--teal-hue), var(--teal-saturation),
    var(--teal-lightness-5);
  --teal-color-6-ch:
    var(--teal-hue), var(--teal-saturation),
    var(--teal-lightness-6);
  --teal-color-7-ch:
    var(--teal-hue), var(--teal-saturation),
    var(--teal-lightness-7);
  --teal-color-8-ch:
    var(--teal-hue), var(--teal-saturation),
    var(--teal-lightness-8);
  --teal-color-9-ch:
    var(--teal-hue), var(--teal-saturation),
    var(--teal-lightness-9);
  --teal-color-10-ch:
    var(--teal-hue), var(--teal-saturation),
    var(--teal-lightness-10);
  --teal-gray-0: hsl(
    var(--teal-hue),
    var(--palette-gray-saturation),
    var(--teal-lightness-0)
  );
  --teal-gray-1: hsl(
    var(--teal-hue),
    var(--palette-gray-saturation),
    var(--teal-lightness-1)
  );
  --teal-gray-2: hsl(
    var(--teal-hue),
    var(--palette-gray-saturation),
    var(--teal-lightness-2)
  );
  --teal-gray-3: hsl(
    var(--teal-hue),
    var(--palette-gray-saturation),
    var(--teal-lightness-3)
  );
  --teal-gray-4: hsl(
    var(--teal-hue),
    var(--palette-gray-saturation),
    var(--teal-lightness-4)
  );
  --teal-gray-5: hsl(
    var(--teal-hue),
    var(--palette-gray-saturation),
    var(--teal-lightness-5)
  );
  --teal-gray-6: hsl(
    var(--teal-hue),
    var(--palette-gray-saturation),
    var(--teal-lightness-6)
  );
  --teal-gray-7: hsl(
    var(--teal-hue),
    var(--palette-gray-saturation),
    var(--teal-lightness-7)
  );
  --teal-gray-8: hsl(
    var(--teal-hue),
    var(--palette-gray-saturation),
    var(--teal-lightness-8)
  );
  --teal-gray-9: hsl(
    var(--teal-hue),
    var(--palette-gray-saturation),
    var(--teal-lightness-9)
  );
  --teal-gray-10: hsl(
    var(--teal-hue),
    var(--palette-gray-saturation),
    var(--teal-lightness-10)
  );
  --teal-accent-light-color: hsl(
    var(--teal-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --teal-accent-dark-color: hsl(
    var(--teal-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --teal-accent-0: var(--teal-accent-dark-color);
  --teal-accent-1: var(--teal-accent-dark-color);
  --teal-accent-2: var(--teal-accent-dark-color);
  --teal-accent-3: var(--teal-accent-dark-color);
  --teal-accent-4: var(--teal-accent-dark-color);
  --teal-accent-5: var(--teal-accent-dark-color);
  --teal-accent-6: var(--teal-accent-dark-color);
  --teal-accent-7: var(--teal-accent-light-color);
  --teal-accent-8: var(--teal-accent-light-color);
  --teal-accent-9: var(--teal-accent-light-color);
  --teal-accent-10: var(--teal-accent-light-color);
  --teal-lighter: var(--teal-color-2);
  --teal-accent-lighter: var(--teal-accent-2);
  --teal-lighter-ch:
    var(--teal-hue), var(--teal-saturation),
    var(--teal-lightness-2);
  --teal-light: var(--teal-color-3);
  --teal-accent-light: var(--teal-accent-3);
  --teal-light-ch:
    var(--teal-hue), var(--teal-saturation),
    var(--teal-lightness-3);
  --teal-default: var(--teal-color-5);
  --teal-accent-default: var(--teal-accent-5);
  --teal-default-ch:
    var(--teal-hue), var(--teal-saturation),
    var(--teal-lightness-5);
  --teal-dark: var(--teal-color-7);
  --teal-accent-dark: var(--teal-accent-7);
  --teal-dark-ch:
    var(--teal-hue), var(--teal-saturation),
    var(--teal-lightness-7);
  --teal-darker: var(--teal-color-9);
  --teal-accent-darker: var(--teal-accent-9);
  --teal-darker-ch:
    var(--teal-hue), var(--teal-saturation),
    var(--teal-lightness-9);
}

.teal {
  --palette-hue: var(--teal-hue);
  --palette-saturation: var(--teal-saturation);
  --palette-accent-light-color: var(
    --teal-accent-light-color
  );
  --palette-accent-dark-color: var(
    --teal-accent-dark-color
  );
  --palette-lightness-0: var(
    --teal-lightness-0
  );
  --palette-color-0: var(--teal-color-0);
  --palette-color-0-ch: var(
    --teal-color-0-ch
  );
  --palette-gray-0: var(--teal-gray-0);
  --palette-accent-0: var(--teal-accent-0);
  --palette-lightness-1: var(
    --teal-lightness-1
  );
  --palette-color-1: var(--teal-color-1);
  --palette-color-1-ch: var(
    --teal-color-1-ch
  );
  --palette-gray-1: var(--teal-gray-1);
  --palette-accent-1: var(--teal-accent-1);
  --palette-lightness-2: var(
    --teal-lightness-2
  );
  --palette-color-2: var(--teal-color-2);
  --palette-color-2-ch: var(
    --teal-color-2-ch
  );
  --palette-gray-2: var(--teal-gray-2);
  --palette-accent-2: var(--teal-accent-2);
  --palette-lightness-3: var(
    --teal-lightness-3
  );
  --palette-color-3: var(--teal-color-3);
  --palette-color-3-ch: var(
    --teal-color-3-ch
  );
  --palette-gray-3: var(--teal-gray-3);
  --palette-accent-3: var(--teal-accent-3);
  --palette-lightness-4: var(
    --teal-lightness-4
  );
  --palette-color-4: var(--teal-color-4);
  --palette-color-4-ch: var(
    --teal-color-4-ch
  );
  --palette-gray-4: var(--teal-gray-4);
  --palette-accent-4: var(--teal-accent-4);
  --palette-lightness-5: var(
    --teal-lightness-5
  );
  --palette-color-5: var(--teal-color-5);
  --palette-color-5-ch: var(
    --teal-color-5-ch
  );
  --palette-gray-5: var(--teal-gray-5);
  --palette-accent-5: var(--teal-accent-5);
  --palette-lightness-6: var(
    --teal-lightness-6
  );
  --palette-color-6: var(--teal-color-6);
  --palette-color-6-ch: var(
    --teal-color-6-ch
  );
  --palette-gray-6: var(--teal-gray-6);
  --palette-accent-6: var(--teal-accent-6);
  --palette-lightness-7: var(
    --teal-lightness-7
  );
  --palette-color-7: var(--teal-color-7);
  --palette-color-7-ch: var(
    --teal-color-7-ch
  );
  --palette-gray-7: var(--teal-gray-7);
  --palette-accent-7: var(--teal-accent-7);
  --palette-lightness-8: var(
    --teal-lightness-8
  );
  --palette-color-8: var(--teal-color-8);
  --palette-color-8-ch: var(
    --teal-color-8-ch
  );
  --palette-gray-8: var(--teal-gray-8);
  --palette-accent-8: var(--teal-accent-8);
  --palette-lightness-9: var(
    --teal-lightness-9
  );
  --palette-color-9: var(--teal-color-9);
  --palette-color-9-ch: var(
    --teal-color-9-ch
  );
  --palette-gray-9: var(--teal-gray-9);
  --palette-accent-9: var(--teal-accent-9);
  --palette-lightness-10: var(
    --teal-lightness-10
  );
  --palette-color-10: var(--teal-color-10);
  --palette-color-10-ch: var(
    --teal-color-10-ch
  );
  --palette-gray-10: var(--teal-gray-10);
  --palette-accent-10: var(--teal-accent-10);
  --palette-lighter: var(--teal-lighter);
  --palette-accent-lighter: var(
    --teal-accent-lighter
  );
  --palette-lighter-ch: var(
    --teal-lighter-ch
  );
  --palette-light: var(--teal-light);
  --palette-accent-light: var(
    --teal-accent-light
  );
  --palette-light-ch: var(
    --teal-light-ch
  );
  --palette-default: var(--teal-default);
  --palette-accent-default: var(
    --teal-accent-default
  );
  --palette-default-ch: var(
    --teal-default-ch
  );
  --palette-dark: var(--teal-dark);
  --palette-accent-dark: var(
    --teal-accent-dark
  );
  --palette-dark-ch: var(
    --teal-dark-ch
  );
  --palette-darker: var(--teal-darker);
  --palette-accent-darker: var(
    --teal-accent-darker
  );
  --palette-darker-ch: var(
    --teal-darker-ch
  );
}

:root {
  --cyan-hue: 190;
  --cyan-saturation: 100%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 40%;
  --palette-gray-saturation: 5%;
  --cyan-lightness-0: 97%;
  --cyan-lightness-1: 93%;
  --cyan-lightness-2: 85%;
  --cyan-lightness-3: 75%;
  --cyan-lightness-4: 65%;
  --cyan-lightness-5: 50%;
  --cyan-lightness-6: 42%;
  --cyan-lightness-7: 34%;
  --cyan-lightness-8: 26%;
  --cyan-lightness-9: 18%;
  --cyan-lightness-10: 10%;
  --cyan-color-0: hsl(
    var(--cyan-hue),
    var(--cyan-saturation),
    var(--cyan-lightness-0)
  );
  --cyan-color-1: hsl(
    var(--cyan-hue),
    var(--cyan-saturation),
    var(--cyan-lightness-1)
  );
  --cyan-color-2: hsl(
    var(--cyan-hue),
    var(--cyan-saturation),
    var(--cyan-lightness-2)
  );
  --cyan-color-3: hsl(
    var(--cyan-hue),
    var(--cyan-saturation),
    var(--cyan-lightness-3)
  );
  --cyan-color-4: hsl(
    var(--cyan-hue),
    var(--cyan-saturation),
    var(--cyan-lightness-4)
  );
  --cyan-color-5: hsl(
    var(--cyan-hue),
    var(--cyan-saturation),
    var(--cyan-lightness-5)
  );
  --cyan-color-6: hsl(
    var(--cyan-hue),
    var(--cyan-saturation),
    var(--cyan-lightness-6)
  );
  --cyan-color-7: hsl(
    var(--cyan-hue),
    var(--cyan-saturation),
    var(--cyan-lightness-7)
  );
  --cyan-color-8: hsl(
    var(--cyan-hue),
    var(--cyan-saturation),
    var(--cyan-lightness-8)
  );
  --cyan-color-9: hsl(
    var(--cyan-hue),
    var(--cyan-saturation),
    var(--cyan-lightness-9)
  );
  --cyan-color-10: hsl(
    var(--cyan-hue),
    var(--cyan-saturation),
    var(--cyan-lightness-10)
  );
  --cyan-color-0-ch:
    var(--cyan-hue), var(--cyan-saturation),
    var(--cyan-lightness-0);
  --cyan-color-1-ch:
    var(--cyan-hue), var(--cyan-saturation),
    var(--cyan-lightness-1);
  --cyan-color-2-ch:
    var(--cyan-hue), var(--cyan-saturation),
    var(--cyan-lightness-2);
  --cyan-color-3-ch:
    var(--cyan-hue), var(--cyan-saturation),
    var(--cyan-lightness-3);
  --cyan-color-4-ch:
    var(--cyan-hue), var(--cyan-saturation),
    var(--cyan-lightness-4);
  --cyan-color-5-ch:
    var(--cyan-hue), var(--cyan-saturation),
    var(--cyan-lightness-5);
  --cyan-color-6-ch:
    var(--cyan-hue), var(--cyan-saturation),
    var(--cyan-lightness-6);
  --cyan-color-7-ch:
    var(--cyan-hue), var(--cyan-saturation),
    var(--cyan-lightness-7);
  --cyan-color-8-ch:
    var(--cyan-hue), var(--cyan-saturation),
    var(--cyan-lightness-8);
  --cyan-color-9-ch:
    var(--cyan-hue), var(--cyan-saturation),
    var(--cyan-lightness-9);
  --cyan-color-10-ch:
    var(--cyan-hue), var(--cyan-saturation),
    var(--cyan-lightness-10);
  --cyan-gray-0: hsl(
    var(--cyan-hue),
    var(--palette-gray-saturation),
    var(--cyan-lightness-0)
  );
  --cyan-gray-1: hsl(
    var(--cyan-hue),
    var(--palette-gray-saturation),
    var(--cyan-lightness-1)
  );
  --cyan-gray-2: hsl(
    var(--cyan-hue),
    var(--palette-gray-saturation),
    var(--cyan-lightness-2)
  );
  --cyan-gray-3: hsl(
    var(--cyan-hue),
    var(--palette-gray-saturation),
    var(--cyan-lightness-3)
  );
  --cyan-gray-4: hsl(
    var(--cyan-hue),
    var(--palette-gray-saturation),
    var(--cyan-lightness-4)
  );
  --cyan-gray-5: hsl(
    var(--cyan-hue),
    var(--palette-gray-saturation),
    var(--cyan-lightness-5)
  );
  --cyan-gray-6: hsl(
    var(--cyan-hue),
    var(--palette-gray-saturation),
    var(--cyan-lightness-6)
  );
  --cyan-gray-7: hsl(
    var(--cyan-hue),
    var(--palette-gray-saturation),
    var(--cyan-lightness-7)
  );
  --cyan-gray-8: hsl(
    var(--cyan-hue),
    var(--palette-gray-saturation),
    var(--cyan-lightness-8)
  );
  --cyan-gray-9: hsl(
    var(--cyan-hue),
    var(--palette-gray-saturation),
    var(--cyan-lightness-9)
  );
  --cyan-gray-10: hsl(
    var(--cyan-hue),
    var(--palette-gray-saturation),
    var(--cyan-lightness-10)
  );
  --cyan-accent-light-color: hsl(
    var(--cyan-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --cyan-accent-dark-color: hsl(
    var(--cyan-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --cyan-accent-0: var(--cyan-accent-dark-color);
  --cyan-accent-1: var(--cyan-accent-dark-color);
  --cyan-accent-2: var(--cyan-accent-dark-color);
  --cyan-accent-3: var(--cyan-accent-dark-color);
  --cyan-accent-4: var(--cyan-accent-dark-color);
  --cyan-accent-5: var(--cyan-accent-dark-color);
  --cyan-accent-6: var(--cyan-accent-dark-color);
  --cyan-accent-7: var(--cyan-accent-light-color);
  --cyan-accent-8: var(--cyan-accent-light-color);
  --cyan-accent-9: var(--cyan-accent-light-color);
  --cyan-accent-10: var(--cyan-accent-light-color);
  --cyan-lighter: var(--cyan-color-2);
  --cyan-accent-lighter: var(--cyan-accent-2);
  --cyan-lighter-ch:
    var(--cyan-hue), var(--cyan-saturation),
    var(--cyan-lightness-2);
  --cyan-light: var(--cyan-color-3);
  --cyan-accent-light: var(--cyan-accent-3);
  --cyan-light-ch:
    var(--cyan-hue), var(--cyan-saturation),
    var(--cyan-lightness-3);
  --cyan-default: var(--cyan-color-5);
  --cyan-accent-default: var(--cyan-accent-5);
  --cyan-default-ch:
    var(--cyan-hue), var(--cyan-saturation),
    var(--cyan-lightness-5);
  --cyan-dark: var(--cyan-color-7);
  --cyan-accent-dark: var(--cyan-accent-7);
  --cyan-dark-ch:
    var(--cyan-hue), var(--cyan-saturation),
    var(--cyan-lightness-7);
  --cyan-darker: var(--cyan-color-9);
  --cyan-accent-darker: var(--cyan-accent-9);
  --cyan-darker-ch:
    var(--cyan-hue), var(--cyan-saturation),
    var(--cyan-lightness-9);
}

.cyan {
  --palette-hue: var(--cyan-hue);
  --palette-saturation: var(--cyan-saturation);
  --palette-accent-light-color: var(
    --cyan-accent-light-color
  );
  --palette-accent-dark-color: var(
    --cyan-accent-dark-color
  );
  --palette-lightness-0: var(
    --cyan-lightness-0
  );
  --palette-color-0: var(--cyan-color-0);
  --palette-color-0-ch: var(
    --cyan-color-0-ch
  );
  --palette-gray-0: var(--cyan-gray-0);
  --palette-accent-0: var(--cyan-accent-0);
  --palette-lightness-1: var(
    --cyan-lightness-1
  );
  --palette-color-1: var(--cyan-color-1);
  --palette-color-1-ch: var(
    --cyan-color-1-ch
  );
  --palette-gray-1: var(--cyan-gray-1);
  --palette-accent-1: var(--cyan-accent-1);
  --palette-lightness-2: var(
    --cyan-lightness-2
  );
  --palette-color-2: var(--cyan-color-2);
  --palette-color-2-ch: var(
    --cyan-color-2-ch
  );
  --palette-gray-2: var(--cyan-gray-2);
  --palette-accent-2: var(--cyan-accent-2);
  --palette-lightness-3: var(
    --cyan-lightness-3
  );
  --palette-color-3: var(--cyan-color-3);
  --palette-color-3-ch: var(
    --cyan-color-3-ch
  );
  --palette-gray-3: var(--cyan-gray-3);
  --palette-accent-3: var(--cyan-accent-3);
  --palette-lightness-4: var(
    --cyan-lightness-4
  );
  --palette-color-4: var(--cyan-color-4);
  --palette-color-4-ch: var(
    --cyan-color-4-ch
  );
  --palette-gray-4: var(--cyan-gray-4);
  --palette-accent-4: var(--cyan-accent-4);
  --palette-lightness-5: var(
    --cyan-lightness-5
  );
  --palette-color-5: var(--cyan-color-5);
  --palette-color-5-ch: var(
    --cyan-color-5-ch
  );
  --palette-gray-5: var(--cyan-gray-5);
  --palette-accent-5: var(--cyan-accent-5);
  --palette-lightness-6: var(
    --cyan-lightness-6
  );
  --palette-color-6: var(--cyan-color-6);
  --palette-color-6-ch: var(
    --cyan-color-6-ch
  );
  --palette-gray-6: var(--cyan-gray-6);
  --palette-accent-6: var(--cyan-accent-6);
  --palette-lightness-7: var(
    --cyan-lightness-7
  );
  --palette-color-7: var(--cyan-color-7);
  --palette-color-7-ch: var(
    --cyan-color-7-ch
  );
  --palette-gray-7: var(--cyan-gray-7);
  --palette-accent-7: var(--cyan-accent-7);
  --palette-lightness-8: var(
    --cyan-lightness-8
  );
  --palette-color-8: var(--cyan-color-8);
  --palette-color-8-ch: var(
    --cyan-color-8-ch
  );
  --palette-gray-8: var(--cyan-gray-8);
  --palette-accent-8: var(--cyan-accent-8);
  --palette-lightness-9: var(
    --cyan-lightness-9
  );
  --palette-color-9: var(--cyan-color-9);
  --palette-color-9-ch: var(
    --cyan-color-9-ch
  );
  --palette-gray-9: var(--cyan-gray-9);
  --palette-accent-9: var(--cyan-accent-9);
  --palette-lightness-10: var(
    --cyan-lightness-10
  );
  --palette-color-10: var(--cyan-color-10);
  --palette-color-10-ch: var(
    --cyan-color-10-ch
  );
  --palette-gray-10: var(--cyan-gray-10);
  --palette-accent-10: var(--cyan-accent-10);
  --palette-lighter: var(--cyan-lighter);
  --palette-accent-lighter: var(
    --cyan-accent-lighter
  );
  --palette-lighter-ch: var(
    --cyan-lighter-ch
  );
  --palette-light: var(--cyan-light);
  --palette-accent-light: var(
    --cyan-accent-light
  );
  --palette-light-ch: var(
    --cyan-light-ch
  );
  --palette-default: var(--cyan-default);
  --palette-accent-default: var(
    --cyan-accent-default
  );
  --palette-default-ch: var(
    --cyan-default-ch
  );
  --palette-dark: var(--cyan-dark);
  --palette-accent-dark: var(
    --cyan-accent-dark
  );
  --palette-dark-ch: var(
    --cyan-dark-ch
  );
  --palette-darker: var(--cyan-darker);
  --palette-accent-darker: var(
    --cyan-accent-darker
  );
  --palette-darker-ch: var(
    --cyan-darker-ch
  );
}

:root {
  --blue-hue: 220;
  --blue-saturation: 100%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 50%;
  --palette-gray-saturation: 5%;
  --blue-lightness-0: 97%;
  --blue-lightness-1: 93%;
  --blue-lightness-2: 85%;
  --blue-lightness-3: 75%;
  --blue-lightness-4: 65%;
  --blue-lightness-5: 50%;
  --blue-lightness-6: 42%;
  --blue-lightness-7: 34%;
  --blue-lightness-8: 26%;
  --blue-lightness-9: 18%;
  --blue-lightness-10: 10%;
  --blue-color-0: hsl(
    var(--blue-hue),
    var(--blue-saturation),
    var(--blue-lightness-0)
  );
  --blue-color-1: hsl(
    var(--blue-hue),
    var(--blue-saturation),
    var(--blue-lightness-1)
  );
  --blue-color-2: hsl(
    var(--blue-hue),
    var(--blue-saturation),
    var(--blue-lightness-2)
  );
  --blue-color-3: hsl(
    var(--blue-hue),
    var(--blue-saturation),
    var(--blue-lightness-3)
  );
  --blue-color-4: hsl(
    var(--blue-hue),
    var(--blue-saturation),
    var(--blue-lightness-4)
  );
  --blue-color-5: hsl(
    var(--blue-hue),
    var(--blue-saturation),
    var(--blue-lightness-5)
  );
  --blue-color-6: hsl(
    var(--blue-hue),
    var(--blue-saturation),
    var(--blue-lightness-6)
  );
  --blue-color-7: hsl(
    var(--blue-hue),
    var(--blue-saturation),
    var(--blue-lightness-7)
  );
  --blue-color-8: hsl(
    var(--blue-hue),
    var(--blue-saturation),
    var(--blue-lightness-8)
  );
  --blue-color-9: hsl(
    var(--blue-hue),
    var(--blue-saturation),
    var(--blue-lightness-9)
  );
  --blue-color-10: hsl(
    var(--blue-hue),
    var(--blue-saturation),
    var(--blue-lightness-10)
  );
  --blue-color-0-ch:
    var(--blue-hue), var(--blue-saturation),
    var(--blue-lightness-0);
  --blue-color-1-ch:
    var(--blue-hue), var(--blue-saturation),
    var(--blue-lightness-1);
  --blue-color-2-ch:
    var(--blue-hue), var(--blue-saturation),
    var(--blue-lightness-2);
  --blue-color-3-ch:
    var(--blue-hue), var(--blue-saturation),
    var(--blue-lightness-3);
  --blue-color-4-ch:
    var(--blue-hue), var(--blue-saturation),
    var(--blue-lightness-4);
  --blue-color-5-ch:
    var(--blue-hue), var(--blue-saturation),
    var(--blue-lightness-5);
  --blue-color-6-ch:
    var(--blue-hue), var(--blue-saturation),
    var(--blue-lightness-6);
  --blue-color-7-ch:
    var(--blue-hue), var(--blue-saturation),
    var(--blue-lightness-7);
  --blue-color-8-ch:
    var(--blue-hue), var(--blue-saturation),
    var(--blue-lightness-8);
  --blue-color-9-ch:
    var(--blue-hue), var(--blue-saturation),
    var(--blue-lightness-9);
  --blue-color-10-ch:
    var(--blue-hue), var(--blue-saturation),
    var(--blue-lightness-10);
  --blue-gray-0: hsl(
    var(--blue-hue),
    var(--palette-gray-saturation),
    var(--blue-lightness-0)
  );
  --blue-gray-1: hsl(
    var(--blue-hue),
    var(--palette-gray-saturation),
    var(--blue-lightness-1)
  );
  --blue-gray-2: hsl(
    var(--blue-hue),
    var(--palette-gray-saturation),
    var(--blue-lightness-2)
  );
  --blue-gray-3: hsl(
    var(--blue-hue),
    var(--palette-gray-saturation),
    var(--blue-lightness-3)
  );
  --blue-gray-4: hsl(
    var(--blue-hue),
    var(--palette-gray-saturation),
    var(--blue-lightness-4)
  );
  --blue-gray-5: hsl(
    var(--blue-hue),
    var(--palette-gray-saturation),
    var(--blue-lightness-5)
  );
  --blue-gray-6: hsl(
    var(--blue-hue),
    var(--palette-gray-saturation),
    var(--blue-lightness-6)
  );
  --blue-gray-7: hsl(
    var(--blue-hue),
    var(--palette-gray-saturation),
    var(--blue-lightness-7)
  );
  --blue-gray-8: hsl(
    var(--blue-hue),
    var(--palette-gray-saturation),
    var(--blue-lightness-8)
  );
  --blue-gray-9: hsl(
    var(--blue-hue),
    var(--palette-gray-saturation),
    var(--blue-lightness-9)
  );
  --blue-gray-10: hsl(
    var(--blue-hue),
    var(--palette-gray-saturation),
    var(--blue-lightness-10)
  );
  --blue-accent-light-color: hsl(
    var(--blue-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --blue-accent-dark-color: hsl(
    var(--blue-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --blue-accent-0: var(--blue-accent-dark-color);
  --blue-accent-1: var(--blue-accent-dark-color);
  --blue-accent-2: var(--blue-accent-dark-color);
  --blue-accent-3: var(--blue-accent-dark-color);
  --blue-accent-4: var(--blue-accent-dark-color);
  --blue-accent-5: var(--blue-accent-light-color);
  --blue-accent-6: var(--blue-accent-light-color);
  --blue-accent-7: var(--blue-accent-light-color);
  --blue-accent-8: var(--blue-accent-light-color);
  --blue-accent-9: var(--blue-accent-light-color);
  --blue-accent-10: var(--blue-accent-light-color);
  --blue-lighter: var(--blue-color-2);
  --blue-accent-lighter: var(--blue-accent-2);
  --blue-lighter-ch:
    var(--blue-hue), var(--blue-saturation),
    var(--blue-lightness-2);
  --blue-light: var(--blue-color-3);
  --blue-accent-light: var(--blue-accent-3);
  --blue-light-ch:
    var(--blue-hue), var(--blue-saturation),
    var(--blue-lightness-3);
  --blue-default: var(--blue-color-5);
  --blue-accent-default: var(--blue-accent-5);
  --blue-default-ch:
    var(--blue-hue), var(--blue-saturation),
    var(--blue-lightness-5);
  --blue-dark: var(--blue-color-7);
  --blue-accent-dark: var(--blue-accent-7);
  --blue-dark-ch:
    var(--blue-hue), var(--blue-saturation),
    var(--blue-lightness-7);
  --blue-darker: var(--blue-color-9);
  --blue-accent-darker: var(--blue-accent-9);
  --blue-darker-ch:
    var(--blue-hue), var(--blue-saturation),
    var(--blue-lightness-9);
}

.blue {
  --palette-hue: var(--blue-hue);
  --palette-saturation: var(--blue-saturation);
  --palette-accent-light-color: var(
    --blue-accent-light-color
  );
  --palette-accent-dark-color: var(
    --blue-accent-dark-color
  );
  --palette-lightness-0: var(
    --blue-lightness-0
  );
  --palette-color-0: var(--blue-color-0);
  --palette-color-0-ch: var(
    --blue-color-0-ch
  );
  --palette-gray-0: var(--blue-gray-0);
  --palette-accent-0: var(--blue-accent-0);
  --palette-lightness-1: var(
    --blue-lightness-1
  );
  --palette-color-1: var(--blue-color-1);
  --palette-color-1-ch: var(
    --blue-color-1-ch
  );
  --palette-gray-1: var(--blue-gray-1);
  --palette-accent-1: var(--blue-accent-1);
  --palette-lightness-2: var(
    --blue-lightness-2
  );
  --palette-color-2: var(--blue-color-2);
  --palette-color-2-ch: var(
    --blue-color-2-ch
  );
  --palette-gray-2: var(--blue-gray-2);
  --palette-accent-2: var(--blue-accent-2);
  --palette-lightness-3: var(
    --blue-lightness-3
  );
  --palette-color-3: var(--blue-color-3);
  --palette-color-3-ch: var(
    --blue-color-3-ch
  );
  --palette-gray-3: var(--blue-gray-3);
  --palette-accent-3: var(--blue-accent-3);
  --palette-lightness-4: var(
    --blue-lightness-4
  );
  --palette-color-4: var(--blue-color-4);
  --palette-color-4-ch: var(
    --blue-color-4-ch
  );
  --palette-gray-4: var(--blue-gray-4);
  --palette-accent-4: var(--blue-accent-4);
  --palette-lightness-5: var(
    --blue-lightness-5
  );
  --palette-color-5: var(--blue-color-5);
  --palette-color-5-ch: var(
    --blue-color-5-ch
  );
  --palette-gray-5: var(--blue-gray-5);
  --palette-accent-5: var(--blue-accent-5);
  --palette-lightness-6: var(
    --blue-lightness-6
  );
  --palette-color-6: var(--blue-color-6);
  --palette-color-6-ch: var(
    --blue-color-6-ch
  );
  --palette-gray-6: var(--blue-gray-6);
  --palette-accent-6: var(--blue-accent-6);
  --palette-lightness-7: var(
    --blue-lightness-7
  );
  --palette-color-7: var(--blue-color-7);
  --palette-color-7-ch: var(
    --blue-color-7-ch
  );
  --palette-gray-7: var(--blue-gray-7);
  --palette-accent-7: var(--blue-accent-7);
  --palette-lightness-8: var(
    --blue-lightness-8
  );
  --palette-color-8: var(--blue-color-8);
  --palette-color-8-ch: var(
    --blue-color-8-ch
  );
  --palette-gray-8: var(--blue-gray-8);
  --palette-accent-8: var(--blue-accent-8);
  --palette-lightness-9: var(
    --blue-lightness-9
  );
  --palette-color-9: var(--blue-color-9);
  --palette-color-9-ch: var(
    --blue-color-9-ch
  );
  --palette-gray-9: var(--blue-gray-9);
  --palette-accent-9: var(--blue-accent-9);
  --palette-lightness-10: var(
    --blue-lightness-10
  );
  --palette-color-10: var(--blue-color-10);
  --palette-color-10-ch: var(
    --blue-color-10-ch
  );
  --palette-gray-10: var(--blue-gray-10);
  --palette-accent-10: var(--blue-accent-10);
  --palette-lighter: var(--blue-lighter);
  --palette-accent-lighter: var(
    --blue-accent-lighter
  );
  --palette-lighter-ch: var(
    --blue-lighter-ch
  );
  --palette-light: var(--blue-light);
  --palette-accent-light: var(
    --blue-accent-light
  );
  --palette-light-ch: var(
    --blue-light-ch
  );
  --palette-default: var(--blue-default);
  --palette-accent-default: var(
    --blue-accent-default
  );
  --palette-default-ch: var(
    --blue-default-ch
  );
  --palette-dark: var(--blue-dark);
  --palette-accent-dark: var(
    --blue-accent-dark
  );
  --palette-dark-ch: var(
    --blue-dark-ch
  );
  --palette-darker: var(--blue-darker);
  --palette-accent-darker: var(
    --blue-accent-darker
  );
  --palette-darker-ch: var(
    --blue-darker-ch
  );
}

:root {
  --indigo-hue: 240;
  --indigo-saturation: 100%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 70%;
  --palette-gray-saturation: 5%;
  --indigo-lightness-0: 97%;
  --indigo-lightness-1: 93%;
  --indigo-lightness-2: 85%;
  --indigo-lightness-3: 75%;
  --indigo-lightness-4: 65%;
  --indigo-lightness-5: 50%;
  --indigo-lightness-6: 42%;
  --indigo-lightness-7: 34%;
  --indigo-lightness-8: 26%;
  --indigo-lightness-9: 18%;
  --indigo-lightness-10: 10%;
  --indigo-color-0: hsl(
    var(--indigo-hue),
    var(--indigo-saturation),
    var(--indigo-lightness-0)
  );
  --indigo-color-1: hsl(
    var(--indigo-hue),
    var(--indigo-saturation),
    var(--indigo-lightness-1)
  );
  --indigo-color-2: hsl(
    var(--indigo-hue),
    var(--indigo-saturation),
    var(--indigo-lightness-2)
  );
  --indigo-color-3: hsl(
    var(--indigo-hue),
    var(--indigo-saturation),
    var(--indigo-lightness-3)
  );
  --indigo-color-4: hsl(
    var(--indigo-hue),
    var(--indigo-saturation),
    var(--indigo-lightness-4)
  );
  --indigo-color-5: hsl(
    var(--indigo-hue),
    var(--indigo-saturation),
    var(--indigo-lightness-5)
  );
  --indigo-color-6: hsl(
    var(--indigo-hue),
    var(--indigo-saturation),
    var(--indigo-lightness-6)
  );
  --indigo-color-7: hsl(
    var(--indigo-hue),
    var(--indigo-saturation),
    var(--indigo-lightness-7)
  );
  --indigo-color-8: hsl(
    var(--indigo-hue),
    var(--indigo-saturation),
    var(--indigo-lightness-8)
  );
  --indigo-color-9: hsl(
    var(--indigo-hue),
    var(--indigo-saturation),
    var(--indigo-lightness-9)
  );
  --indigo-color-10: hsl(
    var(--indigo-hue),
    var(--indigo-saturation),
    var(--indigo-lightness-10)
  );
  --indigo-color-0-ch:
    var(--indigo-hue), var(--indigo-saturation),
    var(--indigo-lightness-0);
  --indigo-color-1-ch:
    var(--indigo-hue), var(--indigo-saturation),
    var(--indigo-lightness-1);
  --indigo-color-2-ch:
    var(--indigo-hue), var(--indigo-saturation),
    var(--indigo-lightness-2);
  --indigo-color-3-ch:
    var(--indigo-hue), var(--indigo-saturation),
    var(--indigo-lightness-3);
  --indigo-color-4-ch:
    var(--indigo-hue), var(--indigo-saturation),
    var(--indigo-lightness-4);
  --indigo-color-5-ch:
    var(--indigo-hue), var(--indigo-saturation),
    var(--indigo-lightness-5);
  --indigo-color-6-ch:
    var(--indigo-hue), var(--indigo-saturation),
    var(--indigo-lightness-6);
  --indigo-color-7-ch:
    var(--indigo-hue), var(--indigo-saturation),
    var(--indigo-lightness-7);
  --indigo-color-8-ch:
    var(--indigo-hue), var(--indigo-saturation),
    var(--indigo-lightness-8);
  --indigo-color-9-ch:
    var(--indigo-hue), var(--indigo-saturation),
    var(--indigo-lightness-9);
  --indigo-color-10-ch:
    var(--indigo-hue), var(--indigo-saturation),
    var(--indigo-lightness-10);
  --indigo-gray-0: hsl(
    var(--indigo-hue),
    var(--palette-gray-saturation),
    var(--indigo-lightness-0)
  );
  --indigo-gray-1: hsl(
    var(--indigo-hue),
    var(--palette-gray-saturation),
    var(--indigo-lightness-1)
  );
  --indigo-gray-2: hsl(
    var(--indigo-hue),
    var(--palette-gray-saturation),
    var(--indigo-lightness-2)
  );
  --indigo-gray-3: hsl(
    var(--indigo-hue),
    var(--palette-gray-saturation),
    var(--indigo-lightness-3)
  );
  --indigo-gray-4: hsl(
    var(--indigo-hue),
    var(--palette-gray-saturation),
    var(--indigo-lightness-4)
  );
  --indigo-gray-5: hsl(
    var(--indigo-hue),
    var(--palette-gray-saturation),
    var(--indigo-lightness-5)
  );
  --indigo-gray-6: hsl(
    var(--indigo-hue),
    var(--palette-gray-saturation),
    var(--indigo-lightness-6)
  );
  --indigo-gray-7: hsl(
    var(--indigo-hue),
    var(--palette-gray-saturation),
    var(--indigo-lightness-7)
  );
  --indigo-gray-8: hsl(
    var(--indigo-hue),
    var(--palette-gray-saturation),
    var(--indigo-lightness-8)
  );
  --indigo-gray-9: hsl(
    var(--indigo-hue),
    var(--palette-gray-saturation),
    var(--indigo-lightness-9)
  );
  --indigo-gray-10: hsl(
    var(--indigo-hue),
    var(--palette-gray-saturation),
    var(--indigo-lightness-10)
  );
  --indigo-accent-light-color: hsl(
    var(--indigo-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --indigo-accent-dark-color: hsl(
    var(--indigo-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --indigo-accent-0: var(--indigo-accent-dark-color);
  --indigo-accent-1: var(--indigo-accent-dark-color);
  --indigo-accent-2: var(--indigo-accent-dark-color);
  --indigo-accent-3: var(--indigo-accent-dark-color);
  --indigo-accent-4: var(--indigo-accent-light-color);
  --indigo-accent-5: var(--indigo-accent-light-color);
  --indigo-accent-6: var(--indigo-accent-light-color);
  --indigo-accent-7: var(--indigo-accent-light-color);
  --indigo-accent-8: var(--indigo-accent-light-color);
  --indigo-accent-9: var(--indigo-accent-light-color);
  --indigo-accent-10: var(--indigo-accent-light-color);
  --indigo-lighter: var(--indigo-color-2);
  --indigo-accent-lighter: var(--indigo-accent-2);
  --indigo-lighter-ch:
    var(--indigo-hue), var(--indigo-saturation),
    var(--indigo-lightness-2);
  --indigo-light: var(--indigo-color-3);
  --indigo-accent-light: var(--indigo-accent-3);
  --indigo-light-ch:
    var(--indigo-hue), var(--indigo-saturation),
    var(--indigo-lightness-3);
  --indigo-default: var(--indigo-color-5);
  --indigo-accent-default: var(--indigo-accent-5);
  --indigo-default-ch:
    var(--indigo-hue), var(--indigo-saturation),
    var(--indigo-lightness-5);
  --indigo-dark: var(--indigo-color-7);
  --indigo-accent-dark: var(--indigo-accent-7);
  --indigo-dark-ch:
    var(--indigo-hue), var(--indigo-saturation),
    var(--indigo-lightness-7);
  --indigo-darker: var(--indigo-color-9);
  --indigo-accent-darker: var(--indigo-accent-9);
  --indigo-darker-ch:
    var(--indigo-hue), var(--indigo-saturation),
    var(--indigo-lightness-9);
}

.indigo {
  --palette-hue: var(--indigo-hue);
  --palette-saturation: var(--indigo-saturation);
  --palette-accent-light-color: var(
    --indigo-accent-light-color
  );
  --palette-accent-dark-color: var(
    --indigo-accent-dark-color
  );
  --palette-lightness-0: var(
    --indigo-lightness-0
  );
  --palette-color-0: var(--indigo-color-0);
  --palette-color-0-ch: var(
    --indigo-color-0-ch
  );
  --palette-gray-0: var(--indigo-gray-0);
  --palette-accent-0: var(--indigo-accent-0);
  --palette-lightness-1: var(
    --indigo-lightness-1
  );
  --palette-color-1: var(--indigo-color-1);
  --palette-color-1-ch: var(
    --indigo-color-1-ch
  );
  --palette-gray-1: var(--indigo-gray-1);
  --palette-accent-1: var(--indigo-accent-1);
  --palette-lightness-2: var(
    --indigo-lightness-2
  );
  --palette-color-2: var(--indigo-color-2);
  --palette-color-2-ch: var(
    --indigo-color-2-ch
  );
  --palette-gray-2: var(--indigo-gray-2);
  --palette-accent-2: var(--indigo-accent-2);
  --palette-lightness-3: var(
    --indigo-lightness-3
  );
  --palette-color-3: var(--indigo-color-3);
  --palette-color-3-ch: var(
    --indigo-color-3-ch
  );
  --palette-gray-3: var(--indigo-gray-3);
  --palette-accent-3: var(--indigo-accent-3);
  --palette-lightness-4: var(
    --indigo-lightness-4
  );
  --palette-color-4: var(--indigo-color-4);
  --palette-color-4-ch: var(
    --indigo-color-4-ch
  );
  --palette-gray-4: var(--indigo-gray-4);
  --palette-accent-4: var(--indigo-accent-4);
  --palette-lightness-5: var(
    --indigo-lightness-5
  );
  --palette-color-5: var(--indigo-color-5);
  --palette-color-5-ch: var(
    --indigo-color-5-ch
  );
  --palette-gray-5: var(--indigo-gray-5);
  --palette-accent-5: var(--indigo-accent-5);
  --palette-lightness-6: var(
    --indigo-lightness-6
  );
  --palette-color-6: var(--indigo-color-6);
  --palette-color-6-ch: var(
    --indigo-color-6-ch
  );
  --palette-gray-6: var(--indigo-gray-6);
  --palette-accent-6: var(--indigo-accent-6);
  --palette-lightness-7: var(
    --indigo-lightness-7
  );
  --palette-color-7: var(--indigo-color-7);
  --palette-color-7-ch: var(
    --indigo-color-7-ch
  );
  --palette-gray-7: var(--indigo-gray-7);
  --palette-accent-7: var(--indigo-accent-7);
  --palette-lightness-8: var(
    --indigo-lightness-8
  );
  --palette-color-8: var(--indigo-color-8);
  --palette-color-8-ch: var(
    --indigo-color-8-ch
  );
  --palette-gray-8: var(--indigo-gray-8);
  --palette-accent-8: var(--indigo-accent-8);
  --palette-lightness-9: var(
    --indigo-lightness-9
  );
  --palette-color-9: var(--indigo-color-9);
  --palette-color-9-ch: var(
    --indigo-color-9-ch
  );
  --palette-gray-9: var(--indigo-gray-9);
  --palette-accent-9: var(--indigo-accent-9);
  --palette-lightness-10: var(
    --indigo-lightness-10
  );
  --palette-color-10: var(--indigo-color-10);
  --palette-color-10-ch: var(
    --indigo-color-10-ch
  );
  --palette-gray-10: var(--indigo-gray-10);
  --palette-accent-10: var(--indigo-accent-10);
  --palette-lighter: var(--indigo-lighter);
  --palette-accent-lighter: var(
    --indigo-accent-lighter
  );
  --palette-lighter-ch: var(
    --indigo-lighter-ch
  );
  --palette-light: var(--indigo-light);
  --palette-accent-light: var(
    --indigo-accent-light
  );
  --palette-light-ch: var(
    --indigo-light-ch
  );
  --palette-default: var(--indigo-default);
  --palette-accent-default: var(
    --indigo-accent-default
  );
  --palette-default-ch: var(
    --indigo-default-ch
  );
  --palette-dark: var(--indigo-dark);
  --palette-accent-dark: var(
    --indigo-accent-dark
  );
  --palette-dark-ch: var(
    --indigo-dark-ch
  );
  --palette-darker: var(--indigo-darker);
  --palette-accent-darker: var(
    --indigo-accent-darker
  );
  --palette-darker-ch: var(
    --indigo-darker-ch
  );
}

:root {
  --violet-hue: 270;
  --violet-saturation: 100%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 70%;
  --palette-gray-saturation: 5%;
  --violet-lightness-0: 97%;
  --violet-lightness-1: 93%;
  --violet-lightness-2: 85%;
  --violet-lightness-3: 75%;
  --violet-lightness-4: 65%;
  --violet-lightness-5: 50%;
  --violet-lightness-6: 42%;
  --violet-lightness-7: 34%;
  --violet-lightness-8: 26%;
  --violet-lightness-9: 18%;
  --violet-lightness-10: 10%;
  --violet-color-0: hsl(
    var(--violet-hue),
    var(--violet-saturation),
    var(--violet-lightness-0)
  );
  --violet-color-1: hsl(
    var(--violet-hue),
    var(--violet-saturation),
    var(--violet-lightness-1)
  );
  --violet-color-2: hsl(
    var(--violet-hue),
    var(--violet-saturation),
    var(--violet-lightness-2)
  );
  --violet-color-3: hsl(
    var(--violet-hue),
    var(--violet-saturation),
    var(--violet-lightness-3)
  );
  --violet-color-4: hsl(
    var(--violet-hue),
    var(--violet-saturation),
    var(--violet-lightness-4)
  );
  --violet-color-5: hsl(
    var(--violet-hue),
    var(--violet-saturation),
    var(--violet-lightness-5)
  );
  --violet-color-6: hsl(
    var(--violet-hue),
    var(--violet-saturation),
    var(--violet-lightness-6)
  );
  --violet-color-7: hsl(
    var(--violet-hue),
    var(--violet-saturation),
    var(--violet-lightness-7)
  );
  --violet-color-8: hsl(
    var(--violet-hue),
    var(--violet-saturation),
    var(--violet-lightness-8)
  );
  --violet-color-9: hsl(
    var(--violet-hue),
    var(--violet-saturation),
    var(--violet-lightness-9)
  );
  --violet-color-10: hsl(
    var(--violet-hue),
    var(--violet-saturation),
    var(--violet-lightness-10)
  );
  --violet-color-0-ch:
    var(--violet-hue), var(--violet-saturation),
    var(--violet-lightness-0);
  --violet-color-1-ch:
    var(--violet-hue), var(--violet-saturation),
    var(--violet-lightness-1);
  --violet-color-2-ch:
    var(--violet-hue), var(--violet-saturation),
    var(--violet-lightness-2);
  --violet-color-3-ch:
    var(--violet-hue), var(--violet-saturation),
    var(--violet-lightness-3);
  --violet-color-4-ch:
    var(--violet-hue), var(--violet-saturation),
    var(--violet-lightness-4);
  --violet-color-5-ch:
    var(--violet-hue), var(--violet-saturation),
    var(--violet-lightness-5);
  --violet-color-6-ch:
    var(--violet-hue), var(--violet-saturation),
    var(--violet-lightness-6);
  --violet-color-7-ch:
    var(--violet-hue), var(--violet-saturation),
    var(--violet-lightness-7);
  --violet-color-8-ch:
    var(--violet-hue), var(--violet-saturation),
    var(--violet-lightness-8);
  --violet-color-9-ch:
    var(--violet-hue), var(--violet-saturation),
    var(--violet-lightness-9);
  --violet-color-10-ch:
    var(--violet-hue), var(--violet-saturation),
    var(--violet-lightness-10);
  --violet-gray-0: hsl(
    var(--violet-hue),
    var(--palette-gray-saturation),
    var(--violet-lightness-0)
  );
  --violet-gray-1: hsl(
    var(--violet-hue),
    var(--palette-gray-saturation),
    var(--violet-lightness-1)
  );
  --violet-gray-2: hsl(
    var(--violet-hue),
    var(--palette-gray-saturation),
    var(--violet-lightness-2)
  );
  --violet-gray-3: hsl(
    var(--violet-hue),
    var(--palette-gray-saturation),
    var(--violet-lightness-3)
  );
  --violet-gray-4: hsl(
    var(--violet-hue),
    var(--palette-gray-saturation),
    var(--violet-lightness-4)
  );
  --violet-gray-5: hsl(
    var(--violet-hue),
    var(--palette-gray-saturation),
    var(--violet-lightness-5)
  );
  --violet-gray-6: hsl(
    var(--violet-hue),
    var(--palette-gray-saturation),
    var(--violet-lightness-6)
  );
  --violet-gray-7: hsl(
    var(--violet-hue),
    var(--palette-gray-saturation),
    var(--violet-lightness-7)
  );
  --violet-gray-8: hsl(
    var(--violet-hue),
    var(--palette-gray-saturation),
    var(--violet-lightness-8)
  );
  --violet-gray-9: hsl(
    var(--violet-hue),
    var(--palette-gray-saturation),
    var(--violet-lightness-9)
  );
  --violet-gray-10: hsl(
    var(--violet-hue),
    var(--palette-gray-saturation),
    var(--violet-lightness-10)
  );
  --violet-accent-light-color: hsl(
    var(--violet-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --violet-accent-dark-color: hsl(
    var(--violet-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --violet-accent-0: var(--violet-accent-dark-color);
  --violet-accent-1: var(--violet-accent-dark-color);
  --violet-accent-2: var(--violet-accent-dark-color);
  --violet-accent-3: var(--violet-accent-dark-color);
  --violet-accent-4: var(--violet-accent-light-color);
  --violet-accent-5: var(--violet-accent-light-color);
  --violet-accent-6: var(--violet-accent-light-color);
  --violet-accent-7: var(--violet-accent-light-color);
  --violet-accent-8: var(--violet-accent-light-color);
  --violet-accent-9: var(--violet-accent-light-color);
  --violet-accent-10: var(--violet-accent-light-color);
  --violet-lighter: var(--violet-color-2);
  --violet-accent-lighter: var(--violet-accent-2);
  --violet-lighter-ch:
    var(--violet-hue), var(--violet-saturation),
    var(--violet-lightness-2);
  --violet-light: var(--violet-color-3);
  --violet-accent-light: var(--violet-accent-3);
  --violet-light-ch:
    var(--violet-hue), var(--violet-saturation),
    var(--violet-lightness-3);
  --violet-default: var(--violet-color-5);
  --violet-accent-default: var(--violet-accent-5);
  --violet-default-ch:
    var(--violet-hue), var(--violet-saturation),
    var(--violet-lightness-5);
  --violet-dark: var(--violet-color-7);
  --violet-accent-dark: var(--violet-accent-7);
  --violet-dark-ch:
    var(--violet-hue), var(--violet-saturation),
    var(--violet-lightness-7);
  --violet-darker: var(--violet-color-9);
  --violet-accent-darker: var(--violet-accent-9);
  --violet-darker-ch:
    var(--violet-hue), var(--violet-saturation),
    var(--violet-lightness-9);
}

.violet {
  --palette-hue: var(--violet-hue);
  --palette-saturation: var(--violet-saturation);
  --palette-accent-light-color: var(
    --violet-accent-light-color
  );
  --palette-accent-dark-color: var(
    --violet-accent-dark-color
  );
  --palette-lightness-0: var(
    --violet-lightness-0
  );
  --palette-color-0: var(--violet-color-0);
  --palette-color-0-ch: var(
    --violet-color-0-ch
  );
  --palette-gray-0: var(--violet-gray-0);
  --palette-accent-0: var(--violet-accent-0);
  --palette-lightness-1: var(
    --violet-lightness-1
  );
  --palette-color-1: var(--violet-color-1);
  --palette-color-1-ch: var(
    --violet-color-1-ch
  );
  --palette-gray-1: var(--violet-gray-1);
  --palette-accent-1: var(--violet-accent-1);
  --palette-lightness-2: var(
    --violet-lightness-2
  );
  --palette-color-2: var(--violet-color-2);
  --palette-color-2-ch: var(
    --violet-color-2-ch
  );
  --palette-gray-2: var(--violet-gray-2);
  --palette-accent-2: var(--violet-accent-2);
  --palette-lightness-3: var(
    --violet-lightness-3
  );
  --palette-color-3: var(--violet-color-3);
  --palette-color-3-ch: var(
    --violet-color-3-ch
  );
  --palette-gray-3: var(--violet-gray-3);
  --palette-accent-3: var(--violet-accent-3);
  --palette-lightness-4: var(
    --violet-lightness-4
  );
  --palette-color-4: var(--violet-color-4);
  --palette-color-4-ch: var(
    --violet-color-4-ch
  );
  --palette-gray-4: var(--violet-gray-4);
  --palette-accent-4: var(--violet-accent-4);
  --palette-lightness-5: var(
    --violet-lightness-5
  );
  --palette-color-5: var(--violet-color-5);
  --palette-color-5-ch: var(
    --violet-color-5-ch
  );
  --palette-gray-5: var(--violet-gray-5);
  --palette-accent-5: var(--violet-accent-5);
  --palette-lightness-6: var(
    --violet-lightness-6
  );
  --palette-color-6: var(--violet-color-6);
  --palette-color-6-ch: var(
    --violet-color-6-ch
  );
  --palette-gray-6: var(--violet-gray-6);
  --palette-accent-6: var(--violet-accent-6);
  --palette-lightness-7: var(
    --violet-lightness-7
  );
  --palette-color-7: var(--violet-color-7);
  --palette-color-7-ch: var(
    --violet-color-7-ch
  );
  --palette-gray-7: var(--violet-gray-7);
  --palette-accent-7: var(--violet-accent-7);
  --palette-lightness-8: var(
    --violet-lightness-8
  );
  --palette-color-8: var(--violet-color-8);
  --palette-color-8-ch: var(
    --violet-color-8-ch
  );
  --palette-gray-8: var(--violet-gray-8);
  --palette-accent-8: var(--violet-accent-8);
  --palette-lightness-9: var(
    --violet-lightness-9
  );
  --palette-color-9: var(--violet-color-9);
  --palette-color-9-ch: var(
    --violet-color-9-ch
  );
  --palette-gray-9: var(--violet-gray-9);
  --palette-accent-9: var(--violet-accent-9);
  --palette-lightness-10: var(
    --violet-lightness-10
  );
  --palette-color-10: var(--violet-color-10);
  --palette-color-10-ch: var(
    --violet-color-10-ch
  );
  --palette-gray-10: var(--violet-gray-10);
  --palette-accent-10: var(--violet-accent-10);
  --palette-lighter: var(--violet-lighter);
  --palette-accent-lighter: var(
    --violet-accent-lighter
  );
  --palette-lighter-ch: var(
    --violet-lighter-ch
  );
  --palette-light: var(--violet-light);
  --palette-accent-light: var(
    --violet-accent-light
  );
  --palette-light-ch: var(
    --violet-light-ch
  );
  --palette-default: var(--violet-default);
  --palette-accent-default: var(
    --violet-accent-default
  );
  --palette-default-ch: var(
    --violet-default-ch
  );
  --palette-dark: var(--violet-dark);
  --palette-accent-dark: var(
    --violet-accent-dark
  );
  --palette-dark-ch: var(
    --violet-dark-ch
  );
  --palette-darker: var(--violet-darker);
  --palette-accent-darker: var(
    --violet-accent-darker
  );
  --palette-darker-ch: var(
    --violet-darker-ch
  );
}

:root {
  --purple-hue: 290;
  --purple-saturation: 100%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 50%;
  --palette-gray-saturation: 5%;
  --purple-lightness-0: 97%;
  --purple-lightness-1: 93%;
  --purple-lightness-2: 85%;
  --purple-lightness-3: 75%;
  --purple-lightness-4: 65%;
  --purple-lightness-5: 50%;
  --purple-lightness-6: 42%;
  --purple-lightness-7: 34%;
  --purple-lightness-8: 26%;
  --purple-lightness-9: 18%;
  --purple-lightness-10: 10%;
  --purple-color-0: hsl(
    var(--purple-hue),
    var(--purple-saturation),
    var(--purple-lightness-0)
  );
  --purple-color-1: hsl(
    var(--purple-hue),
    var(--purple-saturation),
    var(--purple-lightness-1)
  );
  --purple-color-2: hsl(
    var(--purple-hue),
    var(--purple-saturation),
    var(--purple-lightness-2)
  );
  --purple-color-3: hsl(
    var(--purple-hue),
    var(--purple-saturation),
    var(--purple-lightness-3)
  );
  --purple-color-4: hsl(
    var(--purple-hue),
    var(--purple-saturation),
    var(--purple-lightness-4)
  );
  --purple-color-5: hsl(
    var(--purple-hue),
    var(--purple-saturation),
    var(--purple-lightness-5)
  );
  --purple-color-6: hsl(
    var(--purple-hue),
    var(--purple-saturation),
    var(--purple-lightness-6)
  );
  --purple-color-7: hsl(
    var(--purple-hue),
    var(--purple-saturation),
    var(--purple-lightness-7)
  );
  --purple-color-8: hsl(
    var(--purple-hue),
    var(--purple-saturation),
    var(--purple-lightness-8)
  );
  --purple-color-9: hsl(
    var(--purple-hue),
    var(--purple-saturation),
    var(--purple-lightness-9)
  );
  --purple-color-10: hsl(
    var(--purple-hue),
    var(--purple-saturation),
    var(--purple-lightness-10)
  );
  --purple-color-0-ch:
    var(--purple-hue), var(--purple-saturation),
    var(--purple-lightness-0);
  --purple-color-1-ch:
    var(--purple-hue), var(--purple-saturation),
    var(--purple-lightness-1);
  --purple-color-2-ch:
    var(--purple-hue), var(--purple-saturation),
    var(--purple-lightness-2);
  --purple-color-3-ch:
    var(--purple-hue), var(--purple-saturation),
    var(--purple-lightness-3);
  --purple-color-4-ch:
    var(--purple-hue), var(--purple-saturation),
    var(--purple-lightness-4);
  --purple-color-5-ch:
    var(--purple-hue), var(--purple-saturation),
    var(--purple-lightness-5);
  --purple-color-6-ch:
    var(--purple-hue), var(--purple-saturation),
    var(--purple-lightness-6);
  --purple-color-7-ch:
    var(--purple-hue), var(--purple-saturation),
    var(--purple-lightness-7);
  --purple-color-8-ch:
    var(--purple-hue), var(--purple-saturation),
    var(--purple-lightness-8);
  --purple-color-9-ch:
    var(--purple-hue), var(--purple-saturation),
    var(--purple-lightness-9);
  --purple-color-10-ch:
    var(--purple-hue), var(--purple-saturation),
    var(--purple-lightness-10);
  --purple-gray-0: hsl(
    var(--purple-hue),
    var(--palette-gray-saturation),
    var(--purple-lightness-0)
  );
  --purple-gray-1: hsl(
    var(--purple-hue),
    var(--palette-gray-saturation),
    var(--purple-lightness-1)
  );
  --purple-gray-2: hsl(
    var(--purple-hue),
    var(--palette-gray-saturation),
    var(--purple-lightness-2)
  );
  --purple-gray-3: hsl(
    var(--purple-hue),
    var(--palette-gray-saturation),
    var(--purple-lightness-3)
  );
  --purple-gray-4: hsl(
    var(--purple-hue),
    var(--palette-gray-saturation),
    var(--purple-lightness-4)
  );
  --purple-gray-5: hsl(
    var(--purple-hue),
    var(--palette-gray-saturation),
    var(--purple-lightness-5)
  );
  --purple-gray-6: hsl(
    var(--purple-hue),
    var(--palette-gray-saturation),
    var(--purple-lightness-6)
  );
  --purple-gray-7: hsl(
    var(--purple-hue),
    var(--palette-gray-saturation),
    var(--purple-lightness-7)
  );
  --purple-gray-8: hsl(
    var(--purple-hue),
    var(--palette-gray-saturation),
    var(--purple-lightness-8)
  );
  --purple-gray-9: hsl(
    var(--purple-hue),
    var(--palette-gray-saturation),
    var(--purple-lightness-9)
  );
  --purple-gray-10: hsl(
    var(--purple-hue),
    var(--palette-gray-saturation),
    var(--purple-lightness-10)
  );
  --purple-accent-light-color: hsl(
    var(--purple-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --purple-accent-dark-color: hsl(
    var(--purple-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --purple-accent-0: var(--purple-accent-dark-color);
  --purple-accent-1: var(--purple-accent-dark-color);
  --purple-accent-2: var(--purple-accent-dark-color);
  --purple-accent-3: var(--purple-accent-dark-color);
  --purple-accent-4: var(--purple-accent-dark-color);
  --purple-accent-5: var(--purple-accent-light-color);
  --purple-accent-6: var(--purple-accent-light-color);
  --purple-accent-7: var(--purple-accent-light-color);
  --purple-accent-8: var(--purple-accent-light-color);
  --purple-accent-9: var(--purple-accent-light-color);
  --purple-accent-10: var(--purple-accent-light-color);
  --purple-lighter: var(--purple-color-2);
  --purple-accent-lighter: var(--purple-accent-2);
  --purple-lighter-ch:
    var(--purple-hue), var(--purple-saturation),
    var(--purple-lightness-2);
  --purple-light: var(--purple-color-3);
  --purple-accent-light: var(--purple-accent-3);
  --purple-light-ch:
    var(--purple-hue), var(--purple-saturation),
    var(--purple-lightness-3);
  --purple-default: var(--purple-color-5);
  --purple-accent-default: var(--purple-accent-5);
  --purple-default-ch:
    var(--purple-hue), var(--purple-saturation),
    var(--purple-lightness-5);
  --purple-dark: var(--purple-color-7);
  --purple-accent-dark: var(--purple-accent-7);
  --purple-dark-ch:
    var(--purple-hue), var(--purple-saturation),
    var(--purple-lightness-7);
  --purple-darker: var(--purple-color-9);
  --purple-accent-darker: var(--purple-accent-9);
  --purple-darker-ch:
    var(--purple-hue), var(--purple-saturation),
    var(--purple-lightness-9);
}

.purple {
  --palette-hue: var(--purple-hue);
  --palette-saturation: var(--purple-saturation);
  --palette-accent-light-color: var(
    --purple-accent-light-color
  );
  --palette-accent-dark-color: var(
    --purple-accent-dark-color
  );
  --palette-lightness-0: var(
    --purple-lightness-0
  );
  --palette-color-0: var(--purple-color-0);
  --palette-color-0-ch: var(
    --purple-color-0-ch
  );
  --palette-gray-0: var(--purple-gray-0);
  --palette-accent-0: var(--purple-accent-0);
  --palette-lightness-1: var(
    --purple-lightness-1
  );
  --palette-color-1: var(--purple-color-1);
  --palette-color-1-ch: var(
    --purple-color-1-ch
  );
  --palette-gray-1: var(--purple-gray-1);
  --palette-accent-1: var(--purple-accent-1);
  --palette-lightness-2: var(
    --purple-lightness-2
  );
  --palette-color-2: var(--purple-color-2);
  --palette-color-2-ch: var(
    --purple-color-2-ch
  );
  --palette-gray-2: var(--purple-gray-2);
  --palette-accent-2: var(--purple-accent-2);
  --palette-lightness-3: var(
    --purple-lightness-3
  );
  --palette-color-3: var(--purple-color-3);
  --palette-color-3-ch: var(
    --purple-color-3-ch
  );
  --palette-gray-3: var(--purple-gray-3);
  --palette-accent-3: var(--purple-accent-3);
  --palette-lightness-4: var(
    --purple-lightness-4
  );
  --palette-color-4: var(--purple-color-4);
  --palette-color-4-ch: var(
    --purple-color-4-ch
  );
  --palette-gray-4: var(--purple-gray-4);
  --palette-accent-4: var(--purple-accent-4);
  --palette-lightness-5: var(
    --purple-lightness-5
  );
  --palette-color-5: var(--purple-color-5);
  --palette-color-5-ch: var(
    --purple-color-5-ch
  );
  --palette-gray-5: var(--purple-gray-5);
  --palette-accent-5: var(--purple-accent-5);
  --palette-lightness-6: var(
    --purple-lightness-6
  );
  --palette-color-6: var(--purple-color-6);
  --palette-color-6-ch: var(
    --purple-color-6-ch
  );
  --palette-gray-6: var(--purple-gray-6);
  --palette-accent-6: var(--purple-accent-6);
  --palette-lightness-7: var(
    --purple-lightness-7
  );
  --palette-color-7: var(--purple-color-7);
  --palette-color-7-ch: var(
    --purple-color-7-ch
  );
  --palette-gray-7: var(--purple-gray-7);
  --palette-accent-7: var(--purple-accent-7);
  --palette-lightness-8: var(
    --purple-lightness-8
  );
  --palette-color-8: var(--purple-color-8);
  --palette-color-8-ch: var(
    --purple-color-8-ch
  );
  --palette-gray-8: var(--purple-gray-8);
  --palette-accent-8: var(--purple-accent-8);
  --palette-lightness-9: var(
    --purple-lightness-9
  );
  --palette-color-9: var(--purple-color-9);
  --palette-color-9-ch: var(
    --purple-color-9-ch
  );
  --palette-gray-9: var(--purple-gray-9);
  --palette-accent-9: var(--purple-accent-9);
  --palette-lightness-10: var(
    --purple-lightness-10
  );
  --palette-color-10: var(--purple-color-10);
  --palette-color-10-ch: var(
    --purple-color-10-ch
  );
  --palette-gray-10: var(--purple-gray-10);
  --palette-accent-10: var(--purple-accent-10);
  --palette-lighter: var(--purple-lighter);
  --palette-accent-lighter: var(
    --purple-accent-lighter
  );
  --palette-lighter-ch: var(
    --purple-lighter-ch
  );
  --palette-light: var(--purple-light);
  --palette-accent-light: var(
    --purple-accent-light
  );
  --palette-light-ch: var(
    --purple-light-ch
  );
  --palette-default: var(--purple-default);
  --palette-accent-default: var(
    --purple-accent-default
  );
  --palette-default-ch: var(
    --purple-default-ch
  );
  --palette-dark: var(--purple-dark);
  --palette-accent-dark: var(
    --purple-accent-dark
  );
  --palette-dark-ch: var(
    --purple-dark-ch
  );
  --palette-darker: var(--purple-darker);
  --palette-accent-darker: var(
    --purple-accent-darker
  );
  --palette-darker-ch: var(
    --purple-darker-ch
  );
}

:root {
  --pink-hue: 330;
  --pink-saturation: 100%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 55%;
  --palette-gray-saturation: 5%;
  --pink-lightness-0: 97%;
  --pink-lightness-1: 93%;
  --pink-lightness-2: 85%;
  --pink-lightness-3: 75%;
  --pink-lightness-4: 65%;
  --pink-lightness-5: 50%;
  --pink-lightness-6: 42%;
  --pink-lightness-7: 34%;
  --pink-lightness-8: 26%;
  --pink-lightness-9: 18%;
  --pink-lightness-10: 10%;
  --pink-color-0: hsl(
    var(--pink-hue),
    var(--pink-saturation),
    var(--pink-lightness-0)
  );
  --pink-color-1: hsl(
    var(--pink-hue),
    var(--pink-saturation),
    var(--pink-lightness-1)
  );
  --pink-color-2: hsl(
    var(--pink-hue),
    var(--pink-saturation),
    var(--pink-lightness-2)
  );
  --pink-color-3: hsl(
    var(--pink-hue),
    var(--pink-saturation),
    var(--pink-lightness-3)
  );
  --pink-color-4: hsl(
    var(--pink-hue),
    var(--pink-saturation),
    var(--pink-lightness-4)
  );
  --pink-color-5: hsl(
    var(--pink-hue),
    var(--pink-saturation),
    var(--pink-lightness-5)
  );
  --pink-color-6: hsl(
    var(--pink-hue),
    var(--pink-saturation),
    var(--pink-lightness-6)
  );
  --pink-color-7: hsl(
    var(--pink-hue),
    var(--pink-saturation),
    var(--pink-lightness-7)
  );
  --pink-color-8: hsl(
    var(--pink-hue),
    var(--pink-saturation),
    var(--pink-lightness-8)
  );
  --pink-color-9: hsl(
    var(--pink-hue),
    var(--pink-saturation),
    var(--pink-lightness-9)
  );
  --pink-color-10: hsl(
    var(--pink-hue),
    var(--pink-saturation),
    var(--pink-lightness-10)
  );
  --pink-color-0-ch:
    var(--pink-hue), var(--pink-saturation),
    var(--pink-lightness-0);
  --pink-color-1-ch:
    var(--pink-hue), var(--pink-saturation),
    var(--pink-lightness-1);
  --pink-color-2-ch:
    var(--pink-hue), var(--pink-saturation),
    var(--pink-lightness-2);
  --pink-color-3-ch:
    var(--pink-hue), var(--pink-saturation),
    var(--pink-lightness-3);
  --pink-color-4-ch:
    var(--pink-hue), var(--pink-saturation),
    var(--pink-lightness-4);
  --pink-color-5-ch:
    var(--pink-hue), var(--pink-saturation),
    var(--pink-lightness-5);
  --pink-color-6-ch:
    var(--pink-hue), var(--pink-saturation),
    var(--pink-lightness-6);
  --pink-color-7-ch:
    var(--pink-hue), var(--pink-saturation),
    var(--pink-lightness-7);
  --pink-color-8-ch:
    var(--pink-hue), var(--pink-saturation),
    var(--pink-lightness-8);
  --pink-color-9-ch:
    var(--pink-hue), var(--pink-saturation),
    var(--pink-lightness-9);
  --pink-color-10-ch:
    var(--pink-hue), var(--pink-saturation),
    var(--pink-lightness-10);
  --pink-gray-0: hsl(
    var(--pink-hue),
    var(--palette-gray-saturation),
    var(--pink-lightness-0)
  );
  --pink-gray-1: hsl(
    var(--pink-hue),
    var(--palette-gray-saturation),
    var(--pink-lightness-1)
  );
  --pink-gray-2: hsl(
    var(--pink-hue),
    var(--palette-gray-saturation),
    var(--pink-lightness-2)
  );
  --pink-gray-3: hsl(
    var(--pink-hue),
    var(--palette-gray-saturation),
    var(--pink-lightness-3)
  );
  --pink-gray-4: hsl(
    var(--pink-hue),
    var(--palette-gray-saturation),
    var(--pink-lightness-4)
  );
  --pink-gray-5: hsl(
    var(--pink-hue),
    var(--palette-gray-saturation),
    var(--pink-lightness-5)
  );
  --pink-gray-6: hsl(
    var(--pink-hue),
    var(--palette-gray-saturation),
    var(--pink-lightness-6)
  );
  --pink-gray-7: hsl(
    var(--pink-hue),
    var(--palette-gray-saturation),
    var(--pink-lightness-7)
  );
  --pink-gray-8: hsl(
    var(--pink-hue),
    var(--palette-gray-saturation),
    var(--pink-lightness-8)
  );
  --pink-gray-9: hsl(
    var(--pink-hue),
    var(--palette-gray-saturation),
    var(--pink-lightness-9)
  );
  --pink-gray-10: hsl(
    var(--pink-hue),
    var(--palette-gray-saturation),
    var(--pink-lightness-10)
  );
  --pink-accent-light-color: hsl(
    var(--pink-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --pink-accent-dark-color: hsl(
    var(--pink-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --pink-accent-0: var(--pink-accent-dark-color);
  --pink-accent-1: var(--pink-accent-dark-color);
  --pink-accent-2: var(--pink-accent-dark-color);
  --pink-accent-3: var(--pink-accent-dark-color);
  --pink-accent-4: var(--pink-accent-dark-color);
  --pink-accent-5: var(--pink-accent-light-color);
  --pink-accent-6: var(--pink-accent-light-color);
  --pink-accent-7: var(--pink-accent-light-color);
  --pink-accent-8: var(--pink-accent-light-color);
  --pink-accent-9: var(--pink-accent-light-color);
  --pink-accent-10: var(--pink-accent-light-color);
  --pink-lighter: var(--pink-color-2);
  --pink-accent-lighter: var(--pink-accent-2);
  --pink-lighter-ch:
    var(--pink-hue), var(--pink-saturation),
    var(--pink-lightness-2);
  --pink-light: var(--pink-color-3);
  --pink-accent-light: var(--pink-accent-3);
  --pink-light-ch:
    var(--pink-hue), var(--pink-saturation),
    var(--pink-lightness-3);
  --pink-default: var(--pink-color-5);
  --pink-accent-default: var(--pink-accent-5);
  --pink-default-ch:
    var(--pink-hue), var(--pink-saturation),
    var(--pink-lightness-5);
  --pink-dark: var(--pink-color-7);
  --pink-accent-dark: var(--pink-accent-7);
  --pink-dark-ch:
    var(--pink-hue), var(--pink-saturation),
    var(--pink-lightness-7);
  --pink-darker: var(--pink-color-9);
  --pink-accent-darker: var(--pink-accent-9);
  --pink-darker-ch:
    var(--pink-hue), var(--pink-saturation),
    var(--pink-lightness-9);
}

.pink {
  --palette-hue: var(--pink-hue);
  --palette-saturation: var(--pink-saturation);
  --palette-accent-light-color: var(
    --pink-accent-light-color
  );
  --palette-accent-dark-color: var(
    --pink-accent-dark-color
  );
  --palette-lightness-0: var(
    --pink-lightness-0
  );
  --palette-color-0: var(--pink-color-0);
  --palette-color-0-ch: var(
    --pink-color-0-ch
  );
  --palette-gray-0: var(--pink-gray-0);
  --palette-accent-0: var(--pink-accent-0);
  --palette-lightness-1: var(
    --pink-lightness-1
  );
  --palette-color-1: var(--pink-color-1);
  --palette-color-1-ch: var(
    --pink-color-1-ch
  );
  --palette-gray-1: var(--pink-gray-1);
  --palette-accent-1: var(--pink-accent-1);
  --palette-lightness-2: var(
    --pink-lightness-2
  );
  --palette-color-2: var(--pink-color-2);
  --palette-color-2-ch: var(
    --pink-color-2-ch
  );
  --palette-gray-2: var(--pink-gray-2);
  --palette-accent-2: var(--pink-accent-2);
  --palette-lightness-3: var(
    --pink-lightness-3
  );
  --palette-color-3: var(--pink-color-3);
  --palette-color-3-ch: var(
    --pink-color-3-ch
  );
  --palette-gray-3: var(--pink-gray-3);
  --palette-accent-3: var(--pink-accent-3);
  --palette-lightness-4: var(
    --pink-lightness-4
  );
  --palette-color-4: var(--pink-color-4);
  --palette-color-4-ch: var(
    --pink-color-4-ch
  );
  --palette-gray-4: var(--pink-gray-4);
  --palette-accent-4: var(--pink-accent-4);
  --palette-lightness-5: var(
    --pink-lightness-5
  );
  --palette-color-5: var(--pink-color-5);
  --palette-color-5-ch: var(
    --pink-color-5-ch
  );
  --palette-gray-5: var(--pink-gray-5);
  --palette-accent-5: var(--pink-accent-5);
  --palette-lightness-6: var(
    --pink-lightness-6
  );
  --palette-color-6: var(--pink-color-6);
  --palette-color-6-ch: var(
    --pink-color-6-ch
  );
  --palette-gray-6: var(--pink-gray-6);
  --palette-accent-6: var(--pink-accent-6);
  --palette-lightness-7: var(
    --pink-lightness-7
  );
  --palette-color-7: var(--pink-color-7);
  --palette-color-7-ch: var(
    --pink-color-7-ch
  );
  --palette-gray-7: var(--pink-gray-7);
  --palette-accent-7: var(--pink-accent-7);
  --palette-lightness-8: var(
    --pink-lightness-8
  );
  --palette-color-8: var(--pink-color-8);
  --palette-color-8-ch: var(
    --pink-color-8-ch
  );
  --palette-gray-8: var(--pink-gray-8);
  --palette-accent-8: var(--pink-accent-8);
  --palette-lightness-9: var(
    --pink-lightness-9
  );
  --palette-color-9: var(--pink-color-9);
  --palette-color-9-ch: var(
    --pink-color-9-ch
  );
  --palette-gray-9: var(--pink-gray-9);
  --palette-accent-9: var(--pink-accent-9);
  --palette-lightness-10: var(
    --pink-lightness-10
  );
  --palette-color-10: var(--pink-color-10);
  --palette-color-10-ch: var(
    --pink-color-10-ch
  );
  --palette-gray-10: var(--pink-gray-10);
  --palette-accent-10: var(--pink-accent-10);
  --palette-lighter: var(--pink-lighter);
  --palette-accent-lighter: var(
    --pink-accent-lighter
  );
  --palette-lighter-ch: var(
    --pink-lighter-ch
  );
  --palette-light: var(--pink-light);
  --palette-accent-light: var(
    --pink-accent-light
  );
  --palette-light-ch: var(
    --pink-light-ch
  );
  --palette-default: var(--pink-default);
  --palette-accent-default: var(
    --pink-accent-default
  );
  --palette-default-ch: var(
    --pink-default-ch
  );
  --palette-dark: var(--pink-dark);
  --palette-accent-dark: var(
    --pink-accent-dark
  );
  --palette-dark-ch: var(
    --pink-dark-ch
  );
  --palette-darker: var(--pink-darker);
  --palette-accent-darker: var(
    --pink-accent-darker
  );
  --palette-darker-ch: var(
    --pink-darker-ch
  );
}

:root {
  --primary-hue: var(--blue-hue);
  --primary-saturation: 80%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 50%;
  --palette-gray-saturation: 5%;
  --primary-lightness-0: 97%;
  --primary-lightness-1: 93%;
  --primary-lightness-2: 85%;
  --primary-lightness-3: 75%;
  --primary-lightness-4: 65%;
  --primary-lightness-5: 50%;
  --primary-lightness-6: 42%;
  --primary-lightness-7: 34%;
  --primary-lightness-8: 26%;
  --primary-lightness-9: 18%;
  --primary-lightness-10: 10%;
  --primary-color-0: hsl(
    var(--primary-hue),
    var(--primary-saturation),
    var(--primary-lightness-0)
  );
  --primary-color-1: hsl(
    var(--primary-hue),
    var(--primary-saturation),
    var(--primary-lightness-1)
  );
  --primary-color-2: hsl(
    var(--primary-hue),
    var(--primary-saturation),
    var(--primary-lightness-2)
  );
  --primary-color-3: hsl(
    var(--primary-hue),
    var(--primary-saturation),
    var(--primary-lightness-3)
  );
  --primary-color-4: hsl(
    var(--primary-hue),
    var(--primary-saturation),
    var(--primary-lightness-4)
  );
  --primary-color-5: hsl(
    var(--primary-hue),
    var(--primary-saturation),
    var(--primary-lightness-5)
  );
  --primary-color-6: hsl(
    var(--primary-hue),
    var(--primary-saturation),
    var(--primary-lightness-6)
  );
  --primary-color-7: hsl(
    var(--primary-hue),
    var(--primary-saturation),
    var(--primary-lightness-7)
  );
  --primary-color-8: hsl(
    var(--primary-hue),
    var(--primary-saturation),
    var(--primary-lightness-8)
  );
  --primary-color-9: hsl(
    var(--primary-hue),
    var(--primary-saturation),
    var(--primary-lightness-9)
  );
  --primary-color-10: hsl(
    var(--primary-hue),
    var(--primary-saturation),
    var(--primary-lightness-10)
  );
  --primary-color-0-ch:
    var(--primary-hue), var(--primary-saturation),
    var(--primary-lightness-0);
  --primary-color-1-ch:
    var(--primary-hue), var(--primary-saturation),
    var(--primary-lightness-1);
  --primary-color-2-ch:
    var(--primary-hue), var(--primary-saturation),
    var(--primary-lightness-2);
  --primary-color-3-ch:
    var(--primary-hue), var(--primary-saturation),
    var(--primary-lightness-3);
  --primary-color-4-ch:
    var(--primary-hue), var(--primary-saturation),
    var(--primary-lightness-4);
  --primary-color-5-ch:
    var(--primary-hue), var(--primary-saturation),
    var(--primary-lightness-5);
  --primary-color-6-ch:
    var(--primary-hue), var(--primary-saturation),
    var(--primary-lightness-6);
  --primary-color-7-ch:
    var(--primary-hue), var(--primary-saturation),
    var(--primary-lightness-7);
  --primary-color-8-ch:
    var(--primary-hue), var(--primary-saturation),
    var(--primary-lightness-8);
  --primary-color-9-ch:
    var(--primary-hue), var(--primary-saturation),
    var(--primary-lightness-9);
  --primary-color-10-ch:
    var(--primary-hue), var(--primary-saturation),
    var(--primary-lightness-10);
  --primary-gray-0: hsl(
    var(--primary-hue),
    var(--palette-gray-saturation),
    var(--primary-lightness-0)
  );
  --primary-gray-1: hsl(
    var(--primary-hue),
    var(--palette-gray-saturation),
    var(--primary-lightness-1)
  );
  --primary-gray-2: hsl(
    var(--primary-hue),
    var(--palette-gray-saturation),
    var(--primary-lightness-2)
  );
  --primary-gray-3: hsl(
    var(--primary-hue),
    var(--palette-gray-saturation),
    var(--primary-lightness-3)
  );
  --primary-gray-4: hsl(
    var(--primary-hue),
    var(--palette-gray-saturation),
    var(--primary-lightness-4)
  );
  --primary-gray-5: hsl(
    var(--primary-hue),
    var(--palette-gray-saturation),
    var(--primary-lightness-5)
  );
  --primary-gray-6: hsl(
    var(--primary-hue),
    var(--palette-gray-saturation),
    var(--primary-lightness-6)
  );
  --primary-gray-7: hsl(
    var(--primary-hue),
    var(--palette-gray-saturation),
    var(--primary-lightness-7)
  );
  --primary-gray-8: hsl(
    var(--primary-hue),
    var(--palette-gray-saturation),
    var(--primary-lightness-8)
  );
  --primary-gray-9: hsl(
    var(--primary-hue),
    var(--palette-gray-saturation),
    var(--primary-lightness-9)
  );
  --primary-gray-10: hsl(
    var(--primary-hue),
    var(--palette-gray-saturation),
    var(--primary-lightness-10)
  );
  --primary-accent-light-color: hsl(
    var(--primary-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --primary-accent-dark-color: hsl(
    var(--primary-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --primary-accent-0: var(--primary-accent-dark-color);
  --primary-accent-1: var(--primary-accent-dark-color);
  --primary-accent-2: var(--primary-accent-dark-color);
  --primary-accent-3: var(--primary-accent-dark-color);
  --primary-accent-4: var(--primary-accent-dark-color);
  --primary-accent-5: var(--primary-accent-light-color);
  --primary-accent-6: var(--primary-accent-light-color);
  --primary-accent-7: var(--primary-accent-light-color);
  --primary-accent-8: var(--primary-accent-light-color);
  --primary-accent-9: var(--primary-accent-light-color);
  --primary-accent-10: var(--primary-accent-light-color);
  --primary-lighter: var(--primary-color-2);
  --primary-accent-lighter: var(--primary-accent-2);
  --primary-lighter-ch:
    var(--primary-hue), var(--primary-saturation),
    var(--primary-lightness-2);
  --primary-light: var(--primary-color-3);
  --primary-accent-light: var(--primary-accent-3);
  --primary-light-ch:
    var(--primary-hue), var(--primary-saturation),
    var(--primary-lightness-3);
  --primary-default: var(--primary-color-6);
  --primary-accent-default: var(--primary-accent-6);
  --primary-default-ch:
    var(--primary-hue), var(--primary-saturation),
    var(--primary-lightness-6);
  --primary-dark: var(--primary-color-8);
  --primary-accent-dark: var(--primary-accent-8);
  --primary-dark-ch:
    var(--primary-hue), var(--primary-saturation),
    var(--primary-lightness-8);
  --primary-darker: var(--primary-color-9);
  --primary-accent-darker: var(--primary-accent-9);
  --primary-darker-ch:
    var(--primary-hue), var(--primary-saturation),
    var(--primary-lightness-9);
}

.primary {
  --palette-hue: var(--primary-hue);
  --palette-saturation: var(--primary-saturation);
  --palette-accent-light-color: var(
    --primary-accent-light-color
  );
  --palette-accent-dark-color: var(
    --primary-accent-dark-color
  );
  --palette-lightness-0: var(
    --primary-lightness-0
  );
  --palette-color-0: var(--primary-color-0);
  --palette-color-0-ch: var(
    --primary-color-0-ch
  );
  --palette-gray-0: var(--primary-gray-0);
  --palette-accent-0: var(--primary-accent-0);
  --palette-lightness-1: var(
    --primary-lightness-1
  );
  --palette-color-1: var(--primary-color-1);
  --palette-color-1-ch: var(
    --primary-color-1-ch
  );
  --palette-gray-1: var(--primary-gray-1);
  --palette-accent-1: var(--primary-accent-1);
  --palette-lightness-2: var(
    --primary-lightness-2
  );
  --palette-color-2: var(--primary-color-2);
  --palette-color-2-ch: var(
    --primary-color-2-ch
  );
  --palette-gray-2: var(--primary-gray-2);
  --palette-accent-2: var(--primary-accent-2);
  --palette-lightness-3: var(
    --primary-lightness-3
  );
  --palette-color-3: var(--primary-color-3);
  --palette-color-3-ch: var(
    --primary-color-3-ch
  );
  --palette-gray-3: var(--primary-gray-3);
  --palette-accent-3: var(--primary-accent-3);
  --palette-lightness-4: var(
    --primary-lightness-4
  );
  --palette-color-4: var(--primary-color-4);
  --palette-color-4-ch: var(
    --primary-color-4-ch
  );
  --palette-gray-4: var(--primary-gray-4);
  --palette-accent-4: var(--primary-accent-4);
  --palette-lightness-5: var(
    --primary-lightness-5
  );
  --palette-color-5: var(--primary-color-5);
  --palette-color-5-ch: var(
    --primary-color-5-ch
  );
  --palette-gray-5: var(--primary-gray-5);
  --palette-accent-5: var(--primary-accent-5);
  --palette-lightness-6: var(
    --primary-lightness-6
  );
  --palette-color-6: var(--primary-color-6);
  --palette-color-6-ch: var(
    --primary-color-6-ch
  );
  --palette-gray-6: var(--primary-gray-6);
  --palette-accent-6: var(--primary-accent-6);
  --palette-lightness-7: var(
    --primary-lightness-7
  );
  --palette-color-7: var(--primary-color-7);
  --palette-color-7-ch: var(
    --primary-color-7-ch
  );
  --palette-gray-7: var(--primary-gray-7);
  --palette-accent-7: var(--primary-accent-7);
  --palette-lightness-8: var(
    --primary-lightness-8
  );
  --palette-color-8: var(--primary-color-8);
  --palette-color-8-ch: var(
    --primary-color-8-ch
  );
  --palette-gray-8: var(--primary-gray-8);
  --palette-accent-8: var(--primary-accent-8);
  --palette-lightness-9: var(
    --primary-lightness-9
  );
  --palette-color-9: var(--primary-color-9);
  --palette-color-9-ch: var(
    --primary-color-9-ch
  );
  --palette-gray-9: var(--primary-gray-9);
  --palette-accent-9: var(--primary-accent-9);
  --palette-lightness-10: var(
    --primary-lightness-10
  );
  --palette-color-10: var(--primary-color-10);
  --palette-color-10-ch: var(
    --primary-color-10-ch
  );
  --palette-gray-10: var(--primary-gray-10);
  --palette-accent-10: var(--primary-accent-10);
  --palette-lighter: var(--primary-lighter);
  --palette-accent-lighter: var(
    --primary-accent-lighter
  );
  --palette-lighter-ch: var(
    --primary-lighter-ch
  );
  --palette-light: var(--primary-light);
  --palette-accent-light: var(
    --primary-accent-light
  );
  --palette-light-ch: var(
    --primary-light-ch
  );
  --palette-default: var(--primary-default);
  --palette-accent-default: var(
    --primary-accent-default
  );
  --palette-default-ch: var(
    --primary-default-ch
  );
  --palette-dark: var(--primary-dark);
  --palette-accent-dark: var(
    --primary-accent-dark
  );
  --palette-dark-ch: var(
    --primary-dark-ch
  );
  --palette-darker: var(--primary-darker);
  --palette-accent-darker: var(
    --primary-accent-darker
  );
  --palette-darker-ch: var(
    --primary-darker-ch
  );
}

:root {
  --secondary-hue: var(--pink-hue);
  --secondary-saturation: 80%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 55%;
  --palette-gray-saturation: 5%;
  --secondary-lightness-0: 97%;
  --secondary-lightness-1: 93%;
  --secondary-lightness-2: 85%;
  --secondary-lightness-3: 75%;
  --secondary-lightness-4: 65%;
  --secondary-lightness-5: 50%;
  --secondary-lightness-6: 42%;
  --secondary-lightness-7: 34%;
  --secondary-lightness-8: 26%;
  --secondary-lightness-9: 18%;
  --secondary-lightness-10: 10%;
  --secondary-color-0: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    var(--secondary-lightness-0)
  );
  --secondary-color-1: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    var(--secondary-lightness-1)
  );
  --secondary-color-2: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    var(--secondary-lightness-2)
  );
  --secondary-color-3: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    var(--secondary-lightness-3)
  );
  --secondary-color-4: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    var(--secondary-lightness-4)
  );
  --secondary-color-5: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    var(--secondary-lightness-5)
  );
  --secondary-color-6: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    var(--secondary-lightness-6)
  );
  --secondary-color-7: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    var(--secondary-lightness-7)
  );
  --secondary-color-8: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    var(--secondary-lightness-8)
  );
  --secondary-color-9: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    var(--secondary-lightness-9)
  );
  --secondary-color-10: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    var(--secondary-lightness-10)
  );
  --secondary-color-0-ch:
    var(--secondary-hue), var(--secondary-saturation),
    var(--secondary-lightness-0);
  --secondary-color-1-ch:
    var(--secondary-hue), var(--secondary-saturation),
    var(--secondary-lightness-1);
  --secondary-color-2-ch:
    var(--secondary-hue), var(--secondary-saturation),
    var(--secondary-lightness-2);
  --secondary-color-3-ch:
    var(--secondary-hue), var(--secondary-saturation),
    var(--secondary-lightness-3);
  --secondary-color-4-ch:
    var(--secondary-hue), var(--secondary-saturation),
    var(--secondary-lightness-4);
  --secondary-color-5-ch:
    var(--secondary-hue), var(--secondary-saturation),
    var(--secondary-lightness-5);
  --secondary-color-6-ch:
    var(--secondary-hue), var(--secondary-saturation),
    var(--secondary-lightness-6);
  --secondary-color-7-ch:
    var(--secondary-hue), var(--secondary-saturation),
    var(--secondary-lightness-7);
  --secondary-color-8-ch:
    var(--secondary-hue), var(--secondary-saturation),
    var(--secondary-lightness-8);
  --secondary-color-9-ch:
    var(--secondary-hue), var(--secondary-saturation),
    var(--secondary-lightness-9);
  --secondary-color-10-ch:
    var(--secondary-hue), var(--secondary-saturation),
    var(--secondary-lightness-10);
  --secondary-gray-0: hsl(
    var(--secondary-hue),
    var(--palette-gray-saturation),
    var(--secondary-lightness-0)
  );
  --secondary-gray-1: hsl(
    var(--secondary-hue),
    var(--palette-gray-saturation),
    var(--secondary-lightness-1)
  );
  --secondary-gray-2: hsl(
    var(--secondary-hue),
    var(--palette-gray-saturation),
    var(--secondary-lightness-2)
  );
  --secondary-gray-3: hsl(
    var(--secondary-hue),
    var(--palette-gray-saturation),
    var(--secondary-lightness-3)
  );
  --secondary-gray-4: hsl(
    var(--secondary-hue),
    var(--palette-gray-saturation),
    var(--secondary-lightness-4)
  );
  --secondary-gray-5: hsl(
    var(--secondary-hue),
    var(--palette-gray-saturation),
    var(--secondary-lightness-5)
  );
  --secondary-gray-6: hsl(
    var(--secondary-hue),
    var(--palette-gray-saturation),
    var(--secondary-lightness-6)
  );
  --secondary-gray-7: hsl(
    var(--secondary-hue),
    var(--palette-gray-saturation),
    var(--secondary-lightness-7)
  );
  --secondary-gray-8: hsl(
    var(--secondary-hue),
    var(--palette-gray-saturation),
    var(--secondary-lightness-8)
  );
  --secondary-gray-9: hsl(
    var(--secondary-hue),
    var(--palette-gray-saturation),
    var(--secondary-lightness-9)
  );
  --secondary-gray-10: hsl(
    var(--secondary-hue),
    var(--palette-gray-saturation),
    var(--secondary-lightness-10)
  );
  --secondary-accent-light-color: hsl(
    var(--secondary-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --secondary-accent-dark-color: hsl(
    var(--secondary-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --secondary-accent-0: var(--secondary-accent-dark-color);
  --secondary-accent-1: var(--secondary-accent-dark-color);
  --secondary-accent-2: var(--secondary-accent-dark-color);
  --secondary-accent-3: var(--secondary-accent-dark-color);
  --secondary-accent-4: var(--secondary-accent-dark-color);
  --secondary-accent-5: var(--secondary-accent-light-color);
  --secondary-accent-6: var(--secondary-accent-light-color);
  --secondary-accent-7: var(--secondary-accent-light-color);
  --secondary-accent-8: var(--secondary-accent-light-color);
  --secondary-accent-9: var(--secondary-accent-light-color);
  --secondary-accent-10: var(--secondary-accent-light-color);
  --secondary-lighter: var(--secondary-color-2);
  --secondary-accent-lighter: var(--secondary-accent-2);
  --secondary-lighter-ch:
    var(--secondary-hue), var(--secondary-saturation),
    var(--secondary-lightness-2);
  --secondary-light: var(--secondary-color-3);
  --secondary-accent-light: var(--secondary-accent-3);
  --secondary-light-ch:
    var(--secondary-hue), var(--secondary-saturation),
    var(--secondary-lightness-3);
  --secondary-default: var(--secondary-color-5);
  --secondary-accent-default: var(--secondary-accent-5);
  --secondary-default-ch:
    var(--secondary-hue), var(--secondary-saturation),
    var(--secondary-lightness-5);
  --secondary-dark: var(--secondary-color-7);
  --secondary-accent-dark: var(--secondary-accent-7);
  --secondary-dark-ch:
    var(--secondary-hue), var(--secondary-saturation),
    var(--secondary-lightness-7);
  --secondary-darker: var(--secondary-color-9);
  --secondary-accent-darker: var(--secondary-accent-9);
  --secondary-darker-ch:
    var(--secondary-hue), var(--secondary-saturation),
    var(--secondary-lightness-9);
}

.secondary {
  --palette-hue: var(--secondary-hue);
  --palette-saturation: var(--secondary-saturation);
  --palette-accent-light-color: var(
    --secondary-accent-light-color
  );
  --palette-accent-dark-color: var(
    --secondary-accent-dark-color
  );
  --palette-lightness-0: var(
    --secondary-lightness-0
  );
  --palette-color-0: var(--secondary-color-0);
  --palette-color-0-ch: var(
    --secondary-color-0-ch
  );
  --palette-gray-0: var(--secondary-gray-0);
  --palette-accent-0: var(--secondary-accent-0);
  --palette-lightness-1: var(
    --secondary-lightness-1
  );
  --palette-color-1: var(--secondary-color-1);
  --palette-color-1-ch: var(
    --secondary-color-1-ch
  );
  --palette-gray-1: var(--secondary-gray-1);
  --palette-accent-1: var(--secondary-accent-1);
  --palette-lightness-2: var(
    --secondary-lightness-2
  );
  --palette-color-2: var(--secondary-color-2);
  --palette-color-2-ch: var(
    --secondary-color-2-ch
  );
  --palette-gray-2: var(--secondary-gray-2);
  --palette-accent-2: var(--secondary-accent-2);
  --palette-lightness-3: var(
    --secondary-lightness-3
  );
  --palette-color-3: var(--secondary-color-3);
  --palette-color-3-ch: var(
    --secondary-color-3-ch
  );
  --palette-gray-3: var(--secondary-gray-3);
  --palette-accent-3: var(--secondary-accent-3);
  --palette-lightness-4: var(
    --secondary-lightness-4
  );
  --palette-color-4: var(--secondary-color-4);
  --palette-color-4-ch: var(
    --secondary-color-4-ch
  );
  --palette-gray-4: var(--secondary-gray-4);
  --palette-accent-4: var(--secondary-accent-4);
  --palette-lightness-5: var(
    --secondary-lightness-5
  );
  --palette-color-5: var(--secondary-color-5);
  --palette-color-5-ch: var(
    --secondary-color-5-ch
  );
  --palette-gray-5: var(--secondary-gray-5);
  --palette-accent-5: var(--secondary-accent-5);
  --palette-lightness-6: var(
    --secondary-lightness-6
  );
  --palette-color-6: var(--secondary-color-6);
  --palette-color-6-ch: var(
    --secondary-color-6-ch
  );
  --palette-gray-6: var(--secondary-gray-6);
  --palette-accent-6: var(--secondary-accent-6);
  --palette-lightness-7: var(
    --secondary-lightness-7
  );
  --palette-color-7: var(--secondary-color-7);
  --palette-color-7-ch: var(
    --secondary-color-7-ch
  );
  --palette-gray-7: var(--secondary-gray-7);
  --palette-accent-7: var(--secondary-accent-7);
  --palette-lightness-8: var(
    --secondary-lightness-8
  );
  --palette-color-8: var(--secondary-color-8);
  --palette-color-8-ch: var(
    --secondary-color-8-ch
  );
  --palette-gray-8: var(--secondary-gray-8);
  --palette-accent-8: var(--secondary-accent-8);
  --palette-lightness-9: var(
    --secondary-lightness-9
  );
  --palette-color-9: var(--secondary-color-9);
  --palette-color-9-ch: var(
    --secondary-color-9-ch
  );
  --palette-gray-9: var(--secondary-gray-9);
  --palette-accent-9: var(--secondary-accent-9);
  --palette-lightness-10: var(
    --secondary-lightness-10
  );
  --palette-color-10: var(--secondary-color-10);
  --palette-color-10-ch: var(
    --secondary-color-10-ch
  );
  --palette-gray-10: var(--secondary-gray-10);
  --palette-accent-10: var(--secondary-accent-10);
  --palette-lighter: var(--secondary-lighter);
  --palette-accent-lighter: var(
    --secondary-accent-lighter
  );
  --palette-lighter-ch: var(
    --secondary-lighter-ch
  );
  --palette-light: var(--secondary-light);
  --palette-accent-light: var(
    --secondary-accent-light
  );
  --palette-light-ch: var(
    --secondary-light-ch
  );
  --palette-default: var(--secondary-default);
  --palette-accent-default: var(
    --secondary-accent-default
  );
  --palette-default-ch: var(
    --secondary-default-ch
  );
  --palette-dark: var(--secondary-dark);
  --palette-accent-dark: var(
    --secondary-accent-dark
  );
  --palette-dark-ch: var(
    --secondary-dark-ch
  );
  --palette-darker: var(--secondary-darker);
  --palette-accent-darker: var(
    --secondary-accent-darker
  );
  --palette-darker-ch: var(
    --secondary-darker-ch
  );
}

:root {
  --tertiary-hue: var(--teal-hue);
  --tertiary-saturation: 60%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 40%;
  --palette-gray-saturation: 5%;
  --tertiary-lightness-0: 97%;
  --tertiary-lightness-1: 93%;
  --tertiary-lightness-2: 85%;
  --tertiary-lightness-3: 75%;
  --tertiary-lightness-4: 65%;
  --tertiary-lightness-5: 50%;
  --tertiary-lightness-6: 42%;
  --tertiary-lightness-7: 34%;
  --tertiary-lightness-8: 26%;
  --tertiary-lightness-9: 18%;
  --tertiary-lightness-10: 10%;
  --tertiary-color-0: hsl(
    var(--tertiary-hue),
    var(--tertiary-saturation),
    var(--tertiary-lightness-0)
  );
  --tertiary-color-1: hsl(
    var(--tertiary-hue),
    var(--tertiary-saturation),
    var(--tertiary-lightness-1)
  );
  --tertiary-color-2: hsl(
    var(--tertiary-hue),
    var(--tertiary-saturation),
    var(--tertiary-lightness-2)
  );
  --tertiary-color-3: hsl(
    var(--tertiary-hue),
    var(--tertiary-saturation),
    var(--tertiary-lightness-3)
  );
  --tertiary-color-4: hsl(
    var(--tertiary-hue),
    var(--tertiary-saturation),
    var(--tertiary-lightness-4)
  );
  --tertiary-color-5: hsl(
    var(--tertiary-hue),
    var(--tertiary-saturation),
    var(--tertiary-lightness-5)
  );
  --tertiary-color-6: hsl(
    var(--tertiary-hue),
    var(--tertiary-saturation),
    var(--tertiary-lightness-6)
  );
  --tertiary-color-7: hsl(
    var(--tertiary-hue),
    var(--tertiary-saturation),
    var(--tertiary-lightness-7)
  );
  --tertiary-color-8: hsl(
    var(--tertiary-hue),
    var(--tertiary-saturation),
    var(--tertiary-lightness-8)
  );
  --tertiary-color-9: hsl(
    var(--tertiary-hue),
    var(--tertiary-saturation),
    var(--tertiary-lightness-9)
  );
  --tertiary-color-10: hsl(
    var(--tertiary-hue),
    var(--tertiary-saturation),
    var(--tertiary-lightness-10)
  );
  --tertiary-color-0-ch:
    var(--tertiary-hue), var(--tertiary-saturation),
    var(--tertiary-lightness-0);
  --tertiary-color-1-ch:
    var(--tertiary-hue), var(--tertiary-saturation),
    var(--tertiary-lightness-1);
  --tertiary-color-2-ch:
    var(--tertiary-hue), var(--tertiary-saturation),
    var(--tertiary-lightness-2);
  --tertiary-color-3-ch:
    var(--tertiary-hue), var(--tertiary-saturation),
    var(--tertiary-lightness-3);
  --tertiary-color-4-ch:
    var(--tertiary-hue), var(--tertiary-saturation),
    var(--tertiary-lightness-4);
  --tertiary-color-5-ch:
    var(--tertiary-hue), var(--tertiary-saturation),
    var(--tertiary-lightness-5);
  --tertiary-color-6-ch:
    var(--tertiary-hue), var(--tertiary-saturation),
    var(--tertiary-lightness-6);
  --tertiary-color-7-ch:
    var(--tertiary-hue), var(--tertiary-saturation),
    var(--tertiary-lightness-7);
  --tertiary-color-8-ch:
    var(--tertiary-hue), var(--tertiary-saturation),
    var(--tertiary-lightness-8);
  --tertiary-color-9-ch:
    var(--tertiary-hue), var(--tertiary-saturation),
    var(--tertiary-lightness-9);
  --tertiary-color-10-ch:
    var(--tertiary-hue), var(--tertiary-saturation),
    var(--tertiary-lightness-10);
  --tertiary-gray-0: hsl(
    var(--tertiary-hue),
    var(--palette-gray-saturation),
    var(--tertiary-lightness-0)
  );
  --tertiary-gray-1: hsl(
    var(--tertiary-hue),
    var(--palette-gray-saturation),
    var(--tertiary-lightness-1)
  );
  --tertiary-gray-2: hsl(
    var(--tertiary-hue),
    var(--palette-gray-saturation),
    var(--tertiary-lightness-2)
  );
  --tertiary-gray-3: hsl(
    var(--tertiary-hue),
    var(--palette-gray-saturation),
    var(--tertiary-lightness-3)
  );
  --tertiary-gray-4: hsl(
    var(--tertiary-hue),
    var(--palette-gray-saturation),
    var(--tertiary-lightness-4)
  );
  --tertiary-gray-5: hsl(
    var(--tertiary-hue),
    var(--palette-gray-saturation),
    var(--tertiary-lightness-5)
  );
  --tertiary-gray-6: hsl(
    var(--tertiary-hue),
    var(--palette-gray-saturation),
    var(--tertiary-lightness-6)
  );
  --tertiary-gray-7: hsl(
    var(--tertiary-hue),
    var(--palette-gray-saturation),
    var(--tertiary-lightness-7)
  );
  --tertiary-gray-8: hsl(
    var(--tertiary-hue),
    var(--palette-gray-saturation),
    var(--tertiary-lightness-8)
  );
  --tertiary-gray-9: hsl(
    var(--tertiary-hue),
    var(--palette-gray-saturation),
    var(--tertiary-lightness-9)
  );
  --tertiary-gray-10: hsl(
    var(--tertiary-hue),
    var(--palette-gray-saturation),
    var(--tertiary-lightness-10)
  );
  --tertiary-accent-light-color: hsl(
    var(--tertiary-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --tertiary-accent-dark-color: hsl(
    var(--tertiary-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --tertiary-accent-0: var(--tertiary-accent-dark-color);
  --tertiary-accent-1: var(--tertiary-accent-dark-color);
  --tertiary-accent-2: var(--tertiary-accent-dark-color);
  --tertiary-accent-3: var(--tertiary-accent-dark-color);
  --tertiary-accent-4: var(--tertiary-accent-dark-color);
  --tertiary-accent-5: var(--tertiary-accent-dark-color);
  --tertiary-accent-6: var(--tertiary-accent-dark-color);
  --tertiary-accent-7: var(--tertiary-accent-light-color);
  --tertiary-accent-8: var(--tertiary-accent-light-color);
  --tertiary-accent-9: var(--tertiary-accent-light-color);
  --tertiary-accent-10: var(--tertiary-accent-light-color);
  --tertiary-lighter: var(--tertiary-color-2);
  --tertiary-accent-lighter: var(--tertiary-accent-2);
  --tertiary-lighter-ch:
    var(--tertiary-hue), var(--tertiary-saturation),
    var(--tertiary-lightness-2);
  --tertiary-light: var(--tertiary-color-4);
  --tertiary-accent-light: var(--tertiary-accent-4);
  --tertiary-light-ch:
    var(--tertiary-hue), var(--tertiary-saturation),
    var(--tertiary-lightness-4);
  --tertiary-default: var(--tertiary-color-7);
  --tertiary-accent-default: var(--tertiary-accent-7);
  --tertiary-default-ch:
    var(--tertiary-hue), var(--tertiary-saturation),
    var(--tertiary-lightness-7);
  --tertiary-dark: var(--tertiary-color-9);
  --tertiary-accent-dark: var(--tertiary-accent-9);
  --tertiary-dark-ch:
    var(--tertiary-hue), var(--tertiary-saturation),
    var(--tertiary-lightness-9);
  --tertiary-darker: var(--tertiary-color-10);
  --tertiary-accent-darker: var(--tertiary-accent-10);
  --tertiary-darker-ch:
    var(--tertiary-hue), var(--tertiary-saturation),
    var(--tertiary-lightness-10);
}

.tertiary {
  --palette-hue: var(--tertiary-hue);
  --palette-saturation: var(--tertiary-saturation);
  --palette-accent-light-color: var(
    --tertiary-accent-light-color
  );
  --palette-accent-dark-color: var(
    --tertiary-accent-dark-color
  );
  --palette-lightness-0: var(
    --tertiary-lightness-0
  );
  --palette-color-0: var(--tertiary-color-0);
  --palette-color-0-ch: var(
    --tertiary-color-0-ch
  );
  --palette-gray-0: var(--tertiary-gray-0);
  --palette-accent-0: var(--tertiary-accent-0);
  --palette-lightness-1: var(
    --tertiary-lightness-1
  );
  --palette-color-1: var(--tertiary-color-1);
  --palette-color-1-ch: var(
    --tertiary-color-1-ch
  );
  --palette-gray-1: var(--tertiary-gray-1);
  --palette-accent-1: var(--tertiary-accent-1);
  --palette-lightness-2: var(
    --tertiary-lightness-2
  );
  --palette-color-2: var(--tertiary-color-2);
  --palette-color-2-ch: var(
    --tertiary-color-2-ch
  );
  --palette-gray-2: var(--tertiary-gray-2);
  --palette-accent-2: var(--tertiary-accent-2);
  --palette-lightness-3: var(
    --tertiary-lightness-3
  );
  --palette-color-3: var(--tertiary-color-3);
  --palette-color-3-ch: var(
    --tertiary-color-3-ch
  );
  --palette-gray-3: var(--tertiary-gray-3);
  --palette-accent-3: var(--tertiary-accent-3);
  --palette-lightness-4: var(
    --tertiary-lightness-4
  );
  --palette-color-4: var(--tertiary-color-4);
  --palette-color-4-ch: var(
    --tertiary-color-4-ch
  );
  --palette-gray-4: var(--tertiary-gray-4);
  --palette-accent-4: var(--tertiary-accent-4);
  --palette-lightness-5: var(
    --tertiary-lightness-5
  );
  --palette-color-5: var(--tertiary-color-5);
  --palette-color-5-ch: var(
    --tertiary-color-5-ch
  );
  --palette-gray-5: var(--tertiary-gray-5);
  --palette-accent-5: var(--tertiary-accent-5);
  --palette-lightness-6: var(
    --tertiary-lightness-6
  );
  --palette-color-6: var(--tertiary-color-6);
  --palette-color-6-ch: var(
    --tertiary-color-6-ch
  );
  --palette-gray-6: var(--tertiary-gray-6);
  --palette-accent-6: var(--tertiary-accent-6);
  --palette-lightness-7: var(
    --tertiary-lightness-7
  );
  --palette-color-7: var(--tertiary-color-7);
  --palette-color-7-ch: var(
    --tertiary-color-7-ch
  );
  --palette-gray-7: var(--tertiary-gray-7);
  --palette-accent-7: var(--tertiary-accent-7);
  --palette-lightness-8: var(
    --tertiary-lightness-8
  );
  --palette-color-8: var(--tertiary-color-8);
  --palette-color-8-ch: var(
    --tertiary-color-8-ch
  );
  --palette-gray-8: var(--tertiary-gray-8);
  --palette-accent-8: var(--tertiary-accent-8);
  --palette-lightness-9: var(
    --tertiary-lightness-9
  );
  --palette-color-9: var(--tertiary-color-9);
  --palette-color-9-ch: var(
    --tertiary-color-9-ch
  );
  --palette-gray-9: var(--tertiary-gray-9);
  --palette-accent-9: var(--tertiary-accent-9);
  --palette-lightness-10: var(
    --tertiary-lightness-10
  );
  --palette-color-10: var(--tertiary-color-10);
  --palette-color-10-ch: var(
    --tertiary-color-10-ch
  );
  --palette-gray-10: var(--tertiary-gray-10);
  --palette-accent-10: var(--tertiary-accent-10);
  --palette-lighter: var(--tertiary-lighter);
  --palette-accent-lighter: var(
    --tertiary-accent-lighter
  );
  --palette-lighter-ch: var(
    --tertiary-lighter-ch
  );
  --palette-light: var(--tertiary-light);
  --palette-accent-light: var(
    --tertiary-accent-light
  );
  --palette-light-ch: var(
    --tertiary-light-ch
  );
  --palette-default: var(--tertiary-default);
  --palette-accent-default: var(
    --tertiary-accent-default
  );
  --palette-default-ch: var(
    --tertiary-default-ch
  );
  --palette-dark: var(--tertiary-dark);
  --palette-accent-dark: var(
    --tertiary-accent-dark
  );
  --palette-dark-ch: var(
    --tertiary-dark-ch
  );
  --palette-darker: var(--tertiary-darker);
  --palette-accent-darker: var(
    --tertiary-accent-darker
  );
  --palette-darker-ch: var(
    --tertiary-darker-ch
  );
}

:root {
  --success-hue: var(--green-hue);
  --success-saturation: 60%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 45%;
  --palette-gray-saturation: 5%;
  --success-lightness-0: 97%;
  --success-lightness-1: 93%;
  --success-lightness-2: 85%;
  --success-lightness-3: 75%;
  --success-lightness-4: 65%;
  --success-lightness-5: 50%;
  --success-lightness-6: 42%;
  --success-lightness-7: 34%;
  --success-lightness-8: 26%;
  --success-lightness-9: 18%;
  --success-lightness-10: 10%;
  --success-color-0: hsl(
    var(--success-hue),
    var(--success-saturation),
    var(--success-lightness-0)
  );
  --success-color-1: hsl(
    var(--success-hue),
    var(--success-saturation),
    var(--success-lightness-1)
  );
  --success-color-2: hsl(
    var(--success-hue),
    var(--success-saturation),
    var(--success-lightness-2)
  );
  --success-color-3: hsl(
    var(--success-hue),
    var(--success-saturation),
    var(--success-lightness-3)
  );
  --success-color-4: hsl(
    var(--success-hue),
    var(--success-saturation),
    var(--success-lightness-4)
  );
  --success-color-5: hsl(
    var(--success-hue),
    var(--success-saturation),
    var(--success-lightness-5)
  );
  --success-color-6: hsl(
    var(--success-hue),
    var(--success-saturation),
    var(--success-lightness-6)
  );
  --success-color-7: hsl(
    var(--success-hue),
    var(--success-saturation),
    var(--success-lightness-7)
  );
  --success-color-8: hsl(
    var(--success-hue),
    var(--success-saturation),
    var(--success-lightness-8)
  );
  --success-color-9: hsl(
    var(--success-hue),
    var(--success-saturation),
    var(--success-lightness-9)
  );
  --success-color-10: hsl(
    var(--success-hue),
    var(--success-saturation),
    var(--success-lightness-10)
  );
  --success-color-0-ch:
    var(--success-hue), var(--success-saturation),
    var(--success-lightness-0);
  --success-color-1-ch:
    var(--success-hue), var(--success-saturation),
    var(--success-lightness-1);
  --success-color-2-ch:
    var(--success-hue), var(--success-saturation),
    var(--success-lightness-2);
  --success-color-3-ch:
    var(--success-hue), var(--success-saturation),
    var(--success-lightness-3);
  --success-color-4-ch:
    var(--success-hue), var(--success-saturation),
    var(--success-lightness-4);
  --success-color-5-ch:
    var(--success-hue), var(--success-saturation),
    var(--success-lightness-5);
  --success-color-6-ch:
    var(--success-hue), var(--success-saturation),
    var(--success-lightness-6);
  --success-color-7-ch:
    var(--success-hue), var(--success-saturation),
    var(--success-lightness-7);
  --success-color-8-ch:
    var(--success-hue), var(--success-saturation),
    var(--success-lightness-8);
  --success-color-9-ch:
    var(--success-hue), var(--success-saturation),
    var(--success-lightness-9);
  --success-color-10-ch:
    var(--success-hue), var(--success-saturation),
    var(--success-lightness-10);
  --success-gray-0: hsl(
    var(--success-hue),
    var(--palette-gray-saturation),
    var(--success-lightness-0)
  );
  --success-gray-1: hsl(
    var(--success-hue),
    var(--palette-gray-saturation),
    var(--success-lightness-1)
  );
  --success-gray-2: hsl(
    var(--success-hue),
    var(--palette-gray-saturation),
    var(--success-lightness-2)
  );
  --success-gray-3: hsl(
    var(--success-hue),
    var(--palette-gray-saturation),
    var(--success-lightness-3)
  );
  --success-gray-4: hsl(
    var(--success-hue),
    var(--palette-gray-saturation),
    var(--success-lightness-4)
  );
  --success-gray-5: hsl(
    var(--success-hue),
    var(--palette-gray-saturation),
    var(--success-lightness-5)
  );
  --success-gray-6: hsl(
    var(--success-hue),
    var(--palette-gray-saturation),
    var(--success-lightness-6)
  );
  --success-gray-7: hsl(
    var(--success-hue),
    var(--palette-gray-saturation),
    var(--success-lightness-7)
  );
  --success-gray-8: hsl(
    var(--success-hue),
    var(--palette-gray-saturation),
    var(--success-lightness-8)
  );
  --success-gray-9: hsl(
    var(--success-hue),
    var(--palette-gray-saturation),
    var(--success-lightness-9)
  );
  --success-gray-10: hsl(
    var(--success-hue),
    var(--palette-gray-saturation),
    var(--success-lightness-10)
  );
  --success-accent-light-color: hsl(
    var(--success-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --success-accent-dark-color: hsl(
    var(--success-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --success-accent-0: var(--success-accent-dark-color);
  --success-accent-1: var(--success-accent-dark-color);
  --success-accent-2: var(--success-accent-dark-color);
  --success-accent-3: var(--success-accent-dark-color);
  --success-accent-4: var(--success-accent-dark-color);
  --success-accent-5: var(--success-accent-dark-color);
  --success-accent-6: var(--success-accent-light-color);
  --success-accent-7: var(--success-accent-light-color);
  --success-accent-8: var(--success-accent-light-color);
  --success-accent-9: var(--success-accent-light-color);
  --success-accent-10: var(--success-accent-light-color);
  --success-lighter: var(--success-color-2);
  --success-accent-lighter: var(--success-accent-2);
  --success-lighter-ch:
    var(--success-hue), var(--success-saturation),
    var(--success-lightness-2);
  --success-light: var(--success-color-4);
  --success-accent-light: var(--success-accent-4);
  --success-light-ch:
    var(--success-hue), var(--success-saturation),
    var(--success-lightness-4);
  --success-default: var(--success-color-7);
  --success-accent-default: var(--success-accent-7);
  --success-default-ch:
    var(--success-hue), var(--success-saturation),
    var(--success-lightness-7);
  --success-dark: var(--success-color-9);
  --success-accent-dark: var(--success-accent-9);
  --success-dark-ch:
    var(--success-hue), var(--success-saturation),
    var(--success-lightness-9);
  --success-darker: var(--success-color-10);
  --success-accent-darker: var(--success-accent-10);
  --success-darker-ch:
    var(--success-hue), var(--success-saturation),
    var(--success-lightness-10);
}

.success {
  --palette-hue: var(--success-hue);
  --palette-saturation: var(--success-saturation);
  --palette-accent-light-color: var(
    --success-accent-light-color
  );
  --palette-accent-dark-color: var(
    --success-accent-dark-color
  );
  --palette-lightness-0: var(
    --success-lightness-0
  );
  --palette-color-0: var(--success-color-0);
  --palette-color-0-ch: var(
    --success-color-0-ch
  );
  --palette-gray-0: var(--success-gray-0);
  --palette-accent-0: var(--success-accent-0);
  --palette-lightness-1: var(
    --success-lightness-1
  );
  --palette-color-1: var(--success-color-1);
  --palette-color-1-ch: var(
    --success-color-1-ch
  );
  --palette-gray-1: var(--success-gray-1);
  --palette-accent-1: var(--success-accent-1);
  --palette-lightness-2: var(
    --success-lightness-2
  );
  --palette-color-2: var(--success-color-2);
  --palette-color-2-ch: var(
    --success-color-2-ch
  );
  --palette-gray-2: var(--success-gray-2);
  --palette-accent-2: var(--success-accent-2);
  --palette-lightness-3: var(
    --success-lightness-3
  );
  --palette-color-3: var(--success-color-3);
  --palette-color-3-ch: var(
    --success-color-3-ch
  );
  --palette-gray-3: var(--success-gray-3);
  --palette-accent-3: var(--success-accent-3);
  --palette-lightness-4: var(
    --success-lightness-4
  );
  --palette-color-4: var(--success-color-4);
  --palette-color-4-ch: var(
    --success-color-4-ch
  );
  --palette-gray-4: var(--success-gray-4);
  --palette-accent-4: var(--success-accent-4);
  --palette-lightness-5: var(
    --success-lightness-5
  );
  --palette-color-5: var(--success-color-5);
  --palette-color-5-ch: var(
    --success-color-5-ch
  );
  --palette-gray-5: var(--success-gray-5);
  --palette-accent-5: var(--success-accent-5);
  --palette-lightness-6: var(
    --success-lightness-6
  );
  --palette-color-6: var(--success-color-6);
  --palette-color-6-ch: var(
    --success-color-6-ch
  );
  --palette-gray-6: var(--success-gray-6);
  --palette-accent-6: var(--success-accent-6);
  --palette-lightness-7: var(
    --success-lightness-7
  );
  --palette-color-7: var(--success-color-7);
  --palette-color-7-ch: var(
    --success-color-7-ch
  );
  --palette-gray-7: var(--success-gray-7);
  --palette-accent-7: var(--success-accent-7);
  --palette-lightness-8: var(
    --success-lightness-8
  );
  --palette-color-8: var(--success-color-8);
  --palette-color-8-ch: var(
    --success-color-8-ch
  );
  --palette-gray-8: var(--success-gray-8);
  --palette-accent-8: var(--success-accent-8);
  --palette-lightness-9: var(
    --success-lightness-9
  );
  --palette-color-9: var(--success-color-9);
  --palette-color-9-ch: var(
    --success-color-9-ch
  );
  --palette-gray-9: var(--success-gray-9);
  --palette-accent-9: var(--success-accent-9);
  --palette-lightness-10: var(
    --success-lightness-10
  );
  --palette-color-10: var(--success-color-10);
  --palette-color-10-ch: var(
    --success-color-10-ch
  );
  --palette-gray-10: var(--success-gray-10);
  --palette-accent-10: var(--success-accent-10);
  --palette-lighter: var(--success-lighter);
  --palette-accent-lighter: var(
    --success-accent-lighter
  );
  --palette-lighter-ch: var(
    --success-lighter-ch
  );
  --palette-light: var(--success-light);
  --palette-accent-light: var(
    --success-accent-light
  );
  --palette-light-ch: var(
    --success-light-ch
  );
  --palette-default: var(--success-default);
  --palette-accent-default: var(
    --success-accent-default
  );
  --palette-default-ch: var(
    --success-default-ch
  );
  --palette-dark: var(--success-dark);
  --palette-accent-dark: var(
    --success-accent-dark
  );
  --palette-dark-ch: var(
    --success-dark-ch
  );
  --palette-darker: var(--success-darker);
  --palette-accent-darker: var(
    --success-accent-darker
  );
  --palette-darker-ch: var(
    --success-darker-ch
  );
}

:root {
  --warning-hue: var(--yellow-hue);
  --warning-saturation: 80%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 45%;
  --palette-gray-saturation: 5%;
  --warning-lightness-0: 97%;
  --warning-lightness-1: 93%;
  --warning-lightness-2: 85%;
  --warning-lightness-3: 75%;
  --warning-lightness-4: 65%;
  --warning-lightness-5: 50%;
  --warning-lightness-6: 42%;
  --warning-lightness-7: 34%;
  --warning-lightness-8: 26%;
  --warning-lightness-9: 18%;
  --warning-lightness-10: 10%;
  --warning-color-0: hsl(
    var(--warning-hue),
    var(--warning-saturation),
    var(--warning-lightness-0)
  );
  --warning-color-1: hsl(
    var(--warning-hue),
    var(--warning-saturation),
    var(--warning-lightness-1)
  );
  --warning-color-2: hsl(
    var(--warning-hue),
    var(--warning-saturation),
    var(--warning-lightness-2)
  );
  --warning-color-3: hsl(
    var(--warning-hue),
    var(--warning-saturation),
    var(--warning-lightness-3)
  );
  --warning-color-4: hsl(
    var(--warning-hue),
    var(--warning-saturation),
    var(--warning-lightness-4)
  );
  --warning-color-5: hsl(
    var(--warning-hue),
    var(--warning-saturation),
    var(--warning-lightness-5)
  );
  --warning-color-6: hsl(
    var(--warning-hue),
    var(--warning-saturation),
    var(--warning-lightness-6)
  );
  --warning-color-7: hsl(
    var(--warning-hue),
    var(--warning-saturation),
    var(--warning-lightness-7)
  );
  --warning-color-8: hsl(
    var(--warning-hue),
    var(--warning-saturation),
    var(--warning-lightness-8)
  );
  --warning-color-9: hsl(
    var(--warning-hue),
    var(--warning-saturation),
    var(--warning-lightness-9)
  );
  --warning-color-10: hsl(
    var(--warning-hue),
    var(--warning-saturation),
    var(--warning-lightness-10)
  );
  --warning-color-0-ch:
    var(--warning-hue), var(--warning-saturation),
    var(--warning-lightness-0);
  --warning-color-1-ch:
    var(--warning-hue), var(--warning-saturation),
    var(--warning-lightness-1);
  --warning-color-2-ch:
    var(--warning-hue), var(--warning-saturation),
    var(--warning-lightness-2);
  --warning-color-3-ch:
    var(--warning-hue), var(--warning-saturation),
    var(--warning-lightness-3);
  --warning-color-4-ch:
    var(--warning-hue), var(--warning-saturation),
    var(--warning-lightness-4);
  --warning-color-5-ch:
    var(--warning-hue), var(--warning-saturation),
    var(--warning-lightness-5);
  --warning-color-6-ch:
    var(--warning-hue), var(--warning-saturation),
    var(--warning-lightness-6);
  --warning-color-7-ch:
    var(--warning-hue), var(--warning-saturation),
    var(--warning-lightness-7);
  --warning-color-8-ch:
    var(--warning-hue), var(--warning-saturation),
    var(--warning-lightness-8);
  --warning-color-9-ch:
    var(--warning-hue), var(--warning-saturation),
    var(--warning-lightness-9);
  --warning-color-10-ch:
    var(--warning-hue), var(--warning-saturation),
    var(--warning-lightness-10);
  --warning-gray-0: hsl(
    var(--warning-hue),
    var(--palette-gray-saturation),
    var(--warning-lightness-0)
  );
  --warning-gray-1: hsl(
    var(--warning-hue),
    var(--palette-gray-saturation),
    var(--warning-lightness-1)
  );
  --warning-gray-2: hsl(
    var(--warning-hue),
    var(--palette-gray-saturation),
    var(--warning-lightness-2)
  );
  --warning-gray-3: hsl(
    var(--warning-hue),
    var(--palette-gray-saturation),
    var(--warning-lightness-3)
  );
  --warning-gray-4: hsl(
    var(--warning-hue),
    var(--palette-gray-saturation),
    var(--warning-lightness-4)
  );
  --warning-gray-5: hsl(
    var(--warning-hue),
    var(--palette-gray-saturation),
    var(--warning-lightness-5)
  );
  --warning-gray-6: hsl(
    var(--warning-hue),
    var(--palette-gray-saturation),
    var(--warning-lightness-6)
  );
  --warning-gray-7: hsl(
    var(--warning-hue),
    var(--palette-gray-saturation),
    var(--warning-lightness-7)
  );
  --warning-gray-8: hsl(
    var(--warning-hue),
    var(--palette-gray-saturation),
    var(--warning-lightness-8)
  );
  --warning-gray-9: hsl(
    var(--warning-hue),
    var(--palette-gray-saturation),
    var(--warning-lightness-9)
  );
  --warning-gray-10: hsl(
    var(--warning-hue),
    var(--palette-gray-saturation),
    var(--warning-lightness-10)
  );
  --warning-accent-light-color: hsl(
    var(--warning-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --warning-accent-dark-color: hsl(
    var(--warning-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --warning-accent-0: var(--warning-accent-dark-color);
  --warning-accent-1: var(--warning-accent-dark-color);
  --warning-accent-2: var(--warning-accent-dark-color);
  --warning-accent-3: var(--warning-accent-dark-color);
  --warning-accent-4: var(--warning-accent-dark-color);
  --warning-accent-5: var(--warning-accent-dark-color);
  --warning-accent-6: var(--warning-accent-light-color);
  --warning-accent-7: var(--warning-accent-light-color);
  --warning-accent-8: var(--warning-accent-light-color);
  --warning-accent-9: var(--warning-accent-light-color);
  --warning-accent-10: var(--warning-accent-light-color);
  --warning-lighter: var(--warning-color-2);
  --warning-accent-lighter: var(--warning-accent-2);
  --warning-lighter-ch:
    var(--warning-hue), var(--warning-saturation),
    var(--warning-lightness-2);
  --warning-light: var(--warning-color-4);
  --warning-accent-light: var(--warning-accent-4);
  --warning-light-ch:
    var(--warning-hue), var(--warning-saturation),
    var(--warning-lightness-4);
  --warning-default: var(--warning-color-6);
  --warning-accent-default: var(--warning-accent-6);
  --warning-default-ch:
    var(--warning-hue), var(--warning-saturation),
    var(--warning-lightness-6);
  --warning-dark: var(--warning-color-8);
  --warning-accent-dark: var(--warning-accent-8);
  --warning-dark-ch:
    var(--warning-hue), var(--warning-saturation),
    var(--warning-lightness-8);
  --warning-darker: var(--warning-color-9);
  --warning-accent-darker: var(--warning-accent-9);
  --warning-darker-ch:
    var(--warning-hue), var(--warning-saturation),
    var(--warning-lightness-9);
}

.warning {
  --palette-hue: var(--warning-hue);
  --palette-saturation: var(--warning-saturation);
  --palette-accent-light-color: var(
    --warning-accent-light-color
  );
  --palette-accent-dark-color: var(
    --warning-accent-dark-color
  );
  --palette-lightness-0: var(
    --warning-lightness-0
  );
  --palette-color-0: var(--warning-color-0);
  --palette-color-0-ch: var(
    --warning-color-0-ch
  );
  --palette-gray-0: var(--warning-gray-0);
  --palette-accent-0: var(--warning-accent-0);
  --palette-lightness-1: var(
    --warning-lightness-1
  );
  --palette-color-1: var(--warning-color-1);
  --palette-color-1-ch: var(
    --warning-color-1-ch
  );
  --palette-gray-1: var(--warning-gray-1);
  --palette-accent-1: var(--warning-accent-1);
  --palette-lightness-2: var(
    --warning-lightness-2
  );
  --palette-color-2: var(--warning-color-2);
  --palette-color-2-ch: var(
    --warning-color-2-ch
  );
  --palette-gray-2: var(--warning-gray-2);
  --palette-accent-2: var(--warning-accent-2);
  --palette-lightness-3: var(
    --warning-lightness-3
  );
  --palette-color-3: var(--warning-color-3);
  --palette-color-3-ch: var(
    --warning-color-3-ch
  );
  --palette-gray-3: var(--warning-gray-3);
  --palette-accent-3: var(--warning-accent-3);
  --palette-lightness-4: var(
    --warning-lightness-4
  );
  --palette-color-4: var(--warning-color-4);
  --palette-color-4-ch: var(
    --warning-color-4-ch
  );
  --palette-gray-4: var(--warning-gray-4);
  --palette-accent-4: var(--warning-accent-4);
  --palette-lightness-5: var(
    --warning-lightness-5
  );
  --palette-color-5: var(--warning-color-5);
  --palette-color-5-ch: var(
    --warning-color-5-ch
  );
  --palette-gray-5: var(--warning-gray-5);
  --palette-accent-5: var(--warning-accent-5);
  --palette-lightness-6: var(
    --warning-lightness-6
  );
  --palette-color-6: var(--warning-color-6);
  --palette-color-6-ch: var(
    --warning-color-6-ch
  );
  --palette-gray-6: var(--warning-gray-6);
  --palette-accent-6: var(--warning-accent-6);
  --palette-lightness-7: var(
    --warning-lightness-7
  );
  --palette-color-7: var(--warning-color-7);
  --palette-color-7-ch: var(
    --warning-color-7-ch
  );
  --palette-gray-7: var(--warning-gray-7);
  --palette-accent-7: var(--warning-accent-7);
  --palette-lightness-8: var(
    --warning-lightness-8
  );
  --palette-color-8: var(--warning-color-8);
  --palette-color-8-ch: var(
    --warning-color-8-ch
  );
  --palette-gray-8: var(--warning-gray-8);
  --palette-accent-8: var(--warning-accent-8);
  --palette-lightness-9: var(
    --warning-lightness-9
  );
  --palette-color-9: var(--warning-color-9);
  --palette-color-9-ch: var(
    --warning-color-9-ch
  );
  --palette-gray-9: var(--warning-gray-9);
  --palette-accent-9: var(--warning-accent-9);
  --palette-lightness-10: var(
    --warning-lightness-10
  );
  --palette-color-10: var(--warning-color-10);
  --palette-color-10-ch: var(
    --warning-color-10-ch
  );
  --palette-gray-10: var(--warning-gray-10);
  --palette-accent-10: var(--warning-accent-10);
  --palette-lighter: var(--warning-lighter);
  --palette-accent-lighter: var(
    --warning-accent-lighter
  );
  --palette-lighter-ch: var(
    --warning-lighter-ch
  );
  --palette-light: var(--warning-light);
  --palette-accent-light: var(
    --warning-accent-light
  );
  --palette-light-ch: var(
    --warning-light-ch
  );
  --palette-default: var(--warning-default);
  --palette-accent-default: var(
    --warning-accent-default
  );
  --palette-default-ch: var(
    --warning-default-ch
  );
  --palette-dark: var(--warning-dark);
  --palette-accent-dark: var(
    --warning-accent-dark
  );
  --palette-dark-ch: var(
    --warning-dark-ch
  );
  --palette-darker: var(--warning-darker);
  --palette-accent-darker: var(
    --warning-accent-darker
  );
  --palette-darker-ch: var(
    --warning-darker-ch
  );
}

:root {
  --danger-hue: var(--red-hue);
  --danger-saturation: 80%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 50%;
  --palette-gray-saturation: 5%;
  --danger-lightness-0: 97%;
  --danger-lightness-1: 93%;
  --danger-lightness-2: 85%;
  --danger-lightness-3: 75%;
  --danger-lightness-4: 65%;
  --danger-lightness-5: 50%;
  --danger-lightness-6: 42%;
  --danger-lightness-7: 34%;
  --danger-lightness-8: 26%;
  --danger-lightness-9: 18%;
  --danger-lightness-10: 10%;
  --danger-color-0: hsl(
    var(--danger-hue),
    var(--danger-saturation),
    var(--danger-lightness-0)
  );
  --danger-color-1: hsl(
    var(--danger-hue),
    var(--danger-saturation),
    var(--danger-lightness-1)
  );
  --danger-color-2: hsl(
    var(--danger-hue),
    var(--danger-saturation),
    var(--danger-lightness-2)
  );
  --danger-color-3: hsl(
    var(--danger-hue),
    var(--danger-saturation),
    var(--danger-lightness-3)
  );
  --danger-color-4: hsl(
    var(--danger-hue),
    var(--danger-saturation),
    var(--danger-lightness-4)
  );
  --danger-color-5: hsl(
    var(--danger-hue),
    var(--danger-saturation),
    var(--danger-lightness-5)
  );
  --danger-color-6: hsl(
    var(--danger-hue),
    var(--danger-saturation),
    var(--danger-lightness-6)
  );
  --danger-color-7: hsl(
    var(--danger-hue),
    var(--danger-saturation),
    var(--danger-lightness-7)
  );
  --danger-color-8: hsl(
    var(--danger-hue),
    var(--danger-saturation),
    var(--danger-lightness-8)
  );
  --danger-color-9: hsl(
    var(--danger-hue),
    var(--danger-saturation),
    var(--danger-lightness-9)
  );
  --danger-color-10: hsl(
    var(--danger-hue),
    var(--danger-saturation),
    var(--danger-lightness-10)
  );
  --danger-color-0-ch:
    var(--danger-hue), var(--danger-saturation),
    var(--danger-lightness-0);
  --danger-color-1-ch:
    var(--danger-hue), var(--danger-saturation),
    var(--danger-lightness-1);
  --danger-color-2-ch:
    var(--danger-hue), var(--danger-saturation),
    var(--danger-lightness-2);
  --danger-color-3-ch:
    var(--danger-hue), var(--danger-saturation),
    var(--danger-lightness-3);
  --danger-color-4-ch:
    var(--danger-hue), var(--danger-saturation),
    var(--danger-lightness-4);
  --danger-color-5-ch:
    var(--danger-hue), var(--danger-saturation),
    var(--danger-lightness-5);
  --danger-color-6-ch:
    var(--danger-hue), var(--danger-saturation),
    var(--danger-lightness-6);
  --danger-color-7-ch:
    var(--danger-hue), var(--danger-saturation),
    var(--danger-lightness-7);
  --danger-color-8-ch:
    var(--danger-hue), var(--danger-saturation),
    var(--danger-lightness-8);
  --danger-color-9-ch:
    var(--danger-hue), var(--danger-saturation),
    var(--danger-lightness-9);
  --danger-color-10-ch:
    var(--danger-hue), var(--danger-saturation),
    var(--danger-lightness-10);
  --danger-gray-0: hsl(
    var(--danger-hue),
    var(--palette-gray-saturation),
    var(--danger-lightness-0)
  );
  --danger-gray-1: hsl(
    var(--danger-hue),
    var(--palette-gray-saturation),
    var(--danger-lightness-1)
  );
  --danger-gray-2: hsl(
    var(--danger-hue),
    var(--palette-gray-saturation),
    var(--danger-lightness-2)
  );
  --danger-gray-3: hsl(
    var(--danger-hue),
    var(--palette-gray-saturation),
    var(--danger-lightness-3)
  );
  --danger-gray-4: hsl(
    var(--danger-hue),
    var(--palette-gray-saturation),
    var(--danger-lightness-4)
  );
  --danger-gray-5: hsl(
    var(--danger-hue),
    var(--palette-gray-saturation),
    var(--danger-lightness-5)
  );
  --danger-gray-6: hsl(
    var(--danger-hue),
    var(--palette-gray-saturation),
    var(--danger-lightness-6)
  );
  --danger-gray-7: hsl(
    var(--danger-hue),
    var(--palette-gray-saturation),
    var(--danger-lightness-7)
  );
  --danger-gray-8: hsl(
    var(--danger-hue),
    var(--palette-gray-saturation),
    var(--danger-lightness-8)
  );
  --danger-gray-9: hsl(
    var(--danger-hue),
    var(--palette-gray-saturation),
    var(--danger-lightness-9)
  );
  --danger-gray-10: hsl(
    var(--danger-hue),
    var(--palette-gray-saturation),
    var(--danger-lightness-10)
  );
  --danger-accent-light-color: hsl(
    var(--danger-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --danger-accent-dark-color: hsl(
    var(--danger-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --danger-accent-0: var(--danger-accent-dark-color);
  --danger-accent-1: var(--danger-accent-dark-color);
  --danger-accent-2: var(--danger-accent-dark-color);
  --danger-accent-3: var(--danger-accent-dark-color);
  --danger-accent-4: var(--danger-accent-dark-color);
  --danger-accent-5: var(--danger-accent-light-color);
  --danger-accent-6: var(--danger-accent-light-color);
  --danger-accent-7: var(--danger-accent-light-color);
  --danger-accent-8: var(--danger-accent-light-color);
  --danger-accent-9: var(--danger-accent-light-color);
  --danger-accent-10: var(--danger-accent-light-color);
  --danger-lighter: var(--danger-color-2);
  --danger-accent-lighter: var(--danger-accent-2);
  --danger-lighter-ch:
    var(--danger-hue), var(--danger-saturation),
    var(--danger-lightness-2);
  --danger-light: var(--danger-color-4);
  --danger-accent-light: var(--danger-accent-4);
  --danger-light-ch:
    var(--danger-hue), var(--danger-saturation),
    var(--danger-lightness-4);
  --danger-default: var(--danger-color-6);
  --danger-accent-default: var(--danger-accent-6);
  --danger-default-ch:
    var(--danger-hue), var(--danger-saturation),
    var(--danger-lightness-6);
  --danger-dark: var(--danger-color-8);
  --danger-accent-dark: var(--danger-accent-8);
  --danger-dark-ch:
    var(--danger-hue), var(--danger-saturation),
    var(--danger-lightness-8);
  --danger-darker: var(--danger-color-9);
  --danger-accent-darker: var(--danger-accent-9);
  --danger-darker-ch:
    var(--danger-hue), var(--danger-saturation),
    var(--danger-lightness-9);
}

.danger {
  --palette-hue: var(--danger-hue);
  --palette-saturation: var(--danger-saturation);
  --palette-accent-light-color: var(
    --danger-accent-light-color
  );
  --palette-accent-dark-color: var(
    --danger-accent-dark-color
  );
  --palette-lightness-0: var(
    --danger-lightness-0
  );
  --palette-color-0: var(--danger-color-0);
  --palette-color-0-ch: var(
    --danger-color-0-ch
  );
  --palette-gray-0: var(--danger-gray-0);
  --palette-accent-0: var(--danger-accent-0);
  --palette-lightness-1: var(
    --danger-lightness-1
  );
  --palette-color-1: var(--danger-color-1);
  --palette-color-1-ch: var(
    --danger-color-1-ch
  );
  --palette-gray-1: var(--danger-gray-1);
  --palette-accent-1: var(--danger-accent-1);
  --palette-lightness-2: var(
    --danger-lightness-2
  );
  --palette-color-2: var(--danger-color-2);
  --palette-color-2-ch: var(
    --danger-color-2-ch
  );
  --palette-gray-2: var(--danger-gray-2);
  --palette-accent-2: var(--danger-accent-2);
  --palette-lightness-3: var(
    --danger-lightness-3
  );
  --palette-color-3: var(--danger-color-3);
  --palette-color-3-ch: var(
    --danger-color-3-ch
  );
  --palette-gray-3: var(--danger-gray-3);
  --palette-accent-3: var(--danger-accent-3);
  --palette-lightness-4: var(
    --danger-lightness-4
  );
  --palette-color-4: var(--danger-color-4);
  --palette-color-4-ch: var(
    --danger-color-4-ch
  );
  --palette-gray-4: var(--danger-gray-4);
  --palette-accent-4: var(--danger-accent-4);
  --palette-lightness-5: var(
    --danger-lightness-5
  );
  --palette-color-5: var(--danger-color-5);
  --palette-color-5-ch: var(
    --danger-color-5-ch
  );
  --palette-gray-5: var(--danger-gray-5);
  --palette-accent-5: var(--danger-accent-5);
  --palette-lightness-6: var(
    --danger-lightness-6
  );
  --palette-color-6: var(--danger-color-6);
  --palette-color-6-ch: var(
    --danger-color-6-ch
  );
  --palette-gray-6: var(--danger-gray-6);
  --palette-accent-6: var(--danger-accent-6);
  --palette-lightness-7: var(
    --danger-lightness-7
  );
  --palette-color-7: var(--danger-color-7);
  --palette-color-7-ch: var(
    --danger-color-7-ch
  );
  --palette-gray-7: var(--danger-gray-7);
  --palette-accent-7: var(--danger-accent-7);
  --palette-lightness-8: var(
    --danger-lightness-8
  );
  --palette-color-8: var(--danger-color-8);
  --palette-color-8-ch: var(
    --danger-color-8-ch
  );
  --palette-gray-8: var(--danger-gray-8);
  --palette-accent-8: var(--danger-accent-8);
  --palette-lightness-9: var(
    --danger-lightness-9
  );
  --palette-color-9: var(--danger-color-9);
  --palette-color-9-ch: var(
    --danger-color-9-ch
  );
  --palette-gray-9: var(--danger-gray-9);
  --palette-accent-9: var(--danger-accent-9);
  --palette-lightness-10: var(
    --danger-lightness-10
  );
  --palette-color-10: var(--danger-color-10);
  --palette-color-10-ch: var(
    --danger-color-10-ch
  );
  --palette-gray-10: var(--danger-gray-10);
  --palette-accent-10: var(--danger-accent-10);
  --palette-lighter: var(--danger-lighter);
  --palette-accent-lighter: var(
    --danger-accent-lighter
  );
  --palette-lighter-ch: var(
    --danger-lighter-ch
  );
  --palette-light: var(--danger-light);
  --palette-accent-light: var(
    --danger-accent-light
  );
  --palette-light-ch: var(
    --danger-light-ch
  );
  --palette-default: var(--danger-default);
  --palette-accent-default: var(
    --danger-accent-default
  );
  --palette-default-ch: var(
    --danger-default-ch
  );
  --palette-dark: var(--danger-dark);
  --palette-accent-dark: var(
    --danger-accent-dark
  );
  --palette-dark-ch: var(
    --danger-dark-ch
  );
  --palette-darker: var(--danger-darker);
  --palette-accent-darker: var(
    --danger-accent-darker
  );
  --palette-darker-ch: var(
    --danger-darker-ch
  );
}

:root {
  --info-hue: var(--cyan-hue);
  --info-saturation: 80%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 40%;
  --palette-gray-saturation: 5%;
  --info-lightness-0: 97%;
  --info-lightness-1: 93%;
  --info-lightness-2: 85%;
  --info-lightness-3: 75%;
  --info-lightness-4: 65%;
  --info-lightness-5: 50%;
  --info-lightness-6: 42%;
  --info-lightness-7: 34%;
  --info-lightness-8: 26%;
  --info-lightness-9: 18%;
  --info-lightness-10: 10%;
  --info-color-0: hsl(
    var(--info-hue),
    var(--info-saturation),
    var(--info-lightness-0)
  );
  --info-color-1: hsl(
    var(--info-hue),
    var(--info-saturation),
    var(--info-lightness-1)
  );
  --info-color-2: hsl(
    var(--info-hue),
    var(--info-saturation),
    var(--info-lightness-2)
  );
  --info-color-3: hsl(
    var(--info-hue),
    var(--info-saturation),
    var(--info-lightness-3)
  );
  --info-color-4: hsl(
    var(--info-hue),
    var(--info-saturation),
    var(--info-lightness-4)
  );
  --info-color-5: hsl(
    var(--info-hue),
    var(--info-saturation),
    var(--info-lightness-5)
  );
  --info-color-6: hsl(
    var(--info-hue),
    var(--info-saturation),
    var(--info-lightness-6)
  );
  --info-color-7: hsl(
    var(--info-hue),
    var(--info-saturation),
    var(--info-lightness-7)
  );
  --info-color-8: hsl(
    var(--info-hue),
    var(--info-saturation),
    var(--info-lightness-8)
  );
  --info-color-9: hsl(
    var(--info-hue),
    var(--info-saturation),
    var(--info-lightness-9)
  );
  --info-color-10: hsl(
    var(--info-hue),
    var(--info-saturation),
    var(--info-lightness-10)
  );
  --info-color-0-ch:
    var(--info-hue), var(--info-saturation),
    var(--info-lightness-0);
  --info-color-1-ch:
    var(--info-hue), var(--info-saturation),
    var(--info-lightness-1);
  --info-color-2-ch:
    var(--info-hue), var(--info-saturation),
    var(--info-lightness-2);
  --info-color-3-ch:
    var(--info-hue), var(--info-saturation),
    var(--info-lightness-3);
  --info-color-4-ch:
    var(--info-hue), var(--info-saturation),
    var(--info-lightness-4);
  --info-color-5-ch:
    var(--info-hue), var(--info-saturation),
    var(--info-lightness-5);
  --info-color-6-ch:
    var(--info-hue), var(--info-saturation),
    var(--info-lightness-6);
  --info-color-7-ch:
    var(--info-hue), var(--info-saturation),
    var(--info-lightness-7);
  --info-color-8-ch:
    var(--info-hue), var(--info-saturation),
    var(--info-lightness-8);
  --info-color-9-ch:
    var(--info-hue), var(--info-saturation),
    var(--info-lightness-9);
  --info-color-10-ch:
    var(--info-hue), var(--info-saturation),
    var(--info-lightness-10);
  --info-gray-0: hsl(
    var(--info-hue),
    var(--palette-gray-saturation),
    var(--info-lightness-0)
  );
  --info-gray-1: hsl(
    var(--info-hue),
    var(--palette-gray-saturation),
    var(--info-lightness-1)
  );
  --info-gray-2: hsl(
    var(--info-hue),
    var(--palette-gray-saturation),
    var(--info-lightness-2)
  );
  --info-gray-3: hsl(
    var(--info-hue),
    var(--palette-gray-saturation),
    var(--info-lightness-3)
  );
  --info-gray-4: hsl(
    var(--info-hue),
    var(--palette-gray-saturation),
    var(--info-lightness-4)
  );
  --info-gray-5: hsl(
    var(--info-hue),
    var(--palette-gray-saturation),
    var(--info-lightness-5)
  );
  --info-gray-6: hsl(
    var(--info-hue),
    var(--palette-gray-saturation),
    var(--info-lightness-6)
  );
  --info-gray-7: hsl(
    var(--info-hue),
    var(--palette-gray-saturation),
    var(--info-lightness-7)
  );
  --info-gray-8: hsl(
    var(--info-hue),
    var(--palette-gray-saturation),
    var(--info-lightness-8)
  );
  --info-gray-9: hsl(
    var(--info-hue),
    var(--palette-gray-saturation),
    var(--info-lightness-9)
  );
  --info-gray-10: hsl(
    var(--info-hue),
    var(--palette-gray-saturation),
    var(--info-lightness-10)
  );
  --info-accent-light-color: hsl(
    var(--info-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --info-accent-dark-color: hsl(
    var(--info-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --info-accent-0: var(--info-accent-dark-color);
  --info-accent-1: var(--info-accent-dark-color);
  --info-accent-2: var(--info-accent-dark-color);
  --info-accent-3: var(--info-accent-dark-color);
  --info-accent-4: var(--info-accent-dark-color);
  --info-accent-5: var(--info-accent-dark-color);
  --info-accent-6: var(--info-accent-dark-color);
  --info-accent-7: var(--info-accent-light-color);
  --info-accent-8: var(--info-accent-light-color);
  --info-accent-9: var(--info-accent-light-color);
  --info-accent-10: var(--info-accent-light-color);
  --info-lighter: var(--info-color-2);
  --info-accent-lighter: var(--info-accent-2);
  --info-lighter-ch:
    var(--info-hue), var(--info-saturation),
    var(--info-lightness-2);
  --info-light: var(--info-color-4);
  --info-accent-light: var(--info-accent-4);
  --info-light-ch:
    var(--info-hue), var(--info-saturation),
    var(--info-lightness-4);
  --info-default: var(--info-color-7);
  --info-accent-default: var(--info-accent-7);
  --info-default-ch:
    var(--info-hue), var(--info-saturation),
    var(--info-lightness-7);
  --info-dark: var(--info-color-8);
  --info-accent-dark: var(--info-accent-8);
  --info-dark-ch:
    var(--info-hue), var(--info-saturation),
    var(--info-lightness-8);
  --info-darker: var(--info-color-9);
  --info-accent-darker: var(--info-accent-9);
  --info-darker-ch:
    var(--info-hue), var(--info-saturation),
    var(--info-lightness-9);
}

.info {
  --palette-hue: var(--info-hue);
  --palette-saturation: var(--info-saturation);
  --palette-accent-light-color: var(
    --info-accent-light-color
  );
  --palette-accent-dark-color: var(
    --info-accent-dark-color
  );
  --palette-lightness-0: var(
    --info-lightness-0
  );
  --palette-color-0: var(--info-color-0);
  --palette-color-0-ch: var(
    --info-color-0-ch
  );
  --palette-gray-0: var(--info-gray-0);
  --palette-accent-0: var(--info-accent-0);
  --palette-lightness-1: var(
    --info-lightness-1
  );
  --palette-color-1: var(--info-color-1);
  --palette-color-1-ch: var(
    --info-color-1-ch
  );
  --palette-gray-1: var(--info-gray-1);
  --palette-accent-1: var(--info-accent-1);
  --palette-lightness-2: var(
    --info-lightness-2
  );
  --palette-color-2: var(--info-color-2);
  --palette-color-2-ch: var(
    --info-color-2-ch
  );
  --palette-gray-2: var(--info-gray-2);
  --palette-accent-2: var(--info-accent-2);
  --palette-lightness-3: var(
    --info-lightness-3
  );
  --palette-color-3: var(--info-color-3);
  --palette-color-3-ch: var(
    --info-color-3-ch
  );
  --palette-gray-3: var(--info-gray-3);
  --palette-accent-3: var(--info-accent-3);
  --palette-lightness-4: var(
    --info-lightness-4
  );
  --palette-color-4: var(--info-color-4);
  --palette-color-4-ch: var(
    --info-color-4-ch
  );
  --palette-gray-4: var(--info-gray-4);
  --palette-accent-4: var(--info-accent-4);
  --palette-lightness-5: var(
    --info-lightness-5
  );
  --palette-color-5: var(--info-color-5);
  --palette-color-5-ch: var(
    --info-color-5-ch
  );
  --palette-gray-5: var(--info-gray-5);
  --palette-accent-5: var(--info-accent-5);
  --palette-lightness-6: var(
    --info-lightness-6
  );
  --palette-color-6: var(--info-color-6);
  --palette-color-6-ch: var(
    --info-color-6-ch
  );
  --palette-gray-6: var(--info-gray-6);
  --palette-accent-6: var(--info-accent-6);
  --palette-lightness-7: var(
    --info-lightness-7
  );
  --palette-color-7: var(--info-color-7);
  --palette-color-7-ch: var(
    --info-color-7-ch
  );
  --palette-gray-7: var(--info-gray-7);
  --palette-accent-7: var(--info-accent-7);
  --palette-lightness-8: var(
    --info-lightness-8
  );
  --palette-color-8: var(--info-color-8);
  --palette-color-8-ch: var(
    --info-color-8-ch
  );
  --palette-gray-8: var(--info-gray-8);
  --palette-accent-8: var(--info-accent-8);
  --palette-lightness-9: var(
    --info-lightness-9
  );
  --palette-color-9: var(--info-color-9);
  --palette-color-9-ch: var(
    --info-color-9-ch
  );
  --palette-gray-9: var(--info-gray-9);
  --palette-accent-9: var(--info-accent-9);
  --palette-lightness-10: var(
    --info-lightness-10
  );
  --palette-color-10: var(--info-color-10);
  --palette-color-10-ch: var(
    --info-color-10-ch
  );
  --palette-gray-10: var(--info-gray-10);
  --palette-accent-10: var(--info-accent-10);
  --palette-lighter: var(--info-lighter);
  --palette-accent-lighter: var(
    --info-accent-lighter
  );
  --palette-lighter-ch: var(
    --info-lighter-ch
  );
  --palette-light: var(--info-light);
  --palette-accent-light: var(
    --info-accent-light
  );
  --palette-light-ch: var(
    --info-light-ch
  );
  --palette-default: var(--info-default);
  --palette-accent-default: var(
    --info-accent-default
  );
  --palette-default-ch: var(
    --info-default-ch
  );
  --palette-dark: var(--info-dark);
  --palette-accent-dark: var(
    --info-accent-dark
  );
  --palette-dark-ch: var(
    --info-dark-ch
  );
  --palette-darker: var(--info-darker);
  --palette-accent-darker: var(
    --info-accent-darker
  );
  --palette-darker-ch: var(
    --info-darker-ch
  );
}

:root {
  --neutral-hue: var(--blue-hue);
  --neutral-saturation: 5%;
  --palette-accent-light-lightness: 97%;
  --palette-accent-dark-lightness: 10%;
  --palette-accent-threshold: 60%;
  --palette-gray-saturation: 5%;
  --neutral-lightness-0: 99%;
  --neutral-lightness-1: 97%;
  --neutral-lightness-2: 94%;
  --neutral-lightness-3: 85%;
  --neutral-lightness-4: 75%;
  --neutral-lightness-5: 55%;
  --neutral-lightness-6: 35%;
  --neutral-lightness-7: 25%;
  --neutral-lightness-8: 15%;
  --neutral-lightness-9: 8%;
  --neutral-lightness-10: 4%;
  --neutral-color-0: hsl(
    var(--neutral-hue),
    var(--neutral-saturation),
    var(--neutral-lightness-0)
  );
  --neutral-color-1: hsl(
    var(--neutral-hue),
    var(--neutral-saturation),
    var(--neutral-lightness-1)
  );
  --neutral-color-2: hsl(
    var(--neutral-hue),
    var(--neutral-saturation),
    var(--neutral-lightness-2)
  );
  --neutral-color-3: hsl(
    var(--neutral-hue),
    var(--neutral-saturation),
    var(--neutral-lightness-3)
  );
  --neutral-color-4: hsl(
    var(--neutral-hue),
    var(--neutral-saturation),
    var(--neutral-lightness-4)
  );
  --neutral-color-5: hsl(
    var(--neutral-hue),
    var(--neutral-saturation),
    var(--neutral-lightness-5)
  );
  --neutral-color-6: hsl(
    var(--neutral-hue),
    var(--neutral-saturation),
    var(--neutral-lightness-6)
  );
  --neutral-color-7: hsl(
    var(--neutral-hue),
    var(--neutral-saturation),
    var(--neutral-lightness-7)
  );
  --neutral-color-8: hsl(
    var(--neutral-hue),
    var(--neutral-saturation),
    var(--neutral-lightness-8)
  );
  --neutral-color-9: hsl(
    var(--neutral-hue),
    var(--neutral-saturation),
    var(--neutral-lightness-9)
  );
  --neutral-color-10: hsl(
    var(--neutral-hue),
    var(--neutral-saturation),
    var(--neutral-lightness-10)
  );
  --neutral-color-0-ch:
    var(--neutral-hue), var(--neutral-saturation),
    var(--neutral-lightness-0);
  --neutral-color-1-ch:
    var(--neutral-hue), var(--neutral-saturation),
    var(--neutral-lightness-1);
  --neutral-color-2-ch:
    var(--neutral-hue), var(--neutral-saturation),
    var(--neutral-lightness-2);
  --neutral-color-3-ch:
    var(--neutral-hue), var(--neutral-saturation),
    var(--neutral-lightness-3);
  --neutral-color-4-ch:
    var(--neutral-hue), var(--neutral-saturation),
    var(--neutral-lightness-4);
  --neutral-color-5-ch:
    var(--neutral-hue), var(--neutral-saturation),
    var(--neutral-lightness-5);
  --neutral-color-6-ch:
    var(--neutral-hue), var(--neutral-saturation),
    var(--neutral-lightness-6);
  --neutral-color-7-ch:
    var(--neutral-hue), var(--neutral-saturation),
    var(--neutral-lightness-7);
  --neutral-color-8-ch:
    var(--neutral-hue), var(--neutral-saturation),
    var(--neutral-lightness-8);
  --neutral-color-9-ch:
    var(--neutral-hue), var(--neutral-saturation),
    var(--neutral-lightness-9);
  --neutral-color-10-ch:
    var(--neutral-hue), var(--neutral-saturation),
    var(--neutral-lightness-10);
  --neutral-gray-0: hsl(
    var(--neutral-hue),
    var(--palette-gray-saturation),
    var(--neutral-lightness-0)
  );
  --neutral-gray-1: hsl(
    var(--neutral-hue),
    var(--palette-gray-saturation),
    var(--neutral-lightness-1)
  );
  --neutral-gray-2: hsl(
    var(--neutral-hue),
    var(--palette-gray-saturation),
    var(--neutral-lightness-2)
  );
  --neutral-gray-3: hsl(
    var(--neutral-hue),
    var(--palette-gray-saturation),
    var(--neutral-lightness-3)
  );
  --neutral-gray-4: hsl(
    var(--neutral-hue),
    var(--palette-gray-saturation),
    var(--neutral-lightness-4)
  );
  --neutral-gray-5: hsl(
    var(--neutral-hue),
    var(--palette-gray-saturation),
    var(--neutral-lightness-5)
  );
  --neutral-gray-6: hsl(
    var(--neutral-hue),
    var(--palette-gray-saturation),
    var(--neutral-lightness-6)
  );
  --neutral-gray-7: hsl(
    var(--neutral-hue),
    var(--palette-gray-saturation),
    var(--neutral-lightness-7)
  );
  --neutral-gray-8: hsl(
    var(--neutral-hue),
    var(--palette-gray-saturation),
    var(--neutral-lightness-8)
  );
  --neutral-gray-9: hsl(
    var(--neutral-hue),
    var(--palette-gray-saturation),
    var(--neutral-lightness-9)
  );
  --neutral-gray-10: hsl(
    var(--neutral-hue),
    var(--palette-gray-saturation),
    var(--neutral-lightness-10)
  );
  --neutral-accent-light-color: hsl(
    var(--neutral-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-light-lightness)
  );
  --neutral-accent-dark-color: hsl(
    var(--neutral-hue),
    var(--palette-gray-saturation),
    var(--palette-accent-dark-lightness)
  );
  --neutral-accent-0: var(--neutral-accent-dark-color);
  --neutral-accent-1: var(--neutral-accent-dark-color);
  --neutral-accent-2: var(--neutral-accent-dark-color);
  --neutral-accent-3: var(--neutral-accent-dark-color);
  --neutral-accent-4: var(--neutral-accent-dark-color);
  --neutral-accent-5: var(--neutral-accent-light-color);
  --neutral-accent-6: var(--neutral-accent-light-color);
  --neutral-accent-7: var(--neutral-accent-light-color);
  --neutral-accent-8: var(--neutral-accent-light-color);
  --neutral-accent-9: var(--neutral-accent-light-color);
  --neutral-accent-10: var(--neutral-accent-light-color);
  --neutral-lighter: var(--neutral-color-1);
  --neutral-accent-lighter: var(--neutral-accent-1);
  --neutral-lighter-ch:
    var(--neutral-hue), var(--neutral-saturation),
    var(--neutral-lightness-1);
  --neutral-light: var(--neutral-color-3);
  --neutral-accent-light: var(--neutral-accent-3);
  --neutral-light-ch:
    var(--neutral-hue), var(--neutral-saturation),
    var(--neutral-lightness-3);
  --neutral-default: var(--neutral-color-5);
  --neutral-accent-default: var(--neutral-accent-5);
  --neutral-default-ch:
    var(--neutral-hue), var(--neutral-saturation),
    var(--neutral-lightness-5);
  --neutral-dark: var(--neutral-color-7);
  --neutral-accent-dark: var(--neutral-accent-7);
  --neutral-dark-ch:
    var(--neutral-hue), var(--neutral-saturation),
    var(--neutral-lightness-7);
  --neutral-darker: var(--neutral-color-9);
  --neutral-accent-darker: var(--neutral-accent-9);
  --neutral-darker-ch:
    var(--neutral-hue), var(--neutral-saturation),
    var(--neutral-lightness-9);
}

.neutral {
  --palette-hue: var(--neutral-hue);
  --palette-saturation: var(--neutral-saturation);
  --palette-accent-light-color: var(
    --neutral-accent-light-color
  );
  --palette-accent-dark-color: var(
    --neutral-accent-dark-color
  );
  --palette-lightness-0: var(
    --neutral-lightness-0
  );
  --palette-color-0: var(--neutral-color-0);
  --palette-color-0-ch: var(
    --neutral-color-0-ch
  );
  --palette-gray-0: var(--neutral-gray-0);
  --palette-accent-0: var(--neutral-accent-0);
  --palette-lightness-1: var(
    --neutral-lightness-1
  );
  --palette-color-1: var(--neutral-color-1);
  --palette-color-1-ch: var(
    --neutral-color-1-ch
  );
  --palette-gray-1: var(--neutral-gray-1);
  --palette-accent-1: var(--neutral-accent-1);
  --palette-lightness-2: var(
    --neutral-lightness-2
  );
  --palette-color-2: var(--neutral-color-2);
  --palette-color-2-ch: var(
    --neutral-color-2-ch
  );
  --palette-gray-2: var(--neutral-gray-2);
  --palette-accent-2: var(--neutral-accent-2);
  --palette-lightness-3: var(
    --neutral-lightness-3
  );
  --palette-color-3: var(--neutral-color-3);
  --palette-color-3-ch: var(
    --neutral-color-3-ch
  );
  --palette-gray-3: var(--neutral-gray-3);
  --palette-accent-3: var(--neutral-accent-3);
  --palette-lightness-4: var(
    --neutral-lightness-4
  );
  --palette-color-4: var(--neutral-color-4);
  --palette-color-4-ch: var(
    --neutral-color-4-ch
  );
  --palette-gray-4: var(--neutral-gray-4);
  --palette-accent-4: var(--neutral-accent-4);
  --palette-lightness-5: var(
    --neutral-lightness-5
  );
  --palette-color-5: var(--neutral-color-5);
  --palette-color-5-ch: var(
    --neutral-color-5-ch
  );
  --palette-gray-5: var(--neutral-gray-5);
  --palette-accent-5: var(--neutral-accent-5);
  --palette-lightness-6: var(
    --neutral-lightness-6
  );
  --palette-color-6: var(--neutral-color-6);
  --palette-color-6-ch: var(
    --neutral-color-6-ch
  );
  --palette-gray-6: var(--neutral-gray-6);
  --palette-accent-6: var(--neutral-accent-6);
  --palette-lightness-7: var(
    --neutral-lightness-7
  );
  --palette-color-7: var(--neutral-color-7);
  --palette-color-7-ch: var(
    --neutral-color-7-ch
  );
  --palette-gray-7: var(--neutral-gray-7);
  --palette-accent-7: var(--neutral-accent-7);
  --palette-lightness-8: var(
    --neutral-lightness-8
  );
  --palette-color-8: var(--neutral-color-8);
  --palette-color-8-ch: var(
    --neutral-color-8-ch
  );
  --palette-gray-8: var(--neutral-gray-8);
  --palette-accent-8: var(--neutral-accent-8);
  --palette-lightness-9: var(
    --neutral-lightness-9
  );
  --palette-color-9: var(--neutral-color-9);
  --palette-color-9-ch: var(
    --neutral-color-9-ch
  );
  --palette-gray-9: var(--neutral-gray-9);
  --palette-accent-9: var(--neutral-accent-9);
  --palette-lightness-10: var(
    --neutral-lightness-10
  );
  --palette-color-10: var(--neutral-color-10);
  --palette-color-10-ch: var(
    --neutral-color-10-ch
  );
  --palette-gray-10: var(--neutral-gray-10);
  --palette-accent-10: var(--neutral-accent-10);
  --palette-lighter: var(--neutral-lighter);
  --palette-accent-lighter: var(
    --neutral-accent-lighter
  );
  --palette-lighter-ch: var(
    --neutral-lighter-ch
  );
  --palette-light: var(--neutral-light);
  --palette-accent-light: var(
    --neutral-accent-light
  );
  --palette-light-ch: var(
    --neutral-light-ch
  );
  --palette-default: var(--neutral-default);
  --palette-accent-default: var(
    --neutral-accent-default
  );
  --palette-default-ch: var(
    --neutral-default-ch
  );
  --palette-dark: var(--neutral-dark);
  --palette-accent-dark: var(
    --neutral-accent-dark
  );
  --palette-dark-ch: var(
    --neutral-dark-ch
  );
  --palette-darker: var(--neutral-darker);
  --palette-accent-darker: var(
    --neutral-accent-darker
  );
  --palette-darker-ch: var(
    --neutral-darker-ch
  );
}

:root {
  --palette-hue: var(--primary-hue);
  --palette-saturation: var(--primary-saturation);
  --palette-accent-light-color: var(
    --primary-accent-light-color
  );
  --palette-accent-dark-color: var(
    --primary-accent-dark-color
  );
  --palette-lightness-0: var(
    --primary-lightness-0
  );
  --palette-color-0: var(--primary-color-0);
  --palette-color-0-ch: var(
    --primary-color-0-ch
  );
  --palette-gray-0: var(--primary-gray-0);
  --palette-accent-0: var(--primary-accent-0);
  --palette-lightness-1: var(
    --primary-lightness-1
  );
  --palette-color-1: var(--primary-color-1);
  --palette-color-1-ch: var(
    --primary-color-1-ch
  );
  --palette-gray-1: var(--primary-gray-1);
  --palette-accent-1: var(--primary-accent-1);
  --palette-lightness-2: var(
    --primary-lightness-2
  );
  --palette-color-2: var(--primary-color-2);
  --palette-color-2-ch: var(
    --primary-color-2-ch
  );
  --palette-gray-2: var(--primary-gray-2);
  --palette-accent-2: var(--primary-accent-2);
  --palette-lightness-3: var(
    --primary-lightness-3
  );
  --palette-color-3: var(--primary-color-3);
  --palette-color-3-ch: var(
    --primary-color-3-ch
  );
  --palette-gray-3: var(--primary-gray-3);
  --palette-accent-3: var(--primary-accent-3);
  --palette-lightness-4: var(
    --primary-lightness-4
  );
  --palette-color-4: var(--primary-color-4);
  --palette-color-4-ch: var(
    --primary-color-4-ch
  );
  --palette-gray-4: var(--primary-gray-4);
  --palette-accent-4: var(--primary-accent-4);
  --palette-lightness-5: var(
    --primary-lightness-5
  );
  --palette-color-5: var(--primary-color-5);
  --palette-color-5-ch: var(
    --primary-color-5-ch
  );
  --palette-gray-5: var(--primary-gray-5);
  --palette-accent-5: var(--primary-accent-5);
  --palette-lightness-6: var(
    --primary-lightness-6
  );
  --palette-color-6: var(--primary-color-6);
  --palette-color-6-ch: var(
    --primary-color-6-ch
  );
  --palette-gray-6: var(--primary-gray-6);
  --palette-accent-6: var(--primary-accent-6);
  --palette-lightness-7: var(
    --primary-lightness-7
  );
  --palette-color-7: var(--primary-color-7);
  --palette-color-7-ch: var(
    --primary-color-7-ch
  );
  --palette-gray-7: var(--primary-gray-7);
  --palette-accent-7: var(--primary-accent-7);
  --palette-lightness-8: var(
    --primary-lightness-8
  );
  --palette-color-8: var(--primary-color-8);
  --palette-color-8-ch: var(
    --primary-color-8-ch
  );
  --palette-gray-8: var(--primary-gray-8);
  --palette-accent-8: var(--primary-accent-8);
  --palette-lightness-9: var(
    --primary-lightness-9
  );
  --palette-color-9: var(--primary-color-9);
  --palette-color-9-ch: var(
    --primary-color-9-ch
  );
  --palette-gray-9: var(--primary-gray-9);
  --palette-accent-9: var(--primary-accent-9);
  --palette-lightness-10: var(
    --primary-lightness-10
  );
  --palette-color-10: var(--primary-color-10);
  --palette-color-10-ch: var(
    --primary-color-10-ch
  );
  --palette-gray-10: var(--primary-gray-10);
  --palette-accent-10: var(--primary-accent-10);
  --palette-lighter: var(--primary-lighter);
  --palette-accent-lighter: var(
    --primary-accent-lighter
  );
  --palette-lighter-ch: var(
    --primary-lighter-ch
  );
  --palette-light: var(--primary-light);
  --palette-accent-light: var(
    --primary-accent-light
  );
  --palette-light-ch: var(
    --primary-light-ch
  );
  --palette-default: var(--primary-default);
  --palette-accent-default: var(
    --primary-accent-default
  );
  --palette-default-ch: var(
    --primary-default-ch
  );
  --palette-dark: var(--primary-dark);
  --palette-accent-dark: var(
    --primary-accent-dark
  );
  --palette-dark-ch: var(
    --primary-dark-ch
  );
  --palette-darker: var(--primary-darker);
  --palette-accent-darker: var(
    --primary-accent-darker
  );
  --palette-darker-ch: var(
    --primary-darker-ch
  );
}

:root {
  --border-color: var(--neutral-light);
  --border-color-subtle: var(--neutral-lighter);
  --border-color-strong: var(--neutral-dark);
  --control-border-color: var(--neutral-default);
  --control-border-color-strong: var(--neutral-dark);
  --control-border-color-subtle: var(--neutral-light);
  --text-color: var(--neutral-color-9);
  --text-color-subtle: var(--neutral-color-5);
  --text-color-muted: var(--neutral-color-4);
  --text-color-strong: var(--neutral-color-10);
  --surface-color-overlay: var(--neutral-color-0);
  --surface-color-raised: var(--neutral-color-0);
  --surface-color: var(--neutral-color-1);
  --surface-color-sunken: var(--neutral-color-2);
  --surface-color-deep: var(--neutral-color-3);
}

.button {
  --button-bg-color: transparent;
  --button-hover-bg-color: transparent;
  --button-active-bg-color: transparent;
  --button-focus-bg-color: transparent;
  --button-disabled-bg-color: transparent;
  --button-color: inherit;
  --button-hover-color: inherit;
  --button-active-color: inherit;
  --button-focus-color: inherit;
  --button-disabled-color: inherit;
  --button-border-color: transparent;
  --button-hover-border-color: transparent;
  --button-active-border-color: transparent;
  --button-focus-border-color: transparent;
  --button-disabled-border-color: transparent;
  --button-border-width: 1px;
  --button-border-radius: 0.25rem;
  --button-hover-border-radius: var(--button-border-radius);
  --button-active-border-radius: var(--button-border-radius);
  --button-focus-border-radius: var(--button-border-radius);
  --button-disabled-border-radius: var(--button-border-radius);
  --button-opacity: 1;
  --button-hover-opacity: 1;
  --button-active-opacity: 1;
  --button-focus-opacity: 1;
  --button-disabled-opacity: 1;
  --button-cursor: pointer;
  --button-disabled-cursor: not-allowed;
  --button-box-shadow: none;
  --button-hover-box-shadow: none;
  --button-active-box-shadow: none;
  --button-focus-box-shadow: none;
  --button-disabled-box-shadow: none;
  --button-transition: 0.3s;
  --button-focus-ring-color: var(--border-color);
  --button-focus-ring-width: 2px;
  --button-focus-ring-offset: 2px;
  --button-font-size: inherit;
  --button-height: 36px;
  --button-padding: 0px 24px;
  --button-gap: 0.5em;
  --button-icon-only-padding: 0.5em;
  --button-xs-font-size: 0.625rem;
  --button-xs-height: 28px;
  --button-xs-padding: 0px 12px;
  --button-xs-gap: 0.25em;
  --button-xs-icon-only-padding: 0.125em;
  --button-sm-font-size: 0.75rem;
  --button-sm-height: 32px;
  --button-sm-padding: 0px 16px;
  --button-sm-gap: 0.375em;
  --button-sm-icon-only-padding: 0.25em;
  --button-lg-font-size: 1.5rem;
  --button-lg-height: 56px;
  --button-lg-padding: 0px 48px;
  --button-lg-gap: 0.75em;
  --button-lg-icon-only-padding: 0.75em;
  --button-xl-font-size: 1.875rem;
  --button-xl-height: 74px;
  --button-xl-padding: 0px 64px;
  --button-xl-gap: 1em;
  --button-xl-icon-only-padding: 1em;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  vertical-align: middle;
  background-color: var(--button-bg-color);
  color: var(--button-color);
  border: var(--button-border-width) solid var(--button-border-color);
  opacity: var(--button-opacity);
  cursor: var(--button-cursor);
  box-shadow: var(--button-box-shadow);
  transition: var(--button-transition);
  font-size: var(--button-font-size);
  padding: var(--button-padding);
  border-radius: var(--button-border-radius);
  height: var(--button-height);
}
.button.xs {
  font-size: var(--button-xs-font-size);
  height: var(--button-xs-height);
  gap: var(--button-xs-gap);
  padding: var(--button-xs-padding);
}
.button.sm {
  font-size: var(--button-sm-font-size);
  height: var(--button-sm-height);
  gap: var(--button-sm-gap);
  padding: var(--button-sm-padding);
}
.button.md {
  font-size: var(--button-font-size);
  height: var(--button-height);
  gap: var(--button-gap);
  padding: var(--button-padding);
}
.button.lg {
  font-size: var(--button-lg-font-size);
  height: var(--button-lg-height);
  gap: var(--button-lg-gap);
  padding: var(--button-lg-padding);
}
.button.xl {
  font-size: var(--button-xl-font-size);
  height: var(--button-xl-height);
  gap: var(--button-xl-gap);
  padding: var(--button-xl-padding);
}
.button > span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.button.icon-only {
  height: var(--button-height);
  width: var(--button-height);
}
.button.icon-only.xs {
  height: var(--button-xs-height);
  width: var(--button-xs-height);
}
.button.icon-only.sm {
  height: var(--button-sm-height);
  width: var(--button-sm-height);
}
.button.icon-only.lg {
  height: var(--button-lg-height);
  width: var(--button-lg-height);
}
.button.icon-only.xl {
  height: var(--button-xl-height);
  width: var(--button-xl-height);
}
.button:hover {
  background-color: var(--button-hover-bg-color);
  color: var(--button-hover-color);
  border-color: var(--button-hover-border-color);
  border-radius: var(--button-hover-border-radius);
  opacity: var(--button-hover-opacity);
  box-shadow: var(--button-hover-box-shadow);
}
.button:active {
  background-color: var(--button-active-bg-color);
  color: var(--button-active-color);
  border-color: var(--button-active-border-color);
  border-radius: var(--button-active-border-radius);
  opacity: var(--button-active-opacity);
  box-shadow: var(--button-active-box-shadow);
}
.button:disabled {
  background-color: var(--button-disabled-bg-color);
  color: var(--button-disabled-color);
  border-color: var(--button-disabled-border-color);
  border-radius: var(--button-disabled-border-radius);
  opacity: var(--button-disabled-opacity);
  cursor: var(--button-disabled-cursor);
  box-shadow: var(--button-disabled-box-shadow);
}
.button:focus-visible {
  background-color: var(--button-focus-bg-color);
  color: var(--button-focus-color);
  border-color: var(--button-focus-border-color);
  border-radius: var(--button-focus-border-radius);
  opacity: var(--button-focus-opacity);
  box-shadow: var(--button-focus-box-shadow);
  outline: var(--button-focus-ring-width) solid var(--button-focus-ring-color);
  outline-offset: var(--button-focus-ring-offset);
}

.button,
.button.filled {
  --button-bg-color: var(--palette-default);
  --button-hover-bg-color: var(--palette-dark);
  --button-active-bg-color: var(--palette-darker);
  --button-focus-bg-color: var(--button-hover-bg-color);
  --button-disabled-bg-color: var(--border-color-subtle);
  --button-color: var(--palette-accent-default);
  --button-hover-color: var(--palette-accent-dark);
  --button-active-color: var(--palette-accent-darker);
  --button-focus-color: var(--button-hover-color);
  --button-disabled-color: var(--border-color);
  --button-border-color: transparent;
  --button-hover-border-color: transparent;
  --button-active-border-color: transparent;
  --button-focus-border-color: transparent;
  --button-disabled-border-color: transparent;
  --button-border-radius: 0.25rem;
  --button-border-width: 0px;
  --button-box-shadow: none;
  --button-hover-box-shadow: none;
  --button-active-box-shadow: none;
  --button-focus-box-shadow: none;
  --button-disabled-box-shadow: none;
}

.button.tonal {
  --button-bg-color: var(--palette-lighter);
  --button-hover-bg-color: var(--palette-light);
  --button-active-bg-color: var(--palette-default);
  --button-focus-bg-color: var(--button-hover-bg-color);
  --button-disabled-bg-color: var(--surface-color);
  --button-color: var(--palette-dark);
  --button-hover-color: var(--palette-dark);
  --button-active-color: var(--palette-darker);
  --button-focus-color: var(--button-hover-color);
  --button-disabled-color: var(--border-color);
  --button-border-color: transparent;
  --button-hover-border-color: transparent;
  --button-active-border-color: transparent;
  --button-focus-border-color: transparent;
  --button-disabled-border-color: transparent;
  --button-border-radius: 0.25rem;
  --button-border-width: 0px;
  --button-box-shadow: none;
  --button-hover-box-shadow: none;
  --button-active-box-shadow: none;
  --button-focus-box-shadow: none;
  --button-disabled-box-shadow: none;
}

.button.outlined {
  --button-bg-color: transparent;
  --button-hover-bg-color: var(--palette-lighter);
  --button-active-bg-color: var(--palette-light);
  --button-focus-bg-color: var(--button-hover-bg-color);
  --button-disabled-bg-color: transparent;
  --button-color: var(--palette-default);
  --button-hover-color: var(--palette-dark);
  --button-active-color: var(--palette-dark);
  --button-focus-color: var(--button-hover-color);
  --button-disabled-color: var(--border-color);
  --button-border-color: var(--palette-default);
  --button-hover-border-color: var(--palette-default);
  --button-active-border-color: var(--palette-default);
  --button-focus-border-color: var(--palette-default);
  --button-disabled-border-color: var(--border-color);
  --button-border-radius: 0.25rem;
  --button-border-width: 1px;
  --button-box-shadow: none;
  --button-hover-box-shadow: none;
  --button-active-box-shadow: none;
  --button-focus-box-shadow: none;
  --button-disabled-box-shadow: none;
}

.button.text {
  --button-bg-color: transparent;
  --button-hover-bg-color: var(--palette-lighter);
  --button-active-bg-color: var(--palette-light);
  --button-focus-bg-color: var(--button-hover-bg-color);
  --button-disabled-bg-color: transparent;
  --button-color: var(--palette-default);
  --button-hover-color: var(--palette-dark);
  --button-active-color: var(--palette-dark);
  --button-focus-color: var(--button-hover-color);
  --button-disabled-color: var(--border-color);
  --button-border-color: transparent;
  --button-hover-border-color: transparent;
  --button-active-border-color: transparent;
  --button-focus-border-color: transparent;
  --button-disabled-border-color: transparent;
  --button-border-radius: 0.25rem;
  --button-border-width: 0px;
  --button-box-shadow: none;
  --button-hover-box-shadow: none;
  --button-active-box-shadow: none;
  --button-focus-box-shadow: none;
  --button-disabled-box-shadow: none;
}

.checkbox {
  --checkbox-bg-color: transparent;
  --checkbox-hover-bg-color: var(--surface-color);
  --checkbox-active-bg-color: var(--surface-color-sunken);
  --checkbox-focus-bg-color: var(--surface-color);
  --checkbox-disabled-bg-color: transparent;
  --checkbox-checked-bg-color: var(--palette-default);
  --checkbox-checked-hover-bg-color: var(--palette-default);
  --checkbox-checked-active-bg-color: var(--palette-default);
  --checkbox-checked-focus-bg-color: var(--palette-default);
  --checkbox-checked-disabled-bg-color: var(--border-color);
  --checkbox-border-width: 2px;
  --checkbox-border-radius: 4px;
  --checkbox-border-color: var(--control-border-color);
  --checkbox-hover-border-color: var(--control-border-color-strong);
  --checkbox-active-border-color: var(--control-border-color-strong);
  --checkbox-focus-border-color: var(--control-border-color-strong);
  --checkbox-disabled-border-color: var(--control-border-color-subtle);
  --checkbox-checked-border-color: var(--palette-default);
  --checkbox-checked-hover-border-color: var(--palette-default);
  --checkbox-checked-active-border-color: var(--palette-default);
  --checkbox-checked-focus-border-color: var(--palette-default);
  --checkbox-checked-disabled-border-color: var(--border-color);
  --checkbox-opacity: 1;
  --checkbox-disabled-opacity: 0.6;
  --checkbox-size: 1rem;
  --checkbox-sm-size: 0.75rem;
  --checkbox-lg-size: 1.5rem;
  --checkbox-mark-color: var(--palette-accent-default);
  --checkbox-disabled-mark-color: var(--surface-color-overlay);
  --checkbox-mark-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  --checkbox-indeterminate-mark-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='5' y1='12' x2='19' y2='12' fill='none' stroke='white' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  --checkbox-cursor: pointer;
  --checkbox-disabled-cursor: not-allowed;
  --checkbox-transition: 0.2s;
  --checkbox-focus-ring-width: 2px;
  --checkbox-focus-ring-color: var(--palette-default);
  --checkbox-focus-ring-offset-width: 2px;
  --checkbox-invalid-border-color: var(--danger-default);
  --checkbox-valid-border-color: var(--success-default);
}

.checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  background-color: var(--checkbox-bg-color);
  border-width: var(--checkbox-border-width);
  border-color: var(--checkbox-border-color);
  border-radius: var(--checkbox-border-radius);
  border-style: solid;
  opacity: var(--checkbox-opacity);
  transition: var(--checkbox-transition);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
}
.checkbox.sm {
  width: var(--checkbox-sm-size);
  height: var(--checkbox-sm-size);
}
.checkbox.md {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
}
.checkbox.lg {
  width: var(--checkbox-lg-size);
  height: var(--checkbox-lg-size);
}
.checkbox {
  cursor: var(--checkbox-cursor);
}
.checkbox:hover {
  background-color: var(--checkbox-hover-bg-color);
  border-color: var(--checkbox-hover-border-color);
}
.checkbox:active {
  background-color: var(--checkbox-active-bg-color);
  border-color: var(--checkbox-active-border-color);
}
.checkbox:focus-visible {
  background-color: var(--checkbox-focus-bg-color);
  border-color: var(--checkbox-focus-border-color);
  outline-width: var(--checkbox-focus-ring-width);
  outline-color: var(--checkbox-focus-ring-color);
  outline-offset: var(--checkbox-focus-ring-offset-width);
  outline-style: solid;
}
.checkbox:disabled {
  background-color: var(--checkbox-disabled-bg-color);
  border-color: var(--checkbox-disabled-border-color);
  opacity: var(--checkbox-disabled-opacity);
  cursor: var(--checkbox-disabled-cursor);
}
.checkbox:checked, .checkbox:indeterminate {
  background-color: var(--checkbox-checked-bg-color);
  border-color: var(--checkbox-checked-border-color);
}
.checkbox:checked:hover, .checkbox:indeterminate:hover {
  background-color: var(--checkbox-checked-hover-bg-color);
  border-color: var(--checkbox-checked-hover-border-color);
}
.checkbox:checked:active, .checkbox:indeterminate:active {
  background-color: var(--checkbox-checked-active-bg-color);
  border-color: var(--checkbox-checked-active-border-color);
}
.checkbox:checked:focus-visible, .checkbox:indeterminate:focus-visible {
  background-color: var(--checkbox-checked-focus-bg-color);
  border-color: var(--checkbox-checked-focus-border-color);
  outline-width: var(--checkbox-focus-ring-width);
  outline-color: var(--checkbox-focus-ring-color);
  outline-offset: var(--checkbox-focus-ring-offset-width);
  outline-style: solid;
}
.checkbox:checked:disabled, .checkbox:indeterminate:disabled {
  background-color: var(--checkbox-checked-disabled-bg-color);
  border-color: var(--checkbox-checked-disabled-border-color);
  opacity: var(--checkbox-disabled-opacity);
}
.checkbox::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: transparent;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.checkbox:checked::before, .checkbox:indeterminate::before {
  background-color: var(--checkbox-mark-color);
}
.checkbox:checked:disabled::before, .checkbox:indeterminate:disabled::before {
  background-color: var(--checkbox-disabled-mark-color);
}
.checkbox:checked::before {
  mask-image: var(--checkbox-mark-image);
}
.checkbox:indeterminate::before {
  mask-image: var(--checkbox-indeterminate-mark-image);
}

.checkbox.is-invalid {
  --checkbox-border-color: var(--checkbox-invalid-border-color);
  --checkbox-hover-border-color: var(--checkbox-invalid-border-color);
  --checkbox-active-border-color: var(--checkbox-invalid-border-color);
  --checkbox-focus-border-color: var(--checkbox-invalid-border-color);
}

.checkbox.is-valid {
  --checkbox-border-color: var(--checkbox-valid-border-color);
  --checkbox-hover-border-color: var(--checkbox-valid-border-color);
  --checkbox-active-border-color: var(--checkbox-valid-border-color);
  --checkbox-focus-border-color: var(--checkbox-valid-border-color);
}

.radio {
  --radio-bg-color: transparent;
  --radio-hover-bg-color: var(--surface-color);
  --radio-active-bg-color: var(--surface-color-sunken);
  --radio-focus-bg-color: var(--surface-color);
  --radio-disabled-bg-color: transparent;
  --radio-checked-bg-color: var(--radio-bg-color);
  --radio-checked-hover-bg-color: var(--radio-hover-bg-color);
  --radio-checked-active-bg-color: var(--radio-active-bg-color);
  --radio-checked-focus-bg-color: var(--radio-focus-bg-color);
  --radio-checked-disabled-bg-color: var(--radio-disabled-bg-color);
  --radio-border-width: 2px;
  --radio-border-radius: 50%;
  --radio-border-color: var(--control-border-color);
  --radio-hover-border-color: var(--control-border-color-strong);
  --radio-active-border-color: var(--control-border-color-strong);
  --radio-focus-border-color: var(--control-border-color-strong);
  --radio-disabled-border-color: var(--control-border-color-subtle);
  --radio-checked-border-color: var(--palette-default);
  --radio-checked-hover-border-color: var(--palette-default);
  --radio-checked-active-border-color: var(--palette-default);
  --radio-checked-focus-border-color: var(--palette-default);
  --radio-checked-disabled-border-color: var(--border-color);
  --radio-opacity: 1;
  --radio-disabled-opacity: 0.6;
  --radio-size: 1rem;
  --radio-sm-size: 0.75rem;
  --radio-lg-size: 1.5rem;
  --radio-mark-color: var(--palette-default);
  --radio-disabled-mark-color: var(--border-color);
  --radio-mark-size: 50%;
  --radio-cursor: pointer;
  --radio-disabled-cursor: not-allowed;
  --radio-transition: 0.2s;
  --radio-focus-ring-width: 2px;
  --radio-focus-ring-color: var(--palette-default);
  --radio-focus-ring-offset-width: 2px;
  --radio-invalid-border-color: var(--danger-default);
  --radio-valid-border-color: var(--success-default);
}

.radio {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--radio-bg-color);
  border-width: var(--radio-border-width);
  border-color: var(--radio-border-color);
  border-radius: var(--radio-border-radius);
  border-style: solid;
  opacity: var(--radio-opacity);
  transition: var(--radio-transition);
  width: var(--radio-size);
  height: var(--radio-size);
}
.radio.sm {
  width: var(--radio-sm-size);
  height: var(--radio-sm-size);
}
.radio.md {
  width: var(--radio-size);
  height: var(--radio-size);
}
.radio.lg {
  width: var(--radio-lg-size);
  height: var(--radio-lg-size);
}
.radio {
  cursor: var(--radio-cursor);
}
.radio:hover {
  background-color: var(--radio-hover-bg-color);
  border-color: var(--radio-hover-border-color);
}
.radio:active {
  background-color: var(--radio-active-bg-color);
  border-color: var(--radio-active-border-color);
}
.radio:focus-visible {
  background-color: var(--radio-focus-bg-color);
  border-color: var(--radio-focus-border-color);
  outline-width: var(--radio-focus-ring-width);
  outline-color: var(--radio-focus-ring-color);
  outline-offset: var(--radio-focus-ring-offset-width);
  outline-style: solid;
}
.radio:disabled {
  background-color: var(--radio-disabled-bg-color);
  border-color: var(--radio-disabled-border-color);
  opacity: var(--radio-disabled-opacity);
  cursor: var(--radio-disabled-cursor);
}
.radio:checked, .radio:indeterminate {
  background-color: var(--radio-checked-bg-color);
  border-color: var(--radio-checked-border-color);
}
.radio:checked:hover, .radio:indeterminate:hover {
  background-color: var(--radio-checked-hover-bg-color);
  border-color: var(--radio-checked-hover-border-color);
}
.radio:checked:active, .radio:indeterminate:active {
  background-color: var(--radio-checked-active-bg-color);
  border-color: var(--radio-checked-active-border-color);
}
.radio:checked:focus-visible, .radio:indeterminate:focus-visible {
  background-color: var(--radio-checked-focus-bg-color);
  border-color: var(--radio-checked-focus-border-color);
  outline-width: var(--radio-focus-ring-width);
  outline-color: var(--radio-focus-ring-color);
  outline-offset: var(--radio-focus-ring-offset-width);
  outline-style: solid;
}
.radio:checked:disabled, .radio:indeterminate:disabled {
  background-color: var(--radio-checked-disabled-bg-color);
  border-color: var(--radio-checked-disabled-border-color);
  opacity: var(--radio-disabled-opacity);
}
.radio::before {
  content: "";
  display: block;
  width: var(--radio-mark-size);
  height: var(--radio-mark-size);
  border-radius: 50%;
  background-color: transparent;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.radio:checked::before {
  background-color: var(--radio-mark-color);
}
.radio:disabled::before {
  background-color: var(--radio-disabled-mark-color);
}

.radio.is-invalid {
  --radio-border-color: var(--radio-invalid-border-color);
  --radio-hover-border-color: var(--radio-invalid-border-color);
  --radio-active-border-color: var(--radio-invalid-border-color);
  --radio-focus-border-color: var(--radio-invalid-border-color);
}

.radio.is-valid {
  --radio-border-color: var(--radio-valid-border-color);
  --radio-hover-border-color: var(--radio-valid-border-color);
  --radio-active-border-color: var(--radio-valid-border-color);
  --radio-focus-border-color: var(--radio-valid-border-color);
}

.range {
  --range-accent-color: var(--palette-default);
}

.range {
  accent-color: var(--range-accent-color);
}

.progress {
  --progress-accent-color: var(--palette-default);
  --progress-sm-size: 0.75rem;
  --progress-md-size: 1rem;
  --progress-lg-size: 1.5rem;
}

.progress {
  accent-color: var(--progress-accent-color);
  height: var(--progress-md-size);
}
.progress.sm {
  height: var(--progress-sm-size);
}
.progress.md {
  height: var(--progress-md-size);
}
.progress.lg {
  height: var(--progress-lg-size);
}

.form-control {
  --form-control-filled-bg-color: var(--surface-color-sunken);
  --form-control-filled-hover-bg-color: var(--surface-color-deep);
  --form-control-filled-active-bg-color: var(--form-control-filled-bg-color);
  --form-control-filled-focus-bg-color: var(--form-control-filled-bg-color);
  --form-control-filled-disabled-bg-color: var(--border-color-subtle);
  --form-control-filled-readonly-bg-color: var(--surface-color-deep);
  --form-control-color: var(--text-color);
  --form-control-hover-color: var(--text-color);
  --form-control-active-color: var(--text-color);
  --form-control-focus-color: var(--text-color);
  --form-control-disabled-color: var(--text-color-muted);
  --form-control-readonly-color: var(--form-control-color);
  --form-control-placeholder-color: var(--text-color-subtle);
  --form-control-placeholder-hover-color: var(--form-control-placeholder-color);
  --form-control-placeholder-active-color: var(--form-control-placeholder-color);
  --form-control-placeholder-focus-color: var(--form-control-placeholder-color);
  --form-control-placeholder-disabled-color: var(--form-control-placeholder-color);
  --form-control-placeholder-readonly-color: var(--form-control-placeholder-color);
  --form-control-border-top-width: 1px;
  --form-control-border-right-width: 1px;
  --form-control-border-bottom-width: 1px;
  --form-control-border-left-width: 1px;
  --form-control-border-radius: 4px;
  --form-control-border-color: var(--control-border-color);
  --form-control-hover-border-color: var(--control-border-color-strong);
  --form-control-active-border-color: var(--control-border-color-strong);
  --form-control-focus-border-color: var(--palette-default);
  --form-control-disabled-border-color: var(--control-border-color-subtle);
  --form-control-readonly-border-color: var(--form-control-border-color);
  --form-control-focus-ring-width: 2px;
  --form-control-focus-ring-color: var(--palette-default);
  --form-control-focus-ring-offset-width: 2px;
  --form-control-opacity: 1;
  --form-control-disabled-opacity: 0.5;
  --form-control-readonly-opacity: 1;
  --form-control-padding: 0.5rem 0.75rem;
  --form-control-font-size: 1rem;
  --form-control-sm-padding: 0.25rem 0.5rem;
  --form-control-sm-font-size: 0.875rem;
  --form-control-lg-padding: 0.75rem 1rem;
  --form-control-lg-font-size: 1.125rem;
  --form-control-cursor: text;
  --form-control-disabled-cursor: not-allowed;
  --form-control-readonly-cursor: default;
  --form-control-transition: 0.2s, outline 0.05s;
  --form-control-invalid-border-color: var(--danger-default);
  --form-control-valid-border-color: var(--success-default);
  --form-control-invalid-focus-ring-color: var(--danger-default);
  --form-control-valid-focus-ring-color: var(--success-default);
}

.form-control {
  background-color: transparent;
  color: var(--form-control-color);
  border-width: var(--form-control-border-top-width) var(--form-control-border-right-width) var(--form-control-border-bottom-width) var(--form-control-border-left-width);
  border-radius: var(--form-control-border-radius);
  border-color: var(--form-control-border-color);
  border-style: solid;
  opacity: var(--form-control-opacity);
  cursor: var(--form-control-cursor);
  transition: var(--form-control-transition);
  outline: none;
  padding: var(--form-control-padding);
  font-size: var(--form-control-font-size);
}
.form-control.sm {
  padding: var(--form-control-sm-padding);
  font-size: var(--form-control-sm-font-size);
}
.form-control.md {
  padding: var(--form-control-padding);
  font-size: var(--form-control-font-size);
}
.form-control.lg {
  padding: var(--form-control-lg-padding);
  font-size: var(--form-control-lg-font-size);
}
.form-control:hover {
  color: var(--form-control-hover-color);
  border-color: var(--form-control-hover-border-color);
}
.form-control:hover::placeholder {
  color: var(--form-control-placeholder-hover-color);
}
.form-control:active {
  color: var(--form-control-active-color);
  border-color: var(--form-control-active-border-color);
}
.form-control:active::placeholder {
  color: var(--form-control-placeholder-active-color);
}
.form-control:focus-visible {
  color: var(--form-control-focus-color);
  border-color: var(--form-control-focus-border-color);
}
.form-control:focus-visible::placeholder {
  color: var(--form-control-placeholder-focus-color);
}
.form-control:disabled {
  color: var(--form-control-disabled-color);
  border-color: var(--form-control-disabled-border-color);
  opacity: var(--form-control-disabled-opacity);
  cursor: var(--form-control-disabled-cursor);
}
.form-control:disabled::placeholder {
  color: var(--form-control-placeholder-disabled-color);
}
.form-control:read-only:not(:disabled) {
  color: var(--form-control-readonly-color);
  border-color: var(--form-control-readonly-border-color);
  opacity: var(--form-control-readonly-opacity);
  cursor: var(--form-control-readonly-cursor);
}
.form-control:read-only:not(:disabled)::placeholder {
  color: var(--form-control-placeholder-readonly-color);
}
.form-control::placeholder {
  color: var(--form-control-placeholder-color);
}

.form-control:focus-visible,
.form-control.outlined:focus-visible {
  outline-offset: var(--form-control-focus-ring-offset-width);
  outline-width: var(--form-control-focus-ring-width);
  outline-color: var(--form-control-focus-ring-color);
  outline-style: solid;
}

.form-control.filled {
  background-color: var(--form-control-filled-bg-color);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  --form-control-border-top-width: 0;
  --form-control-border-right-width: 0;
  --form-control-border-left-width: 0;
}
.form-control.filled:hover {
  background-color: var(--form-control-filled-hover-bg-color);
}
.form-control.filled:active {
  background-color: var(--form-control-filled-active-bg-color);
}
.form-control.filled:focus-visible {
  background-color: var(--form-control-filled-focus-bg-color);
  outline: none;
  box-shadow: 0 calc(-1 * var(--form-control-focus-ring-width)) 0 0 var(--form-control-focus-ring-color) inset;
}
.form-control.filled:disabled {
  background-color: var(--form-control-filled-disabled-bg-color);
}
.form-control.filled:read-only:not(:disabled) {
  background-color: var(--form-control-filled-readonly-bg-color);
}

.form-control.underline {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  --form-control-border-top-width: 0;
  --form-control-border-right-width: 0;
  --form-control-border-left-width: 0;
}
.form-control.underline:focus-visible {
  outline: none;
  box-shadow: 0 calc(-1 * var(--form-control-focus-ring-width)) 0 0 var(--form-control-focus-ring-color) inset;
}

.form-control.is-invalid {
  --form-control-border-color: var(--form-control-invalid-border-color);
  --form-control-hover-border-color: var(--form-control-invalid-border-color);
  --form-control-active-border-color: var(--form-control-invalid-border-color);
  --form-control-focus-border-color: var(--form-control-invalid-border-color);
  --form-control-focus-ring-color: var(--form-control-invalid-focus-ring-color);
}

.form-control.is-valid {
  --form-control-border-color: var(--form-control-valid-border-color);
  --form-control-hover-border-color: var(--form-control-valid-border-color);
  --form-control-active-border-color: var(--form-control-valid-border-color);
  --form-control-focus-border-color: var(--form-control-valid-border-color);
  --form-control-focus-ring-color: var(--form-control-valid-focus-ring-color);
}

.form-hint {
  --form-hint-color: var(--text-color-subtle);
  --form-hint-invalid-color: var(--danger-dark);
  --form-hint-valid-color: var(--success-dark);
  --form-hint-font-size: 0.875em;
  --form-hint-margin-top: 0.25rem;
}

.form-hint {
  display: block;
  color: var(--form-hint-color);
  font-size: var(--form-hint-font-size);
  margin-top: var(--form-hint-margin-top);
}
.form-hint.invalid {
  color: var(--form-hint-invalid-color);
}
.form-hint.valid {
  color: var(--form-hint-valid-color);
}

.select {
  --select-filled-bg-color: var(--surface-color-sunken);
  --select-filled-hover-bg-color: var(--surface-color-deep);
  --select-filled-active-bg-color: var(--select-filled-bg-color);
  --select-filled-focus-bg-color: var(--select-filled-bg-color);
  --select-filled-disabled-bg-color: var(--border-color-subtle);
  --select-color: var(--text-color);
  --select-hover-color: var(--text-color);
  --select-active-color: var(--text-color);
  --select-focus-color: var(--text-color);
  --select-disabled-color: var(--text-color-muted);
  --select-placeholder-color: var(--text-color-subtle);
  --select-placeholder-hover-color: var(--select-placeholder-color);
  --select-placeholder-active-color: var(--select-placeholder-color);
  --select-placeholder-focus-color: var(--select-placeholder-color);
  --select-placeholder-disabled-color: var(--select-placeholder-color);
  --select-border-top-width: 1px;
  --select-border-right-width: 1px;
  --select-border-bottom-width: 1px;
  --select-border-left-width: 1px;
  --select-border-radius: 4px;
  --select-border-color: var(--control-border-color);
  --select-hover-border-color: var(--control-border-color-strong);
  --select-active-border-color: var(--control-border-color-strong);
  --select-focus-border-color: var(--control-border-color-strong);
  --select-disabled-border-color: var(--control-border-color-subtle);
  --select-focus-ring-width: 2px;
  --select-focus-ring-color: var(--palette-default);
  --select-opacity: 1;
  --select-disabled-opacity: 1;
  --select-padding: 0.5rem 0.75rem;
  --select-font-size: 1rem;
  --select-sm-padding: 0.25rem 0.5rem;
  --select-sm-font-size: 0.875rem;
  --select-lg-padding: 0.75rem 1rem;
  --select-lg-font-size: 1.125rem;
  --select-cursor: pointer;
  --select-disabled-cursor: not-allowed;
  --select-transition: 0.2s, outline 0.05s;
  --select-invalid-border-color: var(--danger-default);
  --select-valid-border-color: var(--success-default);
  --select-invalid-focus-ring-color: var(--danger-default);
  --select-valid-focus-ring-color: var(--success-default);
}

.select {
  background-color: transparent;
  color: var(--select-color);
  border-width: var(--select-border-top-width) var(--select-border-right-width) var(--select-border-bottom-width) var(--select-border-left-width);
  border-radius: var(--select-border-radius);
  border-color: var(--select-border-color);
  border-style: solid;
  opacity: var(--select-opacity);
  cursor: var(--select-cursor);
  transition: var(--select-transition);
  outline: none;
  padding: var(--select-padding);
  font-size: var(--select-font-size);
}
.select option {
  background-color: var(--surface-color-overlay);
}
.select optgroup {
  background-color: var(--surface-color);
}
.select.sm {
  padding: var(--select-sm-padding);
  font-size: var(--select-sm-font-size);
}
.select.md {
  padding: var(--select-padding);
  font-size: var(--select-font-size);
}
.select.lg {
  padding: var(--select-lg-padding);
  font-size: var(--select-lg-font-size);
}
.select:hover {
  color: var(--select-hover-color);
  border-color: var(--select-hover-border-color);
}
.select:hover::placeholder {
  color: var(--select-placeholder-hover-color);
}
.select:active {
  color: var(--select-active-color);
  border-color: var(--select-active-border-color);
}
.select:active::placeholder {
  color: var(--select-placeholder-active-color);
}
.select:focus-visible {
  color: var(--select-focus-color);
  border-color: var(--select-focus-border-color);
}
.select:focus-visible::placeholder {
  color: var(--select-placeholder-focus-color);
}
.select:disabled {
  color: var(--select-disabled-color);
  border-color: var(--select-disabled-border-color);
  opacity: var(--select-disabled-opacity);
  cursor: var(--select-disabled-cursor);
}
.select:disabled::placeholder {
  color: var(--select-placeholder-disabled-color);
}
.select::placeholder {
  color: var(--select-placeholder-color);
}
.select[multiple] {
  padding: 0;
}
.select[multiple] option {
  padding: var(--select-padding);
}
.select[multiple] option:checked {
  background-color: var(--palette-default);
  color: var(--palette-accent-default);
}

.select:focus-visible,
.select.outlined:focus-visible {
  outline-offset: var(--select-focus-ring-offset-width);
  outline-width: var(--select-focus-ring-width);
  outline-color: var(--select-focus-ring-color);
  outline-style: solid;
}

.select.filled {
  background-color: var(--select-filled-bg-color);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  --select-border-top-width: 0;
  --select-border-right-width: 0;
  --select-border-left-width: 0;
}
.select.filled:hover {
  background-color: var(--select-filled-hover-bg-color);
}
.select.filled:active {
  background-color: var(--select-filled-active-bg-color);
}
.select.filled:focus-visible {
  background-color: var(--select-filled-focus-bg-color);
  outline: none;
  box-shadow: 0 -1px 0 0 var(--select-focus-ring-color) inset;
}
.select.filled:disabled {
  background-color: var(--select-filled-disabled-bg-color);
}

.select.underline {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  --select-border-top-width: 0;
  --select-border-right-width: 0;
  --select-border-left-width: 0;
}
.select.underline:focus-visible {
  outline: none;
  box-shadow: 0 -1px 0 0 var(--select-focus-ring-color) inset;
}

.select.is-invalid {
  --select-border-color: var(--select-invalid-border-color);
  --select-hover-border-color: var(--select-invalid-border-color);
  --select-active-border-color: var(--select-invalid-border-color);
  --select-focus-border-color: var(--select-invalid-border-color);
  --select-focus-ring-color: var(--select-invalid-focus-ring-color);
}

.select.is-valid {
  --select-border-color: var(--select-valid-border-color);
  --select-hover-border-color: var(--select-valid-border-color);
  --select-active-border-color: var(--select-valid-border-color);
  --select-focus-border-color: var(--select-valid-border-color);
  --select-focus-ring-color: var(--select-valid-focus-ring-color);
}

.table {
  --table-border-color: var(--border-color);
  --table-border-width: 1px;
  --table-striped-bg-color: var(--surface-color);
  --table-striped-color: var(--text-color);
  --table-hover-bg-color: var(--surface-color);
  --table-hover-color: var(--text-color);
  --table-hover-row-cursor: unset;
  --table-hover-cell-cursor: unset;
  --table-cell-padding-x: 1em;
  --table-cell-padding-y: 0.5em;
}

.table {
  border-collapse: collapse;
  border-color: var(--table-border-color);
  border-width: 0px;
  border-style: solid;
}
.table > :not(caption) > * > * {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-width: 0px;
  border-style: solid;
  border-color: var(--table-border-color);
}

.table.row-bordered > :not(caption) > * > * {
  border-top-width: var(--table-border-width);
  border-bottom-width: var(--table-border-width);
}
.table.column-bordered > :not(caption) > * > * {
  border-left-width: var(--table-border-width);
  border-right-width: var(--table-border-width);
}

.table.striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--table-striped-bg-color);
  color: var(--table-striped-color);
}
.table.striped-column > :not(caption) > tr > :nth-child(2n) {
  background-color: var(--table-striped-bg-color);
  color: var(--table-striped-color);
}

.table.hover-row > tbody > tr:hover > * {
  background-color: var(--table-hover-bg-color);
  color: var(--table-hover-color);
  cursor: var(--table-hover-row-cursor);
}
.table.hover-cell > tbody > tr > *:hover {
  background-color: var(--table-hover-bg-color);
  color: var(--table-hover-color);
  cursor: var(--table-hover-cell-cursor);
}

.table .palette-default {
  background-color: var(--palette-default);
  color: var(--palette-accent-default);
}
.table .palette-light {
  background-color: var(--palette-light);
  color: var(--palette-accent-light);
}
.table .palette-lighter {
  background-color: var(--palette-lighter);
  color: var(--palette-accent-lighter);
}
.table .palette-dark {
  background-color: var(--palette-dark);
  color: var(--palette-accent-dark);
}
.table .palette-darker {
  background-color: var(--palette-darker);
  color: var(--palette-accent-darker);
}

.alert {
  --alert-bg-color: var(--palette-lighter);
  --alert-color: var(--palette-dark);
  --alert-border-color: var(--palette-light);
  --alert-border-width: 1px;
  --alert-border-radius: 0.25rem;
  --alert-padding: 0.75rem 1rem;
  --alert-gap: 0.5rem;
  --alert-icon-size: 1.25em;
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--alert-gap);
  background-color: var(--alert-bg-color);
  color: var(--alert-color);
  border: var(--alert-border-width) solid var(--alert-border-color);
  border-radius: var(--alert-border-radius);
  padding: var(--alert-padding);
}

.alert-title {
  display: block;
  font-weight: bold;
  margin-bottom: 0.125rem;
}

.alert-body {
  display: block;
}

.alert-icon {
  flex-shrink: 0;
  font-size: var(--alert-icon-size);
  line-height: 1;
  margin-top: 0.0625rem;
}

.badge {
  --badge-bg-color: var(--palette-default);
  --badge-color: var(--palette-accent-default);
  --badge-border-radius: 10rem;
  --badge-padding: 0.35em 0.55em;
  --badge-dot-size: 0.85rem;
  --badge-overlay-top: 0;
  --badge-overlay-right: 0;
  --badge-font-size: 0.75em;
  --badge-sm-font-size: 0.65em;
  --badge-lg-font-size: 0.875em;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--badge-bg-color);
  color: var(--badge-color);
  border-radius: var(--badge-border-radius);
  padding: var(--badge-padding);
  font-size: var(--badge-font-size);
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.badge.overlay {
  position: absolute;
  top: var(--badge-overlay-top);
  right: var(--badge-overlay-right);
  transform: translate(50%, -50%);
}
.badge.dot {
  width: var(--badge-dot-size);
  height: var(--badge-dot-size);
  padding: 0;
  border-radius: 50%;
}
.badge.sm {
  font-size: var(--badge-sm-font-size);
}
.badge.lg {
  font-size: var(--badge-lg-font-size);
}

.chip {
  --chip-bg-color: var(--palette-lighter);
  --chip-hover-bg-color: var(--palette-light);
  --chip-active-bg-color: var(--palette-default);
  --chip-focus-bg-color: var(--chip-hover-bg-color);
  --chip-disabled-bg-color: var(--surface-color);
  --chip-color: var(--palette-dark);
  --chip-hover-color: var(--palette-dark);
  --chip-active-color: var(--palette-darker);
  --chip-focus-color: var(--chip-hover-color);
  --chip-disabled-color: var(--border-color);
  --chip-border-color: var(--palette-lighter);
  --chip-hover-border-color: var(--palette-light);
  --chip-active-border-color: var(--palette-default);
  --chip-focus-border-color: var(--chip-hover-border-color);
  --chip-disabled-border-color: var(--border-color-subtle);
  --chip-border-radius: 10rem;
  --chip-border-width: 1px;
  --chip-focus-ring-color: var(--palette-default);
  --chip-focus-ring-width: 2px;
  --chip-focus-ring-offset: 2px;
  --chip-padding: 0.25em 0.625em;
  --chip-font-size: 0.875em;
  --chip-gap: 0.25rem;
  --chip-cursor: default;
  --chip-disabled-cursor: not-allowed;
  --chip-disabled-opacity: 1;
  --chip-transition: 0.3s;
  --chip-dismiss-color: var(--palette-dark);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--chip-gap);
  background-color: var(--chip-bg-color);
  color: var(--chip-color);
  border: var(--chip-border-width) solid var(--chip-border-color);
  border-radius: var(--chip-border-radius);
  padding: var(--chip-padding);
  font-size: var(--chip-font-size);
  line-height: 1.4;
  vertical-align: middle;
  cursor: var(--chip-cursor);
  transition: var(--chip-transition);
}
.chip:hover {
  background-color: var(--chip-hover-bg-color);
  color: var(--chip-hover-color);
  border-color: var(--chip-hover-border-color);
}
.chip:active {
  background-color: var(--chip-active-bg-color);
  color: var(--chip-active-color);
  border-color: var(--chip-active-border-color);
}
.chip:focus-visible {
  background-color: var(--chip-focus-bg-color);
  color: var(--chip-focus-color);
  border-color: var(--chip-focus-border-color);
  outline-color: var(--chip-focus-ring-color);
  outline-width: var(--chip-focus-ring-width);
  outline-offset: var(--chip-focus-ring-offset);
  outline-style: solid;
}
.chip:disabled, .chip[aria-disabled=true] {
  background-color: var(--chip-disabled-bg-color);
  color: var(--chip-disabled-color);
  border-color: var(--chip-disabled-border-color);
  opacity: var(--chip-disabled-opacity);
  cursor: var(--chip-disabled-cursor);
  pointer-events: none;
}
.chip.sm {
  font-size: 0.75em;
}
.chip.lg {
  font-size: 1em;
}

.chip.outlined {
  --chip-bg-color: transparent;
  --chip-hover-bg-color: var(--palette-lighter);
  --chip-active-bg-color: var(--palette-light);
  --chip-focus-bg-color: var(--chip-hover-bg-color);
  --chip-disabled-bg-color: transparent;
  --chip-color: var(--palette-default);
  --chip-hover-color: var(--palette-dark);
  --chip-active-color: var(--palette-dark);
  --chip-focus-color: var(--chip-hover-color);
  --chip-border-color: var(--palette-default);
  --chip-hover-border-color: var(--palette-default);
  --chip-active-border-color: var(--palette-default);
  --chip-focus-border-color: var(--palette-default);
}
.chip.tonal {
  --chip-border-color: transparent;
  --chip-hover-border-color: transparent;
  --chip-active-border-color: transparent;
  --chip-focus-border-color: transparent;
  --chip-disabled-border-color: transparent;
}

.chip-icon {
  display: inline-flex;
  align-items: center;
  font-size: 1em;
  line-height: 1;
}

.chip-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--chip-dismiss-color);
  line-height: 1;
}

@keyframes nomad-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}
.spinner {
  --spinner-size: 1.5rem;
  --spinner-sm-size: 1rem;
  --spinner-lg-size: 2.5rem;
  --spinner-border-width: 2px;
  --spinner-color: var(--palette-default);
  --spinner-track-color: var(--surface-color-deep);
  --spinner-speed: 0.75s;
}

.spinner {
  display: inline-block;
  width: var(--spinner-size);
  height: var(--spinner-size);
  border: var(--spinner-border-width) solid var(--spinner-track-color);
  border-top-color: var(--spinner-color);
  border-radius: 50%;
  animation: nomad-spinner-rotate var(--spinner-speed) linear infinite;
  vertical-align: middle;
  flex-shrink: 0;
}
.spinner.sm {
  width: var(--spinner-sm-size);
  height: var(--spinner-sm-size);
}
.spinner.md {
  width: var(--spinner-size);
  height: var(--spinner-size);
}
.spinner.lg {
  width: var(--spinner-lg-size);
  height: var(--spinner-lg-size);
}

@keyframes nomad-skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.skeleton {
  --skeleton-bg-color: var(--surface-color-deep);
  --skeleton-shimmer-color: var(--surface-color-sunken);
  --skeleton-border-radius: 0.25rem;
  --skeleton-text-height: 1em;
  --skeleton-speed: 1.5s;
}

.skeleton {
  display: block;
  border-radius: var(--skeleton-border-radius);
  background-color: var(--skeleton-bg-color);
  background-image: linear-gradient(90deg, var(--skeleton-bg-color) 25%, var(--skeleton-shimmer-color) 50%, var(--skeleton-bg-color) 75%);
  background-size: 200% 100%;
  animation: nomad-skeleton-shimmer var(--skeleton-speed) ease-in-out infinite;
}
.skeleton.text {
  height: var(--skeleton-text-height);
  width: 100%;
}
.skeleton.rect {
  border-radius: var(--skeleton-border-radius);
}
.skeleton.circle {
  border-radius: 50%;
}

.switch {
  --switch-track-width: 2.5rem;
  --switch-track-height: 1.375rem;
  --switch-track-sm-width: 2rem;
  --switch-track-sm-height: 1.125rem;
  --switch-track-lg-width: 3rem;
  --switch-track-lg-height: 1.625rem;
  --switch-track-bg-color: var(--surface-color-deep);
  --switch-track-checked-bg-color: var(--palette-default);
  --switch-track-border-color: var(--border-color);
  --switch-track-checked-border-color: var(--palette-default);
  --switch-track-border-radius: 10rem;
  --switch-track-border-width: 1px;
  --switch-track-disabled-bg-color: var(--border-color-subtle);
  --switch-track-focus-ring-color: black;
  --switch-track-focus-ring-offset: 2px;
  --switch-track-focus-ring-width: 2px;
  --switch-thumb-size: 1rem;
  --switch-thumb-sm-size: 0.75rem;
  --switch-thumb-lg-size: 1.25rem;
  --switch-thumb-offset: 0.1875rem;
  --switch-thumb-bg-color: var(--palette-accent-default);
  --switch-thumb-checked-bg-color: var(--palette-accent-default);
  --switch-thumb-disabled-bg-color: var(--border-color);
  --switch-track-checked-disabled-bg-color: var(--palette-lighter);
  --switch-thumb-checked-disabled-bg-color: var(--border-color-subtle);
  --switch-transition: 0.2s;
  --switch-gap: 0.5rem;
  --switch-disabled-opacity: 0.5;
  --switch-cursor: pointer;
  --switch-disabled-cursor: not-allowed;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--switch-gap);
  cursor: var(--switch-cursor);
}
.switch .switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.switch .switch-track {
  position: relative;
  display: inline-block;
  width: var(--switch-track-width);
  height: var(--switch-track-height);
  background-color: var(--switch-track-bg-color);
  border: var(--switch-track-border-width) solid var(--switch-track-border-color);
  border-radius: var(--switch-track-border-radius);
  transition: background-color var(--switch-transition), border-color var(--switch-transition);
  flex-shrink: 0;
}
.switch .switch-thumb {
  position: absolute;
  top: 50%;
  left: var(--switch-thumb-offset);
  transform: translateY(-50%);
  width: var(--switch-thumb-size);
  height: var(--switch-thumb-size);
  background-color: var(--switch-thumb-bg-color);
  border-radius: 50%;
  transition: left var(--switch-transition), background-color var(--switch-transition);
}
.switch .switch-input:checked ~ .switch-track {
  background-color: var(--switch-track-checked-bg-color);
  border-color: var(--switch-track-checked-border-color);
}
.switch .switch-input:checked ~ .switch-track .switch-thumb {
  left: calc(100% - var(--switch-thumb-size) - var(--switch-thumb-offset));
  background-color: var(--switch-thumb-checked-bg-color);
}
.switch .switch-input:disabled ~ .switch-track {
  background-color: var(--switch-track-disabled-bg-color);
  opacity: var(--switch-disabled-opacity);
  cursor: var(--switch-disabled-cursor);
}
.switch .switch-input:disabled ~ .switch-track .switch-thumb {
  background-color: var(--switch-thumb-disabled-bg-color);
}
.switch .switch-input:checked:disabled ~ .switch-track {
  background-color: var(--switch-track-checked-disabled-bg-color);
  border-color: var(--switch-track-checked-disabled-bg-color);
}
.switch .switch-input:checked:disabled ~ .switch-track .switch-thumb {
  background-color: var(--switch-thumb-checked-disabled-bg-color);
}
.switch.disabled {
  cursor: var(--switch-disabled-cursor);
  opacity: var(--switch-disabled-opacity);
}
.switch .switch-input:focus-visible:not(:disabled) ~ .switch-track {
  outline-width: var(--switch-track-focus-ring-width);
  outline-color: var(--switch-track-focus-ring-color);
  outline-offset: var(--switch-track-focus-ring-offset);
  outline-style: solid;
}
.switch.sm .switch-track {
  width: var(--switch-track-sm-width);
  height: var(--switch-track-sm-height);
}
.switch.sm .switch-thumb {
  width: var(--switch-thumb-sm-size);
  height: var(--switch-thumb-sm-size);
}
.switch.sm .switch-input:checked ~ .switch-track .switch-thumb {
  left: calc(100% - var(--switch-thumb-sm-size) - var(--switch-thumb-offset));
}
.switch.lg .switch-track {
  width: var(--switch-track-lg-width);
  height: var(--switch-track-lg-height);
}
.switch.lg .switch-thumb {
  width: var(--switch-thumb-lg-size);
  height: var(--switch-thumb-lg-size);
}
.switch.lg .switch-input:checked ~ .switch-track .switch-thumb {
  left: calc(100% - var(--switch-thumb-lg-size) - var(--switch-thumb-offset));
}

.switch-label {
  user-select: none;
}

.accordion {
  --accordion-bg-color: var(--surface-color-overlay);
  --accordion-header-bg-color: var(--surface-color-sunken);
  --accordion-header-hover-bg-color: var(--surface-color-deep);
  --accordion-header-color: var(--text-color);
  --accordion-header-open-bg-color: var(--surface-color-sunken);
  --accordion-header-open-color: var(--text-color);
  --accordion-border-color: var(--border-color);
  --accordion-border-radius: 0.25rem;
  --accordion-border-width: 1px;
  --accordion-padding: 0.75rem 1rem;
  --accordion-header-padding: 0.75rem 1rem;
  --accordion-transition: color 0.2s, background-color 0.2s, transform 0.2s;
  --accordion-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L16 12L10 18Z'/%3E%3C/svg%3E");
  --accordion-icon-open-rotation: 90deg;
  --accordion-icon-size: 1em;
  --accordion-icon-color: currentColor;
  --accordion-icon-hover-color: currentColor;
  --accordion-icon-hover-bg-color: transparent;
  --accordion-icon-border-radius: 0;
  --accordion-icon-open-color: currentColor;
}

.accordion {
  border-width: var(--accordion-border-width);
  border-style: solid;
  border-color: var(--accordion-border-color);
  border-radius: var(--accordion-border-radius);
  overflow: hidden;
}
.accordion > .accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: var(--accordion-header-padding);
  background-color: var(--accordion-header-bg-color);
  color: var(--accordion-header-color);
  cursor: pointer;
  user-select: none;
  transition: var(--accordion-transition);
}
.accordion > .accordion-header::-webkit-details-marker {
  display: none;
}
.accordion > .accordion-header::marker {
  content: none;
}
.accordion > .accordion-header:not(:has(.accordion-icon))::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-image: var(--accordion-icon-image);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transition: var(--accordion-transition);
}
.accordion > .accordion-header:hover {
  background-color: var(--accordion-header-hover-bg-color);
}
.accordion[open] > .accordion-header {
  background-color: var(--accordion-header-open-bg-color);
  color: var(--accordion-header-open-color);
}
.accordion[open] > .accordion-header:hover {
  background-color: var(--accordion-header-hover-bg-color);
}
.accordion[open] > .accordion-header:not(:has(.accordion-icon))::after {
  transform: rotate(var(--accordion-icon-open-rotation));
}
.accordion > .accordion-body {
  padding: var(--accordion-padding);
  background-color: var(--accordion-bg-color);
  border-top: var(--accordion-border-width) solid var(--accordion-border-color);
}

.accordion > .accordion-header > .accordion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--accordion-icon-size);
  height: var(--accordion-icon-size);
  color: var(--accordion-icon-color);
  border-radius: var(--accordion-icon-border-radius);
  transition: var(--accordion-transition);
}
.accordion > .accordion-header > .accordion-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  mask-image: var(--accordion-icon-image);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.accordion > .accordion-header > .accordion-icon:has(> *)::before {
  display: none;
}
.accordion > .accordion-header > .accordion-icon > svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.accordion > .accordion-header > .accordion-icon:hover {
  color: var(--accordion-icon-hover-color);
  background-color: var(--accordion-icon-hover-bg-color);
}

.accordion[open] > .accordion-header > .accordion-icon {
  transform: rotate(var(--accordion-icon-open-rotation));
  color: var(--accordion-icon-open-color);
}

.accordion-group {
  display: flex;
  flex-direction: column;
}
.accordion-group > .accordion {
  border-radius: 0;
  border-bottom-width: 0;
}
.accordion-group > .accordion:first-child {
  border-top-left-radius: var(--accordion-border-radius);
  border-top-right-radius: var(--accordion-border-radius);
}
.accordion-group > .accordion:last-child {
  border-bottom-left-radius: var(--accordion-border-radius);
  border-bottom-right-radius: var(--accordion-border-radius);
  border-bottom-width: var(--accordion-border-width);
}

.tooltip {
  --tooltip-bg-color: var(--text-color-strong);
  --tooltip-color: var(--surface-color-overlay);
  --tooltip-border-radius: 0.25rem;
  --tooltip-padding: 0.3em 0.6em;
  --tooltip-font-size: 0.8125rem;
  --tooltip-max-width: 16rem;
  --tooltip-offset: 0.5rem;
  --tooltip-z-index: 1000;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: default;
}
.tooltip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: var(--tooltip-z-index);
  background-color: var(--tooltip-bg-color);
  color: var(--tooltip-color);
  border-radius: var(--tooltip-border-radius);
  padding: var(--tooltip-padding);
  font-size: var(--tooltip-font-size);
  white-space: pre-wrap;
  max-width: var(--tooltip-max-width);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.tooltip[data-tooltip]:hover::after, .tooltip[data-tooltip]:focus-visible::after {
  opacity: 1;
}

.tooltip:not(.tooltip-right):not(.tooltip-bottom):not(.tooltip-left)[data-tooltip]::after,
.tooltip.tooltip-top[data-tooltip]::after {
  bottom: calc(100% + var(--tooltip-offset));
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.tooltip-bottom[data-tooltip]::after {
  top: calc(100% + var(--tooltip-offset));
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.tooltip-right[data-tooltip]::after {
  top: 50%;
  left: calc(100% + var(--tooltip-offset));
  transform: translateY(-50%);
}

.tooltip.tooltip-left[data-tooltip]::after {
  top: 50%;
  right: calc(100% + var(--tooltip-offset));
  transform: translateY(-50%);
}

.breadcrumb {
  --breadcrumb-color: var(--palette-default);
  --breadcrumb-hover-color: var(--palette-dark);
  --breadcrumb-active-color: var(--text-color-subtle);
  --breadcrumb-separator-color: var(--text-color-subtle);
  --breadcrumb-separator: "/";
  --breadcrumb-gap: 0.5rem;
  --breadcrumb-font-size: inherit;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--breadcrumb-gap);
  font-size: var(--breadcrumb-font-size);
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--breadcrumb-gap);
}
.breadcrumb-item + .breadcrumb-item::before {
  content: var(--breadcrumb-separator);
  color: var(--breadcrumb-separator-color);
  user-select: none;
}
.breadcrumb-item a {
  color: var(--breadcrumb-color);
  text-decoration: none;
}
.breadcrumb-item a:hover {
  color: var(--breadcrumb-hover-color);
  text-decoration: underline;
}
.breadcrumb-item.active {
  color: var(--breadcrumb-active-color);
}

.pagination {
  --pagination-bg-color: var(--surface-color-overlay);
  --pagination-color: var(--text-color);
  --pagination-border-color: var(--border-color);
  --pagination-hover-bg-color: var(--surface-color-sunken);
  --pagination-hover-color: var(--text-color);
  --pagination-active-bg-color: var(--palette-default);
  --pagination-active-color: var(--palette-accent-default);
  --pagination-active-border-color: var(--palette-default);
  --pagination-disabled-color: var(--border-color);
  --pagination-disabled-bg-color: var(--surface-color-overlay);
  --pagination-border-radius: 0.25rem;
  --pagination-border-width: 1px;
  --pagination-padding: 0.375rem 0.75rem;
  --pagination-font-size: inherit;
  --pagination-gap: 0.25rem;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--pagination-gap);
  font-size: var(--pagination-font-size);
}

.page-item {
  display: block;
}

.page-link {
  display: block;
  padding: var(--pagination-padding);
  background-color: var(--pagination-bg-color);
  color: var(--pagination-color);
  border: var(--pagination-border-width) solid var(--pagination-border-color);
  border-radius: var(--pagination-border-radius);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.5;
}
.page-link:hover {
  background-color: var(--pagination-hover-bg-color);
  color: var(--pagination-hover-color);
}

.page-item.active .page-link {
  background-color: var(--pagination-active-bg-color);
  color: var(--pagination-active-color);
  border-color: var(--pagination-active-border-color);
  cursor: default;
}

.page-item.disabled .page-link {
  background-color: var(--pagination-disabled-bg-color);
  color: var(--pagination-disabled-color);
  pointer-events: none;
  cursor: not-allowed;
}

.pagination.sm .page-link {
  font-size: 0.875em;
  padding: 0.25rem 0.5rem;
}
.pagination.lg .page-link {
  font-size: 1.125em;
  padding: 0.5rem 1rem;
}

.card {
  --card-bg-color: var(--surface-color-overlay);
  --card-color: var(--text-color);
  --card-border-color: var(--border-color);
  --card-header-bg-color: var(--surface-color-sunken);
  --card-header-color: var(--text-color);
  --card-footer-bg-color: var(--surface-color-sunken);
  --card-footer-color: var(--text-color-subtle);
  --card-border-radius: 0.375rem;
  --card-outline-border-width: 1px;
  --card-inner-border-width: 1px;
  --card-padding: 1rem;
  --card-header-padding: 0.75rem 1rem;
  --card-footer-padding: 0.75rem 1rem;
}

.card {
  background-color: var(--card-bg-color);
  color: var(--card-color);
  border: var(--card-outline-border-width) solid var(--card-border-color);
  border-radius: var(--card-border-radius);
  overflow: hidden;
}
.card > .card-header {
  padding: var(--card-header-padding);
  background-color: var(--card-header-bg-color);
  color: var(--card-header-color);
  border-bottom: var(--card-inner-border-width) solid var(--card-border-color);
}
.card > .card-body {
  padding: var(--card-padding);
}
.card > .card-footer {
  padding: var(--card-footer-padding);
  background-color: var(--card-footer-bg-color);
  color: var(--card-footer-color);
  border-top: var(--card-inner-border-width) solid var(--card-border-color);
}
.card > .card-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-bottom: var(--card-inner-border-width) solid var(--card-border-color);
}
.card > .card-img-bottom {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-top: var(--card-inner-border-width) solid var(--card-border-color);
}

.card.outlineless {
  --card-outline-border-width: none;
}

.divider {
  --divider-color: var(--border-color);
  --divider-text-color: var(--text-color-subtle);
  --divider-text-gap: 0.75rem;
  --divider-width: 1px;
  --divider-margin: 1rem 0;
  --divider-vertical-height: 1em;
}

hr.divider {
  border: none;
  border-top: var(--divider-width) solid var(--divider-color);
  margin: var(--divider-margin);
}

div.divider,
.divider:not(hr):not(span) {
  display: flex;
  align-items: center;
  gap: var(--divider-text-gap);
  margin: var(--divider-margin);
  color: var(--divider-text-color);
}
div.divider::before, div.divider::after,
.divider:not(hr):not(span)::before,
.divider:not(hr):not(span)::after {
  content: "";
  flex: 1;
  height: var(--divider-width);
  background-color: var(--divider-color);
}

span.divider.vertical,
.divider.vertical {
  display: inline-block;
  width: var(--divider-width);
  height: var(--divider-vertical-height);
  background-color: var(--divider-color);
  margin: 0 var(--divider-text-gap);
  vertical-align: middle;
}

.dialog {
  --dialog-bg-color: var(--surface-color-overlay);
  --dialog-color: var(--text-color);
  --dialog-border-color: var(--border-color);
  --dialog-header-bg-color: var(--surface-color-sunken);
  --dialog-header-color: var(--text-color);
  --dialog-footer-bg-color: var(--surface-color-sunken);
  --dialog-footer-color: var(--text-color-subtle);
  --dialog-backdrop-color: rgba(0, 0, 0, 0.5);
  --dialog-border-radius: 0.375rem;
  --dialog-border-width: 1px;
  --dialog-inner-border-width: 1px;
  --dialog-padding: 1rem;
  --dialog-header-padding: 0.75rem 1rem;
  --dialog-footer-padding: 0.75rem 1rem;
  --dialog-width: 100%;
  --dialog-max-width: 32rem;
  --dialog-max-height: calc(100vh - 4rem);
  --dialog-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.12);
  --dialog-z-index: 1050;
  --dialog-backdrop-z-index: 1040;
  --dialog-transition: opacity 0.2s ease, transform 0.2s ease;
}

.dialog-backdrop {
  --dialog-backdrop-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: var(--dialog-backdrop-color);
  z-index: var(--dialog-backdrop-z-index);
}
.dialog-backdrop.open {
  display: flex;
}

.dialog {
  background-color: var(--dialog-bg-color);
  color: var(--dialog-color);
  border: var(--dialog-border-width) solid var(--dialog-border-color);
  border-radius: var(--dialog-border-radius);
  box-shadow: var(--dialog-shadow);
  width: var(--dialog-width);
  max-width: var(--dialog-max-width);
  max-height: var(--dialog-max-height);
  overflow: hidden;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0 auto;
}
.dialog:is(dialog) {
  padding: 0;
  border: var(--dialog-border-width) solid var(--dialog-border-color);
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  margin: 0;
}
.dialog:is(dialog)::backdrop {
  background-color: var(--dialog-backdrop-color);
}
.dialog:is(dialog):not([open]) {
  display: none;
}
.dialog-backdrop > .dialog {
  position: relative;
  top: auto;
  left: auto;
  -webkit-transform: none;
  transform: none;
}
.dialog > .dialog-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: var(--dialog-header-padding);
  background-color: var(--dialog-header-bg-color);
  color: var(--dialog-header-color);
  border-bottom: var(--dialog-inner-border-width) solid var(--dialog-border-color);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.dialog > .dialog-body {
  padding: var(--dialog-padding);
  overflow-y: auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}
.dialog > .dialog-footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: end;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: var(--dialog-footer-padding);
  background-color: var(--dialog-footer-bg-color);
  color: var(--dialog-footer-color);
  border-top: var(--dialog-inner-border-width) solid var(--dialog-border-color);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.dialog.sm {
  --dialog-max-width: 20rem;
}

.dialog.lg {
  --dialog-max-width: 48rem;
}

.dialog.xl {
  --dialog-max-width: 64rem;
}

.dialog.full {
  --dialog-max-width: calc(100vw - 2rem);
  --dialog-max-height: calc(100vh - 2rem);
}

.dialog.scrollable > .dialog-body {
  overflow-y: auto;
}

.avatar {
  --avatar-size: 2.5rem;
  --avatar-sm-size: 1.75rem;
  --avatar-lg-size: 4rem;
  --avatar-bg-color: var(--palette-default);
  --avatar-color: var(--palette-accent-default);
  --avatar-border-color: transparent;
  --avatar-border-width: 0;
  --avatar-border-radius: 50%;
  --avatar-font-size: 1em;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  width: var(--avatar-size);
  height: var(--avatar-size);
  font-size: var(--avatar-font-size);
  background-color: var(--avatar-bg-color);
  color: var(--avatar-color);
  border-radius: var(--avatar-border-radius);
  border: var(--avatar-border-width) solid var(--avatar-border-color);
  font-weight: 600;
  line-height: 1;
  user-select: none;
  vertical-align: middle;
}
.avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar.sm {
  width: var(--avatar-sm-size);
  height: var(--avatar-sm-size);
  font-size: 0.75em;
}
.avatar.md {
  width: var(--avatar-size);
  height: var(--avatar-size);
  font-size: var(--avatar-font-size);
}
.avatar.lg {
  width: var(--avatar-lg-size);
  height: var(--avatar-lg-size);
  font-size: 1.5em;
}

.avatar.circle {
  --avatar-border-radius: 50%;
}
.avatar.square {
  --avatar-border-radius: 0;
}
.avatar.rounded {
  --avatar-border-radius: 0.375rem;
}

.list,
.list-group {
  --list-bg-color: transparent;
  --list-color: var(--text-color);
  --list-hover-bg-color: var(--surface-color-sunken);
  --list-hover-color: var(--text-color);
  --list-active-bg-color: var(--palette-default);
  --list-active-color: var(--palette-accent-default);
  --list-disabled-color: var(--neutral-default);
  --list-border-color: var(--border-color);
  --list-border-radius: 0.375rem;
  --list-border-width: 1px;
  --list-active-border-radius: 0px;
  --list-padding: 0.5rem 1rem;
  --list-link-padding: 0.75rem 1rem;
  --list-link-arrow: "›";
  --list-link-arrow-color: var(--text-color-muted);
  --list-item-desc-color: var(--text-color-subtle);
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list > .list-item {
  display: block;
  padding: var(--list-padding);
  color: var(--list-color);
  background-color: var(--list-bg-color);
}
.list > .list-item.active {
  background-color: var(--list-active-bg-color);
  color: var(--list-active-color);
  border-radius: var(--list-active-border-radius);
}
.list > .list-item.disabled {
  color: var(--list-disabled-color);
  pointer-events: none;
}

.list-group {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style: none;
  border-radius: var(--list-border-radius);
  overflow: hidden;
  border: var(--list-border-width) solid var(--list-border-color);
}

.list-group > .list-group-item {
  display: block;
  padding: var(--list-padding);
  color: var(--list-color);
  background-color: var(--list-bg-color);
  text-decoration: none;
}
.list-group > .list-group-item + .list-group-item {
  border-top: var(--list-border-width) solid var(--list-border-color);
}
.list-group > .list-group-item:hover {
  background-color: var(--list-hover-bg-color);
  color: var(--list-hover-color);
}
.list-group > .list-group-item.active {
  background-color: var(--list-active-bg-color);
  color: var(--list-active-color);
  border-color: var(--list-active-bg-color);
  border-radius: var(--list-active-border-radius);
}
.list-group > .list-group-item.disabled {
  color: var(--list-disabled-color);
  pointer-events: none;
}

.list-group > .list-group-item.link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--list-link-padding);
}
.list-group > .list-group-item.link::after {
  content: var(--list-link-arrow);
  margin-left: auto;
  color: var(--list-link-arrow-color);
  flex-shrink: 0;
  font-size: 1.25em;
  line-height: 1;
}
.list-group > .list-group-item.link .list-item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--list-link-arrow-color);
}
.list-group > .list-group-item.link .list-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.list-group > .list-group-item.link .list-item-desc {
  font-size: 0.8125em;
  color: var(--list-item-desc-color);
}

.link-card {
  --link-card-bg-color: var(--surface-color-overlay);
  --link-card-color: var(--text-color);
  --link-card-hover-bg-color: var(--surface-color-sunken);
  --link-card-hover-color: var(--text-color);
  --link-card-active-bg-color: var(--palette-default);
  --link-card-active-color: var(--palette-accent-default);
  --link-card-disabled-color: var(--neutral-default);
  --link-card-icon-color: var(--text-color-muted);
  --link-card-desc-color: var(--text-color-subtle);
  --link-card-border-color: var(--border-color);
  --link-card-border-radius: 0.375rem;
  --link-card-border-width: 1px;
  --link-card-padding: 0.75rem 1rem;
  --link-card-gap: 0.75rem;
  --link-card-shadow: none;
}

.link-card {
  display: flex;
  align-items: center;
  gap: var(--link-card-gap);
  padding: var(--link-card-padding);
  background-color: var(--link-card-bg-color);
  color: var(--link-card-color);
  border: var(--link-card-border-width) solid var(--link-card-border-color);
  border-radius: var(--link-card-border-radius);
  box-shadow: var(--link-card-shadow);
  text-decoration: none;
  cursor: pointer;
}
.link-card:hover {
  background-color: var(--link-card-hover-bg-color);
  color: var(--link-card-hover-color);
}
.link-card.active {
  background-color: var(--link-card-active-bg-color);
  color: var(--link-card-active-color);
  border-color: var(--link-card-active-bg-color);
}
.link-card.disabled {
  color: var(--link-card-disabled-color);
  pointer-events: none;
}
.link-card .link-card-leading {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--link-card-icon-color);
}
.link-card .link-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.link-card .link-card-desc {
  font-size: 0.8125em;
  color: var(--link-card-desc-color);
}
.link-card .link-card-trailing {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--link-card-icon-color);
}

.tree {
  --tree-color: var(--text-color);
  --tree-muted-color: var(--text-color-muted);
  --tree-hover-bg-color: var(--surface-color-sunken);
  --tree-active-bg-color: var(--palette-default);
  --tree-active-color: var(--palette-accent-default);
  --tree-guide-color: var(--border-color);
  --tree-border-radius: 0.25rem;
  --tree-indent: 1rem;
  --tree-row-padding: 0.2rem 0.5rem;
  --tree-row-gap: 0.375rem;
  --tree-guide-width: 1px;
  --tree-leaf-indent: calc(0.5rem + var(--tree-toggle-size) + var(--tree-row-gap));
  --tree-toggle-size: 0.875em;
  --tree-toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L16 12L10 18Z'/%3E%3C/svg%3E");
  --tree-toggle-open-rotation: 90deg;
  --tree-toggle-opacity: 0.5;
  --tree-transition: background-color 0.15s ease, color 0.15s ease;
}

.tree {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: inherit;
  color: var(--tree-color);
}
.tree .tree {
  padding-left: var(--tree-indent);
  border-left: var(--tree-guide-width) solid var(--tree-guide-color);
  margin-left: calc(0.5rem + var(--tree-toggle-size) * 0.5);
}
.tree > li {
  list-style: none;
}
.tree details > summary {
  display: flex;
  align-items: center;
  gap: var(--tree-row-gap);
  padding: var(--tree-row-padding);
  border-radius: var(--tree-border-radius);
  color: var(--tree-color);
  cursor: pointer;
  user-select: none;
  transition: var(--tree-transition);
  list-style: none;
}
.tree details > summary::-webkit-details-marker {
  display: none;
}
.tree details > summary::marker {
  content: none;
}
.tree details > summary::before {
  content: "";
  display: inline-flex;
  flex-shrink: 0;
  width: var(--tree-toggle-size);
  height: var(--tree-toggle-size);
  background-color: currentColor;
  mask-image: var(--tree-toggle-icon);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  opacity: var(--tree-toggle-opacity);
  transition: transform 0.2s ease, opacity 0.15s ease;
}
.tree details > summary:hover {
  background-color: var(--tree-hover-bg-color);
}
.tree details > summary:hover::before {
  opacity: 1;
}
.tree details[open] > summary::before {
  transform: rotate(var(--tree-toggle-open-rotation));
  opacity: 1;
}
.tree li.active > details > summary,
.tree details.active > summary {
  background-color: var(--tree-active-bg-color);
  color: var(--tree-active-color);
}
.tree li.active > details > summary::before,
.tree details.active > summary::before {
  opacity: 1;
}
.tree li.active > details > summary:hover,
.tree details.active > summary:hover {
  background-color: var(--tree-active-bg-color);
}
.tree .tree-row {
  display: flex;
  align-items: center;
  gap: var(--tree-row-gap);
  padding: var(--tree-row-padding);
  padding-inline-start: var(--tree-leaf-indent);
  border-radius: var(--tree-border-radius);
  color: var(--tree-color);
  text-decoration: none;
  transition: var(--tree-transition);
  cursor: default;
}
.tree .tree-row[href], .tree .tree-row[tabindex],
.tree .tree-row button.tree .tree-row {
  cursor: pointer;
}
.tree .tree-row[href]:hover, .tree .tree-row[tabindex]:hover,
.tree .tree-row button.tree .tree-row:hover {
  background-color: var(--tree-hover-bg-color);
}
.tree .tree-row.active {
  background-color: var(--tree-active-bg-color);
  color: var(--tree-active-color);
}
.tree .tree-row.active:hover {
  background-color: var(--tree-active-bg-color);
}
.tree li.active > .tree-row {
  background-color: var(--tree-active-bg-color);
  color: var(--tree-active-color);
}
.tree .tree-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--tree-muted-color);
  font-size: 1em;
}
.active > .tree .tree-icon, .tree-row.active > .tree .tree-icon {
  color: inherit;
}
.tree .tree-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tree .tree-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.75em;
  color: var(--tree-muted-color);
  line-height: 1;
}

.tree.compact {
  --tree-row-padding: 0.1rem 0.375rem;
  --tree-row-gap: 0.25rem;
  --tree-indent: 0.75rem;
  --tree-toggle-size: 0.75em;
  --tree-leaf-indent: calc(0.375rem + var(--tree-toggle-size) + var(--tree-row-gap));
}

.tree.no-lines .tree,
.tree.no-lines.tree {
  --tree-guide-width: 0;
}

.text-body {
  color: var(--text-color);
}

.text-body-subtle {
  color: var(--text-color-subtle);
}

.text-body-muted {
  color: var(--text-color-muted);
}

.text-body-strong {
  color: var(--text-color-strong);
}

.bg-surface {
  background-color: var(--surface-color);
}

.bg-surface-raised {
  background-color: var(--surface-color-raised);
}

.bg-surface-overlay {
  background-color: var(--surface-color-overlay);
}

.bg-surface-sunken {
  background-color: var(--surface-color-sunken);
}

.bg-surface-deep {
  background-color: var(--surface-color-deep);
}

.text-primary {
  color: var(--primary-default);
}

.bg-primary {
  background-color: var(--primary-default);
  color: var(--primary-accent-default);
}

.text-primary-lighter {
  color: var(--primary-lighter);
}

.bg-primary-lighter {
  background-color: var(--primary-lighter);
  color: var(--primary-accent-lighter);
}

.text-primary-light {
  color: var(--primary-light);
}

.bg-primary-light {
  background-color: var(--primary-light);
  color: var(--primary-accent-light);
}

.text-primary-dark {
  color: var(--primary-dark);
}

.bg-primary-dark {
  background-color: var(--primary-dark);
  color: var(--primary-accent-dark);
}

.text-primary-darker {
  color: var(--primary-darker);
}

.bg-primary-darker {
  background-color: var(--primary-darker);
  color: var(--primary-accent-darker);
}

.text-primary-0 {
  color: var(--primary-color-0);
}

.bg-primary-0 {
  background-color: var(--primary-color-0);
  color: var(--primary-accent-0);
}

.text-primary-gray-0 {
  color: var(--primary-gray-0);
}

.bg-primary-gray-0 {
  background-color: var(--primary-gray-0);
  color: var(--primary-accent-0);
}

.text-primary-accent-0 {
  color: var(--primary-accent-0);
}

.text-primary-1 {
  color: var(--primary-color-1);
}

.bg-primary-1 {
  background-color: var(--primary-color-1);
  color: var(--primary-accent-1);
}

.text-primary-gray-1 {
  color: var(--primary-gray-1);
}

.bg-primary-gray-1 {
  background-color: var(--primary-gray-1);
  color: var(--primary-accent-1);
}

.text-primary-accent-1 {
  color: var(--primary-accent-1);
}

.text-primary-2 {
  color: var(--primary-color-2);
}

.bg-primary-2 {
  background-color: var(--primary-color-2);
  color: var(--primary-accent-2);
}

.text-primary-gray-2 {
  color: var(--primary-gray-2);
}

.bg-primary-gray-2 {
  background-color: var(--primary-gray-2);
  color: var(--primary-accent-2);
}

.text-primary-accent-2 {
  color: var(--primary-accent-2);
}

.text-primary-3 {
  color: var(--primary-color-3);
}

.bg-primary-3 {
  background-color: var(--primary-color-3);
  color: var(--primary-accent-3);
}

.text-primary-gray-3 {
  color: var(--primary-gray-3);
}

.bg-primary-gray-3 {
  background-color: var(--primary-gray-3);
  color: var(--primary-accent-3);
}

.text-primary-accent-3 {
  color: var(--primary-accent-3);
}

.text-primary-4 {
  color: var(--primary-color-4);
}

.bg-primary-4 {
  background-color: var(--primary-color-4);
  color: var(--primary-accent-4);
}

.text-primary-gray-4 {
  color: var(--primary-gray-4);
}

.bg-primary-gray-4 {
  background-color: var(--primary-gray-4);
  color: var(--primary-accent-4);
}

.text-primary-accent-4 {
  color: var(--primary-accent-4);
}

.text-primary-5 {
  color: var(--primary-color-5);
}

.bg-primary-5 {
  background-color: var(--primary-color-5);
  color: var(--primary-accent-5);
}

.text-primary-gray-5 {
  color: var(--primary-gray-5);
}

.bg-primary-gray-5 {
  background-color: var(--primary-gray-5);
  color: var(--primary-accent-5);
}

.text-primary-accent-5 {
  color: var(--primary-accent-5);
}

.text-primary-6 {
  color: var(--primary-color-6);
}

.bg-primary-6 {
  background-color: var(--primary-color-6);
  color: var(--primary-accent-6);
}

.text-primary-gray-6 {
  color: var(--primary-gray-6);
}

.bg-primary-gray-6 {
  background-color: var(--primary-gray-6);
  color: var(--primary-accent-6);
}

.text-primary-accent-6 {
  color: var(--primary-accent-6);
}

.text-primary-7 {
  color: var(--primary-color-7);
}

.bg-primary-7 {
  background-color: var(--primary-color-7);
  color: var(--primary-accent-7);
}

.text-primary-gray-7 {
  color: var(--primary-gray-7);
}

.bg-primary-gray-7 {
  background-color: var(--primary-gray-7);
  color: var(--primary-accent-7);
}

.text-primary-accent-7 {
  color: var(--primary-accent-7);
}

.text-primary-8 {
  color: var(--primary-color-8);
}

.bg-primary-8 {
  background-color: var(--primary-color-8);
  color: var(--primary-accent-8);
}

.text-primary-gray-8 {
  color: var(--primary-gray-8);
}

.bg-primary-gray-8 {
  background-color: var(--primary-gray-8);
  color: var(--primary-accent-8);
}

.text-primary-accent-8 {
  color: var(--primary-accent-8);
}

.text-primary-9 {
  color: var(--primary-color-9);
}

.bg-primary-9 {
  background-color: var(--primary-color-9);
  color: var(--primary-accent-9);
}

.text-primary-gray-9 {
  color: var(--primary-gray-9);
}

.bg-primary-gray-9 {
  background-color: var(--primary-gray-9);
  color: var(--primary-accent-9);
}

.text-primary-accent-9 {
  color: var(--primary-accent-9);
}

.text-primary-10 {
  color: var(--primary-color-10);
}

.bg-primary-10 {
  background-color: var(--primary-color-10);
  color: var(--primary-accent-10);
}

.text-primary-gray-10 {
  color: var(--primary-gray-10);
}

.bg-primary-gray-10 {
  background-color: var(--primary-gray-10);
  color: var(--primary-accent-10);
}

.text-primary-accent-10 {
  color: var(--primary-accent-10);
}

.text-secondary {
  color: var(--secondary-default);
}

.bg-secondary {
  background-color: var(--secondary-default);
  color: var(--secondary-accent-default);
}

.text-secondary-lighter {
  color: var(--secondary-lighter);
}

.bg-secondary-lighter {
  background-color: var(--secondary-lighter);
  color: var(--secondary-accent-lighter);
}

.text-secondary-light {
  color: var(--secondary-light);
}

.bg-secondary-light {
  background-color: var(--secondary-light);
  color: var(--secondary-accent-light);
}

.text-secondary-dark {
  color: var(--secondary-dark);
}

.bg-secondary-dark {
  background-color: var(--secondary-dark);
  color: var(--secondary-accent-dark);
}

.text-secondary-darker {
  color: var(--secondary-darker);
}

.bg-secondary-darker {
  background-color: var(--secondary-darker);
  color: var(--secondary-accent-darker);
}

.text-secondary-0 {
  color: var(--secondary-color-0);
}

.bg-secondary-0 {
  background-color: var(--secondary-color-0);
  color: var(--secondary-accent-0);
}

.text-secondary-gray-0 {
  color: var(--secondary-gray-0);
}

.bg-secondary-gray-0 {
  background-color: var(--secondary-gray-0);
  color: var(--secondary-accent-0);
}

.text-secondary-accent-0 {
  color: var(--secondary-accent-0);
}

.text-secondary-1 {
  color: var(--secondary-color-1);
}

.bg-secondary-1 {
  background-color: var(--secondary-color-1);
  color: var(--secondary-accent-1);
}

.text-secondary-gray-1 {
  color: var(--secondary-gray-1);
}

.bg-secondary-gray-1 {
  background-color: var(--secondary-gray-1);
  color: var(--secondary-accent-1);
}

.text-secondary-accent-1 {
  color: var(--secondary-accent-1);
}

.text-secondary-2 {
  color: var(--secondary-color-2);
}

.bg-secondary-2 {
  background-color: var(--secondary-color-2);
  color: var(--secondary-accent-2);
}

.text-secondary-gray-2 {
  color: var(--secondary-gray-2);
}

.bg-secondary-gray-2 {
  background-color: var(--secondary-gray-2);
  color: var(--secondary-accent-2);
}

.text-secondary-accent-2 {
  color: var(--secondary-accent-2);
}

.text-secondary-3 {
  color: var(--secondary-color-3);
}

.bg-secondary-3 {
  background-color: var(--secondary-color-3);
  color: var(--secondary-accent-3);
}

.text-secondary-gray-3 {
  color: var(--secondary-gray-3);
}

.bg-secondary-gray-3 {
  background-color: var(--secondary-gray-3);
  color: var(--secondary-accent-3);
}

.text-secondary-accent-3 {
  color: var(--secondary-accent-3);
}

.text-secondary-4 {
  color: var(--secondary-color-4);
}

.bg-secondary-4 {
  background-color: var(--secondary-color-4);
  color: var(--secondary-accent-4);
}

.text-secondary-gray-4 {
  color: var(--secondary-gray-4);
}

.bg-secondary-gray-4 {
  background-color: var(--secondary-gray-4);
  color: var(--secondary-accent-4);
}

.text-secondary-accent-4 {
  color: var(--secondary-accent-4);
}

.text-secondary-5 {
  color: var(--secondary-color-5);
}

.bg-secondary-5 {
  background-color: var(--secondary-color-5);
  color: var(--secondary-accent-5);
}

.text-secondary-gray-5 {
  color: var(--secondary-gray-5);
}

.bg-secondary-gray-5 {
  background-color: var(--secondary-gray-5);
  color: var(--secondary-accent-5);
}

.text-secondary-accent-5 {
  color: var(--secondary-accent-5);
}

.text-secondary-6 {
  color: var(--secondary-color-6);
}

.bg-secondary-6 {
  background-color: var(--secondary-color-6);
  color: var(--secondary-accent-6);
}

.text-secondary-gray-6 {
  color: var(--secondary-gray-6);
}

.bg-secondary-gray-6 {
  background-color: var(--secondary-gray-6);
  color: var(--secondary-accent-6);
}

.text-secondary-accent-6 {
  color: var(--secondary-accent-6);
}

.text-secondary-7 {
  color: var(--secondary-color-7);
}

.bg-secondary-7 {
  background-color: var(--secondary-color-7);
  color: var(--secondary-accent-7);
}

.text-secondary-gray-7 {
  color: var(--secondary-gray-7);
}

.bg-secondary-gray-7 {
  background-color: var(--secondary-gray-7);
  color: var(--secondary-accent-7);
}

.text-secondary-accent-7 {
  color: var(--secondary-accent-7);
}

.text-secondary-8 {
  color: var(--secondary-color-8);
}

.bg-secondary-8 {
  background-color: var(--secondary-color-8);
  color: var(--secondary-accent-8);
}

.text-secondary-gray-8 {
  color: var(--secondary-gray-8);
}

.bg-secondary-gray-8 {
  background-color: var(--secondary-gray-8);
  color: var(--secondary-accent-8);
}

.text-secondary-accent-8 {
  color: var(--secondary-accent-8);
}

.text-secondary-9 {
  color: var(--secondary-color-9);
}

.bg-secondary-9 {
  background-color: var(--secondary-color-9);
  color: var(--secondary-accent-9);
}

.text-secondary-gray-9 {
  color: var(--secondary-gray-9);
}

.bg-secondary-gray-9 {
  background-color: var(--secondary-gray-9);
  color: var(--secondary-accent-9);
}

.text-secondary-accent-9 {
  color: var(--secondary-accent-9);
}

.text-secondary-10 {
  color: var(--secondary-color-10);
}

.bg-secondary-10 {
  background-color: var(--secondary-color-10);
  color: var(--secondary-accent-10);
}

.text-secondary-gray-10 {
  color: var(--secondary-gray-10);
}

.bg-secondary-gray-10 {
  background-color: var(--secondary-gray-10);
  color: var(--secondary-accent-10);
}

.text-secondary-accent-10 {
  color: var(--secondary-accent-10);
}

.text-tertiary {
  color: var(--tertiary-default);
}

.bg-tertiary {
  background-color: var(--tertiary-default);
  color: var(--tertiary-accent-default);
}

.text-tertiary-lighter {
  color: var(--tertiary-lighter);
}

.bg-tertiary-lighter {
  background-color: var(--tertiary-lighter);
  color: var(--tertiary-accent-lighter);
}

.text-tertiary-light {
  color: var(--tertiary-light);
}

.bg-tertiary-light {
  background-color: var(--tertiary-light);
  color: var(--tertiary-accent-light);
}

.text-tertiary-dark {
  color: var(--tertiary-dark);
}

.bg-tertiary-dark {
  background-color: var(--tertiary-dark);
  color: var(--tertiary-accent-dark);
}

.text-tertiary-darker {
  color: var(--tertiary-darker);
}

.bg-tertiary-darker {
  background-color: var(--tertiary-darker);
  color: var(--tertiary-accent-darker);
}

.text-tertiary-0 {
  color: var(--tertiary-color-0);
}

.bg-tertiary-0 {
  background-color: var(--tertiary-color-0);
  color: var(--tertiary-accent-0);
}

.text-tertiary-gray-0 {
  color: var(--tertiary-gray-0);
}

.bg-tertiary-gray-0 {
  background-color: var(--tertiary-gray-0);
  color: var(--tertiary-accent-0);
}

.text-tertiary-accent-0 {
  color: var(--tertiary-accent-0);
}

.text-tertiary-1 {
  color: var(--tertiary-color-1);
}

.bg-tertiary-1 {
  background-color: var(--tertiary-color-1);
  color: var(--tertiary-accent-1);
}

.text-tertiary-gray-1 {
  color: var(--tertiary-gray-1);
}

.bg-tertiary-gray-1 {
  background-color: var(--tertiary-gray-1);
  color: var(--tertiary-accent-1);
}

.text-tertiary-accent-1 {
  color: var(--tertiary-accent-1);
}

.text-tertiary-2 {
  color: var(--tertiary-color-2);
}

.bg-tertiary-2 {
  background-color: var(--tertiary-color-2);
  color: var(--tertiary-accent-2);
}

.text-tertiary-gray-2 {
  color: var(--tertiary-gray-2);
}

.bg-tertiary-gray-2 {
  background-color: var(--tertiary-gray-2);
  color: var(--tertiary-accent-2);
}

.text-tertiary-accent-2 {
  color: var(--tertiary-accent-2);
}

.text-tertiary-3 {
  color: var(--tertiary-color-3);
}

.bg-tertiary-3 {
  background-color: var(--tertiary-color-3);
  color: var(--tertiary-accent-3);
}

.text-tertiary-gray-3 {
  color: var(--tertiary-gray-3);
}

.bg-tertiary-gray-3 {
  background-color: var(--tertiary-gray-3);
  color: var(--tertiary-accent-3);
}

.text-tertiary-accent-3 {
  color: var(--tertiary-accent-3);
}

.text-tertiary-4 {
  color: var(--tertiary-color-4);
}

.bg-tertiary-4 {
  background-color: var(--tertiary-color-4);
  color: var(--tertiary-accent-4);
}

.text-tertiary-gray-4 {
  color: var(--tertiary-gray-4);
}

.bg-tertiary-gray-4 {
  background-color: var(--tertiary-gray-4);
  color: var(--tertiary-accent-4);
}

.text-tertiary-accent-4 {
  color: var(--tertiary-accent-4);
}

.text-tertiary-5 {
  color: var(--tertiary-color-5);
}

.bg-tertiary-5 {
  background-color: var(--tertiary-color-5);
  color: var(--tertiary-accent-5);
}

.text-tertiary-gray-5 {
  color: var(--tertiary-gray-5);
}

.bg-tertiary-gray-5 {
  background-color: var(--tertiary-gray-5);
  color: var(--tertiary-accent-5);
}

.text-tertiary-accent-5 {
  color: var(--tertiary-accent-5);
}

.text-tertiary-6 {
  color: var(--tertiary-color-6);
}

.bg-tertiary-6 {
  background-color: var(--tertiary-color-6);
  color: var(--tertiary-accent-6);
}

.text-tertiary-gray-6 {
  color: var(--tertiary-gray-6);
}

.bg-tertiary-gray-6 {
  background-color: var(--tertiary-gray-6);
  color: var(--tertiary-accent-6);
}

.text-tertiary-accent-6 {
  color: var(--tertiary-accent-6);
}

.text-tertiary-7 {
  color: var(--tertiary-color-7);
}

.bg-tertiary-7 {
  background-color: var(--tertiary-color-7);
  color: var(--tertiary-accent-7);
}

.text-tertiary-gray-7 {
  color: var(--tertiary-gray-7);
}

.bg-tertiary-gray-7 {
  background-color: var(--tertiary-gray-7);
  color: var(--tertiary-accent-7);
}

.text-tertiary-accent-7 {
  color: var(--tertiary-accent-7);
}

.text-tertiary-8 {
  color: var(--tertiary-color-8);
}

.bg-tertiary-8 {
  background-color: var(--tertiary-color-8);
  color: var(--tertiary-accent-8);
}

.text-tertiary-gray-8 {
  color: var(--tertiary-gray-8);
}

.bg-tertiary-gray-8 {
  background-color: var(--tertiary-gray-8);
  color: var(--tertiary-accent-8);
}

.text-tertiary-accent-8 {
  color: var(--tertiary-accent-8);
}

.text-tertiary-9 {
  color: var(--tertiary-color-9);
}

.bg-tertiary-9 {
  background-color: var(--tertiary-color-9);
  color: var(--tertiary-accent-9);
}

.text-tertiary-gray-9 {
  color: var(--tertiary-gray-9);
}

.bg-tertiary-gray-9 {
  background-color: var(--tertiary-gray-9);
  color: var(--tertiary-accent-9);
}

.text-tertiary-accent-9 {
  color: var(--tertiary-accent-9);
}

.text-tertiary-10 {
  color: var(--tertiary-color-10);
}

.bg-tertiary-10 {
  background-color: var(--tertiary-color-10);
  color: var(--tertiary-accent-10);
}

.text-tertiary-gray-10 {
  color: var(--tertiary-gray-10);
}

.bg-tertiary-gray-10 {
  background-color: var(--tertiary-gray-10);
  color: var(--tertiary-accent-10);
}

.text-tertiary-accent-10 {
  color: var(--tertiary-accent-10);
}

.text-success {
  color: var(--success-default);
}

.bg-success {
  background-color: var(--success-default);
  color: var(--success-accent-default);
}

.text-success-lighter {
  color: var(--success-lighter);
}

.bg-success-lighter {
  background-color: var(--success-lighter);
  color: var(--success-accent-lighter);
}

.text-success-light {
  color: var(--success-light);
}

.bg-success-light {
  background-color: var(--success-light);
  color: var(--success-accent-light);
}

.text-success-dark {
  color: var(--success-dark);
}

.bg-success-dark {
  background-color: var(--success-dark);
  color: var(--success-accent-dark);
}

.text-success-darker {
  color: var(--success-darker);
}

.bg-success-darker {
  background-color: var(--success-darker);
  color: var(--success-accent-darker);
}

.text-success-0 {
  color: var(--success-color-0);
}

.bg-success-0 {
  background-color: var(--success-color-0);
  color: var(--success-accent-0);
}

.text-success-gray-0 {
  color: var(--success-gray-0);
}

.bg-success-gray-0 {
  background-color: var(--success-gray-0);
  color: var(--success-accent-0);
}

.text-success-accent-0 {
  color: var(--success-accent-0);
}

.text-success-1 {
  color: var(--success-color-1);
}

.bg-success-1 {
  background-color: var(--success-color-1);
  color: var(--success-accent-1);
}

.text-success-gray-1 {
  color: var(--success-gray-1);
}

.bg-success-gray-1 {
  background-color: var(--success-gray-1);
  color: var(--success-accent-1);
}

.text-success-accent-1 {
  color: var(--success-accent-1);
}

.text-success-2 {
  color: var(--success-color-2);
}

.bg-success-2 {
  background-color: var(--success-color-2);
  color: var(--success-accent-2);
}

.text-success-gray-2 {
  color: var(--success-gray-2);
}

.bg-success-gray-2 {
  background-color: var(--success-gray-2);
  color: var(--success-accent-2);
}

.text-success-accent-2 {
  color: var(--success-accent-2);
}

.text-success-3 {
  color: var(--success-color-3);
}

.bg-success-3 {
  background-color: var(--success-color-3);
  color: var(--success-accent-3);
}

.text-success-gray-3 {
  color: var(--success-gray-3);
}

.bg-success-gray-3 {
  background-color: var(--success-gray-3);
  color: var(--success-accent-3);
}

.text-success-accent-3 {
  color: var(--success-accent-3);
}

.text-success-4 {
  color: var(--success-color-4);
}

.bg-success-4 {
  background-color: var(--success-color-4);
  color: var(--success-accent-4);
}

.text-success-gray-4 {
  color: var(--success-gray-4);
}

.bg-success-gray-4 {
  background-color: var(--success-gray-4);
  color: var(--success-accent-4);
}

.text-success-accent-4 {
  color: var(--success-accent-4);
}

.text-success-5 {
  color: var(--success-color-5);
}

.bg-success-5 {
  background-color: var(--success-color-5);
  color: var(--success-accent-5);
}

.text-success-gray-5 {
  color: var(--success-gray-5);
}

.bg-success-gray-5 {
  background-color: var(--success-gray-5);
  color: var(--success-accent-5);
}

.text-success-accent-5 {
  color: var(--success-accent-5);
}

.text-success-6 {
  color: var(--success-color-6);
}

.bg-success-6 {
  background-color: var(--success-color-6);
  color: var(--success-accent-6);
}

.text-success-gray-6 {
  color: var(--success-gray-6);
}

.bg-success-gray-6 {
  background-color: var(--success-gray-6);
  color: var(--success-accent-6);
}

.text-success-accent-6 {
  color: var(--success-accent-6);
}

.text-success-7 {
  color: var(--success-color-7);
}

.bg-success-7 {
  background-color: var(--success-color-7);
  color: var(--success-accent-7);
}

.text-success-gray-7 {
  color: var(--success-gray-7);
}

.bg-success-gray-7 {
  background-color: var(--success-gray-7);
  color: var(--success-accent-7);
}

.text-success-accent-7 {
  color: var(--success-accent-7);
}

.text-success-8 {
  color: var(--success-color-8);
}

.bg-success-8 {
  background-color: var(--success-color-8);
  color: var(--success-accent-8);
}

.text-success-gray-8 {
  color: var(--success-gray-8);
}

.bg-success-gray-8 {
  background-color: var(--success-gray-8);
  color: var(--success-accent-8);
}

.text-success-accent-8 {
  color: var(--success-accent-8);
}

.text-success-9 {
  color: var(--success-color-9);
}

.bg-success-9 {
  background-color: var(--success-color-9);
  color: var(--success-accent-9);
}

.text-success-gray-9 {
  color: var(--success-gray-9);
}

.bg-success-gray-9 {
  background-color: var(--success-gray-9);
  color: var(--success-accent-9);
}

.text-success-accent-9 {
  color: var(--success-accent-9);
}

.text-success-10 {
  color: var(--success-color-10);
}

.bg-success-10 {
  background-color: var(--success-color-10);
  color: var(--success-accent-10);
}

.text-success-gray-10 {
  color: var(--success-gray-10);
}

.bg-success-gray-10 {
  background-color: var(--success-gray-10);
  color: var(--success-accent-10);
}

.text-success-accent-10 {
  color: var(--success-accent-10);
}

.text-warning {
  color: var(--warning-default);
}

.bg-warning {
  background-color: var(--warning-default);
  color: var(--warning-accent-default);
}

.text-warning-lighter {
  color: var(--warning-lighter);
}

.bg-warning-lighter {
  background-color: var(--warning-lighter);
  color: var(--warning-accent-lighter);
}

.text-warning-light {
  color: var(--warning-light);
}

.bg-warning-light {
  background-color: var(--warning-light);
  color: var(--warning-accent-light);
}

.text-warning-dark {
  color: var(--warning-dark);
}

.bg-warning-dark {
  background-color: var(--warning-dark);
  color: var(--warning-accent-dark);
}

.text-warning-darker {
  color: var(--warning-darker);
}

.bg-warning-darker {
  background-color: var(--warning-darker);
  color: var(--warning-accent-darker);
}

.text-warning-0 {
  color: var(--warning-color-0);
}

.bg-warning-0 {
  background-color: var(--warning-color-0);
  color: var(--warning-accent-0);
}

.text-warning-gray-0 {
  color: var(--warning-gray-0);
}

.bg-warning-gray-0 {
  background-color: var(--warning-gray-0);
  color: var(--warning-accent-0);
}

.text-warning-accent-0 {
  color: var(--warning-accent-0);
}

.text-warning-1 {
  color: var(--warning-color-1);
}

.bg-warning-1 {
  background-color: var(--warning-color-1);
  color: var(--warning-accent-1);
}

.text-warning-gray-1 {
  color: var(--warning-gray-1);
}

.bg-warning-gray-1 {
  background-color: var(--warning-gray-1);
  color: var(--warning-accent-1);
}

.text-warning-accent-1 {
  color: var(--warning-accent-1);
}

.text-warning-2 {
  color: var(--warning-color-2);
}

.bg-warning-2 {
  background-color: var(--warning-color-2);
  color: var(--warning-accent-2);
}

.text-warning-gray-2 {
  color: var(--warning-gray-2);
}

.bg-warning-gray-2 {
  background-color: var(--warning-gray-2);
  color: var(--warning-accent-2);
}

.text-warning-accent-2 {
  color: var(--warning-accent-2);
}

.text-warning-3 {
  color: var(--warning-color-3);
}

.bg-warning-3 {
  background-color: var(--warning-color-3);
  color: var(--warning-accent-3);
}

.text-warning-gray-3 {
  color: var(--warning-gray-3);
}

.bg-warning-gray-3 {
  background-color: var(--warning-gray-3);
  color: var(--warning-accent-3);
}

.text-warning-accent-3 {
  color: var(--warning-accent-3);
}

.text-warning-4 {
  color: var(--warning-color-4);
}

.bg-warning-4 {
  background-color: var(--warning-color-4);
  color: var(--warning-accent-4);
}

.text-warning-gray-4 {
  color: var(--warning-gray-4);
}

.bg-warning-gray-4 {
  background-color: var(--warning-gray-4);
  color: var(--warning-accent-4);
}

.text-warning-accent-4 {
  color: var(--warning-accent-4);
}

.text-warning-5 {
  color: var(--warning-color-5);
}

.bg-warning-5 {
  background-color: var(--warning-color-5);
  color: var(--warning-accent-5);
}

.text-warning-gray-5 {
  color: var(--warning-gray-5);
}

.bg-warning-gray-5 {
  background-color: var(--warning-gray-5);
  color: var(--warning-accent-5);
}

.text-warning-accent-5 {
  color: var(--warning-accent-5);
}

.text-warning-6 {
  color: var(--warning-color-6);
}

.bg-warning-6 {
  background-color: var(--warning-color-6);
  color: var(--warning-accent-6);
}

.text-warning-gray-6 {
  color: var(--warning-gray-6);
}

.bg-warning-gray-6 {
  background-color: var(--warning-gray-6);
  color: var(--warning-accent-6);
}

.text-warning-accent-6 {
  color: var(--warning-accent-6);
}

.text-warning-7 {
  color: var(--warning-color-7);
}

.bg-warning-7 {
  background-color: var(--warning-color-7);
  color: var(--warning-accent-7);
}

.text-warning-gray-7 {
  color: var(--warning-gray-7);
}

.bg-warning-gray-7 {
  background-color: var(--warning-gray-7);
  color: var(--warning-accent-7);
}

.text-warning-accent-7 {
  color: var(--warning-accent-7);
}

.text-warning-8 {
  color: var(--warning-color-8);
}

.bg-warning-8 {
  background-color: var(--warning-color-8);
  color: var(--warning-accent-8);
}

.text-warning-gray-8 {
  color: var(--warning-gray-8);
}

.bg-warning-gray-8 {
  background-color: var(--warning-gray-8);
  color: var(--warning-accent-8);
}

.text-warning-accent-8 {
  color: var(--warning-accent-8);
}

.text-warning-9 {
  color: var(--warning-color-9);
}

.bg-warning-9 {
  background-color: var(--warning-color-9);
  color: var(--warning-accent-9);
}

.text-warning-gray-9 {
  color: var(--warning-gray-9);
}

.bg-warning-gray-9 {
  background-color: var(--warning-gray-9);
  color: var(--warning-accent-9);
}

.text-warning-accent-9 {
  color: var(--warning-accent-9);
}

.text-warning-10 {
  color: var(--warning-color-10);
}

.bg-warning-10 {
  background-color: var(--warning-color-10);
  color: var(--warning-accent-10);
}

.text-warning-gray-10 {
  color: var(--warning-gray-10);
}

.bg-warning-gray-10 {
  background-color: var(--warning-gray-10);
  color: var(--warning-accent-10);
}

.text-warning-accent-10 {
  color: var(--warning-accent-10);
}

.text-danger {
  color: var(--danger-default);
}

.bg-danger {
  background-color: var(--danger-default);
  color: var(--danger-accent-default);
}

.text-danger-lighter {
  color: var(--danger-lighter);
}

.bg-danger-lighter {
  background-color: var(--danger-lighter);
  color: var(--danger-accent-lighter);
}

.text-danger-light {
  color: var(--danger-light);
}

.bg-danger-light {
  background-color: var(--danger-light);
  color: var(--danger-accent-light);
}

.text-danger-dark {
  color: var(--danger-dark);
}

.bg-danger-dark {
  background-color: var(--danger-dark);
  color: var(--danger-accent-dark);
}

.text-danger-darker {
  color: var(--danger-darker);
}

.bg-danger-darker {
  background-color: var(--danger-darker);
  color: var(--danger-accent-darker);
}

.text-danger-0 {
  color: var(--danger-color-0);
}

.bg-danger-0 {
  background-color: var(--danger-color-0);
  color: var(--danger-accent-0);
}

.text-danger-gray-0 {
  color: var(--danger-gray-0);
}

.bg-danger-gray-0 {
  background-color: var(--danger-gray-0);
  color: var(--danger-accent-0);
}

.text-danger-accent-0 {
  color: var(--danger-accent-0);
}

.text-danger-1 {
  color: var(--danger-color-1);
}

.bg-danger-1 {
  background-color: var(--danger-color-1);
  color: var(--danger-accent-1);
}

.text-danger-gray-1 {
  color: var(--danger-gray-1);
}

.bg-danger-gray-1 {
  background-color: var(--danger-gray-1);
  color: var(--danger-accent-1);
}

.text-danger-accent-1 {
  color: var(--danger-accent-1);
}

.text-danger-2 {
  color: var(--danger-color-2);
}

.bg-danger-2 {
  background-color: var(--danger-color-2);
  color: var(--danger-accent-2);
}

.text-danger-gray-2 {
  color: var(--danger-gray-2);
}

.bg-danger-gray-2 {
  background-color: var(--danger-gray-2);
  color: var(--danger-accent-2);
}

.text-danger-accent-2 {
  color: var(--danger-accent-2);
}

.text-danger-3 {
  color: var(--danger-color-3);
}

.bg-danger-3 {
  background-color: var(--danger-color-3);
  color: var(--danger-accent-3);
}

.text-danger-gray-3 {
  color: var(--danger-gray-3);
}

.bg-danger-gray-3 {
  background-color: var(--danger-gray-3);
  color: var(--danger-accent-3);
}

.text-danger-accent-3 {
  color: var(--danger-accent-3);
}

.text-danger-4 {
  color: var(--danger-color-4);
}

.bg-danger-4 {
  background-color: var(--danger-color-4);
  color: var(--danger-accent-4);
}

.text-danger-gray-4 {
  color: var(--danger-gray-4);
}

.bg-danger-gray-4 {
  background-color: var(--danger-gray-4);
  color: var(--danger-accent-4);
}

.text-danger-accent-4 {
  color: var(--danger-accent-4);
}

.text-danger-5 {
  color: var(--danger-color-5);
}

.bg-danger-5 {
  background-color: var(--danger-color-5);
  color: var(--danger-accent-5);
}

.text-danger-gray-5 {
  color: var(--danger-gray-5);
}

.bg-danger-gray-5 {
  background-color: var(--danger-gray-5);
  color: var(--danger-accent-5);
}

.text-danger-accent-5 {
  color: var(--danger-accent-5);
}

.text-danger-6 {
  color: var(--danger-color-6);
}

.bg-danger-6 {
  background-color: var(--danger-color-6);
  color: var(--danger-accent-6);
}

.text-danger-gray-6 {
  color: var(--danger-gray-6);
}

.bg-danger-gray-6 {
  background-color: var(--danger-gray-6);
  color: var(--danger-accent-6);
}

.text-danger-accent-6 {
  color: var(--danger-accent-6);
}

.text-danger-7 {
  color: var(--danger-color-7);
}

.bg-danger-7 {
  background-color: var(--danger-color-7);
  color: var(--danger-accent-7);
}

.text-danger-gray-7 {
  color: var(--danger-gray-7);
}

.bg-danger-gray-7 {
  background-color: var(--danger-gray-7);
  color: var(--danger-accent-7);
}

.text-danger-accent-7 {
  color: var(--danger-accent-7);
}

.text-danger-8 {
  color: var(--danger-color-8);
}

.bg-danger-8 {
  background-color: var(--danger-color-8);
  color: var(--danger-accent-8);
}

.text-danger-gray-8 {
  color: var(--danger-gray-8);
}

.bg-danger-gray-8 {
  background-color: var(--danger-gray-8);
  color: var(--danger-accent-8);
}

.text-danger-accent-8 {
  color: var(--danger-accent-8);
}

.text-danger-9 {
  color: var(--danger-color-9);
}

.bg-danger-9 {
  background-color: var(--danger-color-9);
  color: var(--danger-accent-9);
}

.text-danger-gray-9 {
  color: var(--danger-gray-9);
}

.bg-danger-gray-9 {
  background-color: var(--danger-gray-9);
  color: var(--danger-accent-9);
}

.text-danger-accent-9 {
  color: var(--danger-accent-9);
}

.text-danger-10 {
  color: var(--danger-color-10);
}

.bg-danger-10 {
  background-color: var(--danger-color-10);
  color: var(--danger-accent-10);
}

.text-danger-gray-10 {
  color: var(--danger-gray-10);
}

.bg-danger-gray-10 {
  background-color: var(--danger-gray-10);
  color: var(--danger-accent-10);
}

.text-danger-accent-10 {
  color: var(--danger-accent-10);
}

.text-info {
  color: var(--info-default);
}

.bg-info {
  background-color: var(--info-default);
  color: var(--info-accent-default);
}

.text-info-lighter {
  color: var(--info-lighter);
}

.bg-info-lighter {
  background-color: var(--info-lighter);
  color: var(--info-accent-lighter);
}

.text-info-light {
  color: var(--info-light);
}

.bg-info-light {
  background-color: var(--info-light);
  color: var(--info-accent-light);
}

.text-info-dark {
  color: var(--info-dark);
}

.bg-info-dark {
  background-color: var(--info-dark);
  color: var(--info-accent-dark);
}

.text-info-darker {
  color: var(--info-darker);
}

.bg-info-darker {
  background-color: var(--info-darker);
  color: var(--info-accent-darker);
}

.text-info-0 {
  color: var(--info-color-0);
}

.bg-info-0 {
  background-color: var(--info-color-0);
  color: var(--info-accent-0);
}

.text-info-gray-0 {
  color: var(--info-gray-0);
}

.bg-info-gray-0 {
  background-color: var(--info-gray-0);
  color: var(--info-accent-0);
}

.text-info-accent-0 {
  color: var(--info-accent-0);
}

.text-info-1 {
  color: var(--info-color-1);
}

.bg-info-1 {
  background-color: var(--info-color-1);
  color: var(--info-accent-1);
}

.text-info-gray-1 {
  color: var(--info-gray-1);
}

.bg-info-gray-1 {
  background-color: var(--info-gray-1);
  color: var(--info-accent-1);
}

.text-info-accent-1 {
  color: var(--info-accent-1);
}

.text-info-2 {
  color: var(--info-color-2);
}

.bg-info-2 {
  background-color: var(--info-color-2);
  color: var(--info-accent-2);
}

.text-info-gray-2 {
  color: var(--info-gray-2);
}

.bg-info-gray-2 {
  background-color: var(--info-gray-2);
  color: var(--info-accent-2);
}

.text-info-accent-2 {
  color: var(--info-accent-2);
}

.text-info-3 {
  color: var(--info-color-3);
}

.bg-info-3 {
  background-color: var(--info-color-3);
  color: var(--info-accent-3);
}

.text-info-gray-3 {
  color: var(--info-gray-3);
}

.bg-info-gray-3 {
  background-color: var(--info-gray-3);
  color: var(--info-accent-3);
}

.text-info-accent-3 {
  color: var(--info-accent-3);
}

.text-info-4 {
  color: var(--info-color-4);
}

.bg-info-4 {
  background-color: var(--info-color-4);
  color: var(--info-accent-4);
}

.text-info-gray-4 {
  color: var(--info-gray-4);
}

.bg-info-gray-4 {
  background-color: var(--info-gray-4);
  color: var(--info-accent-4);
}

.text-info-accent-4 {
  color: var(--info-accent-4);
}

.text-info-5 {
  color: var(--info-color-5);
}

.bg-info-5 {
  background-color: var(--info-color-5);
  color: var(--info-accent-5);
}

.text-info-gray-5 {
  color: var(--info-gray-5);
}

.bg-info-gray-5 {
  background-color: var(--info-gray-5);
  color: var(--info-accent-5);
}

.text-info-accent-5 {
  color: var(--info-accent-5);
}

.text-info-6 {
  color: var(--info-color-6);
}

.bg-info-6 {
  background-color: var(--info-color-6);
  color: var(--info-accent-6);
}

.text-info-gray-6 {
  color: var(--info-gray-6);
}

.bg-info-gray-6 {
  background-color: var(--info-gray-6);
  color: var(--info-accent-6);
}

.text-info-accent-6 {
  color: var(--info-accent-6);
}

.text-info-7 {
  color: var(--info-color-7);
}

.bg-info-7 {
  background-color: var(--info-color-7);
  color: var(--info-accent-7);
}

.text-info-gray-7 {
  color: var(--info-gray-7);
}

.bg-info-gray-7 {
  background-color: var(--info-gray-7);
  color: var(--info-accent-7);
}

.text-info-accent-7 {
  color: var(--info-accent-7);
}

.text-info-8 {
  color: var(--info-color-8);
}

.bg-info-8 {
  background-color: var(--info-color-8);
  color: var(--info-accent-8);
}

.text-info-gray-8 {
  color: var(--info-gray-8);
}

.bg-info-gray-8 {
  background-color: var(--info-gray-8);
  color: var(--info-accent-8);
}

.text-info-accent-8 {
  color: var(--info-accent-8);
}

.text-info-9 {
  color: var(--info-color-9);
}

.bg-info-9 {
  background-color: var(--info-color-9);
  color: var(--info-accent-9);
}

.text-info-gray-9 {
  color: var(--info-gray-9);
}

.bg-info-gray-9 {
  background-color: var(--info-gray-9);
  color: var(--info-accent-9);
}

.text-info-accent-9 {
  color: var(--info-accent-9);
}

.text-info-10 {
  color: var(--info-color-10);
}

.bg-info-10 {
  background-color: var(--info-color-10);
  color: var(--info-accent-10);
}

.text-info-gray-10 {
  color: var(--info-gray-10);
}

.bg-info-gray-10 {
  background-color: var(--info-gray-10);
  color: var(--info-accent-10);
}

.text-info-accent-10 {
  color: var(--info-accent-10);
}

.text-neutral {
  color: var(--neutral-default);
}

.bg-neutral {
  background-color: var(--neutral-default);
  color: var(--neutral-accent-default);
}

.text-neutral-lighter {
  color: var(--neutral-lighter);
}

.bg-neutral-lighter {
  background-color: var(--neutral-lighter);
  color: var(--neutral-accent-lighter);
}

.text-neutral-light {
  color: var(--neutral-light);
}

.bg-neutral-light {
  background-color: var(--neutral-light);
  color: var(--neutral-accent-light);
}

.text-neutral-dark {
  color: var(--neutral-dark);
}

.bg-neutral-dark {
  background-color: var(--neutral-dark);
  color: var(--neutral-accent-dark);
}

.text-neutral-darker {
  color: var(--neutral-darker);
}

.bg-neutral-darker {
  background-color: var(--neutral-darker);
  color: var(--neutral-accent-darker);
}

.text-neutral-0 {
  color: var(--neutral-color-0);
}

.bg-neutral-0 {
  background-color: var(--neutral-color-0);
  color: var(--neutral-accent-0);
}

.text-neutral-gray-0 {
  color: var(--neutral-gray-0);
}

.bg-neutral-gray-0 {
  background-color: var(--neutral-gray-0);
  color: var(--neutral-accent-0);
}

.text-neutral-accent-0 {
  color: var(--neutral-accent-0);
}

.text-neutral-1 {
  color: var(--neutral-color-1);
}

.bg-neutral-1 {
  background-color: var(--neutral-color-1);
  color: var(--neutral-accent-1);
}

.text-neutral-gray-1 {
  color: var(--neutral-gray-1);
}

.bg-neutral-gray-1 {
  background-color: var(--neutral-gray-1);
  color: var(--neutral-accent-1);
}

.text-neutral-accent-1 {
  color: var(--neutral-accent-1);
}

.text-neutral-2 {
  color: var(--neutral-color-2);
}

.bg-neutral-2 {
  background-color: var(--neutral-color-2);
  color: var(--neutral-accent-2);
}

.text-neutral-gray-2 {
  color: var(--neutral-gray-2);
}

.bg-neutral-gray-2 {
  background-color: var(--neutral-gray-2);
  color: var(--neutral-accent-2);
}

.text-neutral-accent-2 {
  color: var(--neutral-accent-2);
}

.text-neutral-3 {
  color: var(--neutral-color-3);
}

.bg-neutral-3 {
  background-color: var(--neutral-color-3);
  color: var(--neutral-accent-3);
}

.text-neutral-gray-3 {
  color: var(--neutral-gray-3);
}

.bg-neutral-gray-3 {
  background-color: var(--neutral-gray-3);
  color: var(--neutral-accent-3);
}

.text-neutral-accent-3 {
  color: var(--neutral-accent-3);
}

.text-neutral-4 {
  color: var(--neutral-color-4);
}

.bg-neutral-4 {
  background-color: var(--neutral-color-4);
  color: var(--neutral-accent-4);
}

.text-neutral-gray-4 {
  color: var(--neutral-gray-4);
}

.bg-neutral-gray-4 {
  background-color: var(--neutral-gray-4);
  color: var(--neutral-accent-4);
}

.text-neutral-accent-4 {
  color: var(--neutral-accent-4);
}

.text-neutral-5 {
  color: var(--neutral-color-5);
}

.bg-neutral-5 {
  background-color: var(--neutral-color-5);
  color: var(--neutral-accent-5);
}

.text-neutral-gray-5 {
  color: var(--neutral-gray-5);
}

.bg-neutral-gray-5 {
  background-color: var(--neutral-gray-5);
  color: var(--neutral-accent-5);
}

.text-neutral-accent-5 {
  color: var(--neutral-accent-5);
}

.text-neutral-6 {
  color: var(--neutral-color-6);
}

.bg-neutral-6 {
  background-color: var(--neutral-color-6);
  color: var(--neutral-accent-6);
}

.text-neutral-gray-6 {
  color: var(--neutral-gray-6);
}

.bg-neutral-gray-6 {
  background-color: var(--neutral-gray-6);
  color: var(--neutral-accent-6);
}

.text-neutral-accent-6 {
  color: var(--neutral-accent-6);
}

.text-neutral-7 {
  color: var(--neutral-color-7);
}

.bg-neutral-7 {
  background-color: var(--neutral-color-7);
  color: var(--neutral-accent-7);
}

.text-neutral-gray-7 {
  color: var(--neutral-gray-7);
}

.bg-neutral-gray-7 {
  background-color: var(--neutral-gray-7);
  color: var(--neutral-accent-7);
}

.text-neutral-accent-7 {
  color: var(--neutral-accent-7);
}

.text-neutral-8 {
  color: var(--neutral-color-8);
}

.bg-neutral-8 {
  background-color: var(--neutral-color-8);
  color: var(--neutral-accent-8);
}

.text-neutral-gray-8 {
  color: var(--neutral-gray-8);
}

.bg-neutral-gray-8 {
  background-color: var(--neutral-gray-8);
  color: var(--neutral-accent-8);
}

.text-neutral-accent-8 {
  color: var(--neutral-accent-8);
}

.text-neutral-9 {
  color: var(--neutral-color-9);
}

.bg-neutral-9 {
  background-color: var(--neutral-color-9);
  color: var(--neutral-accent-9);
}

.text-neutral-gray-9 {
  color: var(--neutral-gray-9);
}

.bg-neutral-gray-9 {
  background-color: var(--neutral-gray-9);
  color: var(--neutral-accent-9);
}

.text-neutral-accent-9 {
  color: var(--neutral-accent-9);
}

.text-neutral-10 {
  color: var(--neutral-color-10);
}

.bg-neutral-10 {
  background-color: var(--neutral-color-10);
  color: var(--neutral-accent-10);
}

.text-neutral-gray-10 {
  color: var(--neutral-gray-10);
}

.bg-neutral-gray-10 {
  background-color: var(--neutral-gray-10);
  color: var(--neutral-accent-10);
}

.text-neutral-accent-10 {
  color: var(--neutral-accent-10);
}

.text-red {
  color: var(--red-default);
}

.bg-red {
  background-color: var(--red-default);
  color: var(--red-accent-default);
}

.text-red-lighter {
  color: var(--red-lighter);
}

.bg-red-lighter {
  background-color: var(--red-lighter);
  color: var(--red-accent-lighter);
}

.text-red-light {
  color: var(--red-light);
}

.bg-red-light {
  background-color: var(--red-light);
  color: var(--red-accent-light);
}

.text-red-dark {
  color: var(--red-dark);
}

.bg-red-dark {
  background-color: var(--red-dark);
  color: var(--red-accent-dark);
}

.text-red-darker {
  color: var(--red-darker);
}

.bg-red-darker {
  background-color: var(--red-darker);
  color: var(--red-accent-darker);
}

.text-red-0 {
  color: var(--red-color-0);
}

.bg-red-0 {
  background-color: var(--red-color-0);
  color: var(--red-accent-0);
}

.text-red-gray-0 {
  color: var(--red-gray-0);
}

.bg-red-gray-0 {
  background-color: var(--red-gray-0);
  color: var(--red-accent-0);
}

.text-red-accent-0 {
  color: var(--red-accent-0);
}

.text-red-1 {
  color: var(--red-color-1);
}

.bg-red-1 {
  background-color: var(--red-color-1);
  color: var(--red-accent-1);
}

.text-red-gray-1 {
  color: var(--red-gray-1);
}

.bg-red-gray-1 {
  background-color: var(--red-gray-1);
  color: var(--red-accent-1);
}

.text-red-accent-1 {
  color: var(--red-accent-1);
}

.text-red-2 {
  color: var(--red-color-2);
}

.bg-red-2 {
  background-color: var(--red-color-2);
  color: var(--red-accent-2);
}

.text-red-gray-2 {
  color: var(--red-gray-2);
}

.bg-red-gray-2 {
  background-color: var(--red-gray-2);
  color: var(--red-accent-2);
}

.text-red-accent-2 {
  color: var(--red-accent-2);
}

.text-red-3 {
  color: var(--red-color-3);
}

.bg-red-3 {
  background-color: var(--red-color-3);
  color: var(--red-accent-3);
}

.text-red-gray-3 {
  color: var(--red-gray-3);
}

.bg-red-gray-3 {
  background-color: var(--red-gray-3);
  color: var(--red-accent-3);
}

.text-red-accent-3 {
  color: var(--red-accent-3);
}

.text-red-4 {
  color: var(--red-color-4);
}

.bg-red-4 {
  background-color: var(--red-color-4);
  color: var(--red-accent-4);
}

.text-red-gray-4 {
  color: var(--red-gray-4);
}

.bg-red-gray-4 {
  background-color: var(--red-gray-4);
  color: var(--red-accent-4);
}

.text-red-accent-4 {
  color: var(--red-accent-4);
}

.text-red-5 {
  color: var(--red-color-5);
}

.bg-red-5 {
  background-color: var(--red-color-5);
  color: var(--red-accent-5);
}

.text-red-gray-5 {
  color: var(--red-gray-5);
}

.bg-red-gray-5 {
  background-color: var(--red-gray-5);
  color: var(--red-accent-5);
}

.text-red-accent-5 {
  color: var(--red-accent-5);
}

.text-red-6 {
  color: var(--red-color-6);
}

.bg-red-6 {
  background-color: var(--red-color-6);
  color: var(--red-accent-6);
}

.text-red-gray-6 {
  color: var(--red-gray-6);
}

.bg-red-gray-6 {
  background-color: var(--red-gray-6);
  color: var(--red-accent-6);
}

.text-red-accent-6 {
  color: var(--red-accent-6);
}

.text-red-7 {
  color: var(--red-color-7);
}

.bg-red-7 {
  background-color: var(--red-color-7);
  color: var(--red-accent-7);
}

.text-red-gray-7 {
  color: var(--red-gray-7);
}

.bg-red-gray-7 {
  background-color: var(--red-gray-7);
  color: var(--red-accent-7);
}

.text-red-accent-7 {
  color: var(--red-accent-7);
}

.text-red-8 {
  color: var(--red-color-8);
}

.bg-red-8 {
  background-color: var(--red-color-8);
  color: var(--red-accent-8);
}

.text-red-gray-8 {
  color: var(--red-gray-8);
}

.bg-red-gray-8 {
  background-color: var(--red-gray-8);
  color: var(--red-accent-8);
}

.text-red-accent-8 {
  color: var(--red-accent-8);
}

.text-red-9 {
  color: var(--red-color-9);
}

.bg-red-9 {
  background-color: var(--red-color-9);
  color: var(--red-accent-9);
}

.text-red-gray-9 {
  color: var(--red-gray-9);
}

.bg-red-gray-9 {
  background-color: var(--red-gray-9);
  color: var(--red-accent-9);
}

.text-red-accent-9 {
  color: var(--red-accent-9);
}

.text-red-10 {
  color: var(--red-color-10);
}

.bg-red-10 {
  background-color: var(--red-color-10);
  color: var(--red-accent-10);
}

.text-red-gray-10 {
  color: var(--red-gray-10);
}

.bg-red-gray-10 {
  background-color: var(--red-gray-10);
  color: var(--red-accent-10);
}

.text-red-accent-10 {
  color: var(--red-accent-10);
}

.text-orange {
  color: var(--orange-default);
}

.bg-orange {
  background-color: var(--orange-default);
  color: var(--orange-accent-default);
}

.text-orange-lighter {
  color: var(--orange-lighter);
}

.bg-orange-lighter {
  background-color: var(--orange-lighter);
  color: var(--orange-accent-lighter);
}

.text-orange-light {
  color: var(--orange-light);
}

.bg-orange-light {
  background-color: var(--orange-light);
  color: var(--orange-accent-light);
}

.text-orange-dark {
  color: var(--orange-dark);
}

.bg-orange-dark {
  background-color: var(--orange-dark);
  color: var(--orange-accent-dark);
}

.text-orange-darker {
  color: var(--orange-darker);
}

.bg-orange-darker {
  background-color: var(--orange-darker);
  color: var(--orange-accent-darker);
}

.text-orange-0 {
  color: var(--orange-color-0);
}

.bg-orange-0 {
  background-color: var(--orange-color-0);
  color: var(--orange-accent-0);
}

.text-orange-gray-0 {
  color: var(--orange-gray-0);
}

.bg-orange-gray-0 {
  background-color: var(--orange-gray-0);
  color: var(--orange-accent-0);
}

.text-orange-accent-0 {
  color: var(--orange-accent-0);
}

.text-orange-1 {
  color: var(--orange-color-1);
}

.bg-orange-1 {
  background-color: var(--orange-color-1);
  color: var(--orange-accent-1);
}

.text-orange-gray-1 {
  color: var(--orange-gray-1);
}

.bg-orange-gray-1 {
  background-color: var(--orange-gray-1);
  color: var(--orange-accent-1);
}

.text-orange-accent-1 {
  color: var(--orange-accent-1);
}

.text-orange-2 {
  color: var(--orange-color-2);
}

.bg-orange-2 {
  background-color: var(--orange-color-2);
  color: var(--orange-accent-2);
}

.text-orange-gray-2 {
  color: var(--orange-gray-2);
}

.bg-orange-gray-2 {
  background-color: var(--orange-gray-2);
  color: var(--orange-accent-2);
}

.text-orange-accent-2 {
  color: var(--orange-accent-2);
}

.text-orange-3 {
  color: var(--orange-color-3);
}

.bg-orange-3 {
  background-color: var(--orange-color-3);
  color: var(--orange-accent-3);
}

.text-orange-gray-3 {
  color: var(--orange-gray-3);
}

.bg-orange-gray-3 {
  background-color: var(--orange-gray-3);
  color: var(--orange-accent-3);
}

.text-orange-accent-3 {
  color: var(--orange-accent-3);
}

.text-orange-4 {
  color: var(--orange-color-4);
}

.bg-orange-4 {
  background-color: var(--orange-color-4);
  color: var(--orange-accent-4);
}

.text-orange-gray-4 {
  color: var(--orange-gray-4);
}

.bg-orange-gray-4 {
  background-color: var(--orange-gray-4);
  color: var(--orange-accent-4);
}

.text-orange-accent-4 {
  color: var(--orange-accent-4);
}

.text-orange-5 {
  color: var(--orange-color-5);
}

.bg-orange-5 {
  background-color: var(--orange-color-5);
  color: var(--orange-accent-5);
}

.text-orange-gray-5 {
  color: var(--orange-gray-5);
}

.bg-orange-gray-5 {
  background-color: var(--orange-gray-5);
  color: var(--orange-accent-5);
}

.text-orange-accent-5 {
  color: var(--orange-accent-5);
}

.text-orange-6 {
  color: var(--orange-color-6);
}

.bg-orange-6 {
  background-color: var(--orange-color-6);
  color: var(--orange-accent-6);
}

.text-orange-gray-6 {
  color: var(--orange-gray-6);
}

.bg-orange-gray-6 {
  background-color: var(--orange-gray-6);
  color: var(--orange-accent-6);
}

.text-orange-accent-6 {
  color: var(--orange-accent-6);
}

.text-orange-7 {
  color: var(--orange-color-7);
}

.bg-orange-7 {
  background-color: var(--orange-color-7);
  color: var(--orange-accent-7);
}

.text-orange-gray-7 {
  color: var(--orange-gray-7);
}

.bg-orange-gray-7 {
  background-color: var(--orange-gray-7);
  color: var(--orange-accent-7);
}

.text-orange-accent-7 {
  color: var(--orange-accent-7);
}

.text-orange-8 {
  color: var(--orange-color-8);
}

.bg-orange-8 {
  background-color: var(--orange-color-8);
  color: var(--orange-accent-8);
}

.text-orange-gray-8 {
  color: var(--orange-gray-8);
}

.bg-orange-gray-8 {
  background-color: var(--orange-gray-8);
  color: var(--orange-accent-8);
}

.text-orange-accent-8 {
  color: var(--orange-accent-8);
}

.text-orange-9 {
  color: var(--orange-color-9);
}

.bg-orange-9 {
  background-color: var(--orange-color-9);
  color: var(--orange-accent-9);
}

.text-orange-gray-9 {
  color: var(--orange-gray-9);
}

.bg-orange-gray-9 {
  background-color: var(--orange-gray-9);
  color: var(--orange-accent-9);
}

.text-orange-accent-9 {
  color: var(--orange-accent-9);
}

.text-orange-10 {
  color: var(--orange-color-10);
}

.bg-orange-10 {
  background-color: var(--orange-color-10);
  color: var(--orange-accent-10);
}

.text-orange-gray-10 {
  color: var(--orange-gray-10);
}

.bg-orange-gray-10 {
  background-color: var(--orange-gray-10);
  color: var(--orange-accent-10);
}

.text-orange-accent-10 {
  color: var(--orange-accent-10);
}

.text-yellow {
  color: var(--yellow-default);
}

.bg-yellow {
  background-color: var(--yellow-default);
  color: var(--yellow-accent-default);
}

.text-yellow-lighter {
  color: var(--yellow-lighter);
}

.bg-yellow-lighter {
  background-color: var(--yellow-lighter);
  color: var(--yellow-accent-lighter);
}

.text-yellow-light {
  color: var(--yellow-light);
}

.bg-yellow-light {
  background-color: var(--yellow-light);
  color: var(--yellow-accent-light);
}

.text-yellow-dark {
  color: var(--yellow-dark);
}

.bg-yellow-dark {
  background-color: var(--yellow-dark);
  color: var(--yellow-accent-dark);
}

.text-yellow-darker {
  color: var(--yellow-darker);
}

.bg-yellow-darker {
  background-color: var(--yellow-darker);
  color: var(--yellow-accent-darker);
}

.text-yellow-0 {
  color: var(--yellow-color-0);
}

.bg-yellow-0 {
  background-color: var(--yellow-color-0);
  color: var(--yellow-accent-0);
}

.text-yellow-gray-0 {
  color: var(--yellow-gray-0);
}

.bg-yellow-gray-0 {
  background-color: var(--yellow-gray-0);
  color: var(--yellow-accent-0);
}

.text-yellow-accent-0 {
  color: var(--yellow-accent-0);
}

.text-yellow-1 {
  color: var(--yellow-color-1);
}

.bg-yellow-1 {
  background-color: var(--yellow-color-1);
  color: var(--yellow-accent-1);
}

.text-yellow-gray-1 {
  color: var(--yellow-gray-1);
}

.bg-yellow-gray-1 {
  background-color: var(--yellow-gray-1);
  color: var(--yellow-accent-1);
}

.text-yellow-accent-1 {
  color: var(--yellow-accent-1);
}

.text-yellow-2 {
  color: var(--yellow-color-2);
}

.bg-yellow-2 {
  background-color: var(--yellow-color-2);
  color: var(--yellow-accent-2);
}

.text-yellow-gray-2 {
  color: var(--yellow-gray-2);
}

.bg-yellow-gray-2 {
  background-color: var(--yellow-gray-2);
  color: var(--yellow-accent-2);
}

.text-yellow-accent-2 {
  color: var(--yellow-accent-2);
}

.text-yellow-3 {
  color: var(--yellow-color-3);
}

.bg-yellow-3 {
  background-color: var(--yellow-color-3);
  color: var(--yellow-accent-3);
}

.text-yellow-gray-3 {
  color: var(--yellow-gray-3);
}

.bg-yellow-gray-3 {
  background-color: var(--yellow-gray-3);
  color: var(--yellow-accent-3);
}

.text-yellow-accent-3 {
  color: var(--yellow-accent-3);
}

.text-yellow-4 {
  color: var(--yellow-color-4);
}

.bg-yellow-4 {
  background-color: var(--yellow-color-4);
  color: var(--yellow-accent-4);
}

.text-yellow-gray-4 {
  color: var(--yellow-gray-4);
}

.bg-yellow-gray-4 {
  background-color: var(--yellow-gray-4);
  color: var(--yellow-accent-4);
}

.text-yellow-accent-4 {
  color: var(--yellow-accent-4);
}

.text-yellow-5 {
  color: var(--yellow-color-5);
}

.bg-yellow-5 {
  background-color: var(--yellow-color-5);
  color: var(--yellow-accent-5);
}

.text-yellow-gray-5 {
  color: var(--yellow-gray-5);
}

.bg-yellow-gray-5 {
  background-color: var(--yellow-gray-5);
  color: var(--yellow-accent-5);
}

.text-yellow-accent-5 {
  color: var(--yellow-accent-5);
}

.text-yellow-6 {
  color: var(--yellow-color-6);
}

.bg-yellow-6 {
  background-color: var(--yellow-color-6);
  color: var(--yellow-accent-6);
}

.text-yellow-gray-6 {
  color: var(--yellow-gray-6);
}

.bg-yellow-gray-6 {
  background-color: var(--yellow-gray-6);
  color: var(--yellow-accent-6);
}

.text-yellow-accent-6 {
  color: var(--yellow-accent-6);
}

.text-yellow-7 {
  color: var(--yellow-color-7);
}

.bg-yellow-7 {
  background-color: var(--yellow-color-7);
  color: var(--yellow-accent-7);
}

.text-yellow-gray-7 {
  color: var(--yellow-gray-7);
}

.bg-yellow-gray-7 {
  background-color: var(--yellow-gray-7);
  color: var(--yellow-accent-7);
}

.text-yellow-accent-7 {
  color: var(--yellow-accent-7);
}

.text-yellow-8 {
  color: var(--yellow-color-8);
}

.bg-yellow-8 {
  background-color: var(--yellow-color-8);
  color: var(--yellow-accent-8);
}

.text-yellow-gray-8 {
  color: var(--yellow-gray-8);
}

.bg-yellow-gray-8 {
  background-color: var(--yellow-gray-8);
  color: var(--yellow-accent-8);
}

.text-yellow-accent-8 {
  color: var(--yellow-accent-8);
}

.text-yellow-9 {
  color: var(--yellow-color-9);
}

.bg-yellow-9 {
  background-color: var(--yellow-color-9);
  color: var(--yellow-accent-9);
}

.text-yellow-gray-9 {
  color: var(--yellow-gray-9);
}

.bg-yellow-gray-9 {
  background-color: var(--yellow-gray-9);
  color: var(--yellow-accent-9);
}

.text-yellow-accent-9 {
  color: var(--yellow-accent-9);
}

.text-yellow-10 {
  color: var(--yellow-color-10);
}

.bg-yellow-10 {
  background-color: var(--yellow-color-10);
  color: var(--yellow-accent-10);
}

.text-yellow-gray-10 {
  color: var(--yellow-gray-10);
}

.bg-yellow-gray-10 {
  background-color: var(--yellow-gray-10);
  color: var(--yellow-accent-10);
}

.text-yellow-accent-10 {
  color: var(--yellow-accent-10);
}

.text-lime {
  color: var(--lime-default);
}

.bg-lime {
  background-color: var(--lime-default);
  color: var(--lime-accent-default);
}

.text-lime-lighter {
  color: var(--lime-lighter);
}

.bg-lime-lighter {
  background-color: var(--lime-lighter);
  color: var(--lime-accent-lighter);
}

.text-lime-light {
  color: var(--lime-light);
}

.bg-lime-light {
  background-color: var(--lime-light);
  color: var(--lime-accent-light);
}

.text-lime-dark {
  color: var(--lime-dark);
}

.bg-lime-dark {
  background-color: var(--lime-dark);
  color: var(--lime-accent-dark);
}

.text-lime-darker {
  color: var(--lime-darker);
}

.bg-lime-darker {
  background-color: var(--lime-darker);
  color: var(--lime-accent-darker);
}

.text-lime-0 {
  color: var(--lime-color-0);
}

.bg-lime-0 {
  background-color: var(--lime-color-0);
  color: var(--lime-accent-0);
}

.text-lime-gray-0 {
  color: var(--lime-gray-0);
}

.bg-lime-gray-0 {
  background-color: var(--lime-gray-0);
  color: var(--lime-accent-0);
}

.text-lime-accent-0 {
  color: var(--lime-accent-0);
}

.text-lime-1 {
  color: var(--lime-color-1);
}

.bg-lime-1 {
  background-color: var(--lime-color-1);
  color: var(--lime-accent-1);
}

.text-lime-gray-1 {
  color: var(--lime-gray-1);
}

.bg-lime-gray-1 {
  background-color: var(--lime-gray-1);
  color: var(--lime-accent-1);
}

.text-lime-accent-1 {
  color: var(--lime-accent-1);
}

.text-lime-2 {
  color: var(--lime-color-2);
}

.bg-lime-2 {
  background-color: var(--lime-color-2);
  color: var(--lime-accent-2);
}

.text-lime-gray-2 {
  color: var(--lime-gray-2);
}

.bg-lime-gray-2 {
  background-color: var(--lime-gray-2);
  color: var(--lime-accent-2);
}

.text-lime-accent-2 {
  color: var(--lime-accent-2);
}

.text-lime-3 {
  color: var(--lime-color-3);
}

.bg-lime-3 {
  background-color: var(--lime-color-3);
  color: var(--lime-accent-3);
}

.text-lime-gray-3 {
  color: var(--lime-gray-3);
}

.bg-lime-gray-3 {
  background-color: var(--lime-gray-3);
  color: var(--lime-accent-3);
}

.text-lime-accent-3 {
  color: var(--lime-accent-3);
}

.text-lime-4 {
  color: var(--lime-color-4);
}

.bg-lime-4 {
  background-color: var(--lime-color-4);
  color: var(--lime-accent-4);
}

.text-lime-gray-4 {
  color: var(--lime-gray-4);
}

.bg-lime-gray-4 {
  background-color: var(--lime-gray-4);
  color: var(--lime-accent-4);
}

.text-lime-accent-4 {
  color: var(--lime-accent-4);
}

.text-lime-5 {
  color: var(--lime-color-5);
}

.bg-lime-5 {
  background-color: var(--lime-color-5);
  color: var(--lime-accent-5);
}

.text-lime-gray-5 {
  color: var(--lime-gray-5);
}

.bg-lime-gray-5 {
  background-color: var(--lime-gray-5);
  color: var(--lime-accent-5);
}

.text-lime-accent-5 {
  color: var(--lime-accent-5);
}

.text-lime-6 {
  color: var(--lime-color-6);
}

.bg-lime-6 {
  background-color: var(--lime-color-6);
  color: var(--lime-accent-6);
}

.text-lime-gray-6 {
  color: var(--lime-gray-6);
}

.bg-lime-gray-6 {
  background-color: var(--lime-gray-6);
  color: var(--lime-accent-6);
}

.text-lime-accent-6 {
  color: var(--lime-accent-6);
}

.text-lime-7 {
  color: var(--lime-color-7);
}

.bg-lime-7 {
  background-color: var(--lime-color-7);
  color: var(--lime-accent-7);
}

.text-lime-gray-7 {
  color: var(--lime-gray-7);
}

.bg-lime-gray-7 {
  background-color: var(--lime-gray-7);
  color: var(--lime-accent-7);
}

.text-lime-accent-7 {
  color: var(--lime-accent-7);
}

.text-lime-8 {
  color: var(--lime-color-8);
}

.bg-lime-8 {
  background-color: var(--lime-color-8);
  color: var(--lime-accent-8);
}

.text-lime-gray-8 {
  color: var(--lime-gray-8);
}

.bg-lime-gray-8 {
  background-color: var(--lime-gray-8);
  color: var(--lime-accent-8);
}

.text-lime-accent-8 {
  color: var(--lime-accent-8);
}

.text-lime-9 {
  color: var(--lime-color-9);
}

.bg-lime-9 {
  background-color: var(--lime-color-9);
  color: var(--lime-accent-9);
}

.text-lime-gray-9 {
  color: var(--lime-gray-9);
}

.bg-lime-gray-9 {
  background-color: var(--lime-gray-9);
  color: var(--lime-accent-9);
}

.text-lime-accent-9 {
  color: var(--lime-accent-9);
}

.text-lime-10 {
  color: var(--lime-color-10);
}

.bg-lime-10 {
  background-color: var(--lime-color-10);
  color: var(--lime-accent-10);
}

.text-lime-gray-10 {
  color: var(--lime-gray-10);
}

.bg-lime-gray-10 {
  background-color: var(--lime-gray-10);
  color: var(--lime-accent-10);
}

.text-lime-accent-10 {
  color: var(--lime-accent-10);
}

.text-green {
  color: var(--green-default);
}

.bg-green {
  background-color: var(--green-default);
  color: var(--green-accent-default);
}

.text-green-lighter {
  color: var(--green-lighter);
}

.bg-green-lighter {
  background-color: var(--green-lighter);
  color: var(--green-accent-lighter);
}

.text-green-light {
  color: var(--green-light);
}

.bg-green-light {
  background-color: var(--green-light);
  color: var(--green-accent-light);
}

.text-green-dark {
  color: var(--green-dark);
}

.bg-green-dark {
  background-color: var(--green-dark);
  color: var(--green-accent-dark);
}

.text-green-darker {
  color: var(--green-darker);
}

.bg-green-darker {
  background-color: var(--green-darker);
  color: var(--green-accent-darker);
}

.text-green-0 {
  color: var(--green-color-0);
}

.bg-green-0 {
  background-color: var(--green-color-0);
  color: var(--green-accent-0);
}

.text-green-gray-0 {
  color: var(--green-gray-0);
}

.bg-green-gray-0 {
  background-color: var(--green-gray-0);
  color: var(--green-accent-0);
}

.text-green-accent-0 {
  color: var(--green-accent-0);
}

.text-green-1 {
  color: var(--green-color-1);
}

.bg-green-1 {
  background-color: var(--green-color-1);
  color: var(--green-accent-1);
}

.text-green-gray-1 {
  color: var(--green-gray-1);
}

.bg-green-gray-1 {
  background-color: var(--green-gray-1);
  color: var(--green-accent-1);
}

.text-green-accent-1 {
  color: var(--green-accent-1);
}

.text-green-2 {
  color: var(--green-color-2);
}

.bg-green-2 {
  background-color: var(--green-color-2);
  color: var(--green-accent-2);
}

.text-green-gray-2 {
  color: var(--green-gray-2);
}

.bg-green-gray-2 {
  background-color: var(--green-gray-2);
  color: var(--green-accent-2);
}

.text-green-accent-2 {
  color: var(--green-accent-2);
}

.text-green-3 {
  color: var(--green-color-3);
}

.bg-green-3 {
  background-color: var(--green-color-3);
  color: var(--green-accent-3);
}

.text-green-gray-3 {
  color: var(--green-gray-3);
}

.bg-green-gray-3 {
  background-color: var(--green-gray-3);
  color: var(--green-accent-3);
}

.text-green-accent-3 {
  color: var(--green-accent-3);
}

.text-green-4 {
  color: var(--green-color-4);
}

.bg-green-4 {
  background-color: var(--green-color-4);
  color: var(--green-accent-4);
}

.text-green-gray-4 {
  color: var(--green-gray-4);
}

.bg-green-gray-4 {
  background-color: var(--green-gray-4);
  color: var(--green-accent-4);
}

.text-green-accent-4 {
  color: var(--green-accent-4);
}

.text-green-5 {
  color: var(--green-color-5);
}

.bg-green-5 {
  background-color: var(--green-color-5);
  color: var(--green-accent-5);
}

.text-green-gray-5 {
  color: var(--green-gray-5);
}

.bg-green-gray-5 {
  background-color: var(--green-gray-5);
  color: var(--green-accent-5);
}

.text-green-accent-5 {
  color: var(--green-accent-5);
}

.text-green-6 {
  color: var(--green-color-6);
}

.bg-green-6 {
  background-color: var(--green-color-6);
  color: var(--green-accent-6);
}

.text-green-gray-6 {
  color: var(--green-gray-6);
}

.bg-green-gray-6 {
  background-color: var(--green-gray-6);
  color: var(--green-accent-6);
}

.text-green-accent-6 {
  color: var(--green-accent-6);
}

.text-green-7 {
  color: var(--green-color-7);
}

.bg-green-7 {
  background-color: var(--green-color-7);
  color: var(--green-accent-7);
}

.text-green-gray-7 {
  color: var(--green-gray-7);
}

.bg-green-gray-7 {
  background-color: var(--green-gray-7);
  color: var(--green-accent-7);
}

.text-green-accent-7 {
  color: var(--green-accent-7);
}

.text-green-8 {
  color: var(--green-color-8);
}

.bg-green-8 {
  background-color: var(--green-color-8);
  color: var(--green-accent-8);
}

.text-green-gray-8 {
  color: var(--green-gray-8);
}

.bg-green-gray-8 {
  background-color: var(--green-gray-8);
  color: var(--green-accent-8);
}

.text-green-accent-8 {
  color: var(--green-accent-8);
}

.text-green-9 {
  color: var(--green-color-9);
}

.bg-green-9 {
  background-color: var(--green-color-9);
  color: var(--green-accent-9);
}

.text-green-gray-9 {
  color: var(--green-gray-9);
}

.bg-green-gray-9 {
  background-color: var(--green-gray-9);
  color: var(--green-accent-9);
}

.text-green-accent-9 {
  color: var(--green-accent-9);
}

.text-green-10 {
  color: var(--green-color-10);
}

.bg-green-10 {
  background-color: var(--green-color-10);
  color: var(--green-accent-10);
}

.text-green-gray-10 {
  color: var(--green-gray-10);
}

.bg-green-gray-10 {
  background-color: var(--green-gray-10);
  color: var(--green-accent-10);
}

.text-green-accent-10 {
  color: var(--green-accent-10);
}

.text-teal {
  color: var(--teal-default);
}

.bg-teal {
  background-color: var(--teal-default);
  color: var(--teal-accent-default);
}

.text-teal-lighter {
  color: var(--teal-lighter);
}

.bg-teal-lighter {
  background-color: var(--teal-lighter);
  color: var(--teal-accent-lighter);
}

.text-teal-light {
  color: var(--teal-light);
}

.bg-teal-light {
  background-color: var(--teal-light);
  color: var(--teal-accent-light);
}

.text-teal-dark {
  color: var(--teal-dark);
}

.bg-teal-dark {
  background-color: var(--teal-dark);
  color: var(--teal-accent-dark);
}

.text-teal-darker {
  color: var(--teal-darker);
}

.bg-teal-darker {
  background-color: var(--teal-darker);
  color: var(--teal-accent-darker);
}

.text-teal-0 {
  color: var(--teal-color-0);
}

.bg-teal-0 {
  background-color: var(--teal-color-0);
  color: var(--teal-accent-0);
}

.text-teal-gray-0 {
  color: var(--teal-gray-0);
}

.bg-teal-gray-0 {
  background-color: var(--teal-gray-0);
  color: var(--teal-accent-0);
}

.text-teal-accent-0 {
  color: var(--teal-accent-0);
}

.text-teal-1 {
  color: var(--teal-color-1);
}

.bg-teal-1 {
  background-color: var(--teal-color-1);
  color: var(--teal-accent-1);
}

.text-teal-gray-1 {
  color: var(--teal-gray-1);
}

.bg-teal-gray-1 {
  background-color: var(--teal-gray-1);
  color: var(--teal-accent-1);
}

.text-teal-accent-1 {
  color: var(--teal-accent-1);
}

.text-teal-2 {
  color: var(--teal-color-2);
}

.bg-teal-2 {
  background-color: var(--teal-color-2);
  color: var(--teal-accent-2);
}

.text-teal-gray-2 {
  color: var(--teal-gray-2);
}

.bg-teal-gray-2 {
  background-color: var(--teal-gray-2);
  color: var(--teal-accent-2);
}

.text-teal-accent-2 {
  color: var(--teal-accent-2);
}

.text-teal-3 {
  color: var(--teal-color-3);
}

.bg-teal-3 {
  background-color: var(--teal-color-3);
  color: var(--teal-accent-3);
}

.text-teal-gray-3 {
  color: var(--teal-gray-3);
}

.bg-teal-gray-3 {
  background-color: var(--teal-gray-3);
  color: var(--teal-accent-3);
}

.text-teal-accent-3 {
  color: var(--teal-accent-3);
}

.text-teal-4 {
  color: var(--teal-color-4);
}

.bg-teal-4 {
  background-color: var(--teal-color-4);
  color: var(--teal-accent-4);
}

.text-teal-gray-4 {
  color: var(--teal-gray-4);
}

.bg-teal-gray-4 {
  background-color: var(--teal-gray-4);
  color: var(--teal-accent-4);
}

.text-teal-accent-4 {
  color: var(--teal-accent-4);
}

.text-teal-5 {
  color: var(--teal-color-5);
}

.bg-teal-5 {
  background-color: var(--teal-color-5);
  color: var(--teal-accent-5);
}

.text-teal-gray-5 {
  color: var(--teal-gray-5);
}

.bg-teal-gray-5 {
  background-color: var(--teal-gray-5);
  color: var(--teal-accent-5);
}

.text-teal-accent-5 {
  color: var(--teal-accent-5);
}

.text-teal-6 {
  color: var(--teal-color-6);
}

.bg-teal-6 {
  background-color: var(--teal-color-6);
  color: var(--teal-accent-6);
}

.text-teal-gray-6 {
  color: var(--teal-gray-6);
}

.bg-teal-gray-6 {
  background-color: var(--teal-gray-6);
  color: var(--teal-accent-6);
}

.text-teal-accent-6 {
  color: var(--teal-accent-6);
}

.text-teal-7 {
  color: var(--teal-color-7);
}

.bg-teal-7 {
  background-color: var(--teal-color-7);
  color: var(--teal-accent-7);
}

.text-teal-gray-7 {
  color: var(--teal-gray-7);
}

.bg-teal-gray-7 {
  background-color: var(--teal-gray-7);
  color: var(--teal-accent-7);
}

.text-teal-accent-7 {
  color: var(--teal-accent-7);
}

.text-teal-8 {
  color: var(--teal-color-8);
}

.bg-teal-8 {
  background-color: var(--teal-color-8);
  color: var(--teal-accent-8);
}

.text-teal-gray-8 {
  color: var(--teal-gray-8);
}

.bg-teal-gray-8 {
  background-color: var(--teal-gray-8);
  color: var(--teal-accent-8);
}

.text-teal-accent-8 {
  color: var(--teal-accent-8);
}

.text-teal-9 {
  color: var(--teal-color-9);
}

.bg-teal-9 {
  background-color: var(--teal-color-9);
  color: var(--teal-accent-9);
}

.text-teal-gray-9 {
  color: var(--teal-gray-9);
}

.bg-teal-gray-9 {
  background-color: var(--teal-gray-9);
  color: var(--teal-accent-9);
}

.text-teal-accent-9 {
  color: var(--teal-accent-9);
}

.text-teal-10 {
  color: var(--teal-color-10);
}

.bg-teal-10 {
  background-color: var(--teal-color-10);
  color: var(--teal-accent-10);
}

.text-teal-gray-10 {
  color: var(--teal-gray-10);
}

.bg-teal-gray-10 {
  background-color: var(--teal-gray-10);
  color: var(--teal-accent-10);
}

.text-teal-accent-10 {
  color: var(--teal-accent-10);
}

.text-cyan {
  color: var(--cyan-default);
}

.bg-cyan {
  background-color: var(--cyan-default);
  color: var(--cyan-accent-default);
}

.text-cyan-lighter {
  color: var(--cyan-lighter);
}

.bg-cyan-lighter {
  background-color: var(--cyan-lighter);
  color: var(--cyan-accent-lighter);
}

.text-cyan-light {
  color: var(--cyan-light);
}

.bg-cyan-light {
  background-color: var(--cyan-light);
  color: var(--cyan-accent-light);
}

.text-cyan-dark {
  color: var(--cyan-dark);
}

.bg-cyan-dark {
  background-color: var(--cyan-dark);
  color: var(--cyan-accent-dark);
}

.text-cyan-darker {
  color: var(--cyan-darker);
}

.bg-cyan-darker {
  background-color: var(--cyan-darker);
  color: var(--cyan-accent-darker);
}

.text-cyan-0 {
  color: var(--cyan-color-0);
}

.bg-cyan-0 {
  background-color: var(--cyan-color-0);
  color: var(--cyan-accent-0);
}

.text-cyan-gray-0 {
  color: var(--cyan-gray-0);
}

.bg-cyan-gray-0 {
  background-color: var(--cyan-gray-0);
  color: var(--cyan-accent-0);
}

.text-cyan-accent-0 {
  color: var(--cyan-accent-0);
}

.text-cyan-1 {
  color: var(--cyan-color-1);
}

.bg-cyan-1 {
  background-color: var(--cyan-color-1);
  color: var(--cyan-accent-1);
}

.text-cyan-gray-1 {
  color: var(--cyan-gray-1);
}

.bg-cyan-gray-1 {
  background-color: var(--cyan-gray-1);
  color: var(--cyan-accent-1);
}

.text-cyan-accent-1 {
  color: var(--cyan-accent-1);
}

.text-cyan-2 {
  color: var(--cyan-color-2);
}

.bg-cyan-2 {
  background-color: var(--cyan-color-2);
  color: var(--cyan-accent-2);
}

.text-cyan-gray-2 {
  color: var(--cyan-gray-2);
}

.bg-cyan-gray-2 {
  background-color: var(--cyan-gray-2);
  color: var(--cyan-accent-2);
}

.text-cyan-accent-2 {
  color: var(--cyan-accent-2);
}

.text-cyan-3 {
  color: var(--cyan-color-3);
}

.bg-cyan-3 {
  background-color: var(--cyan-color-3);
  color: var(--cyan-accent-3);
}

.text-cyan-gray-3 {
  color: var(--cyan-gray-3);
}

.bg-cyan-gray-3 {
  background-color: var(--cyan-gray-3);
  color: var(--cyan-accent-3);
}

.text-cyan-accent-3 {
  color: var(--cyan-accent-3);
}

.text-cyan-4 {
  color: var(--cyan-color-4);
}

.bg-cyan-4 {
  background-color: var(--cyan-color-4);
  color: var(--cyan-accent-4);
}

.text-cyan-gray-4 {
  color: var(--cyan-gray-4);
}

.bg-cyan-gray-4 {
  background-color: var(--cyan-gray-4);
  color: var(--cyan-accent-4);
}

.text-cyan-accent-4 {
  color: var(--cyan-accent-4);
}

.text-cyan-5 {
  color: var(--cyan-color-5);
}

.bg-cyan-5 {
  background-color: var(--cyan-color-5);
  color: var(--cyan-accent-5);
}

.text-cyan-gray-5 {
  color: var(--cyan-gray-5);
}

.bg-cyan-gray-5 {
  background-color: var(--cyan-gray-5);
  color: var(--cyan-accent-5);
}

.text-cyan-accent-5 {
  color: var(--cyan-accent-5);
}

.text-cyan-6 {
  color: var(--cyan-color-6);
}

.bg-cyan-6 {
  background-color: var(--cyan-color-6);
  color: var(--cyan-accent-6);
}

.text-cyan-gray-6 {
  color: var(--cyan-gray-6);
}

.bg-cyan-gray-6 {
  background-color: var(--cyan-gray-6);
  color: var(--cyan-accent-6);
}

.text-cyan-accent-6 {
  color: var(--cyan-accent-6);
}

.text-cyan-7 {
  color: var(--cyan-color-7);
}

.bg-cyan-7 {
  background-color: var(--cyan-color-7);
  color: var(--cyan-accent-7);
}

.text-cyan-gray-7 {
  color: var(--cyan-gray-7);
}

.bg-cyan-gray-7 {
  background-color: var(--cyan-gray-7);
  color: var(--cyan-accent-7);
}

.text-cyan-accent-7 {
  color: var(--cyan-accent-7);
}

.text-cyan-8 {
  color: var(--cyan-color-8);
}

.bg-cyan-8 {
  background-color: var(--cyan-color-8);
  color: var(--cyan-accent-8);
}

.text-cyan-gray-8 {
  color: var(--cyan-gray-8);
}

.bg-cyan-gray-8 {
  background-color: var(--cyan-gray-8);
  color: var(--cyan-accent-8);
}

.text-cyan-accent-8 {
  color: var(--cyan-accent-8);
}

.text-cyan-9 {
  color: var(--cyan-color-9);
}

.bg-cyan-9 {
  background-color: var(--cyan-color-9);
  color: var(--cyan-accent-9);
}

.text-cyan-gray-9 {
  color: var(--cyan-gray-9);
}

.bg-cyan-gray-9 {
  background-color: var(--cyan-gray-9);
  color: var(--cyan-accent-9);
}

.text-cyan-accent-9 {
  color: var(--cyan-accent-9);
}

.text-cyan-10 {
  color: var(--cyan-color-10);
}

.bg-cyan-10 {
  background-color: var(--cyan-color-10);
  color: var(--cyan-accent-10);
}

.text-cyan-gray-10 {
  color: var(--cyan-gray-10);
}

.bg-cyan-gray-10 {
  background-color: var(--cyan-gray-10);
  color: var(--cyan-accent-10);
}

.text-cyan-accent-10 {
  color: var(--cyan-accent-10);
}

.text-blue {
  color: var(--blue-default);
}

.bg-blue {
  background-color: var(--blue-default);
  color: var(--blue-accent-default);
}

.text-blue-lighter {
  color: var(--blue-lighter);
}

.bg-blue-lighter {
  background-color: var(--blue-lighter);
  color: var(--blue-accent-lighter);
}

.text-blue-light {
  color: var(--blue-light);
}

.bg-blue-light {
  background-color: var(--blue-light);
  color: var(--blue-accent-light);
}

.text-blue-dark {
  color: var(--blue-dark);
}

.bg-blue-dark {
  background-color: var(--blue-dark);
  color: var(--blue-accent-dark);
}

.text-blue-darker {
  color: var(--blue-darker);
}

.bg-blue-darker {
  background-color: var(--blue-darker);
  color: var(--blue-accent-darker);
}

.text-blue-0 {
  color: var(--blue-color-0);
}

.bg-blue-0 {
  background-color: var(--blue-color-0);
  color: var(--blue-accent-0);
}

.text-blue-gray-0 {
  color: var(--blue-gray-0);
}

.bg-blue-gray-0 {
  background-color: var(--blue-gray-0);
  color: var(--blue-accent-0);
}

.text-blue-accent-0 {
  color: var(--blue-accent-0);
}

.text-blue-1 {
  color: var(--blue-color-1);
}

.bg-blue-1 {
  background-color: var(--blue-color-1);
  color: var(--blue-accent-1);
}

.text-blue-gray-1 {
  color: var(--blue-gray-1);
}

.bg-blue-gray-1 {
  background-color: var(--blue-gray-1);
  color: var(--blue-accent-1);
}

.text-blue-accent-1 {
  color: var(--blue-accent-1);
}

.text-blue-2 {
  color: var(--blue-color-2);
}

.bg-blue-2 {
  background-color: var(--blue-color-2);
  color: var(--blue-accent-2);
}

.text-blue-gray-2 {
  color: var(--blue-gray-2);
}

.bg-blue-gray-2 {
  background-color: var(--blue-gray-2);
  color: var(--blue-accent-2);
}

.text-blue-accent-2 {
  color: var(--blue-accent-2);
}

.text-blue-3 {
  color: var(--blue-color-3);
}

.bg-blue-3 {
  background-color: var(--blue-color-3);
  color: var(--blue-accent-3);
}

.text-blue-gray-3 {
  color: var(--blue-gray-3);
}

.bg-blue-gray-3 {
  background-color: var(--blue-gray-3);
  color: var(--blue-accent-3);
}

.text-blue-accent-3 {
  color: var(--blue-accent-3);
}

.text-blue-4 {
  color: var(--blue-color-4);
}

.bg-blue-4 {
  background-color: var(--blue-color-4);
  color: var(--blue-accent-4);
}

.text-blue-gray-4 {
  color: var(--blue-gray-4);
}

.bg-blue-gray-4 {
  background-color: var(--blue-gray-4);
  color: var(--blue-accent-4);
}

.text-blue-accent-4 {
  color: var(--blue-accent-4);
}

.text-blue-5 {
  color: var(--blue-color-5);
}

.bg-blue-5 {
  background-color: var(--blue-color-5);
  color: var(--blue-accent-5);
}

.text-blue-gray-5 {
  color: var(--blue-gray-5);
}

.bg-blue-gray-5 {
  background-color: var(--blue-gray-5);
  color: var(--blue-accent-5);
}

.text-blue-accent-5 {
  color: var(--blue-accent-5);
}

.text-blue-6 {
  color: var(--blue-color-6);
}

.bg-blue-6 {
  background-color: var(--blue-color-6);
  color: var(--blue-accent-6);
}

.text-blue-gray-6 {
  color: var(--blue-gray-6);
}

.bg-blue-gray-6 {
  background-color: var(--blue-gray-6);
  color: var(--blue-accent-6);
}

.text-blue-accent-6 {
  color: var(--blue-accent-6);
}

.text-blue-7 {
  color: var(--blue-color-7);
}

.bg-blue-7 {
  background-color: var(--blue-color-7);
  color: var(--blue-accent-7);
}

.text-blue-gray-7 {
  color: var(--blue-gray-7);
}

.bg-blue-gray-7 {
  background-color: var(--blue-gray-7);
  color: var(--blue-accent-7);
}

.text-blue-accent-7 {
  color: var(--blue-accent-7);
}

.text-blue-8 {
  color: var(--blue-color-8);
}

.bg-blue-8 {
  background-color: var(--blue-color-8);
  color: var(--blue-accent-8);
}

.text-blue-gray-8 {
  color: var(--blue-gray-8);
}

.bg-blue-gray-8 {
  background-color: var(--blue-gray-8);
  color: var(--blue-accent-8);
}

.text-blue-accent-8 {
  color: var(--blue-accent-8);
}

.text-blue-9 {
  color: var(--blue-color-9);
}

.bg-blue-9 {
  background-color: var(--blue-color-9);
  color: var(--blue-accent-9);
}

.text-blue-gray-9 {
  color: var(--blue-gray-9);
}

.bg-blue-gray-9 {
  background-color: var(--blue-gray-9);
  color: var(--blue-accent-9);
}

.text-blue-accent-9 {
  color: var(--blue-accent-9);
}

.text-blue-10 {
  color: var(--blue-color-10);
}

.bg-blue-10 {
  background-color: var(--blue-color-10);
  color: var(--blue-accent-10);
}

.text-blue-gray-10 {
  color: var(--blue-gray-10);
}

.bg-blue-gray-10 {
  background-color: var(--blue-gray-10);
  color: var(--blue-accent-10);
}

.text-blue-accent-10 {
  color: var(--blue-accent-10);
}

.text-indigo {
  color: var(--indigo-default);
}

.bg-indigo {
  background-color: var(--indigo-default);
  color: var(--indigo-accent-default);
}

.text-indigo-lighter {
  color: var(--indigo-lighter);
}

.bg-indigo-lighter {
  background-color: var(--indigo-lighter);
  color: var(--indigo-accent-lighter);
}

.text-indigo-light {
  color: var(--indigo-light);
}

.bg-indigo-light {
  background-color: var(--indigo-light);
  color: var(--indigo-accent-light);
}

.text-indigo-dark {
  color: var(--indigo-dark);
}

.bg-indigo-dark {
  background-color: var(--indigo-dark);
  color: var(--indigo-accent-dark);
}

.text-indigo-darker {
  color: var(--indigo-darker);
}

.bg-indigo-darker {
  background-color: var(--indigo-darker);
  color: var(--indigo-accent-darker);
}

.text-indigo-0 {
  color: var(--indigo-color-0);
}

.bg-indigo-0 {
  background-color: var(--indigo-color-0);
  color: var(--indigo-accent-0);
}

.text-indigo-gray-0 {
  color: var(--indigo-gray-0);
}

.bg-indigo-gray-0 {
  background-color: var(--indigo-gray-0);
  color: var(--indigo-accent-0);
}

.text-indigo-accent-0 {
  color: var(--indigo-accent-0);
}

.text-indigo-1 {
  color: var(--indigo-color-1);
}

.bg-indigo-1 {
  background-color: var(--indigo-color-1);
  color: var(--indigo-accent-1);
}

.text-indigo-gray-1 {
  color: var(--indigo-gray-1);
}

.bg-indigo-gray-1 {
  background-color: var(--indigo-gray-1);
  color: var(--indigo-accent-1);
}

.text-indigo-accent-1 {
  color: var(--indigo-accent-1);
}

.text-indigo-2 {
  color: var(--indigo-color-2);
}

.bg-indigo-2 {
  background-color: var(--indigo-color-2);
  color: var(--indigo-accent-2);
}

.text-indigo-gray-2 {
  color: var(--indigo-gray-2);
}

.bg-indigo-gray-2 {
  background-color: var(--indigo-gray-2);
  color: var(--indigo-accent-2);
}

.text-indigo-accent-2 {
  color: var(--indigo-accent-2);
}

.text-indigo-3 {
  color: var(--indigo-color-3);
}

.bg-indigo-3 {
  background-color: var(--indigo-color-3);
  color: var(--indigo-accent-3);
}

.text-indigo-gray-3 {
  color: var(--indigo-gray-3);
}

.bg-indigo-gray-3 {
  background-color: var(--indigo-gray-3);
  color: var(--indigo-accent-3);
}

.text-indigo-accent-3 {
  color: var(--indigo-accent-3);
}

.text-indigo-4 {
  color: var(--indigo-color-4);
}

.bg-indigo-4 {
  background-color: var(--indigo-color-4);
  color: var(--indigo-accent-4);
}

.text-indigo-gray-4 {
  color: var(--indigo-gray-4);
}

.bg-indigo-gray-4 {
  background-color: var(--indigo-gray-4);
  color: var(--indigo-accent-4);
}

.text-indigo-accent-4 {
  color: var(--indigo-accent-4);
}

.text-indigo-5 {
  color: var(--indigo-color-5);
}

.bg-indigo-5 {
  background-color: var(--indigo-color-5);
  color: var(--indigo-accent-5);
}

.text-indigo-gray-5 {
  color: var(--indigo-gray-5);
}

.bg-indigo-gray-5 {
  background-color: var(--indigo-gray-5);
  color: var(--indigo-accent-5);
}

.text-indigo-accent-5 {
  color: var(--indigo-accent-5);
}

.text-indigo-6 {
  color: var(--indigo-color-6);
}

.bg-indigo-6 {
  background-color: var(--indigo-color-6);
  color: var(--indigo-accent-6);
}

.text-indigo-gray-6 {
  color: var(--indigo-gray-6);
}

.bg-indigo-gray-6 {
  background-color: var(--indigo-gray-6);
  color: var(--indigo-accent-6);
}

.text-indigo-accent-6 {
  color: var(--indigo-accent-6);
}

.text-indigo-7 {
  color: var(--indigo-color-7);
}

.bg-indigo-7 {
  background-color: var(--indigo-color-7);
  color: var(--indigo-accent-7);
}

.text-indigo-gray-7 {
  color: var(--indigo-gray-7);
}

.bg-indigo-gray-7 {
  background-color: var(--indigo-gray-7);
  color: var(--indigo-accent-7);
}

.text-indigo-accent-7 {
  color: var(--indigo-accent-7);
}

.text-indigo-8 {
  color: var(--indigo-color-8);
}

.bg-indigo-8 {
  background-color: var(--indigo-color-8);
  color: var(--indigo-accent-8);
}

.text-indigo-gray-8 {
  color: var(--indigo-gray-8);
}

.bg-indigo-gray-8 {
  background-color: var(--indigo-gray-8);
  color: var(--indigo-accent-8);
}

.text-indigo-accent-8 {
  color: var(--indigo-accent-8);
}

.text-indigo-9 {
  color: var(--indigo-color-9);
}

.bg-indigo-9 {
  background-color: var(--indigo-color-9);
  color: var(--indigo-accent-9);
}

.text-indigo-gray-9 {
  color: var(--indigo-gray-9);
}

.bg-indigo-gray-9 {
  background-color: var(--indigo-gray-9);
  color: var(--indigo-accent-9);
}

.text-indigo-accent-9 {
  color: var(--indigo-accent-9);
}

.text-indigo-10 {
  color: var(--indigo-color-10);
}

.bg-indigo-10 {
  background-color: var(--indigo-color-10);
  color: var(--indigo-accent-10);
}

.text-indigo-gray-10 {
  color: var(--indigo-gray-10);
}

.bg-indigo-gray-10 {
  background-color: var(--indigo-gray-10);
  color: var(--indigo-accent-10);
}

.text-indigo-accent-10 {
  color: var(--indigo-accent-10);
}

.text-violet {
  color: var(--violet-default);
}

.bg-violet {
  background-color: var(--violet-default);
  color: var(--violet-accent-default);
}

.text-violet-lighter {
  color: var(--violet-lighter);
}

.bg-violet-lighter {
  background-color: var(--violet-lighter);
  color: var(--violet-accent-lighter);
}

.text-violet-light {
  color: var(--violet-light);
}

.bg-violet-light {
  background-color: var(--violet-light);
  color: var(--violet-accent-light);
}

.text-violet-dark {
  color: var(--violet-dark);
}

.bg-violet-dark {
  background-color: var(--violet-dark);
  color: var(--violet-accent-dark);
}

.text-violet-darker {
  color: var(--violet-darker);
}

.bg-violet-darker {
  background-color: var(--violet-darker);
  color: var(--violet-accent-darker);
}

.text-violet-0 {
  color: var(--violet-color-0);
}

.bg-violet-0 {
  background-color: var(--violet-color-0);
  color: var(--violet-accent-0);
}

.text-violet-gray-0 {
  color: var(--violet-gray-0);
}

.bg-violet-gray-0 {
  background-color: var(--violet-gray-0);
  color: var(--violet-accent-0);
}

.text-violet-accent-0 {
  color: var(--violet-accent-0);
}

.text-violet-1 {
  color: var(--violet-color-1);
}

.bg-violet-1 {
  background-color: var(--violet-color-1);
  color: var(--violet-accent-1);
}

.text-violet-gray-1 {
  color: var(--violet-gray-1);
}

.bg-violet-gray-1 {
  background-color: var(--violet-gray-1);
  color: var(--violet-accent-1);
}

.text-violet-accent-1 {
  color: var(--violet-accent-1);
}

.text-violet-2 {
  color: var(--violet-color-2);
}

.bg-violet-2 {
  background-color: var(--violet-color-2);
  color: var(--violet-accent-2);
}

.text-violet-gray-2 {
  color: var(--violet-gray-2);
}

.bg-violet-gray-2 {
  background-color: var(--violet-gray-2);
  color: var(--violet-accent-2);
}

.text-violet-accent-2 {
  color: var(--violet-accent-2);
}

.text-violet-3 {
  color: var(--violet-color-3);
}

.bg-violet-3 {
  background-color: var(--violet-color-3);
  color: var(--violet-accent-3);
}

.text-violet-gray-3 {
  color: var(--violet-gray-3);
}

.bg-violet-gray-3 {
  background-color: var(--violet-gray-3);
  color: var(--violet-accent-3);
}

.text-violet-accent-3 {
  color: var(--violet-accent-3);
}

.text-violet-4 {
  color: var(--violet-color-4);
}

.bg-violet-4 {
  background-color: var(--violet-color-4);
  color: var(--violet-accent-4);
}

.text-violet-gray-4 {
  color: var(--violet-gray-4);
}

.bg-violet-gray-4 {
  background-color: var(--violet-gray-4);
  color: var(--violet-accent-4);
}

.text-violet-accent-4 {
  color: var(--violet-accent-4);
}

.text-violet-5 {
  color: var(--violet-color-5);
}

.bg-violet-5 {
  background-color: var(--violet-color-5);
  color: var(--violet-accent-5);
}

.text-violet-gray-5 {
  color: var(--violet-gray-5);
}

.bg-violet-gray-5 {
  background-color: var(--violet-gray-5);
  color: var(--violet-accent-5);
}

.text-violet-accent-5 {
  color: var(--violet-accent-5);
}

.text-violet-6 {
  color: var(--violet-color-6);
}

.bg-violet-6 {
  background-color: var(--violet-color-6);
  color: var(--violet-accent-6);
}

.text-violet-gray-6 {
  color: var(--violet-gray-6);
}

.bg-violet-gray-6 {
  background-color: var(--violet-gray-6);
  color: var(--violet-accent-6);
}

.text-violet-accent-6 {
  color: var(--violet-accent-6);
}

.text-violet-7 {
  color: var(--violet-color-7);
}

.bg-violet-7 {
  background-color: var(--violet-color-7);
  color: var(--violet-accent-7);
}

.text-violet-gray-7 {
  color: var(--violet-gray-7);
}

.bg-violet-gray-7 {
  background-color: var(--violet-gray-7);
  color: var(--violet-accent-7);
}

.text-violet-accent-7 {
  color: var(--violet-accent-7);
}

.text-violet-8 {
  color: var(--violet-color-8);
}

.bg-violet-8 {
  background-color: var(--violet-color-8);
  color: var(--violet-accent-8);
}

.text-violet-gray-8 {
  color: var(--violet-gray-8);
}

.bg-violet-gray-8 {
  background-color: var(--violet-gray-8);
  color: var(--violet-accent-8);
}

.text-violet-accent-8 {
  color: var(--violet-accent-8);
}

.text-violet-9 {
  color: var(--violet-color-9);
}

.bg-violet-9 {
  background-color: var(--violet-color-9);
  color: var(--violet-accent-9);
}

.text-violet-gray-9 {
  color: var(--violet-gray-9);
}

.bg-violet-gray-9 {
  background-color: var(--violet-gray-9);
  color: var(--violet-accent-9);
}

.text-violet-accent-9 {
  color: var(--violet-accent-9);
}

.text-violet-10 {
  color: var(--violet-color-10);
}

.bg-violet-10 {
  background-color: var(--violet-color-10);
  color: var(--violet-accent-10);
}

.text-violet-gray-10 {
  color: var(--violet-gray-10);
}

.bg-violet-gray-10 {
  background-color: var(--violet-gray-10);
  color: var(--violet-accent-10);
}

.text-violet-accent-10 {
  color: var(--violet-accent-10);
}

.text-purple {
  color: var(--purple-default);
}

.bg-purple {
  background-color: var(--purple-default);
  color: var(--purple-accent-default);
}

.text-purple-lighter {
  color: var(--purple-lighter);
}

.bg-purple-lighter {
  background-color: var(--purple-lighter);
  color: var(--purple-accent-lighter);
}

.text-purple-light {
  color: var(--purple-light);
}

.bg-purple-light {
  background-color: var(--purple-light);
  color: var(--purple-accent-light);
}

.text-purple-dark {
  color: var(--purple-dark);
}

.bg-purple-dark {
  background-color: var(--purple-dark);
  color: var(--purple-accent-dark);
}

.text-purple-darker {
  color: var(--purple-darker);
}

.bg-purple-darker {
  background-color: var(--purple-darker);
  color: var(--purple-accent-darker);
}

.text-purple-0 {
  color: var(--purple-color-0);
}

.bg-purple-0 {
  background-color: var(--purple-color-0);
  color: var(--purple-accent-0);
}

.text-purple-gray-0 {
  color: var(--purple-gray-0);
}

.bg-purple-gray-0 {
  background-color: var(--purple-gray-0);
  color: var(--purple-accent-0);
}

.text-purple-accent-0 {
  color: var(--purple-accent-0);
}

.text-purple-1 {
  color: var(--purple-color-1);
}

.bg-purple-1 {
  background-color: var(--purple-color-1);
  color: var(--purple-accent-1);
}

.text-purple-gray-1 {
  color: var(--purple-gray-1);
}

.bg-purple-gray-1 {
  background-color: var(--purple-gray-1);
  color: var(--purple-accent-1);
}

.text-purple-accent-1 {
  color: var(--purple-accent-1);
}

.text-purple-2 {
  color: var(--purple-color-2);
}

.bg-purple-2 {
  background-color: var(--purple-color-2);
  color: var(--purple-accent-2);
}

.text-purple-gray-2 {
  color: var(--purple-gray-2);
}

.bg-purple-gray-2 {
  background-color: var(--purple-gray-2);
  color: var(--purple-accent-2);
}

.text-purple-accent-2 {
  color: var(--purple-accent-2);
}

.text-purple-3 {
  color: var(--purple-color-3);
}

.bg-purple-3 {
  background-color: var(--purple-color-3);
  color: var(--purple-accent-3);
}

.text-purple-gray-3 {
  color: var(--purple-gray-3);
}

.bg-purple-gray-3 {
  background-color: var(--purple-gray-3);
  color: var(--purple-accent-3);
}

.text-purple-accent-3 {
  color: var(--purple-accent-3);
}

.text-purple-4 {
  color: var(--purple-color-4);
}

.bg-purple-4 {
  background-color: var(--purple-color-4);
  color: var(--purple-accent-4);
}

.text-purple-gray-4 {
  color: var(--purple-gray-4);
}

.bg-purple-gray-4 {
  background-color: var(--purple-gray-4);
  color: var(--purple-accent-4);
}

.text-purple-accent-4 {
  color: var(--purple-accent-4);
}

.text-purple-5 {
  color: var(--purple-color-5);
}

.bg-purple-5 {
  background-color: var(--purple-color-5);
  color: var(--purple-accent-5);
}

.text-purple-gray-5 {
  color: var(--purple-gray-5);
}

.bg-purple-gray-5 {
  background-color: var(--purple-gray-5);
  color: var(--purple-accent-5);
}

.text-purple-accent-5 {
  color: var(--purple-accent-5);
}

.text-purple-6 {
  color: var(--purple-color-6);
}

.bg-purple-6 {
  background-color: var(--purple-color-6);
  color: var(--purple-accent-6);
}

.text-purple-gray-6 {
  color: var(--purple-gray-6);
}

.bg-purple-gray-6 {
  background-color: var(--purple-gray-6);
  color: var(--purple-accent-6);
}

.text-purple-accent-6 {
  color: var(--purple-accent-6);
}

.text-purple-7 {
  color: var(--purple-color-7);
}

.bg-purple-7 {
  background-color: var(--purple-color-7);
  color: var(--purple-accent-7);
}

.text-purple-gray-7 {
  color: var(--purple-gray-7);
}

.bg-purple-gray-7 {
  background-color: var(--purple-gray-7);
  color: var(--purple-accent-7);
}

.text-purple-accent-7 {
  color: var(--purple-accent-7);
}

.text-purple-8 {
  color: var(--purple-color-8);
}

.bg-purple-8 {
  background-color: var(--purple-color-8);
  color: var(--purple-accent-8);
}

.text-purple-gray-8 {
  color: var(--purple-gray-8);
}

.bg-purple-gray-8 {
  background-color: var(--purple-gray-8);
  color: var(--purple-accent-8);
}

.text-purple-accent-8 {
  color: var(--purple-accent-8);
}

.text-purple-9 {
  color: var(--purple-color-9);
}

.bg-purple-9 {
  background-color: var(--purple-color-9);
  color: var(--purple-accent-9);
}

.text-purple-gray-9 {
  color: var(--purple-gray-9);
}

.bg-purple-gray-9 {
  background-color: var(--purple-gray-9);
  color: var(--purple-accent-9);
}

.text-purple-accent-9 {
  color: var(--purple-accent-9);
}

.text-purple-10 {
  color: var(--purple-color-10);
}

.bg-purple-10 {
  background-color: var(--purple-color-10);
  color: var(--purple-accent-10);
}

.text-purple-gray-10 {
  color: var(--purple-gray-10);
}

.bg-purple-gray-10 {
  background-color: var(--purple-gray-10);
  color: var(--purple-accent-10);
}

.text-purple-accent-10 {
  color: var(--purple-accent-10);
}

.text-pink {
  color: var(--pink-default);
}

.bg-pink {
  background-color: var(--pink-default);
  color: var(--pink-accent-default);
}

.text-pink-lighter {
  color: var(--pink-lighter);
}

.bg-pink-lighter {
  background-color: var(--pink-lighter);
  color: var(--pink-accent-lighter);
}

.text-pink-light {
  color: var(--pink-light);
}

.bg-pink-light {
  background-color: var(--pink-light);
  color: var(--pink-accent-light);
}

.text-pink-dark {
  color: var(--pink-dark);
}

.bg-pink-dark {
  background-color: var(--pink-dark);
  color: var(--pink-accent-dark);
}

.text-pink-darker {
  color: var(--pink-darker);
}

.bg-pink-darker {
  background-color: var(--pink-darker);
  color: var(--pink-accent-darker);
}

.text-pink-0 {
  color: var(--pink-color-0);
}

.bg-pink-0 {
  background-color: var(--pink-color-0);
  color: var(--pink-accent-0);
}

.text-pink-gray-0 {
  color: var(--pink-gray-0);
}

.bg-pink-gray-0 {
  background-color: var(--pink-gray-0);
  color: var(--pink-accent-0);
}

.text-pink-accent-0 {
  color: var(--pink-accent-0);
}

.text-pink-1 {
  color: var(--pink-color-1);
}

.bg-pink-1 {
  background-color: var(--pink-color-1);
  color: var(--pink-accent-1);
}

.text-pink-gray-1 {
  color: var(--pink-gray-1);
}

.bg-pink-gray-1 {
  background-color: var(--pink-gray-1);
  color: var(--pink-accent-1);
}

.text-pink-accent-1 {
  color: var(--pink-accent-1);
}

.text-pink-2 {
  color: var(--pink-color-2);
}

.bg-pink-2 {
  background-color: var(--pink-color-2);
  color: var(--pink-accent-2);
}

.text-pink-gray-2 {
  color: var(--pink-gray-2);
}

.bg-pink-gray-2 {
  background-color: var(--pink-gray-2);
  color: var(--pink-accent-2);
}

.text-pink-accent-2 {
  color: var(--pink-accent-2);
}

.text-pink-3 {
  color: var(--pink-color-3);
}

.bg-pink-3 {
  background-color: var(--pink-color-3);
  color: var(--pink-accent-3);
}

.text-pink-gray-3 {
  color: var(--pink-gray-3);
}

.bg-pink-gray-3 {
  background-color: var(--pink-gray-3);
  color: var(--pink-accent-3);
}

.text-pink-accent-3 {
  color: var(--pink-accent-3);
}

.text-pink-4 {
  color: var(--pink-color-4);
}

.bg-pink-4 {
  background-color: var(--pink-color-4);
  color: var(--pink-accent-4);
}

.text-pink-gray-4 {
  color: var(--pink-gray-4);
}

.bg-pink-gray-4 {
  background-color: var(--pink-gray-4);
  color: var(--pink-accent-4);
}

.text-pink-accent-4 {
  color: var(--pink-accent-4);
}

.text-pink-5 {
  color: var(--pink-color-5);
}

.bg-pink-5 {
  background-color: var(--pink-color-5);
  color: var(--pink-accent-5);
}

.text-pink-gray-5 {
  color: var(--pink-gray-5);
}

.bg-pink-gray-5 {
  background-color: var(--pink-gray-5);
  color: var(--pink-accent-5);
}

.text-pink-accent-5 {
  color: var(--pink-accent-5);
}

.text-pink-6 {
  color: var(--pink-color-6);
}

.bg-pink-6 {
  background-color: var(--pink-color-6);
  color: var(--pink-accent-6);
}

.text-pink-gray-6 {
  color: var(--pink-gray-6);
}

.bg-pink-gray-6 {
  background-color: var(--pink-gray-6);
  color: var(--pink-accent-6);
}

.text-pink-accent-6 {
  color: var(--pink-accent-6);
}

.text-pink-7 {
  color: var(--pink-color-7);
}

.bg-pink-7 {
  background-color: var(--pink-color-7);
  color: var(--pink-accent-7);
}

.text-pink-gray-7 {
  color: var(--pink-gray-7);
}

.bg-pink-gray-7 {
  background-color: var(--pink-gray-7);
  color: var(--pink-accent-7);
}

.text-pink-accent-7 {
  color: var(--pink-accent-7);
}

.text-pink-8 {
  color: var(--pink-color-8);
}

.bg-pink-8 {
  background-color: var(--pink-color-8);
  color: var(--pink-accent-8);
}

.text-pink-gray-8 {
  color: var(--pink-gray-8);
}

.bg-pink-gray-8 {
  background-color: var(--pink-gray-8);
  color: var(--pink-accent-8);
}

.text-pink-accent-8 {
  color: var(--pink-accent-8);
}

.text-pink-9 {
  color: var(--pink-color-9);
}

.bg-pink-9 {
  background-color: var(--pink-color-9);
  color: var(--pink-accent-9);
}

.text-pink-gray-9 {
  color: var(--pink-gray-9);
}

.bg-pink-gray-9 {
  background-color: var(--pink-gray-9);
  color: var(--pink-accent-9);
}

.text-pink-accent-9 {
  color: var(--pink-accent-9);
}

.text-pink-10 {
  color: var(--pink-color-10);
}

.bg-pink-10 {
  background-color: var(--pink-color-10);
  color: var(--pink-accent-10);
}

.text-pink-gray-10 {
  color: var(--pink-gray-10);
}

.bg-pink-gray-10 {
  background-color: var(--pink-gray-10);
  color: var(--pink-accent-10);
}

.text-pink-accent-10 {
  color: var(--pink-accent-10);
}

:root {
  --font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-body-size: 16px;
  font-family: var(--font-family);
  font-size: var(--font-body-size);
}

h1,
h2,
h3,
h4,
h5,
h6,
span,
p,
a,
li,
pre {
  margin: 0;
}

.border.palette {
  border-color: var(--palette-default);
}

body {
  background-color: var(--surface-color);
  color: var(--text-color);
  font-family: var(--font-family);
  font-size: var(--font-body-size);
}

/*# sourceMappingURL=nomad-css-ui.css.map */