[styling-base] Move logic for adding global styles from Lumo package

[web-padawan]

Describe your motivation

There's a new logic added in #5666 to solve problems related to the order in which CSS applies:

web-components/packages/vaadin-lumo-styles/global.js

Lines 3 to 12 in bc227bd

	export const addLumoGlobalStyles = (id, ...styles) => {
	const styleTag = document.createElement('style');
	styleTag.id = `${prefix}${id}`;
	styleTag.textContent = styles
	.map((style) => style.toString())
	.join('\n')
	.replace(':host', 'html');
	document.head.insertAdjacentElement('afterbegin', styleTag);
	};

While the current implementation does the job and makes sense, there are some things to improve:

1. The fact that the logic is currently placed in @vaadin/vaadin-lumo-styles package is a bit unexpected,
2. The code uses document which might be problematic for <iframe> (embedded components etc).

Describe the solution you'd like

1. Mover this global.js package to other package, something like @vaadin/styling-base,
2. After figuring our a proper name, we could also move registerStyles() for consistency,
3. Replace document usage with window.ownerDocument to ensure proper <iframe> is used.

[web-padawan]

This was done in #5752 by moving addGlobalThemeStyles helper to @vaadin/vaadin-themable-mixin.