:root {
  --colorBlack: #000;

  --colorGray: hsl(214, 7%, 70%);
  --colorDarkGray: hsl(214, 7%, 50%);

  --colorGrayA01: hsla(214, 14%, 58%, 0.1);
  --colorGrayA02: hsla(214, 14%, 58%, 0.2);
  --colorGrayA03: hsla(214, 14%, 58%, 0.25);

  --colorGray01: hsl(214, 14%, 96%);
  --colorGray02: hsl(214, 21%, 92%);

  --colorBlue: hsl(214, 84%, 56%);
  --colorDarkBlue: hsl(214, 75%, 48%);
  --colorDarkBlue02: hsl(214, 82%, 41%);

  --colorRed: hsl(340, 82%, 52%);
  --colorDarkRed: hsl(340, 80%, 45%);
  --colorDarkRed02: hsl(340, 80%, 48%);

  --colorGreen: #4ac389;

  --brandPeachy: #f9c1c0;
  --brandYellow: #f9d212;
  --brandPurple: #3a0074;
  --brandGreen: #22dc6c;
  --brandPink: #ff4d5b;

  --borderColor: var(--colorGrayA03);
}

.c-gray {
  color: var(--colorDarkGray);
}

.c-black {
  color: var(--colorBlack);
}

.c-white {
  color: #fff;
}

.c-green {
  color: var(--colorGreen);
}

.c-red {
  color: var(--colorRed);
}

.c-blue {
  color: var(--colorBlue);
}

.c-darkblue {
  color: var(--colorDarkBlue);
}

.bg-white {
  background-color: #fff;
}

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

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

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

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

.brand01 {
  color: var(--brandPeachy);
  background: var(--brandPurple);
}

.brand02 {
  color: var(--brandPurple);
  background: var(--brandPink);
}

.brand03 {
  color: var(--brandPurple);
  background: var(--brandGreen);
}

.brand04 {
  color: var(--brandPink);
  background: var(--brandYellow);
}

.mark--orange {
  color: hsl(25, 70%, 35%);
  background: hsla(25, 100%, 70%, 0.25);
}
.mark--gray {
  color: hsl(0, 0%, 20%);
  background: hsla(0, 0%, 70%, 0.25);
}
.mark--blue {
  color: hsl(210, 80%, 40%);
  background: hsla(210, 80%, 70%, 0.25);
}
.mark--green {
  color: hsl(170, 80%, 20%);
  background: hsla(170, 80%, 40%, 0.25);
}
.mark--yellow {
  color: hsl(45, 100%, 40%);
  background: hsla(50, 100%, 50%, 0.25);
}
.mark--red {
  color: hsl(340, 82%, 52%);
  background: hsla(340, 80%, 70%, 0.25);
}