Issue-3895: Make variables root configurable

sass/utilities/controls.scss

@@ -16,7 +16,10 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default;
 
 $control-focus-shadow-l: 50% !default;
 
-:root {
+@debug cv.$variables-host;
+@debug iv.$radius;
+
+#{cv.$variables-host} {
   @include cv.register-vars(
     (
       "control-radius": #{$control-radius},

sass/utilities/css-variables.scss

@@ -6,6 +6,8 @@
 @use "initial-variables" as iv;
 @use "functions" as fn;
 
+$variables-host: iv.$variables-host;
+
 @function buildVarName($name, $prefix: "", $suffix: "") {
   @return "--#{iv.$cssvars-prefix}#{$prefix}#{$name}#{$suffix}";
 }
@@ -419,7 +421,7 @@
 
 @mixin system-theme($name) {
   @media (prefers-color-scheme: #{$name}) {
-    :root {
+    #{$variables-host} {
       @content;
     }
   }

sass/utilities/initial-variables.scss

@@ -153,3 +153,4 @@ $class-prefix: "" !default;
 $cssvars-prefix: "bulma-" !default;
 $helpers-prefix: "is-" !default;
 $helpers-has-prefix: "has-" !default;
+$variables-host: ":root" !default;