scss colors should be css variables

src/scss/elements/terminal.scss

@@ -1,12 +1,9 @@
-@mixin color-matrix {
-	.red   { color: rgb(200, 0, 0); }
-	.green { color: rgb(0, 200, 0); }
-	.blue  { color: rgb(0, 0, 200); }
-	.cyan  { color: rgb(18,167,148); }
-}
-
 @mixin text-styles {
-	.bold { font-weight: bold; }
+	.red   { color: var(--text-red) }
+	.green { color: var(--text-green) }
+	.blue  { color: var(--text-blue) }
+	.cyan  { color: var(--text-cyan) }
+	.bold  { font-weight: bold; }
 }
 
 @mixin stdout-layouts {
@@ -27,7 +24,6 @@
 	@include term-elements;
 
 	p {
-		@include color-matrix;
 		@include text-styles;
 
 		font-size: 1.2rem;

src/scss/global.scss

@@ -5,7 +5,10 @@
 @use "./elements/main.scss";
 @use "./elements/footer.scss";
 
-:root { color-scheme: dark; }
+:root {
+	@include variables.css-global;
+	color-scheme: dark;
+}
 ::selection {
 	background-color: rgb(255,255,255);
 	color: rgb(0,0,0);

src/scss/variables.scss

@@ -1,3 +1,14 @@
 $header-Y: 30px;
 $footer-Y: 30px;
-$component-padding: 20px;
+$component-padding: 20px;
+
+@mixin text-colors {
+	--text-red:   rgb(200, 0, 0);
+	--text-green: rgb(0, 200, 0);
+	--text-blue:  rgb(0, 0, 200);
+	--text-cyan:  rgb(18,167,148);
+}
+
+@mixin css-global {
+	@include text-colors;
+}