fix(variables): rem function should use global $font-size variable (#9497)

* The `rem` SCSS function currently uses a hard-coded font size variable, which makes it impossible for developers to overwrite the global font-size.
   The rem function should be moved behind the initialization of the global `$font-size` variable, and should use this one.

Fixes #9486.

Author: devversion

src/core/style/variables.scss

@@ -1,15 +1,13 @@
-// Function
-//-- Must be defined before variables
-@function rem($multiplier) {
-  $font-size: 10px;
-  @return $multiplier * $font-size;
-}
-
 // Typography
 // ------------------------------
 $font-family: Roboto, 'Helvetica Neue', sans-serif !default;
 $font-size:   10px !default;
 
+//-- Must be defined before $font-size.
+@function rem($multiplier) {
+  @return $multiplier * $font-size;
+}
+
 $display-4-font-size-base: rem(11.20) !default;
 $display-3-font-size-base: rem(5.600) !default;
 $display-2-font-size-base: rem(4.500) !default;