diff --git a/public/css/blog_index.css b/public/css/blog_index.css
index d770052..d95f4f9 100644
--- a/public/css/blog_index.css
+++ b/public/css/blog_index.css
@@ -1,6 +1,6 @@
 /* Blog Index Styles */
 .post {
-  background-color: #ffffff;
+  background-color: var(--bg-main);
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   margin-bottom: 2rem;
@@ -11,7 +11,7 @@
 
 .post:hover {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-  border-left-color: #2c3e50;
+  border-left-color: var(--accent-primary);
   transform: translateY(-2px);
 }
 
@@ -27,26 +27,26 @@
 }
 
 .post-link {
-  color: #2c3e50;
+  color: var(--accent-primary);
   text-decoration: none;
   transition: color 0.2s ease;
 }
 
 .post-link:hover {
-  color: #1a73e8;
+  color: var(--accent-blue);
   text-decoration: underline;
 }
 
 .post-date {
   display: inline-block;
   font-size: 0.9rem;
-  color: #6c757d;
+  color: var(--text-muted);
   font-weight: 500;
   margin-bottom: 0.75rem;
   padding: 0.25rem 0.75rem;
-  background-color: #f8f9fa;
+  background-color: var(--bg-body);
   border-radius: 4px;
-  border: 1px solid #e9ecef;
+  border: 1px solid var(--border-subtle);
 }
 
 .post-tags {
@@ -60,24 +60,24 @@
 
 .post-tag {
   font-size: 0.8rem;
-  background-color: #e3f2fd;
-  color: #1976d2;
+  background-color: var(--bg-tag);
+  color: var(--accent-tag);
   padding: 0.25rem 0.6rem;
   border-radius: 16px;
   font-weight: 500;
   transition: all 0.2s ease;
-  border: 1px solid #bbdefb;
+  border: 1px solid var(--border-tag);
 }
 
 .post-tag:hover {
-  background-color: #1976d2;
-  color: #ffffff;
+  background-color: var(--accent-tag);
+  color: var(--text-white);
   transform: scale(1.05);
 }
 
 .post-excerpt {
   margin-bottom: 1.5rem;
-  color: #495057;
+  color: var(--text-muted-dark);
   line-height: 1.6;
 }
 
@@ -92,11 +92,11 @@
 .post-readmore {
   margin-top: 1.5rem;
   padding-top: 1rem;
-  border-top: 1px solid #e9ecef;
+  border-top: 1px solid var(--border-subtle);
 }
 
 .post-readmore a {
-  color: #1a73e8;
+  color: var(--accent-blue);
   text-decoration: none;
   font-weight: 600;
   font-size: 0.95rem;
@@ -107,7 +107,7 @@
 }
 
 .post-readmore a:hover {
-  color: #2c3e50;
+  color: var(--accent-primary);
   text-decoration: underline;
   transform: translateX(4px);
 }
diff --git a/public/css/contact.css b/public/css/contact.css
index 7c7c349..7be0ddb 100644
--- a/public/css/contact.css
+++ b/public/css/contact.css
@@ -27,7 +27,7 @@
 .form-group input,
 .form-group textarea {
   padding: 0.5em;
-  border: 1px solid #ccc;
+  border: 1px solid var(--border-grey);
   border-radius: 4px;
   font-family: inherit;
   font-size: 1em;
@@ -61,7 +61,7 @@
 
 button {
   padding: 0.6em 1.2em;
-  background-color: #007acc;
+  background-color: var(--action-alt);
   color: white;
   border: none;
   border-radius: 4px;
@@ -70,12 +70,12 @@
 }
 
 button:hover {
-  background-color: #005fa3;
+  background-color: var(--action-alt-hover);
 }
 
 label.required::after {
   content: " *";
-  color: #d33;
+  color: var(--status-error);
   font-weight: normal;
   margin-left: 0.2em;
   font-size: 1.1em;
@@ -84,7 +84,7 @@
 }
 
 .required-note {
-  color: #d33;
+  color: var(--status-error);
   font-size: 0.9rem;
   margin-top: 0.5rem;
   font-family: sans-serif;
@@ -129,7 +129,7 @@
 .char-counter {
   text-align: right;
   font-size: 0.9em;
-  color: #666;
+  color: var(--text-placeholder);
   margin-top: 5px;
   margin-right: 0.5rem;
 }
@@ -137,9 +137,9 @@
 .security-notice {
   margin-top: 20px;
   padding: 15px;
-  background-color: #f8f9fa;
+  background-color: var(--bg-body);
   border-radius: 5px;
-  border-left: 4px solid #007bff;
+  border-left: 4px solid var(--accent-blue-bright);
 }
 
 .security-notice details {
@@ -148,14 +148,14 @@
 
 .security-notice summary {
   font-weight: bold;
-  color: #007bff;
+  color: var(--accent-blue-bright);
   outline: none;
 }
 
 .security-content {
   margin-top: 10px;
   padding-top: 10px;
-  border-top: 1px solid #dee2e6;
+  border-top: 1px solid var(--border-medium);
 }
 
 .security-content ul {
@@ -178,10 +178,10 @@
 
 .form-group input:invalid,
 .form-group textarea:invalid {
-  border-color: #dc3545;
+  border-color: var(--status-error-alt);
 }
 
 .form-group input:valid,
 .form-group textarea:valid {
-  border-color: #28a745;
+  border-color: var(--status-success);
 }
diff --git a/public/css/docs-sidebar.css b/public/css/docs-sidebar.css
index 8e3e4a2..cba3467 100644
--- a/public/css/docs-sidebar.css
+++ b/public/css/docs-sidebar.css
@@ -1,7 +1,7 @@
 .layout .sidebar {
   width: 250px;
-  background-color: #f8f9fa;
-  border-right: 1px solid #e0e0e0;
+  background-color: var(--bg-body);
+  border-right: 1px solid var(--accent-primary);
   padding: 1em;
   font-size: 0.95rem;
   font-family: Arial, sans-serif;
@@ -25,9 +25,9 @@
 .layout .docs-path-label {
   font-weight: 700;
   font-size: 1.2rem;
-  color: #333333;
+  color: var(--accent-primary);
   margin-bottom: 1rem;
-  border-bottom: 2px solid #2c3e50;
+  border-bottom: 2px solid var(--accent-primary);
   padding-bottom: 0.5rem;
   text-transform: uppercase;
   letter-spacing: 1px;
@@ -50,7 +50,7 @@
   top: 0;
   bottom: 0.5rem;
   width: 1px;
-  background-color: #e0e0e0;
+  background-color: var(--accent-primary);
 }
 
 /* Module items */
@@ -67,7 +67,7 @@
   top: 0.6rem;
   width: 0.8rem;
   height: 1px;
-  background-color: #e0e0e0;
+  background-color: var(--accent-primary);
 }
 
 /* Last item - end the vertical line */
@@ -78,12 +78,12 @@
   top: 0.6rem;
   bottom: -1rem;
   width: 1px;
-  background-color: #f8f9fa;
+  background-color: var(--bg-body);
 }
 
 /* Module links - styled like post labels */
 .layout .docs-module-item a {
-  color: #2c3e50;
+  color: var(--accent-primary);
   text-decoration: none;
   display: block;
   padding: 0.2rem 0;
@@ -94,13 +94,13 @@
 }
 
 .layout .docs-module-item a:hover {
-  color: #1a73e8;
+  color: var(--accent-blue);
   text-decoration: underline;
 }
 
 .layout .docs-module-item.active a {
   font-weight: 600;
-  color: #1a73e8;
+  color: var(--accent-blue);
 }
 
 /* Details/summary styling */
diff --git a/public/css/docs.css b/public/css/docs.css
index 636774d..abe8dbd 100644
--- a/public/css/docs.css
+++ b/public/css/docs.css
@@ -2,8 +2,8 @@
 /* Base typography and layout */
 body {
     font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
-    background: #fdfdfd;
-    color: #333;
+    background: var(--bg-docs);
+    color: var(--text-heading-dark);
     margin: 0;
     line-height: 1.6;
     font-size: 14px;
@@ -26,29 +26,29 @@
     margin-top: 2rem;
     margin-bottom: 0.75rem;
     font-weight: 600;
-    color: #1a1a1a;
+    color: var(--text-docs-h1);
     letter-spacing: -0.02em;
 }
 
 h1 {
     font-size: 2rem;
-    border-bottom: 2px solid #e5e7eb;
+    border-bottom: 2px solid var(--border-docs);
     padding-bottom: 0.5rem;
 }
 
 h2 {
     font-size: 1.5rem;
-    color: #374151;
+    color: var(--text-docs-h2);
 }
 
 h3 {
     font-size: 1.25rem;
-    color: #4b5563;
+    color: var(--text-docs-muted);
 }
 
 pre {
-    background: #f8f9fa;
-    border: 1px solid #e9ecef;
+    background: var(--bg-body);
+    border: 1px solid var(--border-subtle);
     border-radius: 6px;
     padding: 1.25rem;
     overflow-x: auto;
@@ -58,7 +58,7 @@
 }
 
 code {
-    background: #f1f3f4;
+    background: var(--bg-docs-inline);
     padding: 0.125rem 0.25rem;
     border-radius: 3px;
     font-size: 0.9em;
@@ -82,23 +82,23 @@
 
 th, td {
     border: none;
-    border-bottom: 1px solid #e5e7eb;
+    border-bottom: 1px solid var(--border-docs);
     padding: 0.75rem 1rem;
     text-align: left;
     vertical-align: top;
 }
 
 th {
-    background: #f9fafb;
+    background: var(--bg-docs-th);
     font-weight: 600;
-    color: #374151;
+    color: var(--text-docs-h2);
     font-size: 0.875rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }
 
 tbody tr:hover {
-    background: #f9fafb;
+    background: var(--bg-docs-th);
 }
 
 /* Content sections */
@@ -108,7 +108,7 @@
 
 .key {
     font-weight: 600;
-    color: #1f2937;
+    color: var(--text-docs-strong);
 }
 
 .list {
@@ -121,8 +121,8 @@
 .doc-object {
     padding: 1.5rem;
     margin-bottom: 2rem;
-    border-left: 3px solid #e5e7eb;
-    background: #fefefe;
+    border-left: 3px solid var(--border-docs);
+    background: var(--bg-docs-card);
     border-radius: 0 6px 6px 0;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }
@@ -136,7 +136,7 @@
 
 .doc-entry strong {
     min-width: 140px;
-    color: #374151;
+    color: var(--text-docs-h2);
     font-weight: 600;
     font-size: 0.875rem;
     flex-shrink: 0;
@@ -147,7 +147,7 @@
 .doc-entry span,
 .doc-entry div {
     flex: 1;
-    color: #4b5563;
+    color: var(--text-docs-muted);
 }
 
 /* Responsive adjustments */
diff --git a/public/css/logs.css b/public/css/logs.css
index 0987ceb..df3ec86 100644
--- a/public/css/logs.css
+++ b/public/css/logs.css
@@ -10,13 +10,13 @@
 
 th,
 td {
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-grey);
     padding: 8px;
     text-align: left;
 }
 
 th {
-    background: #eee;
+    background: var(--bg-neutral);
 }
 
 textarea {
@@ -33,7 +33,7 @@
 .pagination-container {
   margin: 20px 0;
   padding: 15px;
-  background: #f5f5f5;
+  background: var(--bg-pagination);
   border-radius: 5px;
 }
 
@@ -52,7 +52,7 @@
 
 .pagination-controls button {
   padding: 5px 10px;
-  border: 1px solid #ddd;
+  border: 1px solid var(--border-light-alt);
   background: white;
   cursor: pointer;
   border-radius: 3px;
@@ -64,13 +64,13 @@
 }
 
 .pagination-controls button:not(:disabled):hover {
-  background: #e9e9e9;
+  background: var(--bg-logs-hover);
 }
 
 .loading-indicator {
   text-align: center;
   padding: 20px;
-  color: #666;
+  color: var(--text-placeholder);
   font-style: italic;
 }
 .pagination-controls  input[type="number"] {
diff --git a/public/css/newsletter.css b/public/css/newsletter.css
index 8c49f4c..cc40462 100644
--- a/public/css/newsletter.css
+++ b/public/css/newsletter.css
@@ -2,7 +2,7 @@
   max-width: 400px;
   margin: 1rem auto;
   padding: 1rem;
-  background: #f5f7fa;
+  background: var(--bg-subtle);
   border-radius: 6px;
   box-shadow: 0 2px 6px rgba(44, 62, 80, 0.15);
   font-family: Arial, sans-serif;
@@ -12,20 +12,20 @@
   display: block;
   margin-bottom: 0.25rem;
   font-weight: 600;
-  color: #2c3e50;
+  color: var(--accent-primary);
 }
 
 input[type="email"] {
   width: 100%;
   padding: 0.5rem 0.75rem;
-  border: 1.5px solid #ccc;
+  border: 1.5px solid var(--border-grey);
   border-radius: 4px;
   font-size: 1rem;
   transition: border-color 0.3s ease;
 }
 label.required::after {
   content: " *";
-  color: #d33;
+  color: var(--status-error);
   font-weight: normal;
   margin-left: 0.2em;
   font-size: 1.1em;
@@ -33,22 +33,22 @@
   font-family: sans-serif;
 }  
 .required-note {
-  color: #d33;
+  color: var(--status-error);
   font-size: 0.9rem;
   margin-top: 0.5rem;
   font-family: sans-serif;
 }
 
 input[type="email"]:focus {
-  border-color: #2980b9;
+  border-color: var(--action-primary);
   outline: none;
 }
 
 button[type="submit"] {
   margin-top: 1rem;
   padding: 0.6rem 1.2rem;
-  background-color: #2980b9;
-  color: #ecf0f1;
+  background-color: var(--action-primary);
+  color: var(--text-light);
   border: none;
   border-radius: 4px;
   font-weight: 700;
@@ -57,5 +57,5 @@
 }
 
 button[type="submit"]:hover {
-  background-color: #1f598a;
+  background-color: var(--action-hover);
 }
diff --git a/public/css/page.css b/public/css/page.css
index 232dfa7..5de80c1 100644
--- a/public/css/page.css
+++ b/public/css/page.css
@@ -4,11 +4,11 @@
     margin: 0; /* Remove auto centering since it's already in a flex container */
     padding: 3rem 2.5rem;
     line-height: 1.7;
-    color: #2d3748;
-    background-color: #ffffff;
+    color: var(--text-heading);
+    background-color: var(--bg-main);
     border-radius: 12px;
     box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--border-markdown);
     position: relative;
 }
 
@@ -19,12 +19,12 @@
     left: 0;
     right: 0;
     height: 4px;
-    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(90deg, var(--gradient-start) 0%, #764ba2 100%);
     border-radius: 12px 12px 0 0;
 }
 .markdown-content h1 {
     font-size: 1.9rem;
-    color: #2d3748;
+    color: var(--text-heading);
     margin-top: 3.5rem;
     margin-bottom: 1.2rem;
     line-height: 1.3;
@@ -41,21 +41,21 @@
     top: 0.2em;
     width: 4px;
     height: 1.2em;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, var(--gradient-start) 0%, #764ba2 100%);
     border-radius: 2px;
 }
 
 .markdown-content p {
     font-size: 1.125rem;
     margin-bottom: 1.5rem;
-    color: #4a5568;
+    color: var(--text-p-alt);
     text-align: justify;
     hyphens: auto;
 }
 
 .markdown-content h1 + p {
     font-size: 1.2rem;
-    color: #2d3748;
+    color: var(--text-heading);
     font-weight: 500;
     margin-bottom: 2rem;
 }
@@ -73,10 +73,10 @@
     margin-bottom: 1.5rem;
     padding-left: 2rem;
     position: relative;
-    background-color: #f8fafc;
+    background-color: var(--bg-list-item);
     padding: 1.5rem 1.5rem 1.5rem 3rem;
     border-radius: 8px;
-    border-left: 4px solid #667eea;
+    border-left: 4px solid var(--link-markdown);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
@@ -91,7 +91,7 @@
     position: absolute;
     left: 1rem;
     top: 1.5rem;
-    color: #667eea;
+    color: var(--text-blockquote)eea;
     font-size: 1.2rem;
     font-weight: bold;
 }
@@ -109,7 +109,7 @@
 .markdown-content hr {
     border: none;
     height: 1px;
-    background: linear-gradient(90deg, transparent 0%, #cbd5e0 20%, #cbd5e0 80%, transparent 100%);
+    background: linear-gradient(90deg, transparent 0%, var(--hr-color) 20%, var(--hr-color) 80%, transparent 100%);
     margin: 3.5rem 0;
     position: relative;
 }
@@ -120,17 +120,17 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background: #ffffff;
-    color: #667eea;
+    background: var(--bg-main);
+    color: var(--text-blockquote)eea;
     padding: 0 1rem;
     font-size: 1.2rem;
 }
 
 .markdown-content strong {
     font-weight: 700;
-    /* color: #2d3748; */
-    color: #4a5568;
-    /* background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%); */
+    /* color: var(--text-heading); */
+    color: var(--text-p-alt);
+    /* background: linear-gradient(135deg, var(--gradient-start)15 0%, var(--gradient-end-trans) 100%); */
     /* padding: 0.1em 0.3em; */
     border-radius: 4px;
 }
@@ -142,7 +142,7 @@
 }
 
 .markdown-content a {
-    color: #667eea;
+    color: var(--text-blockquote)eea;
     text-decoration: none;
     font-weight: 600;
     position: relative;
@@ -156,12 +156,12 @@
     left: 0;
     width: 0;
     height: 2px;
-    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(90deg, var(--gradient-start) 0%, #764ba2 100%);
     transition: width 0.3s ease;
 }
 
 .markdown-content a:hover {
-    color: #764ba2;
+    color: var(--link-markdown-hover);
 }
 
 .markdown-content a:hover::after {
@@ -173,7 +173,7 @@
     display: inline-flex;
     align-items: center;
     padding: 0.5rem 1rem;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, var(--gradient-start) 0%, #764ba2 100%);
     color: white;
     border-radius: 6px;
     text-decoration: none;
diff --git a/public/css/placeholder.css b/public/css/placeholder.css
index a65d445..3ab95f9 100644
--- a/public/css/placeholder.css
+++ b/public/css/placeholder.css
@@ -6,27 +6,27 @@
   margin: 0.8rem auto 2rem auto;
   max-width: 450px;
   line-height: 1.6;
-  color: #666;
+  color: var(--text-placeholder);
 }
 
 h1 {
   font-size: 2.5rem;
   font-weight: 600;
-  color: #333;
+  color: var(--text-heading-dark);
   margin-top: 1rem;
   margin-bottom: 0.5rem;
 }
 h2 {
   font-size: 1.8rem;
   font-weight: 500;
-  color: #444;
+  color: var(--text-article);
   margin-top: 0.5rem;
   margin-bottom: 1rem;
   line-height: 1.4;
 }
 .loader {
-  border: 6px solid #e0e0e0;
-  border-top: 6px solid #007acc;
+  border: 6px solid var(--accent-primary);
+  border-top: 6px solid var(--action-alt);
   border-radius: 50%;
   width: 60px;
   height: 60px;
@@ -38,8 +38,8 @@
   max-width: 700px;
   margin: 7rem auto;
   padding: 3rem;
-  border: 1px solid #ddd;
-  background: #ffffff;
+  border: 1px solid var(--border-light-alt);
+  background: var(--bg-main);
   box-shadow: 0 4px 15px rgba(0,0,0,0.1);
   text-align: center;
 
diff --git a/public/css/post.css b/public/css/post.css
index fcf6b54..d3af4f4 100644
--- a/public/css/post.css
+++ b/public/css/post.css
@@ -7,14 +7,14 @@
     margin-bottom: 1.75rem;
     padding-left: 0.5rem;
     text-indent: 0.5rem;
-    color: #2c3e50; /* darker, softer tone */
+    color: var(--accent-primary); /* darker, softer tone */
     font-weight: 400;
     font-size: 1.05rem;
     letter-spacing: 0.03em;
     transition: color 0.3s ease;
   }
   .markdown-content p:hover {
-  color: #1a242f;
+  color: var(--text-hover-dark);
 }
   .markdown-content p,
   .markdown-content li {
@@ -30,8 +30,8 @@
     font-weight: 700;
   }
   .markdown-content pre {
-    background-color: #2d2d2d;
-    color: #ccc;
+    background-color: var(--bg-code);
+    color: var(--text-code-block);
     padding: 1rem;
     border-radius: 6px;
     overflow-x: auto;
@@ -53,15 +53,15 @@
     display: block;
   }
   .markdown-content blockquote {
-    border-left: 4px solid #ccc;
+    border-left: 4px solid var(--border-grey);
     padding-left: 1rem;
-    color: #667;
+    color: var(--text-blockquote);
     font-style: italic;
     margin: 1rem 0;
   }
 
   .markdown-content a {
-    color: #0366d6;
+    color: var(--link-classic);
     text-decoration: none;
   }
   
@@ -70,7 +70,7 @@
   }
   .markdown-content h2 {
   padding-left: 0.5rem;
-  border-left: 4px solid #ccc;
+  border-left: 4px solid var(--border-grey);
   margin-left: -0.5rem;
 }
 
@@ -92,9 +92,9 @@
   margin-bottom: 1rem;
   font-weight: 600;
   padding-left: 0.5rem;
-  border-left: 3px solid #bbb;
+  border-left: 3px solid var(--border-grey-dark);
   margin-left: -0.5rem;
-  color: #444;
+  color: var(--text-article);
 }
 
 .markdown-content ol {
@@ -110,23 +110,23 @@
 
 .markdown-content hr {
   border: none;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid var(--border-light-alt);
   margin: 2rem 0;
 }
 
 .markdown-content strong {
   font-weight: 700;
-  color: #222;
+  color: var(--text-bold);
 }
 
 .markdown-content em {
   font-style: italic;
-  color: #555;
+  color: var(--text-italic);
 }
 
 .markdown-content code {
-  background-color: #f0f0f0;
-  color: #c7254e;
+  background-color: var(--bg-code-inline);
+  color: var(--text-code-inline);
 }
 
 .markdown-content pre code {
diff --git a/public/css/presentation.css b/public/css/presentation.css
index db455d1..7bb5cb7 100644
--- a/public/css/presentation.css
+++ b/public/css/presentation.css
@@ -119,8 +119,8 @@
   right: 2rem;
   padding: 0.4rem 1rem;
   background: transparent;
-  color: #fff;
-  border: 2px solid #888;
+  color: var(--text-white);
+  border: 2px solid var(--border-button);
   border-radius: 0.3rem;
   font-size: 0.9rem;
   font-family: inherit;
@@ -129,6 +129,6 @@
 }
 
 #returnButton:hover {
-  background: #888;
-  color: #000;
+  background: var(--border-button);
+  color: var(--text-black);
 }
diff --git a/public/css/prism.css b/public/css/prism.css
index f0eff0e..7f8d033 100644
--- a/public/css/prism.css
+++ b/public/css/prism.css
@@ -1,3 +1,3 @@
 /* PrismJS 1.30.0
 https://prismjs.com/download#themes=prism&languages=markup+css+clike+javascript+bash */
-code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
+code[class*=language-],pre[class*=language-]{color:var(--text-black);background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:var(--text-muted-light)}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
diff --git a/public/css/redirect.css b/public/css/redirect.css
index 08186fd..1a22f5e 100644
--- a/public/css/redirect.css
+++ b/public/css/redirect.css
@@ -7,7 +7,7 @@
 
 .redirect-content {
     text-align: center;
-    background: #ffffff;
+    background: var(--bg-main);
     padding: 3rem 2rem;
     border-radius: 6px;
     box-shadow: 0 2px 6px rgba(0,0,0,0.05);
@@ -18,8 +18,8 @@
 .spinner {
     width: 40px;
     height: 40px;
-    border: 4px solid #e9ecef;
-    border-top: 4px solid #2c3e50;
+    border: 4px solid var(--border-subtle);
+    border-top: 4px solid var(--accent-primary);
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin: 0 auto 1.5rem;
@@ -34,29 +34,29 @@
     font-size: 1.5rem;
     font-weight: 600;
     margin-bottom: 1rem;
-    color: #2c3e50;
+    color: var(--accent-primary);
 }
 
 p {
     font-size: 1rem;
-    color: #444;
+    color: var(--text-article);
     margin-bottom: 1rem;
 }
 
 .redirect-link {
-    color: #2c3e50;
+    color: var(--accent-primary);
     text-decoration: none;
     font-weight: 600;
     padding: 0.5rem 1rem;
-    border: 2px solid #2c3e50;
+    border: 2px solid var(--accent-primary);
     border-radius: 4px;
     display: inline-block;
     transition: all 0.2s ease-in-out;
 }
 
 .redirect-link:hover {
-    background-color: #2c3e50;
-    color: #ffffff;
+    background-color: var(--bg-header);
+    color: var(--text-white);
     text-decoration: none;
 }
 
diff --git a/public/css/sitemap-xml.css b/public/css/sitemap-xml.css
index bd5ba48..e96ca24 100644
--- a/public/css/sitemap-xml.css
+++ b/public/css/sitemap-xml.css
@@ -2,8 +2,8 @@
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-size: 16px;
     margin: 30px;
-    background: #f9f9f9;
-    color: #222;
+    background: var(--bg-sitemap);
+    color: var(--text-bold);
 }
 table {
     border-collapse: collapse;
@@ -14,17 +14,17 @@
     box-shadow: 0 0 12px rgba(0,0,0,0.1);
 }
 th, td {
-    border: 1px solid #ddd;
+    border: 1px solid var(--border-light-alt);
     padding: 12px 15px;
     text-align: left;
 }
 th {
-    background-color: #007acc;
+    background-color: var(--action-alt);
     color: white;
     font-weight: 600;
 }
 a {
-    color: #007acc;
+    color: var(--link-sitemap);
     text-decoration: none;
 }
 a:hover {
diff --git a/public/css/sitemap.css b/public/css/sitemap.css
index eae67d8..264bae3 100644
--- a/public/css/sitemap.css
+++ b/public/css/sitemap.css
@@ -4,8 +4,8 @@
   margin: 2rem auto;
   padding: 1rem 2rem;
   font-family: sans-serif;
-  background-color: #f8f9fa;
-  border: 1px solid #ddd;
+  background-color: var(--bg-body);
+  border: 1px solid var(--border-light-alt);
   border-radius: 8px;
 }
 
@@ -13,7 +13,7 @@
   font-size: 1.8rem;
   margin-bottom: 1rem;
   text-align: center;
-  color: #333;
+  color: var(--text-heading-dark);
 }
 
 /* Top-level list */
@@ -31,7 +31,7 @@
 /* Links */
 nav.sitemap a {
   text-decoration: none;
-  color: #007acc;
+  color: var(--link-sitemap);
   font-weight: 500;
 }
 
@@ -44,10 +44,10 @@
   margin-top: 0.3rem;
   margin-left: 1.5rem;
   padding-left: 1rem;
-  border-left: 2px solid #ddd;
+  border-left: 2px solid var(--border-light-alt);
 }
 
 nav.sitemap li > ul li::before {
   content: "→ ";
-  color: #999;
+  color: var(--text-muted-light);
 }
diff --git a/public/css/stack.css b/public/css/stack.css
index 5e9c536..6d4197f 100644
--- a/public/css/stack.css
+++ b/public/css/stack.css
@@ -26,5 +26,5 @@
 
 .stack-item p {
   font-size: 0.8rem;
-  color: #555;
+  color: var(--text-italic);
 }
diff --git a/public/css/styles.css b/public/css/styles.css
index 75ef772..5da230e 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1,8 +1,122 @@
+:root {
+  /* Backgrounds */
+  --bg-body: #f8f9fa;
+  --bg-main: #ffffff;
+  --bg-header: #2c3e50;
+  --bg-footer: #34495e;
+  --bg-nav-hover: #34495e;
+  --bg-card: #ffffff;
+  --bg-tag: #e3f2fd;
+  --bg-list-item: #f8fafc;
+  --bg-hover: #e9ecef;
+  --bg-code: #2d2d2d;
+  --bg-code-inline: #f0f0f0;
+
+  /* Text Colors */
+  --text-main: #212529;
+  --text-muted: #6c757d;
+  --text-light: #ecf0f1;
+  --text-footer-p: #bdc3c7;
+  --text-article: #444444;
+  --text-heading: #2d3748;
+  --text-p-alt: #4a5568;
+  --text-heading: #2d3748;
+  --text-heading-dark: #333333;
+  --text-muted-dark: #495057;
+  --text-muted-light: #999999;
+  --text-bold: #222222;
+  --text-italic: #555555;
+  --text-blockquote: #666677;
+  --text-code-inline: #c7254e;
+  --text-code-block: #cccccc;
+
+  /* Accents & Links */
+  --accent-primary: #2c3e50;
+  --accent-blue: #1a73e8;
+  --accent-blue-bright: #007bff;
+  --accent-tag: #1976d2;
+  --link-footer: #9bd3ff;
+  --link-classic: #0366d6;
+  --link-sitemap: #007acc;
+  --link-markdown: #667eea;
+  --link-markdown-hover: #764ba2;
+  --gradient-start: #667eea;
+  --gradient-end: #764ba2;
+
+  /* Borders & Dividers */
+  --border-light: #e0e0e0;
+  --border-medium: #dee2e6;
+  --border-markdown: #e2e8f0;
+  --border-grey: #cccccc;
+  --border-grey-dark: #bbbbbb;
+  --border-light-alt: #dddddd;
+  --border-input: #dee2e6;
+  --border-tag: #bbdefb;
+  --border-markdown: #e2e8f0;
+  --hr-color: #cbd5e0;
+  --border-subtle: #e9ecef;
+  --border-button: #888888;
+
+  /* Status & Action Colors */
+  --status-error: #d33333;
+  --status-error-alt: #dc3545;
+  --status-success: #28a745;
+  --action-primary: #2980b9;
+  --action-hover: #1f598a;
+  --action-alt: #007acc;
+  --action-alt-hover: #005fa3;
+
+  /* Additional Backgrounds */
+  --bg-subtle: #f5f7fa;
+  --bg-neutral: #eeeeee;
+  --bg-docs: #fdfdfd;
+  --bg-docs-th: #f9fafb;
+  --bg-docs-card: #fefefe;
+  --bg-sitemap: #f9f9f9;
+  --bg-pagination: #f5f5f5;
+  --bg-light-accent: #ecf0f1;
+
+  /* Additional Text Colors */
+  --text-docs-h1: #1a1a1a;
+  --text-docs-h2: #374151;
+  --text-docs-muted: #4b5563;
+  --text-hover-dark: #1a242f;
+  --text-muted-alt: #777777;
+  --text-placeholder: #666666;
+
+  /* Additional Borders */
+  --border-docs: #e5e7eb;
+
+  /* Additional Mapping */
+  --text-white: #ffffff;
+  --text-black: #000000;
+  --text-docs-strong: #1f2937;
+  --bg-docs-inline: #f1f3f4;
+  --bg-logs-hover: #e9e9e9;
+
+  /* Docs & Layout Extras */
+  --bg-docs-inline: #f1f3f4;
+  --text-docs-strong: #1f2937;
+  --border-docs: #e5e7eb;
+
+  /* Log & Interaction Extras */
+  --bg-logs-hover: #e9e9e9;
+  --text-black: #000000;
+  --text-white: #ffffff;
+
+  /* Deep Dive & Gradient Specifics */
+  --deep-dive-bg: #0a192f;
+  --deep-dive-glow: #00ced1;
+  --deep-dive-mid-1: #1a2744;
+  --deep-dive-mid-2: #0f1b36;
+  --gradient-start-trans: #667eea15;
+  --gradient-end-trans: #764ba215;
+}
 /* Base styles */
 html, body {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  background-color: #f8f9fa;
-  color: #212529;
+  background-color: var(--bg-body);
+  color: var(--text-main);
   min-height: 100vh;
   line-height: 1.6;
 }
@@ -36,8 +150,8 @@
   display: inline
 }
 footer {
-  background-color: #34495e;
-  color: #ecf0f1;
+  background-color: var(--bg-footer);
+  color: var(--text-light);
   padding: 2rem 0;
   text-align: center;
   border-top: none;
@@ -52,18 +166,18 @@
 }
 footer p {
   font-size: 0.85rem;
-  color: #bdc3c7;
+  color: var(--text-footer-p);
   line-height: 1.5;
   margin: 0;
   max-width: 600px;
 }
 footer p a {
-  color: #9bd3ff;
+  color: var(--link-footer);
   text-decoration: none;
   transition: color 0.2s ease-in-out;
 }
 footer p a:hover {
-  color: #ecf0f1;
+  color: var(--text-light);
   text-decoration: underline;
 }
 footer img {
@@ -114,18 +228,18 @@
 }
 .xml-sitemap-link {
   font-size: 0.85em;
-  color: #777;
+  color: var(--text-muted-alt);
 }
 footer small {
-  color: #666; font-size: 10px; opacity: 0.3;
+  color: var(--text-placeholder); font-size: 10px; opacity: 0.3;
 }
 footer small a {
    color: inherit
 }
 /* Header */
 header#site-header {
-  background-color: #2c3e50;
-  color: #ecf0f1;
+  background-color: var(--bg-header);
+  color: var(--text-light);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   position:relative;
   z-index: 10;
@@ -172,7 +286,7 @@
   bottom: -2px;
   width: 100%;
   height: 2px;
-  background-color: #ecf0f1;
+  background-color: var(--bg-light-accent);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.3s ease;
@@ -208,7 +322,7 @@
 /* Main content */
 main.container {
   flex: 1;
-  background-color: #ffffff;
+  background-color: var(--bg-main);
   padding: 2rem;
   border-radius: 6px;
   box-shadow: 0 2px 6px rgba(0,0,0,0.05);
@@ -217,12 +331,12 @@
   font-size: 1.5rem;
   font-weight: 600;
   margin-bottom: 1rem;
-  border-bottom: 2px solid #2c3e50;
+  border-bottom: 2px solid var(--accent-primary);
   padding-bottom: 0.3rem;
 }
 main article p {
   font-size: 1rem;
-  color: #444;
+  color: var(--text-article);
 }
 main {
   padding: 1rem;
@@ -254,7 +368,7 @@
   display: block;
   width: 100%;
   padding: 0.3rem 0.6rem;
-  color: #2c3e50;
+  color: var(--accent-primary);
   cursor: pointer;
   font: inherit;
   font-weight: 600; /* Match the link font weight */
@@ -263,13 +377,13 @@
   box-sizing: border-box;
 }
 header#site-header nav.site-nav > a {
-  color: #ecf0f1;
+  color: var(--text-light);
 }
 header#site-header nav.site-nav a:hover,
 header#site-header nav.site-nav a:focus,
 nav.site-nav .dropdown-content form button:hover,
 nav.site-nav .dropdown-content form button:focus {
-  background-color: #34495e;
+  background-color: var(--bg-footer);
 }
 nav.site-nav .dropdown {
   position: relative;
@@ -297,13 +411,13 @@
   display: block;
   padding: 0.3rem 0.6rem;
   text-decoration: none;
-  color: #2c3e50;
+  color: var(--accent-primary);
   font-weight: 600; /* Match the button font weight */
 }
 nav.site-nav .dropdown-content a:hover,
 nav.site-nav .dropdown-content form button:hover {
-  color: #ecf0f1;
-  background-color: #34495e; /* Match the main nav hover color */
+  color: var(--text-light);
+  background-color: var(--bg-footer); /* Match the main nav hover color */
 }
 header#site-header .menu-toggle {
   display: none;
@@ -359,8 +473,8 @@
 }
 .sidebar {
   width: 250px;
-  background-color: #f8f9fa;
-  border-right: 1px solid #e0e0e0;
+  background-color: var(--bg-body);
+  border-right: 1px solid var(--accent-primary);
   padding: 1em;
   font-size: 0.95rem;
   font-family: Arial, sans-serif;
@@ -379,9 +493,9 @@
 .sidebar .menu-year {
   font-weight: 700;
   font-size: 1.2rem;
-  color: #333333;
+  color: var(--accent-primary);
   margin-bottom: 1rem;
-  border-bottom: 2px solid #2c3e50;
+  border-bottom: 2px solid var(--accent-primary);
   padding-bottom: 0.5rem;
   text-transform: uppercase;
   letter-spacing: 1px;
@@ -389,7 +503,7 @@
 .sidebar .menu-month {
   margin-bottom: 1rem;
   font-weight: 600;
-  color: #555555;
+  color: var(--accent-primary);
 }
 .sidebar .menu-month ul.posts-list {
   list-style: none;
@@ -397,14 +511,14 @@
   margin-top: 0.3rem;
 }
 .sidebar .menu-month li.post-label a {
-  color: #2c3e50;
+  color: var(--accent-primary);
   text-decoration: none;
   display: block;
   padding: 0.2rem 0;
   transition: color 0.2s ease-in-out;
 }
 .sidebar .menu-month li.post-label a:hover {
-  color: #1a73e8;
+  color: var(--accent-blue);
   text-decoration: underline;
 }
 .sidebar .menu-year {                 
@@ -416,8 +530,8 @@
   margin-bottom: 0.3em;
 }
 .toc {
-  background: #f8f9fa;
-  border: 1px solid #e9ecef;
+  background: var(--bg-body);
+  border: 1px solid var(--border-subtle);
   border-radius: 8px;
   box-sizing: border-box;
   margin-bottom: 1em;
@@ -432,7 +546,7 @@
   max-height: calc(100vh - 40px);
   overflow-y: auto;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  border-color: #dee2e6;
+  border-color: var(--border-medium);
 }
 .toc.sticky.bottom-boundary {
   position: fixed;
@@ -478,7 +592,7 @@
   display: block;
   padding: 0.5rem 0.75rem;
   text-decoration: none;
-  color: #495057;
+  color: var(--text-muted-dark);
   border-radius: 4px;
   transition: all 0.2s ease;
   border-left: 3px solid transparent;
@@ -486,28 +600,28 @@
   line-height: 1.4;
 }
 .toc a:hover {
-  background-color: #e9ecef;
-  color: #2c3e50;
-  border-left-color: #007bff;
+  background-color: var(--bg-hover);
+  color: var(--accent-primary);
+  border-left-color: var(--accent-blue-bright);
   transform: translateX(2px);
 }
 .toc a:focus {
-  outline: 2px solid #007bff;
+  outline: 2px solid var(--accent-blue-bright);
   outline-offset: 2px;
 }
 /* Active link highlighting */
 .toc a.active {
-  background-color: #e3f2fd;
-  color: #1976d2;
-  border-left-color: #1976d2;
+  background-color: var(--bg-tag);
+  color: var(--accent-tag);
+  border-left-color: var(--accent-tag);
   font-weight: 600;
 }
 .toc-header {
   font-weight: 700;
   font-size: 1.1rem;
   margin-bottom: 1rem;
-  color: #2c3e50;
-  border-bottom: 2px solid #dee2e6;
+  color: var(--accent-primary);
+  border-bottom: 2px solid var(--border-medium);
   padding-bottom: 0.5rem;
   text-transform: uppercase;
   letter-spacing: 0.5px;
@@ -515,7 +629,7 @@
 /* Ensure proper spacing between sidebar sections */
 .sidebar nav > * + .toc {
   margin-top: 2rem;
-  border-top: 1px solid #dee2e6;
+  border-top: 1px solid var(--border-medium);
   padding-top: 1.5rem;
 }
 /* Animation for smooth transitions */
@@ -608,7 +722,7 @@
     height: auto;
     float: none;
     padding: 0.5rem;
-    border-bottom: 1px solid #444;
+    border-bottom: 1px solid var(--text-article);
     
     text-align: left;
   }
@@ -677,9 +791,9 @@
   user-select: none;
 }
 .deep-dive-enhanced {
-    background: linear-gradient(135deg, #0A192F 0%, #1a2744 30%, #0f1b36 70%, #0A192F 100%);
+    background: linear-gradient(135deg, #0A192F 0%, var(--deep-dive-mid-1) 30%, var(--deep-dive-mid-2) 70%, var(--deep-dive-bg) 100%);
     border-radius: 8px;
-    color: #00CED1;
+    color: var(--deep-dive-glow);
     font-weight: 700;
     position: relative;
     overflow: hidden;
@@ -757,7 +871,7 @@
     position: absolute;
     width: 2px;
     height: 2px;
-    background: #00CED1;
+    background: var(--deep-dive-glow);
     border-radius: 50%;
     opacity: 0.6;
     animation: float 6s linear infinite;
diff --git a/public/css/tag_posts.css b/public/css/tag_posts.css
index 655fbbf..4d3e7ad 100644
--- a/public/css/tag_posts.css
+++ b/public/css/tag_posts.css
@@ -7,13 +7,13 @@
 .tag-post-item {
   margin-bottom: 1.5rem;
   padding-bottom: 1rem;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--border-light-alt);
 }
 
 .tag-post-link {
   font-weight: 600;
   font-size: 1.2rem;
-  color: #1a73e8;
+  color: var(--accent-blue);
   text-decoration: none;
 }
 
@@ -23,6 +23,6 @@
 
 .tag-post-excerpt {
   margin-top: 0.5rem;
-  color: #555;
+  color: var(--text-italic);
   font-size: 0.95rem;
 }
diff --git a/public/css/tags.css b/public/css/tags.css
index 31d2c3a..4b743e4 100644
--- a/public/css/tags.css
+++ b/public/css/tags.css
@@ -3,8 +3,8 @@
   margin: 0 auto;
   padding: 2rem;
   font-family: sans-serif;
-  background-color: #fff;
-  color: #222;
+  background-color: var(--bg-main);
+  color: var(--text-bold);
 }
 
 main.container h1 {
@@ -22,18 +22,18 @@
 }
 
 main.container li.tag-item {
-  background-color: #f0f0f0;
+  background-color: var(--bg-code-inline);
   padding: 0.5rem 0.75rem;
   border-radius: 4px;
 }
 
 main.container li.tag-item a {
   text-decoration: none;
-  color: #333;
+  color: var(--text-heading-dark);
   font-weight: 500;
 }
 
 main.container li.tag-item a:hover {
   text-decoration: underline;
-  color: #007acc;
+  color: var(--link-sitemap);
 }
diff --git a/public/css/tools.css b/public/css/tools.css
index 6781c3d..47daf8d 100644
--- a/public/css/tools.css
+++ b/public/css/tools.css
@@ -4,11 +4,11 @@
     margin: 0; /* Remove auto centering as it's likely within a broader flex/grid layout */
     padding: 3rem 2.5rem;
     line-height: 1.7;
-    color: #2d3748;
-    background-color: #ffffff;
+    color: var(--text-heading);
+    background-color: var(--bg-main);
     border-radius: 12px;
     box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--border-markdown);
     position: relative;
     overflow: hidden; /* Ensures content doesn't break rounded corners */
 }
@@ -21,14 +21,14 @@
     left: 0;
     right: 0;
     height: 4px;
-    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(90deg, var(--gradient-start) 0%, #764ba2 100%);
     border-radius: 12px 12px 0 0;
 }
 
 /* --- Section Headings (h1) --- */
 .page-content h1 {
     font-size: 1.9rem;
-    color: #2d3748;
+    color: var(--text-heading);
     margin-top: 3.5rem;
     margin-bottom: 1.2rem;
     line-height: 1.3;
@@ -46,7 +46,7 @@
     top: 0.2em;
     width: 4px;
     height: 1.2em;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, var(--gradient-start) 0%, #764ba2 100%);
     border-radius: 2px;
 }
 
@@ -54,7 +54,7 @@
 .page-content p {
     font-size: 1.125rem;
     margin-bottom: 1.5rem;
-    color: #4a5568;
+    color: var(--text-p-alt);
     text-align: justify;
     hyphens: auto;
 }
@@ -62,7 +62,7 @@
 /* --- Paragraphs immediately following h1 --- */
 .page-content h1 + p {
     font-size: 1.2rem;
-    color: #2d3748;
+    color: var(--text-heading);
     font-weight: 500;
     margin-bottom: 2rem;
 }
@@ -80,14 +80,14 @@
     margin-bottom: 1.5rem;
     padding: 1.5rem 1.5rem 1.5rem 3rem; /* Spacing inside the box */
     position: relative;
-    background-color: #f8fafc; /* The 'round box' background */
+    background-color: var(--bg-list-item); /* The 'round box' background */
     border-radius: 8px;
-    border-left: 4px solid #667eea;
+    border-left: 4px solid var(--link-markdown);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     display: block; /* Ensures proper block behavior */
     line-height: 1.6;
-    color: #4a5568;
+    color: var(--text-p-alt);
     font-size: 1.1rem;
 }
 
@@ -102,7 +102,7 @@
     position: absolute;
     left: 1rem;
     top: 1.5rem;
-    color: #667eea;
+    color: var(--text-blockquote)eea;
     font-size: 1.2rem;
     font-weight: bold;
 }
@@ -125,7 +125,7 @@
     padding: 0.2rem 0; /* Simpler padding for nested items */
     margin-bottom: 0.3rem; /* Closer spacing for nested items */
     font-size: 1rem; /* Slightly smaller font for nested items */
-    color: #2d3748; /* Adjust color for nested items */
+    color: var(--text-heading); /* Adjust color for nested items */
     line-height: 1.5; /* Adjust line height for nested items */
     position: static;
 }
@@ -140,7 +140,7 @@
 .page-content hr {
     border: none;
     height: 1px;
-    background: linear-gradient(90deg, transparent 0%, #cbd5e0 20%, #cbd5e0 80%, transparent 100%);
+    background: linear-gradient(90deg, transparent 0%, var(--hr-color) 20%, var(--hr-color) 80%, transparent 100%);
     margin: 3.5rem 0;
     position: relative;
 }
@@ -152,8 +152,8 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background: #ffffff;
-    color: #667eea;
+    background: var(--bg-main);
+    color: var(--text-blockquote)eea;
     padding: 0 1rem;
     font-size: 1.2rem;
 }
@@ -161,12 +161,12 @@
 /* --- Strong Text --- */
 .page-content strong {
     font-weight: 700;
-    color: #4a5568; /* Ensures bold text is readable and consistent */
+    color: var(--text-p-alt); /* Ensures bold text is readable and consistent */
 }
 
 /* --- Standard Links --- */
 .page-content a {
-    color: #667eea;
+    color: var(--text-blockquote)eea;
     text-decoration: none;
     font-weight: 600;
     position: relative;
@@ -181,12 +181,12 @@
     left: 0;
     width: 0;
     height: 2px;
-    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(90deg, var(--gradient-start) 0%, #764ba2 100%);
     transition: width 0.3s ease;
 }
 
 .page-content a:hover {
-    color: #764ba2;
+    color: var(--link-markdown-hover);
 }
 
 .page-content a:hover::after {
@@ -197,7 +197,7 @@
     display: inline-flex;
     align-items: center;
     padding: 0.5rem 1rem;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, var(--gradient-start) 0%, #764ba2 100%);
     color: white;
     border-radius: 6px;
     text-decoration: none;
diff --git a/public/styles.css b/public/styles.css
index a8db40c..13358cb 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,8 +1,8 @@
 /* Base styles */
 html, body {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  background-color: #f8f9fa;
-  color: #212529;
+  background-color: var(--bg-body);
+  color: var(--text-main);
   min-height: 100vh;
   line-height: 1.6;
 }
@@ -36,8 +36,8 @@
   display: inline
 }
 footer {
-  background-color: #34495e;
-  color: #ecf0f1;
+  background-color: var(--bg-footer);
+  color: var(--text-light);
   padding: 2rem 0;
   text-align: center;
   border-top: none;
@@ -52,7 +52,7 @@
 }
 footer p {
   font-size: 0.85rem;
-  color: #bdc3c7;
+  color: var(--text-footer-p);
   line-height: 1.5;
   margin: 0;
   max-width: 600px;
@@ -63,7 +63,7 @@
   transition: color 0.2s ease-in-out;
 }
 footer p a:hover {
-  color: #ecf0f1;
+  color: var(--text-light);
   text-decoration: underline;
 }
 footer img {
@@ -114,18 +114,18 @@
 }
 .xml-sitemap-link {
   font-size: 0.85em;
-  color: #777;
+  color: var(--text-muted-alt);
 }
 footer small {
-  color: #666; font-size: 10px; opacity: 0.3;
+  color: var(--text-placeholder); font-size: 10px; opacity: 0.3;
 }
 footer small a {
    color: inherit
 }
 /* Header */
 header#site-header {
-  background-color: #2c3e50;
-  color: #ecf0f1;
+  background-color: var(--bg-header);
+  color: var(--text-light);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   position:relative;
   z-index: 10;
@@ -217,7 +217,7 @@
   font-size: 1.5rem;
   font-weight: 600;
   margin-bottom: 1rem;
-  border-bottom: 2px solid #2c3e50;
+  border-bottom: 2px solid var(--accent-primary);
   padding-bottom: 0.3rem;
 }
 main article p {
@@ -254,7 +254,7 @@
   display: block;
   width: 100%;
   padding: 0.3rem 0.6rem;
-  color: #2c3e50;
+  color: var(--accent-primary);
   cursor: pointer;
   font: inherit;
   font-weight: 600; /* Match the link font weight */
@@ -263,13 +263,13 @@
   box-sizing: border-box;
 }
 header#site-header nav.site-nav > a {
-  color: #ecf0f1;
+  color: var(--text-light);
 }
 header#site-header nav.site-nav a:hover,
 header#site-header nav.site-nav a:focus,
 nav.site-nav .dropdown-content form button:hover,
 nav.site-nav .dropdown-content form button:focus {
-  background-color: #34495e;
+  background-color: var(--bg-footer);
 }
 nav.site-nav .dropdown {
   position: relative;
@@ -297,13 +297,13 @@
   display: block;
   padding: 0.3rem 0.6rem;
   text-decoration: none;
-  color: #2c3e50;
+  color: var(--accent-primary);
   font-weight: 600; /* Match the button font weight */
 }
 nav.site-nav .dropdown-content a:hover,
 nav.site-nav .dropdown-content form button:hover {
-  color: #ecf0f1;
-  background-color: #34495e; /* Match the main nav hover color */
+  color: var(--text-light);
+  background-color: var(--bg-footer); /* Match the main nav hover color */
 }
 nav.site-nav .dropdown:hover .dropdown-content {
   display: block;
@@ -362,8 +362,8 @@
 }
 .sidebar {
   width: 250px;
-  background-color: #f8f9fa;
-  border-right: 1px solid #e0e0e0;
+  background-color: var(--bg-body);
+  border-right: 1px solid var(--accent-primary);
   padding: 1em;
   font-size: 0.95rem;
   font-family: Arial, sans-serif;
@@ -382,9 +382,9 @@
 .sidebar .menu-year {
   font-weight: 700;
   font-size: 1.2rem;
-  color: #333333;
+  color: var(--accent-primary);
   margin-bottom: 1rem;
-  border-bottom: 2px solid #2c3e50;
+  border-bottom: 2px solid var(--accent-primary);
   padding-bottom: 0.5rem;
   text-transform: uppercase;
   letter-spacing: 1px;
@@ -392,7 +392,7 @@
 .sidebar .menu-month {
   margin-bottom: 1rem;
   font-weight: 600;
-  color: #555555;
+  color: var(--accent-primary);
 }
 .sidebar .menu-month ul.posts-list {
   list-style: none;
@@ -400,7 +400,7 @@
   margin-top: 0.3rem;
 }
 .sidebar .menu-month li.post-label a {
-  color: #2c3e50;
+  color: var(--accent-primary);
   text-decoration: none;
   display: block;
   padding: 0.2rem 0;
@@ -490,7 +490,7 @@
 }
 .toc a:hover {
   background-color: #e9ecef;
-  color: #2c3e50;
+  color: var(--accent-primary);
   border-left-color: #007bff;
   transform: translateX(2px);
 }
@@ -509,7 +509,7 @@
   font-weight: 700;
   font-size: 1.1rem;
   margin-bottom: 1rem;
-  color: #2c3e50;
+  color: var(--accent-primary);
   border-bottom: 2px solid #dee2e6;
   padding-bottom: 0.5rem;
   text-transform: uppercase;
diff --git a/src/css/base.css b/src/css/base.css
index 02f9e54..8d43809 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -1,8 +1,8 @@
 /* Base styles */
 html, body {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  background-color: #f8f9fa;
-  color: #212529;
+  background-color: var(--bg-body);
+  color: var(--text-main);
   min-height: 100vh;
   line-height: 1.6;
 }
diff --git a/src/css/favicon.css b/src/css/favicon.css
index 6c988a5..469c4b6 100644
--- a/src/css/favicon.css
+++ b/src/css/favicon.css
@@ -9,9 +9,9 @@
 }
 
 .deep-dive-enhanced {
-    background: linear-gradient(135deg, #0A192F 0%, #1a2744 30%, #0f1b36 70%, #0A192F 100%);
+    background: linear-gradient(135deg, #0A192F 0%, var(--deep-dive-mid-1) 30%, var(--deep-dive-mid-2) 70%, var(--deep-dive-bg) 100%);
     border-radius: 8px;
-    color: #00CED1;
+    color: var(--deep-dive-glow);
     font-weight: 700;
     position: relative;
     overflow: hidden;
@@ -97,7 +97,7 @@
     position: absolute;
     width: 2px;
     height: 2px;
-    background: #00CED1;
+    background: var(--deep-dive-glow);
     border-radius: 50%;
     opacity: 0.6;
     animation: float 6s linear infinite;
diff --git a/src/css/footer.css b/src/css/footer.css
index d1f42f7..8a5faf3 100644
--- a/src/css/footer.css
+++ b/src/css/footer.css
@@ -1,6 +1,6 @@
 footer {
-  background-color: #34495e;
-  color: #ecf0f1;
+  background-color: var(--bg-footer);
+  color: var(--text-light);
   padding: 2rem 0;
   text-align: center;
   border-top: none;
@@ -17,20 +17,20 @@
 
 footer p {
   font-size: 0.85rem;
-  color: #bdc3c7;
+  color: var(--text-footer-p);
   line-height: 1.5;
   margin: 0;
   max-width: 600px;
 }
 
 footer p a {
-  color: #9bd3ff;
+  color: var(--link-footer);
   text-decoration: none;
   transition: color 0.2s ease-in-out;
 }
 
 footer p a:hover {
-  color: #ecf0f1;
+  color: var(--text-light);
   text-decoration: underline;
 }
 
@@ -89,11 +89,11 @@
 }
 .xml-sitemap-link {
   font-size: 0.85em;
-  color: #777;
+  color: var(--text-muted-alt);
 }
 
 footer small {
-  color: #666; font-size: 10px; opacity: 0.3;
+  color: var(--text-placeholder); font-size: 10px; opacity: 0.3;
 }
 footer small a {
    color: inherit
diff --git a/src/css/header.css b/src/css/header.css
index 24c33a7..ce29d54 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -1,7 +1,7 @@
 /* Header */
 header#site-header {
-  background-color: #2c3e50;
-  color: #ecf0f1;
+  background-color: var(--bg-header);
+  color: var(--text-light);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   position:relative;
   z-index: 10;
@@ -53,7 +53,7 @@
   bottom: -2px;
   width: 100%;
   height: 2px;
-  background-color: #ecf0f1;
+  background-color: var(--bg-light-accent);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.3s ease;
diff --git a/src/css/main.css b/src/css/main.css
index 79b8989..aca7e10 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1,7 +1,7 @@
 /* Main content */
 main.container {
   flex: 1;
-  background-color: #ffffff;
+  background-color: var(--bg-main);
   padding: 2rem;
   border-radius: 6px;
   box-shadow: 0 2px 6px rgba(0,0,0,0.05);
@@ -11,13 +11,13 @@
   font-size: 1.5rem;
   font-weight: 600;
   margin-bottom: 1rem;
-  border-bottom: 2px solid #2c3e50;
+  border-bottom: 2px solid var(--accent-primary);
   padding-bottom: 0.3rem;
 }
 
 main article p {
   font-size: 1rem;
-  color: #444;
+  color: var(--text-article);
 }
 
 main {
diff --git a/src/css/nav.css b/src/css/nav.css
index cef1c3d..1ba2b34 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -18,7 +18,7 @@
   display: block;
   width: 100%;
   padding: 0.3rem 0.6rem;
-  color: #2c3e50;
+  color: var(--accent-primary);
   cursor: pointer;
   font: inherit;
   font-weight: 600; /* Match the link font weight */
@@ -28,14 +28,14 @@
 }
 
 header#site-header nav.site-nav > a {
-  color: #ecf0f1;
+  color: var(--text-light);
 }
 
 header#site-header nav.site-nav a:hover,
 header#site-header nav.site-nav a:focus,
 nav.site-nav .dropdown-content form button:hover,
 nav.site-nav .dropdown-content form button:focus {
-  background-color: #34495e;
+  background-color: var(--bg-footer);
 }
 
 nav.site-nav .dropdown {
@@ -67,14 +67,14 @@
   display: block;
   padding: 0.3rem 0.6rem;
   text-decoration: none;
-  color: #2c3e50;
+  color: var(--accent-primary);
   font-weight: 600; /* Match the button font weight */
 }
 
 nav.site-nav .dropdown-content a:hover,
 nav.site-nav .dropdown-content form button:hover {
-  color: #ecf0f1;
-  background-color: #34495e; /* Match the main nav hover color */
+  color: var(--text-light);
+  background-color: var(--bg-footer); /* Match the main nav hover color */
 }
 
 
diff --git a/src/css/responsive.css b/src/css/responsive.css
index c264a0b..2a045ad 100644
--- a/src/css/responsive.css
+++ b/src/css/responsive.css
@@ -74,7 +74,7 @@
     height: auto;
     float: none;
     padding: 0.5rem;
-    border-bottom: 1px solid #444;
+    border-bottom: 1px solid var(--text-article);
     
     text-align: left;
   }
diff --git a/src/css/sidebar.css b/src/css/sidebar.css
index 391f93d..e561dc7 100644
--- a/src/css/sidebar.css
+++ b/src/css/sidebar.css
@@ -1,7 +1,7 @@
 .sidebar {
   width: 250px;
-  background-color: #f8f9fa;
-  border-right: 1px solid #e0e0e0;
+  background-color: var(--bg-body);
+  border-right: 1px solid var(--accent-primary);
   padding: 1em;
   font-size: 0.95rem;
   font-family: Arial, sans-serif;
@@ -22,9 +22,9 @@
 .sidebar .menu-year {
   font-weight: 700;
   font-size: 1.2rem;
-  color: #333333;
+  color: var(--accent-primary);
   margin-bottom: 1rem;
-  border-bottom: 2px solid #2c3e50;
+  border-bottom: 2px solid var(--accent-primary);
   padding-bottom: 0.5rem;
   text-transform: uppercase;
   letter-spacing: 1px;
@@ -33,7 +33,7 @@
 .sidebar .menu-month {
   margin-bottom: 1rem;
   font-weight: 600;
-  color: #555555;
+  color: var(--accent-primary);
 }
 
 .sidebar .menu-month ul.posts-list {
@@ -43,7 +43,7 @@
 }
 
 .sidebar .menu-month li.post-label a {
-  color: #2c3e50;
+  color: var(--accent-primary);
   text-decoration: none;
   display: block;
   padding: 0.2rem 0;
@@ -51,7 +51,7 @@
 }
 
 .sidebar .menu-month li.post-label a:hover {
-  color: #1a73e8;
+  color: var(--accent-blue);
   text-decoration: underline;
 }
 
diff --git a/src/css/styles.css b/src/css/styles.css
index 863852d..899c828 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -1,10 +1,11 @@
-@import url('base.css');
-@import url('footer.css');
-@import url('header.css');
-@import url('main.css');
-@import url('nav.css');
-@import url('reset.css');
-@import url('sidebar.css');
-@import url('toc.css');
-@import url('responsive.css');
-@import url('favicon.css');
+@import url("theme.css");
+@import url("base.css");
+@import url("footer.css");
+@import url("header.css");
+@import url("main.css");
+@import url("nav.css");
+@import url("reset.css");
+@import url("sidebar.css");
+@import url("toc.css");
+@import url("responsive.css");
+@import url("favicon.css");
diff --git a/src/css/theme.css b/src/css/theme.css
new file mode 100644
index 0000000..5165d36
--- /dev/null
+++ b/src/css/theme.css
@@ -0,0 +1,114 @@
+:root {
+  /* Backgrounds */
+  --bg-body: #f8f9fa;
+  --bg-main: #ffffff;
+  --bg-header: #2c3e50;
+  --bg-footer: #34495e;
+  --bg-nav-hover: #34495e;
+  --bg-card: #ffffff;
+  --bg-tag: #e3f2fd;
+  --bg-list-item: #f8fafc;
+  --bg-hover: #e9ecef;
+  --bg-code: #2d2d2d;
+  --bg-code-inline: #f0f0f0;
+
+  /* Text Colors */
+  --text-main: #212529;
+  --text-muted: #6c757d;
+  --text-light: #ecf0f1;
+  --text-footer-p: #bdc3c7;
+  --text-article: #444444;
+  --text-heading: #2d3748;
+  --text-p-alt: #4a5568;
+  --text-heading: #2d3748;
+  --text-heading-dark: #333333;
+  --text-muted-dark: #495057;
+  --text-muted-light: #999999;
+  --text-bold: #222222;
+  --text-italic: #555555;
+  --text-blockquote: #666677;
+  --text-code-inline: #c7254e;
+  --text-code-block: #cccccc;
+
+  /* Accents & Links */
+  --accent-primary: #2c3e50;
+  --accent-blue: #1a73e8;
+  --accent-blue-bright: #007bff;
+  --accent-tag: #1976d2;
+  --link-footer: #9bd3ff;
+  --link-classic: #0366d6;
+  --link-sitemap: #007acc;
+  --link-markdown: #667eea;
+  --link-markdown-hover: #764ba2;
+  --gradient-start: #667eea;
+  --gradient-end: #764ba2;
+
+  /* Borders & Dividers */
+  --border-light: #e0e0e0;
+  --border-medium: #dee2e6;
+  --border-markdown: #e2e8f0;
+  --border-grey: #cccccc;
+  --border-grey-dark: #bbbbbb;
+  --border-light-alt: #dddddd;
+  --border-input: #dee2e6;
+  --border-tag: #bbdefb;
+  --border-markdown: #e2e8f0;
+  --hr-color: #cbd5e0;
+  --border-subtle: #e9ecef;
+  --border-button: #888888;
+
+  /* Status & Action Colors */
+  --status-error: #d33333;
+  --status-error-alt: #dc3545;
+  --status-success: #28a745;
+  --action-primary: #2980b9;
+  --action-hover: #1f598a;
+  --action-alt: #007acc;
+  --action-alt-hover: #005fa3;
+
+  /* Additional Backgrounds */
+  --bg-subtle: #f5f7fa;
+  --bg-neutral: #eeeeee;
+  --bg-docs: #fdfdfd;
+  --bg-docs-th: #f9fafb;
+  --bg-docs-card: #fefefe;
+  --bg-sitemap: #f9f9f9;
+  --bg-pagination: #f5f5f5;
+  --bg-light-accent: #ecf0f1;
+
+  /* Additional Text Colors */
+  --text-docs-h1: #1a1a1a;
+  --text-docs-h2: #374151;
+  --text-docs-muted: #4b5563;
+  --text-hover-dark: #1a242f;
+  --text-muted-alt: #777777;
+  --text-placeholder: #666666;
+
+  /* Additional Borders */
+  --border-docs: #e5e7eb;
+
+  /* Additional Mapping */
+  --text-white: #ffffff;
+  --text-black: #000000;
+  --text-docs-strong: #1f2937;
+  --bg-docs-inline: #f1f3f4;
+  --bg-logs-hover: #e9e9e9;
+
+  /* Docs & Layout Extras */
+  --bg-docs-inline: #f1f3f4;
+  --text-docs-strong: #1f2937;
+  --border-docs: #e5e7eb;
+
+  /* Log & Interaction Extras */
+  --bg-logs-hover: #e9e9e9;
+  --text-black: #000000;
+  --text-white: #ffffff;
+
+  /* Deep Dive & Gradient Specifics */
+  --deep-dive-bg: #0a192f;
+  --deep-dive-glow: #00ced1;
+  --deep-dive-mid-1: #1a2744;
+  --deep-dive-mid-2: #0f1b36;
+  --gradient-start-trans: #667eea15;
+  --gradient-end-trans: #764ba215;
+}
diff --git a/src/css/toc.css b/src/css/toc.css
index fb04a87..02475fc 100644
--- a/src/css/toc.css
+++ b/src/css/toc.css
@@ -1,6 +1,6 @@
 .toc {
-  background: #f8f9fa;
-  border: 1px solid #e9ecef;
+  background: var(--bg-body);
+  border: 1px solid var(--border-subtle);
   border-radius: 8px;
   box-sizing: border-box;
   margin-bottom: 1em;
@@ -16,7 +16,7 @@
   max-height: calc(100vh - 40px);
   overflow-y: auto;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  border-color: #dee2e6;
+  border-color: var(--border-medium);
 }
 
 .toc.sticky.bottom-boundary {
@@ -72,7 +72,7 @@
   display: block;
   padding: 0.5rem 0.75rem;
   text-decoration: none;
-  color: #495057;
+  color: var(--text-muted-dark);
   border-radius: 4px;
   transition: all 0.2s ease;
   border-left: 3px solid transparent;
@@ -81,22 +81,22 @@
 }
 
 .toc a:hover {
-  background-color: #e9ecef;
-  color: #2c3e50;
-  border-left-color: #007bff;
+  background-color: var(--bg-hover);
+  color: var(--accent-primary);
+  border-left-color: var(--accent-blue-bright);
   transform: translateX(2px);
 }
 
 .toc a:focus {
-  outline: 2px solid #007bff;
+  outline: 2px solid var(--accent-blue-bright);
   outline-offset: 2px;
 }
 
 /* Active link highlighting */
 .toc a.active {
-  background-color: #e3f2fd;
-  color: #1976d2;
-  border-left-color: #1976d2;
+  background-color: var(--bg-tag);
+  color: var(--accent-tag);
+  border-left-color: var(--accent-tag);
   font-weight: 600;
 }
 
@@ -104,8 +104,8 @@
   font-weight: 700;
   font-size: 1.1rem;
   margin-bottom: 1rem;
-  color: #2c3e50;
-  border-bottom: 2px solid #dee2e6;
+  color: var(--accent-primary);
+  border-bottom: 2px solid var(--border-medium);
   padding-bottom: 0.5rem;
   text-transform: uppercase;
   letter-spacing: 0.5px;
@@ -114,7 +114,7 @@
 /* Ensure proper spacing between sidebar sections */
 .sidebar nav > * + .toc {
   margin-top: 2rem;
-  border-top: 1px solid #dee2e6;
+  border-top: 1px solid var(--border-medium);
   padding-top: 1.5rem;
 }