fix theme variables

scss/_navigation.scss

@@ -18,26 +18,28 @@
 }
 
 // mobile navigation menu button
-.mobile-menu #toggle span {
-	background: $sec-text-color;
+body:not(.header-dark) .mobile-menu #toggle:not(.active) span,
+#header.scrolled ~ .mobile-menu #toggle:not(.active) span {
+	background: $text-color;
 }
 
-#header.scrolled ~ .mobile-menu #toggle:not(.active) span {
-	background: $pri-text-color;
+body.header-dark .mobile-menu #toggle span,
+.mobile-menu #toggle.active span {
+	background: $text-color-secondary;
 }
 
 // mobile nav
 .mobile-container {
 	.mobile-logo {
 		.title {
-			color: $sec-text-color;
+			color: $text-color-secondary;
 		}
 	}
 
 	.overlay-menu {
 		a, .toggler {
 			padding: 1rem;
-			color: $sec-text-color;
+			color: $text-color-secondary;
 		}
 
 		.toggler {

scss/_overrides.scss

@@ -1,5 +1,5 @@
 // spectre overrides
-.bg-gray { background-color: $bg-color !important;}
+.bg-gray { background-color: $background-color !important;}
 
 // grav overrides
 section.modular-text {
@@ -12,10 +12,10 @@ section.modular-text {
 body {
 	&:not(.header-dark).header-transparent #header:not(.scrolled) {
 		a {
-			color: #FFFFFFB3 !important;
+			color: $text-color-secondary-dark !important;
 
 			&.active {
-				color: #FFFFFF !important;
+				color: $text-color-secondary !important;
 			}
 		}
 	}

scss/_sizes.scss

@@ -1,16 +1,16 @@
 // sizes
 
 // desktop
-@media screen and (min-width: 901px) {
+@media screen and (min-width: $responsive-breakpoint-tablet+1) {
 	// ...
 }
 
 // tablet
-@media screen and (max-width: 900px) {
+@media screen and (max-width: $responsive-breakpoint-tablet) {
 	// ...
 }
 
 // mobile
-@media screen and (max-width: 600px) {
+@media screen and (max-width: $responsive-breakpoint-mobile) {
 	// ...
 }

scss/_table.scss

@@ -3,8 +3,8 @@ table {
 	border-spacing: unset;
 
 	th {
-		background-color: $prim-color;
-		color: #FFFFFF;
+		background-color: $primary-color;
+		color: $text-color-secondary;
 	}
 
 	th, td { padding: 0.2rem 0.5rem; }
@@ -16,7 +16,7 @@ table {
 		text-transform: uppercase;
 	}
 
-	tr:nth-child(even) { background-color: #DCDCDC; }
+	tr:nth-child(even) { background-color: $dark-overlay; }
 
 	.text-align-center { text-align: center; }
 
@@ -27,12 +27,12 @@ table {
 
 
 // desktop
-@media screen and (min-width: 601px) {
+@media screen and (min-width: $responsive-breakpoint-mobile+1) {
 	table td::before { display: none; }
 }
 
 // mobile
-@media screen and (max-width: 600px) {
+@media screen and (max-width: $responsive-breakpoint-mobile) {
 	.table-responsive table {
 		border: 0;
 		width: 100%;
@@ -51,13 +51,13 @@ table {
 		}
 
 		tr {
-			border-bottom: 3px solid $sec-color;
+			border-bottom: 3px solid $background-color;
 			display: block;
 			margin-bottom: .625em;
 		}
 
 		td {
-			border-bottom: 1px solid #DDDDDD;
+			border-bottom: 1px solid $dark-overlay;
 			display: block;
 			font-size: .8em;
 

scss/_theme.scss

@@ -1,18 +1,25 @@
-// theme variables
+@use 'sass:color';
 
-// colors
-$bg-color: #FFFFFF;
-$pri-text-color: #3D3D3D;
-$sec-text-color: #FFFFFF;
-$pri-bg-color: #FFFFFF;
-$sec-color: #4063CB;
-$prim-color: #4063CB;
+// color definitions
+$primary-color: #4063CB;
+$accent-color: #4063CB;
+$grey: #3a414e;
+$light-overlay: rgba(255, 255, 255, 0.25);
+$dark-overlay: rgba(0, 0, 0, 0.25);
 
 // elements
-$header-color: #FFFFFF;
-$footer-color: #FFFFFF;
+$background-color: white;
+$text-color: $grey;
+$text-color-light: mix($text-color, $light-overlay, 25%);
+$text-color-secondary: white;
+$text-color-secondary-dark: mix($text-color-secondary, $dark-overlay);
 
 // hero image
 $overlay-dark: #00000033;
 $overlay-dark-grad-from: #0000004D;
 $overlay-dark-grad-to: #00000000;
+
+// sizes
+$responsive-breakpoint-mobile: 640px;
+$responsive-breakpoint-tablet: 840px;
+$responsive-breakpoint-desktop: 1280px;