.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 }