:root {
  /* HSL values for pure greyscale, in 5% increments */
  --greyscale-0: hsl(0, 0%, 0%);
  --greyscale-5: hsl(0, 0%, 5%);
  --greyscale-10: hsl(0, 0%, 10%);
  --greyscale-15: hsl(0, 0%, 15%);
  --greyscale-20: hsl(0, 0%, 20%);
  --greyscale-25: hsl(0, 0%, 25%);
  --greyscale-30: hsl(0, 0%, 30%);
  --greyscale-35: hsl(0, 0%, 35%);
  --greyscale-40: hsl(0, 0%, 40%);
  --greyscale-45: hsl(0, 0%, 45%);
  --greyscale-50: hsl(0, 0%, 50%);
  --greyscale-55: hsl(0, 0%, 55%);
  --greyscale-60: hsl(0, 0%, 60%);
  --greyscale-65: hsl(0, 0%, 65%);
  --greyscale-70: hsl(0, 0%, 70%);
  --greyscale-75: hsl(0, 0%, 75%);
  --greyscale-80: hsl(0, 0%, 80%);
  --greyscale-85: hsl(0, 0%, 85%);
  --greyscale-90: hsl(0, 0%, 90%);
  --greyscale-95: hsl(0, 0%, 95%);
  --greyscale-100: hsl(0, 0%, 100%);

  --background-color: hsl(190, 100%, 10%);
  --background-color-2: hsl(190, 80%, 15%);
  --background-color-3: hsl(195, 15%, 40%);
  --text-color: hsl(180, 5%, 76%);
  --yellow-color: hsl(45, 100%, 35%);
  --orange-color: hsl(20, 80%, 45%);
  --red-color: hsl(0, 70%, 50%);
  --magenta-color: hsl(330, 65%, 50%);
  --violet-color: hsl(235, 45%, 60%);
  --blue-color: hsl(205, 70%, 50%);
  --cyan-color: hsl(175, 60%, 40%);
  --green-color: hsl(70, 100%, 30%);
  --green-dark-color: hsl(145, 65%, 30%);
  --blue-dark-color: hsl(200, 70%, 50%);
  --blue-light-color: hsl(195, 85%, 65%);
  --purple-color: hsl(300, 100%, 25%);
  --purple-dark-color: hsl(235, 45%, 60%);
  --purple-light-color: hsl(235, 30%, 60%);
  --black-color: hsl(190, 100%, 10%);
  --gray-dark-color: hsl(0, 0%, 30%);
  --gray-color: hsl(0, 0%, 50%);
  --gray-light-color: hsl(0, 0%, 90%);
  --white-color: hsl(0, 0%, 95%);
  --highlight-color: hsl(140, 75%, 40%);
  --blue-dark-color-darken-20: hsl(200, 70%, 30%);
  --gray-color-lighten-5: hsl(0, 0%, 35%);
  --gray-light-color-lighten-20: hsl(0, 0%, 55%);
  --gray-dark-color-lighten-5: hsl(0, 0%, 35%);
  --gray-dark-color-lighten-10: hsl(0, 0%, 40%);
  --black-color-lighten-5: hsl(0, 0%, 25%);
  --orange-color-fade-70: hsl(30, 85%, 60%);
  --gray-dark-color-fade-50: hsla(0, 0%, 30%, 0.5);
  --white-color-fade-40: hsla(0, 0%, 95%, 0.4);
  --white-color-fade-70: hsla(0, 0%, 95%, 0.7);
  --purple-dark-color-fade-40: hsl(270, 70%, 60%);
  --purple-dark-color-fade-0: hsl(270, 70%, 60%);
  --black-color-fade-70: hsla(0, 0%, 20%, 0.7);
  --chart-background-color: hsl(190, 100%, 10%);
  --chart-weekend-background-color: hsl(190, 80%, 15%);
  --chart-line-color: hsl(195, 15%, 40%);
  --chart-line-color-2: hsl(195, 15%, 25%);
  --chart-line-color-2: hsl(195, 15%, 20%);
  --timebar-border: 1px solid transparent;
  --timebar-background-color: hsl(190, 80%, 15%);
  --timebar-hover-background-color: hsl(190, 100%, 10%);
  --timebar-hover-text-color: hsl(0, 0%, 95%);
  --button-darken-color: hsl(0, 0%, 35%);
  --button-disabled-color: hsl(195, 15%, 40%);
  --controller-text-color: hsl(190, 80%, 15%);
  --controller-selected-text-color: hsl(0, 0%, 95%);
  --controller-hover-text-color: hsl(0, 0%, 95%);
  --controller-hover-background-color: hsl(190, 80%, 15%);
  --controller-background-color: hsl(195, 15%, 40%);
  --collapse-background-color: hsl(190, 80%, 15%);
  --cursor-background-color: hsl(205, 70%, 50%);
  --cursor-border-style: 1px solid transparent;
  --cursor-text-color: hsl(45, 40%, 90%);
  --menu-background-hover-color: hsl(190, 80%, 15%);
  --menu-text-hover-color: hsl(45, 40%, 90%);
  --menu-selected-background-hover-color: hsl(205, 70%, 50%);
  --menu-selected-text-hover-color: hsl(45, 40%, 90%);
  --dropdown-background-color: hsl(190, 80%, 15%);
  --dropdown-background-hover-color: hsl(190, 100%, 10%);
  --dropdown-text-color: hsl(180, 5%, 76%);
  --dropdown-text-hover-color: hsl(45, 40%, 90%);
  --dropdown-selected-background-color: hsl(205, 70%, 50%);
  --dropdown-selected-text-color: hsl(45, 40%, 90%);
  --regions-header-color: hsl(45, 100%, 35%);
  --parameters-header-color: hsl(70, 100%, 30%);
  --scrollbar-track-color: hsl(190, 100%, 10%);
  --scrollbar-thumb-color: hsl(190, 80%, 15%);
  --scrollbar-thumb-active-color: hsl(190, 65%, 20%);
  --scrollbar-thumb-hover-color: hsl(195, 15%, 40%);
  --scrollbar-track-shadow: inset 0 0 10px hsla(0, 0%, 0%, 0.33);
  --popup-background-color: hsl(190, 80%, 15%);
  --popup-text-color: hsl(185, 10%, 55%);
  --popup-input-shadow: hsl(0, 0%, 40%);
  --blog-background-color: hsl(190, 80%, 15%);
  --blog-background-color-2: hsl(190, 100%, 10%);
  --blog-nav-background-color: hsl(190, 100%, 10%);
  --blog-text-color: hsl(180, 5%, 76%);
  --forecaster-chat-text-color: hsl(180, 5%, 60%);
  --forecaster-chat-status-color: hsl(180, 5%, 60%);
  --matrix-controller-th-text-color: hsl(45, 40%, 90%);

  /* modern colors - general */
  --modern-dark-blue: hsl(190, 100%, 10%);
  --modern-light-grey: hsl(0, 0%, 90%);
  --modern-medium-grey: hsl(0, 0%, 60%);
  --modern-red: hsl(3, 65%, 48%);
  --modern-yellow: hsl(45, 100%, 35%);
  --modern-blue: hsl(200, 80%, 60%);
  --modern-purple: hsl(270, 70%, 55%);
  --modern-magenta: hsl(330, 60%, 50%);
  --modern-cyan: hsl(180, 75%, 40%);
  --modern-green: hsl(140, 85%, 40%);
  --modern-light-green: hsl(95, 50%, 95%);
  --modern-metdesk-cyan: hsl(200, 70%, 70%);
  --modern-metdesk-orange: hsl(30, 90%, 55%);
  --modern-warm-fill: hsla(0, 100%, 65%, 0.7);
  --modern-cool-fill: hsla(200, 80%, 60%, 0.7);

  /* modern colors - light theme */
  --modern-text-color: hsl(190, 100%, 10%);
  --modern-text-color-secondary: hsl(190, 100%, 25%);
  --modern-text-color-highlighted: hsl(190, 100%, 10%); /* --modern-text-color */
  --modern-background-color-primary: hsl(0, 0%, 95%);
  --modern-background-color-secondary: hsl(0, 0%, 85%);
  --modern-background-color-highlighted: hsl(190, 100%, 20%);
  --modern-border-color: hsl(190, 100%, 10%); /* --modern-text-color */
}