Define global foreground and background colors only once

Author: sergioalvz

layouts/Application/components/Footer/style.css

@@ -30,7 +30,7 @@
 .AppFooter__Link {
   letter-spacing: 1px;
 
-  color: var(--c-gray-12);
+  color: currentColor;
   font-weight: 700;
   text-decoration: none;
   text-transform: uppercase;
@@ -41,7 +41,6 @@
   line-height: 1.65;
   margin-top: 1em;
 
-  color: var(--c-gray-12);
   font-family: var(--ff-serif);
 }
 

layouts/Application/components/Header/style.css

@@ -1,8 +1,6 @@
 .AppHeader {
   box-sizing: border-box;
   padding: 1em 0;
-
-  color: var(--c-gray-12);
 }
 
 .Menu {
@@ -42,7 +40,6 @@
 .Menu__Item {
   font-size: var(--fs-m);
 
-  color: var(--c-gray-12);
   cursor: pointer;
   font-weight: 700;
 }

layouts/Application/style.css

@@ -2,9 +2,6 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-
-  background-color: var(--c-gray-1);
-  color: var(--c-gray-12);
 }
 
 .App__Main {

styles/index.css

@@ -47,6 +47,9 @@ html,
 body {
   font-size: var(--fs-m);
   width: 100%;
+
+  background-color: var(--c-gray-1);
+  color: var(--c-gray-12);
 }
 
 body {