diff --git a/e2e/tests/golden/acquired-brain-injury.html b/e2e/tests/golden/acquired-brain-injury.html
index 4d7cf8c4..282eafa1 100644
--- a/e2e/tests/golden/acquired-brain-injury.html
+++ b/e2e/tests/golden/acquired-brain-injury.html
@@ -44,6 +44,21 @@
         /* E2E TEST EDIT: sourceMappingURL comments elided */
     </style>
     <style>
+        /* Define the custom variables */
+        :root {
+            --background-color: #57068c;
+            --link-color: #0170B2;
+            --border-bottom-color: #65686c;
+            --dotted-border: 1px dotted var(--border-bottom-color);
+            --chat-stable-link-color: #e0d5e8;
+            --white-color: #fff;
+            --font-size-h1: 1.8em;
+            --font-size-h2: 24px;
+            --font-size-h3: 20px;
+            --footer-color: #acb6c2;
+            --hover-background-color: #6c07ae;
+        }
+
         /* Apply the Gotham font to all elements */
         * {
             font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
@@ -58,15 +73,15 @@
         }
 
         body div h1 {
-            font-size: 1.8em;
+            font-size: var(--font-size-h1);
         }
 
         body div h2 {
-            font-size: 24px;
+            font-size: var(--font-size-h2);
         }
 
         body div h3 {
-            font-size: 20px;
+            font-size: var(--font-size-h3);
         }
 
         /* Apply the Montserrat font to all headings */
@@ -114,12 +129,12 @@
 
         .row a:hover {
             text-decoration: underline;
-            color: #0170B2;
+            color: var(--link-color);
         }
 
         .row a {
             text-decoration: none;
-            color: #0170B2;
+            color: var(--link-color);
             line-height: 1.2;
         }
 
@@ -148,7 +163,7 @@
         }
 
         .image.white-bg {
-            background-color: white;
+            background-color: var(--white-color);
         }
 
 
@@ -159,7 +174,7 @@
         .color-nav {
             margin-bottom: 0;
             border-radius: 0;
-            background-color: #57068c;
+            background-color: var(--background-color);
         }
 
         ul.list-group {
@@ -195,7 +210,7 @@
     </style>
     <style>
         .chat-tab {
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             padding: 10px 10px 8px;
             font-size: 14px;
             border-radius: 3px 3px 0 0;
@@ -229,7 +244,7 @@
             padding: 10px 10px 8px;
             width: 131.38px;
             height: 42px;
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             line-height: normal;
             white-space: nowrap;
             box-sizing: border-box;
@@ -245,8 +260,8 @@
         }
 
         .chat-button:hover {
-            background-color: #6c07ae;
-            color: #fff;
+            background-color: var(--hover-background-color);
+            color: var(--white-color);
         }
 
         .chat-frame-wrap {
@@ -346,16 +361,16 @@
         }
 
         ::selection {
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
         }
 
         .button {
             appearance: none;
             border: 0 none;
             box-shadow: none;
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
             font-weight: 400;
             font-size: 14px;
             font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
@@ -370,13 +385,13 @@
         .primary-footer {
             display: flex;
             background: #22272d;
-            color: #acb6c2;
+            color: var(--footer-color);
             padding-top: 75px;
             padding-bottom: 87px
         }
 
         .footer__social a:not(.ss-navigateright):not(.button) img {
-            background-color: white;
+            background-color: var(--white-color);
             border-radius: 10%;
         }
 
@@ -432,7 +447,7 @@
         }
 
         .primary-footer .button {
-            color: #fff;
+            color: var(--white-color);
             font-size: 14px;
             width: 100%;
             display: block;
@@ -443,30 +458,30 @@
             margin: 0 0 1em;
             line-height: 1.5;
             font-size: 12px;
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a,
         .primary-footer .block .s-la-widget a,
         .block .s-la-widget .primary-footer a {
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a:hover,
         .primary-footer .block .s-la-widget a:hover,
         .block .s-la-widget .primary-footer a:hover {
-            color: #fff;
+            color: var(--white-color);
             text-decoration: underline;
         }
 
         .primary-footer .list li,
         .primary-footer .block .s-la-widget .list-unstyled li,
         .block .s-la-widget .primary-footer .list-unstyled li {
-            border-bottom-color: #65686c;
+            border-bottom-color: var(--border-bottom-color);
         }
 
         .footer__menu:first-child .list li:last-child {
-            border-bottom: 1px dotted #65686c;
+            border-bottom: var(--dotted-border);
             margin-bottom: 10px;
             padding-bottom: 10px;
         }
@@ -482,8 +497,8 @@
         }
 
         .footer__give a:hover {
-            color: white;
-            background-color: #6c07ae;
+            color: var(--white-color);
+            background-color: var(--hover-background-color);
             text-decoration: underline;
         }
 
@@ -509,7 +524,7 @@
 
         .footer__copyright {
             font-size: 12px;
-            border-top: 1px dotted #65686c;
+            border-top: var(--dotted-border);
             padding-top: 13px;
             color: #b1b1b1;
             line-height: 1.4;
@@ -564,19 +579,19 @@
             }
 
             .primary-footer a {
-                color: #fff;
+                color: var(--white-color);
                 text-decoration: none;
             }
 
             .footer__social p a:after {
-                color: #fff;
+                color: var(--white-color);
                 margin-left: 5px;
                 font-size: 18px;
                 vertical-align: middle;
             }
 
             .list:last-child li:last-child {
-                border-bottom: 1px dotted #65686c;
+                border-bottom: var(--dotted-border);
                 margin: 0 0 10px 0;
                 padding: 0 0 10px 0;
             }
@@ -13194,8 +13209,8 @@
     <style>
         /* StableLink.css */
         .stable-link-button {
-            background-color: #57068c;
-            color: #fff;
+            background-color: var(--background-color);
+            color: var(--white-color);
             cursor: pointer;
             border: 1px solid #ccc;
             padding: 5px 10px;
@@ -13205,7 +13220,7 @@
 
         .stable-link-button:hover,
         .stable-link-button.hover {
-            background-color: #6c07ae;
+            background-color: var(--hover-background-color);
         }
 
         .stable-link-button:focus,
@@ -13222,7 +13237,7 @@
             padding: 5px 10px;
             margin-right: 5px;
             margin-bottom: 5px;
-            background-color: #e0d5e8;
+            background-color: var(--chat-stable-link-color);
             color: #1c2127;
         }
 
diff --git a/e2e/tests/golden/can-community-task-groups-learn-from-the-principles-of-group-therapy.html b/e2e/tests/golden/can-community-task-groups-learn-from-the-principles-of-group-therapy.html
index 72c0fcf2..98c9d681 100644
--- a/e2e/tests/golden/can-community-task-groups-learn-from-the-principles-of-group-therapy.html
+++ b/e2e/tests/golden/can-community-task-groups-learn-from-the-principles-of-group-therapy.html
@@ -44,6 +44,21 @@
         /* E2E TEST EDIT: sourceMappingURL comments elided */
     </style>
     <style>
+        /* Define the custom variables */
+        :root {
+            --background-color: #57068c;
+            --link-color: #0170B2;
+            --border-bottom-color: #65686c;
+            --dotted-border: 1px dotted var(--border-bottom-color);
+            --chat-stable-link-color: #e0d5e8;
+            --white-color: #fff;
+            --font-size-h1: 1.8em;
+            --font-size-h2: 24px;
+            --font-size-h3: 20px;
+            --footer-color: #acb6c2;
+            --hover-background-color: #6c07ae;
+        }
+
         /* Apply the Gotham font to all elements */
         * {
             font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
@@ -58,15 +73,15 @@
         }
 
         body div h1 {
-            font-size: 1.8em;
+            font-size: var(--font-size-h1);
         }
 
         body div h2 {
-            font-size: 24px;
+            font-size: var(--font-size-h2);
         }
 
         body div h3 {
-            font-size: 20px;
+            font-size: var(--font-size-h3);
         }
 
         /* Apply the Montserrat font to all headings */
@@ -114,12 +129,12 @@
 
         .row a:hover {
             text-decoration: underline;
-            color: #0170B2;
+            color: var(--link-color);
         }
 
         .row a {
             text-decoration: none;
-            color: #0170B2;
+            color: var(--link-color);
             line-height: 1.2;
         }
 
@@ -148,7 +163,7 @@
         }
 
         .image.white-bg {
-            background-color: white;
+            background-color: var(--white-color);
         }
 
 
@@ -159,7 +174,7 @@
         .color-nav {
             margin-bottom: 0;
             border-radius: 0;
-            background-color: #57068c;
+            background-color: var(--background-color);
         }
 
         ul.list-group {
@@ -195,7 +210,7 @@
     </style>
     <style>
         .chat-tab {
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             padding: 10px 10px 8px;
             font-size: 14px;
             border-radius: 3px 3px 0 0;
@@ -229,7 +244,7 @@
             padding: 10px 10px 8px;
             width: 131.38px;
             height: 42px;
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             line-height: normal;
             white-space: nowrap;
             box-sizing: border-box;
@@ -245,8 +260,8 @@
         }
 
         .chat-button:hover {
-            background-color: #6c07ae;
-            color: #fff;
+            background-color: var(--hover-background-color);
+            color: var(--white-color);
         }
 
         .chat-frame-wrap {
@@ -346,16 +361,16 @@
         }
 
         ::selection {
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
         }
 
         .button {
             appearance: none;
             border: 0 none;
             box-shadow: none;
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
             font-weight: 400;
             font-size: 14px;
             font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
@@ -370,13 +385,13 @@
         .primary-footer {
             display: flex;
             background: #22272d;
-            color: #acb6c2;
+            color: var(--footer-color);
             padding-top: 75px;
             padding-bottom: 87px
         }
 
         .footer__social a:not(.ss-navigateright):not(.button) img {
-            background-color: white;
+            background-color: var(--white-color);
             border-radius: 10%;
         }
 
@@ -432,7 +447,7 @@
         }
 
         .primary-footer .button {
-            color: #fff;
+            color: var(--white-color);
             font-size: 14px;
             width: 100%;
             display: block;
@@ -443,30 +458,30 @@
             margin: 0 0 1em;
             line-height: 1.5;
             font-size: 12px;
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a,
         .primary-footer .block .s-la-widget a,
         .block .s-la-widget .primary-footer a {
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a:hover,
         .primary-footer .block .s-la-widget a:hover,
         .block .s-la-widget .primary-footer a:hover {
-            color: #fff;
+            color: var(--white-color);
             text-decoration: underline;
         }
 
         .primary-footer .list li,
         .primary-footer .block .s-la-widget .list-unstyled li,
         .block .s-la-widget .primary-footer .list-unstyled li {
-            border-bottom-color: #65686c;
+            border-bottom-color: var(--border-bottom-color);
         }
 
         .footer__menu:first-child .list li:last-child {
-            border-bottom: 1px dotted #65686c;
+            border-bottom: var(--dotted-border);
             margin-bottom: 10px;
             padding-bottom: 10px;
         }
@@ -482,8 +497,8 @@
         }
 
         .footer__give a:hover {
-            color: white;
-            background-color: #6c07ae;
+            color: var(--white-color);
+            background-color: var(--hover-background-color);
             text-decoration: underline;
         }
 
@@ -509,7 +524,7 @@
 
         .footer__copyright {
             font-size: 12px;
-            border-top: 1px dotted #65686c;
+            border-top: var(--dotted-border);
             padding-top: 13px;
             color: #b1b1b1;
             line-height: 1.4;
@@ -564,19 +579,19 @@
             }
 
             .primary-footer a {
-                color: #fff;
+                color: var(--white-color);
                 text-decoration: none;
             }
 
             .footer__social p a:after {
-                color: #fff;
+                color: var(--white-color);
                 margin-left: 5px;
                 font-size: 18px;
                 vertical-align: middle;
             }
 
             .list:last-child li:last-child {
-                border-bottom: 1px dotted #65686c;
+                border-bottom: var(--dotted-border);
                 margin: 0 0 10px 0;
                 padding: 0 0 10px 0;
             }
@@ -13194,8 +13209,8 @@
     <style>
         /* StableLink.css */
         .stable-link-button {
-            background-color: #57068c;
-            color: #fff;
+            background-color: var(--background-color);
+            color: var(--white-color);
             cursor: pointer;
             border: 1px solid #ccc;
             padding: 5px 10px;
@@ -13205,7 +13220,7 @@
 
         .stable-link-button:hover,
         .stable-link-button.hover {
-            background-color: #6c07ae;
+            background-color: var(--hover-background-color);
         }
 
         .stable-link-button:focus,
@@ -13222,7 +13237,7 @@
             padding: 5px 10px;
             margin-right: 5px;
             margin-bottom: 5px;
-            background-color: #e0d5e8;
+            background-color: var(--chat-stable-link-color);
             color: #1c2127;
         }
 
diff --git a/e2e/tests/golden/corriere-fiorentino.html b/e2e/tests/golden/corriere-fiorentino.html
index 0cce2a06..24103de7 100644
--- a/e2e/tests/golden/corriere-fiorentino.html
+++ b/e2e/tests/golden/corriere-fiorentino.html
@@ -44,6 +44,21 @@
         /* E2E TEST EDIT: sourceMappingURL comments elided */
     </style>
     <style>
+        /* Define the custom variables */
+        :root {
+            --background-color: #57068c;
+            --link-color: #0170B2;
+            --border-bottom-color: #65686c;
+            --dotted-border: 1px dotted var(--border-bottom-color);
+            --chat-stable-link-color: #e0d5e8;
+            --white-color: #fff;
+            --font-size-h1: 1.8em;
+            --font-size-h2: 24px;
+            --font-size-h3: 20px;
+            --footer-color: #acb6c2;
+            --hover-background-color: #6c07ae;
+        }
+
         /* Apply the Gotham font to all elements */
         * {
             font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
@@ -58,15 +73,15 @@
         }
 
         body div h1 {
-            font-size: 1.8em;
+            font-size: var(--font-size-h1);
         }
 
         body div h2 {
-            font-size: 24px;
+            font-size: var(--font-size-h2);
         }
 
         body div h3 {
-            font-size: 20px;
+            font-size: var(--font-size-h3);
         }
 
         /* Apply the Montserrat font to all headings */
@@ -114,12 +129,12 @@
 
         .row a:hover {
             text-decoration: underline;
-            color: #0170B2;
+            color: var(--link-color);
         }
 
         .row a {
             text-decoration: none;
-            color: #0170B2;
+            color: var(--link-color);
             line-height: 1.2;
         }
 
@@ -148,7 +163,7 @@
         }
 
         .image.white-bg {
-            background-color: white;
+            background-color: var(--white-color);
         }
 
 
@@ -159,7 +174,7 @@
         .color-nav {
             margin-bottom: 0;
             border-radius: 0;
-            background-color: #57068c;
+            background-color: var(--background-color);
         }
 
         ul.list-group {
@@ -195,7 +210,7 @@
     </style>
     <style>
         .chat-tab {
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             padding: 10px 10px 8px;
             font-size: 14px;
             border-radius: 3px 3px 0 0;
@@ -229,7 +244,7 @@
             padding: 10px 10px 8px;
             width: 131.38px;
             height: 42px;
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             line-height: normal;
             white-space: nowrap;
             box-sizing: border-box;
@@ -245,8 +260,8 @@
         }
 
         .chat-button:hover {
-            background-color: #6c07ae;
-            color: #fff;
+            background-color: var(--hover-background-color);
+            color: var(--white-color);
         }
 
         .chat-frame-wrap {
@@ -346,16 +361,16 @@
         }
 
         ::selection {
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
         }
 
         .button {
             appearance: none;
             border: 0 none;
             box-shadow: none;
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
             font-weight: 400;
             font-size: 14px;
             font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
@@ -370,13 +385,13 @@
         .primary-footer {
             display: flex;
             background: #22272d;
-            color: #acb6c2;
+            color: var(--footer-color);
             padding-top: 75px;
             padding-bottom: 87px
         }
 
         .footer__social a:not(.ss-navigateright):not(.button) img {
-            background-color: white;
+            background-color: var(--white-color);
             border-radius: 10%;
         }
 
@@ -432,7 +447,7 @@
         }
 
         .primary-footer .button {
-            color: #fff;
+            color: var(--white-color);
             font-size: 14px;
             width: 100%;
             display: block;
@@ -443,30 +458,30 @@
             margin: 0 0 1em;
             line-height: 1.5;
             font-size: 12px;
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a,
         .primary-footer .block .s-la-widget a,
         .block .s-la-widget .primary-footer a {
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a:hover,
         .primary-footer .block .s-la-widget a:hover,
         .block .s-la-widget .primary-footer a:hover {
-            color: #fff;
+            color: var(--white-color);
             text-decoration: underline;
         }
 
         .primary-footer .list li,
         .primary-footer .block .s-la-widget .list-unstyled li,
         .block .s-la-widget .primary-footer .list-unstyled li {
-            border-bottom-color: #65686c;
+            border-bottom-color: var(--border-bottom-color);
         }
 
         .footer__menu:first-child .list li:last-child {
-            border-bottom: 1px dotted #65686c;
+            border-bottom: var(--dotted-border);
             margin-bottom: 10px;
             padding-bottom: 10px;
         }
@@ -482,8 +497,8 @@
         }
 
         .footer__give a:hover {
-            color: white;
-            background-color: #6c07ae;
+            color: var(--white-color);
+            background-color: var(--hover-background-color);
             text-decoration: underline;
         }
 
@@ -509,7 +524,7 @@
 
         .footer__copyright {
             font-size: 12px;
-            border-top: 1px dotted #65686c;
+            border-top: var(--dotted-border);
             padding-top: 13px;
             color: #b1b1b1;
             line-height: 1.4;
@@ -564,19 +579,19 @@
             }
 
             .primary-footer a {
-                color: #fff;
+                color: var(--white-color);
                 text-decoration: none;
             }
 
             .footer__social p a:after {
-                color: #fff;
+                color: var(--white-color);
                 margin-left: 5px;
                 font-size: 18px;
                 vertical-align: middle;
             }
 
             .list:last-child li:last-child {
-                border-bottom: 1px dotted #65686c;
+                border-bottom: var(--dotted-border);
                 margin: 0 0 10px 0;
                 padding: 0 0 10px 0;
             }
@@ -13194,8 +13209,8 @@
     <style>
         /* StableLink.css */
         .stable-link-button {
-            background-color: #57068c;
-            color: #fff;
+            background-color: var(--background-color);
+            color: var(--white-color);
             cursor: pointer;
             border: 1px solid #ccc;
             padding: 5px 10px;
@@ -13205,7 +13220,7 @@
 
         .stable-link-button:hover,
         .stable-link-button.hover {
-            background-color: #6c07ae;
+            background-color: var(--hover-background-color);
         }
 
         .stable-link-button:focus,
@@ -13222,7 +13237,7 @@
             padding: 5px 10px;
             margin-right: 5px;
             margin-bottom: 5px;
-            background-color: #e0d5e8;
+            background-color: var(--chat-stable-link-color);
             color: #1c2127;
         }
 
diff --git a/e2e/tests/golden/design-of-led-light-therapy-device-based-on-free-form-lens.html b/e2e/tests/golden/design-of-led-light-therapy-device-based-on-free-form-lens.html
index 2afa6814..080ecac8 100644
--- a/e2e/tests/golden/design-of-led-light-therapy-device-based-on-free-form-lens.html
+++ b/e2e/tests/golden/design-of-led-light-therapy-device-based-on-free-form-lens.html
@@ -44,6 +44,21 @@
         /* E2E TEST EDIT: sourceMappingURL comments elided */
     </style>
     <style>
+        /* Define the custom variables */
+        :root {
+            --background-color: #57068c;
+            --link-color: #0170B2;
+            --border-bottom-color: #65686c;
+            --dotted-border: 1px dotted var(--border-bottom-color);
+            --chat-stable-link-color: #e0d5e8;
+            --white-color: #fff;
+            --font-size-h1: 1.8em;
+            --font-size-h2: 24px;
+            --font-size-h3: 20px;
+            --footer-color: #acb6c2;
+            --hover-background-color: #6c07ae;
+        }
+
         /* Apply the Gotham font to all elements */
         * {
             font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
@@ -58,15 +73,15 @@
         }
 
         body div h1 {
-            font-size: 1.8em;
+            font-size: var(--font-size-h1);
         }
 
         body div h2 {
-            font-size: 24px;
+            font-size: var(--font-size-h2);
         }
 
         body div h3 {
-            font-size: 20px;
+            font-size: var(--font-size-h3);
         }
 
         /* Apply the Montserrat font to all headings */
@@ -114,12 +129,12 @@
 
         .row a:hover {
             text-decoration: underline;
-            color: #0170B2;
+            color: var(--link-color);
         }
 
         .row a {
             text-decoration: none;
-            color: #0170B2;
+            color: var(--link-color);
             line-height: 1.2;
         }
 
@@ -148,7 +163,7 @@
         }
 
         .image.white-bg {
-            background-color: white;
+            background-color: var(--white-color);
         }
 
 
@@ -159,7 +174,7 @@
         .color-nav {
             margin-bottom: 0;
             border-radius: 0;
-            background-color: #57068c;
+            background-color: var(--background-color);
         }
 
         ul.list-group {
@@ -195,7 +210,7 @@
     </style>
     <style>
         .chat-tab {
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             padding: 10px 10px 8px;
             font-size: 14px;
             border-radius: 3px 3px 0 0;
@@ -229,7 +244,7 @@
             padding: 10px 10px 8px;
             width: 131.38px;
             height: 42px;
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             line-height: normal;
             white-space: nowrap;
             box-sizing: border-box;
@@ -245,8 +260,8 @@
         }
 
         .chat-button:hover {
-            background-color: #6c07ae;
-            color: #fff;
+            background-color: var(--hover-background-color);
+            color: var(--white-color);
         }
 
         .chat-frame-wrap {
@@ -346,16 +361,16 @@
         }
 
         ::selection {
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
         }
 
         .button {
             appearance: none;
             border: 0 none;
             box-shadow: none;
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
             font-weight: 400;
             font-size: 14px;
             font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
@@ -370,13 +385,13 @@
         .primary-footer {
             display: flex;
             background: #22272d;
-            color: #acb6c2;
+            color: var(--footer-color);
             padding-top: 75px;
             padding-bottom: 87px
         }
 
         .footer__social a:not(.ss-navigateright):not(.button) img {
-            background-color: white;
+            background-color: var(--white-color);
             border-radius: 10%;
         }
 
@@ -432,7 +447,7 @@
         }
 
         .primary-footer .button {
-            color: #fff;
+            color: var(--white-color);
             font-size: 14px;
             width: 100%;
             display: block;
@@ -443,30 +458,30 @@
             margin: 0 0 1em;
             line-height: 1.5;
             font-size: 12px;
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a,
         .primary-footer .block .s-la-widget a,
         .block .s-la-widget .primary-footer a {
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a:hover,
         .primary-footer .block .s-la-widget a:hover,
         .block .s-la-widget .primary-footer a:hover {
-            color: #fff;
+            color: var(--white-color);
             text-decoration: underline;
         }
 
         .primary-footer .list li,
         .primary-footer .block .s-la-widget .list-unstyled li,
         .block .s-la-widget .primary-footer .list-unstyled li {
-            border-bottom-color: #65686c;
+            border-bottom-color: var(--border-bottom-color);
         }
 
         .footer__menu:first-child .list li:last-child {
-            border-bottom: 1px dotted #65686c;
+            border-bottom: var(--dotted-border);
             margin-bottom: 10px;
             padding-bottom: 10px;
         }
@@ -482,8 +497,8 @@
         }
 
         .footer__give a:hover {
-            color: white;
-            background-color: #6c07ae;
+            color: var(--white-color);
+            background-color: var(--hover-background-color);
             text-decoration: underline;
         }
 
@@ -509,7 +524,7 @@
 
         .footer__copyright {
             font-size: 12px;
-            border-top: 1px dotted #65686c;
+            border-top: var(--dotted-border);
             padding-top: 13px;
             color: #b1b1b1;
             line-height: 1.4;
@@ -564,19 +579,19 @@
             }
 
             .primary-footer a {
-                color: #fff;
+                color: var(--white-color);
                 text-decoration: none;
             }
 
             .footer__social p a:after {
-                color: #fff;
+                color: var(--white-color);
                 margin-left: 5px;
                 font-size: 18px;
                 vertical-align: middle;
             }
 
             .list:last-child li:last-child {
-                border-bottom: 1px dotted #65686c;
+                border-bottom: var(--dotted-border);
                 margin: 0 0 10px 0;
                 padding: 0 0 10px 0;
             }
@@ -13194,8 +13209,8 @@
     <style>
         /* StableLink.css */
         .stable-link-button {
-            background-color: #57068c;
-            color: #fff;
+            background-color: var(--background-color);
+            color: var(--white-color);
             cursor: pointer;
             border: 1px solid #ccc;
             padding: 5px 10px;
@@ -13205,7 +13220,7 @@
 
         .stable-link-button:hover,
         .stable-link-button.hover {
-            background-color: #6c07ae;
+            background-color: var(--hover-background-color);
         }
 
         .stable-link-button:focus,
@@ -13222,7 +13237,7 @@
             padding: 5px 10px;
             margin-right: 5px;
             margin-bottom: 5px;
-            background-color: #e0d5e8;
+            background-color: var(--chat-stable-link-color);
             color: #1c2127;
         }
 
diff --git a/e2e/tests/golden/editorial-cartoon.html b/e2e/tests/golden/editorial-cartoon.html
index abe1aa51..9cb6d905 100644
--- a/e2e/tests/golden/editorial-cartoon.html
+++ b/e2e/tests/golden/editorial-cartoon.html
@@ -44,6 +44,21 @@
         /* E2E TEST EDIT: sourceMappingURL comments elided */
     </style>
     <style>
+        /* Define the custom variables */
+        :root {
+            --background-color: #57068c;
+            --link-color: #0170B2;
+            --border-bottom-color: #65686c;
+            --dotted-border: 1px dotted var(--border-bottom-color);
+            --chat-stable-link-color: #e0d5e8;
+            --white-color: #fff;
+            --font-size-h1: 1.8em;
+            --font-size-h2: 24px;
+            --font-size-h3: 20px;
+            --footer-color: #acb6c2;
+            --hover-background-color: #6c07ae;
+        }
+
         /* Apply the Gotham font to all elements */
         * {
             font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
@@ -58,15 +73,15 @@
         }
 
         body div h1 {
-            font-size: 1.8em;
+            font-size: var(--font-size-h1);
         }
 
         body div h2 {
-            font-size: 24px;
+            font-size: var(--font-size-h2);
         }
 
         body div h3 {
-            font-size: 20px;
+            font-size: var(--font-size-h3);
         }
 
         /* Apply the Montserrat font to all headings */
@@ -114,12 +129,12 @@
 
         .row a:hover {
             text-decoration: underline;
-            color: #0170B2;
+            color: var(--link-color);
         }
 
         .row a {
             text-decoration: none;
-            color: #0170B2;
+            color: var(--link-color);
             line-height: 1.2;
         }
 
@@ -148,7 +163,7 @@
         }
 
         .image.white-bg {
-            background-color: white;
+            background-color: var(--white-color);
         }
 
 
@@ -159,7 +174,7 @@
         .color-nav {
             margin-bottom: 0;
             border-radius: 0;
-            background-color: #57068c;
+            background-color: var(--background-color);
         }
 
         ul.list-group {
@@ -195,7 +210,7 @@
     </style>
     <style>
         .chat-tab {
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             padding: 10px 10px 8px;
             font-size: 14px;
             border-radius: 3px 3px 0 0;
@@ -229,7 +244,7 @@
             padding: 10px 10px 8px;
             width: 131.38px;
             height: 42px;
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             line-height: normal;
             white-space: nowrap;
             box-sizing: border-box;
@@ -245,8 +260,8 @@
         }
 
         .chat-button:hover {
-            background-color: #6c07ae;
-            color: #fff;
+            background-color: var(--hover-background-color);
+            color: var(--white-color);
         }
 
         .chat-frame-wrap {
@@ -346,16 +361,16 @@
         }
 
         ::selection {
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
         }
 
         .button {
             appearance: none;
             border: 0 none;
             box-shadow: none;
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
             font-weight: 400;
             font-size: 14px;
             font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
@@ -370,13 +385,13 @@
         .primary-footer {
             display: flex;
             background: #22272d;
-            color: #acb6c2;
+            color: var(--footer-color);
             padding-top: 75px;
             padding-bottom: 87px
         }
 
         .footer__social a:not(.ss-navigateright):not(.button) img {
-            background-color: white;
+            background-color: var(--white-color);
             border-radius: 10%;
         }
 
@@ -432,7 +447,7 @@
         }
 
         .primary-footer .button {
-            color: #fff;
+            color: var(--white-color);
             font-size: 14px;
             width: 100%;
             display: block;
@@ -443,30 +458,30 @@
             margin: 0 0 1em;
             line-height: 1.5;
             font-size: 12px;
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a,
         .primary-footer .block .s-la-widget a,
         .block .s-la-widget .primary-footer a {
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a:hover,
         .primary-footer .block .s-la-widget a:hover,
         .block .s-la-widget .primary-footer a:hover {
-            color: #fff;
+            color: var(--white-color);
             text-decoration: underline;
         }
 
         .primary-footer .list li,
         .primary-footer .block .s-la-widget .list-unstyled li,
         .block .s-la-widget .primary-footer .list-unstyled li {
-            border-bottom-color: #65686c;
+            border-bottom-color: var(--border-bottom-color);
         }
 
         .footer__menu:first-child .list li:last-child {
-            border-bottom: 1px dotted #65686c;
+            border-bottom: var(--dotted-border);
             margin-bottom: 10px;
             padding-bottom: 10px;
         }
@@ -482,8 +497,8 @@
         }
 
         .footer__give a:hover {
-            color: white;
-            background-color: #6c07ae;
+            color: var(--white-color);
+            background-color: var(--hover-background-color);
             text-decoration: underline;
         }
 
@@ -509,7 +524,7 @@
 
         .footer__copyright {
             font-size: 12px;
-            border-top: 1px dotted #65686c;
+            border-top: var(--dotted-border);
             padding-top: 13px;
             color: #b1b1b1;
             line-height: 1.4;
@@ -564,19 +579,19 @@
             }
 
             .primary-footer a {
-                color: #fff;
+                color: var(--white-color);
                 text-decoration: none;
             }
 
             .footer__social p a:after {
-                color: #fff;
+                color: var(--white-color);
                 margin-left: 5px;
                 font-size: 18px;
                 vertical-align: middle;
             }
 
             .list:last-child li:last-child {
-                border-bottom: 1px dotted #65686c;
+                border-bottom: var(--dotted-border);
                 margin: 0 0 10px 0;
                 padding: 0 0 10px 0;
             }
@@ -13194,8 +13209,8 @@
     <style>
         /* StableLink.css */
         .stable-link-button {
-            background-color: #57068c;
-            color: #fff;
+            background-color: var(--background-color);
+            color: var(--white-color);
             cursor: pointer;
             border: 1px solid #ccc;
             padding: 5px 10px;
@@ -13205,7 +13220,7 @@
 
         .stable-link-button:hover,
         .stable-link-button.hover {
-            background-color: #6c07ae;
+            background-color: var(--hover-background-color);
         }
 
         .stable-link-button:focus,
@@ -13222,7 +13237,7 @@
             padding: 5px 10px;
             margin-right: 5px;
             margin-bottom: 5px;
-            background-color: #e0d5e8;
+            background-color: var(--chat-stable-link-color);
             color: #1c2127;
         }
 
diff --git a/e2e/tests/golden/hamlet.html b/e2e/tests/golden/hamlet.html
index be3002b0..4b257dd5 100644
--- a/e2e/tests/golden/hamlet.html
+++ b/e2e/tests/golden/hamlet.html
@@ -44,6 +44,21 @@
         /* E2E TEST EDIT: sourceMappingURL comments elided */
     </style>
     <style>
+        /* Define the custom variables */
+        :root {
+            --background-color: #57068c;
+            --link-color: #0170B2;
+            --border-bottom-color: #65686c;
+            --dotted-border: 1px dotted var(--border-bottom-color);
+            --chat-stable-link-color: #e0d5e8;
+            --white-color: #fff;
+            --font-size-h1: 1.8em;
+            --font-size-h2: 24px;
+            --font-size-h3: 20px;
+            --footer-color: #acb6c2;
+            --hover-background-color: #6c07ae;
+        }
+
         /* Apply the Gotham font to all elements */
         * {
             font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
@@ -58,15 +73,15 @@
         }
 
         body div h1 {
-            font-size: 1.8em;
+            font-size: var(--font-size-h1);
         }
 
         body div h2 {
-            font-size: 24px;
+            font-size: var(--font-size-h2);
         }
 
         body div h3 {
-            font-size: 20px;
+            font-size: var(--font-size-h3);
         }
 
         /* Apply the Montserrat font to all headings */
@@ -114,12 +129,12 @@
 
         .row a:hover {
             text-decoration: underline;
-            color: #0170B2;
+            color: var(--link-color);
         }
 
         .row a {
             text-decoration: none;
-            color: #0170B2;
+            color: var(--link-color);
             line-height: 1.2;
         }
 
@@ -148,7 +163,7 @@
         }
 
         .image.white-bg {
-            background-color: white;
+            background-color: var(--white-color);
         }
 
 
@@ -159,7 +174,7 @@
         .color-nav {
             margin-bottom: 0;
             border-radius: 0;
-            background-color: #57068c;
+            background-color: var(--background-color);
         }
 
         ul.list-group {
@@ -195,7 +210,7 @@
     </style>
     <style>
         .chat-tab {
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             padding: 10px 10px 8px;
             font-size: 14px;
             border-radius: 3px 3px 0 0;
@@ -229,7 +244,7 @@
             padding: 10px 10px 8px;
             width: 131.38px;
             height: 42px;
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             line-height: normal;
             white-space: nowrap;
             box-sizing: border-box;
@@ -245,8 +260,8 @@
         }
 
         .chat-button:hover {
-            background-color: #6c07ae;
-            color: #fff;
+            background-color: var(--hover-background-color);
+            color: var(--white-color);
         }
 
         .chat-frame-wrap {
@@ -346,16 +361,16 @@
         }
 
         ::selection {
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
         }
 
         .button {
             appearance: none;
             border: 0 none;
             box-shadow: none;
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
             font-weight: 400;
             font-size: 14px;
             font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
@@ -370,13 +385,13 @@
         .primary-footer {
             display: flex;
             background: #22272d;
-            color: #acb6c2;
+            color: var(--footer-color);
             padding-top: 75px;
             padding-bottom: 87px
         }
 
         .footer__social a:not(.ss-navigateright):not(.button) img {
-            background-color: white;
+            background-color: var(--white-color);
             border-radius: 10%;
         }
 
@@ -432,7 +447,7 @@
         }
 
         .primary-footer .button {
-            color: #fff;
+            color: var(--white-color);
             font-size: 14px;
             width: 100%;
             display: block;
@@ -443,30 +458,30 @@
             margin: 0 0 1em;
             line-height: 1.5;
             font-size: 12px;
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a,
         .primary-footer .block .s-la-widget a,
         .block .s-la-widget .primary-footer a {
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a:hover,
         .primary-footer .block .s-la-widget a:hover,
         .block .s-la-widget .primary-footer a:hover {
-            color: #fff;
+            color: var(--white-color);
             text-decoration: underline;
         }
 
         .primary-footer .list li,
         .primary-footer .block .s-la-widget .list-unstyled li,
         .block .s-la-widget .primary-footer .list-unstyled li {
-            border-bottom-color: #65686c;
+            border-bottom-color: var(--border-bottom-color);
         }
 
         .footer__menu:first-child .list li:last-child {
-            border-bottom: 1px dotted #65686c;
+            border-bottom: var(--dotted-border);
             margin-bottom: 10px;
             padding-bottom: 10px;
         }
@@ -482,8 +497,8 @@
         }
 
         .footer__give a:hover {
-            color: white;
-            background-color: #6c07ae;
+            color: var(--white-color);
+            background-color: var(--hover-background-color);
             text-decoration: underline;
         }
 
@@ -509,7 +524,7 @@
 
         .footer__copyright {
             font-size: 12px;
-            border-top: 1px dotted #65686c;
+            border-top: var(--dotted-border);
             padding-top: 13px;
             color: #b1b1b1;
             line-height: 1.4;
@@ -564,19 +579,19 @@
             }
 
             .primary-footer a {
-                color: #fff;
+                color: var(--white-color);
                 text-decoration: none;
             }
 
             .footer__social p a:after {
-                color: #fff;
+                color: var(--white-color);
                 margin-left: 5px;
                 font-size: 18px;
                 vertical-align: middle;
             }
 
             .list:last-child li:last-child {
-                border-bottom: 1px dotted #65686c;
+                border-bottom: var(--dotted-border);
                 margin: 0 0 10px 0;
                 padding: 0 0 10px 0;
             }
@@ -13194,8 +13209,8 @@
     <style>
         /* StableLink.css */
         .stable-link-button {
-            background-color: #57068c;
-            color: #fff;
+            background-color: var(--background-color);
+            color: var(--white-color);
             cursor: pointer;
             border: 1px solid #ccc;
             padding: 5px 10px;
@@ -13205,7 +13220,7 @@
 
         .stable-link-button:hover,
         .stable-link-button.hover {
-            background-color: #6c07ae;
+            background-color: var(--hover-background-color);
         }
 
         .stable-link-button:focus,
@@ -13222,7 +13237,7 @@
             padding: 5px 10px;
             margin-right: 5px;
             margin-bottom: 5px;
-            background-color: #e0d5e8;
+            background-color: var(--chat-stable-link-color);
             color: #1c2127;
         }
 
diff --git a/e2e/tests/golden/history-today.html b/e2e/tests/golden/history-today.html
index 6d8d93c7..18b79f6d 100644
--- a/e2e/tests/golden/history-today.html
+++ b/e2e/tests/golden/history-today.html
@@ -44,6 +44,21 @@
         /* E2E TEST EDIT: sourceMappingURL comments elided */
     </style>
     <style>
+        /* Define the custom variables */
+        :root {
+            --background-color: #57068c;
+            --link-color: #0170B2;
+            --border-bottom-color: #65686c;
+            --dotted-border: 1px dotted var(--border-bottom-color);
+            --chat-stable-link-color: #e0d5e8;
+            --white-color: #fff;
+            --font-size-h1: 1.8em;
+            --font-size-h2: 24px;
+            --font-size-h3: 20px;
+            --footer-color: #acb6c2;
+            --hover-background-color: #6c07ae;
+        }
+
         /* Apply the Gotham font to all elements */
         * {
             font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
@@ -58,15 +73,15 @@
         }
 
         body div h1 {
-            font-size: 1.8em;
+            font-size: var(--font-size-h1);
         }
 
         body div h2 {
-            font-size: 24px;
+            font-size: var(--font-size-h2);
         }
 
         body div h3 {
-            font-size: 20px;
+            font-size: var(--font-size-h3);
         }
 
         /* Apply the Montserrat font to all headings */
@@ -114,12 +129,12 @@
 
         .row a:hover {
             text-decoration: underline;
-            color: #0170B2;
+            color: var(--link-color);
         }
 
         .row a {
             text-decoration: none;
-            color: #0170B2;
+            color: var(--link-color);
             line-height: 1.2;
         }
 
@@ -148,7 +163,7 @@
         }
 
         .image.white-bg {
-            background-color: white;
+            background-color: var(--white-color);
         }
 
 
@@ -159,7 +174,7 @@
         .color-nav {
             margin-bottom: 0;
             border-radius: 0;
-            background-color: #57068c;
+            background-color: var(--background-color);
         }
 
         ul.list-group {
@@ -195,7 +210,7 @@
     </style>
     <style>
         .chat-tab {
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             padding: 10px 10px 8px;
             font-size: 14px;
             border-radius: 3px 3px 0 0;
@@ -229,7 +244,7 @@
             padding: 10px 10px 8px;
             width: 131.38px;
             height: 42px;
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             line-height: normal;
             white-space: nowrap;
             box-sizing: border-box;
@@ -245,8 +260,8 @@
         }
 
         .chat-button:hover {
-            background-color: #6c07ae;
-            color: #fff;
+            background-color: var(--hover-background-color);
+            color: var(--white-color);
         }
 
         .chat-frame-wrap {
@@ -346,16 +361,16 @@
         }
 
         ::selection {
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
         }
 
         .button {
             appearance: none;
             border: 0 none;
             box-shadow: none;
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
             font-weight: 400;
             font-size: 14px;
             font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
@@ -370,13 +385,13 @@
         .primary-footer {
             display: flex;
             background: #22272d;
-            color: #acb6c2;
+            color: var(--footer-color);
             padding-top: 75px;
             padding-bottom: 87px
         }
 
         .footer__social a:not(.ss-navigateright):not(.button) img {
-            background-color: white;
+            background-color: var(--white-color);
             border-radius: 10%;
         }
 
@@ -432,7 +447,7 @@
         }
 
         .primary-footer .button {
-            color: #fff;
+            color: var(--white-color);
             font-size: 14px;
             width: 100%;
             display: block;
@@ -443,30 +458,30 @@
             margin: 0 0 1em;
             line-height: 1.5;
             font-size: 12px;
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a,
         .primary-footer .block .s-la-widget a,
         .block .s-la-widget .primary-footer a {
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a:hover,
         .primary-footer .block .s-la-widget a:hover,
         .block .s-la-widget .primary-footer a:hover {
-            color: #fff;
+            color: var(--white-color);
             text-decoration: underline;
         }
 
         .primary-footer .list li,
         .primary-footer .block .s-la-widget .list-unstyled li,
         .block .s-la-widget .primary-footer .list-unstyled li {
-            border-bottom-color: #65686c;
+            border-bottom-color: var(--border-bottom-color);
         }
 
         .footer__menu:first-child .list li:last-child {
-            border-bottom: 1px dotted #65686c;
+            border-bottom: var(--dotted-border);
             margin-bottom: 10px;
             padding-bottom: 10px;
         }
@@ -482,8 +497,8 @@
         }
 
         .footer__give a:hover {
-            color: white;
-            background-color: #6c07ae;
+            color: var(--white-color);
+            background-color: var(--hover-background-color);
             text-decoration: underline;
         }
 
@@ -509,7 +524,7 @@
 
         .footer__copyright {
             font-size: 12px;
-            border-top: 1px dotted #65686c;
+            border-top: var(--dotted-border);
             padding-top: 13px;
             color: #b1b1b1;
             line-height: 1.4;
@@ -564,19 +579,19 @@
             }
 
             .primary-footer a {
-                color: #fff;
+                color: var(--white-color);
                 text-decoration: none;
             }
 
             .footer__social p a:after {
-                color: #fff;
+                color: var(--white-color);
                 margin-left: 5px;
                 font-size: 18px;
                 vertical-align: middle;
             }
 
             .list:last-child li:last-child {
-                border-bottom: 1px dotted #65686c;
+                border-bottom: var(--dotted-border);
                 margin: 0 0 10px 0;
                 padding: 0 0 10px 0;
             }
@@ -13194,8 +13209,8 @@
     <style>
         /* StableLink.css */
         .stable-link-button {
-            background-color: #57068c;
-            color: #fff;
+            background-color: var(--background-color);
+            color: var(--white-color);
             cursor: pointer;
             border: 1px solid #ccc;
             padding: 5px 10px;
@@ -13205,7 +13220,7 @@
 
         .stable-link-button:hover,
         .stable-link-button.hover {
-            background-color: #6c07ae;
+            background-color: var(--hover-background-color);
         }
 
         .stable-link-button:focus,
@@ -13222,7 +13237,7 @@
             padding: 5px 10px;
             margin-right: 5px;
             margin-bottom: 5px;
-            background-color: #e0d5e8;
+            background-color: var(--chat-stable-link-color);
             color: #1c2127;
         }
 
diff --git a/e2e/tests/golden/life-magazine-and-the-power-of-photography.html b/e2e/tests/golden/life-magazine-and-the-power-of-photography.html
index 545bd9a4..f161c228 100644
--- a/e2e/tests/golden/life-magazine-and-the-power-of-photography.html
+++ b/e2e/tests/golden/life-magazine-and-the-power-of-photography.html
@@ -44,6 +44,21 @@
         /* E2E TEST EDIT: sourceMappingURL comments elided */
     </style>
     <style>
+        /* Define the custom variables */
+        :root {
+            --background-color: #57068c;
+            --link-color: #0170B2;
+            --border-bottom-color: #65686c;
+            --dotted-border: 1px dotted var(--border-bottom-color);
+            --chat-stable-link-color: #e0d5e8;
+            --white-color: #fff;
+            --font-size-h1: 1.8em;
+            --font-size-h2: 24px;
+            --font-size-h3: 20px;
+            --footer-color: #acb6c2;
+            --hover-background-color: #6c07ae;
+        }
+
         /* Apply the Gotham font to all elements */
         * {
             font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
@@ -58,15 +73,15 @@
         }
 
         body div h1 {
-            font-size: 1.8em;
+            font-size: var(--font-size-h1);
         }
 
         body div h2 {
-            font-size: 24px;
+            font-size: var(--font-size-h2);
         }
 
         body div h3 {
-            font-size: 20px;
+            font-size: var(--font-size-h3);
         }
 
         /* Apply the Montserrat font to all headings */
@@ -114,12 +129,12 @@
 
         .row a:hover {
             text-decoration: underline;
-            color: #0170B2;
+            color: var(--link-color);
         }
 
         .row a {
             text-decoration: none;
-            color: #0170B2;
+            color: var(--link-color);
             line-height: 1.2;
         }
 
@@ -148,7 +163,7 @@
         }
 
         .image.white-bg {
-            background-color: white;
+            background-color: var(--white-color);
         }
 
 
@@ -159,7 +174,7 @@
         .color-nav {
             margin-bottom: 0;
             border-radius: 0;
-            background-color: #57068c;
+            background-color: var(--background-color);
         }
 
         ul.list-group {
@@ -195,7 +210,7 @@
     </style>
     <style>
         .chat-tab {
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             padding: 10px 10px 8px;
             font-size: 14px;
             border-radius: 3px 3px 0 0;
@@ -229,7 +244,7 @@
             padding: 10px 10px 8px;
             width: 131.38px;
             height: 42px;
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             line-height: normal;
             white-space: nowrap;
             box-sizing: border-box;
@@ -245,8 +260,8 @@
         }
 
         .chat-button:hover {
-            background-color: #6c07ae;
-            color: #fff;
+            background-color: var(--hover-background-color);
+            color: var(--white-color);
         }
 
         .chat-frame-wrap {
@@ -346,16 +361,16 @@
         }
 
         ::selection {
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
         }
 
         .button {
             appearance: none;
             border: 0 none;
             box-shadow: none;
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
             font-weight: 400;
             font-size: 14px;
             font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
@@ -370,13 +385,13 @@
         .primary-footer {
             display: flex;
             background: #22272d;
-            color: #acb6c2;
+            color: var(--footer-color);
             padding-top: 75px;
             padding-bottom: 87px
         }
 
         .footer__social a:not(.ss-navigateright):not(.button) img {
-            background-color: white;
+            background-color: var(--white-color);
             border-radius: 10%;
         }
 
@@ -432,7 +447,7 @@
         }
 
         .primary-footer .button {
-            color: #fff;
+            color: var(--white-color);
             font-size: 14px;
             width: 100%;
             display: block;
@@ -443,30 +458,30 @@
             margin: 0 0 1em;
             line-height: 1.5;
             font-size: 12px;
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a,
         .primary-footer .block .s-la-widget a,
         .block .s-la-widget .primary-footer a {
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a:hover,
         .primary-footer .block .s-la-widget a:hover,
         .block .s-la-widget .primary-footer a:hover {
-            color: #fff;
+            color: var(--white-color);
             text-decoration: underline;
         }
 
         .primary-footer .list li,
         .primary-footer .block .s-la-widget .list-unstyled li,
         .block .s-la-widget .primary-footer .list-unstyled li {
-            border-bottom-color: #65686c;
+            border-bottom-color: var(--border-bottom-color);
         }
 
         .footer__menu:first-child .list li:last-child {
-            border-bottom: 1px dotted #65686c;
+            border-bottom: var(--dotted-border);
             margin-bottom: 10px;
             padding-bottom: 10px;
         }
@@ -482,8 +497,8 @@
         }
 
         .footer__give a:hover {
-            color: white;
-            background-color: #6c07ae;
+            color: var(--white-color);
+            background-color: var(--hover-background-color);
             text-decoration: underline;
         }
 
@@ -509,7 +524,7 @@
 
         .footer__copyright {
             font-size: 12px;
-            border-top: 1px dotted #65686c;
+            border-top: var(--dotted-border);
             padding-top: 13px;
             color: #b1b1b1;
             line-height: 1.4;
@@ -564,19 +579,19 @@
             }
 
             .primary-footer a {
-                color: #fff;
+                color: var(--white-color);
                 text-decoration: none;
             }
 
             .footer__social p a:after {
-                color: #fff;
+                color: var(--white-color);
                 margin-left: 5px;
                 font-size: 18px;
                 vertical-align: middle;
             }
 
             .list:last-child li:last-child {
-                border-bottom: 1px dotted #65686c;
+                border-bottom: var(--dotted-border);
                 margin: 0 0 10px 0;
                 padding: 0 0 10px 0;
             }
@@ -13194,8 +13209,8 @@
     <style>
         /* StableLink.css */
         .stable-link-button {
-            background-color: #57068c;
-            color: #fff;
+            background-color: var(--background-color);
+            color: var(--white-color);
             cursor: pointer;
             border: 1px solid #ccc;
             padding: 5px 10px;
@@ -13205,7 +13220,7 @@
 
         .stable-link-button:hover,
         .stable-link-button.hover {
-            background-color: #6c07ae;
+            background-color: var(--hover-background-color);
         }
 
         .stable-link-button:focus,
@@ -13222,7 +13237,7 @@
             padding: 5px 10px;
             margin-right: 5px;
             margin-bottom: 5px;
-            background-color: #e0d5e8;
+            background-color: var(--chat-stable-link-color);
             color: #1c2127;
         }
 
diff --git a/e2e/tests/golden/modelling-modular-living.html b/e2e/tests/golden/modelling-modular-living.html
index 2bcd8719..d82057ab 100644
--- a/e2e/tests/golden/modelling-modular-living.html
+++ b/e2e/tests/golden/modelling-modular-living.html
@@ -44,6 +44,21 @@
         /* E2E TEST EDIT: sourceMappingURL comments elided */
     </style>
     <style>
+        /* Define the custom variables */
+        :root {
+            --background-color: #57068c;
+            --link-color: #0170B2;
+            --border-bottom-color: #65686c;
+            --dotted-border: 1px dotted var(--border-bottom-color);
+            --chat-stable-link-color: #e0d5e8;
+            --white-color: #fff;
+            --font-size-h1: 1.8em;
+            --font-size-h2: 24px;
+            --font-size-h3: 20px;
+            --footer-color: #acb6c2;
+            --hover-background-color: #6c07ae;
+        }
+
         /* Apply the Gotham font to all elements */
         * {
             font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
@@ -58,15 +73,15 @@
         }
 
         body div h1 {
-            font-size: 1.8em;
+            font-size: var(--font-size-h1);
         }
 
         body div h2 {
-            font-size: 24px;
+            font-size: var(--font-size-h2);
         }
 
         body div h3 {
-            font-size: 20px;
+            font-size: var(--font-size-h3);
         }
 
         /* Apply the Montserrat font to all headings */
@@ -114,12 +129,12 @@
 
         .row a:hover {
             text-decoration: underline;
-            color: #0170B2;
+            color: var(--link-color);
         }
 
         .row a {
             text-decoration: none;
-            color: #0170B2;
+            color: var(--link-color);
             line-height: 1.2;
         }
 
@@ -148,7 +163,7 @@
         }
 
         .image.white-bg {
-            background-color: white;
+            background-color: var(--white-color);
         }
 
 
@@ -159,7 +174,7 @@
         .color-nav {
             margin-bottom: 0;
             border-radius: 0;
-            background-color: #57068c;
+            background-color: var(--background-color);
         }
 
         ul.list-group {
@@ -195,7 +210,7 @@
     </style>
     <style>
         .chat-tab {
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             padding: 10px 10px 8px;
             font-size: 14px;
             border-radius: 3px 3px 0 0;
@@ -229,7 +244,7 @@
             padding: 10px 10px 8px;
             width: 131.38px;
             height: 42px;
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             line-height: normal;
             white-space: nowrap;
             box-sizing: border-box;
@@ -245,8 +260,8 @@
         }
 
         .chat-button:hover {
-            background-color: #6c07ae;
-            color: #fff;
+            background-color: var(--hover-background-color);
+            color: var(--white-color);
         }
 
         .chat-frame-wrap {
@@ -346,16 +361,16 @@
         }
 
         ::selection {
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
         }
 
         .button {
             appearance: none;
             border: 0 none;
             box-shadow: none;
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
             font-weight: 400;
             font-size: 14px;
             font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
@@ -370,13 +385,13 @@
         .primary-footer {
             display: flex;
             background: #22272d;
-            color: #acb6c2;
+            color: var(--footer-color);
             padding-top: 75px;
             padding-bottom: 87px
         }
 
         .footer__social a:not(.ss-navigateright):not(.button) img {
-            background-color: white;
+            background-color: var(--white-color);
             border-radius: 10%;
         }
 
@@ -432,7 +447,7 @@
         }
 
         .primary-footer .button {
-            color: #fff;
+            color: var(--white-color);
             font-size: 14px;
             width: 100%;
             display: block;
@@ -443,30 +458,30 @@
             margin: 0 0 1em;
             line-height: 1.5;
             font-size: 12px;
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a,
         .primary-footer .block .s-la-widget a,
         .block .s-la-widget .primary-footer a {
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a:hover,
         .primary-footer .block .s-la-widget a:hover,
         .block .s-la-widget .primary-footer a:hover {
-            color: #fff;
+            color: var(--white-color);
             text-decoration: underline;
         }
 
         .primary-footer .list li,
         .primary-footer .block .s-la-widget .list-unstyled li,
         .block .s-la-widget .primary-footer .list-unstyled li {
-            border-bottom-color: #65686c;
+            border-bottom-color: var(--border-bottom-color);
         }
 
         .footer__menu:first-child .list li:last-child {
-            border-bottom: 1px dotted #65686c;
+            border-bottom: var(--dotted-border);
             margin-bottom: 10px;
             padding-bottom: 10px;
         }
@@ -482,8 +497,8 @@
         }
 
         .footer__give a:hover {
-            color: white;
-            background-color: #6c07ae;
+            color: var(--white-color);
+            background-color: var(--hover-background-color);
             text-decoration: underline;
         }
 
@@ -509,7 +524,7 @@
 
         .footer__copyright {
             font-size: 12px;
-            border-top: 1px dotted #65686c;
+            border-top: var(--dotted-border);
             padding-top: 13px;
             color: #b1b1b1;
             line-height: 1.4;
@@ -564,19 +579,19 @@
             }
 
             .primary-footer a {
-                color: #fff;
+                color: var(--white-color);
                 text-decoration: none;
             }
 
             .footer__social p a:after {
-                color: #fff;
+                color: var(--white-color);
                 margin-left: 5px;
                 font-size: 18px;
                 vertical-align: middle;
             }
 
             .list:last-child li:last-child {
-                border-bottom: 1px dotted #65686c;
+                border-bottom: var(--dotted-border);
                 margin: 0 0 10px 0;
                 padding: 0 0 10px 0;
             }
@@ -13194,8 +13209,8 @@
     <style>
         /* StableLink.css */
         .stable-link-button {
-            background-color: #57068c;
-            color: #fff;
+            background-color: var(--background-color);
+            color: var(--white-color);
             cursor: pointer;
             border: 1px solid #ccc;
             padding: 5px 10px;
@@ -13205,7 +13220,7 @@
 
         .stable-link-button:hover,
         .stable-link-button.hover {
-            background-color: #6c07ae;
+            background-color: var(--hover-background-color);
         }
 
         .stable-link-button:focus,
@@ -13222,7 +13237,7 @@
             padding: 5px 10px;
             margin-right: 5px;
             margin-bottom: 5px;
-            background-color: #e0d5e8;
+            background-color: var(--chat-stable-link-color);
             color: #1c2127;
         }
 
diff --git a/e2e/tests/golden/moral-psychology-is-relationship-regulation.html b/e2e/tests/golden/moral-psychology-is-relationship-regulation.html
index 43a9d011..deb5942f 100644
--- a/e2e/tests/golden/moral-psychology-is-relationship-regulation.html
+++ b/e2e/tests/golden/moral-psychology-is-relationship-regulation.html
@@ -44,6 +44,21 @@
         /* E2E TEST EDIT: sourceMappingURL comments elided */
     </style>
     <style>
+        /* Define the custom variables */
+        :root {
+            --background-color: #57068c;
+            --link-color: #0170B2;
+            --border-bottom-color: #65686c;
+            --dotted-border: 1px dotted var(--border-bottom-color);
+            --chat-stable-link-color: #e0d5e8;
+            --white-color: #fff;
+            --font-size-h1: 1.8em;
+            --font-size-h2: 24px;
+            --font-size-h3: 20px;
+            --footer-color: #acb6c2;
+            --hover-background-color: #6c07ae;
+        }
+
         /* Apply the Gotham font to all elements */
         * {
             font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
@@ -58,15 +73,15 @@
         }
 
         body div h1 {
-            font-size: 1.8em;
+            font-size: var(--font-size-h1);
         }
 
         body div h2 {
-            font-size: 24px;
+            font-size: var(--font-size-h2);
         }
 
         body div h3 {
-            font-size: 20px;
+            font-size: var(--font-size-h3);
         }
 
         /* Apply the Montserrat font to all headings */
@@ -114,12 +129,12 @@
 
         .row a:hover {
             text-decoration: underline;
-            color: #0170B2;
+            color: var(--link-color);
         }
 
         .row a {
             text-decoration: none;
-            color: #0170B2;
+            color: var(--link-color);
             line-height: 1.2;
         }
 
@@ -148,7 +163,7 @@
         }
 
         .image.white-bg {
-            background-color: white;
+            background-color: var(--white-color);
         }
 
 
@@ -159,7 +174,7 @@
         .color-nav {
             margin-bottom: 0;
             border-radius: 0;
-            background-color: #57068c;
+            background-color: var(--background-color);
         }
 
         ul.list-group {
@@ -195,7 +210,7 @@
     </style>
     <style>
         .chat-tab {
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             padding: 10px 10px 8px;
             font-size: 14px;
             border-radius: 3px 3px 0 0;
@@ -229,7 +244,7 @@
             padding: 10px 10px 8px;
             width: 131.38px;
             height: 42px;
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             line-height: normal;
             white-space: nowrap;
             box-sizing: border-box;
@@ -245,8 +260,8 @@
         }
 
         .chat-button:hover {
-            background-color: #6c07ae;
-            color: #fff;
+            background-color: var(--hover-background-color);
+            color: var(--white-color);
         }
 
         .chat-frame-wrap {
@@ -346,16 +361,16 @@
         }
 
         ::selection {
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
         }
 
         .button {
             appearance: none;
             border: 0 none;
             box-shadow: none;
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
             font-weight: 400;
             font-size: 14px;
             font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
@@ -370,13 +385,13 @@
         .primary-footer {
             display: flex;
             background: #22272d;
-            color: #acb6c2;
+            color: var(--footer-color);
             padding-top: 75px;
             padding-bottom: 87px
         }
 
         .footer__social a:not(.ss-navigateright):not(.button) img {
-            background-color: white;
+            background-color: var(--white-color);
             border-radius: 10%;
         }
 
@@ -432,7 +447,7 @@
         }
 
         .primary-footer .button {
-            color: #fff;
+            color: var(--white-color);
             font-size: 14px;
             width: 100%;
             display: block;
@@ -443,30 +458,30 @@
             margin: 0 0 1em;
             line-height: 1.5;
             font-size: 12px;
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a,
         .primary-footer .block .s-la-widget a,
         .block .s-la-widget .primary-footer a {
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a:hover,
         .primary-footer .block .s-la-widget a:hover,
         .block .s-la-widget .primary-footer a:hover {
-            color: #fff;
+            color: var(--white-color);
             text-decoration: underline;
         }
 
         .primary-footer .list li,
         .primary-footer .block .s-la-widget .list-unstyled li,
         .block .s-la-widget .primary-footer .list-unstyled li {
-            border-bottom-color: #65686c;
+            border-bottom-color: var(--border-bottom-color);
         }
 
         .footer__menu:first-child .list li:last-child {
-            border-bottom: 1px dotted #65686c;
+            border-bottom: var(--dotted-border);
             margin-bottom: 10px;
             padding-bottom: 10px;
         }
@@ -482,8 +497,8 @@
         }
 
         .footer__give a:hover {
-            color: white;
-            background-color: #6c07ae;
+            color: var(--white-color);
+            background-color: var(--hover-background-color);
             text-decoration: underline;
         }
 
@@ -509,7 +524,7 @@
 
         .footer__copyright {
             font-size: 12px;
-            border-top: 1px dotted #65686c;
+            border-top: var(--dotted-border);
             padding-top: 13px;
             color: #b1b1b1;
             line-height: 1.4;
@@ -564,19 +579,19 @@
             }
 
             .primary-footer a {
-                color: #fff;
+                color: var(--white-color);
                 text-decoration: none;
             }
 
             .footer__social p a:after {
-                color: #fff;
+                color: var(--white-color);
                 margin-left: 5px;
                 font-size: 18px;
                 vertical-align: middle;
             }
 
             .list:last-child li:last-child {
-                border-bottom: 1px dotted #65686c;
+                border-bottom: var(--dotted-border);
                 margin: 0 0 10px 0;
                 padding: 0 0 10px 0;
             }
@@ -13194,8 +13209,8 @@
     <style>
         /* StableLink.css */
         .stable-link-button {
-            background-color: #57068c;
-            color: #fff;
+            background-color: var(--background-color);
+            color: var(--white-color);
             cursor: pointer;
             border: 1px solid #ccc;
             padding: 5px 10px;
@@ -13205,7 +13220,7 @@
 
         .stable-link-button:hover,
         .stable-link-button.hover {
-            background-color: #6c07ae;
+            background-color: var(--hover-background-color);
         }
 
         .stable-link-button:focus,
@@ -13222,7 +13237,7 @@
             padding: 5px 10px;
             margin-right: 5px;
             margin-bottom: 5px;
-            background-color: #e0d5e8;
+            background-color: var(--chat-stable-link-color);
             color: #1c2127;
         }
 
diff --git a/e2e/tests/golden/our-lady-of-everyday-life.html b/e2e/tests/golden/our-lady-of-everyday-life.html
index b61fbc7f..d8d8af24 100644
--- a/e2e/tests/golden/our-lady-of-everyday-life.html
+++ b/e2e/tests/golden/our-lady-of-everyday-life.html
@@ -44,6 +44,21 @@
         /* E2E TEST EDIT: sourceMappingURL comments elided */
     </style>
     <style>
+        /* Define the custom variables */
+        :root {
+            --background-color: #57068c;
+            --link-color: #0170B2;
+            --border-bottom-color: #65686c;
+            --dotted-border: 1px dotted var(--border-bottom-color);
+            --chat-stable-link-color: #e0d5e8;
+            --white-color: #fff;
+            --font-size-h1: 1.8em;
+            --font-size-h2: 24px;
+            --font-size-h3: 20px;
+            --footer-color: #acb6c2;
+            --hover-background-color: #6c07ae;
+        }
+
         /* Apply the Gotham font to all elements */
         * {
             font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
@@ -58,15 +73,15 @@
         }
 
         body div h1 {
-            font-size: 1.8em;
+            font-size: var(--font-size-h1);
         }
 
         body div h2 {
-            font-size: 24px;
+            font-size: var(--font-size-h2);
         }
 
         body div h3 {
-            font-size: 20px;
+            font-size: var(--font-size-h3);
         }
 
         /* Apply the Montserrat font to all headings */
@@ -114,12 +129,12 @@
 
         .row a:hover {
             text-decoration: underline;
-            color: #0170B2;
+            color: var(--link-color);
         }
 
         .row a {
             text-decoration: none;
-            color: #0170B2;
+            color: var(--link-color);
             line-height: 1.2;
         }
 
@@ -148,7 +163,7 @@
         }
 
         .image.white-bg {
-            background-color: white;
+            background-color: var(--white-color);
         }
 
 
@@ -159,7 +174,7 @@
         .color-nav {
             margin-bottom: 0;
             border-radius: 0;
-            background-color: #57068c;
+            background-color: var(--background-color);
         }
 
         ul.list-group {
@@ -195,7 +210,7 @@
     </style>
     <style>
         .chat-tab {
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             padding: 10px 10px 8px;
             font-size: 14px;
             border-radius: 3px 3px 0 0;
@@ -229,7 +244,7 @@
             padding: 10px 10px 8px;
             width: 131.38px;
             height: 42px;
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             line-height: normal;
             white-space: nowrap;
             box-sizing: border-box;
@@ -245,8 +260,8 @@
         }
 
         .chat-button:hover {
-            background-color: #6c07ae;
-            color: #fff;
+            background-color: var(--hover-background-color);
+            color: var(--white-color);
         }
 
         .chat-frame-wrap {
@@ -346,16 +361,16 @@
         }
 
         ::selection {
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
         }
 
         .button {
             appearance: none;
             border: 0 none;
             box-shadow: none;
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
             font-weight: 400;
             font-size: 14px;
             font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
@@ -370,13 +385,13 @@
         .primary-footer {
             display: flex;
             background: #22272d;
-            color: #acb6c2;
+            color: var(--footer-color);
             padding-top: 75px;
             padding-bottom: 87px
         }
 
         .footer__social a:not(.ss-navigateright):not(.button) img {
-            background-color: white;
+            background-color: var(--white-color);
             border-radius: 10%;
         }
 
@@ -432,7 +447,7 @@
         }
 
         .primary-footer .button {
-            color: #fff;
+            color: var(--white-color);
             font-size: 14px;
             width: 100%;
             display: block;
@@ -443,30 +458,30 @@
             margin: 0 0 1em;
             line-height: 1.5;
             font-size: 12px;
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a,
         .primary-footer .block .s-la-widget a,
         .block .s-la-widget .primary-footer a {
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a:hover,
         .primary-footer .block .s-la-widget a:hover,
         .block .s-la-widget .primary-footer a:hover {
-            color: #fff;
+            color: var(--white-color);
             text-decoration: underline;
         }
 
         .primary-footer .list li,
         .primary-footer .block .s-la-widget .list-unstyled li,
         .block .s-la-widget .primary-footer .list-unstyled li {
-            border-bottom-color: #65686c;
+            border-bottom-color: var(--border-bottom-color);
         }
 
         .footer__menu:first-child .list li:last-child {
-            border-bottom: 1px dotted #65686c;
+            border-bottom: var(--dotted-border);
             margin-bottom: 10px;
             padding-bottom: 10px;
         }
@@ -482,8 +497,8 @@
         }
 
         .footer__give a:hover {
-            color: white;
-            background-color: #6c07ae;
+            color: var(--white-color);
+            background-color: var(--hover-background-color);
             text-decoration: underline;
         }
 
@@ -509,7 +524,7 @@
 
         .footer__copyright {
             font-size: 12px;
-            border-top: 1px dotted #65686c;
+            border-top: var(--dotted-border);
             padding-top: 13px;
             color: #b1b1b1;
             line-height: 1.4;
@@ -564,19 +579,19 @@
             }
 
             .primary-footer a {
-                color: #fff;
+                color: var(--white-color);
                 text-decoration: none;
             }
 
             .footer__social p a:after {
-                color: #fff;
+                color: var(--white-color);
                 margin-left: 5px;
                 font-size: 18px;
                 vertical-align: middle;
             }
 
             .list:last-child li:last-child {
-                border-bottom: 1px dotted #65686c;
+                border-bottom: var(--dotted-border);
                 margin: 0 0 10px 0;
                 padding: 0 0 10px 0;
             }
@@ -13194,8 +13209,8 @@
     <style>
         /* StableLink.css */
         .stable-link-button {
-            background-color: #57068c;
-            color: #fff;
+            background-color: var(--background-color);
+            color: var(--white-color);
             cursor: pointer;
             border: 1px solid #ccc;
             padding: 5px 10px;
@@ -13205,7 +13220,7 @@
 
         .stable-link-button:hover,
         .stable-link-button.hover {
-            background-color: #6c07ae;
+            background-color: var(--hover-background-color);
         }
 
         .stable-link-button:focus,
@@ -13222,7 +13237,7 @@
             padding: 5px 10px;
             margin-right: 5px;
             margin-bottom: 5px;
-            background-color: #e0d5e8;
+            background-color: var(--chat-stable-link-color);
             color: #1c2127;
         }
 
diff --git a/e2e/tests/golden/publish-the-picture-at-your-peril.html b/e2e/tests/golden/publish-the-picture-at-your-peril.html
index dd77a53d..5eb02958 100644
--- a/e2e/tests/golden/publish-the-picture-at-your-peril.html
+++ b/e2e/tests/golden/publish-the-picture-at-your-peril.html
@@ -44,6 +44,21 @@
         /* E2E TEST EDIT: sourceMappingURL comments elided */
     </style>
     <style>
+        /* Define the custom variables */
+        :root {
+            --background-color: #57068c;
+            --link-color: #0170B2;
+            --border-bottom-color: #65686c;
+            --dotted-border: 1px dotted var(--border-bottom-color);
+            --chat-stable-link-color: #e0d5e8;
+            --white-color: #fff;
+            --font-size-h1: 1.8em;
+            --font-size-h2: 24px;
+            --font-size-h3: 20px;
+            --footer-color: #acb6c2;
+            --hover-background-color: #6c07ae;
+        }
+
         /* Apply the Gotham font to all elements */
         * {
             font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
@@ -58,15 +73,15 @@
         }
 
         body div h1 {
-            font-size: 1.8em;
+            font-size: var(--font-size-h1);
         }
 
         body div h2 {
-            font-size: 24px;
+            font-size: var(--font-size-h2);
         }
 
         body div h3 {
-            font-size: 20px;
+            font-size: var(--font-size-h3);
         }
 
         /* Apply the Montserrat font to all headings */
@@ -114,12 +129,12 @@
 
         .row a:hover {
             text-decoration: underline;
-            color: #0170B2;
+            color: var(--link-color);
         }
 
         .row a {
             text-decoration: none;
-            color: #0170B2;
+            color: var(--link-color);
             line-height: 1.2;
         }
 
@@ -148,7 +163,7 @@
         }
 
         .image.white-bg {
-            background-color: white;
+            background-color: var(--white-color);
         }
 
 
@@ -159,7 +174,7 @@
         .color-nav {
             margin-bottom: 0;
             border-radius: 0;
-            background-color: #57068c;
+            background-color: var(--background-color);
         }
 
         ul.list-group {
@@ -195,7 +210,7 @@
     </style>
     <style>
         .chat-tab {
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             padding: 10px 10px 8px;
             font-size: 14px;
             border-radius: 3px 3px 0 0;
@@ -229,7 +244,7 @@
             padding: 10px 10px 8px;
             width: 131.38px;
             height: 42px;
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             line-height: normal;
             white-space: nowrap;
             box-sizing: border-box;
@@ -245,8 +260,8 @@
         }
 
         .chat-button:hover {
-            background-color: #6c07ae;
-            color: #fff;
+            background-color: var(--hover-background-color);
+            color: var(--white-color);
         }
 
         .chat-frame-wrap {
@@ -346,16 +361,16 @@
         }
 
         ::selection {
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
         }
 
         .button {
             appearance: none;
             border: 0 none;
             box-shadow: none;
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
             font-weight: 400;
             font-size: 14px;
             font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
@@ -370,13 +385,13 @@
         .primary-footer {
             display: flex;
             background: #22272d;
-            color: #acb6c2;
+            color: var(--footer-color);
             padding-top: 75px;
             padding-bottom: 87px
         }
 
         .footer__social a:not(.ss-navigateright):not(.button) img {
-            background-color: white;
+            background-color: var(--white-color);
             border-radius: 10%;
         }
 
@@ -432,7 +447,7 @@
         }
 
         .primary-footer .button {
-            color: #fff;
+            color: var(--white-color);
             font-size: 14px;
             width: 100%;
             display: block;
@@ -443,30 +458,30 @@
             margin: 0 0 1em;
             line-height: 1.5;
             font-size: 12px;
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a,
         .primary-footer .block .s-la-widget a,
         .block .s-la-widget .primary-footer a {
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a:hover,
         .primary-footer .block .s-la-widget a:hover,
         .block .s-la-widget .primary-footer a:hover {
-            color: #fff;
+            color: var(--white-color);
             text-decoration: underline;
         }
 
         .primary-footer .list li,
         .primary-footer .block .s-la-widget .list-unstyled li,
         .block .s-la-widget .primary-footer .list-unstyled li {
-            border-bottom-color: #65686c;
+            border-bottom-color: var(--border-bottom-color);
         }
 
         .footer__menu:first-child .list li:last-child {
-            border-bottom: 1px dotted #65686c;
+            border-bottom: var(--dotted-border);
             margin-bottom: 10px;
             padding-bottom: 10px;
         }
@@ -482,8 +497,8 @@
         }
 
         .footer__give a:hover {
-            color: white;
-            background-color: #6c07ae;
+            color: var(--white-color);
+            background-color: var(--hover-background-color);
             text-decoration: underline;
         }
 
@@ -509,7 +524,7 @@
 
         .footer__copyright {
             font-size: 12px;
-            border-top: 1px dotted #65686c;
+            border-top: var(--dotted-border);
             padding-top: 13px;
             color: #b1b1b1;
             line-height: 1.4;
@@ -564,19 +579,19 @@
             }
 
             .primary-footer a {
-                color: #fff;
+                color: var(--white-color);
                 text-decoration: none;
             }
 
             .footer__social p a:after {
-                color: #fff;
+                color: var(--white-color);
                 margin-left: 5px;
                 font-size: 18px;
                 vertical-align: middle;
             }
 
             .list:last-child li:last-child {
-                border-bottom: 1px dotted #65686c;
+                border-bottom: var(--dotted-border);
                 margin: 0 0 10px 0;
                 padding: 0 0 10px 0;
             }
@@ -13194,8 +13209,8 @@
     <style>
         /* StableLink.css */
         .stable-link-button {
-            background-color: #57068c;
-            color: #fff;
+            background-color: var(--background-color);
+            color: var(--white-color);
             cursor: pointer;
             border: 1px solid #ccc;
             padding: 5px 10px;
@@ -13205,7 +13220,7 @@
 
         .stable-link-button:hover,
         .stable-link-button.hover {
-            background-color: #6c07ae;
+            background-color: var(--hover-background-color);
         }
 
         .stable-link-button:focus,
@@ -13222,7 +13237,7 @@
             padding: 5px 10px;
             margin-right: 5px;
             margin-bottom: 5px;
-            background-color: #e0d5e8;
+            background-color: var(--chat-stable-link-color);
             color: #1c2127;
         }
 
diff --git a/e2e/tests/golden/publish-the-picture-at-your-peril_unescaped-ampersand.html b/e2e/tests/golden/publish-the-picture-at-your-peril_unescaped-ampersand.html
index 1a8fb54b..058e2528 100644
--- a/e2e/tests/golden/publish-the-picture-at-your-peril_unescaped-ampersand.html
+++ b/e2e/tests/golden/publish-the-picture-at-your-peril_unescaped-ampersand.html
@@ -44,6 +44,21 @@
         /* E2E TEST EDIT: sourceMappingURL comments elided */
     </style>
     <style>
+        /* Define the custom variables */
+        :root {
+            --background-color: #57068c;
+            --link-color: #0170B2;
+            --border-bottom-color: #65686c;
+            --dotted-border: 1px dotted var(--border-bottom-color);
+            --chat-stable-link-color: #e0d5e8;
+            --white-color: #fff;
+            --font-size-h1: 1.8em;
+            --font-size-h2: 24px;
+            --font-size-h3: 20px;
+            --footer-color: #acb6c2;
+            --hover-background-color: #6c07ae;
+        }
+
         /* Apply the Gotham font to all elements */
         * {
             font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
@@ -58,15 +73,15 @@
         }
 
         body div h1 {
-            font-size: 1.8em;
+            font-size: var(--font-size-h1);
         }
 
         body div h2 {
-            font-size: 24px;
+            font-size: var(--font-size-h2);
         }
 
         body div h3 {
-            font-size: 20px;
+            font-size: var(--font-size-h3);
         }
 
         /* Apply the Montserrat font to all headings */
@@ -114,12 +129,12 @@
 
         .row a:hover {
             text-decoration: underline;
-            color: #0170B2;
+            color: var(--link-color);
         }
 
         .row a {
             text-decoration: none;
-            color: #0170B2;
+            color: var(--link-color);
             line-height: 1.2;
         }
 
@@ -148,7 +163,7 @@
         }
 
         .image.white-bg {
-            background-color: white;
+            background-color: var(--white-color);
         }
 
 
@@ -159,7 +174,7 @@
         .color-nav {
             margin-bottom: 0;
             border-radius: 0;
-            background-color: #57068c;
+            background-color: var(--background-color);
         }
 
         ul.list-group {
@@ -195,7 +210,7 @@
     </style>
     <style>
         .chat-tab {
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             padding: 10px 10px 8px;
             font-size: 14px;
             border-radius: 3px 3px 0 0;
@@ -229,7 +244,7 @@
             padding: 10px 10px 8px;
             width: 131.38px;
             height: 42px;
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             line-height: normal;
             white-space: nowrap;
             box-sizing: border-box;
@@ -245,8 +260,8 @@
         }
 
         .chat-button:hover {
-            background-color: #6c07ae;
-            color: #fff;
+            background-color: var(--hover-background-color);
+            color: var(--white-color);
         }
 
         .chat-frame-wrap {
@@ -346,16 +361,16 @@
         }
 
         ::selection {
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
         }
 
         .button {
             appearance: none;
             border: 0 none;
             box-shadow: none;
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
             font-weight: 400;
             font-size: 14px;
             font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
@@ -370,13 +385,13 @@
         .primary-footer {
             display: flex;
             background: #22272d;
-            color: #acb6c2;
+            color: var(--footer-color);
             padding-top: 75px;
             padding-bottom: 87px
         }
 
         .footer__social a:not(.ss-navigateright):not(.button) img {
-            background-color: white;
+            background-color: var(--white-color);
             border-radius: 10%;
         }
 
@@ -432,7 +447,7 @@
         }
 
         .primary-footer .button {
-            color: #fff;
+            color: var(--white-color);
             font-size: 14px;
             width: 100%;
             display: block;
@@ -443,30 +458,30 @@
             margin: 0 0 1em;
             line-height: 1.5;
             font-size: 12px;
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a,
         .primary-footer .block .s-la-widget a,
         .block .s-la-widget .primary-footer a {
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a:hover,
         .primary-footer .block .s-la-widget a:hover,
         .block .s-la-widget .primary-footer a:hover {
-            color: #fff;
+            color: var(--white-color);
             text-decoration: underline;
         }
 
         .primary-footer .list li,
         .primary-footer .block .s-la-widget .list-unstyled li,
         .block .s-la-widget .primary-footer .list-unstyled li {
-            border-bottom-color: #65686c;
+            border-bottom-color: var(--border-bottom-color);
         }
 
         .footer__menu:first-child .list li:last-child {
-            border-bottom: 1px dotted #65686c;
+            border-bottom: var(--dotted-border);
             margin-bottom: 10px;
             padding-bottom: 10px;
         }
@@ -482,8 +497,8 @@
         }
 
         .footer__give a:hover {
-            color: white;
-            background-color: #6c07ae;
+            color: var(--white-color);
+            background-color: var(--hover-background-color);
             text-decoration: underline;
         }
 
@@ -509,7 +524,7 @@
 
         .footer__copyright {
             font-size: 12px;
-            border-top: 1px dotted #65686c;
+            border-top: var(--dotted-border);
             padding-top: 13px;
             color: #b1b1b1;
             line-height: 1.4;
@@ -564,19 +579,19 @@
             }
 
             .primary-footer a {
-                color: #fff;
+                color: var(--white-color);
                 text-decoration: none;
             }
 
             .footer__social p a:after {
-                color: #fff;
+                color: var(--white-color);
                 margin-left: 5px;
                 font-size: 18px;
                 vertical-align: middle;
             }
 
             .list:last-child li:last-child {
-                border-bottom: 1px dotted #65686c;
+                border-bottom: var(--dotted-border);
                 margin: 0 0 10px 0;
                 padding: 0 0 10px 0;
             }
@@ -13194,8 +13209,8 @@
     <style>
         /* StableLink.css */
         .stable-link-button {
-            background-color: #57068c;
-            color: #fff;
+            background-color: var(--background-color);
+            color: var(--white-color);
             cursor: pointer;
             border: 1px solid #ccc;
             padding: 5px 10px;
@@ -13205,7 +13220,7 @@
 
         .stable-link-button:hover,
         .stable-link-button.hover {
-            background-color: #6c07ae;
+            background-color: var(--hover-background-color);
         }
 
         .stable-link-button:focus,
@@ -13222,7 +13237,7 @@
             padding: 5px 10px;
             margin-right: 5px;
             margin-bottom: 5px;
-            background-color: #e0d5e8;
+            background-color: var(--chat-stable-link-color);
             color: #1c2127;
         }
 
diff --git a/e2e/tests/golden/the-new-yorker.html b/e2e/tests/golden/the-new-yorker.html
index 49ce308c..983ee851 100644
--- a/e2e/tests/golden/the-new-yorker.html
+++ b/e2e/tests/golden/the-new-yorker.html
@@ -44,6 +44,21 @@
         /* E2E TEST EDIT: sourceMappingURL comments elided */
     </style>
     <style>
+        /* Define the custom variables */
+        :root {
+            --background-color: #57068c;
+            --link-color: #0170B2;
+            --border-bottom-color: #65686c;
+            --dotted-border: 1px dotted var(--border-bottom-color);
+            --chat-stable-link-color: #e0d5e8;
+            --white-color: #fff;
+            --font-size-h1: 1.8em;
+            --font-size-h2: 24px;
+            --font-size-h3: 20px;
+            --footer-color: #acb6c2;
+            --hover-background-color: #6c07ae;
+        }
+
         /* Apply the Gotham font to all elements */
         * {
             font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
@@ -58,15 +73,15 @@
         }
 
         body div h1 {
-            font-size: 1.8em;
+            font-size: var(--font-size-h1);
         }
 
         body div h2 {
-            font-size: 24px;
+            font-size: var(--font-size-h2);
         }
 
         body div h3 {
-            font-size: 20px;
+            font-size: var(--font-size-h3);
         }
 
         /* Apply the Montserrat font to all headings */
@@ -114,12 +129,12 @@
 
         .row a:hover {
             text-decoration: underline;
-            color: #0170B2;
+            color: var(--link-color);
         }
 
         .row a {
             text-decoration: none;
-            color: #0170B2;
+            color: var(--link-color);
             line-height: 1.2;
         }
 
@@ -148,7 +163,7 @@
         }
 
         .image.white-bg {
-            background-color: white;
+            background-color: var(--white-color);
         }
 
 
@@ -159,7 +174,7 @@
         .color-nav {
             margin-bottom: 0;
             border-radius: 0;
-            background-color: #57068c;
+            background-color: var(--background-color);
         }
 
         ul.list-group {
@@ -195,7 +210,7 @@
     </style>
     <style>
         .chat-tab {
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             padding: 10px 10px 8px;
             font-size: 14px;
             border-radius: 3px 3px 0 0;
@@ -229,7 +244,7 @@
             padding: 10px 10px 8px;
             width: 131.38px;
             height: 42px;
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             line-height: normal;
             white-space: nowrap;
             box-sizing: border-box;
@@ -245,8 +260,8 @@
         }
 
         .chat-button:hover {
-            background-color: #6c07ae;
-            color: #fff;
+            background-color: var(--hover-background-color);
+            color: var(--white-color);
         }
 
         .chat-frame-wrap {
@@ -346,16 +361,16 @@
         }
 
         ::selection {
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
         }
 
         .button {
             appearance: none;
             border: 0 none;
             box-shadow: none;
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
             font-weight: 400;
             font-size: 14px;
             font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
@@ -370,13 +385,13 @@
         .primary-footer {
             display: flex;
             background: #22272d;
-            color: #acb6c2;
+            color: var(--footer-color);
             padding-top: 75px;
             padding-bottom: 87px
         }
 
         .footer__social a:not(.ss-navigateright):not(.button) img {
-            background-color: white;
+            background-color: var(--white-color);
             border-radius: 10%;
         }
 
@@ -432,7 +447,7 @@
         }
 
         .primary-footer .button {
-            color: #fff;
+            color: var(--white-color);
             font-size: 14px;
             width: 100%;
             display: block;
@@ -443,30 +458,30 @@
             margin: 0 0 1em;
             line-height: 1.5;
             font-size: 12px;
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a,
         .primary-footer .block .s-la-widget a,
         .block .s-la-widget .primary-footer a {
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a:hover,
         .primary-footer .block .s-la-widget a:hover,
         .block .s-la-widget .primary-footer a:hover {
-            color: #fff;
+            color: var(--white-color);
             text-decoration: underline;
         }
 
         .primary-footer .list li,
         .primary-footer .block .s-la-widget .list-unstyled li,
         .block .s-la-widget .primary-footer .list-unstyled li {
-            border-bottom-color: #65686c;
+            border-bottom-color: var(--border-bottom-color);
         }
 
         .footer__menu:first-child .list li:last-child {
-            border-bottom: 1px dotted #65686c;
+            border-bottom: var(--dotted-border);
             margin-bottom: 10px;
             padding-bottom: 10px;
         }
@@ -482,8 +497,8 @@
         }
 
         .footer__give a:hover {
-            color: white;
-            background-color: #6c07ae;
+            color: var(--white-color);
+            background-color: var(--hover-background-color);
             text-decoration: underline;
         }
 
@@ -509,7 +524,7 @@
 
         .footer__copyright {
             font-size: 12px;
-            border-top: 1px dotted #65686c;
+            border-top: var(--dotted-border);
             padding-top: 13px;
             color: #b1b1b1;
             line-height: 1.4;
@@ -564,19 +579,19 @@
             }
 
             .primary-footer a {
-                color: #fff;
+                color: var(--white-color);
                 text-decoration: none;
             }
 
             .footer__social p a:after {
-                color: #fff;
+                color: var(--white-color);
                 margin-left: 5px;
                 font-size: 18px;
                 vertical-align: middle;
             }
 
             .list:last-child li:last-child {
-                border-bottom: 1px dotted #65686c;
+                border-bottom: var(--dotted-border);
                 margin: 0 0 10px 0;
                 padding: 0 0 10px 0;
             }
@@ -13194,8 +13209,8 @@
     <style>
         /* StableLink.css */
         .stable-link-button {
-            background-color: #57068c;
-            color: #fff;
+            background-color: var(--background-color);
+            color: var(--white-color);
             cursor: pointer;
             border: 1px solid #ccc;
             padding: 5px 10px;
@@ -13205,7 +13220,7 @@
 
         .stable-link-button:hover,
         .stable-link-button.hover {
-            background-color: #6c07ae;
+            background-color: var(--hover-background-color);
         }
 
         .stable-link-button:focus,
@@ -13222,7 +13237,7 @@
             padding: 5px 10px;
             margin-right: 5px;
             margin-bottom: 5px;
-            background-color: #e0d5e8;
+            background-color: var(--chat-stable-link-color);
             color: #1c2127;
         }
 
diff --git a/e2e/tests/golden/the-sino-tibetan-languages.html b/e2e/tests/golden/the-sino-tibetan-languages.html
index 1e2f8531..fa689836 100644
--- a/e2e/tests/golden/the-sino-tibetan-languages.html
+++ b/e2e/tests/golden/the-sino-tibetan-languages.html
@@ -44,6 +44,21 @@
         /* E2E TEST EDIT: sourceMappingURL comments elided */
     </style>
     <style>
+        /* Define the custom variables */
+        :root {
+            --background-color: #57068c;
+            --link-color: #0170B2;
+            --border-bottom-color: #65686c;
+            --dotted-border: 1px dotted var(--border-bottom-color);
+            --chat-stable-link-color: #e0d5e8;
+            --white-color: #fff;
+            --font-size-h1: 1.8em;
+            --font-size-h2: 24px;
+            --font-size-h3: 20px;
+            --footer-color: #acb6c2;
+            --hover-background-color: #6c07ae;
+        }
+
         /* Apply the Gotham font to all elements */
         * {
             font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
@@ -58,15 +73,15 @@
         }
 
         body div h1 {
-            font-size: 1.8em;
+            font-size: var(--font-size-h1);
         }
 
         body div h2 {
-            font-size: 24px;
+            font-size: var(--font-size-h2);
         }
 
         body div h3 {
-            font-size: 20px;
+            font-size: var(--font-size-h3);
         }
 
         /* Apply the Montserrat font to all headings */
@@ -114,12 +129,12 @@
 
         .row a:hover {
             text-decoration: underline;
-            color: #0170B2;
+            color: var(--link-color);
         }
 
         .row a {
             text-decoration: none;
-            color: #0170B2;
+            color: var(--link-color);
             line-height: 1.2;
         }
 
@@ -148,7 +163,7 @@
         }
 
         .image.white-bg {
-            background-color: white;
+            background-color: var(--white-color);
         }
 
 
@@ -159,7 +174,7 @@
         .color-nav {
             margin-bottom: 0;
             border-radius: 0;
-            background-color: #57068c;
+            background-color: var(--background-color);
         }
 
         ul.list-group {
@@ -195,7 +210,7 @@
     </style>
     <style>
         .chat-tab {
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             padding: 10px 10px 8px;
             font-size: 14px;
             border-radius: 3px 3px 0 0;
@@ -229,7 +244,7 @@
             padding: 10px 10px 8px;
             width: 131.38px;
             height: 42px;
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             line-height: normal;
             white-space: nowrap;
             box-sizing: border-box;
@@ -245,8 +260,8 @@
         }
 
         .chat-button:hover {
-            background-color: #6c07ae;
-            color: #fff;
+            background-color: var(--hover-background-color);
+            color: var(--white-color);
         }
 
         .chat-frame-wrap {
@@ -346,16 +361,16 @@
         }
 
         ::selection {
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
         }
 
         .button {
             appearance: none;
             border: 0 none;
             box-shadow: none;
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
             font-weight: 400;
             font-size: 14px;
             font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
@@ -370,13 +385,13 @@
         .primary-footer {
             display: flex;
             background: #22272d;
-            color: #acb6c2;
+            color: var(--footer-color);
             padding-top: 75px;
             padding-bottom: 87px
         }
 
         .footer__social a:not(.ss-navigateright):not(.button) img {
-            background-color: white;
+            background-color: var(--white-color);
             border-radius: 10%;
         }
 
@@ -432,7 +447,7 @@
         }
 
         .primary-footer .button {
-            color: #fff;
+            color: var(--white-color);
             font-size: 14px;
             width: 100%;
             display: block;
@@ -443,30 +458,30 @@
             margin: 0 0 1em;
             line-height: 1.5;
             font-size: 12px;
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a,
         .primary-footer .block .s-la-widget a,
         .block .s-la-widget .primary-footer a {
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a:hover,
         .primary-footer .block .s-la-widget a:hover,
         .block .s-la-widget .primary-footer a:hover {
-            color: #fff;
+            color: var(--white-color);
             text-decoration: underline;
         }
 
         .primary-footer .list li,
         .primary-footer .block .s-la-widget .list-unstyled li,
         .block .s-la-widget .primary-footer .list-unstyled li {
-            border-bottom-color: #65686c;
+            border-bottom-color: var(--border-bottom-color);
         }
 
         .footer__menu:first-child .list li:last-child {
-            border-bottom: 1px dotted #65686c;
+            border-bottom: var(--dotted-border);
             margin-bottom: 10px;
             padding-bottom: 10px;
         }
@@ -482,8 +497,8 @@
         }
 
         .footer__give a:hover {
-            color: white;
-            background-color: #6c07ae;
+            color: var(--white-color);
+            background-color: var(--hover-background-color);
             text-decoration: underline;
         }
 
@@ -509,7 +524,7 @@
 
         .footer__copyright {
             font-size: 12px;
-            border-top: 1px dotted #65686c;
+            border-top: var(--dotted-border);
             padding-top: 13px;
             color: #b1b1b1;
             line-height: 1.4;
@@ -564,19 +579,19 @@
             }
 
             .primary-footer a {
-                color: #fff;
+                color: var(--white-color);
                 text-decoration: none;
             }
 
             .footer__social p a:after {
-                color: #fff;
+                color: var(--white-color);
                 margin-left: 5px;
                 font-size: 18px;
                 vertical-align: middle;
             }
 
             .list:last-child li:last-child {
-                border-bottom: 1px dotted #65686c;
+                border-bottom: var(--dotted-border);
                 margin: 0 0 10px 0;
                 padding: 0 0 10px 0;
             }
@@ -13194,8 +13209,8 @@
     <style>
         /* StableLink.css */
         .stable-link-button {
-            background-color: #57068c;
-            color: #fff;
+            background-color: var(--background-color);
+            color: var(--white-color);
             cursor: pointer;
             border: 1px solid #ccc;
             padding: 5px 10px;
@@ -13205,7 +13220,7 @@
 
         .stable-link-button:hover,
         .stable-link-button.hover {
-            background-color: #6c07ae;
+            background-color: var(--hover-background-color);
         }
 
         .stable-link-button:focus,
@@ -13222,7 +13237,7 @@
             padding: 5px 10px;
             margin-right: 5px;
             margin-bottom: 5px;
-            background-color: #e0d5e8;
+            background-color: var(--chat-stable-link-color);
             color: #1c2127;
         }
 
diff --git a/e2e/tests/golden/the-years-work-in-modern-language-studies.html b/e2e/tests/golden/the-years-work-in-modern-language-studies.html
index 410a045c..926f3f8e 100644
--- a/e2e/tests/golden/the-years-work-in-modern-language-studies.html
+++ b/e2e/tests/golden/the-years-work-in-modern-language-studies.html
@@ -44,6 +44,21 @@
         /* E2E TEST EDIT: sourceMappingURL comments elided */
     </style>
     <style>
+        /* Define the custom variables */
+        :root {
+            --background-color: #57068c;
+            --link-color: #0170B2;
+            --border-bottom-color: #65686c;
+            --dotted-border: 1px dotted var(--border-bottom-color);
+            --chat-stable-link-color: #e0d5e8;
+            --white-color: #fff;
+            --font-size-h1: 1.8em;
+            --font-size-h2: 24px;
+            --font-size-h3: 20px;
+            --footer-color: #acb6c2;
+            --hover-background-color: #6c07ae;
+        }
+
         /* Apply the Gotham font to all elements */
         * {
             font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
@@ -58,15 +73,15 @@
         }
 
         body div h1 {
-            font-size: 1.8em;
+            font-size: var(--font-size-h1);
         }
 
         body div h2 {
-            font-size: 24px;
+            font-size: var(--font-size-h2);
         }
 
         body div h3 {
-            font-size: 20px;
+            font-size: var(--font-size-h3);
         }
 
         /* Apply the Montserrat font to all headings */
@@ -114,12 +129,12 @@
 
         .row a:hover {
             text-decoration: underline;
-            color: #0170B2;
+            color: var(--link-color);
         }
 
         .row a {
             text-decoration: none;
-            color: #0170B2;
+            color: var(--link-color);
             line-height: 1.2;
         }
 
@@ -148,7 +163,7 @@
         }
 
         .image.white-bg {
-            background-color: white;
+            background-color: var(--white-color);
         }
 
 
@@ -159,7 +174,7 @@
         .color-nav {
             margin-bottom: 0;
             border-radius: 0;
-            background-color: #57068c;
+            background-color: var(--background-color);
         }
 
         ul.list-group {
@@ -195,7 +210,7 @@
     </style>
     <style>
         .chat-tab {
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             padding: 10px 10px 8px;
             font-size: 14px;
             border-radius: 3px 3px 0 0;
@@ -229,7 +244,7 @@
             padding: 10px 10px 8px;
             width: 131.38px;
             height: 42px;
-            color: #e0d5e8;
+            color: var(--chat-stable-link-color);
             line-height: normal;
             white-space: nowrap;
             box-sizing: border-box;
@@ -245,8 +260,8 @@
         }
 
         .chat-button:hover {
-            background-color: #6c07ae;
-            color: #fff;
+            background-color: var(--hover-background-color);
+            color: var(--white-color);
         }
 
         .chat-frame-wrap {
@@ -346,16 +361,16 @@
         }
 
         ::selection {
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
         }
 
         .button {
             appearance: none;
             border: 0 none;
             box-shadow: none;
-            background: #57068c;
-            color: #fff;
+            background: var(--background-color);
+            color: var(--white-color);
             font-weight: 400;
             font-size: 14px;
             font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
@@ -370,13 +385,13 @@
         .primary-footer {
             display: flex;
             background: #22272d;
-            color: #acb6c2;
+            color: var(--footer-color);
             padding-top: 75px;
             padding-bottom: 87px
         }
 
         .footer__social a:not(.ss-navigateright):not(.button) img {
-            background-color: white;
+            background-color: var(--white-color);
             border-radius: 10%;
         }
 
@@ -432,7 +447,7 @@
         }
 
         .primary-footer .button {
-            color: #fff;
+            color: var(--white-color);
             font-size: 14px;
             width: 100%;
             display: block;
@@ -443,30 +458,30 @@
             margin: 0 0 1em;
             line-height: 1.5;
             font-size: 12px;
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a,
         .primary-footer .block .s-la-widget a,
         .block .s-la-widget .primary-footer a {
-            color: #acb6c2;
+            color: var(--footer-color);
         }
 
         .primary-footer a:hover,
         .primary-footer .block .s-la-widget a:hover,
         .block .s-la-widget .primary-footer a:hover {
-            color: #fff;
+            color: var(--white-color);
             text-decoration: underline;
         }
 
         .primary-footer .list li,
         .primary-footer .block .s-la-widget .list-unstyled li,
         .block .s-la-widget .primary-footer .list-unstyled li {
-            border-bottom-color: #65686c;
+            border-bottom-color: var(--border-bottom-color);
         }
 
         .footer__menu:first-child .list li:last-child {
-            border-bottom: 1px dotted #65686c;
+            border-bottom: var(--dotted-border);
             margin-bottom: 10px;
             padding-bottom: 10px;
         }
@@ -482,8 +497,8 @@
         }
 
         .footer__give a:hover {
-            color: white;
-            background-color: #6c07ae;
+            color: var(--white-color);
+            background-color: var(--hover-background-color);
             text-decoration: underline;
         }
 
@@ -509,7 +524,7 @@
 
         .footer__copyright {
             font-size: 12px;
-            border-top: 1px dotted #65686c;
+            border-top: var(--dotted-border);
             padding-top: 13px;
             color: #b1b1b1;
             line-height: 1.4;
@@ -564,19 +579,19 @@
             }
 
             .primary-footer a {
-                color: #fff;
+                color: var(--white-color);
                 text-decoration: none;
             }
 
             .footer__social p a:after {
-                color: #fff;
+                color: var(--white-color);
                 margin-left: 5px;
                 font-size: 18px;
                 vertical-align: middle;
             }
 
             .list:last-child li:last-child {
-                border-bottom: 1px dotted #65686c;
+                border-bottom: var(--dotted-border);
                 margin: 0 0 10px 0;
                 padding: 0 0 10px 0;
             }
@@ -13194,8 +13209,8 @@
     <style>
         /* StableLink.css */
         .stable-link-button {
-            background-color: #57068c;
-            color: #fff;
+            background-color: var(--background-color);
+            color: var(--white-color);
             cursor: pointer;
             border: 1px solid #ccc;
             padding: 5px 10px;
@@ -13205,7 +13220,7 @@
 
         .stable-link-button:hover,
         .stable-link-button.hover {
-            background-color: #6c07ae;
+            background-color: var(--hover-background-color);
         }
 
         .stable-link-button:focus,
@@ -13222,7 +13237,7 @@
             padding: 5px 10px;
             margin-right: 5px;
             margin-bottom: 5px;
-            background-color: #e0d5e8;
+            background-color: var(--chat-stable-link-color);
             color: #1c2127;
         }
 
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 4e229433..2519c929 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,3 +1,18 @@
+/* Define the custom variables */
+:root {
+  --background-color: #57068c;
+  --link-color: #0170B2;
+  --border-bottom-color: #65686c;
+  --dotted-border: 1px dotted var(--border-bottom-color);
+  --chat-stable-link-color: #e0d5e8;
+  --white-color: #fff;
+  --font-size-h1: 1.8em;
+  --font-size-h2: 24px;
+  --font-size-h3: 20px;
+  --footer-color: #acb6c2;
+  --hover-background-color: #6c07ae;
+}
+
 /* Apply the Gotham font to all elements */
 * {
   font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
@@ -12,15 +27,15 @@ body div h3 {
 }
 
 body div h1 {
-  font-size: 1.8em;
+  font-size: var(--font-size-h1);
 }
 
 body div h2 {
-  font-size: 24px;
+  font-size: var(--font-size-h2);
 }
 
 body div h3 {
-  font-size: 20px;
+  font-size: var(--font-size-h3);
 }
 
 /* Apply the Montserrat font to all headings */
@@ -68,12 +83,12 @@ h6 {
 
 .row a:hover {
   text-decoration: underline;
-  color: #0170B2;
+  color: var(--link-color);
 }
 
 .row a {
   text-decoration: none;
-  color: #0170B2;
+  color: var(--link-color);
   line-height: 1.2;
 }
 
@@ -102,7 +117,7 @@ h6 {
 }
 
 .image.white-bg {
-  background-color: white;
+  background-color: var(--white-color);
 }
 
 
@@ -113,7 +128,7 @@ h6 {
 .color-nav {
   margin-bottom: 0;
   border-radius: 0;
-  background-color: #57068c;
+  background-color: var(--background-color);
 }
 
 ul.list-group {
@@ -143,4 +158,4 @@ h2.title {
 
 main {
   margin-bottom: 26px;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/ChatWidget/ChatWidget.css b/frontend/src/components/ChatWidget/ChatWidget.css
index 410b7a86..f0e0a5f2 100644
--- a/frontend/src/components/ChatWidget/ChatWidget.css
+++ b/frontend/src/components/ChatWidget/ChatWidget.css
@@ -1,5 +1,5 @@
 .chat-tab {
-    color: #e0d5e8;
+    color: var(--chat-stable-link-color);
     padding: 10px 10px 8px;
     font-size: 14px;
     border-radius: 3px 3px 0 0;
@@ -33,7 +33,7 @@
     padding: 10px 10px 8px;
     width: 131.38px;
     height: 42px;
-    color: #e0d5e8;
+    color: var(--chat-stable-link-color);
     line-height: normal;
     white-space: nowrap;
     box-sizing: border-box;
@@ -49,8 +49,8 @@
 }
 
 .chat-button:hover {
-    background-color: #6c07ae;
-    color: #fff;
+    background-color: var(--hover-background-color);
+    color: var(--white-color);
 }
 
 .chat-frame-wrap {
diff --git a/frontend/src/components/Footer/Footer.css b/frontend/src/components/Footer/Footer.css
index fe5e32e2..87868d0b 100644
--- a/frontend/src/components/Footer/Footer.css
+++ b/frontend/src/components/Footer/Footer.css
@@ -54,8 +54,8 @@ li {
 }
 
 ::selection {
-    background: #57068c;
-    color: #fff;
+    background: var(--background-color);
+    color: var(--white-color);
 }
 
 .button {
@@ -64,8 +64,8 @@ li {
     appearance: none;
     border: 0 none;
     box-shadow: none;
-    background: #57068c;
-    color: #fff;
+    background: var(--background-color);
+    color: var(--white-color);
     font-weight: 400;
     font-size: 14px;
     font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
@@ -80,13 +80,13 @@ li {
 .primary-footer {
     display: flex;
     background: #22272d;
-    color: #acb6c2;
+    color: var(--footer-color);
     padding-top: 75px;
     padding-bottom: 87px
 }
 
 .footer__social a:not(.ss-navigateright):not(.button) img {
-    background-color: white;
+    background-color: var(--white-color);
     border-radius: 10%;
 }
 
@@ -142,7 +142,7 @@ li {
 }
 
 .primary-footer .button {
-    color: #fff;
+    color: var(--white-color);
     font-size: 14px;
     width: 100%;
     display: block;
@@ -153,30 +153,30 @@ li {
     margin: 0 0 1em;
     line-height: 1.5;
     font-size: 12px;
-    color: #acb6c2;
+    color: var(--footer-color);
 }
 
 .primary-footer a,
 .primary-footer .block .s-la-widget a,
 .block .s-la-widget .primary-footer a {
-    color: #acb6c2;
+    color: var(--footer-color);
 }
 
 .primary-footer a:hover,
 .primary-footer .block .s-la-widget a:hover,
 .block .s-la-widget .primary-footer a:hover {
-    color: #fff;
+    color: var(--white-color);
     text-decoration: underline;
 }
 
 .primary-footer .list li,
 .primary-footer .block .s-la-widget .list-unstyled li,
 .block .s-la-widget .primary-footer .list-unstyled li {
-    border-bottom-color: #65686c;
+    border-bottom-color: var(--border-bottom-color);
 }
 
 .footer__menu:first-child .list li:last-child {
-    border-bottom: 1px dotted #65686c;
+    border-bottom: var(--dotted-border);
     margin-bottom: 10px;
     padding-bottom: 10px;
 }
@@ -192,8 +192,8 @@ li {
 }
 
 .footer__give a:hover {
-    color: white;
-    background-color: #6c07ae;
+    color: var(--white-color);
+    background-color: var(--hover-background-color);
     text-decoration: underline;
 }
 
@@ -219,7 +219,7 @@ li {
 
 .footer__copyright {
     font-size: 12px;
-    border-top: 1px dotted #65686c;
+    border-top: var(--dotted-border);
     padding-top: 13px;
     color: #b1b1b1;
     line-height: 1.4;
@@ -274,19 +274,19 @@ li {
     }
 
     .primary-footer a {
-        color: #fff;
+        color: var(--white-color);
         text-decoration: none;
     }
 
     .footer__social p a:after {
-        color: #fff;
+        color: var(--white-color);
         margin-left: 5px;
         font-size: 18px;
         vertical-align: middle;
     }
 
     .list:last-child li:last-child {
-        border-bottom: 1px dotted #65686c;
+        border-bottom: var(--dotted-border);
         margin: 0 0 10px 0;
         padding: 0 0 10px 0;
     }
diff --git a/frontend/src/components/StableLink/StableLink.css b/frontend/src/components/StableLink/StableLink.css
index 6afe260c..8e5c1d0d 100644
--- a/frontend/src/components/StableLink/StableLink.css
+++ b/frontend/src/components/StableLink/StableLink.css
@@ -1,7 +1,7 @@
 /* StableLink.css */
 .stable-link-button {
-    background-color: #57068c;
-    color: #fff;
+    background-color: var(--background-color);
+    color: var(--white-color);
     cursor: pointer;
     border: 1px solid #ccc;
     padding: 5px 10px;
@@ -11,7 +11,7 @@
 
 .stable-link-button:hover,
 .stable-link-button.hover {
-    background-color: #6c07ae;
+    background-color: var(--hover-background-color);
 }
 
 .stable-link-button:focus,
@@ -28,7 +28,7 @@
     padding: 5px 10px;
     margin-right: 5px;
     margin-bottom: 5px;
-    background-color: #e0d5e8;
+    background-color: var(--chat-stable-link-color);
     color: #1c2127;
 }