make the background of the menu look better

spearhead/assets/sass/_header.scss

@@ -32,8 +32,8 @@
 
 		@include media( laptop-only ){ // TODO - use $navigation-max-break-point variable
 			.primary-menu-container {
+				background: var(--primary-nav--color-background);
 				padding: var(--global--spacing-unit);
-				background: var(--global--color-foreground);
 				top: 119px;
 
 				a {

spearhead/style-rtl.css

@@ -110,8 +110,8 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 @media only screen and (max-width: 829px) {
 	.site-header .primary-navigation .primary-menu-container {
+		background: var(--primary-nav--color-background);
 		padding: var(--global--spacing-unit);
-		background: var(--global--color-foreground);
 		top: 119px;
 	}
 	.site-header .primary-navigation .primary-menu-container a {

spearhead/style.css

@@ -110,8 +110,8 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 @media only screen and (max-width: 829px) {
 	.site-header .primary-navigation .primary-menu-container {
+		background: var(--primary-nav--color-background);
 		padding: var(--global--spacing-unit);
-		background: var(--global--color-foreground);
 		top: 119px;
 	}
 	.site-header .primary-navigation .primary-menu-container a {

spearhead/variables.css

@@ -59,6 +59,7 @@
 
 	--primary-nav--justify-content: flex-end;
 	--primary-nav--color-link: var(--global--color-secondary);
+	--primary-nav--color-background: var(--global--color-background);
 	--primary-nav--padding: 0px;
 	--primary-nav--font-family-mobile: var(--global--font-family-secondary);
 	--primary-nav--font-size-mobile: var(--global--font-size-sm);
@@ -86,5 +87,6 @@
 		--global--color-foreground-light: #ffffff;
 		--global--color-background: #080b11;
 		--global--color-text-selection: #000000;
+		--primary-nav--color-background: var(--global--color-foreground-light);
 	}
 }