Move color definitions to variables

app/assets/stylesheets/application.css

@@ -23,6 +23,15 @@
  *   light red: #ff1f5b
  * */
 
+:root {
+  --color-focus-gray: #f3f3f3;
+  --color-border-gray: #dddddd;
+  --color-nav-gray: #c7c7c7;
+  --color-gray: #a0a0a0;
+  --color-table-gray: #909090;
+  --color-text-gray: #707070;
+}
+
 *,
 ::before,
 ::after {
@@ -69,9 +78,9 @@ a,
 button,
 input[type=submit] {
   align-items: center;
-  color: #a0a0a0;
+  color: var(--color-gray);
   cursor: pointer;
-  fill: #a0a0a0;
+  fill: var(--color-gray);
   font-weight: bold;
   text-decoration: none;
 }
@@ -91,7 +100,7 @@ select {
 button,
 input,
 select {
-  border: solid 1px #a0a0a0;
+  border: solid 1px var(--color-gray);
   border-radius: 0.25em;
 }
 .button > svg,
@@ -108,7 +117,7 @@ button > svg {
 .button:focus-visible,
 button:focus-visible,
 input[type=submit]:focus-visible {
-  background-color: #f3f3f3;
+  background-color: var(--color-focus-gray);
 }
 .button:hover,
 button:hover,
@@ -148,7 +157,7 @@ input:focus-visible,
 select:focus-within,
 select:focus-visible {
   accent-color: #006c9b;
-  background-color: #f3f3f3;
+  background-color: var(--color-focus-gray);
 }
 input[type=text]:read-only {
   border: none;
@@ -173,7 +182,7 @@ input[type=text]:read-only {
   margin-inline-start: 4%;
 }
 .navigation > .tab {
-  border-bottom: solid 2px #c7c7c7;
+  border-bottom: solid 2px var(--color-nav-gray);
   display: flex;
   flex: 1;
   font-size: 1rem;
@@ -182,7 +191,7 @@ input[type=text]:read-only {
 }
 .navigation > .tab:hover,
 .navigation > .tab:focus-visible {
-  background-color: #f3f3f3;
+  background-color: var(--color-focus-gray);
 }
 .navigation > .tab.active {
   border-bottom: solid 4px #009ade;
@@ -260,7 +269,7 @@ form table {
   border-spacing: 0.8rem;
 }
 form tr td:first-child {
-  color: #a0a0a0;
+  color: var(--color-gray);
   font-size: 0.9rem;
   padding-right: 0.25rem;
   text-align: right;
@@ -283,7 +292,7 @@ form td.error::after {
   position: absolute;
 }
 form em {
-  color: #707070;
+  color: var(--color-text-gray);
   font-size: 0.75rem;
   font-weight: normal;
 }
@@ -297,7 +306,7 @@ form input[type=submit] {
 
 table.items {
   border-spacing: 0;
-  border: solid 1px #dddddd;
+  border: solid 1px var(--color-border-gray);
   border-radius: 0.25em;
   font-size: 0.85rem;
   text-align: left;
@@ -307,7 +316,7 @@ table.items thead {
 }
 table.items thead,
 table.items tbody tr:hover {
-  background-color: #f3f3f3;
+  background-color: var(--color-focus-gray);
 }
 table.items th {
   padding-block: 0.75em;
@@ -323,7 +332,7 @@ table.items td:last-child {
   padding-inline-end: 0.1em;
 }
 table.items td {
-  border-top: solid 1px #dddddd;
+  border-top: solid 1px var(--color-border-gray);
   min-height: 2.4em;
   padding-block: 0.1em;
 }
@@ -367,18 +376,18 @@ table.items td.link a:hover {
   color: #009ade;
 }
 table.items td.link a:focus-visible {
-  text-decoration-color: #a0a0a0;
+  text-decoration-color: var(--color-gray);
 }
 table.items td.link a:hover:focus-visible {
   color: #006c9b;
 }
 
 table.items td:not(:first-child) {
-  color: #909090;
+  color: var(--color-table-gray);
-  fill: #909090;
+  fill: var(--color-table-gray);
 }
 table.items td.hint {
-  color: #909090;
+  color: var(--color-table-gray);
   font-style: italic;
   font-size: 0.8rem;
   padding: 1em;
@@ -400,8 +409,8 @@ table.items input[type=submit] {
 table.items select:not(:hover),
 table.items .button:not(:hover),
 table.items button:not(:hover) {
-  border-color: #dddddd;
+  border-color: var(--color-border-gray);
-  color: #909090;
+  color: var(--color-table-gray);
 }
 table.items select:focus-within,
 table.items select:focus-visible {