[css-variables] Finish the commit from earlier, adding a clarifying example to how case-sensitivity of the var-* properties works.

--HG--
extra : rebase_source : 1cf5766946582e869c250b1151684e63e8af1c5d

Author: tabatkins

css-variables/Overview.html

@@ -304,13 +304,13 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Custom
    be written in lower-case.
 
   <div class=example> For example, ‘<code class=css>VAR-FOO</code>’ is
-   invalid, For example, ‘<code class=css>var-foo</code>’ and ‘<code
-   class=css>VAR-foo</code>’ are treated as the same property, because the
-   CSS-defined part of the name (the "var-" prefix) is matched
-   case-insensitively, consistent with the rest of CSS. However, ‘<code
-   class=css>var-foo</code>’ and ‘<code class=css>var-FOO</code>’ are
-   treated as different properties, because the author-defined part of the
-   name is matched case-sensitively.</div>
+   invalid, because the prefix isn't "var-".
+   <p> While both ‘<code class=css>var-foo</code>’ and ‘<code
+    class=css>var-FOO</code>’ are valid, they are distinct properties -
+    using ‘<code class=css>var(foo)</code>’ will refer to the first one,
+    while using ‘<code class=css>var(FOO)</code>’ will refer to the
+    second.
+  </div>
 
   <p> <a href="#custom-property"><i>Custom properties</i></a> have an
    extremely permissive value grammar, defined as the "value" production in

css-variables/Overview.src.html

@@ -155,15 +155,13 @@ <h2 id="defining-variables">
 
 	<div class='example'>
 		For example, ''VAR-FOO'' is invalid,
-		
-		For example, ''var-foo'' and ''VAR-foo'' are treated as the same property,
-		because the CSS-defined part of the name
-		(the "var-" prefix)
-		is matched case-insensitively,
-		consistent with the rest of CSS.
-		However, ''var-foo'' and ''var-FOO'' are treated as different properties,
-		because the author-defined part of the name
-		is matched case-sensitively.
+		because the prefix isn't "var-".
+
+		<p>
+			While both ''var-foo'' and ''var-FOO'' are valid,
+			they are distinct properties - 
+			using ''var(foo)'' will refer to the first one,
+			while using ''var(FOO)'' will refer to the second.
 	</div>
 
 	<p>