[css-color-adjust-1] Rework color scheme stuff to reflect f2f resolutions (#13857)

* [css-color-adjust-1] Rework the color-scheme section to use the concepts of 'page color scheme' and 'element color scheme', deferring as much as possible to the page color scheme, in preparation for adjusting the behavior of the MQ. #13377

* [css-color-adjust-1] Move and fix up examples. #13377

* [css-color-adjust-1][mediaqueries-5] Specify that *all* embedded documents use the embedding element's color scheme. #7213 #7493

* [mediaqueries-5] Switch (prefers-color-scheme) to use the page color scheme. Add (ua-color-scheme) to reflect the user's actual preference. #13377

* [css-color-4][css-color-5] Use the new correct term for an element's color scheme.

* [css-color-5][editorial] Fix indentation.

* ws

Author: tabatkins

css-color-4/Overview.bs

@@ -1927,7 +1927,7 @@ System Colors</h3>
 
 	To maintain legibility,
 	the <<system-color>> keywords also respond to
-	the [=used color scheme=].
+	the [=element color scheme=].
 
 
 	<div class="example" id="ex-LM-DM-links">

css-color-5/Overview.bs

@@ -2781,7 +2781,7 @@ or any other color or monochrome output device which has been characterized.
 	Reacting to the used color-scheme: the ''light-dark()'' Function
 </h2>
 
-	System colors have the ability to react to the current used ''color-scheme'' value.
+	[=System colors=] have the ability to react to an element's [=color scheme=].
 	The ''light-dark()'' function exposes the same capability to authors.
 
 	There are two forms of this function: one takes a pair of colors
@@ -2800,14 +2800,14 @@ or any other color or monochrome output device which has been characterized.
 	</pre>
 
 	For the color form, this function computes to the computed value of the first color,
-	if the <a>used color scheme</a> is ''light'' or unknown,
+	if the <a>element color scheme</a> is ''light'',
 	or to the computed value of the second color,
-	if the <a>used color scheme</a> is ''dark''.
+	if the <a>element color scheme</a> is ''dark''.
 
 	For the image form, this function returns the first image,
-	if the <a>used color scheme</a> is ''light'' or unknown,
+	if the <a>element color scheme</a> is ''light'',
 	or the second image,
-	if the <a>used color scheme</a> is ''dark''.
+	if the <a>element color scheme</a> is ''dark''.
 
 	The <dfn value for="light-dark()">none</dfn> keyword 
 	computes to ''image(transparent)''
@@ -2833,41 +2833,41 @@ or any other color or monochrome output device which has been characterized.
 		is used in dark mode.
 		(WCAG contrast 13.28:1, AAA pass).
 
-			<div style="margin:1em; margin-left: 2em; text-decoration: underline; background: inherit">
-			<p style="padding: 4px; background-color: white; color: blue"> Legible link text</p>
-			<p style="padding: 4px; background-color: black; color: blue"> Illegible link text</p>
-			<p style="padding: 4px; background-color: black; color: #81D9FE"> Legible link text</p>
-			</div>
+		<div style="margin:1em; margin-left: 2em; text-decoration: underline; background: inherit">
+		<p style="padding: 4px; background-color: white; color: blue"> Legible link text</p>
+		<p style="padding: 4px; background-color: black; color: blue"> Illegible link text</p>
+		<p style="padding: 4px; background-color: black; color: #81D9FE"> Legible link text</p>
 		</div>
+	</div>
 
-		<div class="example" id="ex-light-dark-image">
-			For example, to provide easily visible list bullets
-			for light mode and dark mode:
+	<div class="example" id="ex-light-dark-image">
+		For example, to provide easily visible list bullets
+		for light mode and dark mode:
 
-			<pre class="lang-css">
-			ul.fancy {
-			    list-style-image: light-dark(
-					url("icons/deep-maroon-ball.png"),
-					url("icons/pale-yellow-star.png")
-				);
-			}
-		</pre>
-		</div>
+		<pre class="lang-css">
+		ul.fancy {
+			list-style-image: light-dark(
+				url("icons/deep-maroon-ball.png"),
+				url("icons/pale-yellow-star.png")
+			);
+		}
+	</pre>
+	</div>
 
-		<div class="example" id="ex-light-dark-none">
-			For example, a raster image is used in light mode, 
-			while in dark mode we want a fully-transparent image. 
+	<div class="example" id="ex-light-dark-none">
+		For example, a raster image is used in light mode,
+		while in dark mode we want a fully-transparent image.
 
-			<pre class="lang-css">
-				background-image: light-dark(url(my-light-image.png), none);
-			</pre>
+		<pre class="lang-css">
+			background-image: light-dark(url(my-light-image.png), none);
+		</pre>
 
-			This is equivalent to:
+		This is equivalent to:
 
-			<pre class="lang-css">
-				background-image: light-dark(url(my-light-image.png), image(transparent));
-			</pre>
-		</div>
+		<pre class="lang-css">
+			background-image: light-dark(url(my-light-image.png), image(transparent));
+		<pre>
+	</div>