@layer utilities {
	.design-system {
		.surface-red {
			background: var(--red-1);
			/* color: text-red  */
			/* border-red-4; */
			--text-secondary: var(--text-red-secondary);
			--text-tertiary: var(--text-red-tertiary);
			--text-quaternary: var(--text-red-quaternary);

			&:where(.dark-mode *) {
				background: var(--red-13);
			}
		}

		.surface-red-subtle {
			color: var(--black);
			background: var(--red-2);
			--text-secondary: var(--text-secondary);
			--text-tertiary: var(--text-tertiary);
			--text-quaternary: var(--text-quaternary);

			&:where(.dark-mode *) {
				background: var(--red-12);
			}
		}

		.surface-red-accent {
			background: var(--red-8);
			--text-secondary: var(--text-inverted-secondary);
			--text-tertiary: var(--text-inverted-tertiary);
			--text-quaternary: var(--text-inverted-quaternary);

			&:where(.dark-mode *) {
				background: var(--red-8);
			}
		}

		.surface-orange {
			background: var(--orange-1);
			/* text-orange-11; */
			--text-secondary: var(--text-orange-7a);
			--text-tertiary: var(--text-orange-5a);
			--text-quaternary: var(--text-orange-quaternary);

			&:where(.dark-mode *) {
				background: var(--orange-13);
			}
		}

		.surface-orange-subtle {
			/* text-black  */
			background: var(--orange-2);
			--text-secondary: var(--text-secondary);
			--text-tertiary: var(--text-tertiary);
			--text-quaternary: var(--text-quaternary);

			&:where(.dark-mode *) {
				background: var(--orange-12);
			}
		}

		.surface-orange-accent {
			background: var(--orange-8);
			--text-secondary: var(--text-inverted-secondary);
			--text-tertiary: var(--text-inverted-tertiary);
			--text-quaternary: var(--text-inverted-quaternary);

			&:where(.dark-mode *) {
				background: var(--orange-8);
			}
		}

		.surface-green {
			background: var(--green-1);
			color: var(--green-11);
			--text-secondary: var(--green-7a);
			--text-tertiary: var(--green-5a);

			&:where(.dark-mode *) {
				background: var(--green-13);
			}
		}

		.surface-green-subtle {
			/* text-black  */
			background: var(--green-2);
			--text-secondary: var(--text-secondary);
			--text-tertiary: var(--text-tertiary);
			--text-quaternary: var(--text-quaternary);

			&:where(.dark-mode *) {
				background: var(--green-12);
			}
		}

		.surface-green-accent {
			background: var(--green-8);
			--text-secondary: var(--text-inverted-secondary);
			--text-tertiary: var(--text-inverted-tertiary);
			--text-quaternary: var(--text-inverted-quaternary);

			&:where(.dark-mode *) {
				background: var(--green-8);
			}
		}

		.surface-blue {
			background: var(--blue-1);
			color: var(--blue-11);
			--text-secondary: var(--blue-7a);
			--text-tertiary: var(--blue-5a);

			&:where(.dark-mode *) {
				background: var(--blue-13);
			}
		}

		.surface-blue-subtle {
			/* text-black  */
			background: var(--blue-2);
			--text-secondary: var(--text-secondary);
			--text-tertiary: var(--text-tertiary);
			--text-quaternary: var(--text-quaternary);

			&:where(.dark-mode *) {
				background: var(--blue-12);
			}
		}

		.surface-blue-accent {
			background: var(--blue-8);
			--text-secondary: var(--text-inverted-secondary);
			--text-tertiary: var(--text-inverted-tertiary);
			--text-quaternary: var(--text-inverted-quaternary);

			&:where(.dark-mode *) {
				background: var(--blue-8);
			}
		}
	}
}