.black-flat {
  background-color: #000000;
}
.black-flat .secondary-bg {
  background-color: #27224f;
}
.black-flat .accent-bg {
  background-color: #4736ca;
}
.black-flat .primary-color {
  color: #ffffff;
}
.black-flat .secondary-color {
  color: #e0ddf6;
}
.black-flat .svg-fill {
  fill: #ffffff;
}

.black-gradient {
  background: linear-gradient(#27224f, #000000);
}
.black-gradient .secondary-bg {
  background-color: #27224f;
}
.black-gradient .accent-bg {
  background-color: #4736ca;
}
.black-gradient .primary-color {
  color: #ffffff;
}
.black-gradient .secondary-color {
  color: #e0ddf6;
}
.black-gradient .svg-fill {
  fill: #ffffff;
}

.black-accent {
  background-color: #4736ca;
}
.black-accent .secondary-bg {
  background-color: #27224f;
}
.black-accent .accent-bg {
  background-color: #000000;
}
.black-accent .primary-color {
  color: #ffffff;
}
.black-accent .secondary-color {
  color: #e9fefc;
}
.black-accent .svg-fill {
  fill: #ffffff;
}

.black-black {
  background-color: #27224f;
}
.black-black .secondary-bg {
  background-color: #000000;
}
.black-black .accent-bg {
  background-color: #4736ca;
}
.black-black .primary-color {
  color: #ffffff;
}
.black-black .secondary-color {
  color: #f0f0f0;
}
.black-black .svg-fill {
  fill: #ffffff;
}

.black-white {
  background-color: #ffffff;
}
.black-white .secondary-bg {
  background-color: #e0ddf6;
}
.black-white .accent-bg {
  background-color: #4736ca;
}
.black-white .primary-color {
  color: #000000;
}
.black-white .secondary-color {
  color: #8f8f8f;
}
.black-white .svg-fill {
  fill: #4736ca;
}

.avocado-flat {
  background-color: #3aafa2;
}
.avocado-flat .secondary-bg {
  background-color: #1b7068;
}
.avocado-flat .accent-bg {
  background-color: #353740;
}
.avocado-flat .primary-color {
  color: #ffffff;
}
.avocado-flat .secondary-color {
  color: #e4f4f2;
}
.avocado-flat .svg-fill {
  fill: #ffffff;
}

.avocado-gradient {
  background: linear-gradient(#1b7068, #3aafa2);
}
.avocado-gradient .secondary-bg {
  background-color: #1b7068;
}
.avocado-gradient .accent-bg {
  background-color: #353740;
}
.avocado-gradient .primary-color {
  color: #ffffff;
}
.avocado-gradient .secondary-color {
  color: #e4f4f2;
}
.avocado-gradient .svg-fill {
  fill: #ffffff;
}

.avocado-accent {
  background-color: #353740;
}
.avocado-accent .secondary-bg {
  background-color: #1b7068;
}
.avocado-accent .accent-bg {
  background-color: #3aafa2;
}
.avocado-accent .primary-color {
  color: #ffffff;
}
.avocado-accent .secondary-color {
  color: #e1e1e2;
}
.avocado-accent .svg-fill {
  fill: #ffffff;
}

.avocado-black {
  background-color: #1b7068;
}
.avocado-black .secondary-bg {
  background-color: #3aafa2;
}
.avocado-black .accent-bg {
  background-color: #353740;
}
.avocado-black .primary-color {
  color: #ffffff;
}
.avocado-black .secondary-color {
  color: #ddeae9;
}
.avocado-black .svg-fill {
  fill: #ffffff;
}

.avocado-white {
  background-color: #ffffff;
}
.avocado-white .secondary-bg {
  background-color: #e4f4f2;
}
.avocado-white .accent-bg {
  background-color: #353740;
}
.avocado-white .primary-color {
  color: #000000;
}
.avocado-white .secondary-color {
  color: #8f8f8f;
}
.avocado-white .svg-fill {
  fill: #3aafa2;
}