/* CSS Variables */
:root {
	--dark-shade0: #000000;
	--dark-shade0-rgb: 0, 0, 0;
  --dark-shade1: #232526;
	--dark-shade1-rgb: 35, 37, 38;
	--dark-shade2: #323538;
	--dark-shade2-rgb: 50, 53, 56;
  --button-gradient-light: #bfaeac;
	--button-gradient-light-rgb: 191, 174, 172, 0.4;
	--text-faint-red: #bfaeac;
	

	--error-bg:	#f7c5c5;
  --error-text: #b60000;
  --light-red: #ffe3e3;
  --green: #8bc53f;
  --light-green: #f0ffdc;
  --gray-shade1: #f8f8f8;
  --gray-shade2: #e7e7e7;
  --gray-shade3: #dbdbdb;
  --gray-shade4: #bebebe;
  --gray-shade5: #919191;
  --gray-shade6: #616161;
  --gray-shade7: #4a4a4a;
  --gray-shade8: #1b1b1b;
}

/* gradients */
.gradient-135-40 {
  background: rgb(50, 53, 56);
  background-image: linear-gradient(
    120deg,
		rgba(var(--dark-shade2-rgb), 0.4) 0%,
    rgba(var(--button-gradient-light-rgb)) 100%
  );
}
.gradient-135 {
  background: rgb(50, 53, 56);
  background: linear-gradient(
    120deg,
		var(--dark-shade2) 0%,
    var(--button-gradient-light) 100%
  );
}

/* site colours */
.dark-shade1 {
	color: var(--dark-shade1);
}
.dark-shade1-bg {
	background: var(--dark-shade1);
}
.dark-shade2 {
	color: var(--dark-shade2);
}
.dark-shade2-bg {
	background: var(--dark-shade2);
}


/* grays - lightest to darkest */
.gray-shade1 {
  color: var(--gray-shade1) !important;
}
.gray-shade1-bg {
  background-color: var(--gray-shade1) !important;
}
.gray-shade2 {
  color: var(--gray-shade2) !important;
}
.gray-shade2-bg {
  background-color: var(--gray-shade2) !important;
}
.gray-shade3 {
  color: var(--gray-shade3) !important;
}
.gray-shade3-bg {
  background-color: var(--gray-shade3) !important;
}
.gray-shade4 {
  color: var(--gray-shade4) !important;
}
.gray-shade5 {
  color: var(--gray-shade5) !important;
}
.gray-shade6 {
  color: var(--gray-shade6) !important;
}
.gray-shade7 {
  color: var(--gray-shade7) !important;
}