/* Root: CSS Variables can be used to store values that can be reused throughout the stylesheet*/
:root {
--gandhi-color-pine: hsl(125, 9%, 27%); 
  --gandhi-color-sage: hsl(96, 12%, 42%);
   --gandhi-color-dingley: hsl(75, 25.3%, 37.3%);
   --gandhi-color-turtle-green: hsl(75.8, 45.2%, 16.5%);
  --gandhi-color-bark: hsl(23, 22%, 33%);
  --gandhi-color-linen: hsl(30, 38%, 85%);
  --gandhi-color-pistachio: hsl(92,	6%	93%);
  --gandhi-color-chrome-white: hsl(76.9,64%,90.2%);
  --gandhi-color-white: hsl(0, 0%, 100%)
}

/* Background Colors: Use the CSS Variables to set the background color of the elements */
.gandhi-bg-dingley    { background-color: var(--gandhi-color-dingley); }
.gandhi-bg-pine    { background-color: var(--gandhi-color-pine); }
.gandhi-bg-sage    { background-color: var(--gandhi-color-sage); }
.gandhi-bg-turtle-green    { background-color: var(--gandhi-color-turtle-green); }
.gandhi-bg-bark    { background-color: var(--gandhi-color-bark); }
.gandhi-bg-linen   { background-color: var(--gandhi-color-linen); }
.gandhi-bg-pistachio { background-color: var(--gandhi-color-pistachio);}
.gandhi-bg-chrome-white {background-color:var(--gandhi-color-chrome-white);}
.gandhi-bg-color-white {background-color:var(--gandhi-color-white);}

/* Border Colors: Use the CSS Variables to set the border color of the elements */
.gandhi-border-dingley  { border-color: var(--gandhi-color-dingley); }
.gandhi-border-turtle-green  { border-color: var(--gandhi-color-turtle-green); }
.gandhi-border-bark  { border-color: var(--gandhi-color-bark); }
.gandhi-border-linen { border-color: var(--gandhi-color-linen); }
.gandhi-border-chrome-white {border-color:var(--gandhi-color-chrome-white);}
.gandhi-border-color-white {border-color:var(--gandhi-color-white);}


/* Text Colors: Use the CSS Variables to set the background color of the elements */
.gandhi-text-dingley  { color: var(--gandhi-color-dingley); }
.gandhi-text-turtle-green  { color: var(--gandhi-color-turtle-green); }
.gandhi-text-bark  { color: var(--gandhi-color-bark); }
.gandhi-text-linen { color: var(--gandhi-color-linen); }
.gandhi-text-chrome-white {color:var(--gandhi-color-chrome-white);}
.gandhi-text-color-white {color:var(--gandhi-color-white);}




/* Specifc Button: Use the CSS Variables to set the background color of the button */
.gandhi-btn {
  padding: 0.5rem 1.25rem;
  background-color: var(--gandhi-color-turtle-green);
  color: var(--gandhi-color-white);
  border: none;
  border-radius: .25rem;
  font-size: 1rem;
  cursor: pointer;

/*  might want light green as text color on button */
  &:hover {
    background-color: var(--gandhi-color-sage);
  }
}