fix inherit param in styles & include functions in variables

Author: dsymonov-jc

src/scss/abstracts/variables.scss

@@ -1,3 +1,5 @@
+@import 'functions';
+
 // Global variables
 
 // 'rem' base value
@@ -57,19 +59,19 @@ $media-expressions: (
   --btn-color: var(--color-white);
   --btn-background: var(--color-blue);
   --btn-padding: 0.4em 0.7em;
-  --btn-font-size: inherit;
-  --btn-font-family: inherit;
+  --btn-font-size: 1.6rem;
+  --btn-font-family: var(--font-sans-serif);
 
   // Forms base
-  --form-font-family: inherit;
+  --form-font-family: var(--font-sans-serif);
   --form-element-padding: var(--btn-padding);
   --form-element-border-color: var(--color-grey);
   --form-element-focus-border-color: var(--color-black);
   --placeholder-color: var(--color-grey);
 
   // Headings base
-  --headings-font-family: inherit;
-  --headings-color: inherit;
+  --headings-font-family: var(--font-sans-serif);
+  --headings-color: var(--base-text-color);
 
   // Base font styles for headings
   --headings-sizes-h1: 3rem;

src/scss/base/reset.scss

@@ -2,14 +2,14 @@
 //
 // Note: If you use a framework that includes base styling then you need to remove this file.
 
-html {
-  box-sizing: border-box;
-  font-size: 62.5%;
-}
 *,
 *:before,
 *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 62.5%;
 }
 
 body {
@@ -30,13 +30,3 @@ img {
 .gm-style img {
   max-width: none;
 }
-
-// hide tel links on desktop
-@include media('screen', '>desktop') {
-  a[href^='tel'],
-  a[href^='skype'],
-  a[href^='sms'] {
-    cursor: default;
-    pointer-events: none;
-  }
-}