diff --git a/src/media/css/colors/dark/colors_standard.css b/src/media/css/colors/dark/colors_standard.css
index 1df46a1..f10ce5b 100644
--- a/src/media/css/colors/dark/colors_standard.css
+++ b/src/media/css/colors/dark/colors_standard.css
@@ -203,6 +203,34 @@ color-scheme: dark;
 --list-group-item-dark-bg: #0e1318;
 --list-group-item-dark-active-bg: #161b22;
 
+/* ===== LINK UTILITY COLORS ===== */
+--link-primary-color: hsl(240, 98%, 50%);
+--link-primary-hover-color: hsl(240, 98%, 45%);
+--link-secondary-color: hsl(210, 15%, 70%);
+--link-secondary-hover-color: hsl(210, 15%, 65%);
+--link-success-color: hsl(120, 40%, 60%);
+--link-success-hover-color: hsl(120, 40%, 55%);
+--link-info-color: hsl(207, 60%, 65%);
+--link-info-hover-color: hsl(207, 60%, 60%);
+--link-warning-color: hsl(38, 100%, 65%);
+--link-warning-hover-color: hsl(38, 100%, 60%);
+--link-danger-color: hsl(3, 85%, 65%);
+--link-danger-hover-color: hsl(3, 85%, 60%);
+--link-light-color: hsl(210, 20%, 90%);
+--link-light-hover-color: hsl(210, 20%, 85%);
+--link-dark-color: hsl(210, 10%, 35%);
+--link-dark-hover-color: hsl(210, 10%, 30%);
+
+/* ===== COMPONENT-SPECIFIC COLORS ===== */
+--mod-finder-link-hover: #5a6470;
+--form-legend-color: #9fa6ad;
+--border-gray: #3a4250;
+--subhead-color: #9fa6ad;
+--box-shadow-gray: #1a2027;
+--btn-active-text-gray: #7a8490;
+--indicator-success-bg: var(--success);
+--item-list-color: #2a2f34;
+
 /* ===== STANDARD COLORS ===== */
 --blue: #91a4ff;
 --indigo: #b19cff;
diff --git a/src/media/css/colors/light/colors_standard.css b/src/media/css/colors/light/colors_standard.css
index 83b06f0..7f9b0d9 100644
--- a/src/media/css/colors/light/colors_standard.css
+++ b/src/media/css/colors/light/colors_standard.css
@@ -202,6 +202,34 @@ color-scheme: light;
 --list-group-item-dark-bg: #d7d8d9;
 --list-group-item-dark-active-bg: #c2c2c3;
 
+/* ===== LINK UTILITY COLORS ===== */
+--link-primary-color: hsl(240, 98%, 17%);
+--link-primary-hover-color: #010145;
+--link-secondary-color: hsl(210, 7%, 46%);
+--link-secondary-hover-color: #575e65;
+--link-success-color: hsl(120, 32%, 39%);
+--link-success-hover-color: #366936;
+--link-info-color: hsl(207, 49%, 37%);
+--link-info-hover-color: #264f71;
+--link-warning-color: hsl(34, 100%, 34%);
+--link-warning-hover-color: #8a4e00;
+--link-danger-color: hsl(3, 75%, 37%);
+--link-danger-hover-color: #841913;
+--link-light-color: hsl(210, 17%, 98%);
+--link-light-hover-color: #fafbfc;
+--link-dark-color: hsl(210, 10%, 23%);
+--link-dark-hover-color: #2a2f34;
+
+/* ===== COMPONENT-SPECIFIC COLORS ===== */
+--mod-finder-link-hover: #e6e6e6;
+--form-legend-color: #495057;
+--border-gray: #b2bfcd;
+--subhead-color: #495057;
+--box-shadow-gray: #ddd;
+--btn-active-text-gray: #A0A0A0;
+--indicator-success-bg: var(--success);
+--item-list-color: #F5F5F5;
+
 /* ===== STANDARD COLORS ===== */
 --blue: #010156;
 --indigo: #6812f3;
diff --git a/src/media/css/template.css b/src/media/css/template.css
index b83acb2..e84b01f 100644
--- a/src/media/css/template.css
+++ b/src/media/css/template.css
@@ -8290,75 +8290,75 @@ fieldset:disabled .btn {
 }
 
 .link-primary {
-	color: hsl(240, 98%, 17%) ;
+	color: var(--link-primary-color);
 }
 
 .link-primary:active,
 .link-primary:focus {
-	color: #010145 ;
+	color: var(--link-primary-hover-color);
 }
 
 .link-secondary {
-	color: hsl(210, 7%, 46%) ;
+	color: var(--link-secondary-color);
 }
 
 .link-secondary:active,
 .link-secondary:focus {
-	color: #575e65 ;
+	color: var(--link-secondary-hover-color);
 }
 
 .link-success {
-	color: hsl(120, 32%, 39%) ;
+	color: var(--link-success-color);
 }
 
 .link-success:active,
 .link-success:focus {
-	color: #366936 ;
+	color: var(--link-success-hover-color);
 }
 
 .link-info {
-	color: hsl(207, 49%, 37%) ;
+	color: var(--link-info-color);
 }
 
 .link-info:active,
 .link-info:focus {
-	color: #264f71 ;
+	color: var(--link-info-hover-color);
 }
 
 .link-warning {
-	color: hsl(34, 100%, 34%) ;
+	color: var(--link-warning-color);
 }
 
 .link-warning:active,
 .link-warning:focus {
-	color: #8a4e00 ;
+	color: var(--link-warning-hover-color);
 }
 
 .link-danger {
-	color: hsl(3, 75%, 37%) ;
+	color: var(--link-danger-color);
 }
 
 .link-danger:active,
 .link-danger:focus {
-	color: #841913 ;
+	color: var(--link-danger-hover-color);
 }
 
 .link-light {
-	color: hsl(210, 17%, 98%) ;
+	color: var(--link-light-color);
 }
 
 .link-light:active,
 .link-light:focus {
-	color: #fafbfc ;
+	color: var(--link-light-hover-color);
 }
 
 .link-dark {
-	color: hsl(210, 10%, 23%) ;
+	color: var(--link-dark-color);
 }
 
 .link-dark:active,
 .link-dark:focus {
-	color: #2a2f34 ;
+	color: var(--link-dark-hover-color);
 }
 
 .ratio {
@@ -14598,7 +14598,7 @@ li.current a {
 
 .container-header .mod-finder a:active,
 .container-header .mod-finder a:focus {
-	color: #e6e6e6;
+	color: var(--mod-finder-link-hover);
 }
 
 .container-header .mod-finder .awesomplete {
@@ -14912,9 +14912,9 @@ iframe {
 	width: 100%;
 	padding: 1vw 2vw;
 	margin-bottom: 1rem;
-	color: #495057;
+	color: var(--form-legend-color);
 	background-color: var(--body-color);
-	border: 1px solid #b2bfcd;
+	border: 1px solid var(--border-gray);
 }
 
 .options-form>legend {
@@ -14922,7 +14922,7 @@ iframe {
 	width: auto;
 	padding: 0 0.5rem;
 	font-weight: 700;
-	color: #495057;
+	color: var(--form-legend-color);
 	background-color: var(--body-color);
 }
 
@@ -15375,10 +15375,10 @@ joomla-alert {
 	width: auto;
 	min-height: 43px;
 	padding: 0.25rem;
-	color: #495057;
+	color: var(--subhead-color);
 	background: var(--body-color);
-	-webkit-box-shadow: -3px -2px 22px #ddd;
-	box-shadow: -3px -2px 22px #ddd;
+	-webkit-box-shadow: -3px -2px 22px var(--box-shadow-gray);
+	box-shadow: -3px -2px 22px var(--box-shadow-gray);
 }
 
 .subhead .row {
@@ -15412,12 +15412,12 @@ joomla-alert {
 }
 
 .subhead .btn {
-	--subhead-btn-accent: #495057;
+	--subhead-btn-accent: var(--subhead-color);
 	padding: 0 1rem;
 	margin: 0.3125rem 0;
 	font-size: 1rem;
 	line-height: 2.45rem;
-	color: #495057;
+	color: var(--subhead-color);
 	background: var(--body-color);
 	border-color: hsl(210, 11%, 71%);
 }
@@ -16770,7 +16770,7 @@ body:not(.has-sidebar-right) .site-grid .container-component {
 .btn.show,
 .btn:first-child:active,
 :not(.btn-check)+.btn:active {
-	color: #A0A0A0;
+	color: var(--btn-active-text-gray);
 }
 
 .form-control,
@@ -17225,7 +17225,7 @@ code {
 	left: -2px;
 	width: 12px;
 	height: 12px;
-	background-color: #448344;
+	background-color: var(--indicator-success-bg);
 	border-radius: 6px;
 }
 
@@ -17235,7 +17235,7 @@ code {
 	left: 0px;
 	width: 12px;
 	height: 12px;
-	background-color: #448344;
+	background-color: var(--indicator-success-bg);
 	border-radius: 6px;
 }
 
@@ -17421,7 +17421,7 @@ code {
 
 .item-list {
 	display: inline-block;
-	color: #F5F5F5;
+	color: var(--item-list-color);
 	margin-top: 0.3125rem;
 	width: 50px;
 	height: 50px;
@@ -17451,7 +17451,7 @@ code {
 	right: -2px;
 	width: 18px;
 	height: 18px;
-	color: #FFF;
+	color: var(--white);
 	font-size: 11px;
 	font-weight: bold;
 	text-align: center;
@@ -17465,7 +17465,7 @@ code {
 	right: -2px;
 	width: 18px;
 	height: 18px;
-	color: #FFF;
+	color: var(--white);
 	font-size: 11px;
 	font-weight: bold;
 	text-align: center;
@@ -17489,7 +17489,7 @@ code {
 .window-title {
 	margin-left: 0.3125rem;
 	display: inline-block;
-	color: #FFF;
+	color: var(--white);
 }
 
 .window-title-com {
@@ -17500,7 +17500,7 @@ code {
 
 .window-icon {
 	display: inline-block;
-	color: #FFF;
+	color: var(--white);
 }
 
 .window-header {