[css-color-adjust-1] Rework color scheme stuff to reflect f2f resolutions

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

@@ -2780,7 +2780,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
@@ -2799,23 +2799,19 @@ 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''.
-	The none keyword 
-	produces a fully transparent image 
-	with no natural size. 
+	if the <a>element color scheme</a> is ''dark''.
 
-	It is equivalent to a single-stop gradient whose stop color is ''transparent''':
-
-	<pre class="lang-css">
-		linear-gradient(transparent)
-	</pre>
+	The <dfn value for="light-dark()">none</dfn> keyword
+	produces a [=transparent black=] image
+	with no natural size.
+	<span class=note>Equivalent to ''linear-gradient(transparent)''.</span>
 
 	<div class="example" id="ex-light-dark-color">
 		For example, to maintain a legible contrast on links,
@@ -2837,35 +2833,35 @@ 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>
-		</div>
+		<pre class="lang-css">
+			background-image: light-dark(url(my-light-image.png), none);
+		</pre>
+	</div>