use css variable instead of sass variables

assets/sass/_theme/design-system/typography.sass

@@ -4,12 +4,10 @@ body
     font-family: $body-font-family
     -moz-osx-font-smoothing: grayscale
     -webkit-font-smoothing: antialiased
-    font-size: $body-size
+    font-size: var(--body-size)
+    line-height: var(--body-line-height)
     font-variant-ligatures: common-ligatures
     text-rendering: optimizelegibility
-    line-height: $body-line-height
-    @include media-breakpoint-up(desktop)
-        font-size: $body-size-desktop
 
 // Experimental, not implemented yet
 // https://github.com/jantimon/text-box-trim-examples