diff --git a/.github/workflows/test-scss.yml b/.github/workflows/test-scss.yml
index b1227e35e0d0..c544d51d3b48 100644
--- a/.github/workflows/test-scss.yml
+++ b/.github/workflows/test-scss.yml
@@ -38,8 +38,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
-          # node version based on dart-sass test workflow
-          node-version: 16
+          node-version: '24'
 
       - name: Install Dart Sass
         run: |
diff --git a/admin/css/debug-toolbar/_theme-dark.scss b/admin/css/debug-toolbar/_theme-dark.scss
index ead7d02a58e3..83176023a87e 100644
--- a/admin/css/debug-toolbar/_theme-dark.scss
+++ b/admin/css/debug-toolbar/_theme-dark.scss
@@ -2,23 +2,23 @@
 // ========================================================================== */
 
 // The "box-shadow" mixin uses colors
-@import '_mixins';
+@use '_mixins';
 
 // Graphic charter
-@import '_graphic-charter';
+@use '_graphic-charter';
 
 
 // DEBUG ICON
 // ========================================================================== */
 
 #debug-icon {
-    background-color: $t-dark;
-    @include box-shadow(0, 0, 4px, $m-gray);
+    background-color: graphic-charter.$t-dark;
+    @include mixins.box-shadow(0, 0, 4px, graphic-charter.$m-gray);
 
     a:active,
     a:link,
     a:visited {
-        color: $g-orange;
+        color: graphic-charter.$g-orange;
     }
 }
 
@@ -27,8 +27,8 @@
 // ========================================================================== */
 
 #debug-bar {
-    background-color: $t-dark;
-    color: $m-gray;
+    background-color: graphic-charter.$t-dark;
+    color: graphic-charter.$m-gray;
 
     // Reset to prevent conflict with other CSS files
     h1,
@@ -44,35 +44,35 @@
     button,
     .toolbar {
         background-color: transparent;
-        color: $m-gray;
+        color: graphic-charter.$m-gray;
     }
 
     // Buttons
     button {
-        background-color: $t-dark;
+        background-color: graphic-charter.$t-dark;
     }
 
     // Tables
     table {
         strong {
-            color: $g-orange;
+            color: graphic-charter.$g-orange;
         }
 
         tbody tr {
             &:hover {
-                background-color: $g-gray;
+                background-color: graphic-charter.$g-gray;
             }
 
             &.current {
-                background-color: $m-orange;
+                background-color: graphic-charter.$m-orange;
 
                 td {
-                    color: $t-dark;
+                    color: graphic-charter.$t-dark;
                 }
 
                 &:hover td {
-                    background-color: $g-red;
-                    color: $t-light;
+                    background-color: graphic-charter.$g-red;
+                    color: graphic-charter.$t-light;
                 }
             }
         }
@@ -80,8 +80,8 @@
 
     // The toolbar
     .toolbar {
-        background-color: $g-gray;
-        @include box-shadow(0, 0, 4px, $g-gray);
+        background-color: graphic-charter.$g-gray;
+        @include mixins.box-shadow(0, 0, 4px, graphic-charter.$g-gray);
 
         img {
             filter: brightness(0) invert(1);
@@ -91,24 +91,24 @@
     // Fixed top
     &.fixed-top {
         .toolbar {
-            @include box-shadow(0, 0, 4px, $g-gray);
+            @include mixins.box-shadow(0, 0, 4px, graphic-charter.$g-gray);
         }
 
         .tab {
-            @include box-shadow(0, 1px, 4px, $g-gray);
+            @include mixins.box-shadow(0, 1px, 4px, graphic-charter.$g-gray);
         }
     }
 
     // "Muted" elements
     .muted {
-        color: $m-gray;
+        color: graphic-charter.$m-gray;
 
         td {
-            color: $g-gray;
+            color: graphic-charter.$g-gray;
         }
 
         &:hover td {
-            color: $m-gray;
+            color: graphic-charter.$m-gray;
         }
     }
 
@@ -121,34 +121,34 @@
     // The toolbar menus
     .ci-label {
         &.active {
-            background-color: $t-dark;
+            background-color: graphic-charter.$t-dark;
         }
 
         &:hover {
-            background-color: $t-dark;
+            background-color: graphic-charter.$t-dark;
         }
 
         .badge {
-            background-color: $g-red;
-            color: $t-light;
+            background-color: graphic-charter.$g-red;
+            color: graphic-charter.$t-light;
         }
     }
 
     // The tabs container
     .tab {
-        background-color: $t-dark;
-        @include box-shadow(0, -1px, 4px, $g-gray);
+        background-color: graphic-charter.$t-dark;
+        @include mixins.box-shadow(0, -1px, 4px, graphic-charter.$g-gray);
     }
 
     // The "Timeline" tab
     .timeline {
         th,
         td {
-            border-color: $g-gray;
+            border-color: graphic-charter.$g-gray;
         }
 
         .timer {
-            background-color: $g-orange;
+            background-color: graphic-charter.$g-orange;
         }
     }
 }
@@ -158,10 +158,10 @@
 // ========================================================================== */
 
 .debug-view.show-view {
-    border-color: $g-orange;
+    border-color: graphic-charter.$g-orange;
 }
 
 .debug-view-path {
-    background-color: $m-orange;
-    color: $g-gray;
+    background-color: graphic-charter.$m-orange;
+    color: graphic-charter.$g-gray;
 }
diff --git a/admin/css/debug-toolbar/_theme-light.scss b/admin/css/debug-toolbar/_theme-light.scss
index 4e4295ccd131..9aa0a5a2c9b4 100644
--- a/admin/css/debug-toolbar/_theme-light.scss
+++ b/admin/css/debug-toolbar/_theme-light.scss
@@ -2,23 +2,23 @@
 // ========================================================================== */
 
 // The "box-shadow" mixin uses colors
-@import '_mixins';
+@use '_mixins';
 
 // Graphic charter
-@import '_graphic-charter';
+@use '_graphic-charter';
 
 
 // DEBUG ICON
 // ========================================================================== */
 
 #debug-icon {
-    background-color: $t-light;
-    @include box-shadow(0, 0, 4px, $m-gray);
+    background-color: graphic-charter.$t-light;
+    @include mixins.box-shadow(0, 0, 4px, graphic-charter.$m-gray);
 
     a:active,
     a:link,
     a:visited {
-        color: $g-orange;
+        color: graphic-charter.$g-orange;
     }
 }
 
@@ -27,8 +27,8 @@
 // ========================================================================== */
 
 #debug-bar {
-    background-color: $t-light;
-    color: $g-gray;
+    background-color: graphic-charter.$t-light;
+    color: graphic-charter.$g-gray;
 
     // Reset to prevent conflict with other CSS files
     h1,
@@ -44,31 +44,31 @@
     button,
     .toolbar {
         background-color: transparent;
-        color: $g-gray;
+        color: graphic-charter.$g-gray;
     }
 
     // Buttons
     button {
-        background-color: $t-light;
+        background-color: graphic-charter.$t-light;
     }
 
     // Tables
     table {
         strong {
-            color: $g-orange;
+            color: graphic-charter.$g-orange;
         }
 
         tbody tr {
             &:hover {
-                background-color: $m-gray;
+                background-color: graphic-charter.$m-gray;
             }
 
             &.current {
-                background-color: $m-orange;
+                background-color: graphic-charter.$m-orange;
 
                 &:hover td {
-                    background-color: $g-red;
-                    color: $t-light;
+                    background-color: graphic-charter.$g-red;
+                    color: graphic-charter.$t-light;
                 }
             }
         }
@@ -76,8 +76,8 @@
 
     // The toolbar
     .toolbar {
-        background-color: $t-light;
-        @include box-shadow(0, 0, 4px, $m-gray);
+        background-color: graphic-charter.$t-light;
+        @include mixins.box-shadow(0, 0, 4px, graphic-charter.$m-gray);
 
         img {
             filter: brightness(0) invert(0.4);
@@ -87,24 +87,24 @@
     // Fixed top
     &.fixed-top {
         .toolbar {
-            @include box-shadow(0, 0, 4px, $m-gray);
+            @include mixins.box-shadow(0, 0, 4px, graphic-charter.$m-gray);
         }
 
         .tab {
-            @include box-shadow(0, 1px, 4px, $m-gray);
+            @include mixins.box-shadow(0, 1px, 4px, graphic-charter.$m-gray);
         }
     }
 
     // "Muted" elements
     .muted {
-        color: $g-gray;
+        color: graphic-charter.$g-gray;
 
         td {
-            color: $m-gray;
+            color: graphic-charter.$m-gray;
         }
 
         &:hover td {
-            color: $g-gray;
+            color: graphic-charter.$g-gray;
         }
     }
 
@@ -117,34 +117,34 @@
     // The toolbar menus
     .ci-label {
         &.active {
-            background-color: $m-gray;
+            background-color: graphic-charter.$m-gray;
         }
 
         &:hover {
-            background-color: $m-gray;
+            background-color: graphic-charter.$m-gray;
         }
 
         .badge {
-            background-color: $g-red;
-            color: $t-light;
+            background-color: graphic-charter.$g-red;
+            color: graphic-charter.$t-light;
         }
     }
 
     // The tabs container
     .tab {
-        background-color: $t-light;
-        @include box-shadow(0, -1px, 4px, $m-gray);
+        background-color: graphic-charter.$t-light;
+        @include mixins.box-shadow(0, -1px, 4px, graphic-charter.$m-gray);
     }
 
     // The "Timeline" tab
     .timeline {
         th,
         td {
-            border-color: $m-gray;
+            border-color: graphic-charter.$m-gray;
         }
 
         .timer {
-            background-color: $g-orange;
+            background-color: graphic-charter.$g-orange;
         }
     }
 }
@@ -154,10 +154,10 @@
 // ========================================================================== */
 
 .debug-view.show-view {
-    border-color: $g-orange;
+    border-color: graphic-charter.$g-orange;
 }
 
 .debug-view-path {
-    background-color: $m-orange;
-    color: $g-gray;
+    background-color: graphic-charter.$m-orange;
+    color: graphic-charter.$g-gray;
 }
diff --git a/admin/css/debug-toolbar/toolbar.scss b/admin/css/debug-toolbar/toolbar.scss
index 65f4b802e22c..767c908bf176 100644
--- a/admin/css/debug-toolbar/toolbar.scss
+++ b/admin/css/debug-toolbar/toolbar.scss
@@ -10,8 +10,9 @@
 // IMPORTS
 // ========================================================================== */
 
-@import '_mixins';
-@import '_settings';
+@use "sass:meta";
+@use '_mixins';
+@use '_settings';
 
 // DEBUG ICON
 // ========================================================================== */
@@ -76,8 +77,8 @@
     line-height: 36px;
 
     // Typography
-    font-family: $base-font;
-    font-size: $base-size;
+    font-family: settings.$base-font;
+    font-size: settings.$base-size;
     font-weight: 400;
 
     // General elements
@@ -86,7 +87,7 @@
         font-weight: normal;
         margin: 0 0 0 auto;
         padding: 0;
-        font-family: $base-font;
+        font-family: settings.$base-font;
 
         svg {
             width: 16px;
@@ -96,7 +97,7 @@
 
     h2 {
         font-weight: bold;
-        font-size: $base-size;
+        font-size: settings.$base-size;
         margin: 0;
         padding: 5px 0 10px 0;
 
@@ -106,7 +107,7 @@
     }
 
     h3 {
-        font-size: $base-size - 4;
+        font-size: settings.$base-size - 4;
         font-weight: 200;
         margin: 0 0 0 10px;
         padding: 0;
@@ -114,7 +115,7 @@
     }
 
     p {
-        font-size: $base-size - 4;
+        font-size: settings.$base-size - 4;
         margin: 0 0 0 15px;
         padding: 0;
     }
@@ -129,7 +130,7 @@
 
     button {
         border: 1px solid;
-        @include border-radius(4px);
+        @include mixins.border-radius(4px);
         cursor: pointer;
         line-height: 15px;
 
@@ -140,7 +141,7 @@
 
     table {
         border-collapse: collapse;
-        font-size: $base-size - 2;
+        font-size: settings.$base-size - 2;
         line-height: normal;
 
         // Tables indentation
@@ -255,7 +256,7 @@
     // The toolbar menus
     .ci-label {
         display: inline-flex;
-        font-size: $base-size - 2;
+        font-size: settings.$base-size - 2;
 
         &:hover {
             cursor: pointer;
@@ -278,7 +279,7 @@
 
         // The toolbar notification badges
         .badge {
-            @include border-radius(12px);
+            @include mixins.border-radius(12px);
             display: inline-block;
             font-size: 75%;
             font-weight: bold;
@@ -316,7 +317,7 @@
 
         th {
             border-left: 1px solid;
-            font-size: $base-size - 4;
+            font-size: settings.$base-size - 4;
             font-weight: 200;
             padding: 5px 5px 10px 5px;
             position: relative;
@@ -355,7 +356,7 @@
         }
 
         .timer {
-            @include border-radius(4px);
+            @include mixins.border-radius(4px);
             display: inline-block;
             padding: 5px;
             position: absolute;
@@ -428,7 +429,7 @@
 
 .debug-view-path {
     font-family: monospace;
-    font-size: $base-size - 4;
+    font-size: settings.$base-size - 4;
     letter-spacing: normal;
     min-height: 16px;
     padding: 2px;
@@ -487,16 +488,16 @@
 // ========================================================================== */
 
 // Default theme is "Light"
-@import '_theme-light';
+@include meta.load-css('_theme-light');
 
 // If the browser supports "prefers-color-scheme" and the scheme is "Dark"
 @media (prefers-color-scheme: dark) {
-    @import '_theme-dark';
+    @include meta.load-css('_theme-dark');
 }
 
 // If we force the "Dark" theme
 #toolbarContainer.dark {
-    @import '_theme-dark';
+    @include meta.load-css('_theme-dark');
 
     td[data-debugbar-route] input[type=text] {
         background: #000;
@@ -506,7 +507,7 @@
 
 // If we force the "Light" theme
 #toolbarContainer.light {
-    @import '_theme-light';
+    @include meta.load-css('_theme-light');
 }
 
 // LAYOUT HELPERS
diff --git a/system/Debug/Toolbar/Views/toolbar.css b/system/Debug/Toolbar/Views/toolbar.css
index abf61e9cca93..69583597eed7 100644
--- a/system/Debug/Toolbar/Views/toolbar.css
+++ b/system/Debug/Toolbar/Views/toolbar.css
@@ -358,6 +358,7 @@
   -moz-box-shadow: 0 0 4px #DFDFDF;
   -webkit-box-shadow: 0 0 4px #DFDFDF;
 }
+
 #debug-icon a:active,
 #debug-icon a:link,
 #debug-icon a:visited {
@@ -368,6 +369,7 @@
   background-color: #FFFFFF;
   color: #434343;
 }
+
 #debug-bar h1,
 #debug-bar h2,
 #debug-bar h3,
@@ -383,74 +385,93 @@
   background-color: transparent;
   color: #434343;
 }
+
 #debug-bar button {
   background-color: #FFFFFF;
 }
+
 #debug-bar table strong {
   color: #DD8615;
 }
+
 #debug-bar table tbody tr:hover {
   background-color: #DFDFDF;
 }
+
 #debug-bar table tbody tr.current {
   background-color: #FDC894;
 }
+
 #debug-bar table tbody tr.current:hover td {
   background-color: #DD4814;
   color: #FFFFFF;
 }
+
 #debug-bar .toolbar {
   background-color: #FFFFFF;
   box-shadow: 0 0 4px #DFDFDF;
   -moz-box-shadow: 0 0 4px #DFDFDF;
   -webkit-box-shadow: 0 0 4px #DFDFDF;
 }
+
 #debug-bar .toolbar img {
   filter: brightness(0) invert(0.4);
 }
+
 #debug-bar.fixed-top .toolbar {
   box-shadow: 0 0 4px #DFDFDF;
   -moz-box-shadow: 0 0 4px #DFDFDF;
   -webkit-box-shadow: 0 0 4px #DFDFDF;
 }
+
 #debug-bar.fixed-top .tab {
   box-shadow: 0 1px 4px #DFDFDF;
   -moz-box-shadow: 0 1px 4px #DFDFDF;
   -webkit-box-shadow: 0 1px 4px #DFDFDF;
 }
+
 #debug-bar .muted {
   color: #434343;
 }
+
 #debug-bar .muted td {
   color: #DFDFDF;
 }
+
 #debug-bar .muted:hover td {
   color: #434343;
 }
+
 #debug-bar #toolbar-position,
 #debug-bar #toolbar-theme {
   filter: brightness(0) invert(0.6);
 }
+
 #debug-bar .ci-label.active {
   background-color: #DFDFDF;
 }
+
 #debug-bar .ci-label:hover {
   background-color: #DFDFDF;
 }
+
 #debug-bar .ci-label .badge {
   background-color: #DD4814;
   color: #FFFFFF;
 }
+
 #debug-bar .tab {
   background-color: #FFFFFF;
   box-shadow: 0 -1px 4px #DFDFDF;
   -moz-box-shadow: 0 -1px 4px #DFDFDF;
   -webkit-box-shadow: 0 -1px 4px #DFDFDF;
 }
+
 #debug-bar .timeline th,
 #debug-bar .timeline td {
   border-color: #DFDFDF;
 }
+
 #debug-bar .timeline .timer {
   background-color: #DD8615;
 }