From c10c5c3bf28041dbb6b6ec26f7e8944cfe335bd6 Mon Sep 17 00:00:00 2001
From: Fuqiao Xue <xfq@w3.org>
Date: Tue, 5 Aug 2025 21:49:33 +0800
Subject: [PATCH 1/3] Represent colors as variables

Prepare for a dark theme.
---
 style/sitepage-2022.css | 495 +++++++++++++++++++++++-----------------
 1 file changed, 282 insertions(+), 213 deletions(-)

diff --git a/style/sitepage-2022.css b/style/sitepage-2022.css
index c4206e6d..853543db 100644
--- a/style/sitepage-2022.css
+++ b/style/sitepage-2022.css
@@ -1,3 +1,72 @@
+:root {
+    /* Primary Colors */
+    --color-primary-text: #333;
+    --color-secondary-text: #666;
+    --color-tertiary-text: #777;
+    --color-quaternary-text: #555;
+    --color-light-text: #999;
+    --color-dark-text: #222;
+    --color-black-text: #111;
+    --color-pure-black: #000;
+
+    /* Background Colors */
+    --color-bg-white: white;
+    --color-bg-transparent: transparent;
+    --color-bg-antiquewhite: antiquewhite;
+    --color-bg-bisque: bisque;
+    --color-bg-light-gray: #f5f2f0;
+    --color-bg-light-blue: #f4f4fe;
+    --color-bg-light-orange: #ffeadd;
+    --color-bg-light-yellow: #ffe;
+    --color-bg-note: #ffdccb;
+    --color-bg-note-alt: #eef;
+    --color-bg-yellow: yellow;
+    --color-bg-hover: #FFC;
+    --color-bg-gray: #cccc99;
+    --color-bg-light-gray-alt: #eee;
+
+    /* Brand Colors */
+    --color-brand-blue: #003163;
+    --color-brand-blue-alt: #4c5c9c;
+    --color-brand-teal: teal;
+    --color-brand-brown: brown;
+    --color-brand-chocolate: chocolate;
+    --color-brand-yellow: #f9c818;
+    --color-brand-orange: #E8941D;
+    --color-brand-orange-alt: #e70;
+
+    /* Link Colors */
+    --color-link-default: teal;
+    --color-link-visited: #036;
+    --color-link-visited-alt: brown;
+    --color-link-hover: #005a9c;
+    --color-link-nav: #5C7A7A;
+    --color-link-aqua: #7FFFD4;
+
+    /* Border Colors */
+    --color-border-light: #CCC;
+    --color-border-light-alt: #ccc;
+    --color-border-gray: gray;
+    --color-border-light-gray: #eee;
+    --color-border-dotted: #C66;
+
+    /* Special Colors */
+    --color-red: red;
+    --color-red-alt: #a52a2a;
+    --color-red-dark: #c30;
+    --color-red-maroon: #900;
+    --color-blue-dark: #000066;
+    --color-blue-medium: #036;
+    --color-green-medium: #5F9EA0;
+    --color-brown-medium: #C08D34;
+    --color-gray-medium: #888;
+    --color-yellow-light: #FF9;
+
+    /* Shadow Colors */
+    --color-shadow: #999;
+    --color-shadow-dark: #888;
+}
+
 @font-face {
     font-family: 'RalewayWF';
     src: url('fonts/raleway-regular-webfont.woff2') format('woff2');
@@ -40,11 +109,11 @@
 
 body {
     line-height: 1.75;
-	color: #333;
+	color: var(--color-primary-text);
 	font-weight: 400;
 	margin: 0;
 	padding: 0;
-	background-color: white;
+	background-color: var(--color-bg-white);
 	font-family: RalewayWF, Helvetica, 'Helvetica Neue', Arial, "Segoe UI", sans-serif;
 	hyphens: auto;
 	}
@@ -191,7 +260,7 @@ body.obsolete h2, body.obsolete h3 {
     }
 
 #level2toc {
-    border-inline-start: solid 3px #f9c818;
+    border-inline-start: solid 3px var(--color-brand-yellow);
     }
 
 .directory {
@@ -309,7 +378,7 @@ aside:dir(rtl) {
 	}
 #mainNavigationAside {
 	max-width: 15em;
-    background-color: antiquewhite;
+    background-color: var(--color-bg-antiquewhite);
     border-bottom-left-radius: 1em;
     padding-block-end: 1em;
     }
@@ -320,7 +389,7 @@ aside h2 {
 	text-transform: none;
 	text-align: center;
     font-weight: normal;
-    color: #333;
+    color: var(--color-primary-text);
     border: 0;
     hyphens: none;
 	}
@@ -348,18 +417,18 @@ aside li {
 
 a {
 	text-decoration: none;
-	color: teal;
+	color: var(--color-link-default);
 	}
 /*#toc a {
     color: darkslategray;
 	}*/
 a:visited {
-    color: #036;
-	color: brown;
+    color: var(--color-link-visited);
+	color: var(--color-link-visited-alt);
 	}
 a:hover {
-	color:  #005a9c;
-	background: #FFC;
+	color: var(--color-link-hover);
+	background: var(--color-bg-hover);
 	text-decoration: underline;
 	}
 	
@@ -370,7 +439,7 @@ header a {
 
 .eyecatcher, .highlightLink {
     font-size: 140%;
-    color: #E8941D;
+    color: var(--color-brand-orange);
     font-weight: 400;
     /*white-space: nowrap;*/
     }
@@ -384,7 +453,7 @@ header a {
     content: '\00A0' url(https://w3c.github.io/i18n-drafts/icons/goto_rtl.png) ' ';
     }
 .highlightLink:link, .highlightLink:visited, .highlightLink:active {
-    color: chocolate;
+    color: var(--color-brand-chocolate);
     }
 
 
@@ -423,70 +492,70 @@ header a {
 	white-space: nowrap;
 	}
 #site-navigation a:link {
-    color: #5C7A7A;
+    color: var(--color-link-nav);
 	}
 #site-navigation a:active {
-	background-color: white; 
-    color: #5C7A7A;
+	background-color: var(--color-bg-white);
+    color: var(--color-link-nav);
 	}
 #site-navigation a:visited {
-	background-color: white; 
+	background-color: var(--color-bg-white);
 	text-decoration: none;
-    color: #5C7A7A;
+    color: var(--color-link-nav);
 	}
 #site-navigation a:hover {
-	color: white;
-	background-color: #003163; 
+	color: var(--color-bg-white);
+	background-color: var(--color-brand-blue);
 	border-radius: 3px;
 	text-decoration: none;
 	}
 
 
 #disclaimer {
-	font-size: 80%; 
-	line-height: 1em; 
-	background-color: transparent; 
+	font-size: 80%;
+	line-height: 1em;
+	background-color: var(--color-bg-transparent);
 	}
 #disclaimer p {
-	font-size: 115%; 
+	font-size: 115%;
 	line-height: 1.2em;
-    color: brown;
+    color: var(--color-brand-brown);
     margin-block-start: 2rem;
 	margin-inline-start: 0;
-	margin-inline-end: 2rem; 
+	margin-inline-end: 2rem;
 	}
 
 
 #search {
 	}
 #searchField {
-	background-color: #C08D34; 
-	background-color: #5F9EA0;
+	background-color: var(--color-brown-medium);
+	background-color: var(--color-green-medium);
 	border: 0;
 	margin-inline-end: 5px;
 	}
 #searchSite {
-	background-color: teal;
-	color: #7FFFD4;
+	background-color: var(--color-brand-teal);
+	color: var(--color-link-aqua);
 	font-size: 80%;
 	padding: 0px 5px 0px 5px;
 	border-radius: 5px;
 	margin-inline-end:10px;
 	}
 #searchSite input {
-	width:100%; 
-	/*background-image: url(/International/style/search.png); 
-	background-position: left; 
-	background-repeat: no-repeat; 
-	padding-inline-start:18px; 
+	width:100%;
+	/*background-image: url(/International/style/search.png);
+	background-position: left;
+	background-repeat: no-repeat;
+	padding-inline-start:18px;
 	color:#7fffd4; */
-	background-color:teal;
+	background-color: var(--color-brand-teal);
 	cursor:pointer;
     height: 2em;
-    color: white;
+    color: var(--color-bg-white);
 	}
 #searchSite input::placeholder {
-    color: white;
+    color: var(--color-bg-white);
     opacity: .9;
     }
 
@@ -555,20 +624,20 @@ header a {
 	}
 #siteicons a:hover {
 	text-decoration: none;
-	background-color: #003163;
-	color: white;
+	background-color: var(--color-brand-blue);
+	color: var(--color-bg-white);
 	}
 #sitename {
     font-size: 22px;
-    border-bottom: 2px solid brown;
-    color: #4c5c9c;
+    border-bottom: 2px solid var(--color-brand-brown);
+    color: var(--color-brand-blue-alt);
     margin: 0;
     }
 #subtitle {
     margin:0;
     font-size:12px;
     font-style:italic;
-    color: #4c5c9c;
+    color: var(--color-brand-blue-alt);
     }
 #subtitle:lang(ja), #subtitle:lang(ko), #subtitle:lang(zh), #subtitle:lang(hi), #subtitle:lang(ar) {
     font-style: normal;
@@ -585,11 +654,11 @@ header a {
 	padding-inline-start: 0.75em;
 	}
 #sitelinks a:hover {
-	color: #005a9c;
+	color: var(--color-link-hover);
 	text-decoration: none;
 	}
 #sitelinks a:visited {
-	color: teal;
+	color: var(--color-brand-teal);
 	text-decoration: none;
 	}
 	
@@ -598,7 +667,7 @@ header a {
 /* ************** headings **************** */
 
 h1 {
-	background-color: white;
+	background-color: var(--color-bg-white);
 	padding: 5px;
 	padding-inline-start: 10px;
 	/*margin: 1em 32% 0 3%;*/
@@ -606,9 +675,9 @@ h1 {
     margin-block-end: 0;
     margin-inline-start: 3%;
     margin-inline-end: 32%;
-	line-height: 1.2; 
+	line-height: 1.2;
     font-weight: 400;
-    color: #666;
+    color: var(--color-secondary-text);
     font-size: 3.25em;
     hyphens: none;
 	}
@@ -616,16 +685,16 @@ h1 {
 h2 {
 	font-size: 150%;
 	font-weight: bold;
-	margin-block-start: 3em; 
-	border-bottom: 1px solid #eee;
+	margin-block-start: 3em;
+	border-bottom: 1px solid var(--color-border-light-gray);
 	text-transform: uppercase;
 	}
 h2 a:link {
     font-weight: bold;
-    color: #333;
+    color: var(--color-primary-text);
 	}
-h2 a:visited { 
-	color: #333;
+h2 a:visited {
+	color: var(--color-primary-text);
 	text-decoration: none;
 	}
 
@@ -636,26 +705,26 @@ h3 {
 	margin-block-end: 1em;
 	}
 h3 a:link {
-	color: #111;
+	color: var(--color-black-text);
 	}
-h3 a:visited { 
-	color: #333;
+h3 a:visited {
+	color: var(--color-primary-text);
 	}
 
 h4 {
     font-weight: bold;
-    color: #777;
+    color: var(--color-tertiary-text);
     font-style: italic;
     margin-block-start: 3em;
     margin-block-end: 0;
-    color: #222;
+    color: var(--color-dark-text);
     font-size: 90%;
     }
 h4 a:link {
-    color: #777;
+    color: var(--color-tertiary-text);
 	}
-h4 a:visited { 
-	color: #777;
+h4 a:visited {
+	color: var(--color-tertiary-text);
 	}
 
 h2 code, h3 code, h4 code {
@@ -665,29 +734,29 @@ h2 code, h3 code, h4 code {
 #nutshell {
 	margin-block-start: 2em;
 	margin-block-end: .25em;
-	margin-inline-start: 7.5%; 
+	margin-inline-start: 7.5%;
 	margin-inline-end: 32%;
-	padding: 1em 1em 0 1em; 
-    border-block-start: 3px solid brown;
-    border-block-end: 3px solid brown;
+	padding: 1em 1em 0 1em;
+    border-block-start: 3px solid var(--color-brand-brown);
+    border-block-end: 3px solid var(--color-brand-brown);
     }
 #nutshell h2 {
 	font-size: 36px;
-	color: #900;
+	color: var(--color-red-maroon);
 	margin-block-start: 10px;
 	/*margin-inline-start: 5%;*/
 	margin-inline-start: 0;
 	margin-inline-end: 20px;
-	background-color: transparent;
+	background-color: var(--color-bg-transparent);
 	padding-inline-start: 0;
 	}
 #nutshell h2 a:link {
-	color: brown;
+	color: var(--color-brand-brown);
     font-weight: normal;
 	}
 .nutshellIntro {
 	font-style: italic;
-	color: #777;
+	color: var(--color-tertiary-text);
 	font-size: 90%;
 	}
 #nutshell p, #nutshell .example { 
@@ -734,33 +803,33 @@ h2 code, h3 code, h4 code {
     width: 24%;
     font-size: 80%;
     line-height: 1.2em;
-    border: 1px solid #CCC;
+    border: 1px solid var(--color-border-light);
     padding: 5px 10px 5px 15px;
     border-radius: 10px;
 	}
 .sideinfonote {
-	color: #000066;
-	background-color:#f4f4fe;
-    background-color: antiquewhite;
-    color: #444;
+	color: var(--color-blue-dark);
+	background-color: var(--color-bg-light-blue);
+    background-color: var(--color-bg-antiquewhite);
+    color: var(--color-quaternary-text);
 	}
 .implnote {
-	color: #666;
-	background-color:#ffeadd; 
-	background-color: white;
+	color: var(--color-secondary-text);
+	background-color: var(--color-bg-light-orange);
+	background-color: var(--color-bg-white);
     border: 0;
 	}
 
-.info::before, .warning::before, .footnote::before, .impl::before { 
+.info::before, .warning::before, .footnote::before, .impl::before {
 	float: left;
  	font-family: Old English, Georgia, serif;
  	font-size: 300%;
  	line-height: 1em;
  	margin-inline-end: 0.3em;
- 	margin-block-end:0; 
+ 	margin-block-end:0;
 	font-weight: 700;
-    color: #999;
-    color: chocolate;
+    color: var(--color-light-text);
+    color: var(--color-brand-chocolate);
 	}
 .info::before { content: 'i'; }
 .warning::before { content: '!'; }
@@ -805,21 +874,21 @@ h2 code, h3 code, h4 code {
 	font-size: 80%;
 	z-index:-500;
 	line-height: 1.2em;
-	border: 1px solid #CCC; 
-	padding: 5px 10px 5px 15px; 
-	border-radius: 10px; 
+	border: 1px solid var(--color-border-light);
+	padding: 5px 10px 5px 15px;
+	border-radius: 10px;
 	clear: none;
 	}
 .insideinfonote {
-	color: #222;
-    background-color: antiquewhite;
-    background-color: bisque;
-    color: #444;
+	color: var(--color-dark-text);
+    background-color: var(--color-bg-antiquewhite);
+    background-color: var(--color-bg-bisque);
+    color: var(--color-quaternary-text);
 	}
 .insideimplnote {
-	color: #666;
-	min-height: 40px; 
-	background-color: white;
+	color: var(--color-secondary-text);
+	min-height: 40px;
+	background-color: var(--color-bg-white);
     border: 0;
 	}
 .insideinfonote p {
@@ -840,61 +909,61 @@ h2 code, h3 code, h4 code {
     width: 24%;
     font-size: 80%;
     line-height: 1.2em;
-    border: 1px solid #CCC;
+    border: 1px solid var(--color-border-light);
     padding: 5px 10px 5px 15px;
     border-radius: 10px;
-    color: #000066;
-    background-color: #f4f4fe;
+    color: var(--color-blue-dark);
+    background-color: var(--color-bg-light-blue);
     }
 
 
 .note {
-	color: #000066;
+	color: var(--color-blue-dark);
 	/*margin: .25em 35% .25em 10%;*/
     margin-block-start: .25rem;
     margin-inline-end: 35%;
     margin-block-end: .25rem;
     margin-inline-start: 10%;
-	background-color:#eef; 
-	background-color: #ffdccb;
-	border: 1px solid #CCC; 
-	padding: 5px 10px 5px 15px; 
-	border-radius: 10px; 
+	background-color: var(--color-bg-note-alt);
+	background-color: var(--color-bg-note);
+	border: 1px solid var(--color-border-light);
+	padding: 5px 10px 5px 15px;
+	border-radius: 10px;
 	clear: both;
-    color: brown;
+    color: var(--color-brand-brown);
 	}
 .note b { font-size: 110%; font-weight: 700; padding-inline-end: 10px; }
 
 .strongnote {
-	color: #000066;
+	color: var(--color-blue-dark);
 	/*margin: .25em 35% .25em 10%;*/
     margin-block-start: .25rem;
     margin-inline-end: 35%;
     margin-block-end: .25rem;
     margin-inline-start: 10%;
-	
-	background-color:#eef; 
-	border: 1px solid #CCC; 
-	box-shadow: 7px 7px 5px #888; 
-	padding: 5px 10px 5px 15px; 
-	border-radius: 10px; 
+
+	background-color: var(--color-bg-note-alt);
+	border: 1px solid var(--color-border-light);
+	box-shadow: 7px 7px 5px var(--color-gray-medium);
+	padding: 5px 10px 5px 15px;
+	border-radius: 10px;
 	}
 .strongnote b { font-size: 180%; text-transform: lowercase; font-weight: normal; padding-inline-end: 10px; }
 .note p, .strongnote p { margin-inline-start: 0; margin-inline-end: 0; }
 .note ul, .strongnote ul { margin-inline-start: 2em; margin-inline-end: 0; }
 
 .advancedusage {
-	color: #666;
+	color: var(--color-secondary-text);
 	/*margin: .25em 32% 2em 7.5%;*/
     margin-block-start: .25rem;
     margin-inline-end: 35%;
     margin-block-end: .25rem;
     margin-inline-start: 10%;
-	
-	background-color:#ffeadd; 
-	border: 1px solid #CCC; 
-	padding: 5px 10px 5px 15px; 
-	border-radius: 10px; 
+
+	background-color: var(--color-bg-light-orange);
+	border: 1px solid var(--color-border-light);
+	padding: 5px 10px 5px 15px;
+	border-radius: 10px;
 	}
 .advancedusage strong { font-size: 120%; text-transform: lowercase; font-weight: normal; padding-inline-end: 10px; }
 .advancedusage p { margin-inline-start: 0; margin-inline-end: 0; }
@@ -913,8 +982,8 @@ address {
     margin-inline-end: 30%;
     margin-block-end: 1rem;
     margin-inline-start: 7.5%;
-	border-top: 1px solid gray;
-	border-bottom: 1px solid gray;
+	border-top: 1px solid var(--color-border-gray);
+	border-bottom: 1px solid var(--color-border-gray);
 	}
 address p {
 	margin-block: .5em;
@@ -944,12 +1013,12 @@ small {
 .example, .example-wide {
 	margin-block-start: .25em;
 	margin-block-end: .25em;
-	
-	background-color:#ffe; 
-    background-color: #f5f2f0;
-	border: 1px solid #CCC; 
-	padding: 5px 10px 5px 15px; 
-	border-radius: 5px; 
+
+	background-color: var(--color-bg-light-yellow);
+    background-color: var(--color-bg-light-gray);
+	border: 1px solid var(--color-border-light);
+	padding: 5px 10px 5px 15px;
+	border-radius: 5px;
 	}
 .example figcaption {
 	font-style: italic;
@@ -1009,7 +1078,7 @@ q	 { quotes: '"' '"' "'" "'"; }
 :lang(ar) .qchar { quotes: '\2019' '\2018'; }
 .qchar {
 	font-size: 100%;
-	color: #666;
+	color: var(--color-secondary-text);
 	font-family: "Times New Roman", Times, serif;
 	}
 .qchar:before {
@@ -1051,12 +1120,12 @@ mark {
 	font-weight:400;
     padding: 0 .3em;
     border-radius: 5px;
-    color: brown;
-    background-color: antiquewhite;
+    color: var(--color-brand-brown);
+    background-color: var(--color-bg-antiquewhite);
 	}
 strong {
     font-weight: bold;
-	color: #666;
+	color: var(--color-secondary-text);
 	}
 code, samp {
 	font-family: Monaco, "Andale Mono", Consolas, monospace;
@@ -1085,18 +1154,18 @@ code.code2 {
 a.dfn:link {
 	color: inherit;
 	text-decoration: none;
-	border-bottom:1px dotted teal;
+	border-bottom:1px dotted var(--color-brand-teal);
 	}
 a.dfn:hover {
-	color:  #005a9c;
-	background: white;
+	color: var(--color-link-hover);
+	background: var(--color-bg-white);
 	text-decoration: none;
-	border-bottom:1px dotted teal;
+	border-bottom:1px dotted var(--color-brand-teal);
 	}
 a.dfn:visited {
 	color: inherit;
 	text-decoration: none;
-	border-bottom:1px dotted teal;
+	border-bottom:1px dotted var(--color-brand-teal);
 	}
 	
 
@@ -1130,10 +1199,10 @@ dt {
 	margin-block-start: 1em;
 	}
 .ed {
-	color: red;
+	color: var(--color-red);
 	}
 fieldset {
-	color: #a52a2a;
+	color: var(--color-red-alt);
 	}
 #footer {
 	margin-block-start: 5em;
@@ -1141,7 +1210,7 @@ fieldset {
 	border-bottom: 0;
 	border-inline-start: 0;
 	border-inline-end: 0;
-	border-color: #333;
+	border-color: var(--color-primary-text);
 	border-style: solid;
 	font-size: 90%;
 	}
@@ -1172,8 +1241,8 @@ img {
 	width: 28%;
 	clear: left;
 	}
-p.background-link { 
-	color: teal;
+p.background-link {
+	color: var(--color-brand-teal);
 	text-align: end;
 	margin-block-start: 0;
 	margin-block-end: 0;
@@ -1187,7 +1256,7 @@ p.background-link {
 	left: 72%;
 	top: 0;
 	width: 10px;
-	border-left: 2px dotted #005a9c;
+	border-left: 2px dotted var(--color-link-hover);
 	height: 30em;
 	}*/
 #logos {
@@ -1204,8 +1273,8 @@ p.background-link {
 	}
 #navigation {
 	line-height: 150%;
-	background-color: transparent;
-	color: #555;
+	background-color: var(--color-bg-transparent);
+	color: var(--color-quaternary-text);
 	font-weight: 700;
 	margin-block-start: 3em;
 	margin-block-end: 1.5em;
@@ -1217,15 +1286,15 @@ p.background-link {
 	}
 #audience {
 	line-height: normal;
-	font-weight: 300; 
-	color: gray;
+	font-weight: 300;
+	color: var(--color-border-gray);
 	margin-block-start: 4em;
 	margin-block-end: 2em;
 	font-size: 90%;
 	}
 #audience .leadin {
 	font-weight: 400;
-	color: #555;
+	color: var(--color-quaternary-text);
 	text-transform: lowercase;
 	}
 #audience .leadin:lang(de) { text-transform: none; }
@@ -1254,7 +1323,7 @@ pre {
 	}
 .question {
 	font-weight: 700;
-	color: #000;
+	color: var(--color-pure-black);
 	}
 .sidebar {
 	float: right;
@@ -1275,24 +1344,24 @@ pre {
 
 
 span#scale {
-	white-space: nowrap; 
-	color: gray;
+	white-space: nowrap;
+	color: var(--color-border-gray);
 	}
 span.searchkey {
 	font-style: italic;
 	}
 span.surveyScale {
-	white-space: nowrap; 
-	color: gray;
+	white-space: nowrap;
+	color: var(--color-border-gray);
 	}
 table, td, th {
 	font-size: 1em;
 	}
-table td { 
-	border: 1px solid #ccc; 
-	vertical-align: top; 
-	text-align: start; 
-	border-collapse: collapse; 
+table td {
+	border: 1px solid var(--color-border-light-alt);
+	vertical-align: top;
+	text-align: start;
+	border-collapse: collapse;
 	padding: 4px;
 	}
 table th { 
@@ -1328,11 +1397,11 @@ table th {
 	width: 20%;
   	max-width: 250px;
 	padding: 20px;
-	color: #666;
+	color: var(--color-secondary-text);
 	line-height: 1.4;
 	position: absolute;
 	right: 0;
-    background-color: antiquewhite;
+    background-color: var(--color-bg-antiquewhite);
 	}
 #survey:dir(rtl) {
     left: 0;
@@ -1348,25 +1417,25 @@ table th {
 	margin-inline-start: 10px; 
 	margin-inline-end: 10px; 
 	}
-#survey a.interaction { 
+#survey a.interaction {
   font-size: 130%;
-  color: #e70;
+  color: var(--color-brand-orange-alt);
   }
 #survey button.interaction {
   font-size: 130%;
-  color: #e70;
-  background-color: #ffffff; 
-  border: 0; 
-  margin: 0; 
+  color: var(--color-brand-orange-alt);
+  background-color: var(--color-bg-white);
+  border: 0;
+  margin: 0;
   padding: 0;
   text-align: start; /* for IE */
   cursor: pointer;
   }
 #survey label.interaction {
   font-size: 130%;
-  color: #e70;
-  border: 0; 
-  margin: 0; 
+  color: var(--color-brand-orange-alt);
+  border: 0;
+  margin: 0;
   padding: 0;
   cursor: pointer;
   }
@@ -1386,14 +1455,14 @@ table th {
 
 #print-author {
 	font-size: 110%;
-	color: #005a9c;
+	color: var(--color-link-hover);
 	margin-block-start: 4em;
 	font-weight: 700;
 	display: none;
 	}
 #print-uri {
 	font-size: 100%;
-	color: #005a9c;
+	color: var(--color-link-hover);
 	display: none;
 	margin-block-end: 2em;
 	}
@@ -1411,18 +1480,18 @@ table th {
 
 
 
-.outofdate {  background-color: yellow; border: 1px solid teal; padding: 8px;  border-radius: 5px; line-height: 1.5; }
-.unlinked {  background-color: yellow; border: 1px solid teal; padding: 8px; color: #c30; font-size: 120%; border-radius: 5px; line-height: 1.5; }
+.outofdate {  background-color: var(--color-bg-yellow); border: 1px solid var(--color-brand-teal); padding: 8px;  border-radius: 5px; line-height: 1.5; }
+.unlinked {  background-color: var(--color-bg-yellow); border: 1px solid var(--color-brand-teal); padding: 8px; color: var(--color-red-dark); font-size: 120%; border-radius: 5px; line-height: 1.5; }
 
 .foreign { font-style: italic; }
 
 
 /* quick check form in side bar */
 
-.quickcheck input { border:1px solid #ccc; color:#999; width:100%; padding: 2px; border-radius: 5px; }
-.quickcheck button[type=submit] {border:0;background-color:#eee; padding: 2px 5px 2px 5px; border-radius: 5px; }
+.quickcheck input { border:1px solid var(--color-border-light-alt); color: var(--color-light-text); width:100%; padding: 2px; border-radius: 5px; }
+.quickcheck button[type=submit] {border:0;background-color: var(--color-bg-light-gray-alt); padding: 2px 5px 2px 5px; border-radius: 5px; }
 .quickcheck .guide { font-size:75%; font-style:italic; }
-.quickcheck p { margin-block-end: 5px; margin-block-start: 5px; color:#A52a2a; color:#666; }
+.quickcheck p { margin-block-end: 5px; margin-block-start: 5px; color: var(--color-red-alt); color: var(--color-secondary-text); }
 
 
 	
@@ -1430,7 +1499,7 @@ dfn {
 	font-weight:700;
 	font-style: normal;
 	}
-a.termref { border-bottom: 1px dotted #C66; } 
+a.termref { border-bottom: 1px dotted var(--color-border-dotted); }
 cite {
 	font-style: italic;
 	}
@@ -1440,14 +1509,14 @@ cite:lang(zh) {
 
 .updated { text-align:end; font-size: 90%; margin-block-start: 0; margin-block-end:0; }
 
-.badcode { font-size: 75%; color:#999; line-height: 1em; }
+.badcode { font-size: 75%; color: var(--color-light-text); line-height: 1em; }
 .badcode img { vertical-align: text-top }
 
-.acknowledgements { font-size: 80%; color: gray; }
+.acknowledgements { font-size: 80%; color: var(--color-border-gray); }
 
 
 img.shadow {
-	box-shadow: 7px 7px 5px #999; 
+	box-shadow: 7px 7px 5px var(--color-shadow);
 	}
 
 
@@ -1509,32 +1578,32 @@ bdo[dir='ltr'], bdo[dir='rtl'] {
 #printLinks {
 	display: block;
 	}
-a.print:after { 
+a.print:after {
 	content: " [" attr(title) "] ";
-	color: #888;
+	color: var(--color-gray-medium);
 	font-size: 85%;
 	}
 
-#full-links a:after { 
+#full-links a:after {
 	content: " (" attr(href) ") ";
-	color: #888;
+	color: var(--color-gray-medium);
 	font-size: 85%;
-	} 
+	}
 
 .kw {
-    color: #666;
+    color: var(--color-secondary-text);
     font-family: "Courier New", monospaced;
     font-size: 100%;
 }
 
 a {
 	text-decoration: none;
-	color: #666;
+	color: var(--color-secondary-text);
 	font-weight: 400;
 	}
 a:visited {
 	font-weight: 400;
-	color: #666;
+	color: var(--color-secondary-text);
 	}
 
 
@@ -1546,32 +1615,32 @@ body {
 	font-size: 10pt;
     font-family: Helvetica, 'Helvetica Neue', Arial, "Segoe UI", sans-serif;
     line-height: 1.75;
-	color: #666;
+	color: var(--color-secondary-text);
 	font-weight: normal;
 	margin: 0;
 	padding: 0;
-	background-color: white;
+	background-color: var(--color-bg-white);
 	}
 
 #siteicons {
-	background-color: #003163;
+	background-color: var(--color-brand-blue);
 	margin-inline-end: 29%;
 	border-bottom-right-radius: 30px;
-	box-shadow: none; 
+	box-shadow: none;
 	padding: 0; height: 49px;
 	}
 #siteicons:dir(rtl) {
-	background-color: #003163;
+	background-color: var(--color-brand-blue);
 	margin-inline-end: 29%;
 	border-bottom-left-radius: 30px;
-	box-shadow: none; 
+	box-shadow: none;
 	padding: 0; height: 49px;
 	}
 :root[dir=rtl] #siteicons {
-	background-color: #003163;
+	background-color: var(--color-brand-blue);
 	margin-inline-end: 29%;
 	border-bottom-left-radius: 30px;
-	box-shadow: none; 
+	box-shadow: none;
 	padding: 0; height: 49px;
 	}
 
@@ -1583,9 +1652,9 @@ body {
 	width: 80%;
 	line-height: 1.5;
 	text-align: justify;
-	background-color: #cccc99;
-	background-color: white;
-	color: #555;
+	background-color: var(--color-bg-gray);
+	background-color: var(--color-bg-white);
+	color: var(--color-quaternary-text);
 	}
 	
 	
@@ -1599,14 +1668,14 @@ body {
 	line-height: 1;
 	text-align: start;
 	width: auto;
-	margin-inline-start: 11%; 
-	margin-inline-end: 12%; 
+	margin-inline-start: 11%;
+	margin-inline-end: 12%;
 	margin-block-end: 10px;
 	padding: 8px;
 	padding-inline-start: 16px;
-	border: 1px solid #ccc;
+	border: 1px solid var(--color-border-light-alt);
 	border-radius: 10px;
-	}	
+	}
 .insidenote {
 	position: static;
 	font-size: 80%;
@@ -1627,14 +1696,14 @@ body {
 	line-height: 1;
 	text-align: start;
 	width: auto;
-	margin-inline-start: 11%; 
-	margin-inline-end: 12%; 
+	margin-inline-start: 11%;
+	margin-inline-end: 12%;
 	margin-block-end: 10px;
 	padding: 8px;
 	padding-inline-start: 16px;
-	border: 1px solid #ccc;
+	border: 1px solid var(--color-border-light-alt);
 	border-radius: 10px;
-	}	
+	}
 .insideinfonote {
 	position: static;
 	font-size: 80%;
@@ -1656,8 +1725,8 @@ aside {
 	}
 
 h1, h2  {
-	background-color: white;
-    color: #666;
+	background-color: var(--color-bg-white);
+    color: var(--color-secondary-text);
 	}
 h2 {
 	padding-inline-start: 0;
@@ -1665,7 +1734,7 @@ h2 {
 	page-break-after: avoid;
 	padding-block-start: 3em;
 	/*text-transform:none; */
-	border-bottom: 1px solid #eee;
+	border-bottom: 1px solid var(--color-border-light-gray);
     font-weight: normal;
 	}
 h2#quicksummary {
@@ -1687,20 +1756,20 @@ div.h4  {
 	}
 
 h2 a:link {
-	color: #666;
+	color: var(--color-secondary-text);
 	text-decoration: none;
 	font-weight: 300;
 	}
-h2 a:visited { 
-	color: #666;
+h2 a:visited {
+	color: var(--color-secondary-text);
 	text-decoration: none;
 	}
-section h3 a:link { 
+section h3 a:link {
 	text-decoration: none;
-	color: #666;
+	color: var(--color-secondary-text);
 	}
-section h3 a:visited { 
-	color: #666;
+section h3 a:visited {
+	color: var(--color-secondary-text);
 	}
 
 
@@ -1754,8 +1823,8 @@ table { margin-inline-start: 7.5%;  }
 }   /* END OF @media print */
 
 
-ins { background-color: #FF9; }
-del { color: #CCC; text-decoration: line-through; }
+ins { background-color: var(--color-yellow-light); }
+del { color: var(--color-border-light); text-decoration: line-through; }
 
 
 
@@ -1771,7 +1840,7 @@ h2 > a.selflink, h3 > a.selflink, h4 > a.selflink, h5 > a.selflink, h6 > a.selfl
     color: inherit;
     font-size: 83%;
     text-align: center;
-    background-color: transparent;
+    background-color: var(--color-bg-transparent);
     }
 h2:hover > a.selflink, h3 > a.selflink, h4 > a.selflink, h5 > a.selflink, h6 > a.selflink {
     border: none;

From c0ced50d47720255a2b7e59252abf1032dd80a92 Mon Sep 17 00:00:00 2001
From: Fuqiao Xue <xfq@w3.org>
Date: Thu, 14 Aug 2025 20:58:13 +0800
Subject: [PATCH 2/3] Update the colors

---
 style/sitepage-2022.css | 433 ++++++++++++++++++++--------------------
 1 file changed, 214 insertions(+), 219 deletions(-)

diff --git a/style/sitepage-2022.css b/style/sitepage-2022.css
index 853543db..913108e5 100644
--- a/style/sitepage-2022.css
+++ b/style/sitepage-2022.css
@@ -1,70 +1,68 @@
 :root {
-    /* Primary Colors */
-    --color-primary-text: #333;
-    --color-secondary-text: #666;
-    --color-tertiary-text: #777;
-    --color-quaternary-text: #555;
-    --color-light-text: #999;
-    --color-dark-text: #222;
-    --color-black-text: #111;
-    --color-pure-black: #000;
-
-    /* Background Colors */
-    --color-bg-white: white;
-    --color-bg-transparent: transparent;
-    --color-bg-antiquewhite: antiquewhite;
-    --color-bg-bisque: bisque;
-    --color-bg-light-gray: #f5f2f0;
-    --color-bg-light-blue: #f4f4fe;
-    --color-bg-light-orange: #ffeadd;
-    --color-bg-light-yellow: #ffe;
-    --color-bg-note: #ffdccb;
-    --color-bg-note-alt: #eef;
-    --color-bg-yellow: yellow;
-    --color-bg-hover: #FFC;
-    --color-bg-gray: #cccc99;
-    --color-bg-light-gray-alt: #eee;
-
-    /* Brand Colors */
-    --color-brand-blue: #003163;
-    --color-brand-blue-alt: #4c5c9c;
-    --color-brand-teal: teal;
-    --color-brand-brown: brown;
-    --color-brand-chocolate: chocolate;
-    --color-brand-yellow: #f9c818;
-    --color-brand-orange: #E8941D;
-    --color-brand-orange-alt: #e70;
-
-    /* Link Colors */
-    --color-link-default: teal;
-    --color-link-visited: #036;
-    --color-link-visited-alt: brown;
-    --color-link-hover: #005a9c;
-    --color-link-nav: #5C7A7A;
-    --color-link-aqua: #7FFFD4;
-
-    /* Border Colors */
-    --color-border-light: #CCC;
-    --color-border-light-alt: #ccc;
-    --color-border-gray: gray;
-    --color-border-light-gray: #eee;
-    --color-border-dotted: #C66;
-
-    /* Special Colors */
-    --color-red: red;
-    --color-red-alt: #a52a2a;
-    --color-red-dark: #c30;
-    --color-red-maroon: #900;
-    --color-blue-dark: #000066;
-    --color-blue-medium: #036;
-    --color-green-medium: #5F9EA0;
-    --color-brown-medium: #C08D34;
-    --color-gray-medium: #888;
-    --color-yellow-light: #FF9;
-
-    /* Shadow Colors */
-    --color-shadow: #999;
-    --color-shadow-dark: #888;
+    /* Text */
+    --text-primary: #333;
+    --text-secondary: #666;
+    --text-tertiary: #777;
+    --text-quaternary: #555;
+    --text-muted: #999;
+    --text-strong: #222;
+    --text-stronger: #111;
+    --text-emphasis: #000;
+
+    /* Background */
+    --bg-body: white;
+    --bg-example: #f5f2f0;
+    --bg-transparent: transparent;
+    --bg-surface-accent: antiquewhite;
+    --bg-surface-accent-alt: bisque;
+    --bg-info: #f4f4fe;
+    --bg-surface-warning: #ffeadd;
+    --bg-note: #ffdccb;
+    --bg-note-alt: #eef;
+    --bg-surface-yellow: yellow;
+    --bg-surface-hover: #FFC;
+    --bg-surface-alt: #cccc99;
+    --bg-quick-check-button: #eee;
+    --bg-search-field: #5F9EA0;
+
+    /* Brand */
+    --brand-primary: #003163;
+    --brand-primary-alt: #4c5c9c;
+    --brand-accent: teal;
+    --brand-brown: brown;
+    --brand-accent-strong: chocolate;
+    --brand-warning: #f9c818;
+    --brand-orange: #E8941D;
+    --brand-orange-strong: #e70;
+
+    /* Link */
+    --link: teal;
+    --link-visited: #036;
+    --link-visited-alt: brown;
+    --link-hover: #005a9c;
+    --link-nav: #5C7A7A;
+    --link-contrast: #7FFFD4;
+
+    /* Border */
+    --border: #CCC;
+    --border-subtle: #ccc;
+    --border-muted: gray;
+    --border-neutral: #eee;
+    --border-accent: #C66;
+
+    /* Other colors */
+    --danger: red;
+    --danger-muted: #a52a2a;
+    --danger-strong: #c30;
+    --danger-maroon: #900;
+    --info-strong: #000066;
+    --brand-blue-medium: #036;
+    --brand-brown-medium: #C08D34;
+    --neutral: #888;
+    --highlight: #FF9;
+
+    /* Shadows */
+    --shadow: #999;
 }
 
 @font-face {
@@ -109,11 +107,11 @@
 
 body {
     line-height: 1.75;
-	color: var(--color-primary-text);
+	color: var(--text-primary);
 	font-weight: 400;
 	margin: 0;
 	padding: 0;
-	background-color: var(--color-bg-white);
+	background-color: var(--bg-body);
 	font-family: RalewayWF, Helvetica, 'Helvetica Neue', Arial, "Segoe UI", sans-serif;
 	hyphens: auto;
 	}
@@ -260,7 +258,7 @@ body.obsolete h2, body.obsolete h3 {
     }
 
 #level2toc {
-    border-inline-start: solid 3px var(--color-brand-yellow);
+    border-inline-start: solid 3px var(--brand-warning);
     }
 
 .directory {
@@ -378,7 +376,7 @@ aside:dir(rtl) {
 	}
 #mainNavigationAside {
 	max-width: 15em;
-    background-color: var(--color-bg-antiquewhite);
+    background-color: var(--bg-surface-accent);
     border-bottom-left-radius: 1em;
     padding-block-end: 1em;
     }
@@ -389,7 +387,7 @@ aside h2 {
 	text-transform: none;
 	text-align: center;
     font-weight: normal;
-    color: var(--color-primary-text);
+    color: var(--text-primary);
     border: 0;
     hyphens: none;
 	}
@@ -417,18 +415,18 @@ aside li {
 
 a {
 	text-decoration: none;
-	color: var(--color-link-default);
+	color: var(--link);
 	}
 /*#toc a {
     color: darkslategray;
 	}*/
 a:visited {
-    color: var(--color-link-visited);
-	color: var(--color-link-visited-alt);
+    color: var(--link-visited);
+	color: var(--link-visited-alt);
 	}
 a:hover {
-	color: var(--color-link-hover);
-	background: var(--color-bg-hover);
+	color: var(--link-hover);
+	background: var(--bg-surface-hover);
 	text-decoration: underline;
 	}
 	
@@ -439,7 +437,7 @@ header a {
 
 .eyecatcher, .highlightLink {
     font-size: 140%;
-    color: var(--color-brand-orange);
+    color: var(--brand-orange);
     font-weight: 400;
     /*white-space: nowrap;*/
     }
@@ -453,7 +451,7 @@ header a {
     content: '\00A0' url(https://w3c.github.io/i18n-drafts/icons/goto_rtl.png) ' ';
     }
 .highlightLink:link, .highlightLink:visited, .highlightLink:active {
-    color: var(--color-brand-chocolate);
+    color: var(--brand-accent-strong);
     }
 
 
@@ -492,20 +490,20 @@ header a {
 	white-space: nowrap;
 	}
 #site-navigation a:link {
-    color: var(--color-link-nav);
+    color: var(--link-nav);
 	}
 #site-navigation a:active {
-	background-color: var(--color-bg-white);
-    color: var(--color-link-nav);
+	background-color: var(--bg-body);
+    color: var(--link-nav);
 	}
 #site-navigation a:visited {
-	background-color: var(--color-bg-white);
+	background-color: var(--bg-body);
 	text-decoration: none;
-    color: var(--color-link-nav);
+    color: var(--link-nav);
 	}
 #site-navigation a:hover {
-	color: var(--color-bg-white);
-	background-color: var(--color-brand-blue);
+	color: var(--bg-body);
+	background-color: var(--brand-primary);
 	border-radius: 3px;
 	text-decoration: none;
 	}
@@ -514,12 +512,12 @@ header a {
 #disclaimer {
 	font-size: 80%;
 	line-height: 1em;
-	background-color: var(--color-bg-transparent);
+	background-color: var(--bg-transparent);
 	}
 #disclaimer p {
 	font-size: 115%;
 	line-height: 1.2em;
-    color: var(--color-brand-brown);
+    color: var(--brand-brown);
     margin-block-start: 2rem;
 	margin-inline-start: 0;
 	margin-inline-end: 2rem;
@@ -529,14 +527,13 @@ header a {
 #search {
 	}
 #searchField {
-	background-color: var(--color-brown-medium);
-	background-color: var(--color-green-medium);
+	background-color: var(--bg-search-field);
 	border: 0;
 	margin-inline-end: 5px;
 	}
 #searchSite {
-	background-color: var(--color-brand-teal);
-	color: var(--color-link-aqua);
+	background-color: var(--brand-accent);
+	color: var(--link-contrast);
 	font-size: 80%;
 	padding: 0px 5px 0px 5px;
 	border-radius: 5px;
@@ -549,13 +546,13 @@ header a {
 	background-repeat: no-repeat;
 	padding-inline-start:18px;
 	color:#7fffd4; */
-	background-color: var(--color-brand-teal);
+	background-color: var(--brand-accent);
 	cursor:pointer;
     height: 2em;
-    color: var(--color-bg-white);
+    color: var(--bg-body);
 	}
 #searchSite input::placeholder {
-    color: var(--color-bg-white);
+    color: var(--bg-body);
     opacity: .9;
     }
 
@@ -624,20 +621,20 @@ header a {
 	}
 #siteicons a:hover {
 	text-decoration: none;
-	background-color: var(--color-brand-blue);
-	color: var(--color-bg-white);
+	background-color: var(--brand-primary);
+	color: var(--bg-body);
 	}
 #sitename {
     font-size: 22px;
-    border-bottom: 2px solid var(--color-brand-brown);
-    color: var(--color-brand-blue-alt);
+    border-bottom: 2px solid var(--brand-brown);
+    color: var(--brand-primary-alt);
     margin: 0;
     }
 #subtitle {
     margin:0;
     font-size:12px;
     font-style:italic;
-    color: var(--color-brand-blue-alt);
+    color: var(--brand-primary-alt);
     }
 #subtitle:lang(ja), #subtitle:lang(ko), #subtitle:lang(zh), #subtitle:lang(hi), #subtitle:lang(ar) {
     font-style: normal;
@@ -654,11 +651,11 @@ header a {
 	padding-inline-start: 0.75em;
 	}
 #sitelinks a:hover {
-	color: var(--color-link-hover);
+	color: var(--link-hover);
 	text-decoration: none;
 	}
 #sitelinks a:visited {
-	color: var(--color-brand-teal);
+	color: var(--brand-accent);
 	text-decoration: none;
 	}
 	
@@ -667,7 +664,7 @@ header a {
 /* ************** headings **************** */
 
 h1 {
-	background-color: var(--color-bg-white);
+	background-color: var(--bg-body);
 	padding: 5px;
 	padding-inline-start: 10px;
 	/*margin: 1em 32% 0 3%;*/
@@ -677,7 +674,7 @@ h1 {
     margin-inline-end: 32%;
 	line-height: 1.2;
     font-weight: 400;
-    color: var(--color-secondary-text);
+    color: var(--text-secondary);
     font-size: 3.25em;
     hyphens: none;
 	}
@@ -686,15 +683,15 @@ h2 {
 	font-size: 150%;
 	font-weight: bold;
 	margin-block-start: 3em;
-	border-bottom: 1px solid var(--color-border-light-gray);
+	border-bottom: 1px solid var(--border-neutral);
 	text-transform: uppercase;
 	}
 h2 a:link {
     font-weight: bold;
-    color: var(--color-primary-text);
+    color: var(--text-primary);
 	}
 h2 a:visited {
-	color: var(--color-primary-text);
+	color: var(--text-primary);
 	text-decoration: none;
 	}
 
@@ -705,26 +702,26 @@ h3 {
 	margin-block-end: 1em;
 	}
 h3 a:link {
-	color: var(--color-black-text);
+	color: var(--text-stronger);
 	}
 h3 a:visited {
-	color: var(--color-primary-text);
+	color: var(--text-primary);
 	}
 
 h4 {
     font-weight: bold;
-    color: var(--color-tertiary-text);
+    color: var(--text-tertiary);
     font-style: italic;
     margin-block-start: 3em;
     margin-block-end: 0;
-    color: var(--color-dark-text);
+    color: var(--text-strong);
     font-size: 90%;
     }
 h4 a:link {
-    color: var(--color-tertiary-text);
+    color: var(--text-tertiary);
 	}
 h4 a:visited {
-	color: var(--color-tertiary-text);
+	color: var(--text-tertiary);
 	}
 
 h2 code, h3 code, h4 code {
@@ -737,26 +734,26 @@ h2 code, h3 code, h4 code {
 	margin-inline-start: 7.5%;
 	margin-inline-end: 32%;
 	padding: 1em 1em 0 1em;
-    border-block-start: 3px solid var(--color-brand-brown);
-    border-block-end: 3px solid var(--color-brand-brown);
+    border-block-start: 3px solid var(--brand-brown);
+    border-block-end: 3px solid var(--brand-brown);
     }
 #nutshell h2 {
 	font-size: 36px;
-	color: var(--color-red-maroon);
+	color: var(--danger-maroon);
 	margin-block-start: 10px;
 	/*margin-inline-start: 5%;*/
 	margin-inline-start: 0;
 	margin-inline-end: 20px;
-	background-color: var(--color-bg-transparent);
+	background-color: var(--bg-transparent);
 	padding-inline-start: 0;
 	}
 #nutshell h2 a:link {
-	color: var(--color-brand-brown);
+	color: var(--brand-brown);
     font-weight: normal;
 	}
 .nutshellIntro {
 	font-style: italic;
-	color: var(--color-tertiary-text);
+	color: var(--text-tertiary);
 	font-size: 90%;
 	}
 #nutshell p, #nutshell .example { 
@@ -803,20 +800,20 @@ h2 code, h3 code, h4 code {
     width: 24%;
     font-size: 80%;
     line-height: 1.2em;
-    border: 1px solid var(--color-border-light);
+    border: 1px solid var(--border);
     padding: 5px 10px 5px 15px;
     border-radius: 10px;
 	}
 .sideinfonote {
-	color: var(--color-blue-dark);
-	background-color: var(--color-bg-light-blue);
-    background-color: var(--color-bg-antiquewhite);
-    color: var(--color-quaternary-text);
+	color: var(--info-strong);
+	background-color: var(--bg-info);
+    background-color: var(--bg-surface-accent);
+    color: var(--text-quaternary);
 	}
 .implnote {
-	color: var(--color-secondary-text);
-	background-color: var(--color-bg-light-orange);
-	background-color: var(--color-bg-white);
+	color: var(--text-secondary);
+	background-color: var(--bg-surface-warning);
+	background-color: var(--bg-body);
     border: 0;
 	}
 
@@ -828,8 +825,8 @@ h2 code, h3 code, h4 code {
  	margin-inline-end: 0.3em;
  	margin-block-end:0;
 	font-weight: 700;
-    color: var(--color-light-text);
-    color: var(--color-brand-chocolate);
+    color: var(--text-muted);
+    color: var(--brand-accent-strong);
 	}
 .info::before { content: 'i'; }
 .warning::before { content: '!'; }
@@ -874,21 +871,21 @@ h2 code, h3 code, h4 code {
 	font-size: 80%;
 	z-index:-500;
 	line-height: 1.2em;
-	border: 1px solid var(--color-border-light);
+	border: 1px solid var(--border);
 	padding: 5px 10px 5px 15px;
 	border-radius: 10px;
 	clear: none;
 	}
 .insideinfonote {
-	color: var(--color-dark-text);
-    background-color: var(--color-bg-antiquewhite);
-    background-color: var(--color-bg-bisque);
-    color: var(--color-quaternary-text);
+	color: var(--text-strong);
+    background-color: var(--bg-surface-accent);
+    background-color: var(--bg-surface-accent-alt);
+    color: var(--text-quaternary);
 	}
 .insideimplnote {
-	color: var(--color-secondary-text);
+	color: var(--text-secondary);
 	min-height: 40px;
-	background-color: var(--color-bg-white);
+	background-color: var(--bg-body);
     border: 0;
 	}
 .insideinfonote p {
@@ -909,42 +906,41 @@ h2 code, h3 code, h4 code {
     width: 24%;
     font-size: 80%;
     line-height: 1.2em;
-    border: 1px solid var(--color-border-light);
+    border: 1px solid var(--border);
     padding: 5px 10px 5px 15px;
     border-radius: 10px;
-    color: var(--color-blue-dark);
-    background-color: var(--color-bg-light-blue);
+    color: var(--info-strong);
+    background-color: var(--bg-info);
     }
 
 
 .note {
-	color: var(--color-blue-dark);
+	color: var(--info-strong);
 	/*margin: .25em 35% .25em 10%;*/
     margin-block-start: .25rem;
     margin-inline-end: 35%;
     margin-block-end: .25rem;
     margin-inline-start: 10%;
-	background-color: var(--color-bg-note-alt);
-	background-color: var(--color-bg-note);
-	border: 1px solid var(--color-border-light);
+	background-color: var(--bg-note);
+	border: 1px solid var(--border);
 	padding: 5px 10px 5px 15px;
 	border-radius: 10px;
 	clear: both;
-    color: var(--color-brand-brown);
+    color: var(--brand-brown);
 	}
 .note b { font-size: 110%; font-weight: 700; padding-inline-end: 10px; }
 
 .strongnote {
-	color: var(--color-blue-dark);
+	color: var(--info-strong);
 	/*margin: .25em 35% .25em 10%;*/
     margin-block-start: .25rem;
     margin-inline-end: 35%;
     margin-block-end: .25rem;
     margin-inline-start: 10%;
 
-	background-color: var(--color-bg-note-alt);
-	border: 1px solid var(--color-border-light);
-	box-shadow: 7px 7px 5px var(--color-gray-medium);
+	background-color: var(--bg-note-alt);
+	border: 1px solid var(--border);
+	box-shadow: 7px 7px 5px var(--neutral);
 	padding: 5px 10px 5px 15px;
 	border-radius: 10px;
 	}
@@ -953,15 +949,15 @@ h2 code, h3 code, h4 code {
 .note ul, .strongnote ul { margin-inline-start: 2em; margin-inline-end: 0; }
 
 .advancedusage {
-	color: var(--color-secondary-text);
+	color: var(--text-secondary);
 	/*margin: .25em 32% 2em 7.5%;*/
     margin-block-start: .25rem;
     margin-inline-end: 35%;
     margin-block-end: .25rem;
     margin-inline-start: 10%;
 
-	background-color: var(--color-bg-light-orange);
-	border: 1px solid var(--color-border-light);
+	background-color: var(--bg-surface-warning);
+	border: 1px solid var(--border);
 	padding: 5px 10px 5px 15px;
 	border-radius: 10px;
 	}
@@ -982,8 +978,8 @@ address {
     margin-inline-end: 30%;
     margin-block-end: 1rem;
     margin-inline-start: 7.5%;
-	border-top: 1px solid var(--color-border-gray);
-	border-bottom: 1px solid var(--color-border-gray);
+	border-top: 1px solid var(--border-muted);
+	border-bottom: 1px solid var(--border-muted);
 	}
 address p {
 	margin-block: .5em;
@@ -1014,9 +1010,8 @@ small {
 	margin-block-start: .25em;
 	margin-block-end: .25em;
 
-	background-color: var(--color-bg-light-yellow);
-    background-color: var(--color-bg-light-gray);
-	border: 1px solid var(--color-border-light);
+    background-color: var(--bg-example);
+	border: 1px solid var(--border);
 	padding: 5px 10px 5px 15px;
 	border-radius: 5px;
 	}
@@ -1078,7 +1073,7 @@ q	 { quotes: '"' '"' "'" "'"; }
 :lang(ar) .qchar { quotes: '\2019' '\2018'; }
 .qchar {
 	font-size: 100%;
-	color: var(--color-secondary-text);
+	color: var(--text-secondary);
 	font-family: "Times New Roman", Times, serif;
 	}
 .qchar:before {
@@ -1120,12 +1115,12 @@ mark {
 	font-weight:400;
     padding: 0 .3em;
     border-radius: 5px;
-    color: var(--color-brand-brown);
-    background-color: var(--color-bg-antiquewhite);
+    color: var(--brand-brown);
+    background-color: var(--bg-surface-accent);
 	}
 strong {
     font-weight: bold;
-	color: var(--color-secondary-text);
+	color: var(--text-secondary);
 	}
 code, samp {
 	font-family: Monaco, "Andale Mono", Consolas, monospace;
@@ -1154,18 +1149,18 @@ code.code2 {
 a.dfn:link {
 	color: inherit;
 	text-decoration: none;
-	border-bottom:1px dotted var(--color-brand-teal);
+	border-bottom:1px dotted var(--brand-accent);
 	}
 a.dfn:hover {
-	color: var(--color-link-hover);
-	background: var(--color-bg-white);
+	color: var(--link-hover);
+	background: var(--bg-body);
 	text-decoration: none;
-	border-bottom:1px dotted var(--color-brand-teal);
+	border-bottom:1px dotted var(--brand-accent);
 	}
 a.dfn:visited {
 	color: inherit;
 	text-decoration: none;
-	border-bottom:1px dotted var(--color-brand-teal);
+	border-bottom:1px dotted var(--brand-accent);
 	}
 	
 
@@ -1199,10 +1194,10 @@ dt {
 	margin-block-start: 1em;
 	}
 .ed {
-	color: var(--color-red);
+	color: var(--danger);
 	}
 fieldset {
-	color: var(--color-red-alt);
+	color: var(--danger-muted);
 	}
 #footer {
 	margin-block-start: 5em;
@@ -1210,7 +1205,7 @@ fieldset {
 	border-bottom: 0;
 	border-inline-start: 0;
 	border-inline-end: 0;
-	border-color: var(--color-primary-text);
+	border-color: var(--text-primary);
 	border-style: solid;
 	font-size: 90%;
 	}
@@ -1242,7 +1237,7 @@ img {
 	clear: left;
 	}
 p.background-link {
-	color: var(--color-brand-teal);
+	color: var(--brand-accent);
 	text-align: end;
 	margin-block-start: 0;
 	margin-block-end: 0;
@@ -1256,7 +1251,7 @@ p.background-link {
 	left: 72%;
 	top: 0;
 	width: 10px;
-	border-left: 2px dotted var(--color-link-hover);
+	border-left: 2px dotted var(--link-hover);
 	height: 30em;
 	}*/
 #logos {
@@ -1273,8 +1268,8 @@ p.background-link {
 	}
 #navigation {
 	line-height: 150%;
-	background-color: var(--color-bg-transparent);
-	color: var(--color-quaternary-text);
+	background-color: var(--bg-transparent);
+	color: var(--text-quaternary);
 	font-weight: 700;
 	margin-block-start: 3em;
 	margin-block-end: 1.5em;
@@ -1287,14 +1282,14 @@ p.background-link {
 #audience {
 	line-height: normal;
 	font-weight: 300;
-	color: var(--color-border-gray);
+	color: var(--border-muted);
 	margin-block-start: 4em;
 	margin-block-end: 2em;
 	font-size: 90%;
 	}
 #audience .leadin {
 	font-weight: 400;
-	color: var(--color-quaternary-text);
+	color: var(--text-quaternary);
 	text-transform: lowercase;
 	}
 #audience .leadin:lang(de) { text-transform: none; }
@@ -1323,7 +1318,7 @@ pre {
 	}
 .question {
 	font-weight: 700;
-	color: var(--color-pure-black);
+	color: var(--text-emphasis);
 	}
 .sidebar {
 	float: right;
@@ -1345,20 +1340,20 @@ pre {
 
 span#scale {
 	white-space: nowrap;
-	color: var(--color-border-gray);
+	color: var(--border-muted);
 	}
 span.searchkey {
 	font-style: italic;
 	}
 span.surveyScale {
 	white-space: nowrap;
-	color: var(--color-border-gray);
+	color: var(--border-muted);
 	}
 table, td, th {
 	font-size: 1em;
 	}
 table td {
-	border: 1px solid var(--color-border-light-alt);
+	border: 1px solid var(--border-subtle);
 	vertical-align: top;
 	text-align: start;
 	border-collapse: collapse;
@@ -1397,11 +1392,11 @@ table th {
 	width: 20%;
   	max-width: 250px;
 	padding: 20px;
-	color: var(--color-secondary-text);
+	color: var(--text-secondary);
 	line-height: 1.4;
 	position: absolute;
 	right: 0;
-    background-color: var(--color-bg-antiquewhite);
+    background-color: var(--bg-surface-accent);
 	}
 #survey:dir(rtl) {
     left: 0;
@@ -1419,12 +1414,12 @@ table th {
 	}
 #survey a.interaction {
   font-size: 130%;
-  color: var(--color-brand-orange-alt);
+  color: var(--brand-orange-strong);
   }
 #survey button.interaction {
   font-size: 130%;
-  color: var(--color-brand-orange-alt);
-  background-color: var(--color-bg-white);
+  color: var(--brand-orange-strong);
+  background-color: var(--bg-body);
   border: 0;
   margin: 0;
   padding: 0;
@@ -1433,7 +1428,7 @@ table th {
   }
 #survey label.interaction {
   font-size: 130%;
-  color: var(--color-brand-orange-alt);
+  color: var(--brand-orange-strong);
   border: 0;
   margin: 0;
   padding: 0;
@@ -1455,14 +1450,14 @@ table th {
 
 #print-author {
 	font-size: 110%;
-	color: var(--color-link-hover);
+	color: var(--link-hover);
 	margin-block-start: 4em;
 	font-weight: 700;
 	display: none;
 	}
 #print-uri {
 	font-size: 100%;
-	color: var(--color-link-hover);
+	color: var(--link-hover);
 	display: none;
 	margin-block-end: 2em;
 	}
@@ -1480,18 +1475,18 @@ table th {
 
 
 
-.outofdate {  background-color: var(--color-bg-yellow); border: 1px solid var(--color-brand-teal); padding: 8px;  border-radius: 5px; line-height: 1.5; }
-.unlinked {  background-color: var(--color-bg-yellow); border: 1px solid var(--color-brand-teal); padding: 8px; color: var(--color-red-dark); font-size: 120%; border-radius: 5px; line-height: 1.5; }
+.outofdate {  background-color: var(--bg-surface-yellow); border: 1px solid var(--brand-accent); padding: 8px;  border-radius: 5px; line-height: 1.5; }
+.unlinked {  background-color: var(--bg-surface-yellow); border: 1px solid var(--brand-accent); padding: 8px; color: var(--danger-strong); font-size: 120%; border-radius: 5px; line-height: 1.5; }
 
 .foreign { font-style: italic; }
 
 
 /* quick check form in side bar */
 
-.quickcheck input { border:1px solid var(--color-border-light-alt); color: var(--color-light-text); width:100%; padding: 2px; border-radius: 5px; }
-.quickcheck button[type=submit] {border:0;background-color: var(--color-bg-light-gray-alt); padding: 2px 5px 2px 5px; border-radius: 5px; }
+.quickcheck input { border:1px solid var(--border-subtle); color: var(--text-muted); width:100%; padding: 2px; border-radius: 5px; }
+.quickcheck button[type=submit] {border:0;background-color: var(--bg-quick-check-button); padding: 2px 5px 2px 5px; border-radius: 5px; }
 .quickcheck .guide { font-size:75%; font-style:italic; }
-.quickcheck p { margin-block-end: 5px; margin-block-start: 5px; color: var(--color-red-alt); color: var(--color-secondary-text); }
+.quickcheck p { margin-block-end: 5px; margin-block-start: 5px; color: var(--danger-muted); color: var(--text-secondary); }
 
 
 	
@@ -1499,7 +1494,7 @@ dfn {
 	font-weight:700;
 	font-style: normal;
 	}
-a.termref { border-bottom: 1px dotted var(--color-border-dotted); }
+a.termref { border-bottom: 1px dotted var(--border-accent); }
 cite {
 	font-style: italic;
 	}
@@ -1509,14 +1504,14 @@ cite:lang(zh) {
 
 .updated { text-align:end; font-size: 90%; margin-block-start: 0; margin-block-end:0; }
 
-.badcode { font-size: 75%; color: var(--color-light-text); line-height: 1em; }
+.badcode { font-size: 75%; color: var(--text-muted); line-height: 1em; }
 .badcode img { vertical-align: text-top }
 
-.acknowledgements { font-size: 80%; color: var(--color-border-gray); }
+.acknowledgements { font-size: 80%; color: var(--border-muted); }
 
 
 img.shadow {
-	box-shadow: 7px 7px 5px var(--color-shadow);
+	box-shadow: 7px 7px 5px var(--shadow);
 	}
 
 
@@ -1580,30 +1575,30 @@ bdo[dir='ltr'], bdo[dir='rtl'] {
 	}
 a.print:after {
 	content: " [" attr(title) "] ";
-	color: var(--color-gray-medium);
+	color: var(--neutral);
 	font-size: 85%;
 	}
 
 #full-links a:after {
 	content: " (" attr(href) ") ";
-	color: var(--color-gray-medium);
+	color: var(--neutral);
 	font-size: 85%;
 	}
 
 .kw {
-    color: var(--color-secondary-text);
+    color: var(--text-secondary);
     font-family: "Courier New", monospaced;
     font-size: 100%;
 }
 
 a {
 	text-decoration: none;
-	color: var(--color-secondary-text);
+	color: var(--text-secondary);
 	font-weight: 400;
 	}
 a:visited {
 	font-weight: 400;
-	color: var(--color-secondary-text);
+	color: var(--text-secondary);
 	}
 
 
@@ -1615,29 +1610,29 @@ body {
 	font-size: 10pt;
     font-family: Helvetica, 'Helvetica Neue', Arial, "Segoe UI", sans-serif;
     line-height: 1.75;
-	color: var(--color-secondary-text);
+	color: var(--text-secondary);
 	font-weight: normal;
 	margin: 0;
 	padding: 0;
-	background-color: var(--color-bg-white);
+	background-color: var(--bg-body);
 	}
 
 #siteicons {
-	background-color: var(--color-brand-blue);
+	background-color: var(--brand-primary);
 	margin-inline-end: 29%;
 	border-bottom-right-radius: 30px;
 	box-shadow: none;
 	padding: 0; height: 49px;
 	}
 #siteicons:dir(rtl) {
-	background-color: var(--color-brand-blue);
+	background-color: var(--brand-primary);
 	margin-inline-end: 29%;
 	border-bottom-left-radius: 30px;
 	box-shadow: none;
 	padding: 0; height: 49px;
 	}
 :root[dir=rtl] #siteicons {
-	background-color: var(--color-brand-blue);
+	background-color: var(--brand-primary);
 	margin-inline-end: 29%;
 	border-bottom-left-radius: 30px;
 	box-shadow: none;
@@ -1652,9 +1647,9 @@ body {
 	width: 80%;
 	line-height: 1.5;
 	text-align: justify;
-	background-color: var(--color-bg-gray);
-	background-color: var(--color-bg-white);
-	color: var(--color-quaternary-text);
+	background-color: var(--bg-surface-alt);
+	background-color: var(--bg-body);
+	color: var(--text-quaternary);
 	}
 	
 	
@@ -1673,7 +1668,7 @@ body {
 	margin-block-end: 10px;
 	padding: 8px;
 	padding-inline-start: 16px;
-	border: 1px solid var(--color-border-light-alt);
+	border: 1px solid var(--border-subtle);
 	border-radius: 10px;
 	}
 .insidenote {
@@ -1701,7 +1696,7 @@ body {
 	margin-block-end: 10px;
 	padding: 8px;
 	padding-inline-start: 16px;
-	border: 1px solid var(--color-border-light-alt);
+	border: 1px solid var(--border-subtle);
 	border-radius: 10px;
 	}
 .insideinfonote {
@@ -1725,8 +1720,8 @@ aside {
 	}
 
 h1, h2  {
-	background-color: var(--color-bg-white);
-    color: var(--color-secondary-text);
+	background-color: var(--bg-body);
+    color: var(--text-secondary);
 	}
 h2 {
 	padding-inline-start: 0;
@@ -1734,7 +1729,7 @@ h2 {
 	page-break-after: avoid;
 	padding-block-start: 3em;
 	/*text-transform:none; */
-	border-bottom: 1px solid var(--color-border-light-gray);
+	border-bottom: 1px solid var(--border-neutral);
     font-weight: normal;
 	}
 h2#quicksummary {
@@ -1756,20 +1751,20 @@ div.h4  {
 	}
 
 h2 a:link {
-	color: var(--color-secondary-text);
+	color: var(--text-secondary);
 	text-decoration: none;
 	font-weight: 300;
 	}
 h2 a:visited {
-	color: var(--color-secondary-text);
+	color: var(--text-secondary);
 	text-decoration: none;
 	}
 section h3 a:link {
 	text-decoration: none;
-	color: var(--color-secondary-text);
+	color: var(--text-secondary);
 	}
 section h3 a:visited {
-	color: var(--color-secondary-text);
+	color: var(--text-secondary);
 	}
 
 
@@ -1823,8 +1818,8 @@ table { margin-inline-start: 7.5%;  }
 }   /* END OF @media print */
 
 
-ins { background-color: var(--color-yellow-light); }
-del { color: var(--color-border-light); text-decoration: line-through; }
+ins { background-color: var(--highlight); }
+del { color: var(--border); text-decoration: line-through; }
 
 
 
@@ -1840,7 +1835,7 @@ h2 > a.selflink, h3 > a.selflink, h4 > a.selflink, h5 > a.selflink, h6 > a.selfl
     color: inherit;
     font-size: 83%;
     text-align: center;
-    background-color: var(--color-bg-transparent);
+    background-color: var(--bg-transparent);
     }
 h2:hover > a.selflink, h3 > a.selflink, h4 > a.selflink, h5 > a.selflink, h6 > a.selflink {
     border: none;

From dc4ebbf2b29f52aaa77bbaefc74b848b353a2592 Mon Sep 17 00:00:00 2001
From: Fuqiao Xue <xfq@w3.org>
Date: Thu, 21 Aug 2025 20:05:00 +0800
Subject: [PATCH 3/3] fix

---
 style/sitepage-2022.css | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/style/sitepage-2022.css b/style/sitepage-2022.css
index 913108e5..706b028b 100644
--- a/style/sitepage-2022.css
+++ b/style/sitepage-2022.css
@@ -45,7 +45,6 @@
 
     /* Border */
     --border: #CCC;
-    --border-subtle: #ccc;
     --border-muted: gray;
     --border-neutral: #eee;
     --border-accent: #C66;
@@ -1353,7 +1352,7 @@ table, td, th {
 	font-size: 1em;
 	}
 table td {
-	border: 1px solid var(--border-subtle);
+	border: 1px solid var(--border);
 	vertical-align: top;
 	text-align: start;
 	border-collapse: collapse;
@@ -1483,7 +1482,7 @@ table th {
 
 /* quick check form in side bar */
 
-.quickcheck input { border:1px solid var(--border-subtle); color: var(--text-muted); width:100%; padding: 2px; border-radius: 5px; }
+.quickcheck input { border:1px solid var(--border); color: var(--text-muted); width:100%; padding: 2px; border-radius: 5px; }
 .quickcheck button[type=submit] {border:0;background-color: var(--bg-quick-check-button); padding: 2px 5px 2px 5px; border-radius: 5px; }
 .quickcheck .guide { font-size:75%; font-style:italic; }
 .quickcheck p { margin-block-end: 5px; margin-block-start: 5px; color: var(--danger-muted); color: var(--text-secondary); }
@@ -1668,7 +1667,7 @@ body {
 	margin-block-end: 10px;
 	padding: 8px;
 	padding-inline-start: 16px;
-	border: 1px solid var(--border-subtle);
+	border: 1px solid var(--border);
 	border-radius: 10px;
 	}
 .insidenote {
@@ -1696,7 +1695,7 @@ body {
 	margin-block-end: 10px;
 	padding: 8px;
 	padding-inline-start: 16px;
-	border: 1px solid var(--border-subtle);
+	border: 1px solid var(--border);
 	border-radius: 10px;
 	}
 .insideinfonote {