:root {
  --sh-h: 0;
  --sh-s: 1%;
  --sh-l: 17%;

  --hl-h: 0;
  --hl-s: 0%;
  --hl-l: 96%;

  --faint: 54%;
  --fainter: 26%;
  --faintest: 12%;
  --superfaint: 4%;
  --alt-faint: 70%;
  --alt-fainter: 30%;
  --alt-faintest: 12%;

  --sh-hsl: var(--sh-h) var(--sh-s) var(--sh-l);
  --shadow: hsl(var(--sh-hsl));

  --hl-hsl: var(--hl-h) var(--hl-s) var(--hl-l);
  --highlight: hsl(var(--hl-hsl));

  --gray-900: hsl(221, 39%, 11%);
  --gray-800: hsl(215, 28%, 17%);
  --gray-700: hsl(217, 19%, 27%);
  --gray-600: hsl(215, 14%, 34%);
  --gray-500: hsl(220, 09%, 46%);
  --gray-400: hsl(218, 11%, 65%);
  --gray-300: hsl(216, 12%, 84%);
  --gray-200: hsl(220, 13%, 91%);
  --gray-100: hsl(220, 14%, 96%);
  --gray-50: hsl(210, 20%, 98%);
}

[palette],
[palette] .slice,
[palette].slice {
  /* Saturate: saturation + (100% - saturation) * ∆
  /* Desaturate: saturation - (saturation * ∆)
  /* Lighten: lightness + (100% - lightness) * ∆
  /* Darken: lightness - (lightness * ∆)

  /* Global Variables for saturation and lightness calcs */
  --delta: 0.4;
  --l-delta: var(--delta);
  --s-delta: var(--delta);

  /* Categorical colors that harmonize with the data color. These use a rectangular tetradic color harmony */
  --data-cat1-calc: 180;
  --data-cat2-calc: -45;
  --data-cat3-calc: 135;
  --data-cat4-calc: 45;

  /* Color Math */
  --data-light-l: calc(var(--data-l) + (100% - var(--data-l)) * var(--data-l-delta, var(--l-delta)));
  --data-dark-l: calc(var(--data-l) - var(--data-l) * var(--data-l-delta, var(--l-delta)));
  --data-ss: calc(var(--data-s) + (100% - var(--data-s)) * var(--data-l-delta, var(--s-delta)));

  --bg1-light-l: calc(var(--bg1-l) + (100% - var(--bg1-l)) * var(--bg1-l-delta, var(--l-delta)));
  --bg1-dark-l: calc(var(--bg1-l) - var(--bg1-l) * var(--bg1-l-delta, var(--l-delta)));
  --bg1-ss: calc(var(--bg1-s) + (100% - var(--bg1-s)) * var(--bg1-l-delta, var(--s-delta)));

  --bg2-light-l: calc(var(--bg2-l) + (100% - var(--bg2-l)) * var(--bg2-l-delta, var(--l-delta)));
  --bg2-dark-l: calc(var(--bg2-l) - var(--bg2-l) * var(--bg2-l-delta, var(--l-delta)));
  --bg2-ss: calc(var(--bg2-s) + (100% - var(--bg2-s)) * var(--bg2-l-delta, var(--s-delta)));

  --bg3-light-l: calc(var(--bg3-l) + (100% - var(--bg3-l)) * var(--bg3-l-delta, var(--l-delta)));
  --bg3-dark-l: calc(var(--bg3-l) - var(--bg3-l) * var(--bg3-l-delta, var(--l-delta)));
  --bg3-ss: calc(var(--bg3-s) + (100% - var(--bg3-s)) * var(--bg3-l-delta, var(--s-delta)));

  /* Actual color variables */
  --data-color: hsl(var(--data-h) var(--data-s) var(--data-l));
  --data-color-light: hsl(var(--data-h) var(--data-ss) var(--data-light-l));
  --data-color-dark: hsl(var(--data-h) var(--data-ss) var(--data-dark-l));
  --data-color-wash: hsl(var(--data-h) 10% 90%);

  --data-cat1: hsl(calc(var(--data-h) + var(--data-cat1-calc)) var(--data-ss) var(--data-light-l));
  --data-cat2: hsl(calc(var(--data-h) + var(--data-cat2-calc)) var(--data-ss) var(--data-light-l));
  --data-cat3: hsl(calc(var(--data-h) + var(--data-cat3-calc)) var(--data-ss) var(--data-light-l));
  --data-cat4: hsl(calc(var(--data-h) + var(--data-cat4-calc)) var(--data-ss) var(--data-light-l));
  --data-cat5: hsl(calc(var(--data-h) + var(--data-cat1-calc)) var(--data-ss) var(--data-dark-l));
  --data-cat6: hsl(calc(var(--data-h) + var(--data-cat2-calc)) var(--data-ss) var(--data-dark-l));
  --data-cat7: hsl(calc(var(--data-h) + var(--data-cat3-calc)) var(--data-ss) var(--data-dark-l));
  --data-cat8: hsl(calc(var(--data-h) + var(--data-cat4-calc)) var(--data-ss) var(--data-dark-l));

  --bg1-color: hsl(var(--bg1-h) var(--bg1-s) var(--bg1-l));
  --bg1-color-light: hsl(var(--bg1-h) var(--bg1-ss) var(--bg1-light-l));
  --bg1-color-dark: hsl(var(--bg1-h) var(--bg1-ss) var(--bg1-dark-l));
  --bg1-color-wash: hsl(var(--bg1-h) 10% 90%);

  --bg2-color: hsl(var(--bg2-h) var(--bg2-s) var(--bg2-l));
  --bg2-color-light: hsl(var(--bg2-h) var(--bg2-ss) var(--bg2-light-l));
  --bg2-color-dark: hsl(var(--bg2-h) var(--bg2-ss) var(--bg2-dark-l));
  --bg2-color-wash: hsl(var(--bg2-h) 10% 90%);

  --bg3-color: hsl(var(--bg3-h) var(--bg3-s) var(--bg3-l));
  --bg3-color-light: hsl(var(--bg3-h) var(--bg3-ss) var(--bg3-light-l));
  --bg3-color-dark: hsl(var(--bg3-h) var(--bg3-ss) var(--bg3-dark-l));
  --bg3-color-wash: hsl(var(--bg3-h) 10% 90%);

  --data-cat-s: var(--data-ss);
  --data-cat-l: var(--data-dark-l);

  --data-cat1-color: hsl(calc(var(--data-h) + var(--data-cat1-calc)) var(--data-cat-s) var(--data-cat-l));
  --data-cat2-color: hsl(calc(var(--data-h) + var(--data-cat2-calc)) var(--data-cat-s) var(--data-cat-l));
  --data-cat3-color: hsl(calc(var(--data-h) + var(--data-cat3-calc)) var(--data-cat-s) var(--data-cat-l));
  --data-cat4-color: hsl(calc(var(--data-h) + var(--data-cat4-calc)) var(--data-cat-s) var(--data-cat-l));

  --data-color-faint: hsl(var(--data-h) var(--data-ss) var(--data-dark-l) / var(--faint));
  --data-color-fainter: hsl(var(--data-h) var(--data-ss) var(--data-dark-l) / var(--fainter));
  --data-color-faintest: hsl(var(--data-h) var(--data-ss) var(--data-dark-l) / var(--faintest));
  --data-color-superfaint: hsl(var(--data-h) var(--data-s) var(--data-dark-l) / var(--superfaint));
  ;
}

[palette] .slice-colors-invert,
[palette].slice-colors-invert {
  --data-cat-s: var(--data-ss);
  --data-cat-l: var(--data-light-l);

  --data-color-faint: hsl(var(--data-h) var(--data-ss) var(--data-light-l) / var(--alt-faint));
  --data-color-fainter: hsl(var(--data-h) var(--data-ss) var(--data-light-l) / var(--alt-fainter));
  --data-color-faintest: hsl(var(--data-h) var(--data-ss) var(--data-light-l) / var(--alt-faintest));
  --data-color-superfaint: hsl(var(--data-h) var(--data-s) var(--data-light-l) / var(--superfaint));
}

[palette], .slice {
  --sh-hsl: var(--sh-h) var(--sh-s) var(--sh-l);
  --shadow: hsl(var(--sh-hsl));

  --hl-hsl: var(--hl-h) var(--hl-s) var(--hl-l);
  --highlight: hsl(var(--hl-hsl));

  --theme-color: var(--shadow);
  --theme-color-faint: hsl(var(--sh-hsl) / var(--faint));
  --theme-color-fainter: hsl(var(--sh-hsl) / var(--fainter));
  --theme-color-faintest: hsl(var(--sh-hsl) / var(--faintest));
  --theme-color-superfaint: hsl(var(--sh-hsl) / var(--superfaint));
  --theme-color-alt: var(--highlight);
  --theme-color-alt-faint: hsl(var(--hl-hsl) / var(--alt-faint));
  --theme-color-alt-fainter: hsl(var(--hl-hsl) / var(--alt-fainter));
  --theme-color-alt-faintest: hsl(var(--hl-hsl) / var(--alt-faintest));

  --note-color: hsl(var(--sh-h) var(--sh-s) calc(var(--sh-l) + 30%));
}

.slice-colors-invert {
  --theme-color: var(--highlight);
  --theme-color-faint: hsl(var(--hl-hsl) / var(--faint));
  --theme-color-fainter: hsl(var(--hl-hsl) / var(--fainter));
  --theme-color-faintest: hsl(var(--hl-hsl) / var(--faintest));
  --theme-color-superfaint: hsl(var(--hl-hsl) / var(--superfaint));
  --theme-color-alt: var(--shadow);
  --theme-color-alt-faint: hsl(var(--sh-hsl) / var(--alt-faint));
  --theme-color-alt-fainter: hsl(var(--sh-hsl) / var(--alt-fainter));
  --theme-color-alt-faintest: hsl(var(--sh-hsl) / var(--alt-faintest));

  --note-color: hsl(var(--hl-h) var(--hl-s) calc(var(--hl-l) - 30%));
}


[palette] .slice-typography {
  color: var(--theme-color);
}

[palette] .slice-typography small,
[palette] .slice-typography .note,
[palette] .slice-typography h4 {
  color: var(--note-color);
}

[palette] .slice-typography blockquote {
  color: var(--theme-color-faint);
  border-left-color: var(--theme-color-fainter);
}

[palette] .slice-typography a {
  color: var(--theme-color);
  text-decoration: underline;
  text-decoration-color: var(--theme-color-fainter);
  transition: var(--transition);
}

[palette] .slice-typography a:hover {
  text-decoration-color: var(--theme-color);
}

.reset-colors-invert {
  --data-cat-s: var(--data-ss);
  --data-cat-l: var(--data-dark-l);

  --data-color-faint: hsl(var(--data-h) var(--data-ss) var(--data-dark-l) / var(--faint));
  --data-color-fainter: hsl(var(--data-h) var(--data-ss) var(--data-dark-l) / var(--fainter));
  --data-color-faintest: hsl(var(--data-h) var(--data-ss) var(--data-dark-l) / var(--faintest));
  --data-color-superfaint: hsl(var(--data-h) var(--data-s) var(--data-dark-l) / var(--superfaint));

  --theme-color: var(--shadow);
  --theme-color-faint: hsl(var(--sh-hsl) / var(--faint));
  --theme-color-fainter: hsl(var(--sh-hsl) / var(--fainter));
  --theme-color-faintest: hsl(var(--sh-hsl) / var(--faintest));
  --theme-color-superfaint: hsl(var(--sh-hsl) / var(--superfaint));
  --theme-color-alt: var(--highlight);
  --theme-color-alt-faint: hsl(var(--hl-hsl) / var(--alt-faint));
  --theme-color-alt-fainter: hsl(var(--hl-hsl) / var(--alt-fainter));
  --theme-color-alt-faintest: hsl(var(--hl-hsl) / var(--alt-faintest));

  --note-color: hsl(var(--sh-h) var(--sh-s) calc(var(--sh-l) + 30%));
}

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

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

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

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

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

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

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

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

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

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

.gray-50 {
  color: var(--gray-50);
}

.gray-100 {
  color: var(--gray-100);
}

.gray-200 {
  color: var(--gray-200);
}

.gray-300 {
  color: var(--gray-300);
}

.gray-400 {
  color: var(--gray-400);
}

.gray-500 {
  color: var(--gray-500);
}

.gray-600 {
  color: var(--gray-600);
}

.gray-700 {
  color: var(--gray-700);
}

.gray-800 {
  color: var(--gray-800);
}

.gray-900 {
  color: var(--gray-900);
}

.border-gray-50 {
  border-color: var(--gray-50);
}

.border-gray-100 {
  border-color: var(--gray-100);
}

.border-gray-200 {
  border-color: var(--gray-200);
}

.border-gray-300 {
  border-color: var(--gray-300);
}

.border-gray-400 {
  border-color: var(--gray-400);
}

.border-gray-500 {
  border-color: var(--gray-500);
}

.border-gray-600 {
  border-color: var(--gray-600);
}

.border-gray-700 {
  border-color: var(--gray-700);
}

.border-gray-800 {
  border-color: var(--gray-800);
}

.border-gray-900 {
  border-color: var(--gray-900);
}

.hover-bg-gray-50 :hover {
  background-color: var(--gray-50);
}

.hover-bg-gray-100:hover {
  background-color: var(--gray-100);
}

.hover-bg-gray-200:hover {
  background-color: var(--gray-200);
}

.hover-bg-gray-300:hover {
  background-color: var(--gray-300);
}

.hover-bg-gray-400:hover {
  background-color: var(--gray-400);
}

.hover-bg-gray-500:hover {
  background-color: var(--gray-500);
}

.hover-bg-gray-600:hover {
  background-color: var(--gray-600);
}

.hover-bg-gray-700:hover {
  background-color: var(--gray-700);
}

.hover-bg-gray-800:hover {
  background-color: var(--gray-800);
}

.hover-bg-gray-900:hover {
  background-color: var(--gray-900);
}

.hover-gray-50:hover {
  color: var(--gray-50);
}

.hover-gray-100:hover {
  color: var(--gray-100);
}

.hover-gray-200:hover {
  color: var(--gray-200);
}

.hover-gray-300:hover {
  color: var(--gray-300);
}

.hover-gray-400:hover {
  color: var(--gray-400);
}

.hover-gray-500:hover {
  color: var(--gray-500);
}

.hover-gray-600:hover {
  color: var(--gray-600);
}

.hover-gray-700:hover {
  color: var(--gray-700);
}

.hover-gray-800:hover {
  color: var(--gray-800);
}

.hover-gray-900:hover {
  color: var(--gray-900);
}

.hover-border-gray-50:hover {
  border-color: var(--gray-50);
}

.hover-border-gray-100:hover {
  border-color: var(--gray-100);
}

.hover-border-gray-200:hover {
  border-color: var(--gray-200);
}

.hover-border-gray-300:hover {
  border-color: var(--gray-300);
}

.hover-border-gray-400:hover {
  border-color: var(--gray-400);
}

.hover-border-gray-500:hover {
  border-color: var(--gray-500);
}

.hover-border-gray-600:hover {
  border-color: var(--gray-600);
}

.hover-border-gray-700:hover {
  border-color: var(--gray-700);
}

.hover-border-gray-800:hover {
  border-color: var(--gray-800);
}

.hover-border-gray-900:hover {
  border-color: var(--gray-900);
}


.bg-data {background-color: var(--data);}
.hover-bg-data-dark:hover { background-color: var(--data-color-dark);}
.data-text { color: var(--data-text);}
.hover-data-text-dark:hover { color: var(--data-dark-text);}