moved to less for styles

src/app.less

@@ -0,0 +1,13 @@
+@import 'vars.less';
+
+@import (css) url('https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap');
+
+body {
+  font-family: @fonts-sans;
+  margin: 0;
+}
+
+h1 {
+  margin: 0;
+  padding: 0;
+}

src/lib/components/headline.svelte

@@ -2,14 +2,14 @@
   <h1><slot /></h1>
 </header>
 
-<style>
+<style lang="less">
   h1 {
     text-align: center;
   }
 
   header {
-    background-color: var(--color-dark);
-    color: var(--color-light);
-    padding: var(--padding-md);
+    background-color: @color-dark;
+    color: @color-light;
+    padding: @padding-md;
   }
 </style>

src/routes/+layout.svelte

@@ -1,25 +1,5 @@
+<script lang="ts">
+  import '../app.less';
+</script>
+
 <slot />
-
-<style>
-  @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap');
-
-  :global(:root) {
-    --color-accent-dark: #a8c3b5;
-    --color-accent-light: #558b6e;
-    --color-danger: #d64933;
-    --color-dark: #2e282a;
-    --color-light: #fbfbfb;
-    --fonts-sans: Rubik, Arial, sans-serif;
-    --padding-md: 0.5em 1em;
-  }
-
-  :global(body) {
-    margin: 0;
-  }
-
-  :global(h1) {
-    font-family: var(--fonts-sans);
-    margin: 0;
-    padding: 0;
-  }
-</style>

src/vars.less

@@ -0,0 +1,12 @@
+// colors
+@color-accent-dark: #a8c3b5;
+@color-accent-light: #558b6e;
+@color-danger: #d64933;
+@color-dark: #2e282a;
+@color-light: #fbfbfb;
+
+// fonts
+@fonts-sans: Rubik, Arial, sans-serif;
+
+// layout
+@padding-md: 0.5em 1em;