.palette {
	display: flex;
	flex-direction: row;
	gap: $space-sm;

	.color {
		.color-box {
			width: 100px;
			height: 80px;
		}
	}
}

/* BACKGROUND COLORS */

body {
	.bg-primary {
		background: $color-primary;
	}

	.bg-secondary {
		background: $color-secondary;
	}

	.bg-success {
		background: $color-success;
	}

	.bg-accent {
		background: $color-accent;
	}

	.bg-info {
		background: $color-info;
	}

	.bg-warning {
		background: $color-warning;
	}

	.bg-error {
		background: $color-error;
	}

	/* TEXT COLORS */

	.text-color-primary {
		color: $color-primary;
	}

	.text-color-secondary {
		color: $color-secondary;
	}

	.text-color-success {
		color: $color-success;
	}

	.text-color-accent {
		color: $color-accent;
	}

	.text-color-info {
		color: $color-info;
	}

	.text-color-warning {
		color: $color-warning;
	}

	.text-color-error {
		color: $color-error;
	}
}