.sr-only {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  height: 0;
  width: 0;
  opacity: 0;
}

.skip-to-content {
  position: absolute;
  top: 0;
  text-align: center;
  z-index: 1000;
  background: var(--black);
  width: initial;
  margin: initial;
  max-width: initial;
  min-width: initial;
  padding-left: initial;
  padding-top: initial;
  padding-bottom: initial;
  border-radius: var(--border-radius-small);
}
.skip-to-content li {
  display: inline;
}
.skip-to-content li a {
  background: var(--black);
  color: var(--white);
  text-decoration: none;
  border-radius: var(--border-radius-small);
  padding: 0;
}
.skip-to-content li a:focus, .skip-to-content li a:active {
  position: static;
  font-size: var(--font-size-medium);
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  overflow: auto;
  display: block;
  background: var(--black);
  color: var(--white);
  padding: 1ch 2ch;
  margin: 0.5ch 0.5ch;
}

.hide-skip-to-content {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  left: initial;
  overflow: hidden;
  display: inline;
}

.app-ally-modal__section {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-large);
}

.app-ally-modal__color-modes {
  width: auto;
  padding-left: var(--space-medium);
  display: flex;
  align-items: center;
  justify-items: center;
  gap: var(--space-small);
}

.app-ally-modal__actions {
  width: auto;
  padding-left: var(--space-medium);
  display: grid;
  grid-template-columns: repeat(auto-fit, clamp(40px, 100%, 50px));
  align-items: center;
  justify-items: center;
  gap: var(--space-small);
}
.app-ally-modal__actions button {
  border-radius: 100px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  font-weight: bold;
  background-color: transparent;
  border: none;
  outline: var(--focus-outline--off);
  box-shadow: 0 0 0 0px var(--focus-dropshadow--off);
  transition: border 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
.app-ally-modal__actions button:focus, .app-ally-modal__actions button:focus-visible {
  outline: var(--focus-outline);
  box-shadow: 0 0 0 6px var(--focus-dropshadow);
  transition: border 0.2s ease, box-shadow 0.2s ease;
  z-index: 99999;
}

.app-ally-modal__actions button {
  color: var(--text);
}
.app-ally-modal__actions button.button__contrast--normal {
  color: #000;
  background-color: #fff;
}
.app-ally-modal__actions button.button__contrast--normal.selected {
  border-color: #000;
}
.app-ally-modal__actions button.button__contrast--blackwhite {
  color: var(--contrast-black);
  background-color: var(--contrast-white);
}
.app-ally-modal__actions button.button__contrast--blackwhite.selected {
  border-color: var(--contrast-black);
}
.app-ally-modal__actions button.button__contrast--whiteblack {
  color: var(--contrast-white);
  background-color: var(--contrast-black);
}
.app-ally-modal__actions button.button__contrast--whiteblack.selected {
  border-color: var(--contrast-white);
}
.app-ally-modal__actions button.button__contrast--yellowblue {
  color: var(--contrast-yellow);
  background-color: var(--contrast-blue);
}
.app-ally-modal__actions button.button__contrast--yellowblue.selected {
  border-color: var(-contrast--yellow);
}
.app-ally-modal__actions button.button__contrast--blueyellow {
  color: var(--contrast-blue);
  background-color: var(--contrast-yellow);
}
.app-ally-modal__actions button.button__contrast--blueyellow.selected {
  border-color: var(--contrast-blue);
}
.app-ally-modal__actions button.button__contrast--greenblack {
  color: var(--contrast-green);
  background-color: var(--contrast-black);
}
.app-ally-modal__actions button.button__contrast--greenblack.selected {
  border-color: var(--contrast-green);
}
.app-ally-modal__actions button.button__contrast--redcyan {
  color: var(--contrast-red);
  background-color: var(--contrast-cyan);
}
.app-ally-modal__actions button.button__contrast--redcyan.selected {
  border-color: var(--contrast-red);
}

.app-ally-modal__shortcuts {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-x-large);
}
.app-ally-modal__shortcuts table {
  width: auto;
  margin: 0;
  font-size: var(--font-size-x-small);
  color: var(--gray-700);
  line-height: normal;
}
.app-ally-modal__shortcuts tbody {
  display: flex;
  flex-direction: column;
}
.app-ally-modal__shortcuts tbody tr td {
  max-width: initial;
  min-width: 280px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.app-ally-modal__shortcuts tbody tr td kbd {
  border-radius: var(--border-radius-small);
  padding: var(--space-medium);
  font-weight: bold;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin: 0;
  width: 4ch;
  min-width: 4ch;
  text-align: center;
  color: #000;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.app-ally-modal__shortcuts tbody tr td,
.app-ally-modal__shortcuts tbody tr th {
  padding: 0.25ch;
  text-align: left;
  gap: 1ch;
}

.app-ally-modal__color-modes button.color-mode.selected,
.app-ally-modal__actions button.selected {
  border-width: 2px;
  border-style: dashed;
  border-color: var(--black);
}

body#cbook-body .app-ally-modal__actions .button__font-size--normal {
  font-size: 1rem;
}
body#cbook-body .app-ally-modal__actions .button__font-size--medium {
  font-size: 1.25rem;
}
body#cbook-body .app-ally-modal__actions .button__font-size--large {
  font-size: 1.75rem;
}
body#cbook-body .app-ally-modal__actions .button__font-size--x-large {
  font-size: 2rem;
}

.app-ally-modal__no-bg,
.app-ally-modal__no-animations {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-medium);
  padding-top: var(--space-medium);
}
.app-ally-modal__no-bg input,
.app-ally-modal__no-animations input {
  aspect-ratio: 1/1;
  width: var(--icon-size-m, 24px);
  height: var(--icon-size-m, 24px);
}

.app-ally-modal__actions button.button__contrast--blackwhite,
.app-ally-modal__actions button.button__contrast--whiteblack,
.app-ally-modal__actions button.button__contrast--yellowblue,
.app-ally-modal__actions button.button__contrast--redcyan,
.app-ally-modal__actions button.button__contrast--greenblack {
  display: var(--all-contrast-options, none);
}

body#cbook-body .app-ally-modal__actions .button__font-size--medium,
body#cbook-body .app-ally-modal__actions .button__font-size--large {
  display: var(--all-font-size-options-options, none);
}

body#cbook-body.bg--hidden .chart__background-image,
body#extension-body.bg--hidden .chart__background-image {
  display: none;
}

body#cbook-body.bg--hidden *:not(.card__front, .card__back) {
  background-image: none;
}

body#cbook-body.animation--hidden .card-item .card__front,
body#cbook-body.animation--hidden .card-item .card__back {
  transition: none;
}

body#cbook-body.bg--hidden #app-responsive-hotspots-backend .chart__background #chart-bg-id,
body#extension-body.bg--hidden #app-responsive-hotspots .chart__background #chart-bg-id {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

body#cbook-body.contrast--normal,
body#extension-body.contrast--normal {
  --primary: hsl(221.54, 11.3%, 22.55%);
  --primary-h: 221.54;
  --primary-s: 11.3%;
  --primary-l: 22.55%;
  --secondary: hsl(169, 91%, 35%);
  --secondary-h: 169;
  --secondary-s: 91%;
  --secondary-l: 35%;
  --tertiary: hsl(34, 70%, 60%);
  --tertiary-h: 34;
  --tertiary-s: 70%;
  --tertiary-l: 60%;
  --success: hsl(145, 63%, 47%);
  --success-h: 145;
  --success-s: 63%;
  --success-l: 47%;
  --info: hsl(197, 84%, 38%);
  --info-h: 197;
  --info-s: 84%;
  --info-l: 38%;
  --warning: hsl(34, 70%, 60%);
  --warning-h: 34;
  --warning-s: 70%;
  --warning-l: 60%;
  --error: hsl(5.93, 90%, 35.29%);
  --error-h: 5.93;
  --error-s: 90%;
  --error-l: 35.29%;
  --white: hsl(0, 0%, 100%);
  --white-h: 0;
  --white-s: 0%;
  --white-l: 100%;
  --text: hsl(0, 0%, 0%);
  --text-inverse: hsl(0, 0%, 100%);
  --background: hsl(0, 0%, 100%);
  --background-inverse: hsl(0, 0%, 0%);
  --highlight: var(--secondary);
  --focus-color: var(--secondary);
  --focus-outline: 2px solid var(--focus-color);
  --focus-outline-off: 0px solid var(--focus-color);
  --focus-dropshadow: var(--focus-color) 0 0 0 3px;
  --focus-dropshadow-off: var(--focus-color) 0 0 0 0;
  --search-highlight: hsl(60, 100%, 50%);
  --search-highlight-color: var(--black);
  /************************** Shade variations **************************/
  --primary-900: hsl(calc(var(--primary-h) * 0.975), calc(var(--primary-s) * 0.799), calc(var(--primary-l) * 0.551));
  --primary-800: hsl(calc(var(--primary-h) * 0.995), calc(var(--primary-s) * 0.872), calc(var(--primary-l) * 0.757));
  --primary-700: hsl(calc(var(--primary-h) * 0.999), calc(var(--primary-s) * 0.907), calc(var(--primary-l) * 0.874));
  --primary-600: hsl(calc(var(--primary-h) * 1.004), calc(var(--primary-s) * 0.968), calc(var(--primary-l) * 0.985));
  --primary-500: var(--primary);
  --primary-400: hsl(calc(var(--primary-h) * 1.002), calc(var(--primary-s) * 0.667), calc(var(--primary-l) * 1.323));
  --primary-300: hsl(calc(var(--primary-h) * 1), calc(var(--primary-s) * 0.601), calc(var(--primary-l) * 1.568));
  --primary-200: hsl(calc(var(--primary-h) * 0.995), calc(var(--primary-s) * 0.595), calc(var(--primary-l) * 1.905));
  --primary-100: hsl(calc(var(--primary-h) * 0.99), calc(var(--primary-s) * 0.586), calc(var(--primary-l) * 2.242));
  --primary-50: hsl(calc(var(--primary-h) * 0.99), calc(var(--primary-s) * 0.592), calc(var(--primary-l) * 2.562));
  --secondary-900: hsl(calc(var(--secondary-h) * 0.975), calc(var(--secondary-s) * 0.799), calc(var(--secondary-l) * 0.551));
  --secondary-800: hsl(calc(var(--secondary-h) * 0.995), calc(var(--secondary-s) * 0.872), calc(var(--secondary-l) * 0.757));
  --secondary-700: hsl(calc(var(--secondary-h) * 0.999), calc(var(--secondary-s) * 0.907), calc(var(--secondary-l) * 0.874));
  --secondary-600: hsl(calc(var(--secondary-h) * 1.004), calc(var(--secondary-s) * 0.968), calc(var(--secondary-l) * 0.985));
  --secondary-500: var(--secondary);
  --secondary-400: hsl(calc(var(--secondary-h) * 1.002), calc(var(--secondary-s) * 0.667), calc(var(--secondary-l) * 1.323));
  --secondary-300: hsl(calc(var(--secondary-h) * 1), calc(var(--secondary-s) * 0.601), calc(var(--secondary-l) * 1.568));
  --secondary-200: hsl(calc(var(--secondary-h) * 0.995), calc(var(--secondary-s) * 0.595), calc(var(--secondary-l) * 1.905));
  --secondary-100: hsl(calc(var(--secondary-h) * 0.99), calc(var(--secondary-s) * 0.586), calc(var(--secondary-l) * 2.242));
  --secondary-50: hsl(calc(var(--secondary-h) * 0.99), calc(var(--secondary-s) * 0.592), calc(var(--secondary-l) * 2.562));
  --tertiary-900: hsl(calc(var(--tertiary-h) * 0.975), calc(var(--tertiary-s) * 0.799), calc(var(--tertiary-l) * 0.551));
  --tertiary-800: hsl(calc(var(--tertiary-h) * 0.995), calc(var(--tertiary-s) * 0.872), calc(var(--tertiary-l) * 0.757));
  --tertiary-700: hsl(calc(var(--tertiary-h) * 0.999), calc(var(--tertiary-s) * 0.907), calc(var(--tertiary-l) * 0.874));
  --tertiary-600: hsl(calc(var(--tertiary-h) * 1.004), calc(var(--tertiary-s) * 0.968), calc(var(--tertiary-l) * 0.985));
  --tertiary-500: var(--tertiary);
  --tertiary-400: hsl(calc(var(--tertiary-h) * 1.002), calc(var(--tertiary-s) * 0.667), calc(var(--tertiary-l) * 1.323));
  --tertiary-300: hsl(calc(var(--tertiary-h) * 1), calc(var(--tertiary-s) * 0.601), calc(var(--tertiary-l) * 1.568));
  --tertiary-200: hsl(calc(var(--tertiary-h) * 0.995), calc(var(--tertiary-s) * 0.595), calc(var(--tertiary-l) * 1.905));
  --tertiary-100: hsl(calc(var(--tertiary-h) * 0.99), calc(var(--tertiary-s) * 0.586), calc(var(--tertiary-l) * 2.242));
  --tertiary-50: hsl(calc(var(--tertiary-h) * 0.99), calc(var(--tertiary-s) * 0.592), calc(var(--tertiary-l) * 2.562));
  --success-900: hsl(calc(var(--success-h) * 0.975), calc(var(--success-s) * 0.799), calc(var(--success-l) * 0.551));
  --success-800: hsl(calc(var(--success-h) * 0.995), calc(var(--success-s) * 0.872), calc(var(--success-l) * 0.757));
  --success-700: hsl(calc(var(--success-h) * 0.999), calc(var(--success-s) * 0.907), calc(var(--success-l) * 0.874));
  --success-600: hsl(calc(var(--success-h) * 1.004), calc(var(--success-s) * 0.968), calc(var(--success-l) * 0.985));
  --success-500: var(--success);
  --success-400: hsl(calc(var(--success-h) * 1.002), calc(var(--success-s) * 0.667), calc(var(--success-l) * 1.323));
  --success-300: hsl(calc(var(--success-h) * 1), calc(var(--success-s) * 0.601), calc(var(--success-l) * 1.568));
  --success-200: hsl(calc(var(--success-h) * 0.995), calc(var(--success-s) * 0.595), calc(var(--success-l) * 1.905));
  --success-100: hsl(calc(var(--success-h) * 0.99), calc(var(--success-s) * 0.586), calc(var(--success-l) * 2.242));
  --success-50: hsl(calc(var(--success-h) * 0.99), calc(var(--success-s) * 0.592), calc(var(--success-l) * 2.562));
  --info-900: hsl(calc(var(--info-h) * 0.975), calc(var(--info-s) * 0.799), calc(var(--info-l) * 0.551));
  --info-800: hsl(calc(var(--info-h) * 0.995), calc(var(--info-s) * 0.872), calc(var(--info-l) * 0.757));
  --info-700: hsl(calc(var(--info-h) * 0.999), calc(var(--info-s) * 0.907), calc(var(--info-l) * 0.874));
  --info-600: hsl(calc(var(--info-h) * 1.004), calc(var(--info-s) * 0.968), calc(var(--info-l) * 0.985));
  --info-500: var(--info);
  --info-400: hsl(calc(var(--info-h) * 1.002), calc(var(--info-s) * 0.667), calc(var(--info-l) * 1.323));
  --info-300: hsl(calc(var(--info-h) * 1), calc(var(--info-s) * 0.601), calc(var(--info-l) * 1.568));
  --info-200: hsl(calc(var(--info-h) * 0.995), calc(var(--info-s) * 0.595), calc(var(--info-l) * 1.905));
  --info-100: hsl(calc(var(--info-h) * 0.99), calc(var(--info-s) * 0.586), calc(var(--info-l) * 2.242));
  --info-50: hsl(calc(var(--info-h) * 0.99), calc(var(--info-s) * 0.592), calc(var(--info-l) * 2.562));
  --warning-900: hsl(calc(var(--warning-h) * 0.975), calc(var(--warning-s) * 0.799), calc(var(--warning-l) * 0.551));
  --warning-800: hsl(calc(var(--warning-h) * 0.995), calc(var(--warning-s) * 0.872), calc(var(--warning-l) * 0.757));
  --warning-700: hsl(calc(var(--warning-h) * 0.999), calc(var(--warning-s) * 0.907), calc(var(--warning-l) * 0.874));
  --warning-600: hsl(calc(var(--warning-h) * 1.004), calc(var(--warning-s) * 0.968), calc(var(--warning-l) * 0.985));
  --warning-500: var(--warning);
  --warning-400: hsl(calc(var(--warning-h) * 1.002), calc(var(--warning-s) * 0.667), calc(var(--warning-l) * 1.323));
  --warning-300: hsl(calc(var(--warning-h) * 1), calc(var(--warning-s) * 0.601), calc(var(--warning-l) * 1.568));
  --warning-200: hsl(calc(var(--warning-h) * 0.995), calc(var(--warning-s) * 0.595), calc(var(--warning-l) * 1.905));
  --warning-100: hsl(calc(var(--warning-h) * 0.99), calc(var(--warning-s) * 0.586), calc(var(--warning-l) * 2.242));
  --warning-50: hsl(calc(var(--warning-h) * 0.99), calc(var(--warning-s) * 0.592), calc(var(--warning-l) * 2.562));
  --error-900: hsl(calc(var(--error-h) * 0.975), calc(var(--error-s) * 0.799), calc(var(--error-l) * 0.551));
  --error-800: hsl(calc(var(--error-h) * 0.995), calc(var(--error-s) * 0.872), calc(var(--error-l) * 0.757));
  --error-700: hsl(calc(var(--error-h) * 0.999), calc(var(--error-s) * 0.907), calc(var(--error-l) * 0.874));
  --error-600: hsl(calc(var(--error-h) * 1.004), calc(var(--error-s) * 0.968), calc(var(--error-l) * 0.985));
  --error-500: var(--error);
  --error-400: hsl(calc(var(--error-h) * 1.002), calc(var(--error-s) * 0.667), calc(var(--error-l) * 1.323));
  --error-300: hsl(calc(var(--error-h) * 1), calc(var(--error-s) * 0.601), calc(var(--error-l) * 1.568));
  --error-200: hsl(calc(var(--error-h) * 0.995), calc(var(--error-s) * 0.595), calc(var(--error-l) * 1.905));
  --error-100: hsl(calc(var(--error-h) * 0.99), calc(var(--error-s) * 0.586), calc(var(--error-l) * 2.242));
  --error-50: hsl(calc(var(--error-h) * 0.99), calc(var(--error-s) * 0.592), calc(var(--error-l) * 2.562));
  --gray-hue: 216;
  --gray-sat: 8%;
  --black: hsl(var(--gray-hue), var(--gray-sat), 8%);
  --gray-950: hsl(var(--gray-hue), var(--gray-sat), 10%);
  --gray-900: hsl(var(--gray-hue), var(--gray-sat), 12%);
  --gray-850: hsl(var(--gray-hue), var(--gray-sat), 16%);
  --gray-800: hsl(var(--gray-hue), var(--gray-sat), 21%);
  --gray-750: hsl(var(--gray-hue), var(--gray-sat), 25%);
  --gray-700: hsl(var(--gray-hue), var(--gray-sat), 29%);
  --gray-600: hsl(var(--gray-hue), var(--gray-sat), 38%);
  --gray-500: hsl(var(--gray-hue), var(--gray-sat), 52%);
  --gray-400: hsl(var(--gray-hue), var(--gray-sat), 63%);
  --gray-300: hsl(var(--gray-hue), var(--gray-sat), 74%);
  --gray-350: hsl(var(--gray-hue), var(--gray-sat), 85%);
  --gray-200: hsl(var(--gray-hue), var(--gray-sat), 92%);
  --gray-250: hsl(var(--gray-hue), var(--gray-sat), 89%);
  --gray-100: hsl(var(--gray-hue), var(--gray-sat), 95%);
  --gray-150: hsl(var(--gray-hue), var(--gray-sat), 96%);
  --white: hsl(var(--gray-hue), var(--gray-sat), 100%);
  /************************** Opacity variations **************************/
  --primary-500_100: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 1);
  --primary-500_90: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.9);
  --primary-500_80: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.8);
  --primary-500_70: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.7);
  --primary-500_60: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.6);
  --primary-500_50: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
  --primary-500_40: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.4);
  --primary-500_30: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.3);
  --primary-500_20: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2);
  --primary-500_10: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);
  --primary-500_00: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0);
  --secondary-500_100: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 1);
  --secondary-500_90: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.9);
  --secondary-500_80: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.8);
  --secondary-500_70: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.7);
  --secondary-500_60: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.6);
  --secondary-500_50: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.5);
  --secondary-500_40: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.4);
  --secondary-500_30: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.3);
  --secondary-500_20: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.2);
  --secondary-500_10: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.1);
  --secondary-500_00: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0);
  --tertiary-500_100: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 1);
  --tertiary-500_90: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.9);
  --tertiary-500_80: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.8);
  --tertiary-500_70: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.7);
  --tertiary-500_60: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.6);
  --tertiary-500_50: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.5);
  --tertiary-500_40: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.4);
  --tertiary-500_30: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.3);
  --tertiary-500_20: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.2);
  --tertiary-500_10: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.1);
  --tertiary-500_00: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0);
  --success-500_100: hsla(var(--success-h), var(--success-s), var(--success-l), 1);
  --success-500_90: hsla(var(--success-h), var(--success-s), var(--success-l), 0.9);
  --success-500_80: hsla(var(--success-h), var(--success-s), var(--success-l), 0.8);
  --success-500_70: hsla(var(--success-h), var(--success-s), var(--success-l), 0.7);
  --success-500_60: hsla(var(--success-h), var(--success-s), var(--success-l), 0.6);
  --success-500_50: hsla(var(--success-h), var(--success-s), var(--success-l), 0.5);
  --success-500_40: hsla(var(--success-h), var(--success-s), var(--success-l), 0.4);
  --success-500_30: hsla(var(--success-h), var(--success-s), var(--success-l), 0.3);
  --success-500_20: hsla(var(--success-h), var(--success-s), var(--success-l), 0.2);
  --success-500_10: hsla(var(--success-h), var(--success-s), var(--success-l), 0.1);
  --success-500_00: hsla(var(--success-h), var(--success-s), var(--success-l), 0);
  --info-500_100: hsla(var(--info-h), var(--info-s), var(--info-l), 1);
  --info-500_90: hsla(var(--info-h), var(--info-s), var(--info-l), 0.9);
  --info-500_80: hsla(var(--info-h), var(--info-s), var(--info-l), 0.8);
  --info-500_70: hsla(var(--info-h), var(--info-s), var(--info-l), 0.7);
  --info-500_60: hsla(var(--info-h), var(--info-s), var(--info-l), 0.6);
  --info-500_50: hsla(var(--info-h), var(--info-s), var(--info-l), 0.5);
  --info-500_40: hsla(var(--info-h), var(--info-s), var(--info-l), 0.4);
  --info-500_30: hsla(var(--info-h), var(--info-s), var(--info-l), 0.3);
  --info-500_20: hsla(var(--info-h), var(--info-s), var(--info-l), 0.2);
  --info-500_10: hsla(var(--info-h), var(--info-s), var(--info-l), 0.1);
  --info-500_00: hsla(var(--info-h), var(--info-s), var(--info-l), 0);
  --warning-500_100: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 1);
  --warning-500_90: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.9);
  --warning-500_80: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.8);
  --warning-500_70: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.7);
  --warning-500_60: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.6);
  --warning-500_50: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.5);
  --warning-500_40: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.4);
  --warning-500_30: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.3);
  --warning-500_20: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.2);
  --warning-500_10: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.1);
  --warning-500_00: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0);
  --error-500_100: hsla(var(--error-h), var(--error-s), var(--error-l), 1);
  --error-500_90: hsla(var(--error-h), var(--error-s), var(--error-l), 0.9);
  --error-500_80: hsla(var(--error-h), var(--error-s), var(--error-l), 0.8);
  --error-500_70: hsla(var(--error-h), var(--error-s), var(--error-l), 0.7);
  --error-500_60: hsla(var(--error-h), var(--error-s), var(--error-l), 0.6);
  --error-500_50: hsla(var(--error-h), var(--error-s), var(--error-l), 0.5);
  --error-500_40: hsla(var(--error-h), var(--error-s), var(--error-l), 0.4);
  --error-500_30: hsla(var(--error-h), var(--error-s), var(--error-l), 0.3);
  --error-500_20: hsla(var(--error-h), var(--error-s), var(--error-l), 0.2);
  --error-500_10: hsla(var(--error-h), var(--error-s), var(--error-l), 0.1);
  --error-500_00: hsla(var(--error-h), var(--error-s), var(--error-l), 0);
  --white_100: hsla(var(--white-h), var(--white-s), var(--white-l), 1);
  --white_90: hsla(var(--white-h), var(--white-s), var(--white-l), 0.9);
  --white_80: hsla(var(--white-h), var(--white-s), var(--white-l), 0.8);
  --white_70: hsla(var(--white-h), var(--white-s), var(--white-l), 0.7);
  --white_60: hsla(var(--white-h), var(--white-s), var(--white-l), 0.6);
  --white_50: hsla(var(--white-h), var(--white-s), var(--white-l), 0.5);
  --white_40: hsla(var(--white-h), var(--white-s), var(--white-l), 0.4);
  --white_30: hsla(var(--white-h), var(--white-s), var(--white-l), 0.3);
  --white_20: hsla(var(--white-h), var(--white-s), var(--white-l), 0.2);
  --white_10: hsla(var(--white-h), var(--white-s), var(--white-l), 0.1);
  --white_00: hsla(var(--white-h), var(--white-s), var(--white-l), 0);
  /******************************************** UI ELEMENT COLORS ********************************************/
  --header-color: var(--text-inverse);
  --header-bg: var(--primary-700);
  --footer-color: var(--text-inverse);
  --footer-bg: var(--primary-700);
  --card-back-color: var(--gray-900);
  --card-back-bg: var(--gray-100);
  --card-front-color: var(--gray-900);
  --card-front-bg: var(--gray-100);
  /******************** Button Colors ********************/
  --button-text: var(--text-inverse);
  --button-text--hover: var(--text-inverse);
  --button-background: var(--background-inverse);
  --button-background--hover: var(--highlight);
  /******************** Slide Link Colors ********************/
  --slide-link-color: var(--text-inverse);
  --slide-link-background: var(--primary-500);
  /******************** Toggle Button Colors ********************/
  --toggle-button-text: var(--gray-800);
  --toggle-button-bg: var(--gray-100);
  --toggle-button-text--hover: var(--primary);
  --toggle-button-bg--hover: var(--gray-150);
  --toggle-button--pressed-text: var(--gray-800);
  --toggle-button--pressed-bg: var(--gray-100);
  --toggle-button--pressed-text--hover: var(--primary);
  --toggle-button--pressed-bg--hover: var(--gray-150);
  /******************** Input Colors ********************/
  --input-text: var(--text);
  --input-bg: var(--background);
  --input-border: 1px solid var(--gray-700);
  /******************** Menu Colors ********************/
  --modal-bg: var(--white);
  --menu-color: var(--text);
  --menu-bg: inherit;
  --menu-panel-bg: linear-gradient(to top, var(--gray-200) 0%, var(--gray-250) 100%);
  --menu-modal-background: var(--modal-screen-bg);
  --menu-text: var(--text);
  --menu-sm-head: var(--primary);
  --menu-search-box-bg: var(--gray-100);
  --menu-color--hover: var(--primary);
  --menu-bg--hover: inherit;
  --menu-search-text: var(--white);
  --menu-search-bg: var(--white);
  --menu-search-btn-bg: var(--error);
  --menu-search-close: var(--white);
  --menu-chapter-bg: var(--white);
  --menu-chapter-arrow: var(--gray-200);
  --menu-chapter-hover-bg: var(--white);
  --menu-chapter-open-bg: var(--menu-chapter-hover-bg);
  --menu-chapter-super: var(--primary);
  --menu-chapter-title: var(--gray-900);
  --menu-chapter-border: 1px solid var(--gray-200);
  --menu-list-indicator--not-visited: var(--gray-200);
  --menu-list-indicator--visited: var(--primary);
  --menu-close-color: var(--white);
  --menu-close-bg: var(--black);
  --menu-close-color--hover: var(--white);
  --menu-close-bg--hover: var(--primary);
  --menu-fav: var(--gray-700);
  /******************** Social App Colors ********************/
  --social-body-bg: linear-gradient(to top, var(--gray-200) 0%, var(--gray-250) 100%);
  --social-hero-bg: var(--social-body-bg);
  --social-modal-background: var(--modal-screen-bg);
  --social-list-bg: var(--gray-150);
  --social-list-text: var(--black);
  --social-list-notes-bg: var(--white);
  --social-list-bg--hover: var(--menu-chart-hover-bg);
  --social-list-bg-hidden--hover: var(--gray-300);
  --social-list-text--hover: var(--social-list-text);
  --social-list-title-color: var(--black);
  --social-list-meta-color: var(--gray-700);
  --social-sphere-bg: transparent;
  --social-sphere-hover-bg: var(--gray-200);
  --social-list-icon-background: inherit;
  --social-msg-bg: var(--white);
  --social-msg-reply-bg: var(--white);
  --social-msg-own-highlight: var(--secondary);
  --social-msg-own-bg: var(--primary-500_10);
  --social-msg-own-text: var(--text);
  --social-msg-own-user: var(--social-msg-own-highlight);
  --social-msg-grp-highlight: var(--primary);
  --social-msg-grp-bg: var(--secondary-500_10);
  --social-msg-grp-text: var(--text);
  --social-msg-grp-user: var(--social-msg-grp-highlight);
  --social-notes-bg: transparentize(#ececc1, 0.3);
}

/************** Color Contrast: Black/White **************/
body#cbook-body.contrast--blackwhite,
body#extension-body.contrast--blackwhite {
  --primary: var(--contrast-black);
  --secondary: var(--contrast-black);
  --tertiary: var(--contrast-black);
  --success: var(--contrast-black);
  --warning: var(--contrast-black);
  --error: var(--contrast-black);
  --info: var(--contrast-black);
  --text: var(--contrast-black);
  --highlight: var(--contrast-black);
  --background-inverse: var(--contrast-black);
  --black: var(--contrast-black);
  --text-inverse: var(--contrast-white);
  --background: var(--contrast-white);
  --white: var(--contrast-white);
  --focus-color: var(--contrast-white);
  --primary-500: var(--contrast-black);
  --primary-600: var(--contrast-black);
  --primary-700: var(--contrast-black);
  --primary-800: var(--contrast-black);
  --primary-900: var(--contrast-black);
  --secondary-500: var(--contrast-black);
  --secondary-600: var(--contrast-black);
  --secondary-700: var(--contrast-black);
  --secondary-800: var(--contrast-black);
  --secondary-900: var(--contrast-black);
  --tertiary-500: var(--contrast-black);
  --tertiary-600: var(--contrast-black);
  --tertiary-700: var(--contrast-black);
  --tertiary-800: var(--contrast-black);
  --tertiary-900: var(--contrast-black);
  --success-500: var(--contrast-black);
  --success-600: var(--contrast-black);
  --success-700: var(--contrast-black);
  --success-800: var(--contrast-black);
  --success-900: var(--contrast-black);
  --warning-500: var(--contrast-black);
  --warning-600: var(--contrast-black);
  --warning-700: var(--contrast-black);
  --warning-800: var(--contrast-black);
  --warning-900: var(--contrast-black);
  --error-500: var(--contrast-black);
  --error-600: var(--contrast-black);
  --error-700: var(--contrast-black);
  --error-800: var(--contrast-black);
  --error-900: var(--contrast-black);
  --info-500: var(--contrast-black);
  --info-600: var(--contrast-black);
  --info-700: var(--contrast-black);
  --info-800: var(--contrast-black);
  --info-900: var(--contrast-black);
  --gray-500: var(--contrast-black);
  --gray-600: var(--contrast-black);
  --gray-700: var(--contrast-black);
  --gray-800: var(--contrast-black);
  --gray-900: var(--contrast-black);
  --gray-950: var(--contrast-black);
  --primary-50: var(--contrast-white);
  --primary-100: var(--contrast-white);
  --primary-200: var(--contrast-white);
  --primary-300: var(--contrast-white);
  --primary-400: var(--contrast-white);
  --secondary-50: var(--contrast-white);
  --secondary-100: var(--contrast-white);
  --secondary-200: var(--contrast-white);
  --secondary-300: var(--contrast-white);
  --secondary-400: var(--contrast-white);
  --tertiary-50: var(--contrast-white);
  --tertiary-100: var(--contrast-white);
  --tertiary-200: var(--contrast-white);
  --tertiary-300: var(--contrast-white);
  --tertiary-400: var(--contrast-white);
  --success-50: var(--contrast-white);
  --success-100: var(--contrast-white);
  --success-200: var(--contrast-white);
  --success-300: var(--contrast-white);
  --success-400: var(--contrast-white);
  --warning-50: var(--contrast-white);
  --warning-100: var(--contrast-white);
  --warning-200: var(--contrast-white);
  --warning-300: var(--contrast-white);
  --warning-400: var(--contrast-white);
  --error-50: var(--contrast-white);
  --error-100: var(--contrast-white);
  --error-200: var(--contrast-white);
  --error-300: var(--contrast-white);
  --error-400: var(--contrast-white);
  --info-50: var(--contrast-white);
  --info-100: var(--contrast-white);
  --info-200: var(--contrast-white);
  --info-300: var(--contrast-white);
  --info-400: var(--contrast-white);
  --gray-50: var(--contrast-white);
  --gray-100: var(--contrast-white);
  --gray-150: var(--contrast-white);
  --gray-200: var(--contrast-white);
  --gray-250: var(--contrast-white);
  --gray-300: var(--contrast-white);
  --gray-350: var(--contrast-white);
  --gray-400: var(--contrast-white);
  --primary-500_10: var(--contrast-white);
  --primary-500_20: var(--contrast-white);
  --primary-500_30: var(--contrast-white);
  --primary-500_40: var(--contrast-white);
  --primary-500_50: var(--contrast-white);
  --primary-500_60: var(--contrast-black);
  --primary-500_70: var(--contrast-black);
  --primary-500_80: var(--contrast-black);
  --primary-500_90: var(--contrast-black);
  --primary-500_100: var(--contrast-black);
  --secondary-500_10: var(--contrast-white);
  --secondary-500_20: var(--contrast-white);
  --secondary-500_30: var(--contrast-white);
  --secondary-500_40: var(--contrast-white);
  --secondary-500_50: var(--contrast-white);
  --secondary-500_60: var(--contrast-black);
  --secondary-500_70: var(--contrast-black);
  --secondary-500_80: var(--contrast-black);
  --secondary-500_90: var(--contrast-black);
  --secondary-500_100: var(--contrast-black);
  --tertiary-500_10: var(--contrast-white);
  --tertiary-500_20: var(--contrast-white);
  --tertiary-500_30: var(--contrast-white);
  --tertiary-500_40: var(--contrast-white);
  --tertiary-500_50: var(--contrast-white);
  --tertiary-500_60: var(--contrast-black);
  --tertiary-500_70: var(--contrast-black);
  --tertiary-500_80: var(--contrast-black);
  --tertiary-500_90: var(--contrast-black);
  --tertiary-500_100: var(--contrast-black);
  --success-500_10: var(--contrast-white);
  --success-500_20: var(--contrast-white);
  --success-500_30: var(--contrast-white);
  --success-500_40: var(--contrast-white);
  --success-500_50: var(--contrast-white);
  --success-500_60: var(--contrast-black);
  --success-500_70: var(--contrast-black);
  --success-500_80: var(--contrast-black);
  --success-500_90: var(--contrast-black);
  --success-500_100: var(--contrast-black);
  --warning-500_10: var(--contrast-white);
  --warning-500_20: var(--contrast-white);
  --warning-500_30: var(--contrast-white);
  --warning-500_40: var(--contrast-white);
  --warning-500_50: var(--contrast-white);
  --warning-500_60: var(--contrast-black);
  --warning-500_70: var(--contrast-black);
  --warning-500_80: var(--contrast-black);
  --warning-500_90: var(--contrast-black);
  --warning-500_100: var(--contrast-black);
  --error-500_10: var(--contrast-white);
  --error-500_20: var(--contrast-white);
  --error-500_30: var(--contrast-white);
  --error-500_40: var(--contrast-white);
  --error-500_50: var(--contrast-white);
  --error-500_60: var(--contrast-black);
  --error-500_70: var(--contrast-black);
  --error-500_80: var(--contrast-black);
  --error-500_90: var(--contrast-black);
  --error-500_100: var(--contrast-black);
  --info-500_10: var(--contrast-white);
  --info-500_20: var(--contrast-white);
  --info-500_30: var(--contrast-white);
  --info-500_40: var(--contrast-white);
  --info-500_50: var(--contrast-white);
  --info-500_60: var(--contrast-black);
  --info-500_70: var(--contrast-black);
  --info-500_80: var(--contrast-black);
  --info-500_90: var(--contrast-black);
  --info-500_100: var(--contrast-black);
  /******************************************** UI ELEMENT COLORS ********************************************/
  --header-bg: var(--contrast-black);
  --header-color: var(--contrast-white);
  --footer-bg: var(--contrast-black);
  --footer-color: var(--contrast-white);
  --card-back-color: var(--contrast-black);
  --card-back-bg: var(--contrast-white);
  --card-front-color: var(--contrast-black);
  --card-front-bg: var(--contrast-white);
  /******************** Button Colors ********************/
  --button-text: var(--text-inverse);
  --button-text--hover: var(--text-inverse);
  --button-background: var(--background-inverse);
  --button-background--hover: var(--highlight);
  /******************** Slide Link Colors ********************/
  --slide-link-color: var(--text-inverse);
  --slide-link-background: var(--primary-500);
  /******************** Toggle Button Colors ********************/
  --toggle-button-text: var(--gray-800);
  --toggle-button-bg: var(--gray-100);
  --toggle-button-text--hover: var(--primary);
  --toggle-button-bg--hover: var(--gray-150);
  --toggle-button--pressed-text: var(--gray-800);
  --toggle-button--pressed-bg: var(--gray-100);
  --toggle-button--pressed-text--hover: var(--primary);
  --toggle-button--pressed-bg--hover: var(--gray-150);
  /******************** Input Colors ********************/
  --input-text: var(--text);
  --input-bg: var(--background);
  --input-border: 1px solid var(--gray-700);
  /******************** Menu Colors ********************/
  --modal-bg: var(--white);
  --menu-color: var(--text);
  --menu-bg: inherit;
  --menu-panel-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --menu-modal-background: var(--modal-screen-bg);
  --menu-text: var(--text);
  --menu-sm-head: var(--primary);
  --menu-search-box-bg: var(--gray-100);
  --menu-color--hover: var(--primary);
  --menu-bg--hover: inherit;
  --menu-search-text: var(--white);
  --menu-search-bg: var(--white);
  --menu-search-btn-bg: var(--error);
  --menu-search-close: var(--white);
  --menu-chapter-bg: var(--white);
  --menu-chapter-arrow: var(--gray-200);
  --menu-chapter-hover-bg: var(--white);
  --menu-chapter-open-bg: var(--menu-chapter-hover-bg);
  --menu-chapter-super: var(--primary);
  --menu-chapter-title: var(--gray-900);
  --menu-chapter-border: 1px solid var(--gray-200);
  --menu-list-indicator--not-visited: var(--gray-200);
  --menu-list-indicator--visited: var(--primary);
  --menu-close-color: var(--white);
  --menu-close-bg: var(--black);
  --menu-close-color--hover: var(--white);
  --menu-close-bg--hover: var(--primary);
  --menu-fav: var(--gray-700);
  /******************** Social App Colors ********************/
  --social-body-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --social-hero-bg: var(--social-body-bg);
  --social-modal-background: var(--modal-screen-bg);
  --social-list-bg: var(--gray-150);
  --social-list-text: var(--black);
  --social-list-notes-bg: var(--white);
  --social-list-bg--hover: var(--menu-chart-hover-bg);
  --social-list-bg-hidden--hover: var(--gray-300);
  --social-list-text--hover: var(--social-list-text);
  --social-list-title-color: var(--black);
  --social-list-meta-color: var(--gray-700);
  --social-sphere-bg: transparent;
  --social-sphere-hover-bg: var(--gray-200);
  --social-list-icon-background: inherit;
  --social-msg-bg: var(--white);
  --social-msg-reply-bg: var(--white);
  --social-msg-own-highlight: var(--secondary);
  --social-msg-own-bg: var(--primary-500_10);
  --social-msg-own-text: var(--text);
  --social-msg-own-user: var(--social-msg-own-highlight);
  --social-msg-grp-highlight: var(--primary);
  --social-msg-grp-bg: var(--secondary-500_10);
  --social-msg-grp-text: var(--text);
  --social-msg-grp-user: var(--social-msg-grp-highlight);
  --social-notes-bg: transparentize(#ececc1, 0.3);
}

/************** Color Contrast: White/Black **************/
body#cbook-body.contrast--whiteblack,
body#extension-body.contrast--whiteblack {
  --primary: var(--contrast-white);
  --secondary: var(--contrast-white);
  --tertiary: var(--contrast-white);
  --success: var(--contrast-white);
  --warning: var(--contrast-white);
  --error: var(--contrast-white);
  --info: var(--contrast-white);
  --text: var(--contrast-white);
  --highlight: var(--contrast-white);
  --background-inverse: var(--contrast-white);
  --black: var(--contrast-white);
  --text-inverse: var(--contrast-black);
  --background: var(--contrast-black);
  --white: var(--contrast-black);
  --focus-color: var(--contrast-black);
  --primary-500: var(--contrast-white);
  --primary-600: var(--contrast-white);
  --primary-700: var(--contrast-white);
  --primary-800: var(--contrast-white);
  --primary-900: var(--contrast-white);
  --secondary-500: var(--contrast-white);
  --secondary-600: var(--contrast-white);
  --secondary-700: var(--contrast-white);
  --secondary-800: var(--contrast-white);
  --secondary-900: var(--contrast-white);
  --tertiary-500: var(--contrast-white);
  --tertiary-600: var(--contrast-white);
  --tertiary-700: var(--contrast-white);
  --tertiary-800: var(--contrast-white);
  --tertiary-900: var(--contrast-white);
  --success-500: var(--contrast-white);
  --success-600: var(--contrast-white);
  --success-700: var(--contrast-white);
  --success-800: var(--contrast-white);
  --success-900: var(--contrast-white);
  --warning-500: var(--contrast-white);
  --warning-600: var(--contrast-white);
  --warning-700: var(--contrast-white);
  --warning-800: var(--contrast-white);
  --warning-900: var(--contrast-white);
  --error-500: var(--contrast-white);
  --error-600: var(--contrast-white);
  --error-700: var(--contrast-white);
  --error-800: var(--contrast-white);
  --error-900: var(--contrast-white);
  --info-500: var(--contrast-white);
  --info-600: var(--contrast-white);
  --info-700: var(--contrast-white);
  --info-800: var(--contrast-white);
  --info-900: var(--contrast-white);
  --gray-500: var(--contrast-white);
  --gray-600: var(--contrast-white);
  --gray-700: var(--contrast-white);
  --gray-800: var(--contrast-white);
  --gray-900: var(--contrast-white);
  --gray-950: var(--contrast-white);
  --primary-50: var(--contrast-black);
  --primary-100: var(--contrast-black);
  --primary-200: var(--contrast-black);
  --primary-300: var(--contrast-black);
  --primary-400: var(--contrast-black);
  --secondary-50: var(--contrast-black);
  --secondary-100: var(--contrast-black);
  --secondary-200: var(--contrast-black);
  --secondary-300: var(--contrast-black);
  --secondary-400: var(--contrast-black);
  --tertiary-50: var(--contrast-black);
  --tertiary-100: var(--contrast-black);
  --tertiary-200: var(--contrast-black);
  --tertiary-300: var(--contrast-black);
  --tertiary-400: var(--contrast-black);
  --success-50: var(--contrast-black);
  --success-100: var(--contrast-black);
  --success-200: var(--contrast-black);
  --success-300: var(--contrast-black);
  --success-400: var(--contrast-black);
  --warning-50: var(--contrast-black);
  --warning-100: var(--contrast-black);
  --warning-200: var(--contrast-black);
  --warning-300: var(--contrast-black);
  --warning-400: var(--contrast-black);
  --error-50: var(--contrast-black);
  --error-100: var(--contrast-black);
  --error-200: var(--contrast-black);
  --error-300: var(--contrast-black);
  --error-400: var(--contrast-black);
  --info-50: var(--contrast-black);
  --info-100: var(--contrast-black);
  --info-200: var(--contrast-black);
  --info-300: var(--contrast-black);
  --info-400: var(--contrast-black);
  --gray-50: var(--contrast-black);
  --gray-100: var(--contrast-black);
  --gray-150: var(--contrast-black);
  --gray-200: var(--contrast-black);
  --gray-250: var(--contrast-black);
  --gray-300: var(--contrast-black);
  --gray-350: var(--contrast-black);
  --gray-400: var(--contrast-black);
  --primary-500_10: var(--contrast-black);
  --primary-500_20: var(--contrast-black);
  --primary-500_30: var(--contrast-black);
  --primary-500_40: var(--contrast-black);
  --primary-500_50: var(--contrast-black);
  --primary-500_60: var(--contrast-white);
  --primary-500_70: var(--contrast-white);
  --primary-500_80: var(--contrast-white);
  --primary-500_90: var(--contrast-white);
  --primary-500_100: var(--contrast-white);
  --secondary-500_10: var(--contrast-black);
  --secondary-500_20: var(--contrast-black);
  --secondary-500_30: var(--contrast-black);
  --secondary-500_40: var(--contrast-black);
  --secondary-500_50: var(--contrast-black);
  --secondary-500_60: var(--contrast-white);
  --secondary-500_70: var(--contrast-white);
  --secondary-500_80: var(--contrast-white);
  --secondary-500_90: var(--contrast-white);
  --secondary-500_100: var(--contrast-white);
  --tertiary-500_10: var(--contrast-black);
  --tertiary-500_20: var(--contrast-black);
  --tertiary-500_30: var(--contrast-black);
  --tertiary-500_40: var(--contrast-black);
  --tertiary-500_50: var(--contrast-black);
  --tertiary-500_60: var(--contrast-white);
  --tertiary-500_70: var(--contrast-white);
  --tertiary-500_80: var(--contrast-white);
  --tertiary-500_90: var(--contrast-white);
  --tertiary-500_100: var(--contrast-white);
  --success-500_10: var(--contrast-black);
  --success-500_20: var(--contrast-black);
  --success-500_30: var(--contrast-black);
  --success-500_40: var(--contrast-black);
  --success-500_50: var(--contrast-black);
  --success-500_60: var(--contrast-white);
  --success-500_70: var(--contrast-white);
  --success-500_80: var(--contrast-white);
  --success-500_90: var(--contrast-white);
  --success-500_100: var(--contrast-white);
  --warning-500_10: var(--contrast-black);
  --warning-500_20: var(--contrast-black);
  --warning-500_30: var(--contrast-black);
  --warning-500_40: var(--contrast-black);
  --warning-500_50: var(--contrast-black);
  --warning-500_60: var(--contrast-white);
  --warning-500_70: var(--contrast-white);
  --warning-500_80: var(--contrast-white);
  --warning-500_90: var(--contrast-white);
  --warning-500_100: var(--contrast-white);
  --error-500_10: var(--contrast-black);
  --error-500_20: var(--contrast-black);
  --error-500_30: var(--contrast-black);
  --error-500_40: var(--contrast-black);
  --error-500_50: var(--contrast-black);
  --error-500_60: var(--contrast-white);
  --error-500_70: var(--contrast-white);
  --error-500_80: var(--contrast-white);
  --error-500_90: var(--contrast-white);
  --error-500_100: var(--contrast-white);
  --info-500_10: var(--contrast-black);
  --info-500_20: var(--contrast-black);
  --info-500_30: var(--contrast-black);
  --info-500_40: var(--contrast-black);
  --info-500_50: var(--contrast-black);
  --info-500_60: var(--contrast-white);
  --info-500_70: var(--contrast-white);
  --info-500_80: var(--contrast-white);
  --info-500_90: var(--contrast-white);
  --info-500_100: var(--contrast-white);
  /******************************************** UI ELEMENT COLORS ********************************************/
  --header-bg: var(--contrast-white);
  --header-color: var(--contrast-black);
  --footer-bg: var(--contrast-white);
  --footer-color: var(--contrast-black);
  --card-back-color: var(--contrast-white);
  --card-back-bg: var(--contrast-black);
  --card-front-color: var(--contrast-white);
  --card-front-bg: var(--contrast-black);
  /******************** Button Colors ********************/
  --button-text: var(--text-inverse);
  --button-text--hover: var(--text-inverse);
  --button-background: var(--background-inverse);
  --button-background--hover: var(--highlight);
  /******************** Slide Link Colors ********************/
  --slide-link-color: var(--text-inverse);
  --slide-link-background: var(--primary-500);
  /******************** Toggle Button Colors ********************/
  --toggle-button-text: var(--gray-800);
  --toggle-button-bg: var(--gray-100);
  --toggle-button-text--hover: var(--primary);
  --toggle-button-bg--hover: var(--gray-150);
  --toggle-button--pressed-text: var(--gray-800);
  --toggle-button--pressed-bg: var(--gray-100);
  --toggle-button--pressed-text--hover: var(--primary);
  --toggle-button--pressed-bg--hover: var(--gray-150);
  /******************** Input Colors ********************/
  --input-text: var(--text);
  --input-bg: var(--background);
  --input-border: 1px solid var(--gray-700);
  /******************** Menu Colors ********************/
  --modal-bg: var(--white);
  --menu-color: var(--text);
  --menu-bg: inherit;
  --menu-panel-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --menu-modal-background: var(--modal-screen-bg);
  --menu-text: var(--text);
  --menu-sm-head: var(--primary);
  --menu-search-box-bg: var(--gray-100);
  --menu-color--hover: var(--primary);
  --menu-bg--hover: inherit;
  --menu-search-text: var(--white);
  --menu-search-bg: var(--white);
  --menu-search-btn-bg: var(--error);
  --menu-search-close: var(--white);
  --menu-chapter-bg: var(--white);
  --menu-chapter-arrow: var(--gray-200);
  --menu-chapter-hover-bg: var(--white);
  --menu-chapter-open-bg: var(--menu-chapter-hover-bg);
  --menu-chapter-super: var(--primary);
  --menu-chapter-title: var(--gray-900);
  --menu-chapter-border: 1px solid var(--gray-200);
  --menu-list-indicator--not-visited: var(--gray-200);
  --menu-list-indicator--visited: var(--primary);
  --menu-close-color: var(--white);
  --menu-close-bg: var(--black);
  --menu-close-color--hover: var(--white);
  --menu-close-bg--hover: var(--primary);
  --menu-fav: var(--gray-700);
  /******************** Social App Colors ********************/
  --social-body-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --social-hero-bg: var(--social-body-bg);
  --social-modal-background: var(--modal-screen-bg);
  --social-list-bg: var(--gray-150);
  --social-list-text: var(--black);
  --social-list-notes-bg: var(--white);
  --social-list-bg--hover: var(--menu-chart-hover-bg);
  --social-list-bg-hidden--hover: var(--gray-300);
  --social-list-text--hover: var(--social-list-text);
  --social-list-title-color: var(--black);
  --social-list-meta-color: var(--gray-700);
  --social-sphere-bg: transparent;
  --social-sphere-hover-bg: var(--gray-200);
  --social-list-icon-background: inherit;
  --social-msg-bg: var(--white);
  --social-msg-reply-bg: var(--white);
  --social-msg-own-highlight: var(--secondary);
  --social-msg-own-bg: var(--primary-500_10);
  --social-msg-own-text: var(--text);
  --social-msg-own-user: var(--social-msg-own-highlight);
  --social-msg-grp-highlight: var(--primary);
  --social-msg-grp-bg: var(--secondary-500_10);
  --social-msg-grp-text: var(--text);
  --social-msg-grp-user: var(--social-msg-grp-highlight);
  --social-notes-bg: transparentize(#ececc1, 0.3);
}

/************** Color Contrast: Green/Black **************/
body#cbook-body.contrast--greenblack,
body#extension-body.contrast--greenblack {
  --primary: var(--contrast-green);
  --secondary: var(--contrast-green);
  --tertiary: var(--contrast-green);
  --success: var(--contrast-green);
  --warning: var(--contrast-green);
  --error: var(--contrast-green);
  --info: var(--contrast-green);
  --text: var(--contrast-green);
  --highlight: var(--contrast-green);
  --background-inverse: var(--contrast-green);
  --black: var(--contrast-green);
  --text-inverse: var(--contrast-black);
  --background: var(--contrast-black);
  --white: var(--contrast-black);
  --focus-color: var(--contrast-black);
  --primary-500: var(--contrast-green);
  --primary-600: var(--contrast-green);
  --primary-700: var(--contrast-green);
  --primary-800: var(--contrast-green);
  --primary-900: var(--contrast-green);
  --secondary-500: var(--contrast-green);
  --secondary-600: var(--contrast-green);
  --secondary-700: var(--contrast-green);
  --secondary-800: var(--contrast-green);
  --secondary-900: var(--contrast-green);
  --tertiary-500: var(--contrast-green);
  --tertiary-600: var(--contrast-green);
  --tertiary-700: var(--contrast-green);
  --tertiary-800: var(--contrast-green);
  --tertiary-900: var(--contrast-green);
  --success-500: var(--contrast-green);
  --success-600: var(--contrast-green);
  --success-700: var(--contrast-green);
  --success-800: var(--contrast-green);
  --success-900: var(--contrast-green);
  --warning-500: var(--contrast-green);
  --warning-600: var(--contrast-green);
  --warning-700: var(--contrast-green);
  --warning-800: var(--contrast-green);
  --warning-900: var(--contrast-green);
  --error-500: var(--contrast-green);
  --error-600: var(--contrast-green);
  --error-700: var(--contrast-green);
  --error-800: var(--contrast-green);
  --error-900: var(--contrast-green);
  --info-500: var(--contrast-green);
  --info-600: var(--contrast-green);
  --info-700: var(--contrast-green);
  --info-800: var(--contrast-green);
  --info-900: var(--contrast-green);
  --gray-500: var(--contrast-green);
  --gray-600: var(--contrast-green);
  --gray-700: var(--contrast-green);
  --gray-800: var(--contrast-green);
  --gray-900: var(--contrast-green);
  --gray-950: var(--contrast-green);
  --primary-50: var(--contrast-black);
  --primary-100: var(--contrast-black);
  --primary-200: var(--contrast-black);
  --primary-300: var(--contrast-black);
  --primary-400: var(--contrast-black);
  --secondary-50: var(--contrast-black);
  --secondary-100: var(--contrast-black);
  --secondary-200: var(--contrast-black);
  --secondary-300: var(--contrast-black);
  --secondary-400: var(--contrast-black);
  --tertiary-50: var(--contrast-black);
  --tertiary-100: var(--contrast-black);
  --tertiary-200: var(--contrast-black);
  --tertiary-300: var(--contrast-black);
  --tertiary-400: var(--contrast-black);
  --success-50: var(--contrast-black);
  --success-100: var(--contrast-black);
  --success-200: var(--contrast-black);
  --success-300: var(--contrast-black);
  --success-400: var(--contrast-black);
  --warning-50: var(--contrast-black);
  --warning-100: var(--contrast-black);
  --warning-200: var(--contrast-black);
  --warning-300: var(--contrast-black);
  --warning-400: var(--contrast-black);
  --error-50: var(--contrast-black);
  --error-100: var(--contrast-black);
  --error-200: var(--contrast-black);
  --error-300: var(--contrast-black);
  --error-400: var(--contrast-black);
  --info-50: var(--contrast-black);
  --info-100: var(--contrast-black);
  --info-200: var(--contrast-black);
  --info-300: var(--contrast-black);
  --info-400: var(--contrast-black);
  --gray-50: var(--contrast-black);
  --gray-100: var(--contrast-black);
  --gray-150: var(--contrast-black);
  --gray-200: var(--contrast-black);
  --gray-250: var(--contrast-black);
  --gray-300: var(--contrast-black);
  --gray-350: var(--contrast-black);
  --gray-400: var(--contrast-black);
  --primary-500_10: var(--contrast-black);
  --primary-500_20: var(--contrast-black);
  --primary-500_30: var(--contrast-black);
  --primary-500_40: var(--contrast-black);
  --primary-500_50: var(--contrast-black);
  --primary-500_60: var(--contrast-green);
  --primary-500_70: var(--contrast-green);
  --primary-500_80: var(--contrast-green);
  --primary-500_90: var(--contrast-green);
  --primary-500_100: var(--contrast-green);
  --secondary-500_10: var(--contrast-black);
  --secondary-500_20: var(--contrast-black);
  --secondary-500_30: var(--contrast-black);
  --secondary-500_40: var(--contrast-black);
  --secondary-500_50: var(--contrast-black);
  --secondary-500_60: var(--contrast-green);
  --secondary-500_70: var(--contrast-green);
  --secondary-500_80: var(--contrast-green);
  --secondary-500_90: var(--contrast-green);
  --secondary-500_100: var(--contrast-green);
  --tertiary-500_10: var(--contrast-black);
  --tertiary-500_20: var(--contrast-black);
  --tertiary-500_30: var(--contrast-black);
  --tertiary-500_40: var(--contrast-black);
  --tertiary-500_50: var(--contrast-black);
  --tertiary-500_60: var(--contrast-green);
  --tertiary-500_70: var(--contrast-green);
  --tertiary-500_80: var(--contrast-green);
  --tertiary-500_90: var(--contrast-green);
  --tertiary-500_100: var(--contrast-green);
  --success-500_10: var(--contrast-black);
  --success-500_20: var(--contrast-black);
  --success-500_30: var(--contrast-black);
  --success-500_40: var(--contrast-black);
  --success-500_50: var(--contrast-black);
  --success-500_60: var(--contrast-green);
  --success-500_70: var(--contrast-green);
  --success-500_80: var(--contrast-green);
  --success-500_90: var(--contrast-green);
  --success-500_100: var(--contrast-green);
  --warning-500_10: var(--contrast-black);
  --warning-500_20: var(--contrast-black);
  --warning-500_30: var(--contrast-black);
  --warning-500_40: var(--contrast-black);
  --warning-500_50: var(--contrast-black);
  --warning-500_60: var(--contrast-green);
  --warning-500_70: var(--contrast-green);
  --warning-500_80: var(--contrast-green);
  --warning-500_90: var(--contrast-green);
  --warning-500_100: var(--contrast-green);
  --error-500_10: var(--contrast-black);
  --error-500_20: var(--contrast-black);
  --error-500_30: var(--contrast-black);
  --error-500_40: var(--contrast-black);
  --error-500_50: var(--contrast-black);
  --error-500_60: var(--contrast-green);
  --error-500_70: var(--contrast-green);
  --error-500_80: var(--contrast-green);
  --error-500_90: var(--contrast-green);
  --error-500_100: var(--contrast-green);
  --info-500_10: var(--contrast-black);
  --info-500_20: var(--contrast-black);
  --info-500_30: var(--contrast-black);
  --info-500_40: var(--contrast-black);
  --info-500_50: var(--contrast-black);
  --info-500_60: var(--contrast-green);
  --info-500_70: var(--contrast-green);
  --info-500_80: var(--contrast-green);
  --info-500_90: var(--contrast-green);
  --info-500_100: var(--contrast-green);
  /******************************************** UI ELEMENT COLORS ********************************************/
  --header-bg: var(--contrast-green);
  --header-color: var(--contrast-black);
  --footer-bg: var(--contrast-green);
  --footer-color: var(--contrast-black);
  --card-back-color: var(--contrast-green);
  --card-back-bg: var(--contrast-black);
  --card-front-color: var(--contrast-green);
  --card-front-bg: var(--contrast-black);
  /******************** Button Colors ********************/
  --button-text: var(--text-inverse);
  --button-text--hover: var(--text-inverse);
  --button-background: var(--background-inverse);
  --button-background--hover: var(--highlight);
  /******************** Slide Link Colors ********************/
  --slide-link-color: var(--text-inverse);
  --slide-link-background: var(--primary-500);
  /******************** Toggle Button Colors ********************/
  --toggle-button-text: var(--gray-800);
  --toggle-button-bg: var(--gray-100);
  --toggle-button-text--hover: var(--primary);
  --toggle-button-bg--hover: var(--gray-150);
  --toggle-button--pressed-text: var(--gray-800);
  --toggle-button--pressed-bg: var(--gray-100);
  --toggle-button--pressed-text--hover: var(--primary);
  --toggle-button--pressed-bg--hover: var(--gray-150);
  /******************** Input Colors ********************/
  --input-text: var(--text);
  --input-bg: var(--background);
  --input-border: 1px solid var(--gray-700);
  /******************** Menu Colors ********************/
  --modal-bg: var(--white);
  --menu-color: var(--text);
  --menu-bg: inherit;
  --menu-panel-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --menu-modal-background: var(--modal-screen-bg);
  --menu-text: var(--text);
  --menu-sm-head: var(--primary);
  --menu-search-box-bg: var(--gray-100);
  --menu-color--hover: var(--primary);
  --menu-bg--hover: inherit;
  --menu-search-text: var(--white);
  --menu-search-bg: var(--white);
  --menu-search-btn-bg: var(--error);
  --menu-search-close: var(--white);
  --menu-chapter-bg: var(--white);
  --menu-chapter-arrow: var(--gray-200);
  --menu-chapter-hover-bg: var(--white);
  --menu-chapter-open-bg: var(--menu-chapter-hover-bg);
  --menu-chapter-super: var(--primary);
  --menu-chapter-title: var(--gray-900);
  --menu-chapter-border: 1px solid var(--gray-200);
  --menu-list-indicator--not-visited: var(--gray-200);
  --menu-list-indicator--visited: var(--primary);
  --menu-close-color: var(--white);
  --menu-close-bg: var(--black);
  --menu-close-color--hover: var(--white);
  --menu-close-bg--hover: var(--primary);
  --menu-fav: var(--gray-700);
  /******************** Social App Colors ********************/
  --social-body-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --social-hero-bg: var(--social-body-bg);
  --social-modal-background: var(--modal-screen-bg);
  --social-list-bg: var(--gray-150);
  --social-list-text: var(--black);
  --social-list-notes-bg: var(--white);
  --social-list-bg--hover: var(--menu-chart-hover-bg);
  --social-list-bg-hidden--hover: var(--gray-300);
  --social-list-text--hover: var(--social-list-text);
  --social-list-title-color: var(--black);
  --social-list-meta-color: var(--gray-700);
  --social-sphere-bg: transparent;
  --social-sphere-hover-bg: var(--gray-200);
  --social-list-icon-background: inherit;
  --social-msg-bg: var(--white);
  --social-msg-reply-bg: var(--white);
  --social-msg-own-highlight: var(--secondary);
  --social-msg-own-bg: var(--primary-500_10);
  --social-msg-own-text: var(--text);
  --social-msg-own-user: var(--social-msg-own-highlight);
  --social-msg-grp-highlight: var(--primary);
  --social-msg-grp-bg: var(--secondary-500_10);
  --social-msg-grp-text: var(--text);
  --social-msg-grp-user: var(--social-msg-grp-highlight);
  --social-notes-bg: transparentize(#ececc1, 0.3);
}

/************** Color Contrast: Red/Cyan **************/
body#cbook-body.contrast--redcyan,
body#extension-body.contrast--redcyan {
  --primary: var(--contrast-red);
  --secondary: var(--contrast-red);
  --tertiary: var(--contrast-red);
  --success: var(--contrast-red);
  --warning: var(--contrast-red);
  --error: var(--contrast-red);
  --info: var(--contrast-red);
  --text: var(--contrast-red);
  --highlight: var(--contrast-red);
  --background-inverse: var(--contrast-red);
  --black: var(--contrast-red);
  --text-inverse: var(--contrast-cyan);
  --background: var(--contrast-cyan);
  --white: var(--contrast-cyan);
  --focus-color: var(--contrast-cyan);
  --primary-500: var(--contrast-red);
  --primary-600: var(--contrast-red);
  --primary-700: var(--contrast-red);
  --primary-800: var(--contrast-red);
  --primary-900: var(--contrast-red);
  --secondary-500: var(--contrast-red);
  --secondary-600: var(--contrast-red);
  --secondary-700: var(--contrast-red);
  --secondary-800: var(--contrast-red);
  --secondary-900: var(--contrast-red);
  --tertiary-500: var(--contrast-red);
  --tertiary-600: var(--contrast-red);
  --tertiary-700: var(--contrast-red);
  --tertiary-800: var(--contrast-red);
  --tertiary-900: var(--contrast-red);
  --success-500: var(--contrast-red);
  --success-600: var(--contrast-red);
  --success-700: var(--contrast-red);
  --success-800: var(--contrast-red);
  --success-900: var(--contrast-red);
  --warning-500: var(--contrast-red);
  --warning-600: var(--contrast-red);
  --warning-700: var(--contrast-red);
  --warning-800: var(--contrast-red);
  --warning-900: var(--contrast-red);
  --error-500: var(--contrast-red);
  --error-600: var(--contrast-red);
  --error-700: var(--contrast-red);
  --error-800: var(--contrast-red);
  --error-900: var(--contrast-red);
  --info-500: var(--contrast-red);
  --info-600: var(--contrast-red);
  --info-700: var(--contrast-red);
  --info-800: var(--contrast-red);
  --info-900: var(--contrast-red);
  --gray-500: var(--contrast-red);
  --gray-600: var(--contrast-red);
  --gray-700: var(--contrast-red);
  --gray-800: var(--contrast-red);
  --gray-900: var(--contrast-red);
  --gray-950: var(--contrast-red);
  --primary-50: var(--contrast-cyan);
  --primary-100: var(--contrast-cyan);
  --primary-200: var(--contrast-cyan);
  --primary-300: var(--contrast-cyan);
  --primary-400: var(--contrast-cyan);
  --secondary-50: var(--contrast-cyan);
  --secondary-100: var(--contrast-cyan);
  --secondary-200: var(--contrast-cyan);
  --secondary-300: var(--contrast-cyan);
  --secondary-400: var(--contrast-cyan);
  --tertiary-50: var(--contrast-cyan);
  --tertiary-100: var(--contrast-cyan);
  --tertiary-200: var(--contrast-cyan);
  --tertiary-300: var(--contrast-cyan);
  --tertiary-400: var(--contrast-cyan);
  --success-50: var(--contrast-cyan);
  --success-100: var(--contrast-cyan);
  --success-200: var(--contrast-cyan);
  --success-300: var(--contrast-cyan);
  --success-400: var(--contrast-cyan);
  --warning-50: var(--contrast-cyan);
  --warning-100: var(--contrast-cyan);
  --warning-200: var(--contrast-cyan);
  --warning-300: var(--contrast-cyan);
  --warning-400: var(--contrast-cyan);
  --error-50: var(--contrast-cyan);
  --error-100: var(--contrast-cyan);
  --error-200: var(--contrast-cyan);
  --error-300: var(--contrast-cyan);
  --error-400: var(--contrast-cyan);
  --info-50: var(--contrast-cyan);
  --info-100: var(--contrast-cyan);
  --info-200: var(--contrast-cyan);
  --info-300: var(--contrast-cyan);
  --info-400: var(--contrast-cyan);
  --gray-50: var(--contrast-cyan);
  --gray-100: var(--contrast-cyan);
  --gray-150: var(--contrast-cyan);
  --gray-200: var(--contrast-cyan);
  --gray-250: var(--contrast-cyan);
  --gray-300: var(--contrast-cyan);
  --gray-350: var(--contrast-cyan);
  --gray-400: var(--contrast-cyan);
  --primary-500_10: var(--contrast-cyan);
  --primary-500_20: var(--contrast-cyan);
  --primary-500_30: var(--contrast-cyan);
  --primary-500_40: var(--contrast-cyan);
  --primary-500_50: var(--contrast-cyan);
  --primary-500_60: var(--contrast-red);
  --primary-500_70: var(--contrast-red);
  --primary-500_80: var(--contrast-red);
  --primary-500_90: var(--contrast-red);
  --primary-500_100: var(--contrast-red);
  --secondary-500_10: var(--contrast-cyan);
  --secondary-500_20: var(--contrast-cyan);
  --secondary-500_30: var(--contrast-cyan);
  --secondary-500_40: var(--contrast-cyan);
  --secondary-500_50: var(--contrast-cyan);
  --secondary-500_60: var(--contrast-red);
  --secondary-500_70: var(--contrast-red);
  --secondary-500_80: var(--contrast-red);
  --secondary-500_90: var(--contrast-red);
  --secondary-500_100: var(--contrast-red);
  --tertiary-500_10: var(--contrast-cyan);
  --tertiary-500_20: var(--contrast-cyan);
  --tertiary-500_30: var(--contrast-cyan);
  --tertiary-500_40: var(--contrast-cyan);
  --tertiary-500_50: var(--contrast-cyan);
  --tertiary-500_60: var(--contrast-red);
  --tertiary-500_70: var(--contrast-red);
  --tertiary-500_80: var(--contrast-red);
  --tertiary-500_90: var(--contrast-red);
  --tertiary-500_100: var(--contrast-red);
  --success-500_10: var(--contrast-cyan);
  --success-500_20: var(--contrast-cyan);
  --success-500_30: var(--contrast-cyan);
  --success-500_40: var(--contrast-cyan);
  --success-500_50: var(--contrast-cyan);
  --success-500_60: var(--contrast-red);
  --success-500_70: var(--contrast-red);
  --success-500_80: var(--contrast-red);
  --success-500_90: var(--contrast-red);
  --success-500_100: var(--contrast-red);
  --warning-500_10: var(--contrast-cyan);
  --warning-500_20: var(--contrast-cyan);
  --warning-500_30: var(--contrast-cyan);
  --warning-500_40: var(--contrast-cyan);
  --warning-500_50: var(--contrast-cyan);
  --warning-500_60: var(--contrast-red);
  --warning-500_70: var(--contrast-red);
  --warning-500_80: var(--contrast-red);
  --warning-500_90: var(--contrast-red);
  --warning-500_100: var(--contrast-red);
  --error-500_10: var(--contrast-cyan);
  --error-500_20: var(--contrast-cyan);
  --error-500_30: var(--contrast-cyan);
  --error-500_40: var(--contrast-cyan);
  --error-500_50: var(--contrast-cyan);
  --error-500_60: var(--contrast-red);
  --error-500_70: var(--contrast-red);
  --error-500_80: var(--contrast-red);
  --error-500_90: var(--contrast-red);
  --error-500_100: var(--contrast-red);
  --info-500_10: var(--contrast-cyan);
  --info-500_20: var(--contrast-cyan);
  --info-500_30: var(--contrast-cyan);
  --info-500_40: var(--contrast-cyan);
  --info-500_50: var(--contrast-cyan);
  --info-500_60: var(--contrast-red);
  --info-500_70: var(--contrast-red);
  --info-500_80: var(--contrast-red);
  --info-500_90: var(--contrast-red);
  --info-500_100: var(--contrast-red);
  /******************************************** UI ELEMENT COLORS ********************************************/
  --header-bg: var(--contrast-red);
  --header-color: var(--contrast-cyan);
  --footer-bg: var(--contrast-red);
  --footer-color: var(--contrast-cyan);
  --card-back-color: var(--contrast-red);
  --card-back-bg: var(--contrast-cyan);
  --card-front-color: var(--contrast-red);
  --card-front-bg: var(--contrast-cyan);
  /******************** Button Colors ********************/
  --button-text: var(--text-inverse);
  --button-text--hover: var(--text-inverse);
  --button-background: var(--background-inverse);
  --button-background--hover: var(--highlight);
  /******************** Slide Link Colors ********************/
  --slide-link-color: var(--text-inverse);
  --slide-link-background: var(--primary-500);
  /******************** Toggle Button Colors ********************/
  --toggle-button-text: var(--gray-800);
  --toggle-button-bg: var(--gray-100);
  --toggle-button-text--hover: var(--primary);
  --toggle-button-bg--hover: var(--gray-150);
  --toggle-button--pressed-text: var(--gray-800);
  --toggle-button--pressed-bg: var(--gray-100);
  --toggle-button--pressed-text--hover: var(--primary);
  --toggle-button--pressed-bg--hover: var(--gray-150);
  /******************** Input Colors ********************/
  --input-text: var(--text);
  --input-bg: var(--background);
  --input-border: 1px solid var(--gray-700);
  /******************** Menu Colors ********************/
  --modal-bg: var(--white);
  --menu-color: var(--text);
  --menu-bg: inherit;
  --menu-panel-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --menu-modal-background: var(--modal-screen-bg);
  --menu-text: var(--text);
  --menu-sm-head: var(--primary);
  --menu-search-box-bg: var(--gray-100);
  --menu-color--hover: var(--primary);
  --menu-bg--hover: inherit;
  --menu-search-text: var(--white);
  --menu-search-bg: var(--white);
  --menu-search-btn-bg: var(--error);
  --menu-search-close: var(--white);
  --menu-chapter-bg: var(--white);
  --menu-chapter-arrow: var(--gray-200);
  --menu-chapter-hover-bg: var(--white);
  --menu-chapter-open-bg: var(--menu-chapter-hover-bg);
  --menu-chapter-super: var(--primary);
  --menu-chapter-title: var(--gray-900);
  --menu-chapter-border: 1px solid var(--gray-200);
  --menu-list-indicator--not-visited: var(--gray-200);
  --menu-list-indicator--visited: var(--primary);
  --menu-close-color: var(--white);
  --menu-close-bg: var(--black);
  --menu-close-color--hover: var(--white);
  --menu-close-bg--hover: var(--primary);
  --menu-fav: var(--gray-700);
  /******************** Social App Colors ********************/
  --social-body-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --social-hero-bg: var(--social-body-bg);
  --social-modal-background: var(--modal-screen-bg);
  --social-list-bg: var(--gray-150);
  --social-list-text: var(--black);
  --social-list-notes-bg: var(--white);
  --social-list-bg--hover: var(--menu-chart-hover-bg);
  --social-list-bg-hidden--hover: var(--gray-300);
  --social-list-text--hover: var(--social-list-text);
  --social-list-title-color: var(--black);
  --social-list-meta-color: var(--gray-700);
  --social-sphere-bg: transparent;
  --social-sphere-hover-bg: var(--gray-200);
  --social-list-icon-background: inherit;
  --social-msg-bg: var(--white);
  --social-msg-reply-bg: var(--white);
  --social-msg-own-highlight: var(--secondary);
  --social-msg-own-bg: var(--primary-500_10);
  --social-msg-own-text: var(--text);
  --social-msg-own-user: var(--social-msg-own-highlight);
  --social-msg-grp-highlight: var(--primary);
  --social-msg-grp-bg: var(--secondary-500_10);
  --social-msg-grp-text: var(--text);
  --social-msg-grp-user: var(--social-msg-grp-highlight);
  --social-notes-bg: transparentize(#ececc1, 0.3);
}

/************** Color Contrast: Yellow/Blue **************/
body#cbook-body.contrast--yellowblue,
body#extension-body.contrast--yellowblue {
  --primary: var(--contrast-yellow);
  --secondary: var(--contrast-yellow);
  --tertiary: var(--contrast-yellow);
  --success: var(--contrast-yellow);
  --warning: var(--contrast-yellow);
  --error: var(--contrast-yellow);
  --info: var(--contrast-yellow);
  --text: var(--contrast-yellow);
  --highlight: var(--contrast-yellow);
  --background-inverse: var(--contrast-yellow);
  --black: var(--contrast-yellow);
  --text-inverse: var(--contrast-blue);
  --background: var(--contrast-blue);
  --white: var(--contrast-blue);
  --focus-color: var(--contrast-blue);
  --primary-500: var(--contrast-yellow);
  --primary-600: var(--contrast-yellow);
  --primary-700: var(--contrast-yellow);
  --primary-800: var(--contrast-yellow);
  --primary-900: var(--contrast-yellow);
  --secondary-500: var(--contrast-yellow);
  --secondary-600: var(--contrast-yellow);
  --secondary-700: var(--contrast-yellow);
  --secondary-800: var(--contrast-yellow);
  --secondary-900: var(--contrast-yellow);
  --tertiary-500: var(--contrast-yellow);
  --tertiary-600: var(--contrast-yellow);
  --tertiary-700: var(--contrast-yellow);
  --tertiary-800: var(--contrast-yellow);
  --tertiary-900: var(--contrast-yellow);
  --success-500: var(--contrast-yellow);
  --success-600: var(--contrast-yellow);
  --success-700: var(--contrast-yellow);
  --success-800: var(--contrast-yellow);
  --success-900: var(--contrast-yellow);
  --warning-500: var(--contrast-yellow);
  --warning-600: var(--contrast-yellow);
  --warning-700: var(--contrast-yellow);
  --warning-800: var(--contrast-yellow);
  --warning-900: var(--contrast-yellow);
  --error-500: var(--contrast-yellow);
  --error-600: var(--contrast-yellow);
  --error-700: var(--contrast-yellow);
  --error-800: var(--contrast-yellow);
  --error-900: var(--contrast-yellow);
  --info-500: var(--contrast-yellow);
  --info-600: var(--contrast-yellow);
  --info-700: var(--contrast-yellow);
  --info-800: var(--contrast-yellow);
  --info-900: var(--contrast-yellow);
  --gray-500: var(--contrast-yellow);
  --gray-600: var(--contrast-yellow);
  --gray-700: var(--contrast-yellow);
  --gray-800: var(--contrast-yellow);
  --gray-900: var(--contrast-yellow);
  --gray-950: var(--contrast-yellow);
  --primary-50: var(--contrast-blue);
  --primary-100: var(--contrast-blue);
  --primary-200: var(--contrast-blue);
  --primary-300: var(--contrast-blue);
  --primary-400: var(--contrast-blue);
  --secondary-50: var(--contrast-blue);
  --secondary-100: var(--contrast-blue);
  --secondary-200: var(--contrast-blue);
  --secondary-300: var(--contrast-blue);
  --secondary-400: var(--contrast-blue);
  --tertiary-50: var(--contrast-blue);
  --tertiary-100: var(--contrast-blue);
  --tertiary-200: var(--contrast-blue);
  --tertiary-300: var(--contrast-blue);
  --tertiary-400: var(--contrast-blue);
  --success-50: var(--contrast-blue);
  --success-100: var(--contrast-blue);
  --success-200: var(--contrast-blue);
  --success-300: var(--contrast-blue);
  --success-400: var(--contrast-blue);
  --warning-50: var(--contrast-blue);
  --warning-100: var(--contrast-blue);
  --warning-200: var(--contrast-blue);
  --warning-300: var(--contrast-blue);
  --warning-400: var(--contrast-blue);
  --error-50: var(--contrast-blue);
  --error-100: var(--contrast-blue);
  --error-200: var(--contrast-blue);
  --error-300: var(--contrast-blue);
  --error-400: var(--contrast-blue);
  --info-50: var(--contrast-blue);
  --info-100: var(--contrast-blue);
  --info-200: var(--contrast-blue);
  --info-300: var(--contrast-blue);
  --info-400: var(--contrast-blue);
  --gray-50: var(--contrast-blue);
  --gray-100: var(--contrast-blue);
  --gray-150: var(--contrast-blue);
  --gray-200: var(--contrast-blue);
  --gray-250: var(--contrast-blue);
  --gray-300: var(--contrast-blue);
  --gray-350: var(--contrast-blue);
  --gray-400: var(--contrast-blue);
  --primary-500_10: var(--contrast-blue);
  --primary-500_20: var(--contrast-blue);
  --primary-500_30: var(--contrast-blue);
  --primary-500_40: var(--contrast-blue);
  --primary-500_50: var(--contrast-blue);
  --primary-500_60: var(--contrast-yellow);
  --primary-500_70: var(--contrast-yellow);
  --primary-500_80: var(--contrast-yellow);
  --primary-500_90: var(--contrast-yellow);
  --primary-500_100: var(--contrast-yellow);
  --secondary-500_10: var(--contrast-blue);
  --secondary-500_20: var(--contrast-blue);
  --secondary-500_30: var(--contrast-blue);
  --secondary-500_40: var(--contrast-blue);
  --secondary-500_50: var(--contrast-blue);
  --secondary-500_60: var(--contrast-yellow);
  --secondary-500_70: var(--contrast-yellow);
  --secondary-500_80: var(--contrast-yellow);
  --secondary-500_90: var(--contrast-yellow);
  --secondary-500_100: var(--contrast-yellow);
  --tertiary-500_10: var(--contrast-blue);
  --tertiary-500_20: var(--contrast-blue);
  --tertiary-500_30: var(--contrast-blue);
  --tertiary-500_40: var(--contrast-blue);
  --tertiary-500_50: var(--contrast-blue);
  --tertiary-500_60: var(--contrast-yellow);
  --tertiary-500_70: var(--contrast-yellow);
  --tertiary-500_80: var(--contrast-yellow);
  --tertiary-500_90: var(--contrast-yellow);
  --tertiary-500_100: var(--contrast-yellow);
  --success-500_10: var(--contrast-blue);
  --success-500_20: var(--contrast-blue);
  --success-500_30: var(--contrast-blue);
  --success-500_40: var(--contrast-blue);
  --success-500_50: var(--contrast-blue);
  --success-500_60: var(--contrast-yellow);
  --success-500_70: var(--contrast-yellow);
  --success-500_80: var(--contrast-yellow);
  --success-500_90: var(--contrast-yellow);
  --success-500_100: var(--contrast-yellow);
  --warning-500_10: var(--contrast-blue);
  --warning-500_20: var(--contrast-blue);
  --warning-500_30: var(--contrast-blue);
  --warning-500_40: var(--contrast-blue);
  --warning-500_50: var(--contrast-blue);
  --warning-500_60: var(--contrast-yellow);
  --warning-500_70: var(--contrast-yellow);
  --warning-500_80: var(--contrast-yellow);
  --warning-500_90: var(--contrast-yellow);
  --warning-500_100: var(--contrast-yellow);
  --error-500_10: var(--contrast-blue);
  --error-500_20: var(--contrast-blue);
  --error-500_30: var(--contrast-blue);
  --error-500_40: var(--contrast-blue);
  --error-500_50: var(--contrast-blue);
  --error-500_60: var(--contrast-yellow);
  --error-500_70: var(--contrast-yellow);
  --error-500_80: var(--contrast-yellow);
  --error-500_90: var(--contrast-yellow);
  --error-500_100: var(--contrast-yellow);
  --info-500_10: var(--contrast-blue);
  --info-500_20: var(--contrast-blue);
  --info-500_30: var(--contrast-blue);
  --info-500_40: var(--contrast-blue);
  --info-500_50: var(--contrast-blue);
  --info-500_60: var(--contrast-yellow);
  --info-500_70: var(--contrast-yellow);
  --info-500_80: var(--contrast-yellow);
  --info-500_90: var(--contrast-yellow);
  --info-500_100: var(--contrast-yellow);
  /******************************************** UI ELEMENT COLORS ********************************************/
  --header-bg: var(--contrast-yellow);
  --header-color: var(--contrast-blue);
  --footer-bg: var(--contrast-yellow);
  --footer-color: var(--contrast-blue);
  --card-back-color: var(--contrast-yellow);
  --card-back-bg: var(--contrast-blue);
  --card-front-color: var(--contrast-yellow);
  --card-front-bg: var(--contrast-blue);
  /******************** Button Colors ********************/
  --button-text: var(--text-inverse);
  --button-text--hover: var(--text-inverse);
  --button-background: var(--background-inverse);
  --button-background--hover: var(--highlight);
  /******************** Slide Link Colors ********************/
  --slide-link-color: var(--text-inverse);
  --slide-link-background: var(--primary-500);
  /******************** Toggle Button Colors ********************/
  --toggle-button-text: var(--gray-800);
  --toggle-button-bg: var(--gray-100);
  --toggle-button-text--hover: var(--primary);
  --toggle-button-bg--hover: var(--gray-150);
  --toggle-button--pressed-text: var(--gray-800);
  --toggle-button--pressed-bg: var(--gray-100);
  --toggle-button--pressed-text--hover: var(--primary);
  --toggle-button--pressed-bg--hover: var(--gray-150);
  /******************** Input Colors ********************/
  --input-text: var(--text);
  --input-bg: var(--background);
  --input-border: 1px solid var(--gray-700);
  /******************** Menu Colors ********************/
  --modal-bg: var(--white);
  --menu-color: var(--text);
  --menu-bg: inherit;
  --menu-panel-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --menu-modal-background: var(--modal-screen-bg);
  --menu-text: var(--text);
  --menu-sm-head: var(--primary);
  --menu-search-box-bg: var(--gray-100);
  --menu-color--hover: var(--primary);
  --menu-bg--hover: inherit;
  --menu-search-text: var(--white);
  --menu-search-bg: var(--white);
  --menu-search-btn-bg: var(--error);
  --menu-search-close: var(--white);
  --menu-chapter-bg: var(--white);
  --menu-chapter-arrow: var(--gray-200);
  --menu-chapter-hover-bg: var(--white);
  --menu-chapter-open-bg: var(--menu-chapter-hover-bg);
  --menu-chapter-super: var(--primary);
  --menu-chapter-title: var(--gray-900);
  --menu-chapter-border: 1px solid var(--gray-200);
  --menu-list-indicator--not-visited: var(--gray-200);
  --menu-list-indicator--visited: var(--primary);
  --menu-close-color: var(--white);
  --menu-close-bg: var(--black);
  --menu-close-color--hover: var(--white);
  --menu-close-bg--hover: var(--primary);
  --menu-fav: var(--gray-700);
  /******************** Social App Colors ********************/
  --social-body-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --social-hero-bg: var(--social-body-bg);
  --social-modal-background: var(--modal-screen-bg);
  --social-list-bg: var(--gray-150);
  --social-list-text: var(--black);
  --social-list-notes-bg: var(--white);
  --social-list-bg--hover: var(--menu-chart-hover-bg);
  --social-list-bg-hidden--hover: var(--gray-300);
  --social-list-text--hover: var(--social-list-text);
  --social-list-title-color: var(--black);
  --social-list-meta-color: var(--gray-700);
  --social-sphere-bg: transparent;
  --social-sphere-hover-bg: var(--gray-200);
  --social-list-icon-background: inherit;
  --social-msg-bg: var(--white);
  --social-msg-reply-bg: var(--white);
  --social-msg-own-highlight: var(--secondary);
  --social-msg-own-bg: var(--primary-500_10);
  --social-msg-own-text: var(--text);
  --social-msg-own-user: var(--social-msg-own-highlight);
  --social-msg-grp-highlight: var(--primary);
  --social-msg-grp-bg: var(--secondary-500_10);
  --social-msg-grp-text: var(--text);
  --social-msg-grp-user: var(--social-msg-grp-highlight);
  --social-notes-bg: transparentize(#ececc1, 0.3);
}

/************** Color Contrast: Blue/Yellow **************/
body#cbook-body.contrast--blueyellow,
body#extension-body.contrast--blueyellow {
  --primary: var(--contrast-blue);
  --secondary: var(--contrast-blue);
  --tertiary: var(--contrast-blue);
  --success: var(--contrast-blue);
  --warning: var(--contrast-blue);
  --error: var(--contrast-blue);
  --info: var(--contrast-blue);
  --text: var(--contrast-blue);
  --highlight: var(--contrast-blue);
  --background-inverse: var(--contrast-blue);
  --black: var(--contrast-blue);
  --text-inverse: var(--contrast-yellow);
  --background: var(--contrast-yellow);
  --white: var(--contrast-yellow);
  --focus-color: var(--contrast-yellow);
  --primary-500: var(--contrast-blue);
  --primary-600: var(--contrast-blue);
  --primary-700: var(--contrast-blue);
  --primary-800: var(--contrast-blue);
  --primary-900: var(--contrast-blue);
  --secondary-500: var(--contrast-blue);
  --secondary-600: var(--contrast-blue);
  --secondary-700: var(--contrast-blue);
  --secondary-800: var(--contrast-blue);
  --secondary-900: var(--contrast-blue);
  --tertiary-500: var(--contrast-blue);
  --tertiary-600: var(--contrast-blue);
  --tertiary-700: var(--contrast-blue);
  --tertiary-800: var(--contrast-blue);
  --tertiary-900: var(--contrast-blue);
  --success-500: var(--contrast-blue);
  --success-600: var(--contrast-blue);
  --success-700: var(--contrast-blue);
  --success-800: var(--contrast-blue);
  --success-900: var(--contrast-blue);
  --warning-500: var(--contrast-blue);
  --warning-600: var(--contrast-blue);
  --warning-700: var(--contrast-blue);
  --warning-800: var(--contrast-blue);
  --warning-900: var(--contrast-blue);
  --error-500: var(--contrast-blue);
  --error-600: var(--contrast-blue);
  --error-700: var(--contrast-blue);
  --error-800: var(--contrast-blue);
  --error-900: var(--contrast-blue);
  --info-500: var(--contrast-blue);
  --info-600: var(--contrast-blue);
  --info-700: var(--contrast-blue);
  --info-800: var(--contrast-blue);
  --info-900: var(--contrast-blue);
  --gray-500: var(--contrast-blue);
  --gray-600: var(--contrast-blue);
  --gray-700: var(--contrast-blue);
  --gray-800: var(--contrast-blue);
  --gray-900: var(--contrast-blue);
  --gray-950: var(--contrast-blue);
  --primary-50: var(--contrast-yellow);
  --primary-100: var(--contrast-yellow);
  --primary-200: var(--contrast-yellow);
  --primary-300: var(--contrast-yellow);
  --primary-400: var(--contrast-yellow);
  --secondary-50: var(--contrast-yellow);
  --secondary-100: var(--contrast-yellow);
  --secondary-200: var(--contrast-yellow);
  --secondary-300: var(--contrast-yellow);
  --secondary-400: var(--contrast-yellow);
  --tertiary-50: var(--contrast-yellow);
  --tertiary-100: var(--contrast-yellow);
  --tertiary-200: var(--contrast-yellow);
  --tertiary-300: var(--contrast-yellow);
  --tertiary-400: var(--contrast-yellow);
  --success-50: var(--contrast-yellow);
  --success-100: var(--contrast-yellow);
  --success-200: var(--contrast-yellow);
  --success-300: var(--contrast-yellow);
  --success-400: var(--contrast-yellow);
  --warning-50: var(--contrast-yellow);
  --warning-100: var(--contrast-yellow);
  --warning-200: var(--contrast-yellow);
  --warning-300: var(--contrast-yellow);
  --warning-400: var(--contrast-yellow);
  --error-50: var(--contrast-yellow);
  --error-100: var(--contrast-yellow);
  --error-200: var(--contrast-yellow);
  --error-300: var(--contrast-yellow);
  --error-400: var(--contrast-yellow);
  --info-50: var(--contrast-yellow);
  --info-100: var(--contrast-yellow);
  --info-200: var(--contrast-yellow);
  --info-300: var(--contrast-yellow);
  --info-400: var(--contrast-yellow);
  --gray-50: var(--contrast-yellow);
  --gray-100: var(--contrast-yellow);
  --gray-150: var(--contrast-yellow);
  --gray-200: var(--contrast-yellow);
  --gray-250: var(--contrast-yellow);
  --gray-300: var(--contrast-yellow);
  --gray-350: var(--contrast-yellow);
  --gray-400: var(--contrast-yellow);
  --primary-500_10: var(--contrast-yellow);
  --primary-500_20: var(--contrast-yellow);
  --primary-500_30: var(--contrast-yellow);
  --primary-500_40: var(--contrast-yellow);
  --primary-500_50: var(--contrast-yellow);
  --primary-500_60: var(--contrast-blue);
  --primary-500_70: var(--contrast-blue);
  --primary-500_80: var(--contrast-blue);
  --primary-500_90: var(--contrast-blue);
  --primary-500_100: var(--contrast-blue);
  --secondary-500_10: var(--contrast-yellow);
  --secondary-500_20: var(--contrast-yellow);
  --secondary-500_30: var(--contrast-yellow);
  --secondary-500_40: var(--contrast-yellow);
  --secondary-500_50: var(--contrast-yellow);
  --secondary-500_60: var(--contrast-blue);
  --secondary-500_70: var(--contrast-blue);
  --secondary-500_80: var(--contrast-blue);
  --secondary-500_90: var(--contrast-blue);
  --secondary-500_100: var(--contrast-blue);
  --tertiary-500_10: var(--contrast-yellow);
  --tertiary-500_20: var(--contrast-yellow);
  --tertiary-500_30: var(--contrast-yellow);
  --tertiary-500_40: var(--contrast-yellow);
  --tertiary-500_50: var(--contrast-yellow);
  --tertiary-500_60: var(--contrast-blue);
  --tertiary-500_70: var(--contrast-blue);
  --tertiary-500_80: var(--contrast-blue);
  --tertiary-500_90: var(--contrast-blue);
  --tertiary-500_100: var(--contrast-blue);
  --success-500_10: var(--contrast-yellow);
  --success-500_20: var(--contrast-yellow);
  --success-500_30: var(--contrast-yellow);
  --success-500_40: var(--contrast-yellow);
  --success-500_50: var(--contrast-yellow);
  --success-500_60: var(--contrast-blue);
  --success-500_70: var(--contrast-blue);
  --success-500_80: var(--contrast-blue);
  --success-500_90: var(--contrast-blue);
  --success-500_100: var(--contrast-blue);
  --warning-500_10: var(--contrast-yellow);
  --warning-500_20: var(--contrast-yellow);
  --warning-500_30: var(--contrast-yellow);
  --warning-500_40: var(--contrast-yellow);
  --warning-500_50: var(--contrast-yellow);
  --warning-500_60: var(--contrast-blue);
  --warning-500_70: var(--contrast-blue);
  --warning-500_80: var(--contrast-blue);
  --warning-500_90: var(--contrast-blue);
  --warning-500_100: var(--contrast-blue);
  --error-500_10: var(--contrast-yellow);
  --error-500_20: var(--contrast-yellow);
  --error-500_30: var(--contrast-yellow);
  --error-500_40: var(--contrast-yellow);
  --error-500_50: var(--contrast-yellow);
  --error-500_60: var(--contrast-blue);
  --error-500_70: var(--contrast-blue);
  --error-500_80: var(--contrast-blue);
  --error-500_90: var(--contrast-blue);
  --error-500_100: var(--contrast-blue);
  --info-500_10: var(--contrast-yellow);
  --info-500_20: var(--contrast-yellow);
  --info-500_30: var(--contrast-yellow);
  --info-500_40: var(--contrast-yellow);
  --info-500_50: var(--contrast-yellow);
  --info-500_60: var(--contrast-blue);
  --info-500_70: var(--contrast-blue);
  --info-500_80: var(--contrast-blue);
  --info-500_90: var(--contrast-blue);
  --info-500_100: var(--contrast-blue);
  /******************************************** UI ELEMENT COLORS ********************************************/
  --header-bg: var(--contrast-blue);
  --header-color: var(--contrast-yellow);
  --footer-bg: var(--contrast-blue);
  --footer-color: var(--contrast-yellow);
  --card-back-color: var(--contrast-blue);
  --card-back-bg: var(--contrast-yellow);
  --card-front-color: var(--contrast-blue);
  --card-front-bg: var(--contrast-yellow);
  /******************** Button Colors ********************/
  --button-text: var(--text-inverse);
  --button-text--hover: var(--text-inverse);
  --button-background: var(--background-inverse);
  --button-background--hover: var(--highlight);
  /******************** Slide Link Colors ********************/
  --slide-link-color: var(--text-inverse);
  --slide-link-background: var(--primary-500);
  /******************** Toggle Button Colors ********************/
  --toggle-button-text: var(--gray-800);
  --toggle-button-bg: var(--gray-100);
  --toggle-button-text--hover: var(--primary);
  --toggle-button-bg--hover: var(--gray-150);
  --toggle-button--pressed-text: var(--gray-800);
  --toggle-button--pressed-bg: var(--gray-100);
  --toggle-button--pressed-text--hover: var(--primary);
  --toggle-button--pressed-bg--hover: var(--gray-150);
  /******************** Input Colors ********************/
  --input-text: var(--text);
  --input-bg: var(--background);
  --input-border: 1px solid var(--gray-700);
  /******************** Menu Colors ********************/
  --modal-bg: var(--white);
  --menu-color: var(--text);
  --menu-bg: inherit;
  --menu-panel-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --menu-modal-background: var(--modal-screen-bg);
  --menu-text: var(--text);
  --menu-sm-head: var(--primary);
  --menu-search-box-bg: var(--gray-100);
  --menu-color--hover: var(--primary);
  --menu-bg--hover: inherit;
  --menu-search-text: var(--white);
  --menu-search-bg: var(--white);
  --menu-search-btn-bg: var(--error);
  --menu-search-close: var(--white);
  --menu-chapter-bg: var(--white);
  --menu-chapter-arrow: var(--gray-200);
  --menu-chapter-hover-bg: var(--white);
  --menu-chapter-open-bg: var(--menu-chapter-hover-bg);
  --menu-chapter-super: var(--primary);
  --menu-chapter-title: var(--gray-900);
  --menu-chapter-border: 1px solid var(--gray-200);
  --menu-list-indicator--not-visited: var(--gray-200);
  --menu-list-indicator--visited: var(--primary);
  --menu-close-color: var(--white);
  --menu-close-bg: var(--black);
  --menu-close-color--hover: var(--white);
  --menu-close-bg--hover: var(--primary);
  --menu-fav: var(--gray-700);
  /******************** Social App Colors ********************/
  --social-body-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --social-hero-bg: var(--social-body-bg);
  --social-modal-background: var(--modal-screen-bg);
  --social-list-bg: var(--gray-150);
  --social-list-text: var(--black);
  --social-list-notes-bg: var(--white);
  --social-list-bg--hover: var(--menu-chart-hover-bg);
  --social-list-bg-hidden--hover: var(--gray-300);
  --social-list-text--hover: var(--social-list-text);
  --social-list-title-color: var(--black);
  --social-list-meta-color: var(--gray-700);
  --social-sphere-bg: transparent;
  --social-sphere-hover-bg: var(--gray-200);
  --social-list-icon-background: inherit;
  --social-msg-bg: var(--white);
  --social-msg-reply-bg: var(--white);
  --social-msg-own-highlight: var(--secondary);
  --social-msg-own-bg: var(--primary-500_10);
  --social-msg-own-text: var(--text);
  --social-msg-own-user: var(--social-msg-own-highlight);
  --social-msg-grp-highlight: var(--primary);
  --social-msg-grp-bg: var(--secondary-500_10);
  --social-msg-grp-text: var(--text);
  --social-msg-grp-user: var(--social-msg-grp-highlight);
  --social-notes-bg: transparentize(#ececc1, 0.3);
}

/* Color Contrast Overrides for specific cBOOK Elements  */
body#cbook-body.contrast--blackwhite,
body#cbook-body.contrast--whiteblack,
body#cbook-body.contrast--yellowblue,
body#cbook-body.contrast--blueyellow,
body#cbook-body.contrast--greenblack,
body#cbook-body.contrast--redcyan {
  --input-border: 1px solid var(--gray-500);
  --cbook-menu-border: 2px solid var(--gray-500);
  --cbook-social-border: 2px solid var(--gray-500);
  --button-border: 1px solid var(--gray-500);
  --button-secondary-border: 1px dashed var(--gray-500);
  --menu-chapter-border: 1px dashed var(--gray-500);
  --menu-chapter-arrow: var(--gray-900);
  --modal-border: 4px solid var(--black);
  --sequence-player-progress-border: 1px solid var(--black);
  --search-highlight: var(--black);
  --search-highlight-color: var(--white);
}
body#cbook-body.contrast--blackwhite .progress-display__background,
body#cbook-body.contrast--whiteblack .progress-display__background,
body#cbook-body.contrast--yellowblue .progress-display__background,
body#cbook-body.contrast--blueyellow .progress-display__background,
body#cbook-body.contrast--greenblack .progress-display__background,
body#cbook-body.contrast--redcyan .progress-display__background {
  stroke: var(--footer-color);
  stroke-width: 2px;
  stroke-dasharray: 4px 4px;
  stroke-dashoffset: 69px;
}
body#cbook-body.contrast--blackwhite .progress-display .perc-val,
body#cbook-body.contrast--whiteblack .progress-display .perc-val,
body#cbook-body.contrast--yellowblue .progress-display .perc-val,
body#cbook-body.contrast--blueyellow .progress-display .perc-val,
body#cbook-body.contrast--greenblack .progress-display .perc-val,
body#cbook-body.contrast--redcyan .progress-display .perc-val {
  color: var(--footer-color);
  font-weight: bold;
  background-color: var(--footer-bg);
}
body#cbook-body.contrast--blackwhite .chart-progress__popup,
body#cbook-body.contrast--whiteblack .chart-progress__popup,
body#cbook-body.contrast--yellowblue .chart-progress__popup,
body#cbook-body.contrast--blueyellow .chart-progress__popup,
body#cbook-body.contrast--greenblack .chart-progress__popup,
body#cbook-body.contrast--redcyan .chart-progress__popup {
  border: 1px solid var(--black);
}
body#cbook-body.contrast--blackwhite .chart-progress__popup .input-range__track--background,
body#cbook-body.contrast--whiteblack .chart-progress__popup .input-range__track--background,
body#cbook-body.contrast--yellowblue .chart-progress__popup .input-range__track--background,
body#cbook-body.contrast--blueyellow .chart-progress__popup .input-range__track--background,
body#cbook-body.contrast--greenblack .chart-progress__popup .input-range__track--background,
body#cbook-body.contrast--redcyan .chart-progress__popup .input-range__track--background {
  border: 1px solid var(--black);
}

/* Color Contrast Overrides for specific EXT Elements */
body#extension-body.contrast--blackwhite .ReactModalPortal .ReactModal__Overlay,
body#extension-body.contrast--whiteblack .ReactModalPortal .ReactModal__Overlay,
body#extension-body.contrast--yellowblue .ReactModalPortal .ReactModal__Overlay,
body#extension-body.contrast--blueyellow .ReactModalPortal .ReactModal__Overlay,
body#extension-body.contrast--greenblack .ReactModalPortal .ReactModal__Overlay,
body#extension-body.contrast--redcyan .ReactModalPortal .ReactModal__Overlay {
  color: var(--hotspot-modal-color);
  background-color: var(--hotspot-modal-bg);
  --hotspot-modal-color: var(--gray-900);
  --hotspot-modal-bg: var(--gray-100);
  --hotspot-modal-img-bg: var(--gray-100);
  --hotspot-close-color: var(--gray-100);
  --hotspot-close-bg: var(--gray-900);
}
body#extension-body.contrast--blackwhite #app-explorer .card-item .card__front,
body#extension-body.contrast--blackwhite #app-explorer .card-item .card__back,
body#extension-body.contrast--whiteblack #app-explorer .card-item .card__front,
body#extension-body.contrast--whiteblack #app-explorer .card-item .card__back,
body#extension-body.contrast--yellowblue #app-explorer .card-item .card__front,
body#extension-body.contrast--yellowblue #app-explorer .card-item .card__back,
body#extension-body.contrast--blueyellow #app-explorer .card-item .card__front,
body#extension-body.contrast--blueyellow #app-explorer .card-item .card__back,
body#extension-body.contrast--greenblack #app-explorer .card-item .card__front,
body#extension-body.contrast--greenblack #app-explorer .card-item .card__back,
body#extension-body.contrast--redcyan #app-explorer .card-item .card__front,
body#extension-body.contrast--redcyan #app-explorer .card-item .card__back {
  color: var(--gray-900);
  background-color: var(--gray-100);
  border: 2px solid var(--gray-900);
}
body#extension-body.contrast--blackwhite #app-responsive-hotspots .entity .agenda__bullet,
body#extension-body.contrast--blackwhite #app-responsive-hotspots .entity .hotspot__bullet,
body#extension-body.contrast--blackwhite #app-responsive-hotspots .entity.entity__area .area__content,
body#extension-body.contrast--whiteblack #app-responsive-hotspots .entity .agenda__bullet,
body#extension-body.contrast--whiteblack #app-responsive-hotspots .entity .hotspot__bullet,
body#extension-body.contrast--whiteblack #app-responsive-hotspots .entity.entity__area .area__content,
body#extension-body.contrast--yellowblue #app-responsive-hotspots .entity .agenda__bullet,
body#extension-body.contrast--yellowblue #app-responsive-hotspots .entity .hotspot__bullet,
body#extension-body.contrast--yellowblue #app-responsive-hotspots .entity.entity__area .area__content,
body#extension-body.contrast--blueyellow #app-responsive-hotspots .entity .agenda__bullet,
body#extension-body.contrast--blueyellow #app-responsive-hotspots .entity .hotspot__bullet,
body#extension-body.contrast--blueyellow #app-responsive-hotspots .entity.entity__area .area__content,
body#extension-body.contrast--greenblack #app-responsive-hotspots .entity .agenda__bullet,
body#extension-body.contrast--greenblack #app-responsive-hotspots .entity .hotspot__bullet,
body#extension-body.contrast--greenblack #app-responsive-hotspots .entity.entity__area .area__content,
body#extension-body.contrast--redcyan #app-responsive-hotspots .entity .agenda__bullet,
body#extension-body.contrast--redcyan #app-responsive-hotspots .entity .hotspot__bullet,
body#extension-body.contrast--redcyan #app-responsive-hotspots .entity.entity__area .area__content {
  color: var(--gray-900);
  background-color: var(--gray-100);
  border: 2px solid var(--gray-900);
}

/* 100 % */
body#extension-body.font-size--normal,
body#cbook-body.font-size--normal {
  --text-multiplier: 1;
  --font-size-xx-small: calc(0.65rem * var(--text-multiplier));
  --font-size-x-small: calc(0.75rem * var(--text-multiplier));
  --font-size-small: calc(0.875rem * var(--text-multiplier));
  --font-size-medium: calc(1rem * var(--text-multiplier));
  --font-size-large: calc(1.125rem * var(--text-multiplier));
  --font-size-x-large: calc(1.25rem * var(--text-multiplier));
  --font-size-xx-large: calc(1.5rem * var(--text-multiplier));
  --font-size-xxx-large: calc(2rem * var(--text-multiplier));
  --header-height: 50px;
  --footer-height: 50px;
}

/* 130 % */
body#extension-body.font-size--medium,
body#cbook-body.font-size--medium {
  --text-multiplier: 1.3;
  --font-size-xx-small: calc(0.65rem * var(--text-multiplier));
  --font-size-x-small: calc(0.75rem * var(--text-multiplier));
  --font-size-small: calc(0.875rem * var(--text-multiplier));
  --font-size-medium: calc(1rem * var(--text-multiplier));
  --font-size-large: calc(1.125rem * var(--text-multiplier));
  --font-size-x-large: calc(1.25rem * var(--text-multiplier));
  --font-size-xx-large: calc(1.5rem * var(--text-multiplier));
  --font-size-xxx-large: calc(2rem * var(--text-multiplier));
  --header-height: 60px;
  --footer-height: 60px;
  --stage-height: calc(var(--cbook-height) - var(--header-height) - var(--footer-height));
}

/* 170 % */
body#extension-body.font-size--large,
body#cbook-body.font-size--large {
  --text-multiplier: 1.7;
  --font-size-xx-small: calc(0.65rem * var(--text-multiplier));
  --font-size-x-small: calc(0.75rem * var(--text-multiplier));
  --font-size-small: calc(0.875rem * var(--text-multiplier));
  --font-size-medium: calc(1rem * var(--text-multiplier));
  --font-size-large: calc(1.125rem * var(--text-multiplier));
  --font-size-x-large: calc(1.25rem * var(--text-multiplier));
  --font-size-xx-large: calc(1.5rem * var(--text-multiplier));
  --font-size-xxx-large: calc(2rem * var(--text-multiplier));
  --header-height: 60px;
  --footer-height: 60px;
  --stage-height: calc(var(--cbook-height) - var(--header-height) - var(--footer-height));
}
body#extension-body.font-size--large .ui-modal__wrapper .app-ally-modal__shortcuts table,
body#cbook-body.font-size--large .ui-modal__wrapper .app-ally-modal__shortcuts table {
  width: 100%;
  margin: 0 var(--space-medium);
}
body#extension-body.font-size--large .app-footer__options,
body#cbook-body.font-size--large .app-footer__options {
  width: 100%;
}
body#extension-body.font-size--large .app-footer__options span,
body#cbook-body.font-size--large .app-footer__options span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body#extension-body.font-size--large .app-footer__options span.switch-label,
body#cbook-body.font-size--large .app-footer__options span.switch-label {
  opacity: 1;
}
body#extension-body.font-size--large .app-footer__options span.switch-label--active,
body#cbook-body.font-size--large .app-footer__options span.switch-label--active {
  opacity: 0;
}
body#extension-body.font-size--large #footer .ui-switch,
body#extension-body.font-size--large #footer .ui-switch.on,
body#cbook-body.font-size--large #footer .ui-switch,
body#cbook-body.font-size--large #footer .ui-switch.on {
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: all;
  z-index: 10;
  border-radius: var(--button-border-radius);
}
body#extension-body.font-size--large #footer .ui-switch:hover,
body#extension-body.font-size--large #footer .ui-switch:focus,
body#cbook-body.font-size--large #footer .ui-switch:hover,
body#cbook-body.font-size--large #footer .ui-switch:focus {
  background: transparent;
  border: none;
  box-shadow: none;
}
body#extension-body.font-size--large #footer .ui-switch .ui-switch__handler,
body#cbook-body.font-size--large #footer .ui-switch .ui-switch__handler {
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: all;
}
body#extension-body.font-size--large #footer .ui-switch:hover .ui-switch__handler,
body#extension-body.font-size--large #footer .ui-switch:focus .ui-switch__handler,
body#cbook-body.font-size--large #footer .ui-switch:hover .ui-switch__handler,
body#cbook-body.font-size--large #footer .ui-switch:focus .ui-switch__handler {
  box-shadow: none;
  opacity: 0.8;
}

/* 200% */
body#extension-body.font-size--x-large,
body#cbook-body.font-size--x-large {
  --text-multiplier: 2;
  --font-size-xx-small: calc(0.65rem * var(--text-multiplier));
  --font-size-x-small: calc(0.75rem * var(--text-multiplier));
  --font-size-small: calc(0.875rem * var(--text-multiplier));
  --font-size-medium: calc(1rem * var(--text-multiplier));
  --font-size-large: calc(1.125rem * var(--text-multiplier));
  --font-size-x-large: calc(1.25rem * var(--text-multiplier));
  --font-size-xx-large: calc(1.5rem * var(--text-multiplier));
  --font-size-xxx-large: calc(2rem * var(--text-multiplier));
  --space-x-large: 4ch;
  --space-large: 1ch;
  --space-medium: 0.5ch;
  --space-small: 0.4ch;
  --space-x-small: 0.25ch;
  --space-xx-small: 0.125ch;
  --space-zero: 0;
  --paddings--wide: var(--space-medium);
  --icon-size-s: 24px;
  --icon-size-m: 32px;
  --header-height: 70px;
  --footer-height: 70px;
  --stage-height: calc(var(--cbook-height) - var(--header-height) - var(--footer-height));
  --app-menu-width: 100%;
  --menu-close-position-right: 0;
  --social-app-width: 100%;
  --social-close-position-left: 0;
}
body#extension-body.font-size--x-large .ui-modal__wrapper .app-ally-modal__shortcuts table,
body#cbook-body.font-size--x-large .ui-modal__wrapper .app-ally-modal__shortcuts table {
  width: 100%;
  margin: 0 var(--space-medium);
}

/* 150 % */
body#cbook-body.font-size--medium .input-range__label-container {
  top: -0.5ch;
}

body#cbook-body.font-size--medium .app-menu__chapter .progress-display {
  margin: 0;
  width: 60px;
  height: 60px;
  transform: scale(1);
  display: flex;
  align-items: center;
  justify-content: center;
}

body#cbook-body.font-size--medium .progress-display__svg svg {
  transform: scale(1.5);
}

body#cbook-body.font-size--medium .progress-display--compact .perc-val {
  right: -19px;
  top: 3px;
  font-size: var(--font-size-x-small);
}

body#cbook-body.font-size--medium .app-footer#footer .progress-display--compact .perc-val {
  right: -23px;
  top: -8px;
}

/* 150 % */
/* 200 % */
/* Condensing Book/Story Mode Switch */
body#cbook-body.font-size--x-large .app-footer__options {
  width: 100px;
}

body#cbook-body.font-size--x-large .app-footer__options span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

body#cbook-body.font-size--x-large .app-footer__options span.switch-label {
  opacity: 1;
}

body#cbook-body.font-size--x-large .app-footer__options span.switch-label--active {
  opacity: 0;
}

body#cbook-body.font-size--x-large #footer .ui-switch,
body#cbook-body.font-size--x-large #footer .ui-switch.on {
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: all;
  z-index: 10;
  border-radius: var(--button-border-radius);
}

body#cbook-body.font-size--x-large #footer .ui-switch:hover,
body#cbook-body.font-size--x-large #footer .ui-switch:focus {
  background: transparent;
  border: none;
  box-shadow: none;
}

body#cbook-body.font-size--x-large #footer .ui-switch:hover .ui-switch__handler,
body#cbook-body.font-size--x-large #footer .ui-switch:focus .ui-switch__handler {
  box-shadow: none;
  opacity: 0.8;
}

body#cbook-body.font-size--x-large #footer .ui-switch .ui-switch__handler {
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: all;
}

body#cbook-body.font-size--x-large .chart-menu__visited {
  margin: 0;
}

body#cbook-body.font-size--x-large .chart-menu__link {
  padding: var(--space-medium);
}

body#cbook-body.font-size--x-large .app-menu__chapter .title .title-wrapper {
  margin-left: var(--space-x-large);
}

body#cbook-body.font-size--x-large .app-menu__chapter .progress-display {
  margin: 0;
  width: 60px;
  height: 60px;
  transform: scale(1);
  display: flex;
  align-items: center;
  justify-content: center;
}

body#cbook-body.font-size--x-large .progress-display__svg svg {
  transform: scale(1.5);
}

body#cbook-body.font-size--x-large .progress-display--compact .perc-val {
  right: -35px;
  top: -3px;
  font-size: var(--font-size-x-small);
}

body#cbook-body.font-size--x-large .numeral-indicator {
  left: calc(var(--space-medium) * -1);
  top: calc(var(--space-medium) * -2);
  width: 2ch;
  height: 2ch;
  line-height: 2ch;
}

body#cbook-body.font-size--x-large .input-range__label-container {
  top: -1ch;
}

body#cbook-body.font-size--x-large .app-footer#footer .progress-display--compact .perc-val {
  right: -36px;
  top: -14px;
}

/* Condensing Book/Story Mode Switch */
/* 200% */
/* Responsive Styling considering Display Scaling 125% and 150% */
@media only screen and (min-width: 1600px) and (-webkit-max-device-pixel-ratio: 1.5), only screen and (min-width: 1600px) and (-webkit-max-device-pixel-ratio: 1.25) {
  #cbook-body,
  #extension-body,
  #app-responsive-hotspots-backend,
  #editor-body {
    --app-menu-width: 50%;
    --social-app-width: 45%;
    --font-size-xx-small: 0.75rem;
  }
}