diff --git a/Changes b/Changes
index ba3ea51..934ecea 100644
--- a/Changes
+++ b/Changes
@@ -22,6 +22,7 @@
         - Add general proxies support (diewald)
         - Fix guided tour test suite (closes #265; hebasta)
         - Windows is no longer natively supported (diewald)
+        - Upgrade SCSS to module system (fixes #266; diewald)
 
 0.59 2025-03-28
         - Docker only release (diewald)
diff --git a/dev/scss/base/banner.scss b/dev/scss/base/banner.scss
index 811cafe..3607002 100644
--- a/dev/scss/base/banner.scss
+++ b/dev/scss/base/banner.scss
@@ -1,3 +1,5 @@
+@use "colors";
+
 .banner {
   position: fixed;
   width: 10em;
@@ -32,8 +34,8 @@
     transform-origin: 0 0 ;
     transform:rotate(45deg);
 
-    background-color: $light-orange;
-    color: $dark-orange;
-    border: 1px solid $dark-orange;
+    background-color: colors.$light-orange;
+    color: colors.$dark-orange;
+    border: 1px solid colors.$dark-orange;
   }
 }
\ No newline at end of file
diff --git a/dev/scss/base/base.scss b/dev/scss/base/base.scss
index 7750665..b004494 100644
--- a/dev/scss/base/base.scss
+++ b/dev/scss/base/base.scss
@@ -1,16 +1,20 @@
 @charset "utf-8";
-@import "../util";
-@import "fonts";
-@import "flextable";
-@import "fragment";
-@import "load";
-@import "form";
-@import "view";
-@import "menu";
-@import "banner";
-@import "showPWD";
-@import "copyToClipboard";
-@import "buttongroup";
+@use "../util";
+@use "fonts";
+@use "flextable";
+@use "fragment";
+@use "load";
+@use "form";
+@use "view";
+@use "menu";
+@use "banner";
+@use "showPWD";
+@use "copyToClipboard";
+@use "buttongroup";
+@use "colors";
+@use "icons";
+@use "lengths";
+@use "mixins";
 
 /**
  * Basic global CSS rules for Kalamar
@@ -18,7 +22,7 @@
 
 
 * {
-  @include box-sizing-box;
+  @include mixins.box-sizing-box;
 }
 
 body,
@@ -26,12 +30,12 @@
 select,
 g > text {
   font-family: verdana, tahoma, arial, Helvetica, sans-serif;
-  color:       $dark-grey;
+  color:       colors.$dark-grey;
   margin:      0;
 }
 
 g > text {
-  fill: $dark-grey;
+  fill: colors.$dark-grey;
 }
 
 // html {
@@ -49,14 +53,14 @@
 
 a {
   &:visited {
-    color: $darkest-orange;
+    color: colors.$darkest-orange;
   }
   
   &:link {
     text-decoration: none;
-    color:           $dark-orange;
+    color:           colors.$dark-orange;
     &:hover {
-      color:      $darkest-orange;
+      color:      colors.$darkest-orange;
       transition: color 0.3s ease 0s;
     }
   }
@@ -64,8 +68,8 @@
   // External links
   &[href^="http://"]::after,
   &[href^="https://"]::after {
-    @include icon-font;
-    content:   " " + $fa-extlink;
+    @include mixins.icon-font;
+    content:   " " + icons.$fa-extlink;
     font-size: 75%;
   }
 }
@@ -94,21 +98,21 @@
 }
 
 blockquote {
-  border-radius:    $standard-border-radius;
+  border-radius:    lengths.$standard-border-radius;
   padding:          2pt 5pt 2pt 20pt;
   margin:           0;
-  border-left:      5px solid $ids-blue-1;
-  background-color: $ids-blue-2;
-  color:            $ids-blue-1;
+  border-left:      5px solid colors.$ids-blue-1;
+  background-color: colors.$ids-blue-2;
+  color:            colors.$ids-blue-1;
   -webkit-mix-blend-mode: normal; // Safari
   mix-blend-mode:   soft-light;
   
   &.bug,
   &.missing,
   &.warning {
-    border-left-color: $dark-red;
-    background-color:  $middle-red;
-    color:             $nearly-white;
+    border-left-color: colors.$dark-red;
+    background-color:  colors.$middle-red;
+    color:             colors.$nearly-white;
     mix-blend-mode:    multiply;
   }
 }
@@ -124,11 +128,11 @@
       border-width: 0;
 
       &[data-type=token]::after {
-	      color: $ids-blue-1;
+	      color: colors.$ids-blue-1;
       }
 
       &[data-type=span]::after {
-	      color: $ids-pink-1;
+	      color: colors.$ids-pink-1;
       }
 
       &::after {
diff --git a/dev/scss/base/buttongroup.scss b/dev/scss/base/buttongroup.scss
index 1937e53..fc9c6a6 100644
--- a/dev/scss/base/buttongroup.scss
+++ b/dev/scss/base/buttongroup.scss
@@ -1,5 +1,10 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "choose";
+@use "colors";
+@use "icons";
+@use "lengths";
+@use "mixins";
 
 /*
  * Define the base layout of horizontal button groups
@@ -15,34 +20,34 @@
     > span,
     input[type=submit],  
     a {
-      @include choose-item;
-      box-shadow:   $choose-box-shadow;
+      @include choose.choose-item;
+      box-shadow:   choose.$choose-box-shadow;
       font-size:    9pt;
       font-weight:  normal;
       line-height:  1.5em;
       padding:      0 4px;
       display:      inline-block;
       border-style: solid;
-      border-width: $border-size 0;
+      border-width: lengths.$border-size 0;
 
       &:not(.inactive):hover {
-	@include choose-hover;
+	@include choose.choose-hover;
         transition: none;
       }
 
       &:first-child {
 	      border: {
-	        left-width:          $border-size;
-	        top-left-radius:     $standard-border-radius;
-	        bottom-left-radius:  $standard-border-radius;
+	        left-width:          lengths.$border-size;
+	        top-left-radius:     lengths.$standard-border-radius;
+	        bottom-left-radius:  lengths.$standard-border-radius;
 	      }
       }
 
       &:last-child {
 	      border: {
-	        right-width:         $border-size;
-	        top-right-radius:    $standard-border-radius;
-	        bottom-right-radius: $standard-border-radius;
+	        right-width:         lengths.$border-size;
+	        top-right-radius:    lengths.$standard-border-radius;
+	        bottom-right-radius: lengths.$standard-border-radius;
         }
       }
     }
@@ -57,21 +62,21 @@
       min-width: auto;
 
       > span.check {
-        @include icon-font;
+        @include mixins.icon-font;
         width:      1em;
         display:    inline-block;
         text-align: left;
 
         &:not(.checked)::after {
-          content: $fa-check;
+          content: icons.$fa-check;
         }
 
         &.checked::after {
-          content: $fa-checked;
+          content: icons.$fa-checked;
         }
 
         > span {
-          @include blind;
+          @include mixins.blind;
         }
       }
     }
@@ -85,12 +90,12 @@
     z-index:   20;
     margin:    0;
     padding:   0;
-    width:     $right-view-distance;
+    width:     lengths.$right-view-distance;
     font-size: 10pt;
-    color:     $nearly-white;
+    color:     colors.$nearly-white;
 
     > span:first-child {
-      margin-top: $border-size
+      margin-top: lengths.$border-size
     }
 
     > span {
@@ -101,19 +106,19 @@
       font-style:      normal;
       
       &.download::after {
-	      content: $fa-download;
+	      content: icons.$fa-download;
       }
       
       &.close::after {
-	      content: $fa-close;
+	      content: icons.$fa-close;
       }
 
       &.minimize::after {
-	      content: $fa-minimize;
+	      content: icons.$fa-minimize;
       }
       
       &.plugin::after {
-	      content: $fa-plugin;        
+	      content: icons.$fa-plugin;        
       }
     }
   }
@@ -126,7 +131,7 @@
   font-size:  10pt;
   left:       0;
   text-align: left;
-  margin:     -1 * $border-size;
+  margin:     -1 * lengths.$border-size;
   margin-top: 0;
 
   > li:first-of-type {
@@ -135,10 +140,10 @@
 }
 
 .button-icon {
-  @include icon-font;
+  @include mixins.icon-font;
   line-height: 1.3;
   > span {
-    @include blind;
+    @include mixins.blind;
   }
   &[data-icon]::after {
     content: attr(data-icon);
diff --git a/dev/scss/base/choose.scss b/dev/scss/base/choose.scss
index fc3d250..93779a4 100644
--- a/dev/scss/base/choose.scss
+++ b/dev/scss/base/choose.scss
@@ -1,13 +1,14 @@
-@import "colors";
+@use 'sass:color';
+@use "colors";
 
 /**
  * Some color definitions and mixins for
  * buttons and menus.
  */
-$choose-bg:           $light-grey;
-$choose-color:        $dark-grey;
-$choose-blind-color:  $middle-grey;
-$choose-border-color: $middle-grey;
+$choose-bg:           colors.$light-grey;
+$choose-color:        colors.$dark-grey;
+$choose-blind-color:  colors.$middle-grey;
+$choose-border-color: colors.$middle-grey;
 $choose-border:       2px solid $choose-border-color;
 $choose-box-shadow:   2px 2px 2px  rgba(0,0,0,0.2);
 
@@ -19,7 +20,7 @@
   color:            $choose-color;
   background-color: $choose-bg;
   border-color:     $choose-border-color;
-  text-shadow:      $light-shadow;
+  text-shadow:      colors.$light-shadow;
 }
 
 
@@ -27,9 +28,9 @@
  * Chooseable items (mouse over)
  */
 @mixin choose-hover {
-  color:            $nearly-white;
-  background-color: $dark-orange;
-  border-color:     $darker-orange;
+  color:            colors.$nearly-white;
+  background-color: colors.$dark-orange;
+  border-color:     colors.$darker-orange;
   text-shadow:      none;
 }
 
@@ -38,8 +39,8 @@
  * Chooseable items (not available)
  */
 @mixin choose-inactive {
-  color:            lighten($choose-color, 20%);
-  background-color: lighten($choose-bg, 20%);
+  color:            color.adjust($choose-color, $lightness: 20%, $space: hsl);
+  background-color: color.adjust($choose-bg, $lightness: 20%, $space: hsl);
   border-color:     transparent;
   text-shadow:      none;
 }
@@ -48,9 +49,9 @@
  * Chooseable items (active)
  */
 @mixin choose-active {
-  color:            $dark-green;
-  background-color: $light-green;
-  border-color:     $dark-green;
+  color:            colors.$dark-green;
+  background-color: colors.$light-green;
+  border-color:     colors.$dark-green;
   text-shadow:      none;
 }
 
@@ -59,8 +60,8 @@
  * Chooseable items (action: remove something)
  */
 @mixin choose-remove {
-  color:            $nearly-white;
-  background-color: $middle-red;
-  border-color:     $dark-red;
+  color:            colors.$nearly-white;
+  background-color: colors.$middle-red;
+  border-color:     colors.$dark-red;
   text-shadow:      none;
 }
diff --git a/dev/scss/base/colors.scss b/dev/scss/base/colors.scss
index 2873ec7..6d5acd0 100644
--- a/dev/scss/base/colors.scss
+++ b/dev/scss/base/colors.scss
@@ -3,6 +3,8 @@
  * for Kalamar,
  */
 
+@use 'sass:color';
+
 /**
  * Official IDS colors
  */
@@ -35,10 +37,10 @@
  * Green Colors
  */
 $dark-green:     $ids-green-1; // #496000;
-$middle-green:   lighten($ids-green-1, 9%);
-$light-green:    lighten($ids-green-1, 13%); // #7ba400;
-$lightest-green: desaturate(lighten($light-green, 35%), 20%); // #d8e38c;
-$grey-green:     darken(desaturate($lightest-green, 25%), 12%); // #bcc387;
+$middle-green:   color.adjust($ids-green-1, $lightness: 9%, $space: hsl);
+$light-green:    color.adjust($ids-green-1, $lightness: 13%, $space: hsl); // #7ba400;
+$lightest-green: color.adjust($light-green, $lightness: 35%, $saturation: -20%, $space: hsl); // #d8e38c;
+$grey-green:     color.adjust($lightest-green, $saturation: -25%, $lightness: -12%, $space: hsl); // #bcc387;
 
 
 /**
@@ -46,7 +48,7 @@
  */
 $light-blue:     $ids-blue-2;
 $dark-blue:      $ids-blue-1;
-$darkest-blue:   darken($dark-blue, 40%);
+$darkest-blue:   color.adjust($dark-blue, $lightness: -40%, $space: hsl);
 
 
 /**
@@ -54,7 +56,7 @@
  */
 $middle-grey:  $ids-grey-1; // #999;
 $light-grey:   $ids-grey-2; // #ddd;
-$dark-grey:    darken($middle-grey, 15%);
+$dark-grey:    color.adjust($middle-grey, $lightness: -15%, $space: hsl);
 $nearly-white: #fefefe;
 
 
@@ -62,8 +64,8 @@
  * Red Colors (no IDS relation)
  */
 $middle-red: #c1002b;
-$light-red:  lighten($middle-red, 40%);
-$dark-red:   darken($middle-red, 40%);
+$light-red:  color.adjust($middle-red, $lightness: 40%, $space: hsl);
+$dark-red:   color.adjust($middle-red, $lightness: -40%, $space: hsl);
 $alert-red:  rgb(254,26,0);
 
 /**
diff --git a/dev/scss/base/copyToClipboard.scss b/dev/scss/base/copyToClipboard.scss
index 2c93b79..6903f13 100644
--- a/dev/scss/base/copyToClipboard.scss
+++ b/dev/scss/base/copyToClipboard.scss
@@ -1,10 +1,11 @@
-@import "icons";
+@use "icons";
+@use "mixins";
 
 a.copy-to-clipboard::after {
     position: absolute;
-    @include icon-font;
+    @include mixins.icon-font;
     width: 1em;
-    content: $fa-copy;
+    content: icons.$fa-copy;
     cursor: pointer;
     margin-left: .4em;
     margin-top: .6em;
diff --git a/dev/scss/base/flextable.scss b/dev/scss/base/flextable.scss
index f10cec3..734a965 100644
--- a/dev/scss/base/flextable.scss
+++ b/dev/scss/base/flextable.scss
@@ -1,6 +1,6 @@
 @use 'sass:math';
-@import "lengths";
-@import "mixins";
+@use "lengths";
+@use "mixins";
 
 /**
  * This defines flexible table cells
@@ -21,26 +21,26 @@
     flex-direction: row;
     text-align: center;
     width: 100%;
-    border-width: math.div($border-size,2);
+    border-width: math.div(lengths.$border-size,2);
     border-style: solid;
     align-items: stretch;
     > * {
-      @include cell-info;
+      @include mixins.cell-info;
     }
     > dt {
       text-align: left;
       width: 12.5em;
-      padding: $item-padding;
+      padding: lengths.$item-padding;
       margin: 0;
     }
     > dd {
       text-align: left;
-      padding: $item-padding;
+      padding: lengths.$item-padding;
       margin: 0;
       width: 100%;
       max-width: none;
       max-height: 6em;
-      margin-left: $border-size;
+      margin-left: lengths.$border-size;
       white-space: normal;
       overflow-y: auto;
       overflow-x: hidden;
diff --git a/dev/scss/base/fonts.scss b/dev/scss/base/fonts.scss
index febfa57..5fef211 100644
--- a/dev/scss/base/fonts.scss
+++ b/dev/scss/base/fonts.scss
@@ -1,5 +1,5 @@
 @charset "utf-8";
-@import "paths";
+@use "paths";
 
 /**
  * Load web fonts for Kalamar
@@ -7,8 +7,8 @@
 
 @font-face {
   font-family: 'FontAwesome';
-  src: url('#{$font-path}/fontawesome-webfont.eot?v=4.3.0');
-  src: url('#{$font-path}/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('#{$font-path}/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('#{$font-path}/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('#{$font-path}/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('#{$font-path}/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
+  src: url('#{paths.$font-path}/fontawesome-webfont.eot?v=4.3.0');
+  src: url('#{paths.$font-path}/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('#{paths.$font-path}/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('#{paths.$font-path}/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('#{paths.$font-path}/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('#{paths.$font-path}/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
   font-weight: normal;
   font-style:  normal;
 }
\ No newline at end of file
diff --git a/dev/scss/base/form.scss b/dev/scss/base/form.scss
index 70e6bcf..a150e3b 100644
--- a/dev/scss/base/form.scss
+++ b/dev/scss/base/form.scss
@@ -1,5 +1,8 @@
-@import "lengths";
-@import "colors";
+@use "lengths";
+@use "colors";
+@use "choose";
+@use "icons";
+@use "mixins";
 
 /**
  * Definition of form elements for Kalamar.
@@ -27,7 +30,7 @@
     background-color: transparent;
     margin-left: 0;
     font-weight: bold;
-    border-radius: $standard-border-radius;
+    border-radius: lengths.$standard-border-radius;
   }
 
   label,
@@ -54,7 +57,7 @@
     }
     legend::after {
       content: ':';
-      color: $ids-green-2;
+      color: colors.$ids-green-2;
     }
     input, label[for] {
       display: inline-block;
@@ -72,13 +75,13 @@
   textarea,
   button,
   a.form-button {
-    border-radius: $standard-border-radius;
+    border-radius: lengths.$standard-border-radius;
   }
   
   input,
   textarea {
-    border-color:     $ids-grey-2;
-    background-color: $nearly-white;
+    border-color:     colors.$ids-grey-2;
+    background-color: colors.$nearly-white;
     border-style:     solid;
   }
   
@@ -90,7 +93,7 @@
     display:      inline-block;
     width:        20%;
     min-width:    20em;
-    padding:      $base-padding;
+    padding:      lengths.$base-padding;
   }
 
   input[type=radio] {
@@ -103,11 +106,11 @@
   
   input[readonly=readonly],
   textarea[readonly] {
-    background-color: $light-orange;
+    background-color: colors.$light-orange;
   }
   
   .field-with-error {
-    border-color: $ids-pink-1;
+    border-color: colors.$ids-pink-1;
   }
 
   input[type=submit],
@@ -117,25 +120,25 @@
     cursor:           pointer;
     border-width:     thin;
     text-align:       center;
-    background-color: $middle-green;
-    border-color:     $dark-green;
+    background-color: colors.$middle-green;
+    border-color:     colors.$dark-green;
     // font-size:        8pt;
-    color:            $dark-green;
+    color:            colors.$dark-green;
   }
 
   span.file-upload {
-    @include choose-item;
-    box-shadow:   $choose-box-shadow;
-    border: $choose-border;
-    border-radius:     $standard-border-radius;
-    padding: $item-padding;
+    @include choose.choose-item;
+    box-shadow:   choose.$choose-box-shadow;
+    border: choose.$choose-border;
+    border-radius:     lengths.$standard-border-radius;
+    padding: lengths.$item-padding;
     position: relative;
     overflow: hidden;
     right: 0;
     display: inline-block;
 
     &:hover {
-      @include choose-hover;
+      @include choose.choose-hover;
       transition: none;
     }
    
@@ -150,15 +153,15 @@
       opacity: 0;
       filter: alpha(opacity=0);
       &.field-with-error {
-        background-color: $ids-pink-1;
+        background-color: colors.$ids-pink-1;
         opacity: .3;
         filter: alpha(opacity=.3);
       }
     }
 
     &::after {
-      @include icon-font;
-      content: $fa-upload;
+      @include mixins.icon-font;
+      content: icons.$fa-upload;
     }
   }
   
@@ -167,20 +170,20 @@
   }
   
   label.field-required::after {
-    color:   $ids-blue-1;
+    color:   colors.$ids-blue-1;
     content: '*';
   }
 
   span.field-required{
-    color:   $ids-blue-1;
+    color:   colors.$ids-blue-1;
   }
 
 }
 
 .button-abort {
-  background-color: $middle-orange !important;
-  color:            $darkest-orange !important;
-  border-color:     $darkest-orange !important;
+  background-color: colors.$middle-orange !important;
+  color:            colors.$darkest-orange !important;
+  border-color:     colors.$darkest-orange !important;
 }
 
 button, input[type=submit] {
@@ -191,15 +194,15 @@
   }
   
   &[type=submit] {
-    @include choose-item;
+    @include choose.choose-item;
     font-weight: normal;
     padding:     0;
     height:      100%;
     top:         0;
-    width:       $button-width;
+    width:       lengths.$button-width;
 
     > span:nth-of-type(1) {
-      @include blind;
+      @include mixins.blind;
     }
 
     &::after {
@@ -208,7 +211,7 @@
     
     &:hover,
     &:focus {
-      @include choose-hover;
+      @include choose.choose-hover;
     }
 
     &::-moz-focus-inner {
@@ -216,7 +219,7 @@
     }
 
     &:active {
-      @include choose-active;
+      @include choose.choose-active;
     }
 
     /*
@@ -225,24 +228,24 @@
      */
     &:last-of-type {
       border: {
-        right-width:         $border-size;
+        right-width:         lengths.$border-size;
         right-style:         solid;
-        top-right-radius:    $standard-border-radius;
-        bottom-right-radius: $standard-border-radius;
+        top-right-radius:    lengths.$standard-border-radius;
+        bottom-right-radius: lengths.$standard-border-radius;
       }
     }
   }
 }
 
 button[type=submit] {
-  border: $border-size solid $nearly-white;
+  border: lengths.$border-size solid colors.$nearly-white;
 }
 
 *[type=submit].form-submit {
-  box-shadow:   $choose-box-shadow;
-  border-radius:     $standard-border-radius;
+  box-shadow:   choose.$choose-box-shadow;
+  border-radius:     lengths.$standard-border-radius;
   border-width: 2px !important;
-  padding: $base-padding !important;
+  padding: lengths.$base-padding !important;
 }
 
 /**
@@ -266,13 +269,13 @@
       margin-right:   .2em;
 
       &::after {
-	      @include icon-font; 
-	      content: $fa-check;
+	      @include mixins.icon-font; 
+	      content: icons.$fa-check;
       }
     }
   }
 
   &:checked + label span::after {
-    content: $fa-checked;
+    content: icons.$fa-checked;
   }
 }
diff --git a/dev/scss/base/fragment.scss b/dev/scss/base/fragment.scss
index f68e7db..43932fb 100644
--- a/dev/scss/base/fragment.scss
+++ b/dev/scss/base/fragment.scss
@@ -1,7 +1,7 @@
 @charset "utf-8";
-@import "choose";
-@import "lengths";
-@import "icons";
+@use "choose";
+@use "lengths";
+@use "icons";
 
 /**
  * Definitions of fragments for vc and query
@@ -10,25 +10,25 @@
 
 .vc.fragment,
 p.query.fragment {
-  @include choose-item;
+  @include choose.choose-item;
   position: relative;
   padding:  4pt 6pt !important;
   
   border : {
-    width:  $border-size;
+    width:  lengths.$border-size;
     style:  solid;
-    radius: $standard-border-radius;
+    radius: lengths.$standard-border-radius;
   }
 
   margin: {
-    left:   $left-distance;
+    left:   lengths.$left-distance;
     top:    .5em;
     bottom: .5em;
-    right:  $right-view-distance;
+    right:  lengths.$right-view-distance;
   }
 
   &:hover {
-    @include choose-hover;
+    @include choose.choose-hover;
     cursor: pointer;
   }
 
@@ -45,9 +45,9 @@
   
   &::after {
 	  font-family: 'FontAwesome';
-	  content:     $fa-to-query;
+	  content:     icons.$fa-to-query;
     position:    absolute;
     right:       4pt;
-    top:         $border-size;
+    top:         lengths.$border-size;
   }
 }
diff --git a/dev/scss/base/menu.scss b/dev/scss/base/menu.scss
index 993b237..433f69e 100644
--- a/dev/scss/base/menu.scss
+++ b/dev/scss/base/menu.scss
@@ -1,7 +1,7 @@
 @charset "utf-8";
-@import "choose";
-@import "lengths";
-@import "icons";
+@use "choose";
+@use "lengths";
+@use "icons";
 
 /**
  * Definitions for menu design.
@@ -34,18 +34,18 @@
   
   > li,
   > span.non-item:not(.active) {
-    @include choose-item;
+    @include choose.choose-item;
   }
 
   > li,
   > span.non-item:not(:empty) {
-    @include choose-item;
-    box-shadow:  $choose-box-shadow;
+    @include choose.choose-item;
+    box-shadow:  choose.$choose-box-shadow;
     cursor:      pointer;
-    padding:     $item-padding;
+    padding:     lengths.$item-padding;
     white-space: normal;
     border: {
-      width:        $border-size;
+      width:        lengths.$border-size;
       bottom-width: 0px;
       top-width:    0px;
       style:        solid;
@@ -59,10 +59,10 @@
   div.lengthField {
     border: {
       color: transparent;
-      width: $border-size;
+      width: lengths.$border-size;
     }
     overflow: hidden;
-    padding: $item-padding;
+    padding: lengths.$item-padding;
     padding-top: 0;
     padding-bottom: 0;
     span {
@@ -87,7 +87,7 @@
     transition:       opacity .5s ease 1s;
 
     > span {
-      @include choose-active;
+      @include choose.choose-active;
       position: absolute;
       display:  block;
       right:    0;
@@ -101,12 +101,12 @@
     }
 
     &.active > span {
-      @include choose-hover;
+      @include choose.choose-hover;
     }
 
     > div {
-      @include choose-item;
-      box-shadow: $choose-box-shadow;
+      @include choose.choose-item;
+      box-shadow: choose.$choose-box-shadow;
       position:   absolute;
       right:      0;
       width:      10px;
@@ -138,17 +138,17 @@
   > li {
     &:first-of-type {
       border-top: {
-	      width:        $border-size;
-	      left-radius:  $standard-border-radius;
-	      right-radius: $standard-border-radius;
+	      width:        lengths.$border-size;
+	      left-radius:  lengths.$standard-border-radius;
+	      right-radius: lengths.$standard-border-radius;
       }
     }
 
     &:last-of-type {
       border-bottom: {
-	      width:        $border-size;
-	      left-radius:  $standard-border-radius;
-	      right-radius: $standard-border-radius;
+	      width:        lengths.$border-size;
+	      left-radius:  lengths.$standard-border-radius;
+	      right-radius: lengths.$standard-border-radius;
       }
     }
     mark {
@@ -161,18 +161,18 @@
 
   > li.active,
   span.non-item.active {
-    @include choose-active;
+    @include choose.choose-active;
   }
 
   > li:hover,
   span.non-item:hover {
-    @include choose-hover;
+    @include choose.choose-hover;
   }
 
   span.non-item {
     border: {
-      radius: $standard-border-radius;
-      width:  $border-size !important;
+      radius: lengths.$standard-border-radius;
+      width:  lengths.$border-size !important;
     }
   }
   
@@ -216,7 +216,7 @@
     &:not(.no-more):before {
       position:    absolute;
       font-family: "FontAwesome";
-      content:     $fa-up;
+      content:     icons.$fa-up;
       right:       .5em;
       top:         .4em;
     }
@@ -225,7 +225,7 @@
     &:not(.no-more):before {
       position:    absolute;
       font-family: "FontAwesome";
-      content:     $fa-down;
+      content:     icons.$fa-down;
       right:       .5em;
       bottom:      .4em;
     }
@@ -246,7 +246,7 @@
     content: '';
   }
   > li.active:hover {
-    @include choose-remove;
+    @include choose.choose-remove;
   }
 }
 
diff --git a/dev/scss/base/mixins.scss b/dev/scss/base/mixins.scss
index 88eaaae..cc55686 100644
--- a/dev/scss/base/mixins.scss
+++ b/dev/scss/base/mixins.scss
@@ -1,5 +1,6 @@
 @use 'sass:math';
-@import "colors";
+@use "colors";
+@use "lengths";
 
 /**
  * Mixin for blind elements
@@ -28,7 +29,7 @@
 @mixin input-field {
   outline:   none;
   font-size: 11pt;
-  border:    $border-size solid $nearly-white;
+  border:    lengths.$border-size solid colors.$nearly-white;
   padding:   2px;
   margin:    0;
 }
@@ -64,6 +65,6 @@
 
 
 @mixin matchinfo-head {
-  border-top: $border-size solid $darker-orange; // #ff8000;
-  width:      math.div($left-width, 2);
+  border-top: lengths.$border-size solid colors.$darker-orange; // #ff8000;
+  width:      math.div(lengths.$left-width, 2);
 }
diff --git a/dev/scss/base/showPWD.scss b/dev/scss/base/showPWD.scss
index 77de2c1..061650b 100644
--- a/dev/scss/base/showPWD.scss
+++ b/dev/scss/base/showPWD.scss
@@ -1,4 +1,5 @@
-@import "icons";
+@use "icons";
+@use "mixins";
 
 input.show-pwd {
     padding-right: 2em;
@@ -6,9 +7,9 @@
 
 a.show-pwd::after {
     position: absolute;
-    @include icon-font;
+    @include mixins.icon-font;
     width: 1em;
-    content: $fa-show;
+    content: icons.$fa-show;
     cursor: pointer;
     margin-left: -1.5em;
     margin-top: .6em;
@@ -16,5 +17,5 @@
 }
 
 a.show-pwd.hide::after {
-    content: $fa-hide;
+    content: icons.$fa-hide;
 }
diff --git a/dev/scss/base/view.scss b/dev/scss/base/view.scss
index 5aa4b6e..dbb5c65 100644
--- a/dev/scss/base/view.scss
+++ b/dev/scss/base/view.scss
@@ -1,5 +1,5 @@
-@import "colors";
+@use "colors";
 
 .result-view {
-  background-color: $nearly-white;
+  background-color: colors.$nearly-white;
 }
\ No newline at end of file
diff --git a/dev/scss/footer/footer.scss b/dev/scss/footer/footer.scss
index 0d85a78..650d3ef 100644
--- a/dev/scss/footer/footer.scss
+++ b/dev/scss/footer/footer.scss
@@ -1,12 +1,15 @@
 @charset "utf-8";
 @use 'sass:math';
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/lengths";
+@use "../base/paths";
 
 /**
  * Rules for the footer section of Kalamar
  */
 footer {
-  background-color: $dark-grey;
+  background-color: colors.$dark-grey;
   // position:         absolute;
   // bottom:           0;
   margin-top:       auto;
@@ -17,15 +20,15 @@
 
   display: flex;
   align-items: center;
-  height: $footer-height;
+  height: lengths.$footer-height;
 
   &.shifted {
-    padding-left: $logo-left-distance;
+    padding-left: lengths.$logo-left-distance;
   }
 
   nav {
-    margin-left: $button-width;
-    padding: $item-padding;
+    margin-left: lengths.$button-width;
+    padding: lengths.$item-padding;
     text-align: left;
     flex-grow: 2;
     display: flex;
@@ -42,7 +45,7 @@
       font-size: bold;
       content: " | ";
       white-space: nowrap;
-      color:   $dark-orange;
+      color:   colors.$dark-orange;
     }
     &:last-child {
       margin-right: 0;
@@ -65,13 +68,13 @@
     font-size: 10pt;
     &:link {
       // margin: 0 .5em;
-      color:  $light-grey;
+      color:  colors.$light-grey;
     }
     &:visited {
-      color:  $light-grey;
+      color:  colors.$light-grey;
     }
     &:hover {
-      color:  $nearly-white;
+      color:  colors.$nearly-white;
     }
     &[href^="http://"]::after,
     &[href^="https://"]::after {
@@ -84,7 +87,7 @@
  * Logo table of the front page
  */
 #logos {
-  margin-right: $standard-margin;
+  margin-right: lengths.$standard-margin;
 }
 
 /**
@@ -94,7 +97,7 @@
   display:          inline-block;
   width:            math.div(631,30) + em;
   height:           math.div(200,30) + em;
-  background-image: url('#{$img-path}/ids-institute-for-the-german-language-white.svg');
+  background-image: url('#{paths.$img-path}/ids-institute-for-the-german-language-white.svg');
 }
 
 aside.active:not(.off) ~ footer {
diff --git a/dev/scss/header/datepicker.scss b/dev/scss/header/datepicker.scss
index ecc509d..bb34823 100644
--- a/dev/scss/header/datepicker.scss
+++ b/dev/scss/header/datepicker.scss
@@ -1,5 +1,10 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
 
 /**
  * Rules for the datepicker widget
@@ -8,18 +13,18 @@
  */
 
 div.datepicker {
-  @include choose-item;
+  @include choose.choose-item;
   position:   absolute;
   display:    inline-block;
   z-index:    90;
   font-size:  80%;
   padding:    4pt;
-  box-shadow: $choose-box-shadow;
+  box-shadow: choose.$choose-box-shadow;
 
   border: {
-    width:  $border-size;
+    width:  lengths.$border-size;
     style:  solid;
-    radius: $standard-border-radius;
+    radius: lengths.$standard-border-radius;
   }
 
   > div {
@@ -39,7 +44,7 @@
       &:last-child {
 	      width: 15%;
 	      &::before {
-          @include icon-font;
+          @include mixins.icon-font;
 	        display:    inline-block;
 	        text-align: center;
 	        cursor:     pointer;
@@ -48,11 +53,11 @@
       }
 
       &:first-child::before {
-	      content: $fa-previous;
+	      content: icons.$fa-previous;
       }
 
       &:last-child::before {
-	      content: $fa-next;
+	      content: icons.$fa-next;
       }
 
       &:nth-child(2) {
@@ -63,18 +68,18 @@
 	      text-overflow: ellipsis;
 
 	      border: {
-	        radius: $standard-border-radius;
+	        radius: lengths.$standard-border-radius;
 	        style:  solid;
-	        width:  $border-size;
+	        width:  lengths.$border-size;
 	        color:  transparent;
 	      }
 
 	      &:hover {
-	        @include choose-hover;
+	        @include choose.choose-hover;
 	      }
 
 	      &.selected {
-	        @include choose-active;
+	        @include choose.choose-active;
 	      }
       }
     }
@@ -86,9 +91,9 @@
   }
 
   input {
-    @include choose-item;
-    @include standard-text-padding;
-    background-color: $nearly-white;
+    @include choose.choose-item;
+    @include mixins.standard-text-padding;
+    background-color: colors.$nearly-white;
     width:            100%;
 
     border: {
@@ -98,7 +103,7 @@
   }
 
   td {
-    @include standard-text-padding;
+    @include mixins.standard-text-padding;
     text-align: center;
 
     border: {
@@ -107,22 +112,22 @@
     }
 
     &:not(.out) {
-      @include choose-item;
+      @include choose.choose-item;
       cursor: pointer;
-      background-color: $nearly-white;
+      background-color: colors.$nearly-white;
 
       &.today {
-	      background-color: $light-blue;
-	      color: $dark-blue;
+	      background-color: colors.$light-blue;
+	      color: colors.$dark-blue;
 	      text-shadow: none;
       }
 
       &.selected {
-	      @include choose-active;
+	      @include choose.choose-active;
       }
 
       &:hover {
-	      @include choose-hover;
+	      @include choose.choose-hover;
       }
     }
 
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index 6e18f93..d84ea71 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -1,21 +1,25 @@
 @charset "utf-8";
 @use 'sass:math';
-@import "../util";
-@import "hint";          // Hint specific menu list
-@import "containermenu"; // Container menu specific
-@import "searchbar";     // The search bar
-@import "vc";            // Virtual corpus builder
-@import "statistics";    // Statistics for VCs
-@import "datepicker";    // Datepicker
-@import "querylanguage"; // Query language
-@import "pipe";          // Pipe
-@import "state";         // State
-@import "panel";         // Panel
+@use "../util";
+@use "hint";          // Hint specific menu list
+@use "containermenu"; // Container menu specific
+@use "searchbar";     // The search bar
+@use "vc";            // Virtual corpus builder
+@use "statistics";    // Statistics for VCs
+@use "datepicker";    // Datepicker
+@use "querylanguage"; // Query language
+@use "pipe";          // Pipe
+@use "state";         // State
+@use "panel";         // Panel
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
 
 .navbar {
   width: 100%;
-  height: $standard-size-and-spacing;
-  background-color: $dark-green;
+  height: lengths.$standard-size-and-spacing;
+  background-color: colors.$dark-green;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -35,7 +39,7 @@
     align-items: center;
 
     h3.nav-link {
-      height: $standard-size-and-spacing;
+      height: lengths.$standard-size-and-spacing;
       font-size: 1rem;
       transition:  all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
@@ -44,13 +48,13 @@
       cursor: pointer;
 
       &:hover {
-        background-color: $middle-green;
+        background-color: colors.$middle-green;
       }
 
       a {
         display: block;
         padding: 1.5rem 1rem;
-        color: $nearly-white;
+        color: colors.$nearly-white;
         cursor: pointer;
       }
     }
@@ -59,7 +63,7 @@
   .dropdown {
     display: flex;
     align-items: center;
-    margin-right: $standard-size-and-spacing;
+    margin-right: lengths.$standard-size-and-spacing;
     position: relative;
 
     &:hover .dropdown-content,
@@ -69,17 +73,17 @@
 
     &:hover .dropdown-btn,
     &:focus-within .dropdown-btn {
-      color: $nearly-white;
-      background-color: $middle-green;
+      color: colors.$nearly-white;
+      background-color: colors.$middle-green;
     }
 
     &-btn {
       display: flex;
       align-items: center;
-      column-gap: $base-padding;
-      height: $standard-size-and-spacing;
+      column-gap: lengths.$base-padding;
+      height: lengths.$standard-size-and-spacing;
       padding: 1.25rem 1rem;
-      color: $nearly-white;
+      color: colors.$nearly-white;
       transition:  all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
@@ -87,14 +91,14 @@
       cursor: pointer;
 
       &.login::before {
-        @include icon-font;
-        content: $fa-login;
+        @include mixins.icon-font;
+        content: icons.$fa-login;
         font-size: 150%;
       }
       
       &.profile::before {
-        @include icon-font;
-        content: $fa-user;
+        @include mixins.icon-font;
+        content: icons.$fa-user;
         font-size: 150%;
       }
 
@@ -112,9 +116,9 @@
     &-content {
       display: none;
       width: fit-content;
-      margin-top: $standard-size-and-spacing;
+      margin-top: lengths.$standard-size-and-spacing;
       padding: 0;
-      background-color: $middle-green;
+      background-color: colors.$middle-green;
       position: absolute;
       top: 0;
       z-index: 999;
@@ -134,13 +138,13 @@
         align-items: center;
 
         legend {
-          padding-bottom: $base-padding;
-          color: $nearly-white;
+          padding-bottom: lengths.$base-padding;
+          color: colors.$nearly-white;
         }
         
         input[type=text],
         input[type=password] {
-          @include input-field;
+          @include mixins.input-field;
           margin-bottom: 8px;
           height: 2rem;
         }
@@ -149,8 +153,8 @@
           width: 100%;
           height: 2rem;
           margin-bottom: 1rem;
-          background-color: $dark-green;
-          color: $nearly-white;
+          background-color: colors.$dark-green;
+          color: colors.$nearly-white;
           font-size: 120%;
           border: none;
           border-color: unset;
@@ -164,12 +168,12 @@
           -webkit-transition: all .2s ease-in-out;
   
           &::after {
-            content: $fa-login;
+            content: icons.$fa-login;
           }
 
           &:hover {
             // color: $dark-orange;
-            background-color: $dark-orange;
+            background-color: colors.$dark-orange;
           }
         }
       }
@@ -177,13 +181,13 @@
       p {
         margin: 0;
         font-size: .7rem;
-        color: $nearly-white;
+        color: colors.$nearly-white;
 
         a {
-          color: $dark-orange;
+          color: colors.$dark-orange;
 
           &:hover {
-            color: $middle-orange;
+            color: colors.$middle-orange;
           }
         }
       }
@@ -195,7 +199,7 @@
       gap: 5px;
       padding: .75rem;
       font-size: 1rem;
-      color: $nearly-white;
+      color: colors.$nearly-white;
       transition:  all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
@@ -203,13 +207,13 @@
       cursor: pointer;
 
       &:hover {
-        color: $nearly-white;
-        background-color: $light-green;
+        color: colors.$nearly-white;
+        background-color: colors.$light-green;
       }
 
       &.logout::before {
-        @include icon-font;
-        content: $fa-logout;
+        @include mixins.icon-font;
+        content: icons.$fa-logout;
         font-size: 1rem;
       }
 
@@ -223,23 +227,23 @@
     display: none;
 
     &::after {
-      @include icon-font;
-      content: $fa-bars;
+      @include mixins.icon-font;
+      content: icons.$fa-bars;
     }
   }
 }
 
 header {
-  @include box-sizing-box();
+  @include mixins.box-sizing-box();
   position:         relative;
-  background-color: $light-green;
+  background-color: colors.$light-green;
   // padding:          $base-padding 0 0 $base-padding;
-  padding-top:      $standard-size-and-spacing;
+  padding-top:      lengths.$standard-size-and-spacing;
   font-size:        10pt;
-  color:            $nearly-white;
+  color:            colors.$nearly-white;
 
   &.shifted {
-    padding-left: $logo-left-distance;
+    padding-left: lengths.$logo-left-distance;
   }
 
   span.select {
@@ -259,15 +263,15 @@
     }
 
     &:hover {
-      color:        $dark-green;
-      border-color: $dark-green;
+      color:        colors.$dark-green;
+      border-color: colors.$dark-green;
     }
 
     &::after {
-      @include icon-font;
+      @include mixins.icon-font;
       pointer-events: none;
       text-align:     center;
-      content:        $fa-down;
+      content:        icons.$fa-down;
 
       padding: {
 	      left:  4pt;
@@ -276,9 +280,9 @@
     }
 
     &.active {
-      border-color: $dark-orange;
+      border-color: colors.$dark-orange;
       &::after {
-        content: $fa-up;
+        content: icons.$fa-up;
       }
     }
   }
@@ -290,18 +294,18 @@
     min-height:   2.7em;
 
     &#searchform {
-      margin: 0 $standard-size-and-spacing;
+      margin: 0 lengths.$standard-size-and-spacing;
     }
   }
 
   input {
-    @include input-field;
+    @include mixins.input-field;
   }
 
   .button {
-    color:        $nearly-white;
+    color:        colors.$nearly-white;
     line-height:  2em;
-    margin-right: $right-distance;
+    margin-right: lengths.$right-distance;
 
     &.right {
       float:   right;
@@ -319,29 +323,29 @@
       margin-right:     0;
       width:            20px;
       // width:            math.div($standard-margin,2);
-      background-color: $dark-green;
+      background-color: colors.$dark-green;
       text-align:       center;
       height:           100%;
       z-index:          20;
 
       > a:hover {
-	      color: $nearly-white
+	      color: colors.$nearly-white
       }
     }
 
     > a {
-      color:     $nearly-white;
+      color:     colors.$nearly-white;
       cursor:    pointer;
       position:  relative;
       font-size: 120%;
 
       > span {
-	      @include blind;
+	      @include mixins.blind;
       }
     }
 
     > a::after {
-      @include icon-font;
+      @include mixins.icon-font;
     }
 
     // > a.tutorial::after {
@@ -349,15 +353,15 @@
     // }
 
     > a.question::after {
-      content: $fa-question;
+      content: icons.$fa-question;
     }
 
     > a.login::after {
-      content: $fa-login;
+      content: icons.$fa-login;
     }
 
     > a.logout::after {
-      content: $fa-logout;
+      content: icons.$fa-logout;
     }
   }
 }
diff --git a/dev/scss/header/hint.scss b/dev/scss/header/hint.scss
index 6184dc1..8716258 100644
--- a/dev/scss/header/hint.scss
+++ b/dev/scss/header/hint.scss
@@ -1,5 +1,8 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/colors";
+@use "../base/lengths";
 
 /**
  * Rules for the Kalamar hint helper.
@@ -24,18 +27,18 @@
 // Alert bubble
 div.alert.hint {
   position:         absolute;
-  background-color: $alert-red;
-  color:            $nearly-white;
-  padding:          $item-padding;
+  background-color: colors.$alert-red;
+  color:            colors.$nearly-white;
+  padding:          lengths.$item-padding;
   margin-top:       8px;
-  box-shadow:       $choose-box-shadow;
+  box-shadow:       choose.$choose-box-shadow;
   width:            auto;
   min-width:        20em;
   max-width:        23em !important;
   transition:       opacity 0.2s ease 0s;
 
   border: {
-    radius:          $standard-border-radius;
+    radius:          lengths.$standard-border-radius;
     top-left-radius: 0;
   }
 
@@ -50,7 +53,7 @@
     border: {
       width: 0 8px 12px 0;
       style: solid;
-      color: $alert-red transparent;
+      color: colors.$alert-red transparent;
     }
   }
 }
@@ -83,12 +86,12 @@
     left:       0;
     text-align: left;
     padding:    0;
-    border-top: 5px solid $dark-orange;
+    border-top: 5px solid colors.$dark-orange;
     height:     10px;
     width:      1.2em;
 
     &:hover:not(.active) {
-      border-top: 10px solid $dark-orange;
+      border-top: 10px solid colors.$dark-orange;
     }
 
     &.active {
diff --git a/dev/scss/header/panel.scss b/dev/scss/header/panel.scss
index 459ab2b..e0fe6c6 100644
--- a/dev/scss/header/panel.scss
+++ b/dev/scss/header/panel.scss
@@ -1,11 +1,13 @@
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/lengths";
 
 // In addition to main/panel.scss
 
 div.panel.query div.view {
-  background-color: $dark-green;
-  border-left: $border-size solid $dark-green;
+  background-color: colors.$dark-green;
+  border-left: lengths.$border-size solid colors.$dark-green;
   iframe {
-    background-color: $nearly-white;
+    background-color: colors.$nearly-white;
   }
 }
diff --git a/dev/scss/header/querylanguage.scss b/dev/scss/header/querylanguage.scss
index 44978bb..2904883 100644
--- a/dev/scss/header/querylanguage.scss
+++ b/dev/scss/header/querylanguage.scss
@@ -1,4 +1,5 @@
-@import "../util";
+@use "../util";
+@use "../base/colors";
 
 /**
  * Temporary hack for language chooser
@@ -8,7 +9,7 @@
  */
 #ql-field {
   position:         relative;
-  background-color: $light-green;
+  background-color: colors.$light-green;
   cursor:           pointer;
   margin:           0;
   outline:          none;
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index 4ccb254..19fcaf8 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -1,5 +1,8 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
 
 
 /**
@@ -18,7 +21,7 @@
 
   &.loading {
     background: {
-      color: $light-orange;
+      color: colors.$light-orange;
       image: none;
     }
   }
@@ -39,13 +42,13 @@
     right: 0;
 
     &:not(.loading)::after {
-      content: $fa-search;
+      content: icons.$fa-search;
     }
   }
 }
 
 .query.panel {
-  padding-right: $button-width;
+  padding-right: lengths.$button-width;
 }
 
 // Specify result button group layout
diff --git a/dev/scss/header/statistics.scss b/dev/scss/header/statistics.scss
index 500fc70..0776b13 100644
--- a/dev/scss/header/statistics.scss
+++ b/dev/scss/header/statistics.scss
@@ -1,5 +1,8 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
 
 
 /**
@@ -9,7 +12,7 @@
 div.stattable {
   display: flex;
   flex-direction: row;
-  margin-right: $right-view-distance;
+  margin-right: lengths.$right-view-distance;
 }
 
 div.stattable {
@@ -17,10 +20,10 @@
     margin-bottom:4px;
 
     > div {
-      border-color: $dark-green;
+      border-color: colors.$dark-green;
 
       > dt {
-        background-color: $middle-green;
+        background-color: colors.$middle-green;
         width:            15em;
         margin:           0;
 
@@ -29,8 +32,8 @@
         }
       }   
       > dd {
-        background-color: $lightest-green;
-        color:            $dark-grey;
+        background-color: colors.$lightest-green;
+        color:            colors.$dark-grey;
       }
     }
   }
@@ -38,8 +41,8 @@
   &.stdisabled {
     dt,
     dd {
-      background-color: $grey-green;
-      color:            $dark-green;
+      background-color: colors.$grey-green;
+      color:            colors.$dark-green;
       text-shadow:      none;
     }
   }
@@ -53,7 +56,7 @@
 
 span.refresh::after{
   vertical-align: sub;
-  content :       $fa-redo;
+  content :       icons.$fa-redo;
 }
 
 // Default value 20% doesn't work with < 5 items,
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index 5ba1b51..a8acb09 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -1,5 +1,10 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
 
 /**
  * Virtual Collection Builder
@@ -17,7 +22,7 @@
 
     + .action {
       .minimize::after {
-        color: $dark-grey !important;
+        color: colors.$dark-grey !important;
       }
     }
   }
@@ -29,7 +34,7 @@
     padding:     4pt 2pt 4pt 0pt;
 
     border: {
-      radius: $standard-border-radius * 2;
+      radius: lengths.$standard-border-radius * 2;
       style:  solid;
       width:  0 $bracket-size;
     }
@@ -53,7 +58,7 @@
         width:       $left-padding;
         margin-left: -1 * ($left-padding + .5em);
         line-height: 1.5em;
-        border-top:  $border-size solid transparent;
+        border-top:  lengths.$border-size solid transparent;
       }
 
       > .docGroup::before {
@@ -140,7 +145,7 @@
         }
 
         &.fixed {
-          color: $light-green;
+          color: colors.$light-green;
         }
       }
     }
@@ -148,14 +153,14 @@
     // Unspecified value
     &.unspecified > span,
     span.unspecified {
-      @include choose-item;
+      @include choose.choose-item;
       padding:    0 4px;
-      box-shadow: $choose-box-shadow;
+      box-shadow: choose.$choose-box-shadow;
 
       border: {
         style:  solid;
-        width:  $border-size;
-        radius: $standard-border-radius;
+        width:  lengths.$border-size;
+        radius: lengths.$standard-border-radius;
       }
     }
 
@@ -169,12 +174,12 @@
   .rewritten .rewrite {
     display:     inline-block;
     margin-left: 4pt;
-    color:       $dark-orange;
+    color:       colors.$dark-orange;
     &::after {
-      @include icon-font;
+      @include mixins.icon-font;
       font-style:      normal;
       font-weight:     normal;
-      content:         $fa-rewrite;
+      content:         icons.$fa-rewrite;
       text-decoration: underline;
     }
 
@@ -206,8 +211,8 @@
   // referTo entries
   .menu li[data-type=ref]::before,
   span.key.ref::before {
-    @include icon-font;
-    content:       $fa-referto;
+    @include mixins.icon-font;
+    content:       icons.$fa-referto;
     padding-right: 4pt;
     font: {
       style:  normal;
@@ -224,8 +229,8 @@
     margin-top: -6pt;
 
     border: {
-      radius: $standard-border-radius;
-      width:  $border-size;
+      radius: lengths.$standard-border-radius;
+      width:  lengths.$border-size;
       style:  solid;
     }
 
@@ -235,7 +240,7 @@
     }
 
     > div {
-      @include choose-item;
+      @include choose.choose-item;
       display: inline-block;
       padding: 0 4pt;
       margin-left: 4pt;
@@ -246,9 +251,9 @@
       }
 
       border: {
-        width:  $border-size;
+        width:  lengths.$border-size;
         style:  solid;
-        radius: $standard-border-radius;
+        radius: lengths.$standard-border-radius;
       }
     }
 
@@ -258,7 +263,7 @@
       }
 
       > div {
-        @include choose-active;
+        @include choose.choose-active;
       }
     }
   }
@@ -271,7 +276,7 @@
 
   .docGroup,
   .doc {
-    color: $dark-grey;
+    color: colors.$dark-grey;
   }
   
   /**
@@ -285,7 +290,7 @@
   .doc > span:not(.fixed) {
     cursor: pointer;
     &:hover {
-      color: $dark-orange;
+      color: colors.$dark-orange;
     }
   }
 
@@ -293,7 +298,7 @@
   .doc.unspecified > span,
   span.unspecified {
     &:hover {
-	    @include choose-hover;
+	    @include choose.choose-hover;
     }
   }
   
@@ -307,22 +312,22 @@
     &[data-operation] {
       > .doc::before,
       > .docGroup::before {
-        color: $dark-orange;
+        color: colors.$dark-orange;
       }
     }
     &[data-operation=or] {
-      border-color: $dark-orange;
+      border-color: colors.$dark-orange;
     }
   }
 
   div.value {
-    @include choose-item;
-    box-shadow: $choose-box-shadow;
+    @include choose.choose-item;
+    box-shadow: choose.$choose-box-shadow;
 
     > div {
       cursor:  pointer;
       &:hover {
-        @include choose-hover;
+        @include choose.choose-hover;
       }
     }
   }
@@ -380,15 +385,15 @@
 
 #collection {
   line-height: 1em;
-  border-radius: $standard-border-radius;
+  border-radius: lengths.$standard-border-radius;
 }
 
 #vc-choose > span.rewritten::after {
-  @include icon-font;
-  color:           $dark-orange;
+  @include mixins.icon-font;
+  color:           colors.$dark-orange;
   padding:         0;
   padding-left:    4px;
-  content:         $fa-rewrite;
+  content:         icons.$fa-rewrite;
   text-decoration: underline;
   font-style:      normal;
   font-weight:     normal;
@@ -400,8 +405,8 @@
   > div.vc {
     display:          none;
     margin:           1.3em 0 .5em 0;
-    border:           2px solid $dark-green;
-    background-color: $nearly-white;
+    border:           2px solid colors.$dark-green;
+    background-color: colors.$nearly-white;
 
     &.active {
       display: block;
@@ -415,7 +420,7 @@
 
 div.panel.vcinfo {
   padding:          3pt 0pt 3pt 3pt;
-  background-color: $dark-green;
+  background-color: colors.$dark-green;
 
   div.button-group > span {
     box-shadow: none;
diff --git a/dev/scss/kalamar.scss b/dev/scss/kalamar.scss
index 48eb432..bdd2828 100644
--- a/dev/scss/kalamar.scss
+++ b/dev/scss/kalamar.scss
@@ -5,10 +5,10 @@
  */
 
 // Global variables and mixins
-@import "base/base";       // Base styles
-@import "main/main";       // Main frame styles
-@import "header/header";   // Top frame styles
-@import "footer/footer";   // Bottom frame styles
-@import "sidebar/sidebar"; // Left frame styles
-@import "no-js";           // Script disabled
-@import "media";           // Media queries
+@use "base/base";       // Base styles
+@use "main/main";       // Main frame styles
+@use "header/header";   // Top frame styles
+@use "footer/footer";   // Bottom frame styles
+@use "sidebar/sidebar"; // Left frame styles
+@use "no-js";           // Script disabled
+@use "media";           // Media queries
diff --git a/dev/scss/main/alertify.scss b/dev/scss/main/alertify.scss
index 3c329b7..93c7752 100644
--- a/dev/scss/main/alertify.scss
+++ b/dev/scss/main/alertify.scss
@@ -1,26 +1,28 @@
-@import "../util";
-@import "alertify/alertify-core";
-@import "alertify/alertify-default";
+@use "../util";
+@use "alertify/alertify-core";
+@use "alertify/alertify-default";
+@use "../base/colors";
+@use "../base/lengths";
 
 /**
  * Alertify styles.
  */
 
 article.alertify-log-warn {
-  background-color: $dark-orange;
+  background-color: colors.$dark-orange;
   code.src {
-    color: $darkest-orange;
+    color: colors.$darkest-orange;
   }
 }
 
 article.alertify-log code.src {
   display: block;
-  color: $dark-red;
+  color: colors.$dark-red;
   font-size: 70%;
 }
 
 .alertify-log-error {
-  background-color: $alert-red;
+  background-color: colors.$alert-red;
 }
 
 #notifications {
@@ -35,14 +37,14 @@
   display: block;
   padding: .5em;
   
-  border-radius: $standard-border-radius;
+  border-radius: lengths.$standard-border-radius;
   max-width: 30em;
-  background-color: $alert-red;
-  color: $nearly-white;
+  background-color: colors.$alert-red;
+  color: colors.$nearly-white;
   &.notify-success {
-    background-color: $ids-green-1
+    background-color: colors.$ids-green-1
   }
   &.notify-warn {
-    background-color: $ids-orange-2
+    background-color: colors.$ids-orange-2
   }
 }
\ No newline at end of file
diff --git a/dev/scss/main/announcements.scss b/dev/scss/main/announcements.scss
index 5db0e27..ea19431 100644
--- a/dev/scss/main/announcements.scss
+++ b/dev/scss/main/announcements.scss
@@ -1,13 +1,17 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
 
 section#announcements {
-  background-color: $ids-green-2;
+  background-color: colors.$ids-green-2;
   mix-blend-mode: soft-light;
   padding: 1em;
   padding-right: 2em;
-  border-radius: $standard-border-radius;
-  border-left: 5px solid $ids-green-1;
+  border-radius: lengths.$standard-border-radius;
+  border-left: 5px solid colors.$ids-green-1;
   height: 20rem;
   overflow-y: scroll;
   font-size: .8rem;
@@ -30,9 +34,9 @@
   }
   
   dd.maintenance > h4::after {
-    @include icon-font;
-    color: $ids-pink-1;
-    content: " " + $fa-warn;
+    @include mixins.icon-font;
+    color: colors.$ids-pink-1;
+    content: " " + icons.$fa-warn;
   }
   
   dd {
diff --git a/dev/scss/main/intro.scss b/dev/scss/main/intro.scss
index f667759..d7c650e 100644
--- a/dev/scss/main/intro.scss
+++ b/dev/scss/main/intro.scss
@@ -1,4 +1,6 @@
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/lengths";
 
 /**
  * Styles for the intro page
@@ -8,18 +10,18 @@
   &-container {
     margin-top: 3rem;
     display: flex;
-    gap: $standard-size-and-spacing;
+    gap: lengths.$standard-size-and-spacing;
   }
 
   // Visited links
   a:visited {
-    color: $darkest-orange
+    color: colors.$darkest-orange
   }
 
   div.announcement {
-    background-color: $light-orange;
-    padding:          $base-padding;
-    border:           5px dashed $dark-orange;
+    background-color: colors.$light-orange;
+    padding:          lengths.$base-padding;
+    border:           5px dashed colors.$dark-orange;
     border-radius:    1em;
     width:            90%;
     margin:           auto;
diff --git a/dev/scss/main/introjs-ids.scss b/dev/scss/main/introjs-ids.scss
index 89496b1..44b3ff6 100644
--- a/dev/scss/main/introjs-ids.scss
+++ b/dev/scss/main/introjs-ids.scss
@@ -1,4 +1,5 @@
-@import "../util";
+@use "../util";
+@use "../base/colors";
 
 /**
  * Styles overriding introJS styles
@@ -21,5 +22,5 @@
 
 
 .tgreeting {
-    color: $darkest-orange;
+    color: colors.$darkest-orange;
     }
diff --git a/dev/scss/main/koralquery.scss b/dev/scss/main/koralquery.scss
index 53dd64d..bcba160 100644
--- a/dev/scss/main/koralquery.scss
+++ b/dev/scss/main/koralquery.scss
@@ -1,5 +1,7 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/lengths";
 
 /**
  * Styles for the KoralQuery view.
@@ -10,13 +12,13 @@
   > div {
     // TODO:
     //   Mark this with result-view
-    background-color: $nearly-white;
+    background-color: colors.$nearly-white;
     overflow-x:       auto;
     font-size:        85%;
 
     margin: {
       top:    2pt;
-      right:  $right-view-distance;
+      right:  lengths.$right-view-distance;
       bottom: 2pt;
       left:  2pt;
     }
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index c3a52fa..f6313b0 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -1,5 +1,10 @@
+@use 'sass:color';
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
 
 /**
  * Styles for the KWIC view.
@@ -24,7 +29,7 @@
     list-style-type: none;
     margin:          0;
     padding:         0;
-    border:          $result-border-size solid $kwic-border;
+    border:          lengths.$result-border-size solid colors.$kwic-border;
     font-size:       $font-size;
 
     > li {
@@ -36,7 +41,7 @@
       
       border: {
         style: solid;
-        color: $dark-orange;
+        color: colors.$dark-orange;
         width: 0;
       }
 
@@ -47,7 +52,7 @@
 
       // Zebra style
       &:nth-of-type(even) div.match-main div.match-wrap {
-        background-color: $kwic-line-even;
+        background-color: colors.$kwic-line-even;
       }
 
       // References
@@ -70,7 +75,7 @@
         > div.match-wrap {
           width:            99999%;
 	        margin-left:      -49999.5%;
-	        background-color: $kwic-line-noneven;
+	        background-color: colors.$kwic-line-noneven;
 	        overflow-x:       hidden;
 	        overflow-y:       visible;
 	        white-space:      normal;
@@ -88,13 +93,13 @@
         overflow-x:       hidden;
         text-overflow:    ellipsis;
         white-space:      nowrap;
-        background-color: lighten($middle-grey, 5%);
-        color:            $nearly-white;
+        background-color: color.adjust(colors.$middle-grey, $lightness: 5%, $space: hsl);
+        color:            colors.$nearly-white;
         font-size:        75%;
         padding:          0 5pt;
 
         border: {
-          color: $dark-grey;
+          color: colors.$dark-grey;
           style: solid;
           width: 2px 1px 0 0;
         }
@@ -112,7 +117,7 @@
         }
 
         &.flip {
-          background-color: lighten($middle-grey, 17%);
+          background-color: color.adjust(colors.$middle-grey, $lightness: 17%, $space: hsl);
         }
       }
 
@@ -134,7 +139,7 @@
 div.snippet {
 	text-overflow: ellipsis;
 	text-indent:   0;
-	text-shadow:   $light-shadow;
+	text-shadow:   colors.$light-shadow;
   font-size:     0;
   white-space:   nowrap !important;
 
@@ -146,16 +151,16 @@
   > mark,
   > span.match {
     font-weight: bold;
-    color: $black;
+    color: colors.$black;
     text-shadow: none;
     padding-left: 4pt;
     padding-right: 2pt;
   }
 
   > span.match > span.cutted::after {
-    @include icon-font;
-    content: $fa-cut;
-    color:   $light-green;
+    @include mixins.icon-font;
+    content: icons.$fa-cut;
+    color:   colors.$light-green;
 
     padding: {
       left:  4pt;
@@ -177,8 +182,8 @@
     top:                0;
     left:               0;
     width:              11px;
-    background-color:   $dark-orange;
-    border-right:       1px solid $darkest-orange;
+    background-color:   colors.$dark-orange;
+    border-right:       1px solid colors.$darkest-orange;
   }
 }
 
@@ -191,7 +196,7 @@
 #search > ol > li:target {
   position:         relative;
   display:          block;
-  background-color: $dark-orange;
+  background-color: colors.$dark-orange;
   text-align:       left;
   border-width:     2px;
   white-space:      normal;
@@ -204,22 +209,22 @@
   }
 
   + li.active {
-    border-top:  $border-size solid $light-grey;
-    padding-top: 3 * $border-size;
+    border-top:  lengths.$border-size solid colors.$light-grey;
+    padding-top: 3 * lengths.$border-size;
 
     .button-group.button-view {
-      padding-top: 3 * $border-size;
+      padding-top: 3 * lengths.$border-size;
     }
   }
   
   .snippet {
     white-space:      normal !important;
     padding:          2pt 0 5pt 5pt;
-    background-color: $light-orange;
+    background-color: colors.$light-orange;
 
     margin: {
       top:    0;
-      right:  $right-view-distance;
+      right:  lengths.$right-view-distance;
       bottom: 0;
       left:   0;
     }
@@ -236,7 +241,7 @@
       font-size: 85%;
       text-shadow:none;
       font-weight: normal;
-      color: $dark-grey;
+      color: colors.$dark-grey;
       &::before, &::after {
         display: inline-block !important;
         border-width: 2px;
@@ -250,7 +255,7 @@
         border-top-left-radius: 5px;
         border-bottom-left-radius: 5px;
         border-right-width: 0;
-        background-color: $dark-orange  !important;
+        background-color: colors.$dark-orange  !important;
         content: attr(data-key) ':';
       }
 
@@ -261,7 +266,7 @@
         padding-left: 1pt;
         border-top-right-radius: 5px;
         border-bottom-right-radius: 5px;
-        background-color: $dark-orange  !important;
+        background-color: colors.$dark-orange  !important;
         content: attr(data-value);
       }
     }
@@ -295,7 +300,7 @@
     div.match-wrap {
       cursor:           default;
       min-height:       20pt;
-      background-color: $dark-orange;
+      background-color: colors.$dark-orange;
       width:            100%;
       margin-left:      0;
       overflow-x:       visible;
@@ -309,9 +314,9 @@
 
   p.ref {
     display:       block;
-    color:         $nearly-white;
+    color:         colors.$nearly-white;
     padding:       3pt 10pt 3pt 3pt;
-    padding-right: $right-view-distance;
+    padding-right: lengths.$right-view-distance;
     margin:        0pt;
     width:         100%;
     bottom:        0;
@@ -320,7 +325,7 @@
     > span.sigle {
       font-size:      75%;
       vertical-align: top;
-      color:          $light-orange;
+      color:          colors.$light-orange;
       float:          right;
     }
 
@@ -441,7 +446,7 @@
   }
 }
 
-.class-1 { border-color: $kwic-highlight-1; }
-.class-2 { border-color: $kwic-highlight-2; }
-.class-3 { border-color: $kwic-highlight-3; }
-.class-4 { border-color: $kwic-highlight-4; }
+.class-1 { border-color: colors.$kwic-highlight-1; }
+.class-2 { border-color: colors.$kwic-highlight-2; }
+.class-3 { border-color: colors.$kwic-highlight-3; }
+.class-4 { border-color: colors.$kwic-highlight-4; }
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
index e27f1d6..e35d7c7 100644
--- a/dev/scss/main/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -1,5 +1,8 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/mixins";
+@use "../base/paths";
 
 /**
  * Rules for logos.
@@ -29,7 +32,7 @@
     }
 
     > span {
-      @include blind;
+      @include mixins.blind;
     }
 
     > div.logoaddon {
@@ -43,9 +46,9 @@
       top: 2.1rem;
       transform: rotate(-5deg);
       // text-align:right;
-      color: $nearly-white;
+      color: colors.$nearly-white;
       // padding: 3pt;
-      text-shadow: 1pt 1pt 0 $light-green, -1pt -1pt 0 $light-green, -1pt 1pt 0 $light-green, 1pt -1pt 0 $light-green;
+      text-shadow: 1pt 1pt 0 colors.$light-green, -1pt -1pt 0 colors.$light-green, -1pt 1pt 0 colors.$light-green, 1pt -1pt 0 colors.$light-green;
 
       // Values from new logo:
       // font-size: 45%;
@@ -58,7 +61,7 @@
 }
 
 aside.active + header .logo div.logoaddon {
-  text-shadow: 1pt 1pt 0 $dark-green, -1pt -1pt 0 $dark-green, -1pt 1pt 0 $dark-green, 1pt -1pt 0 $dark-green;
+  text-shadow: 1pt 1pt 0 colors.$dark-green, -1pt -1pt 0 colors.$dark-green, -1pt 1pt 0 colors.$dark-green, 1pt -1pt 0 colors.$dark-green;
 }
 
 /**
@@ -75,7 +78,7 @@
   z-index:     105;
   background: {
     size:  78% !important;
-    image: url('#{$img-path}/korap-logo.svg');
+    image: url('#{paths.$img-path}/korap-logo.svg');
   }
   transform: translateY(-50%);
   -o-transform: translateY(-50%);
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 2e67113..21e0596 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -1,29 +1,30 @@
 @use 'sass:math';
-@import 'highlight'; // JSON highlighting
-@import 'kwic'; // Kwic view information
-@import 'logos'; // Logo images
-@import 'matchinfo'; // Match table
-@import 'pagination'; // Pagination
-@import 'query'; // View query
-@import 'resultinfo'; // Information on results
-@import 'tutorial'; // Embedded and non-embedded tutorial
-@import 'koralquery'; // KoralQuery
-@import 'alertify'; // Styling alerts
-@import 'intro'; // Intro page
-@import 'panel'; // Base panel system
-@import 'introjs'; // Guided Tour
-@import 'introjs-ids'; // Guided Tour: IDS specific
-@import 'oauth'; // OAuth Management styles
-@import 'announcements'; // Styling for announcements
-@import 'news'; // View for optional news
-@import 'plugin'; // Rules for embedded plugins
-@import 'marketplace'; // Plugin Marketplace styles
+@use 'highlight'; // JSON highlighting
+@use 'kwic'; // Kwic view information
+@use 'logos'; // Logo images
+@use 'matchinfo'; // Match table
+@use 'pagination'; // Pagination
+@use 'query'; // View query
+@use 'resultinfo'; // Information on results
+@use 'tutorial'; // Embedded and non-embedded tutorial
+@use 'koralquery'; // KoralQuery
+@use 'alertify'; // Styling alerts
+@use 'intro'; // Intro page
+@use 'panel'; // Base panel system
+@use 'introjs'; // Guided Tour
+@use 'introjs-ids'; // Guided Tour: IDS specific
+@use 'oauth'; // OAuth Management styles
+@use 'announcements'; // Styling for announcements
+@use 'news'; // View for optional news
+@use 'plugin'; // Rules for embedded plugins
+@use 'marketplace'; // Plugin Marketplace styles
 // @import "tagger";   // Tagger
 
-@import '../util';
+@use '../util';
+@use "../base/lengths";
 
 main {
-  padding: 0 $standard-size-and-spacing;
+  padding: 0 lengths.$standard-size-and-spacing;
 
   // margin: {
   //   left:  $standard-margin;
@@ -31,7 +32,7 @@
   // }
 
   &.shifted {
-    padding-left: calc($standard-size-and-spacing + $logo-left-distance);
+    padding-left: calc(lengths.$standard-size-and-spacing + lengths.$logo-left-distance);
   }
 
   &.embedded {
diff --git a/dev/scss/main/marketplace.scss b/dev/scss/main/marketplace.scss
index 6f8a8aa..40bd291 100644
--- a/dev/scss/main/marketplace.scss
+++ b/dev/scss/main/marketplace.scss
@@ -1,4 +1,5 @@
-@import "../base/base";
+@use "../base/base";
+@use "../base/lengths";
 
 /*
 * Styles for marketplace
@@ -39,7 +40,7 @@
       margin-top: 0;
       width:        20%;
       min-width:    20em;
-      padding:      $base-padding;
+      padding:      lengths.$base-padding;
       cursor:           pointer;
       border-width:     thin;
       text-align:       center;
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index a0f98c4..3df52b7 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -1,8 +1,10 @@
 @charset "utf-8";
-@import "../util";
-@import "view/matchtable";
-@import "view/matchtree";
-@import "view/metatable";
+@use "../util";
+@use "view/matchtable";
+@use "view/matchtree";
+@use "view/metatable";
+@use "../base/colors";
+@use "../base/lengths";
 
 
 /**
@@ -14,7 +16,7 @@
 div.matchinfo {
   position:    relative;
   width:       100%;
-  padding-top: $border-size;
+  padding-top: lengths.$border-size;
   height:      auto;
   font-size:   10pt;
   text-align:  left;
@@ -24,7 +26,7 @@
   }
 
   .view + .view {
-    margin-top: 4 * $border-size !important;
+    margin-top: 4 * lengths.$border-size !important;
   }
 }
 
@@ -33,7 +35,7 @@
 div.matchtable,
 div.matchtree {
   position:         relative;
-  background-color: $dark-orange;
+  background-color: colors.$dark-orange;
 }
 
 div.button-group.button-panel.button-matchinfo {
diff --git a/dev/scss/main/news.scss b/dev/scss/main/news.scss
index c1c0911..619ccfa 100644
--- a/dev/scss/main/news.scss
+++ b/dev/scss/main/news.scss
@@ -1,5 +1,8 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/mixins";
 
 section#news {
   margin: 2rem 0;
@@ -21,9 +24,9 @@
   }
   
   dd.maintenance > h4::after {
-    @include icon-font;
-    color: $ids-pink-1;
-    content: " " + $fa-warn;
+    @include mixins.icon-font;
+    color: colors.$ids-pink-1;
+    content: " " + icons.$fa-warn;
   }
   
   dd {
diff --git a/dev/scss/main/oauth.scss b/dev/scss/main/oauth.scss
index e5702e6..590cf78 100644
--- a/dev/scss/main/oauth.scss
+++ b/dev/scss/main/oauth.scss
@@ -1,4 +1,8 @@
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
 
 /**
  * Styles for OAuth management form.
@@ -33,17 +37,17 @@
   font-weight: bold;
 
   &::before {
-    @include icon-font;
+    @include mixins.icon-font;
     display:   inline-block;
     width:     1.5em;
-    content:   $fa-client;
-    color:     $ids-blue-1;
+    content:   icons.$fa-client;
+    color:     colors.$ids-blue-1;
     font-size: 100%;
   }
 }
 
 .client-type-confidential::after {
-  @include icon-font;
+  @include mixins.icon-font;
   margin-left: .3em;
   display:   inline-block;
   width:     1.5em;
@@ -53,16 +57,16 @@
 }
 
 .client-type-confidential::after {
-  content:   $fa-confidential;
-  color:     $ids-blue-1;
+  content:   icons.$fa-confidential;
+  color:     colors.$ids-blue-1;
 }
 
 #client_source {
   white-space: pre;
-  border-radius: $standard-border-radius;
-  border-color:     $ids-grey-2;
+  border-radius: lengths.$standard-border-radius;
+  border-color:     colors.$ids-grey-2;
   border-style:     solid;
-  background-color: $light-orange;
+  background-color: colors.$light-orange;
 }
 
 li.token {
@@ -74,13 +78,13 @@
     font-weight: bold;
 
   &::before {
-    @include icon-font;
+    @include mixins.icon-font;
     font-feature-settings: "ss01" on;
     margin-left: -1.5em;
     display:   inline-block;
     width:     1.5em;
-    content:   $fa-token;
-    color:     $ids-blue-1 !important;
+    content:   icons.$fa-token;
+    color:     colors.$ids-blue-1 !important;
     font-size: 100%;
     font-weight: 900;
   }
diff --git a/dev/scss/main/pagination.scss b/dev/scss/main/pagination.scss
index f261fc7..07015c8 100644
--- a/dev/scss/main/pagination.scss
+++ b/dev/scss/main/pagination.scss
@@ -1,6 +1,10 @@
 @charset "utf-8";
 @use 'sass:math';
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
 
 /**
  * The pagination view
@@ -23,8 +27,8 @@
    */
     position:    fixed;
     font-size:   0;
-    right:       math.div($standard-margin,4);
-    bottom:      math.div($standard-margin,2);
+    right:       math.div(lengths.$standard-margin,4);
+    bottom:      math.div(lengths.$standard-margin,2);
     z-index:     35;
     padding:     0;
     height:      auto;
@@ -36,40 +40,40 @@
         vertical-align: bottom;
 
         &:not(:link):not([rel=self]) {
-            color: $choose-blind-color;
+            color: choose.$choose-blind-color;
         }
 
         &.ellipsis, &[rel=prev], &[rel=next] {
             > span {
-	        @include blind;
+	        @include mixins.blind;
             }
         }
     
         &.ellipsis::after {
-	    @include icon-font;
-	    content:     $fa-elipsis;
+	    @include mixins.icon-font;
+	    content:     icons.$fa-elipsis;
 	    line-height: 1em;
         }
 
         &[rel=self] {
-            @include choose-active;
+            @include choose.choose-active;
             border: {
-	        left-width:  $border-size;
-	        right-width: $border-size;
+	        left-width:  lengths.$border-size;
+	        right-width: lengths.$border-size;
 	        left-style:  solid;
 	        right-style: solid;
             }
         }
 
         &[rel=prev]::after {
-            @include icon-font;
-	    content:     $fa-previous;
+            @include mixins.icon-font;
+	    content:     icons.$fa-previous;
 	    line-height: 1em;
         }
 
         &[rel=next]::after {
-            @include icon-font;
-	    content:     $fa-next;
+            @include mixins.icon-font;
+	    content:     icons.$fa-next;
 	    line-height: 1em;
         }
     }
diff --git a/dev/scss/main/panel.scss b/dev/scss/main/panel.scss
index 568ba5b..94893b9 100644
--- a/dev/scss/main/panel.scss
+++ b/dev/scss/main/panel.scss
@@ -1,4 +1,5 @@
-@import "../util";
+@use "../util";
+@use "../base/lengths";
 
 /**
  * Base styles for all panels and views,
@@ -13,7 +14,7 @@
 
 div.view {
   position:    relative;
-  padding-top: $border-size;
+  padding-top: lengths.$border-size;
   display:     block;
   width:       100%;
 }
diff --git a/dev/scss/main/plugin.scss b/dev/scss/main/plugin.scss
index 5b289a6..e0ac886 100644
--- a/dev/scss/main/plugin.scss
+++ b/dev/scss/main/plugin.scss
@@ -1,10 +1,13 @@
+@use "../base/colors";
+@use "../base/lengths";
+
 /**
  * Base rules for all plugin related styles,
  * like widgets.
  */
 
 div.view.widget {
-  padding-right: $right-view-distance;
+  padding-right: lengths.$right-view-distance;
 
   > iframe {
     margin:     0;
@@ -16,5 +19,5 @@
 }
 
 div.panel.result > div > div.widget > iframe {
-  background-color: $nearly-white;
+  background-color: colors.$nearly-white;
 }
\ No newline at end of file
diff --git a/dev/scss/main/query.scss b/dev/scss/main/query.scss
index 7f99696..407cf10 100644
--- a/dev/scss/main/query.scss
+++ b/dev/scss/main/query.scss
@@ -1,30 +1,33 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/colors";
+@use "../base/lengths";
 
 
 pre.query {
   overflow-x: hidden; 
   padding: .5em;
-  @include choose-item;
+  @include choose.choose-item;
   position:relative;
   border: {
     width: 2px;
     style: solid;
-    radius: $standard-border-radius;
+    radius: lengths.$standard-border-radius;
   }
-  box-shadow: $choose-box-shadow;
+  box-shadow: choose.$choose-box-shadow;
   &:not(.unsupported) {
     cursor: pointer;
     &:hover {
-      @include choose-hover;
+      @include choose.choose-hover;
     }
     &:active {
-      @include choose-active;
+      @include choose.choose-active;
     }
   }
   &.unsupported span {
     vertical-align: super;
-    color: $dark-blue;
+    color: colors.$dark-blue;
     font-size: 90%;
     font-weight: bold;
     cursor: help;
diff --git a/dev/scss/main/resultinfo.scss b/dev/scss/main/resultinfo.scss
index 0255161..2fbae69 100644
--- a/dev/scss/main/resultinfo.scss
+++ b/dev/scss/main/resultinfo.scss
@@ -1,5 +1,8 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
 
 /**
  * Rules applicable for the result panel
@@ -54,8 +57,8 @@
 
 
 div.result.panel .view {
-  border:           1px solid $kwic-border;
-  background-color: $dark-orange;
+  border:           1px solid colors.$kwic-border;
+  background-color: colors.$dark-orange;
 }
 
 
@@ -68,21 +71,21 @@
 
   > span {
     line-height:  1.5em;
-    border-width: $result-border-size 0;
+    border-width: lengths.$result-border-size 0;
 
     &:first-child {
-      border-left-width: $result-border-size;
+      border-left-width: lengths.$result-border-size;
     }
 
     &:last-child {
-      border-right-width: $result-border-size;
+      border-right-width: lengths.$result-border-size;
     }
   }
 }
 
 
 #total-results {
-  color:       $light-green;
+  color:       colors.$light-green;
   font-weight: bold;
 }
 
@@ -102,15 +105,15 @@
   // TODO:
   //   Add icon via data-icon
   &.align.left::after {
-    content: $fa-left-align;
+    content: icons.$fa-left-align;
   }
   &.align.right::after {
-    content: $fa-right-align;
+    content: icons.$fa-right-align;
   }
   &.align.center::after {
-    content: $fa-center-align;
+    content: icons.$fa-center-align;
   }
   &.show-kq::after {
-    content: $fa-code;
+    content: icons.$fa-code;
   }
 }
diff --git a/dev/scss/main/tutorial.scss b/dev/scss/main/tutorial.scss
index d6f8459..44654dd 100644
--- a/dev/scss/main/tutorial.scss
+++ b/dev/scss/main/tutorial.scss
@@ -1,5 +1,9 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/colors";
+@use "../base/lengths";
+@use "../base/paths";
 
 /**
  * Rules for the embedded documentation.
@@ -12,19 +16,19 @@
   bottom:           5%;
   left:             2%;
   right:            2%;
-  padding-right:    $right-view-distance;
-  background-color: $nearly-white;
-  box-shadow:       $choose-box-shadow;
+  padding-right:    lengths.$right-view-distance;
+  background-color: colors.$nearly-white;
+  box-shadow:       choose.$choose-box-shadow;
 
   border: {
-    width:  2 * $border-size;
-    color:  $dark-grey;
+    width:  2 * lengths.$border-size;
+    color:  colors.$dark-grey;
     style:  solid;
-    radius: $standard-border-radius;
+    radius: lengths.$standard-border-radius;
   }
 
   .button-group.button-view {
-    background-color: $middle-grey;
+    background-color: colors.$middle-grey;
     display:          block;
     height:           100%;
   }
@@ -36,7 +40,7 @@
     // Hack for a Firefox bug
     min-height: 100.1%;
     background: {
-      image:    url('#{$img-path}/korap-bg.svg');
+      image:    url('#{paths.$img-path}/korap-bg.svg');
       repeat:   no-repeat;
       position: center center;
       size:     15%;
@@ -55,11 +59,11 @@
 }
 
 body.embedded {
-  background-color: $nearly-white;
+  background-color: colors.$nearly-white;
   aside {
-    @include choose-item;
+    @include choose.choose-item;
     padding-top: 0;
-    background-color: $middle-grey;
+    background-color: colors.$middle-grey;
 
     > div {
       position:         relative;
diff --git a/dev/scss/main/view/matchtable.scss b/dev/scss/main/view/matchtable.scss
index 05ec880..ca2d3ed 100644
--- a/dev/scss/main/view/matchtable.scss
+++ b/dev/scss/main/view/matchtable.scss
@@ -1,5 +1,9 @@
 @use 'sass:math';
-@import "../../util";
+@use "../../util";
+@use "../../base/colors";
+@use "../../base/icons";
+@use "../../base/lengths";
+@use "../../base/mixins";
 
 /**
  * Table view
@@ -11,8 +15,8 @@
 
   > div {
     z-index:      20;
-    margin-left:  $left-distance - math.div($border-size,2);
-    margin-right: $right-view-distance;
+    margin-left:  lengths.$left-distance - math.div(lengths.$border-size,2);
+    margin-right: lengths.$right-view-distance;
     padding:      0;
     overflow-x:   auto;
     overflow-y:   visible;
@@ -26,7 +30,7 @@
   }
 
   th {
-    color: $nearly-white;
+    color: colors.$nearly-white;
   }
 
   // Use matchinfo cells for query creation
@@ -51,9 +55,9 @@
     &.matchkeyvalues {
       padding: 0;
       > div {
-        @include cell-info;
+        @include mixins.cell-info;
         > span {
-          color:         $darkest-orange;
+          color:         colors.$darkest-orange;
           text-align:    right;
           padding-right: .5em;
           &::after {
@@ -66,7 +70,7 @@
 
   td, div {
     &.notinindex {
-      background-color: $ids-grey-2 !important;
+      background-color: colors.$ids-grey-2 !important;
       cursor: default;
     }
   }
@@ -78,8 +82,8 @@
     td.chosen,
     th.chosen,
     div.chosen {
-      background-color: $light-green !important;
-      color:            $nearly-white;
+      background-color: colors.$light-green !important;
+      color:            colors.$nearly-white;
     }
 
     /**
@@ -87,7 +91,7 @@
      */
     > th:nth-of-type(1),
     > th:nth-of-type(2) {
-      @include matchinfo-head;
+      @include mixins.matchinfo-head;
       position:       absolute;
       z-index:        80;
       vertical-align: middle;
@@ -95,29 +99,29 @@
     }
 
     > th:nth-of-type(2) {
-      left: math.div($left-width,2) + $border-size;
+      left: math.div(lengths.$left-width,2) + lengths.$border-size;
     }
 
     // Includes header line as well
     > * {
-      @include cell-info;
-      border: math.div($border-size,2) solid $dark-orange;
+      @include mixins.cell-info;
+      border: math.div(lengths.$border-size,2) solid colors.$dark-orange;
     }
 
     > td {
-      background-color: $middle-orange;
+      background-color: colors.$middle-orange;
       white-space:      nowrap;
       vertical-align:   top;
       text-align:       center;
       &.mark {
-        background-color: $light-orange;
+        background-color: colors.$light-orange;
       }
     }
 
     &:nth-child(even) > td {
-      background-color: $light-orange;
+      background-color: colors.$light-orange;
       &.mark {
-        background-color: $middle-orange;
+        background-color: colors.$middle-orange;
       }
     }
   }
@@ -127,7 +131,7 @@
     text-align:       center;
 
     &:not(.no-anno) {
-      background-color: $darker-orange;
+      background-color: colors.$darker-orange;
     }
 
     &:nth-of-type(1),
@@ -136,16 +140,16 @@
     }
 
     &.mark {
-      background-color: $darkest-orange;
+      background-color: colors.$darkest-orange;
     }
     
     &.cutted {
-      background-color: $light-orange;
+      background-color: colors.$light-orange;
 
       &::after {
-        @include icon-font;
-        content: $fa-cut;
-        color:   $light-green;
+        @include mixins.icon-font;
+        content: icons.$fa-cut;
+        color:   colors.$light-green;
         padding: {
           left:  4pt;
           right: 4pt;
diff --git a/dev/scss/main/view/matchtree.scss b/dev/scss/main/view/matchtree.scss
index 4f5edbc..e62bb5a 100644
--- a/dev/scss/main/view/matchtree.scss
+++ b/dev/scss/main/view/matchtree.scss
@@ -1,5 +1,8 @@
-@import "../../util";
-@import "tree";
+@use "../../util";
+@use "tree";
+@use "../../base/colors";
+@use "../../base/lengths";
+@use "../../base/mixins";
 
 /**
  * Matchtree view
@@ -15,19 +18,19 @@
   h6 {
     display:   inline;
     font-size: inherit;
-    color:     $nearly-white;
+    color:     colors.$nearly-white;
     margin:    0;
     padding:   0 !important;
     float:     left;
 
     > span {
-      @include matchinfo-head;
-      @include cell-info;
+      @include mixins.matchinfo-head;
+      @include mixins.cell-info;
       display: inline-block !important;
       margin: 0;
 
       &:nth-of-type(2) {
-	      margin-left: $border-size;
+	      margin-left: lengths.$border-size;
       }
     }
   }
@@ -36,10 +39,10 @@
     position:         unset;
     z-index:          4;
     overflow-x:       auto;
-    margin:           $border-size;
-    margin-left:      $left-distance;
-    margin-right:     $right-view-distance;
-    background-color: $light-orange;
+    margin:           lengths.$border-size;
+    margin-left:      lengths.$left-distance;
+    margin-right:     lengths.$right-view-distance;
+    background-color: colors.$light-orange;
   }
 
   svg {
diff --git a/dev/scss/main/view/metatable.scss b/dev/scss/main/view/metatable.scss
index 7467c11..55f0ea0 100644
--- a/dev/scss/main/view/metatable.scss
+++ b/dev/scss/main/view/metatable.scss
@@ -1,26 +1,28 @@
 @charset "utf-8";
-@import "../../util";
+@use "../../util";
+@use "../../base/colors";
+@use "../../base/lengths";
 
 // Metatable
 div.metatable > dl {
-  margin-right: $right-view-distance;
-  margin-top:   $border-size;
+  margin-right: lengths.$right-view-distance;
+  margin-top:   lengths.$border-size;
 
   > div {
-    border-color: $dark-orange;
+    border-color: colors.$dark-orange;
 
     > * {
       padding: .2em;
     }
 
     > dt {
-      background: $darker-orange;
-      color:      $nearly-white;
+      background: colors.$darker-orange;
+      color:      colors.$nearly-white;
       width:      12.5em;
     }
 
     > dd {
-      background-color: $light-orange;
+      background-color: colors.$light-orange;
       cursor: pointer;
 
       &.metakeyvalues {
@@ -30,12 +32,12 @@
           text-indent: -5pt;
           margin-left: 6pt;
           padding-left: 4pt;
-          border-radius: $standard-border-radius;
+          border-radius: lengths.$standard-border-radius;
           margin-bottom: 2pt;
 
           &::before {
             content: "\2022\00A0";
-            color:   $dark-orange;
+            color:   colors.$dark-orange;
             width: 5pt;
             display: inline-block;
           }
@@ -45,13 +47,13 @@
       // equal to td.chosen
       &.chosen,
       > div.chosen {
-        background-color: $light-green !important;
-        color:            $nearly-white;
+        background-color: colors.$light-green !important;
+        color:            colors.$nearly-white;
       }
 
       &[data-type="type:store"],
       &[data-type="type:attachement"] {
-        background-color: $middle-orange;
+        background-color: colors.$middle-orange;
         cursor:           default;
 
         a {
diff --git a/dev/scss/main/view/tree.scss b/dev/scss/main/view/tree.scss
index c7e064b..7242116 100644
--- a/dev/scss/main/view/tree.scss
+++ b/dev/scss/main/view/tree.scss
@@ -1,65 +1,66 @@
 @charset "utf-8";
-@import "../../util";
+@use "../../util";
+@use "../../base/colors";
 
 /**
  * SVG tree
  */
 path.edge {
-  stroke:       $darker-orange;
+  stroke:       colors.$darker-orange;
   stroke-width: 2px;
   fill:         none;
 }
 
 g.arc.infocus > path.edge {
-  stroke: $dark-green;
+  stroke: colors.$dark-green;
 }
 
 marker#arr {
   overflow: visible;
   path {
-    stroke:       $darkest-orange;
-    fill:         $darkest-orange;
+    stroke:       colors.$darkest-orange;
+    fill:         colors.$darkest-orange;
     fill-opacity: 1;
     stroke-width: 2; 
   }
 }
 
 path.anchor {
-  stroke:         $darkest-orange;
+  stroke:         colors.$darkest-orange;
   stroke-width:   3;
   stroke-linecap: round;
   z-index:        20;
 }
 
 g.root rect.empty {
-  stroke:       $darker-orange;
-  fill:         $darker-orange;
+  stroke:       colors.$darker-orange;
+  fill:         colors.$darker-orange;
   stroke-width: 2px;
 }
 
 g.middle,
 g.label {
   rect {
-    stroke:       $darker-orange;
+    stroke:       colors.$darker-orange;
     stroke-width: 2px;
-    fill:         $middle-orange;
+    fill:         colors.$middle-orange;
   }
 }
 
 g.label.infocus rect {
-  stroke: $dark-green;
-  fill:   $lightest-green;
+  stroke: colors.$dark-green;
+  fill:   colors.$lightest-green;
 }
 
 g.middle.mark {
   rect {
-    fill: $darker-orange;
+    fill: colors.$darker-orange;
   }
   > text {
-    fill: $light-orange;
+    fill: colors.$light-orange;
 
     > tspan {
-      stroke: $light-orange;
+      stroke: colors.$light-orange;
     }
   }
 }
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index 5abf92d..ba6de14 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -1,12 +1,15 @@
 @charset "utf-8";
-@import "util";
+@use "util";
+@use "base/colors";
+@use "base/lengths";
+@use "base/mixins";
 
 /**
  * Media rules for different screen sizes.
  * This will override some basic rules.
  */
 
-$standard-margin: 4px;
+lengths.$standard-margin: 4px;
 
 // (orientation: portrait),
 @media all and (max-width: 42.5em) {
@@ -49,10 +52,10 @@
     .burger-icon {
       position: relative;
       display: none;
-      width: $standard-size-and-spacing;
-      height: $standard-size-and-spacing;
+      width: lengths.$standard-size-and-spacing;
+      height: lengths.$standard-size-and-spacing;
       font-size: 1.8rem;
-      color: $nearly-white;
+      color: colors.$nearly-white;
 
       &.show {
         display: block;
@@ -74,7 +77,7 @@
       position: absolute;
       top: 0;
       right: 0;
-      background-color: $middle-green;
+      background-color: colors.$middle-green;
     }
 
     &.show * {
@@ -82,13 +85,13 @@
     }
 
     &-group {
-      margin-top: $standard-size-and-spacing;
+      margin-top: lengths.$standard-size-and-spacing;
       width: 100%;
       display: block;
       position: absolute;
       top: 0;
       left: 0;
-      background-color: $middle-green;
+      background-color: colors.$middle-green;
 
       fieldset.fieldset-login {
         display: block !important;
@@ -102,17 +105,17 @@
           
           input[type=text],
           input[type=password] {
-            @include input-field;
+            @include mixins.input-field;
             margin-right: 0 !important;
           }
     
           button.btn-login {
             width: 100% !important;
             align-self: center;
-            background-color: $dark-green !important;
+            background-color: colors.$dark-green !important;
 
             &:hover {
-              background-color: $middle-green !important;
+              background-color: colors.$middle-green !important;
               color: unset !important;
             }
           }
@@ -237,8 +240,8 @@
 
   main {
     padding: 1rem;
-    margin-left: $standard-margin;
-    margin-right: $standard-margin;
+    margin-left: lengths.$standard-margin;
+    margin-right: lengths.$standard-margin;
 
     &.shifted {
       padding-left: 0;
@@ -246,7 +249,7 @@
   }
 
   header .button {
-    margin-right: $standard-margin;
+    margin-right: lengths.$standard-margin;
     &.top {
       height: auto;
     }
@@ -317,7 +320,7 @@
   
   aside {
     &:not(:focus):not(.active) {
-      margin-left: -1 * $logo-left-distance;
+      margin-left: -1 * lengths.$logo-left-distance;
       &::after {
 	      font-size: 12pt;
 	      height: 11pt;
@@ -355,7 +358,7 @@
     }
 
     .nav.nav-doc:first-child {
-      margin-top: $standard-size-and-spacing !important;
+      margin-top: lengths.$standard-size-and-spacing !important;
     }
   }
 
diff --git a/dev/scss/no-js.scss b/dev/scss/no-js.scss
index 985ac48..4abedf9 100644
--- a/dev/scss/no-js.scss
+++ b/dev/scss/no-js.scss
@@ -1,4 +1,6 @@
-@import "util";
+@use "util";
+@use "base/colors";
+@use "base/lengths";
 
 /**
  * Optimization for no-js behaviour
@@ -46,16 +48,16 @@
   }
 
   main div.intro {
-    margin-left: $base-padding !important;
+    margin-left: lengths.$base-padding !important;
   }
 }
 
 #activate {
   text-align:       right;
-  background-color: $dark-orange;
+  background-color: colors.$dark-orange;
   margin-top:       0;
-  padding:          $base-padding;
-  padding-right:    $standard-margin;
-  color:            $nearly-white;
+  padding:          lengths.$base-padding;
+  padding-right:    lengths.$standard-margin;
+  color:            colors.$nearly-white;
   font-size:        80%;
 }
\ No newline at end of file
diff --git a/dev/scss/plugin.scss b/dev/scss/plugin.scss
index 2eeebe4..2352729 100644
--- a/dev/scss/plugin.scss
+++ b/dev/scss/plugin.scss
@@ -1,18 +1,20 @@
-@import "base/base";
+@use "base/base";
+@use "base/colors";
+@use "base/lengths";
 
 body {
   margin: 0;
   padding: 0;
   h1 {
     font-size: 110%;
-    background-color: $ids-orange-1;
+    background-color: colors.$ids-orange-1;
     color: white;
     margin-top: 0;
-    padding: $base-padding;
+    padding: lengths.$base-padding;
   }
   section {
-    padding-left: $base-padding;
-    padding-bottom: $base-padding;
+    padding-left: lengths.$base-padding;
+    padding-bottom: lengths.$base-padding;
     &::before{
       content:'';
     }
diff --git a/dev/scss/sidebar/sidebar.scss b/dev/scss/sidebar/sidebar.scss
index de7465c..110c6ee 100644
--- a/dev/scss/sidebar/sidebar.scss
+++ b/dev/scss/sidebar/sidebar.scss
@@ -1,11 +1,16 @@
 @charset "utf-8";
 @use "sass:math";
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
 
 aside {
-  background-color: $dark-green;
-  color: $nearly-white;
-  width: $logo-left-distance;
+  background-color: colors.$dark-green;
+  color: colors.$nearly-white;
+  width: lengths.$logo-left-distance;
   position: fixed;
   display: block;
   transition: all 0.3s ease-in-out;
@@ -32,7 +37,7 @@
   }
 
   &::after {
-    @include icon-font;
+    @include mixins.icon-font;
     position: absolute;
     display: block;
     opacity: 0;
@@ -45,13 +50,13 @@
     width: 16pt;
     height: 17pt;
     padding: 6pt;
-    background-color: $dark-green;
-    border-top-right-radius: $standard-border-radius;
-    margin-right: -1 * math.div($standard-margin, 2);
+    background-color: colors.$dark-green;
+    border-top-right-radius: lengths.$standard-border-radius;
+    margin-right: -1 * math.div(lengths.$standard-margin, 2);
   }
 
   &.settings::after {
-    content: $fa-settings;
+    content: icons.$fa-settings;
   }
 
   h2,
@@ -79,9 +84,9 @@
     li {
       padding: 0;
       > a {
-        padding: $item-padding;
+        padding: lengths.$item-padding;
         &:visited {
-          @include choose-item;
+          @include choose.choose-item;
         }
       }
 
@@ -98,20 +103,20 @@
       }
 
       &.active > a:link {
-        @include choose-active;
+        @include choose.choose-active;
       }
 
       > a:link {
-        @include choose-item;
+        @include choose.choose-item;
         display: block;
 
         border-right: {
-          width: $border-size;
+          width: lengths.$border-size;
           style: solid;
         }
 
         &:hover {
-          @include choose-hover;
+          @include choose.choose-hover;
           transition: none;
         }
       }
@@ -153,7 +158,7 @@
 
     input[type="text"],
     input[type="password"] {
-      @include input-field;
+      @include mixins.input-field;
       width: 100%;
     }
 
@@ -166,15 +171,15 @@
       position: relative;
       width: 100%;
       margin-top: 4px;
-      padding-right: $button-width;
+      padding-right: lengths.$button-width;
     }
 
     > p {
-      color: $light-green;
+      color: colors.$light-green;
     }
 
     > p.announcement {
-      color: $nearly-white;
+      color: colors.$nearly-white;
       > time {
         display: block;
         font-size: 70%;
@@ -183,7 +188,7 @@
 
     hr {
       border: none;
-      border-top: 2px solid $ids-grey-2;
+      border-top: 2px solid colors.$ids-grey-2;
     }
 
     ul {
@@ -206,7 +211,7 @@
       top: 0;
       right: 0;
       &::after {
-        content: $fa-login;
+        content: icons.$fa-login;
       }
     }
   }
@@ -214,7 +219,7 @@
   // Off aside
   &.off,
   &:not(:focus):not(.active) {
-    margin-left: -1 * ($logo-left-distance - math.div($standard-margin, 2));
+    margin-left: -1 * (lengths.$logo-left-distance - math.div(lengths.$standard-margin, 2));
     &::after {
       opacity: 1;
     }
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index 12fb54b..3828fac 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -1,6 +1,6 @@
-@import "base/colors";
-@import "base/icons";
-@import "base/mixins";
-@import "base/choose";
-@import "base/lengths";
-@import "base/paths";
+@use "base/colors";
+@use "base/icons";
+@use "base/mixins";
+@use "base/choose";
+@use "base/lengths";
+@use "base/paths";
diff --git a/package.json b/package.json
index aac2f48..c268e09 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "grunt-terser": "^2.0.0",
     "imagemin": "^9.0.0",
     "optipng-bin": "^9.0.0",
-    "sass": "^1.44.0",
+    "sass": "^1.93.3",
     "vinyl-fs": "^4.0.0"
   },
   "optionalDependencies": {