diff --git a/style/sitepage-2022.css b/style/sitepage-2022.css
index c4206e6d..706b028b 100644
--- a/style/sitepage-2022.css
+++ b/style/sitepage-2022.css
@@ -1,3 +1,69 @@
+:root {
+    /* 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-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 {
     font-family: 'RalewayWF';
     src: url('fonts/raleway-regular-webfont.woff2') format('woff2');
@@ -40,11 +106,11 @@
 
 body {
     line-height: 1.75;
-	color: #333;
+	color: var(--text-primary);
 	font-weight: 400;
 	margin: 0;
 	padding: 0;
-	background-color: white;
+	background-color: var(--bg-body);
 	font-family: RalewayWF, Helvetica, 'Helvetica Neue', Arial, "Segoe UI", sans-serif;
 	hyphens: auto;
 	}
@@ -191,7 +257,7 @@ body.obsolete h2, body.obsolete h3 {
     }
 
 #level2toc {
-    border-inline-start: solid 3px #f9c818;
+    border-inline-start: solid 3px var(--brand-warning);
     }
 
 .directory {
@@ -309,7 +375,7 @@ aside:dir(rtl) {
 	}
 #mainNavigationAside {
 	max-width: 15em;
-    background-color: antiquewhite;
+    background-color: var(--bg-surface-accent);
     border-bottom-left-radius: 1em;
     padding-block-end: 1em;
     }
@@ -320,7 +386,7 @@ aside h2 {
 	text-transform: none;
 	text-align: center;
     font-weight: normal;
-    color: #333;
+    color: var(--text-primary);
     border: 0;
     hyphens: none;
 	}
@@ -348,18 +414,18 @@ aside li {
 
 a {
 	text-decoration: none;
-	color: teal;
+	color: var(--link);
 	}
 /*#toc a {
     color: darkslategray;
 	}*/
 a:visited {
-    color: #036;
-	color: brown;
+    color: var(--link-visited);
+	color: var(--link-visited-alt);
 	}
 a:hover {
-	color:  #005a9c;
-	background: #FFC;
+	color: var(--link-hover);
+	background: var(--bg-surface-hover);
 	text-decoration: underline;
 	}
 	
@@ -370,7 +436,7 @@ header a {
 
 .eyecatcher, .highlightLink {
     font-size: 140%;
-    color: #E8941D;
+    color: var(--brand-orange);
     font-weight: 400;
     /*white-space: nowrap;*/
     }
@@ -384,7 +450,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(--brand-accent-strong);
     }
 
 
@@ -423,70 +489,69 @@ header a {
 	white-space: nowrap;
 	}
 #site-navigation a:link {
-    color: #5C7A7A;
+    color: var(--link-nav);
 	}
 #site-navigation a:active {
-	background-color: white; 
-    color: #5C7A7A;
+	background-color: var(--bg-body);
+    color: var(--link-nav);
 	}
 #site-navigation a:visited {
-	background-color: white; 
+	background-color: var(--bg-body);
 	text-decoration: none;
-    color: #5C7A7A;
+    color: var(--link-nav);
 	}
 #site-navigation a:hover {
-	color: white;
-	background-color: #003163; 
+	color: var(--bg-body);
+	background-color: var(--brand-primary);
 	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(--bg-transparent);
 	}
 #disclaimer p {
-	font-size: 115%; 
+	font-size: 115%;
 	line-height: 1.2em;
-    color: brown;
+    color: var(--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(--bg-search-field);
 	border: 0;
 	margin-inline-end: 5px;
 	}
 #searchSite {
-	background-color: teal;
-	color: #7FFFD4;
+	background-color: var(--brand-accent);
+	color: var(--link-contrast);
 	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(--brand-accent);
 	cursor:pointer;
     height: 2em;
-    color: white;
+    color: var(--bg-body);
 	}
 #searchSite input::placeholder {
-    color: white;
+    color: var(--bg-body);
     opacity: .9;
     }
 
@@ -555,20 +620,20 @@ header a {
 	}
 #siteicons a:hover {
 	text-decoration: none;
-	background-color: #003163;
-	color: white;
+	background-color: var(--brand-primary);
+	color: var(--bg-body);
 	}
 #sitename {
     font-size: 22px;
-    border-bottom: 2px solid brown;
-    color: #4c5c9c;
+    border-bottom: 2px solid var(--brand-brown);
+    color: var(--brand-primary-alt);
     margin: 0;
     }
 #subtitle {
     margin:0;
     font-size:12px;
     font-style:italic;
-    color: #4c5c9c;
+    color: var(--brand-primary-alt);
     }
 #subtitle:lang(ja), #subtitle:lang(ko), #subtitle:lang(zh), #subtitle:lang(hi), #subtitle:lang(ar) {
     font-style: normal;
@@ -585,11 +650,11 @@ header a {
 	padding-inline-start: 0.75em;
 	}
 #sitelinks a:hover {
-	color: #005a9c;
+	color: var(--link-hover);
 	text-decoration: none;
 	}
 #sitelinks a:visited {
-	color: teal;
+	color: var(--brand-accent);
 	text-decoration: none;
 	}
 	
@@ -598,7 +663,7 @@ header a {
 /* ************** headings **************** */
 
 h1 {
-	background-color: white;
+	background-color: var(--bg-body);
 	padding: 5px;
 	padding-inline-start: 10px;
 	/*margin: 1em 32% 0 3%;*/
@@ -606,9 +671,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(--text-secondary);
     font-size: 3.25em;
     hyphens: none;
 	}
@@ -616,16 +681,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(--border-neutral);
 	text-transform: uppercase;
 	}
 h2 a:link {
     font-weight: bold;
-    color: #333;
+    color: var(--text-primary);
 	}
-h2 a:visited { 
-	color: #333;
+h2 a:visited {
+	color: var(--text-primary);
 	text-decoration: none;
 	}
 
@@ -636,26 +701,26 @@ h3 {
 	margin-block-end: 1em;
 	}
 h3 a:link {
-	color: #111;
+	color: var(--text-stronger);
 	}
-h3 a:visited { 
-	color: #333;
+h3 a:visited {
+	color: var(--text-primary);
 	}
 
 h4 {
     font-weight: bold;
-    color: #777;
+    color: var(--text-tertiary);
     font-style: italic;
     margin-block-start: 3em;
     margin-block-end: 0;
-    color: #222;
+    color: var(--text-strong);
     font-size: 90%;
     }
 h4 a:link {
-    color: #777;
+    color: var(--text-tertiary);
 	}
-h4 a:visited { 
-	color: #777;
+h4 a:visited {
+	color: var(--text-tertiary);
 	}
 
 h2 code, h3 code, h4 code {
@@ -665,29 +730,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(--brand-brown);
+    border-block-end: 3px solid var(--brand-brown);
     }
 #nutshell h2 {
 	font-size: 36px;
-	color: #900;
+	color: var(--danger-maroon);
 	margin-block-start: 10px;
 	/*margin-inline-start: 5%;*/
 	margin-inline-start: 0;
 	margin-inline-end: 20px;
-	background-color: transparent;
+	background-color: var(--bg-transparent);
 	padding-inline-start: 0;
 	}
 #nutshell h2 a:link {
-	color: brown;
+	color: var(--brand-brown);
     font-weight: normal;
 	}
 .nutshellIntro {
 	font-style: italic;
-	color: #777;
+	color: var(--text-tertiary);
 	font-size: 90%;
 	}
 #nutshell p, #nutshell .example { 
@@ -734,33 +799,33 @@ h2 code, h3 code, h4 code {
     width: 24%;
     font-size: 80%;
     line-height: 1.2em;
-    border: 1px solid #CCC;
+    border: 1px solid var(--border);
     padding: 5px 10px 5px 15px;
     border-radius: 10px;
 	}
 .sideinfonote {
-	color: #000066;
-	background-color:#f4f4fe;
-    background-color: antiquewhite;
-    color: #444;
+	color: var(--info-strong);
+	background-color: var(--bg-info);
+    background-color: var(--bg-surface-accent);
+    color: var(--text-quaternary);
 	}
 .implnote {
-	color: #666;
-	background-color:#ffeadd; 
-	background-color: white;
+	color: var(--text-secondary);
+	background-color: var(--bg-surface-warning);
+	background-color: var(--bg-body);
     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(--text-muted);
+    color: var(--brand-accent-strong);
 	}
 .info::before { content: 'i'; }
 .warning::before { content: '!'; }
@@ -805,21 +870,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(--border);
+	padding: 5px 10px 5px 15px;
+	border-radius: 10px;
 	clear: none;
 	}
 .insideinfonote {
-	color: #222;
-    background-color: antiquewhite;
-    background-color: bisque;
-    color: #444;
+	color: var(--text-strong);
+    background-color: var(--bg-surface-accent);
+    background-color: var(--bg-surface-accent-alt);
+    color: var(--text-quaternary);
 	}
 .insideimplnote {
-	color: #666;
-	min-height: 40px; 
-	background-color: white;
+	color: var(--text-secondary);
+	min-height: 40px;
+	background-color: var(--bg-body);
     border: 0;
 	}
 .insideinfonote p {
@@ -840,61 +905,60 @@ h2 code, h3 code, h4 code {
     width: 24%;
     font-size: 80%;
     line-height: 1.2em;
-    border: 1px solid #CCC;
+    border: 1px solid var(--border);
     padding: 5px 10px 5px 15px;
     border-radius: 10px;
-    color: #000066;
-    background-color: #f4f4fe;
+    color: var(--info-strong);
+    background-color: var(--bg-info);
     }
 
 
 .note {
-	color: #000066;
+	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:#eef; 
-	background-color: #ffdccb;
-	border: 1px solid #CCC; 
-	padding: 5px 10px 5px 15px; 
-	border-radius: 10px; 
+	background-color: var(--bg-note);
+	border: 1px solid var(--border);
+	padding: 5px 10px 5px 15px;
+	border-radius: 10px;
 	clear: both;
-    color: brown;
+    color: var(--brand-brown);
 	}
 .note b { font-size: 110%; font-weight: 700; padding-inline-end: 10px; }
 
 .strongnote {
-	color: #000066;
+	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:#eef; 
-	border: 1px solid #CCC; 
-	box-shadow: 7px 7px 5px #888; 
-	padding: 5px 10px 5px 15px; 
-	border-radius: 10px; 
+
+	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;
 	}
 .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(--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:#ffeadd; 
-	border: 1px solid #CCC; 
-	padding: 5px 10px 5px 15px; 
-	border-radius: 10px; 
+
+	background-color: var(--bg-surface-warning);
+	border: 1px solid var(--border);
+	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 +977,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(--border-muted);
+	border-bottom: 1px solid var(--border-muted);
 	}
 address p {
 	margin-block: .5em;
@@ -944,12 +1008,11 @@ 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(--bg-example);
+	border: 1px solid var(--border);
+	padding: 5px 10px 5px 15px;
+	border-radius: 5px;
 	}
 .example figcaption {
 	font-style: italic;
@@ -1009,7 +1072,7 @@ q	 { quotes: '"' '"' "'" "'"; }
 :lang(ar) .qchar { quotes: '\2019' '\2018'; }
 .qchar {
 	font-size: 100%;
-	color: #666;
+	color: var(--text-secondary);
 	font-family: "Times New Roman", Times, serif;
 	}
 .qchar:before {
@@ -1051,12 +1114,12 @@ mark {
 	font-weight:400;
     padding: 0 .3em;
     border-radius: 5px;
-    color: brown;
-    background-color: antiquewhite;
+    color: var(--brand-brown);
+    background-color: var(--bg-surface-accent);
 	}
 strong {
     font-weight: bold;
-	color: #666;
+	color: var(--text-secondary);
 	}
 code, samp {
 	font-family: Monaco, "Andale Mono", Consolas, monospace;
@@ -1085,18 +1148,18 @@ code.code2 {
 a.dfn:link {
 	color: inherit;
 	text-decoration: none;
-	border-bottom:1px dotted teal;
+	border-bottom:1px dotted var(--brand-accent);
 	}
 a.dfn:hover {
-	color:  #005a9c;
-	background: white;
+	color: var(--link-hover);
+	background: var(--bg-body);
 	text-decoration: none;
-	border-bottom:1px dotted teal;
+	border-bottom:1px dotted var(--brand-accent);
 	}
 a.dfn:visited {
 	color: inherit;
 	text-decoration: none;
-	border-bottom:1px dotted teal;
+	border-bottom:1px dotted var(--brand-accent);
 	}
 	
 
@@ -1130,10 +1193,10 @@ dt {
 	margin-block-start: 1em;
 	}
 .ed {
-	color: red;
+	color: var(--danger);
 	}
 fieldset {
-	color: #a52a2a;
+	color: var(--danger-muted);
 	}
 #footer {
 	margin-block-start: 5em;
@@ -1141,7 +1204,7 @@ fieldset {
 	border-bottom: 0;
 	border-inline-start: 0;
 	border-inline-end: 0;
-	border-color: #333;
+	border-color: var(--text-primary);
 	border-style: solid;
 	font-size: 90%;
 	}
@@ -1172,8 +1235,8 @@ img {
 	width: 28%;
 	clear: left;
 	}
-p.background-link { 
-	color: teal;
+p.background-link {
+	color: var(--brand-accent);
 	text-align: end;
 	margin-block-start: 0;
 	margin-block-end: 0;
@@ -1187,7 +1250,7 @@ p.background-link {
 	left: 72%;
 	top: 0;
 	width: 10px;
-	border-left: 2px dotted #005a9c;
+	border-left: 2px dotted var(--link-hover);
 	height: 30em;
 	}*/
 #logos {
@@ -1204,8 +1267,8 @@ p.background-link {
 	}
 #navigation {
 	line-height: 150%;
-	background-color: transparent;
-	color: #555;
+	background-color: var(--bg-transparent);
+	color: var(--text-quaternary);
 	font-weight: 700;
 	margin-block-start: 3em;
 	margin-block-end: 1.5em;
@@ -1217,15 +1280,15 @@ p.background-link {
 	}
 #audience {
 	line-height: normal;
-	font-weight: 300; 
-	color: gray;
+	font-weight: 300;
+	color: var(--border-muted);
 	margin-block-start: 4em;
 	margin-block-end: 2em;
 	font-size: 90%;
 	}
 #audience .leadin {
 	font-weight: 400;
-	color: #555;
+	color: var(--text-quaternary);
 	text-transform: lowercase;
 	}
 #audience .leadin:lang(de) { text-transform: none; }
@@ -1254,7 +1317,7 @@ pre {
 	}
 .question {
 	font-weight: 700;
-	color: #000;
+	color: var(--text-emphasis);
 	}
 .sidebar {
 	float: right;
@@ -1275,24 +1338,24 @@ pre {
 
 
 span#scale {
-	white-space: nowrap; 
-	color: gray;
+	white-space: nowrap;
+	color: var(--border-muted);
 	}
 span.searchkey {
 	font-style: italic;
 	}
 span.surveyScale {
-	white-space: nowrap; 
-	color: gray;
+	white-space: nowrap;
+	color: var(--border-muted);
 	}
 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(--border);
+	vertical-align: top;
+	text-align: start;
+	border-collapse: collapse;
 	padding: 4px;
 	}
 table th { 
@@ -1328,11 +1391,11 @@ table th {
 	width: 20%;
   	max-width: 250px;
 	padding: 20px;
-	color: #666;
+	color: var(--text-secondary);
 	line-height: 1.4;
 	position: absolute;
 	right: 0;
-    background-color: antiquewhite;
+    background-color: var(--bg-surface-accent);
 	}
 #survey:dir(rtl) {
     left: 0;
@@ -1348,25 +1411,25 @@ table th {
 	margin-inline-start: 10px; 
 	margin-inline-end: 10px; 
 	}
-#survey a.interaction { 
+#survey a.interaction {
   font-size: 130%;
-  color: #e70;
+  color: var(--brand-orange-strong);
   }
 #survey button.interaction {
   font-size: 130%;
-  color: #e70;
-  background-color: #ffffff; 
-  border: 0; 
-  margin: 0; 
+  color: var(--brand-orange-strong);
+  background-color: var(--bg-body);
+  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(--brand-orange-strong);
+  border: 0;
+  margin: 0;
   padding: 0;
   cursor: pointer;
   }
@@ -1386,14 +1449,14 @@ table th {
 
 #print-author {
 	font-size: 110%;
-	color: #005a9c;
+	color: var(--link-hover);
 	margin-block-start: 4em;
 	font-weight: 700;
 	display: none;
 	}
 #print-uri {
 	font-size: 100%;
-	color: #005a9c;
+	color: var(--link-hover);
 	display: none;
 	margin-block-end: 2em;
 	}
@@ -1411,18 +1474,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(--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 #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(--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:#A52a2a; color:#666; }
+.quickcheck p { margin-block-end: 5px; margin-block-start: 5px; color: var(--danger-muted); color: var(--text-secondary); }
 
 
 	
@@ -1430,7 +1493,7 @@ dfn {
 	font-weight:700;
 	font-style: normal;
 	}
-a.termref { border-bottom: 1px dotted #C66; } 
+a.termref { border-bottom: 1px dotted var(--border-accent); }
 cite {
 	font-style: italic;
 	}
@@ -1440,14 +1503,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(--text-muted); line-height: 1em; }
 .badcode img { vertical-align: text-top }
 
-.acknowledgements { font-size: 80%; color: gray; }
+.acknowledgements { font-size: 80%; color: var(--border-muted); }
 
 
 img.shadow {
-	box-shadow: 7px 7px 5px #999; 
+	box-shadow: 7px 7px 5px var(--shadow);
 	}
 
 
@@ -1509,32 +1572,32 @@ bdo[dir='ltr'], bdo[dir='rtl'] {
 #printLinks {
 	display: block;
 	}
-a.print:after { 
+a.print:after {
 	content: " [" attr(title) "] ";
-	color: #888;
+	color: var(--neutral);
 	font-size: 85%;
 	}
 
-#full-links a:after { 
+#full-links a:after {
 	content: " (" attr(href) ") ";
-	color: #888;
+	color: var(--neutral);
 	font-size: 85%;
-	} 
+	}
 
 .kw {
-    color: #666;
+    color: var(--text-secondary);
     font-family: "Courier New", monospaced;
     font-size: 100%;
 }
 
 a {
 	text-decoration: none;
-	color: #666;
+	color: var(--text-secondary);
 	font-weight: 400;
 	}
 a:visited {
 	font-weight: 400;
-	color: #666;
+	color: var(--text-secondary);
 	}
 
 
@@ -1546,32 +1609,32 @@ body {
 	font-size: 10pt;
     font-family: Helvetica, 'Helvetica Neue', Arial, "Segoe UI", sans-serif;
     line-height: 1.75;
-	color: #666;
+	color: var(--text-secondary);
 	font-weight: normal;
 	margin: 0;
 	padding: 0;
-	background-color: white;
+	background-color: var(--bg-body);
 	}
 
 #siteicons {
-	background-color: #003163;
+	background-color: var(--brand-primary);
 	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(--brand-primary);
 	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(--brand-primary);
 	margin-inline-end: 29%;
 	border-bottom-left-radius: 30px;
-	box-shadow: none; 
+	box-shadow: none;
 	padding: 0; height: 49px;
 	}
 
@@ -1583,9 +1646,9 @@ body {
 	width: 80%;
 	line-height: 1.5;
 	text-align: justify;
-	background-color: #cccc99;
-	background-color: white;
-	color: #555;
+	background-color: var(--bg-surface-alt);
+	background-color: var(--bg-body);
+	color: var(--text-quaternary);
 	}
 	
 	
@@ -1599,14 +1662,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(--border);
 	border-radius: 10px;
-	}	
+	}
 .insidenote {
 	position: static;
 	font-size: 80%;
@@ -1627,14 +1690,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(--border);
 	border-radius: 10px;
-	}	
+	}
 .insideinfonote {
 	position: static;
 	font-size: 80%;
@@ -1656,8 +1719,8 @@ aside {
 	}
 
 h1, h2  {
-	background-color: white;
-    color: #666;
+	background-color: var(--bg-body);
+    color: var(--text-secondary);
 	}
 h2 {
 	padding-inline-start: 0;
@@ -1665,7 +1728,7 @@ h2 {
 	page-break-after: avoid;
 	padding-block-start: 3em;
 	/*text-transform:none; */
-	border-bottom: 1px solid #eee;
+	border-bottom: 1px solid var(--border-neutral);
     font-weight: normal;
 	}
 h2#quicksummary {
@@ -1687,20 +1750,20 @@ div.h4  {
 	}
 
 h2 a:link {
-	color: #666;
+	color: var(--text-secondary);
 	text-decoration: none;
 	font-weight: 300;
 	}
-h2 a:visited { 
-	color: #666;
+h2 a:visited {
+	color: var(--text-secondary);
 	text-decoration: none;
 	}
-section h3 a:link { 
+section h3 a:link {
 	text-decoration: none;
-	color: #666;
+	color: var(--text-secondary);
 	}
-section h3 a:visited { 
-	color: #666;
+section h3 a:visited {
+	color: var(--text-secondary);
 	}
 
 
@@ -1754,8 +1817,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(--highlight); }
+del { color: var(--border); text-decoration: line-through; }
 
 
 
@@ -1771,7 +1834,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(--bg-transparent);
     }
 h2:hover > a.selflink, h3 > a.selflink, h4 > a.selflink, h5 > a.selflink, h6 > a.selflink {
     border: none;