Initial pull of CSS colors into variables. Ignoring dark mode for now.

css/styles.css

@@ -1,17 +1,68 @@
 @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@800&family=Varela+Round&display=swap');
 
+/* - Variables - */
+
+:root {
+  --color-blue: #0AB5CD;
+  --color-light-blue: #5ECEDB;
+
+  --bg-color: #DEF2D9;
+  --bg-dot-color: #FFF;
+
+  --shadow-3: rgba(0, 0, 0, 0.03);
+  --shadow-5: rgba(0, 0, 0, 0.05);
+  --shadow-6: rgba(0, 0, 0, 0.06);
+  --shadow-8: rgba(0, 0, 0, 0.08);
+  --shadow-9: rgba(0, 0, 0, 0.09);
+  --shadow-10: rgba(0, 0, 0, 0.10);
+  --shadow-15: rgba(0, 0, 0, 0.16);
+  --shadow-16: rgba(0, 0, 0, 0.16);
+  --shadow-20: rgba(0, 0, 0, 0.20);
+
+  --nook-phone-bg-color: #F5F8FF;
+  --nook-phone-text-color: #686868;
+  --nook-phone-center-bg-color: white;
+
+  --dialog-bg-color: #FFFAE5;
+  --dialog-text-color: #837865;
+
+  --dialog-name-bg-color: #FF9A40;
+  --dialog-name-text-color: #BA3B1F;
+
+  --lng-select-border-color: var(--bg-color);
+  --lng-select-bg-color-hover: #EBFEFD;
+
+  --italic-color: #AAA;
+
+  --form-bg-color: white;
+  --form-h6-text-color: #845E44;
+
+  --input-bg-color: #F3F3F3;
+  --input-focus-bg-color: white;
+
+  --radio-hover-bg-color: var(--nook-phone-bg-color);
+  --radio-checked-text-color: #FFF;
+
+  --button-text-color: var(--nook-phone-text-color);
+  --button-reset-text-color: #E45B5B;
+
+  --table-range0: hsl(140, 80%, 85%);
+  --table-range1: hsl(90, 80%, 85%);
+  --table-range2: hsl(60, 80%, 85%);
+  --table-range3: hsl(30, 80%, 85%);
+  --table-range4: hsl(0, 80%, 85%);
+}
+
 /* - Global Styles - */
 
 html {
   font-size: 14px;
-  background: #DEF2D9;
+  background: var(--bg-color);
   background-image:
-    radial-gradient(#fff 20%, transparent 0),
+    radial-gradient(var(--bg-dot-color) 20%, transparent 0),
-    radial-gradient(#fff 20%, transparent 0);
+    radial-gradient(var(--bg-dot-color) 20%, transparent 0);
   background-size: 30px 30px;
   background-position: 0 0, 15px 15px;
-
-  /* background: #FFFAE5; */
 }
 
 body {
@@ -40,14 +91,14 @@ h2 {
   border-radius: 40px;
   padding: 16px 0px;
   padding-bottom: 16px;
-  background: #F5F8FF;
+  background: var(--nook-phone-bg-color);
-  color: #686868;
+  color: var(--nook-phone-text-color);
   overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px var(--shadow-6), 0 1px 2px var(--shadow-8);
 }
 
 .nook-phone-center {
-  background: white;
+  background: var(--nook-phone-center-bg-color);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -55,14 +106,14 @@ h2 {
 
 
 .dialog-box {
-  background: #FFFAE5;
+  background: var(--dialog-bg-color);
   box-sizing: border-box;
   padding: 16px 24px;
   margin: 32px auto;
   position: relative;
   border-radius: 40px;
   max-width: 800px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px var(--shadow-6), 0 1px 2px var(--shadow-8);
 }
 
 .dialog-box-lng {
@@ -79,16 +130,16 @@ h2 {
   padding: 4px;
   font-weight: bold;
   border-radius: 4px;
-  border-color: #DEF2D9;
+  border-color: var(--lng-select-border-color);
-  color: #837865;
+  color: var(--dialog-text-color);
   cursor: pointer;
   transition: 0.2s all;
 }
 
 .dialog-box-lng select:hover {
-  background-color: #EBFEFD;
+  background-color: var(--lng-select-bg-color-hover);
-  border-color: #5ECEDB;
+  border-color: var(--color-light-blue);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 2px 4px var(--shadow-16);
 }
 
 .dialog-box-lng select:focus {
@@ -99,24 +150,24 @@ h2 {
   font-family: 'Raleway', sans-serif;
   font-weight: 800;
   font-size: 1rem;
-  color: #837865;
+  color: var(--dialog-text-color);
   letter-spacing: 0.2px;
   line-height: 1.8rem;
 }
 
 .dialog-box b,
 .dialog-box a {
-  color: #0AB5CD;
+  color: var(--color-blue);
   transition: 0.2s all;
 }
 
 .dialog-box i {
   font-style: normal;
-  color: #aaa;
+  color: var(--italic-color);
 }
 
 .dialog-box a:hover {
-  color: #5ECEDB
+  color: var(--color-light-blue);
 }
 
 .dialog-box .dialog-box__name {
@@ -124,14 +175,14 @@ h2 {
   left: 16px;
   top: -28px;
   font-size: 1rem;
-  color: #BA3B1F;
+  color: var(--dialog-name-text-color);
   padding: 4px 16px;
-  background: #FF9A40;
+  background: var(--dialog-name-bg-color);
   border-radius: 40px;
 }
 
 .input__form {
-  background: white;
+  background: var(--form-bg-color);
   display: flex;
   flex-direction: column;
   padding: 16px;
@@ -152,7 +203,7 @@ h2 {
   font-weight: 800;
   font-size: 1.25rem;
   margin: 8px auto;
-  color: #845E44;
+  color: var(--form-h6-text-color);
   text-align: center;
 }
 
@@ -189,7 +240,7 @@ h2 {
   text-align: center;
   display: block;
   font-style: normal;
-  color: #aaa;
+  color: var(--italic-color);
   font-size: 0.9rem;
   margin: 8px auto;
 }
@@ -211,25 +262,25 @@ input {
 }
 
 input[type=number]:placeholder-shown {
-  background: #f3f3f3;
+  background: var(--input-bg-color);
 }
 
 input[type=number]:not(:placeholder-shown) {
   background: transparent;
-  color: #0AB5CD;
+  color: var(--color-blue);
 }
 
 input[type=number]:placeholder-shown:hover {
   cursor: pointer;
   transform: scale(1.1);
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
+  box-shadow: 0 1px 6px var(--shadow-5), 0 3px 6px var(--shadow-9);
 }
 
 input[type=number]:focus {
   outline: none;
   transform: scale(1.1);
-  background: white;
+  background: var(--input-focus-bg-color);
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
+  box-shadow: 0 1px 6px var(--shadow-5), 0 3px 6px var(--shadow-9);
 }
 
 input[type=number]:focus::placeholder {
@@ -276,7 +327,7 @@ input[type=number] {
   opacity: 1;
   border: none;
   border-radius: 40px;
-  background: #F3F3F3;
+  background: var(--input-bg-color);
   padding: 8px 16px;
   font-size: 1.25rem;
   font-family: inherit;
@@ -287,24 +338,24 @@ input[type=number] {
 
 .input__radio-buttons input[type="radio"]:not(:checked)+label:hover {
   cursor: pointer;
-  background: #F5F8FF;
+  background: var(--radio-hover-bg-color);
   transform: scale(1.1);
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
+  box-shadow: 0 1px 6px var(--shadow-5), 0 3px 6px var(--shadow-9);
 }
 
 .input__radio-buttons input[type="radio"]:checked+label {
-  background: #0AB5CD;
+  background: var(--color-blue);
-  color: #FFF;
+  color: var(--radio-checked-text-color);
 }
 
 .button {
-  color: #686868;
+  color: var(--button-text-color);
   font-family: inherit;
   font-weight: bold;
   padding: 8px 16px;
   border-width: 0px;
   border-radius: 40px;
-  background: #F3F3F3;
+  background: var(--input-bg-color);
   font-size: 1.2rem;
   transition: 0.2s all;
   position: relative;
@@ -315,11 +366,11 @@ input[type=number] {
   transform: scale(1.1);
   cursor: pointer;
   opacity: 1;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
+  box-shadow: 0 1px 6px var(--shadow-5), 0 3px 6px var(--shadow-9);
 }
 
 .button.button--reset {
-  color: #E45B5B;
+  color: var(--button-reset-text-color);
 }
 
 .table-wrapper {
@@ -347,22 +398,22 @@ input[type=number] {
 .table-wrapper::-webkit-scrollbar-track {
   height: 8px;
   width: 5px;
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 0 6px var(--shadow-20);
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: inset 0 0 6px var(--shadow-20);
 }
 
 .table-wrapper::-webkit-scrollbar-thumb {
   height: 8px;
   width: 5px;
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--shadow-20);
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 0 6px var(--shadow-20);
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: inset 0 0 6px var(--shadow-10);
 }
 
 .table-wrapper::-webkit-scrollbar-thumb:window-inactive {
   height: 8px;
   width: 5px;
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--shadow-20);
 }
 
 
@@ -385,8 +436,8 @@ input[type=number] {
   max-width: 150px;
   padding: 6px 4px;
   text-align: center;
-  border-right: 1px solid rgba(0, 0, 0, 0.03);
+  border-right: 1px solid var(--shadow-3);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+  border-bottom: 1px solid var(--shadow-15);
 }
 
 #turnipTable tbody tr {
@@ -403,43 +454,43 @@ input[type=number] {
 }
 
 #turnipTable td.range4 {
-  background-color: hsl(0, 80%, 85%);
+  background-color: var(--table-range4);
 }
 
 #turnipTable td.range3{
-  background-color: hsl(30, 80%, 85%);
+  background-color: var(--table-range3);
 }
 
 #turnipTable td.range2 {
-  background-color: hsl(60, 80%, 85%);
+  background-color: var(--table-range2);
 }
 
 #turnipTable td.range1 {
-  background-color: hsl(90, 80%, 85%);
+  background-color: var(--table-range1);
 }
 
 #turnipTable td.range0 {
-  background-color: hsl(140, 80%, 85%);
+  background-color: var(--table-range0);
 }
 
 .darkmode--activated #turnipTable td.range0 {
-  background-color: hsl(0, 80%, 85%);
+  background-color: var(--table-range4);
 }
 
 .darkmode--activated #turnipTable td.range1{
-  background-color: hsl(30, 80%, 85%);
+  background-color: var(--table-range3);
 }
 
 .darkmode--activated #turnipTable td.range2 {
-  background-color: hsl(60, 80%, 85%);
+  background-color: var(--table-range2);
 }
 
 .darkmode--activated #turnipTable td.range3 {
-  background-color: hsl(90, 80%, 85%);
+  background-color: var(--table-range1);
 }
 
 .darkmode--activated #turnipTable td.range4 {
-  background-color: hsl(140, 80%, 85%);
+  background-color: var(--table-range0);
 }
 
 .chart-wrapper {
@@ -477,18 +528,18 @@ input[type=number] {
 .permalink .fa-copy {
   margin: 0 8px;
   height: 20px;
-  color: #0AB5CD;
+  color: var(--color-blue);
 }
 
 /* The snackbar - position it at the bottom and in the middle of the screen */
 #snackbar {
   visibility: hidden; /* Hidden by default. Visible on click */
   min-width: 250px; /* Set a default minimum width */
-  background-color: #FFFAE5; /* Black background color */
+  background-color: var(--dialog-bg-color); /* Black background color */
   font-family: 'Raleway', sans-serif;
   font-weight: 800;
   font-size: 1rem;
-  color: #837865;
+  color: var(--dialog-text-color);
   letter-spacing: 0.2px;
   line-height: 1.8rem;
   text-align: center; /* Centered text */
@@ -497,7 +548,7 @@ input[type=number] {
   position: fixed; /* Sit on top of the screen */
   z-index: 1; /* Add a z-index if needed */
   bottom: 30px; /* 30px from the bottom */
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px var(--shadow-6), 0 1px 2px var(--shadow-8);
 }
 
 /* Show the snackbar when clicking on a button (class added with JavaScript) */
@@ -571,8 +622,8 @@ input[type=number] {
 div.darkmode-background{
   background: #fef0e3;
   background-image:
-    radial-gradient(#fff 20%, transparent 0),
+    radial-gradient(var(--bg-dot-color) 20%, transparent 0),
-    radial-gradient(#fff 20%, transparent 0);
+    radial-gradient(var(--bg-dot-color) 20%, transparent 0);
   position: inherit;
 }