:root {
  --primary-h: 97;
  --primary-l: 41%;

  --brand-primary: hsl(var(--primary-h), 50%, var(--primary-l));
  --brand-primary-darker: hsl(var(--primary-h), 50%, 36%);
  
  --black-h: 0;
  --black-s: 0%;
  --black-l: 0%;
}

.primary {
  display: flex;
  margin-top: 20px;

  .item {
    flex: 1 1 50px;
    height: 60px;
    background-color: hsl(var(--primary-h), 50%, var(--primary-l));
  }

  .item-1 {
    --primary-l: 15%;
  }

  .item-2 {
    --primary-l: 20%;
  }

  .item-3 {
    --primary-l: 25%;
  }

  .item-4 {
    --primary-l: 30%;
  }

  .item-5 {
    --primary-l: 35%;
  }

  .item-6 {
    --primary-l: 40%;
  }

  .item-7 {
    --primary-l: 45%;
  }

  .item-8 {
    --primary-l: 50%;
  }

  .item-9 {
    --primary-l: 55%;
  }

  .item-10 {
    --primary-l: 60%;
  }
}

body {
  padding: 1rem;
  font-family: "Roboto";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.row {
  margin-bottom: 2rem;
}

.slider {
  max-width: 500px;
  margin: 1rem auto;
  
  label {
    display: block;
    margin-bottom: 0.5rem;
  }
  
  input {
    width: 100%;
  }
}

let slider = document.querySelector('#shade');

slider.value = 97;

slider.addEventListener('input', function(){
  console.log(this.value);
  document.documentElement.style.setProperty('--primary-h', this.value)
});