update css to use more css variables for colors instead of hardcoded values

static/css/styles.css

@@ -8,26 +8,39 @@
 :root {
   --bg-color: hsl(206, 12%, 95%);
   --text-color: hsl(200, 35%, 25%);
-  --color-primary: #2196f3;
-  --outline-color: #14e0ff;
+  --color-primary: hsl(207, 90%, 54%);
+  --outline-color: hsl(188, 100%, 54%);
   --button-bg: linear-gradient(to right, #e0e0e0, #bdbdbd);
   --button-bg-box-shadow-color: rgba(160, 160, 160, 0.5);
-  --button-bg-primary: linear-gradient(to right, #42a5f5, #2979ff);
-  --button-bg-primary-box-shadow-color: rgba(66, 165, 245, 0.5);
-  --button-bg-secondary: linear-gradient(to right, #7e57c2, #6200ea);
-  --button-bg-secondary-box-shadow-color: rgba(81, 45, 168, 0.5);
-  --button-bg-danger: linear-gradient(to right, #ee3b3b, #e11c1c);
-  --button-bg-danger-box-shadow-color: rgba(168, 45, 45, 0.5);
-  --button-bg-success: linear-gradient(to right, #31b647, #26be3f);
-  --button-bg-success-box-shadow-color: rgba(25, 221, 51, 50%);
-  --features-bg: hsl(230, 15%, 92%);
-  --extensions-bg: hsl(230, 15%, 20%);
-  --send-icon-hover-color: #673ab7;
+  --button-bg-primary: linear-gradient(to right, hsl(207, 90%, 61%), hsl(218, 100%, 58%));
+  --button-bg-primary-box-shadow-color: hsla(207, 90%, 61%, 0.5);
+  --button-bg-secondary: linear-gradient(to right, hsl(262, 47%, 55%), hsl(265, 100%, 46%));
+  --button-bg-secondary-box-shadow-color: hsla(258, 58%, 42%, 0.5);
+  --button-bg-danger: linear-gradient(to right, hsl(0, 84%, 58%), hsl(0, 78%, 50%));
+  --button-bg-danger-box-shadow-color: hsla(0, 58%, 42%, 0.5);
+  --button-bg-success: linear-gradient(to right, hsl(130, 58%, 45%), hsl(130, 67%, 45%));
+  --button-bg-success-box-shadow-color: hsla(128, 80%, 48%, 0.5);
+  --button-action-shadow-color: hsla(200, 15%, 60%, 0.12);
+  --underline-color: hsl(200, 35%, 65%);
+  --secondary-text-color: hsl(200, 14%, 60%);
+  --send-icon-hover-color: hsl(262, 52%, 47%);
   --send-spinner-icon-color: hsl(200, 15%, 70%);
   --success-icon-color: hsl(144, 40%, 57%);
-  --error-icon-color: #f24f4f;
+  --error-icon-color: hsl(0, 86%, 63%);
   --copy-icon-color: hsl(144, 40%, 57%);
   --copy-icon-bg-color: hsl(144, 100%, 96%);
+  --copy-icon-shadow-color: hsla(200, 15%, 60%, 0.12);
+  --focus-outline-color: hsla(207, 90%, 61%, 0.5);
+  --checkbox-bg-color: hsl(262, 47%, 63%);
+  --input-shadow-color: hsla(200, 15%, 70%, 0.2);
+  --input-hover-shadow-color: hsla(200, 15%, 70%, 0.4);
+  --input-label-color: hsl(200, 35%, 25%);
+  --table-bg-color: hsl(200, 12%, 95%);
+  --table-shadow-color: hsla(200, 20%, 70%, 0.3);
+  --table-tr-border-color: hsl(200, 14%, 94%);
+  --table-tr-hover-bg-color: hsl(200, 14%, 98%);
+  --table-head-tr-border-color: hsl(200, 14%, 90%);
+  --table-status-gray-bg-color: hsl(200, 12%, 95%);
   --keyframe-slidey-offset: 0;
 }
 
@@ -233,7 +246,7 @@ button.action {
   padding: 5px;
   width: 24px;
   height: 24px;
-  box-shadow: 0 2px 1px hsla(200, 15%, 60%, 0.12);
+  box-shadow: 0 2px 1px var(--button-action-shadow-color);
 }
 
 a.button.action:disabled,
@@ -441,7 +454,7 @@ input[type="password"] {
   border-radius: 100px;
   border-bottom: 5px solid #f5f5f5;
   border-bottom-width: 5px;
-  box-shadow: 0 10px 35px hsla(200, 15%, 70%, 0.2);
+  box-shadow: 0 10px 35px var(--input-shadow-color);
   transition: all 0.5s ease-out;
 }
 
@@ -450,7 +463,7 @@ input[type="text"]:focus,
 input[type="email"]:focus,
 input[type="password"]:focus {
   outline: none;
-  box-shadow: 0 20px 35px hsla(200, 15%, 70%, 0.4);
+  box-shadow: 0 20px 35px var(--input-hover-shadow-color);
 }
 
 input[type="text"]::placeholder,
@@ -478,7 +491,7 @@ select {
   letter-spacing: 0.05em;
   color: #444;
   background-color: white;
-  box-shadow: 0 10px 35px hsla(200, 15%, 70%, 0.2);
+  box-shadow: 0 10px 35px var(--input-shadow-color);
   border: none;
   border-radius: 100px;
   border-bottom: 5px solid #f5f5f5;
@@ -493,7 +506,7 @@ select {
 
 select:focus {
   outline: none;
-  box-shadow: 0 20px 35px hsla(200, 15%, 70%, 0.4);
+  box-shadow: 0 20px 35px var(--input-hover-shadow-color)
 }
 
 .error select {
@@ -518,7 +531,7 @@ input[type="checkbox"] {
 }
 
 input[type="checkbox"]:focus {
-  outline: 3px solid rgba(65, 164, 245, 0.5);
+  outline: 3px solid var(--focus-outline-color);
 }
 
 input[type="checkbox"]::after {
@@ -530,7 +543,7 @@ input[type="checkbox"]::after {
   height: 80%;
   display: block;
   border-radius: 2px;
-  background-color: #9575cd;
+  background-color: var(--checkbox-bg-color);
   box-shadow: 0 2px 4px rgba(50, 50, 50, 0.2);
   cursor: pointer;
   opacity: 0;
@@ -568,7 +581,7 @@ select:has(option[value=""]:checked) {
 
 label {
   display: flex;
-  color: rgb(41, 71, 86);
+  color: var(--input-label-color);
   font-size: 1rem;
   flex-direction: column;
   align-items: flex-start;
@@ -607,7 +620,7 @@ table {
   flex-direction: column;
   background-color: white;
   border-radius: 12px;
-  box-shadow: 0 6px 15px hsla(200, 20%, 70%, 0.3);
+  box-shadow: 0 6px 15px var(--table-shadow-color);
   text-align: center;
   overflow: auto;
 }
@@ -638,7 +651,7 @@ table tfoot {
 
 table tr {
   padding: 0 0.5rem;
-  border-bottom: 1px solid hsl(200, 14%, 94%);
+  border-bottom: 1px solid var(--table-tr-border-color);
 }
 
 table th,
@@ -665,18 +678,18 @@ table tbody + tfoot {
 }
 
 table thead {
-  background-color: hsl(200, 12%, 95%);
+  background-color: var(--table-bg-color);
   border-top-right-radius: 12px;
   border-top-left-radius: 12px;
   font-weight: bold;
 }
 
 table thead tr {
-  border-bottom: 1px solid hsl(200, 14%, 90%);
+  border-bottom: 1px solid var(--table-head-tr-border-color);
 }
 
 table tfoot {
-  background-color: hsl(200, 12%, 95%);
+  background-color: var(--table-bg-color);
   border-bottom-right-radius: 12px;
   border-bottom-left-radius: 12px;
 }
@@ -1159,7 +1172,7 @@ main #shorturl h1 {
 
 main #shorturl h1.link {
   cursor: pointer;
-  border-bottom-color: hsl(200, 35%, 65%);
+  border-bottom-color: var(--underline-color);
   transition: opacity 0.3s ease-in-out;
   --keyframe-slidey-offset: -10px;
   animation: fadein 0.2s ease-in-out, slidey 0.2s ease-in-out;
@@ -1189,7 +1202,7 @@ main #shorturl h1.link:hover {
   border-radius: 100%;
   background-color: var(--copy-icon-bg-color);
   transition: transform 0.4s ease-out;
-  box-shadow: 0 2px 1px hsla(200, 15%, 60%, 0.12);
+  box-shadow: 0 2px 1px var(--copy-icon-shadow-color);
   cursor: pointer;
   --keyframe-slidey-offset: -10px;
   animation: slidey 0.2s ease-in-out;
@@ -1204,7 +1217,7 @@ main #shorturl h1.link:hover {
 }
 
 .clipboard button:focus {
-  outline: 3px solid rgba(65, 164, 245, 0.5);
+  outline: 3px solid var(--focus-outline-color);
 }
 
 .clipboard svg {
@@ -1469,7 +1482,7 @@ table .short-link-wrapper { display: flex; align-items: center; }
   margin-top: 0;
 }
 
-#main-table-wrapper table .status.gray { background-color: hsl(200, 12%, 95%); }
+#main-table-wrapper table .status.gray { background-color: var(--table-status-gray-bg-color); }
 #main-table-wrapper table .status.green { background-color: hsl(102.4, 100%, 93.3%); }
 #main-table-wrapper table .status.red { background-color: hsl(0, 100%, 96.7%); }
 
@@ -1547,7 +1560,7 @@ table .short-link-wrapper { display: flex; align-items: center; }
 }
 
 #main-table-wrapper table tbody tr:hover {
-  background-color: hsl(200, 14%, 98%);
+  background-color: var(--table-tr-hover-bg-color);
 }
 
 #main-table-wrapper table tbody td.right-fade:after {
@@ -1561,10 +1574,9 @@ table .short-link-wrapper { display: flex; align-items: center; }
 }
 
 #main-table-wrapper table tbody tr:hover td.right-fade:after {
-  background: linear-gradient(to left, hsl(200, 14%, 98%), rgba(255, 255, 255, 0.001));
+  background: linear-gradient(to left, var(--table-tr-hover-bg-color), rgba(255, 255, 255, 0.001));
 }
 
-
 #main-table-wrapper table .clipboard { margin-right: 0.5rem; }
 #main-table-wrapper table .clipboard svg.check { width: 24px; }
 
@@ -1858,7 +1870,7 @@ form#delete-account.htmx-request .spinner { display: block; }
   align-items: stretch;
   background-color: white;
   border-radius: 12px;
-  box-shadow: 0 6px 15px hsla(200, 20%, 70%, 0.3);
+  box-shadow: 0 6px 15px var(--table-shadow-color);
   overflow: hidden;
   padding: 0;
 }
@@ -1867,7 +1879,7 @@ form#delete-account.htmx-request .spinner { display: block; }
   width: 100%;
   display: flex;
   align-items: center;
-  background-color: hsl(200, 12%, 95%);
+  background-color: var(--table-bg-color);
   justify-content: space-between;
   padding: 0.75rem 1.5rem;
 }
@@ -1894,12 +1906,12 @@ form#delete-account.htmx-request .spinner { display: block; }
 
 .stats-period span.total-in-period {
   font-weight: bold;
-  border-bottom: 1px dotted hsl(200, 35%, 65%);
+  border-bottom: 1px dotted var(--underline-color);
 }
 
 p.last-update {
   font-size: 14px;
-  color: hsl(200, 14%, 60%);
+  color: var(--secondary-text-color);
   margin: 0.75rem 0 0;
 }