app-proto/main.css

@@ -1,7 +1,19 @@
+:root {
+  --text: #fcfcfc; /* almost white */
+  --text-bright: white;
+  --text-invalid: #f58fc2; /* bright pink */
+  --border: #555; /* light gray */
+  --border-focus: #aaa; /* bright gray */
+  --border-invalid: #70495c; /* dusky pink */
+  --selection-highlight: #444; /* medium gray */
+  --page-background: #222; /* dark gray */
+  --display-background: #020202; /* almost black */
+}
+
 body {
   margin: 0px;
-  color: #fcfcfc;
-  background-color: #222;
+  color: var(--text);
+  background-color: var(--page-background);
   font-family: 'Fira Sans', sans-serif;
 }
 
@@ -17,7 +29,7 @@ body {
   padding: 0px;
   border-width: 0px 1px 0px 0px;
   border-style: solid;
-  border-color: #555;
+  border-color: var(--border);
 }
 
 /* add-remove */
@@ -57,8 +69,8 @@ summary {
 }
 
 summary.selected {
-  color: #fff;
-  background-color: #444;
+  color: var(--text-bright);
+  background-color: var(--selection-highlight);
 }
 
 summary > div, .constraint {
@@ -112,7 +124,7 @@ details[open]:has(li) .element-switch::after {
 }
 
 .constraint.invalid {
-  color: #f58fc2;
+  color: var(--text-invalid);
 }
 
 .constraint > input[type=checkbox] {
@@ -122,12 +134,12 @@ details[open]:has(li) .element-switch::after {
 .constraint > input[type=text] {
   color: inherit;
   background-color: inherit;
-  border: 1px solid #555;
+  border: 1px solid var(--border);
   border-radius: 2px;
 }
 
 .constraint.invalid > input[type=text] {
-  border-color: #70495c;
+  border-color: var(--border-invalid);
 }
 
 .status {
@@ -140,7 +152,7 @@ details[open]:has(li) .element-switch::after {
 
 .invalid > .status::after, details:has(.invalid):not([open]) .status::after {
   content: '⚠';
-  color: #f58fc2;
+  color: var(--text-invalid);
 }
 
 /* display */
@@ -149,11 +161,11 @@ canvas {
   float: left;
   margin-left: 20px;
   margin-top: 20px;
-  background-color: #020202;
-  border: 1px solid #555;
+  background-color: var(--display-background);
+  border: 1px solid var(--border);
   border-radius: 16px;
 }
 
 canvas:focus {
-  border-color: #aaa;
+  border-color: var(--border-focus);
 }