chore: unify color vars against s2 spec

Author: fkakatie

blocks/footer/footer.css

@@ -1,6 +1,5 @@
 footer {
   padding: 2rem;
-  background-color: var(--light-color);
   font-size: var(--body-font-size-s);
 }
 

blocks/header/header.css

@@ -158,7 +158,6 @@ header nav .nav-sections {
   flex: 1 1 auto;
   display: none;
   visibility: hidden;
-  background-color: var(--overlay-color);
 }
 
 header nav[aria-expanded='true'] .nav-sections {

blocks/hero/hero.css

@@ -16,7 +16,7 @@ main .hero-container {
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
-  color: white;
+  color: var(--background-color);
 }
 
 .hero picture {

styles/styles.css

@@ -12,12 +12,12 @@
 
 :root {
   /* colors */
-  --link-color: #035fe6;
-  --link-hover-color: #136ff6;
   --background-color: white;
-  --light-color: #eee;
-  --dark-color: #ccc;
-  --text-color: black;
+  --light-color: #e1e1e1;
+  --dark-color: #c6c6c6;
+  --text-color: #292929;
+  --link-color: #274dea;
+  --link-hover-color: #1d3ecf;
 
   /* fonts */
   --body-font-family: roboto, roboto-fallback;
@@ -63,8 +63,8 @@ body {
   margin: 0;
   font-family: var(--body-font-family);
   line-height: 1.6;
-  color: var(--text-color);
   background-color: var(--background-color);
+  color: var(--text-color);
   display: none;
 }
 
@@ -152,8 +152,8 @@ button {
   font-style: normal;
   font-weight: 600;
   cursor: pointer;
-  color: var(--background-color);
   background-color: var(--link-color);
+  color: var(--background-color);
   margin: 16px 0;
   white-space: nowrap;
   overflow: hidden;