diff --git a/build.js b/build.js
index 3e4bbf0..78030d6 100644
--- a/build.js
+++ b/build.js
@@ -10,25 +10,27 @@ const postcss = require("postcss");
 
 const { homepage, version } = require("./package.json");
 
-function buildCSS() {
+function buildCSS(preserveVariables) {
   const input =
     `/*! 98.css v${version} - ${homepage} */\n` + fs.readFileSync("style.css");
+  const destination = preserveVariables ? "dist/98-full.css" : "dist/98.css";
+  const template = preserveVariables ? "[name]-full.[ext]" : "[name].[ext]";
 
   return postcss()
     .use(require("postcss-inline-svg"))
-    .use(require("postcss-css-variables"))
+    .use(require("postcss-css-variables")({ preserve: preserveVariables }))
     .use(require("postcss-calc"))
-    .use(require("postcss-copy")({ dest: "dist", template: "[name].[ext]" }))
+    .use(require("postcss-copy")({ dest: "dist", template }))
     .use(require("cssnano"))
     .process(input, {
       from: "style.css",
-      to: "dist/98.css",
+      to: destination,
       map: { inline: false },
     })
     .then((result) => {
       mkdirp.sync("dist");
-      fs.writeFileSync("dist/98.css", result.css);
-      fs.writeFileSync("dist/98.css.map", result.map.toString());
+      fs.writeFileSync(destination, result.css);
+      fs.writeFileSync(destination + ".map", result.map.toString());
     });
 }
 
@@ -72,7 +74,8 @@ function buildDocs() {
 }
 
 function build() {
-  buildCSS()
+  buildCSS(false)
+    .then(() => buildCSS(true))
     .then(buildDocs)
     .catch((err) => console.log(err));
 }
diff --git a/docs/docs.css b/docs/docs.css
index 74793c9..d56627e 100644
--- a/docs/docs.css
+++ b/docs/docs.css
@@ -2,6 +2,7 @@ body {
   margin: 0;
   padding: 0;
   background: #c0c0c0;
+  background: var(--button-face, #c0c0c0);
 }
 
 main {
@@ -80,6 +81,7 @@ blockquote {
   margin: 0 0 20px;
   padding: 20px;
   background: #dfdfdf;
+  background: var(--button-light, #dfdfdf);
 }
 
 blockquote footer {
@@ -90,6 +92,7 @@ blockquote footer {
   margin: 16px 0;
   padding: 12px 24px;
   border-left: 1px solid #808080;
+  border-left: 1px solid var(--button-shadow, #808080);
 }
 
 details {
@@ -112,12 +115,15 @@ details[open] summary {
 
 button.focused {
   outline: 1px dotted #000000;
+  outline: 1px dotted var(--button-text, #000000);
   outline-offset: -4px;
 }
 
 button.active {
   box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a,
     inset -2px -2px #dfdfdf, inset 2px 2px #808080;
+  box-shadow: inset -1px -1px var(--button-hilight, #ffffff), inset 1px 1px var(--button-shadow, #0a0a0a),
+    inset -2px -2px var(--button-light, #dfdfdf), inset 2px 2px var(--button-dk-shadow, #808080);
 }
 
 @media (max-width: 480px) {
diff --git a/style.css b/style.css
index d5a6af2..a25ca2f 100644
--- a/style.css
+++ b/style.css
@@ -6,16 +6,46 @@
 
 :root {
   /* Color */
-  --surface: #c0c0c0;
-  --button-highlight: #ffffff;
-  --button-face: #dfdfdf;
-  --button-shadow: #808080;
-  --window-frame: #0a0a0a;
-  --dialog-blue: #000080;
-  --dialog-blue-light: #1084d0;
-  --dialog-gray: #808080;
-  --dialog-gray-light: #b5b5b5;
-  --link-blue: #0000ff;
+  /* Legacy variables for backwards compatibility */
+  --surface: rgb(192, 192, 192);
+  --button-highlight: rgb(255, 255, 255);
+  --dialog-blue: rgb(0, 0, 128);
+  --dialog-blue-light: rgb(16, 132, 208);
+  --dialog-gray: rgb(128, 128, 128);
+  --dialog-gray-light: rgb(181, 181, 181);
+  --link-blue: rgb(0, 0, 128);
+
+  --active-border: rgb(192, 192, 192);
+  --active-title: var(--dialog-blue);
+  --app-workspace: rgb(128, 128, 128);
+  --background: rgb(0, 128, 128);
+  --button-alternate-face: rgb(192, 192, 192);
+  --button-dk-shadow: rgb(0, 0, 0);
+  --button-face: var(--surface);
+  --button-hilight: var(--button-highlight);
+  --button-light: rgb(223, 223, 223);
+  --button-shadow: rgb(128, 128, 128);
+  --button-text: rgb(0, 0, 0);
+  --gradient-active-title: var(--dialog-blue-light);
+  --gradient-inactive-title: var(--dialog-gray-light);
+  --gray-text: rgb(128, 128, 128);
+  --hilight: rgb(0, 0, 128);
+  --hilight-text: rgb(255, 255, 255);
+  --hot-tracking-color: var(--link-blue);
+  --inactive-border: rgb(192, 192, 192);
+  --inactive-title: var(--dialog-gray);
+  --inactive-title-text: rgb(192, 192, 192);
+  --info-text: rgb(0, 0, 0);
+  --info-window: rgb(255, 255, 225);
+  --menu: rgb(192, 192, 192);
+  --menu-bar: rgb(192, 192, 192);
+  --menu-hilight: rgb(0, 0, 128);
+  --menu-text: rgb(0, 0, 0);
+  --scrollbar: rgb(192, 192, 192);
+  --title-text: rgb(255, 255, 255);
+  --window: rgb(255, 255, 255);
+  --window-frame: rgb(0, 0, 0);
+  --window-text: rgb(0, 0, 0);
 
   /* Spacing */
   --element-spacing: 8px;
@@ -28,46 +58,39 @@
   --range-spacing: 10px;
 
   /* Some detailed computations for radio buttons and checkboxes */
-  --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
-  --radio-total-width: calc(var(--radio-total-width-precalc));
-  --radio-left: calc(-1 * var(--radio-total-width-precalc));
+  --radio-total-width: calc(var(--radio-width) + var(--radio-label-spacing));
+  --radio-left: calc(-1 * var(--radio-total-width));
   --radio-dot-width: 4px;
-  --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
-  --radio-dot-left: calc(
-    -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
-        --radio-dot-width
-      ) / 2
-  );
+  --radio-dot-top: var(--radio-dot-width);
+  --radio-dot-left: calc(var(--radio-left) + var(--radio-dot-top));
 
-  --checkbox-total-width-precalc: var(--checkbox-width) +
-    var(--radio-label-spacing);
-  --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
-  --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
+  --checkbox-total-width: calc(var(--checkbox-width) + var(--radio-label-spacing));
+  --checkbox-left: calc(-1 * var(--checkbox-total-width));
   --checkmark-width: 7px;
   --checkmark-top: 3px;
   --checkmark-left: 3px;
 
   /* Borders */
   --border-width: 1px;
-  --border-raised-outer: inset -1px -1px var(--window-frame),
-    inset 1px 1px var(--button-highlight);
+  --border-raised-outer: inset -1px -1px var(--button-dk-shadow),
+    inset 1px 1px var(--button-hilight);
   --border-raised-inner: inset -2px -2px var(--button-shadow),
-    inset 2px 2px var(--button-face);
-  --border-sunken-outer: inset -1px -1px var(--button-highlight),
-    inset 1px 1px var(--window-frame);
-  --border-sunken-inner: inset -2px -2px var(--button-face),
+    inset 2px 2px var(--button-light);
+  --border-sunken-outer: inset -1px -1px var(--button-hilight),
+    inset 1px 1px var(--button-dk-shadow);
+  --border-sunken-inner: inset -2px -2px var(--button-light),
     inset 2px 2px var(--button-shadow);
 
-  /* Window borders flip button-face and button-highlight */
-  --border-window-outer: inset -1px -1px var(--window-frame),
-    inset 1px 1px var(--button-face);
+  /* Window borders flip button-light and button-hilight */
+  --border-window-outer: inset -1px -1px var(--button-dk-shadow),
+    inset 1px 1px var(--button-light);
   --border-window-inner: inset -2px -2px var(--button-shadow),
-    inset 2px 2px var(--button-highlight);
+    inset 2px 2px var(--button-hilight);
 
-  /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
-  --border-field: inset -1px -1px var(--button-highlight),
-    inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
-    inset 2px 2px var(--window-frame);
+  /* Field borders (checkbox, input, etc) flip button-dk-shadow and button-shadow */
+  --border-field: inset -1px -1px var(--button-hilight),
+    inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-light),
+    inset 2px 2px var(--button-dk-shadow);
 }
 
 @font-face {
@@ -89,7 +112,7 @@
 body {
   font-family: Arial;
   font-size: 12px;
-  color: #222222;
+  color: var(--button-text);
 }
 
 button,
@@ -124,13 +147,14 @@ h4 {
 
 u {
   text-decoration: none;
-  border-bottom: 0.5px solid #222222;
+  border-bottom: 0.5px solid var(--button-text);
 }
 
 button {
   box-sizing: border-box;
   border: none;
-  background: var(--surface);
+  color: var(--button-text);
+  background: var(--button-face);
   box-shadow: var(--border-raised-outer), var(--border-raised-inner);
   border-radius: 0;
 
@@ -142,7 +166,7 @@ button {
 .vertical-bar {
   width: 4px;
   height: 20px;
-  background: #c0c0c0;
+  background: var(--button-face);
   box-shadow: var(--border-raised-outer), var(--border-raised-inner);
 }
 
@@ -158,7 +182,7 @@ button:not(:disabled):active {
 }
 
 button:focus {
-  outline: 1px dotted #000000;
+  outline: 1px dotted var(--button-text);
   outline-offset: -4px;
 }
 
@@ -173,20 +197,21 @@ button::-moz-focus-inner {
 
 button:disabled,
 :disabled + label {
-  text-shadow: 1px 1px 0 var(--button-highlight);
+  text-shadow: 1px 1px 0 var(--button-hilight);
 }
 
 .window {
   box-shadow: var(--border-window-outer), var(--border-window-inner);
-  background: var(--surface);
+  color: var(--button-text);
+  background: var(--button-face);
   padding: 3px;
 }
 
 .title-bar {
   background: linear-gradient(
     90deg,
-    var(--dialog-blue),
-    var(--dialog-blue-light)
+    var(--active-title),
+    var(--gradient-active-title)
   );
   padding: 3px 2px 3px 3px;
   display: flex;
@@ -197,14 +222,14 @@ button:disabled,
 .title-bar.inactive {
   background: linear-gradient(
     90deg,
-    var(--dialog-gray),
-    var(--dialog-gray-light)
+    var(--inactive-title),
+    var(--gradient-inactive-title)
   );
 }
 
 .title-bar-text {
   font-weight: bold;
-  color: white;
+  color: var(--title-text);
   letter-spacing: 0;
   margin-right: 24px;
 }
@@ -265,15 +290,15 @@ button:disabled,
 
 fieldset {
   border: none;
-  box-shadow: inset -1px -1px var(--button-highlight), inset -2px 1px var(--button-shadow),
-    inset 1px -2px var(--button-shadow), inset 2px 2px var(--button-highlight);
+  box-shadow: inset -1px -1px var(--button-hilight), inset -2px 1px var(--button-shadow),
+    inset 1px -2px var(--button-shadow), inset 2px 2px var(--button-hilight);
   padding: calc(2 * var(--border-width) + var(--element-spacing));
   padding-block-start: var(--element-spacing);
   margin: 0;
 }
 
 legend {
-  background: var(--surface);
+  background: var(--button-face);
 }
 
 .field-row {
@@ -329,7 +354,7 @@ input[type="radio"] + label::before {
   content: "";
   position: absolute;
   top: 0;
-  left: calc(-1 * (var(--radio-total-width-precalc)));
+  left: var(--radio-left);
   display: inline-block;
   width: var(--radio-width);
   height: var(--radio-width);
@@ -354,7 +379,7 @@ input[type="radio"]:checked + label::after {
 
 input[type="radio"]:focus + label,
 input[type="checkbox"]:focus + label {
-  outline: 1px dotted #000000;
+  outline: 1px dotted var(--button-text);
 }
 
 input[type="radio"][disabled] + label::before {
@@ -373,17 +398,17 @@ input[type="checkbox"] + label {
 input[type="checkbox"] + label::before {
   content: "";
   position: absolute;
-  left: calc(-1 * (var(--checkbox-total-width-precalc)));
+  left: var(--checkbox-left);
   display: inline-block;
   width: var(--checkbox-width);
   height: var(--checkbox-width);
-  background: var(--button-highlight);
+  background: var(--window);
   box-shadow: var(--border-field);
   margin-right: var(--radio-label-spacing);
 }
 
 input[type="checkbox"]:active + label::before {
-  background: var(--surface);
+  background: var(--button-face);
 }
 
 input[type="checkbox"]:checked + label::after {
@@ -393,14 +418,12 @@ input[type="checkbox"]:checked + label::after {
   height: var(--checkmark-width);
   position: absolute;
   top: var(--checkmark-top);
-  left: calc(
-    -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)
-  );
+  left: calc(var(--checkbox-left) + var(--checkmark-left));
   background: svg-load("./icon/checkmark.svg");
 }
 
 input[type="checkbox"][disabled] + label::before {
-  background: var(--surface);
+  background: var(--button-face);
 }
 
 input[type="checkbox"][disabled]:checked + label::after {
@@ -415,7 +438,8 @@ textarea {
   padding: 3px 4px;
   border: none;
   box-shadow: var(--border-field);
-  background-color: var(--button-highlight);
+  color: var(--window-text);
+  background-color: var(--window);
   box-sizing: border-box;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -441,7 +465,7 @@ input[type="email"]:disabled,
 input[type="password"]:disabled,
 input[type="text"]:disabled,
 textarea:disabled {
-  background-color: var(--surface);
+  background-color: var(--button-face);
 }
 
 select {
@@ -505,22 +529,36 @@ input[type="range"]::-webkit-slider-runnable-track {
   width: 100%;
   height: 2px;
   box-sizing: border-box;
-  background: black;
-  border-right: 1px solid grey;
-  border-bottom: 1px solid grey;
-  box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
-    -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
+  background: var(--button-dk-shadow);
+  border-right: 1px solid var(--button-light);
+  border-bottom: 1px solid var(--button-light);
+  box-shadow:
+    1px 0 0 var(--button-hilight),
+    1px 1px 0 var(--button-hilight),
+    0 1px 0 var(--button-hilight),
+    -1px 0 0 var(--button-shadow),
+    -1px -1px 0 var(--button-shadow),
+    0 -1px 0 var(--button-shadow),
+    -1px 1px 0 var(--button-hilight),
+    1px -1px var(--button-shadow);
 }
 
 input[type="range"]::-moz-range-track {
   width: 100%;
   height: 2px;
   box-sizing: border-box;
-  background: black;
-  border-right: 1px solid grey;
-  border-bottom: 1px solid grey;
-  box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
-    -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
+  background: var(--button-dk-shadow);
+  border-right: 1px solid var(--button-light);
+  border-bottom: 1px solid var(--button-light);
+  box-shadow:
+    1px 0 0 var(--button-hilight),
+    1px 1px 0 var(--button-hilight),
+    0 1px 0 var(--button-hilight),
+    -1px 0 0 var(--button-shadow),
+    -1px -1px 0 var(--button-shadow),
+    0 -1px 0 var(--button-shadow),
+    -1px 1px 0 var(--button-hilight),
+    1px -1px var(--button-shadow);
 }
 
 .is-vertical {
@@ -540,19 +578,33 @@ input[type="range"]::-moz-range-track {
 }
 
 .is-vertical > input[type="range"]::-webkit-slider-runnable-track {
-  border-left: 1px solid grey;
+  border-left: 1px solid var(--button-light);
   border-right: 0;
-  border-bottom: 1px solid grey;
-  box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
-    1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;
+  border-bottom: 1px solid var(--button-light);
+  box-shadow:
+    -1px 0 0 var(--button-hilight),
+    -1px 1px 0 var(--button-hilight),
+    0 1px 0 var(--button-hilight),
+    1px 0 0 var(--button-shadow),
+    1px -1px 0 var(--button-shadow),
+    0 -1px 0 var(--button-shadow),
+    1px 1px 0 var(--button-hilight),
+    -1px -1px var(--button-shadow);
 }
 
 .is-vertical > input[type="range"]::-moz-range-track {
-  border-left: 1px solid grey;
+  border-left: 1px solid var(--button-light);
   border-right: 0;
-  border-bottom: 1px solid grey;
-  box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
-    1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;
+  border-bottom: 1px solid var(--button-light);
+  box-shadow:
+    -1px 0 0 var(--button-hilight),
+    -1px 1px 0 var(--button-hilight),
+    0 1px 0 var(--button-hilight),
+    1px 0 0 var(--button-shadow),
+    1px -1px 0 var(--button-shadow),
+    0 -1px 0 var(--button-shadow),
+    1px 1px 0 var(--button-hilight),
+    -1px -1px var(--button-shadow);
 }
 
 .is-vertical > input[type="range"]::-webkit-slider-thumb {
@@ -572,12 +624,12 @@ input[type="range"]::-moz-range-track {
 }
 
 select:focus {
-  color: var(--button-highlight);
-  background-color: var(--dialog-blue);
+  color: var(--hilight-text);
+  background-color: var(--hilight);
 }
 select:focus option {
-  color: #000;
-  background-color: #fff;
+  color: var(--window-text);
+  background-color: var(--window);
 }
 
 select:active {
@@ -585,16 +637,17 @@ select:active {
 }
 
 a {
-  color: var(--link-blue);
+  color: var(--hot-tracking-color);
 }
 
 a:focus {
-  outline: 1px dotted var(--link-blue);
+  outline: 1px dotted var(--hot-tracking-color);
 }
 
 ul.tree-view {
   display: block;
-  background: var(--button-highlight);
+  color: var(--window-text);
+  background: var(--window);
   box-shadow: var(--border-field);
   padding: 6px;
   margin: 0;
@@ -606,12 +659,12 @@ ul.tree-view li {
 
 ul.tree-view a {
   text-decoration: none;
-  color: #000;
+  color: var(--window-text);
 }
 
 ul.tree-view a:focus {
-  background-color: var(--dialog-blue);
-  color: var(--button-highlight);
+  background-color: var(--hilight);
+  color: var(--hilight-text);
 }
 
 ul.tree-view ul,
@@ -623,7 +676,7 @@ ul.tree-view ul {
   margin-left: 16px;
   padding-left: 16px;
   /* Goes down too far */
-  border-left: 1px dotted #808080;
+  border-left: 1px dotted var(--gray-text);
 }
 
 ul.tree-view ul > li {
@@ -636,7 +689,7 @@ ul.tree-view ul > li::before {
   left: -16px;
   top: 6px;
   width: 12px;
-  border-bottom: 1px dotted #808080;
+  border-bottom: 1px dotted var(--gray-text);
 }
 
 /* Cover the bottom of the left dotted border */
@@ -648,7 +701,7 @@ ul.tree-view ul > li:last-child::after {
   top: 7px;
   bottom: 0px;
   width: 8px;
-  background: var(--button-highlight);
+  background: var(--window);
 }
 
 ul.tree-view details {
@@ -670,13 +723,13 @@ ul.tree-view details > summary:before {
   display: block;
   float: left;
   content: "+";
-  border: 1px solid #808080;
+  border: 1px solid var(--gray-text);
   width: 8px;
   height: 9px;
   line-height: 8px;
   margin-right: 5px;
   padding-left: 1px;
-  background-color: #fff;
+  background-color: var(--window);
 }
 
 ul.tree-view details[open] > summary:before {
@@ -685,7 +738,8 @@ ul.tree-view details[open] > summary:before {
 
 pre {
   display: block;
-  background: var(--button-highlight);
+  color: var(--window-text);
+  background: var(--window);
   box-shadow: var(--border-field);
   padding: 12px 8px;
   margin: 0;
@@ -697,7 +751,7 @@ code * {
 }
 
 summary:focus {
-  outline: 1px dotted #000000;
+  outline: 1px dotted var(--button-text);
 }
 
 ::-webkit-scrollbar {
@@ -708,7 +762,7 @@ summary:focus {
 }
 
 ::-webkit-scrollbar-corner {
-  background: var(--button-face);
+  background: var(--button-light);
 }
 
 ::-webkit-scrollbar-track {
@@ -716,7 +770,7 @@ summary:focus {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--button-face);
+  background-color: var(--button-light);
   box-shadow: var(--border-raised-outer), var(--border-raised-inner);
 }