:root {
  /* Dark Palette */
  --dark-purple: #3d1152;
  --dark-blue: #00293e;
  --slate: #202020;

  /* Bright Palette */
  --bright-orange: #ff4e27;
  --bright-yellow: #ffb701;
  --bright-green: #b6d441;
  --bright-blue: #58dfea;

  /* Neutrals */
  --dark-neutral: #cfc1b4;
  --medium-neutral: #eae5e0;
  --light-neutral: #f7f5f3;
  --white: #ffffff;
  --black: #000000;

  /* Form */
  --red-error: #c22400;
  --green-sucess: #00703c;
  --text-green: #00703c;
}

/* Background variables */
.bg-purple {
  background-color: var(--dark-purple);
}

.bg-yellow {
  background-color: var(--bright-yellow);
}

.bg-slate {
  background-color: var(--slate);
}

.bg-light-gray,
.bg-light-grey,
.bg-light-gray-mobile,
.bg-light-grey-mobile {
  background-color: var(--light-neutral);
}

@media screen and (min-width: 640px) {
  .bg-light-gray-mobile,
  .bg-light-grey-mobile {
    background-color: transparent;
  }
}

.bg-medium-gray,
.bg-medium-grey {
  background-color: var(--medium-neutral);
}

.bg-dark-gray,
.bg-dark-grey {
  background-color: var(--dark-neutral);
}

.bg-white {
  background-color: var(--white);
}

/* Text colors */
.text-purple {
  color: var(--dark-purple);
}

.text-yellow {
  color: var(--bright-yellow);
}

.text-slate {
  color: var(--slate);
}

.text-white {
  color: var(--white);
}

.text-green {
  color: var(--text-green);
}

/* Brushstroke atyling */
.brushstroke {
  position: relative;
}

.brushstroke::after {
  position: absolute;
  content: url(../../images/icons/brushstroke.svg);
  bottom: -22px;
  left: 0;
}

.backend-options.brushstroke::after {
  left: 0;
  right: 0;
}

.brushstroke.brushstroke-red::after {
  content: url(../../images/icons/brushstroke-red.svg);
}

.brushstroke.brushstroke-small::after {
  transform: scale(0.7);
  transform-origin: left;
  left: 0;
}

h3.brushstroke::after {
  transform: scale(0.5);
  transform-origin: left;
  left: 0;
}

h4.brushstroke::after {
  transform: scale(0.4);
  transform-origin: left;
  left: 0;
}