:root {
  --control-gutter-width: 58px;
  --slide-padding-width: 12px;
  --slide-height: 48px;
  --slide-content-max-height: calc(var(--slide-height) * 5);
  --slide-content-padding: calc(var(--slide-height) / 2);
  --nav-height: 64px;
  --slide-icon-size: 18px;
  --slide-background: 192, 200, 204;

  --endcrawl-text-font-family: "ITC Franklin Gothic LT Condensed";
  --endcrawl-text-font-weight: 500;
  --endcrawl-text-font-size: 14px;
  --endcrawl-text-font-letter-spacing: 0.005em;
  --endcrawl-text-font-line-height: 1.4;

  --endcrawl-display-font-family: "Tungsten A", "Tungsten B";
  --endcrawl-display-font-weight: 600;
  --endcrawl-display-font-size: var(--slide-height);
  --endcrawl-display-font-letter-spacing: 0.02em;

  --slide-dim-disabled: 0.18;
  --slide-dim-preview-disabled: 0.25;
  --slide-dim-blurred: 0.475;
  --slide-dim-active: 0.7;
  --slide-dim-highlighted: 1;

  --slide-elevation-fade-in:  0.0s;
  --slide-elevation-fade-out: 0.3s;

  --endcrawl-blacker: #121212;
  --endcrawl-black: #181818;
  --endcrawl-slate-black-r: 25;
  --endcrawl-slate-black-g: 26;
  --endcrawl-slate-black-b: 29;
  --endcrawl-slate-black: #191a1d;

  --endcrawl-light-grey-r: 199;
  --endcrawl-light-grey-g: 202;
  --endcrawl-light-grey-b: 203;
  --endcrawl-light-grey: var(--endcrawl-light-grey-r), var(--endcrawl-light-grey-g), var(--endcrawl-light-grey-b);
  --endcrawl-slate-grey: #343d48;
  --endcrawl-dark-grey: 102, 111, 121;
  --endcrawl-white: #ffffff;

  --endcrawl-cyan: 0, 234, 255;
  --endcrawl-magenta: 255, 0, 255;
  --endcrawl-gold: 255, 187, 3;

  --endcrawl-elevation:  0.05;
  --endcrawl-elevated--01: rgba(var(--slide-background), var(--endcrawl-elevation));
  --endcrawl-elevated--02: rgba(var(--slide-background), calc(var(--endcrawl-elevation)*2) );
  --endcrawl-elevated--03: rgba(var(--slide-background), calc(var(--endcrawl-elevation)*3) );

  --endcrawl-background-r: var(--endcrawl-slate-black-r);
  --endcrawl-background-g: var(--endcrawl-slate-black-g);
  --endcrawl-background-b: var(--endcrawl-slate-black-b);
  --endcrawl-background-rgb: var(--endcrawl-background-r), var(--endcrawl-background-g), var(--endcrawl-background-b);
  --endcrawl-background: rgb(var(--endcrawl-background-rgb));

  --endcrawl-foreground-r: var(--endcrawl-light-grey-r);
  --endcrawl-foreground-g: var(--endcrawl-light-grey-g);
  --endcrawl-foreground-b: var(--endcrawl-light-grey-b);
  --endcrawl-foreground-rgb: var(--endcrawl-foreground-r), var(--endcrawl-foreground-g), var(--endcrawl-foreground-b);
  --endcrawl-foreground: rgb(var(--endcrawl-foreground-rgb));

  --endcrawl-highlight: rgba(var(--endcrawl-cyan), 0.8);
  --endcrawl-positive-tint: rgba(var(--endcrawl-cyan), 0.3);
  --endcrawl-negative-tint: rgba(var(--endcrawl-magenta), 0.3);

  --endcrawl-positive: hsla(185, 100%, 85%, 0.8);
  --endcrawl-positive-bg: hsla(197, 100%, 75%, 0.13);
  --endcrawl-positive-hover: #ffffff;
  --endcrawl-positive-bg-hover: hsl(197, 100%, 75%, 0.18);

  --endcrawl-negative: hsla(300, 100%, 92%, 0.8);
  --endcrawl-negative-bg: hsla(300,100%,50%,0.15);
  --endcrawl-negative-hover: #ffffff;
  --endcrawl-negative-bg-hover: hsla(300,100%,50%,0.22);

  --endcrawl-negative--slide: hsla(300,100%,80%,0.5);
  --endcrawl-negative-bg--slide: hsla(300,100%,10%,0.25);
  --endcrawl-negative-hover--slide: hsla(300,100%,93%,0.95);
  --endcrawl-negative-bg-hover--slide: hsla(300,100%,25%,0.5);

  --endcrawl-positive--slide: hsla(185, 100%, 80%, 0.85);
  --endcrawl-positive-bg--slide: hsla(197, 100%, 20%, 0.12);
  --endcrawl-positive-hover--slide: hsla(185, 100%, 90%, 1);
  --endcrawl-positive-bg-hover--slide: hsla(197, 100%, 40%, 0.2);

  --endcrawl-hyperlink-active: hsla(184.9, 100%, 70%, 0.9);

  --endcrawl-glass-cyan--slate-black: hsla(185.7, 37%, 72%, 1);
  --endcrawl-glass-cyan-bg--slate-black: hsla(197, 100%, 75%, 0.08);
  --endcrawl-glass-cyan-hover--slate-black: #ffffff;
  --endcrawl-glass-cyan-bg-hover--slate-black: hsl(197, 100%, 75%, 0.13);

  --endcrawl-glass-cyan--black: hsla(185, 100%, 85%, 0.9);
  --endcrawl-glass-cyan-bg--black: hsla(197, 100%, 75%, 0.2);

  --endcrawl-glass-cyan--slide: hsla(185, 100%, 80%, 1);
  --endcrawl-glass-cyan-bg--slide: hsl(197, 100%, 50%);
  --endcrawl-glass-cyan-bg-opacity--slide: 0.09;
  --endcrawl-glass-cyan-bg--elevated: hsla(197, 100%, 50%, var(--endcrawl-glass-cyan-bg-opacity--slide));
  --endcrawl-glass-cyan-bg-active-opacity--slide: 0.16;

  /* stained glass level colors */

  --endcrawl-glass-under2-icon: hsl(38.1,81.9%,43.3%);
  --endcrawl-glass-under2-text: hsl(38.3,100%,74.5%);
  --endcrawl-glass-under2-mask: hsla(38,100%,50%,0.10);

  --endcrawl-glass-under1-icon: hsl(70.5,100%,52%);;
  --endcrawl-glass-under1-text: hsl(70.4,100%,77.5%);
  --endcrawl-glass-under1-mask: hsla(70,100%,50%,0.08);

  --endcrawl-glass-perfect-icon: hsl(94.1,100%,77.3%);
  --endcrawl-glass-perfect-text: hsl(94.1,100%,77.3%);
  --endcrawl-glass-perfect-mask: hsla(94,100%,50%,0.10);

  --endcrawl-glass-over1-icon: hsl(70.5,100%,52%);
  --endcrawl-glass-over1-text: hsl(70.4,100%,77.5%);
  --endcrawl-glass-over1-mask: hsla(70,100%,50%,0.08);

  --endcrawl-glass-over2-icon: hsl(38.1,81.9%,43.3%);
  --endcrawl-glass-over2-text: hsl(38.3,100%,74.5%);
  --endcrawl-glass-over2-mask: hsla(38,100%,50%,0.10);

  --endcrawl-glass-over3-icon: hsl(22.3,84.8%,66.5%);
  --endcrawl-glass-over3-text: hsl(9.8,80%,74.5%);
  --endcrawl-glass-over3-mask: hsla(25.4,100%,50%,0.11);

  --endcrawl-glass-over4-icon: hsl(333.9,72.9%,43.3%);
  --endcrawl-glass-over4-text: hsl(333.8,100%,74.9%);
  --endcrawl-glass-over4-mask: hsla(334.5,100%,46.1%,0.20);

  /* stained glass warning and error levels */

  --endcrawl-glass-warning-icon: var(--endcrawl-glass-under2-icon);
  --endcrawl-glass-warning-text: var(--endcrawl-glass-under2-text);
  --endcrawl-glass-warning-mask: var(--endcrawl-glass-under2-mask);

  --endcrawl-glass-error-icon: var(--endcrawl-glass-over4-icon);
  --endcrawl-glass-error-text: var(--endcrawl-glass-over4-text);
  --endcrawl-glass-error-mask: var(--endcrawl-glass-over4-mask);

  /* preview pane */

  --title-safe-hue: 330;
  --title-safe-saturation: 100%;
  --title-safe-background-color: hsla(var(--title-safe-hue), var(--title-safe-saturation), 6%, 0.80);
  --title-safe-border-color: hsla(var(--title-safe-hue), var(--title-safe-saturation), 40%, 0.70);

  /* goldilocks */

  --endcrawl-number-gold-hover: 44, 80.6%, 69.1%;
  --endcrawl-number-gold-elevated: 40, 100%, 63%;

  --endcrawl-lock-gold: 44, 83.1%, 58.6%;
  --endcrawl-lock-gold-hover: 44, 100%, 63%;
  --endcrawl-lock-gold-elevated: 40, 100%, 63%;

  /* tier colors */

  --tier-color-grey: 158, 173, 181;
  --tier-color-white: 255, 255, 255;
  --tier-color-cyan: var(--endcrawl-cyan);
  --tier-color-magenta: var(--endcrawl-magenta);
  --tier-color-gold: var(--endcrawl-gold);

  --tier-color--1: var(--tier-color-grey);
  --tier-color-0:  var(--tier-color-white);
  --tier-color-1:  var(--tier-color-white);
  --tier-color-2:  var(--tier-color-grey);
  --tier-color-3:  var(--tier-color-cyan);
  --tier-color-4:  var(--tier-color-magenta);
  --tier-color-5:  var(--tier-color-gold);

  /* svg exports of hs-caret-down : https://fortawesome.com/kits/753fd89a/icons/1209121 */

  --caret-dimmed: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1008 1008"><polygon points="504.26 756 755.74 315 252.26 315 504.26 756" fill="rgba(199, 202, 203, 1.0)"/></svg>');
  --caret-active: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1008 1008"><polygon points="504.26 756 755.74 315 252.26 315 504.26 756" fill="rgba(255, 255, 255, 1.0)"/></svg>');
}