.bg {
	background-color: white;

	@media (prefers-color-scheme: dark) {
		background-color: #043a26;
	}

	&-primary {
		background-color: var(--color-primary, #71b5f8);

		@media (prefers-color-scheme: dark) {
			background-color: #043a26;
		}
	}

	&-secondary {
		background-color: var(--color-secondary, #ffd350);

		@media (prefers-color-scheme: dark) {
			background-color: #0b4932;
		}
	}

	&-accent {
		background-color: var(--color-accent, #ffa042);

		@media (prefers-color-scheme: dark) {
			background-color: #043a26;
		}
	}

	&-alert {
		background-color: var(--color-alert, #f64200);
	}

	&-coral {
		background-color: var(--color-coral, coral);
	}

	&-ocean {
		background-color: #cfe3e2;

		@media (prefers-color-scheme: dark) {
			background-color: #043a26;
		}

		code {
			background-color: #b0d4d3;

			@media (prefers-color-scheme: dark) {
				color: #2a7a7b;
				background-color: #03271f;
			}
		}
	}
}

.text {
	color: var(--color-text, #3b3b3b);

	&-white {
		color: white;

		@media (prefers-color-scheme: dark) {
			color: rgb(88, 141, 48);
		}
	}

	&-black {
		color: var(--color-black, #1b1b1b);

		@media (prefers-color-scheme: dark) {
			color: rgb(88, 141, 48);
		}
	}

	&-primary {
		color: var(--color-primary, #71b5f8);
	}

	&-secondary {
		color: var(--color-secondary, #eec13b);
	}

	&-accent {
		color: var(--color-accent, #ffa042);
	}

	&-accent-text {
		color: var(--color-accent-text, #cf8234);
	}

	&-alert {
		color: var(--color-alert, #f64200);

		@media (prefers-color-scheme: dark) {
			color: rgb(88, 141, 48);
		}
	}

	&-coral {
		color: var(--color-coral, coral);
	}

	&-ocean {
		color: #cfe3e2;
	}
}