diff --git a/public/assets/css/style-extra.css b/public/assets/css/style-extra.css
index c026bea..069ed4e 100644
--- a/public/assets/css/style-extra.css
+++ b/public/assets/css/style-extra.css
@@ -8,7 +8,7 @@ header::before {
     inset: 0;
     z-index: -1;
     backdrop-filter: blur(12px);
-    background: linear-gradient(to bottom, #1A1A1A 0%, transparent 50%), #1A1A1A80;
+    background: linear-gradient(to bottom, var(--color-dark-grey) 0%, transparent 50%), color-mix(in srgb, var(--color-dark-grey) 50%, transparent);
     mask-image: linear-gradient(to bottom,
         black 0%,
         black 50%,
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index ad6ab3e..200a0d7 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -1,6 +1,6 @@
 html {
-    color: #E0E0E0;
-    background-color: #1A1A1A;
+    color: var(--color-light-grey);
+    background-color: var(--color-dark-grey);
     margin: 0;
     padding: 0;
     font-family: "Inter", "BIZ UDGothic", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", sans-serif;
@@ -16,7 +16,7 @@ body {
     flex-direction: column;
 }
 header {
-    background-color: #1A1A1A;
+    background-color: var(--color-dark-grey);
     position: fixed;
     top: 0;
     left: 0;
@@ -43,7 +43,7 @@ footer {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    color: #FFFFFF;
+    color: var(--color-white);
 }
 
 /* Layout */
@@ -53,7 +53,7 @@ section {
 }
 
 .block {
-    background-color: #272727;
+    background-color: var(--color-dark-grey-alt);
     border-radius: 8px;
     padding: 16px 16px;
     margin-bottom: 16px;
@@ -248,84 +248,99 @@ s {
 }
 
 /* Colors */
-.text-white {
-    color: #FFFFFF;
+:root {
+    --color-black: #000000;
+    --color-white: #FFFFFF;
+
+    --color-dark-grey: #1A1A1A;
+    --color-dark-grey-alt: #272727;
+    --color-light-grey: #E0E0E0;
+    --color-light-grey-alt: #939393;
+
+    --color-red: #A03333;
+    --color-yellow: #CCA000;
+    --color-green: #00A050;
+    --color-teal: #00A0A0;
+    --color-blue: #0080C0;
+    --color-orange: #C86000;
+    --color-brown: #A07033;
+    --color-purple: #7844A0;
+    --color-magenta: #A043A0;
+    --color-indigo: #334DA0;
+
+    --color-bright-red: #C84040;
+    --color-bright-yellow: #FFC800;
+    --color-bright-green: #00C878;
+    --color-bright-teal: #00C8C8;
+    --color-bright-blue: #00C0FF;
+    --color-bright-orange: #FA7800;
+    --color-bright-brown: #C88C40;
+    --color-bright-purple: #C84040;
+    --color-bright-magenta: #C854C8;
+    --color-bright-indigo: #4060C8;
 }
 
-.text-bg {
-    color: #1A1A1A;
-}
-.text-bg-alt {
-    color: #272727;
-}
-.text-tx {
-    color: #E0E0E0;
-}
-.text-tx-alt {
-    color: #939393;
-}
+/* Text Colors */
+.text-black          { color: var(--color-black); }
+.text-white          { color: var(--color-white); }
 
-.text-red {
-    color: #A03333;
-}
-.text-yellow {
-    color: #CCA000;
-}
-.text-green {
-    color: #00A050;
-}
-.text-teal {
-    color: #00A0A0;
-}
-.text-blue {
-    color: #0080C0;
-}
-.text-orange {
-    color: #C86000;
-}
-.text-brown {
-    color: #A07033;
-}
-.text-purple {
-    color: #7844A0;
-}
-.text-magenta {
-    color: #A043A0;
-}
-.text-indigo {
-    color: #334DA0;
-}
+.text-dark-grey      { color: var(--color-dark-grey); }
+.text-dark-grey-alt  { color: var(--color-dark-grey-alt); }
+.text-light-grey     { color: var(--color-light-grey); }
+.text-light-grey-alt { color: var(--color-light-grey-alt); }
 
-.text-bright-red {
-    color: #C84040;
-}
-.text-bright-yellow {
-    color: #FFC800;
-}
-.text-bright-green {
-    color: #00C878;
-}
-.text-bright-teal {
-    color: #00C8C8;
-}
-.text-bright-blue {
-    color: #00C0FF;
-}
-.text-bright-orange {
-    color: #FA7800;
-}
-.text-bright-brown {
-    color: #C88C40;
-}
-.text-bright-purple {
-    color: #C84040;
-}
-.text-bright-magenta {
-    color: #C854C8;
-}
-.text-bright-indigo {
-    color: #4060C8;
-}
+.text-red            { color: var(--color-red); }
+.text-yellow         { color: var(--color-yellow); }
+.text-green          { color: var(--color-green); }
+.text-teal           { color: var(--color-teal); }
+.text-blue           { color: var(--color-blue); }
+.text-orange         { color: var(--color-orange); }
+.text-brown          { color: var(--color-brown); }
+.text-purple         { color: var(--color-purple); }
+.text-magenta        { color: var(--color-magenta); }
+.text-indigo         { color: var(--color-indigo); }
+
+.text-bright-red     { color: var(--color-bright-red); }
+.text-bright-yellow  { color: var(--color-bright-yellow); }
+.text-bright-green   { color: var(--color-bright-green); }
+.text-bright-teal    { color: var(--color-bright-teal); }
+.text-bright-blue    { color: var(--color-bright-blue); }
+.text-bright-orange  { color: var(--color-bright-orange); }
+.text-bright-brown   { color: var(--color-bright-brown); }
+.text-bright-purple  { color: var(--color-bright-purple); }
+.text-bright-magenta { color: var(--color-bright-magenta); }
+.text-bright-indigo  { color: var(--color-bright-indigo); }
+ 
+/* Background Colors */
+.bg-black          { background-color: var(--color-black); }
+.bg-white          { background-color: var(--color-white); }
+
+.bg-dark-grey      { background-color: var(--color-dark-grey); }
+.bg-dark-grey-alt  { background-color: var(--color-dark-grey-alt); }
+.bg-light-grey     { background-color: var(--color-light-grey); }
+.bg-light-grey-alt { background-color: var(--color-light-grey-alt); }
+
+.bg-red            { background-color: var(--color-red); }
+.bg-yellow         { background-color: var(--color-yellow); }
+.bg-green          { background-color: var(--color-green); }
+.bg-teal           { background-color: var(--color-teal); }
+.bg-blue           { background-color: var(--color-blue); }
+.bg-orange         { background-color: var(--color-orange); }
+.bg-brown          { background-color: var(--color-brown); }
+.bg-purple         { background-color: var(--color-purple); }
+.bg-magenta        { background-color: var(--color-magenta); }
+.bg-indigo         { background-color: var(--color-indigo); }
+
+.bg-bright-red     { background-color: var(--color-bright-red); }
+.bg-bright-yellow  { background-color: var(--color-bright-yellow); }
+.bg-bright-green   { background-color: var(--color-bright-green); }
+.bg-bright-teal    { background-color: var(--color-bright-teal); }
+.bg-bright-blue    { background-color: var(--color-bright-blue); }
+.bg-bright-orange  { background-color: var(--color-bright-orange); }
+.bg-bright-brown   { background-color: var(--color-bright-brown); }
+.bg-bright-purple  { background-color: var(--color-bright-purple); }
+.bg-bright-magenta { background-color: var(--color-bright-magenta); }
+.bg-bright-indigo  { background-color: var(--color-bright-indigo); }
 
 /* Responsive Design */
 .hide {
diff --git a/public/tools/tls-test/assets/tls-test.css b/public/tools/tls-test/assets/tls-test.css
index c13c1b7..035e8a2 100644
--- a/public/tools/tls-test/assets/tls-test.css
+++ b/public/tools/tls-test/assets/tls-test.css
@@ -1,6 +1,6 @@
 /* =====================================================
  * Nercone TLS Test — shared styles
- * Palette comes from /publichttps://assets.nercone.dev/css/style.css
+ * Palette comes from /public/assets/css/style.css
  *   #1A1A1A = page bg        #272727 = block bg
  *   #202020 = input bg       #3a3a3a = border
  *   #E0E0E0 = tx              #939393 = tx-alt