Silence sass errors (#1674)

* fix: Refactor global variables

It's not possible to migrate away from `@import` because:

```
pnpx sass-migrator module --migrate-deps addon/styles/addon.scss

...

Error: This stylesheet was loaded by a nested import in addon/styles/addon.scss. The module system only supports loading nested CSS using the load-css() mixin, which doesn't allow access to variables from the outer stylesheet.
  ╷
2 │   width: calc(((100% - #{$site-container}) / 2) + 14rem);
  │                          ^^^^^^^^^^^^^^^
  ╵
  addon/styles/components/_docs-viewer-x-current-page-index.scss 2:26  root stylesheet
```

* fix: Migrate away from SASS @import

This finally silences:

```
[test:ember]
[test:ember]   ╷
[test:ember] 9 │ @import './tailwind/components/docs-btn';
[test:ember]   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[test:ember]   ╵
[test:ember]     addon/styles/addon.scss#sass 9:9  root stylesheet
[test:ember]
[test:ember] DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
```

Fixes: #1673

Author: MichalBryxi

addon/styles/_variables.scss

@@ -0,0 +1,2 @@
+// Global settings
+$site-container: 1400px;

addon/styles/addon.scss

@@ -1,26 +1,24 @@
-// Global settings
-$site-container: 1400px;
-
+@use "sass:meta";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import './tailwind/components/docs-brand-colors';
-@import './tailwind/components/docs-btn';
-@import './tailwind/components/docs-container';
-@import './tailwind/components/docs-md';
+@include meta.load-css('tailwind/components/docs-brand-colors');
+@include meta.load-css('tailwind/components/docs-btn');
+@include meta.load-css('tailwind/components/docs-container');
+@include meta.load-css('tailwind/components/docs-md');
 
-@import './utilities/masks';
-@import './utilities/nudge';
+@include meta.load-css('utilities/masks');
+@include meta.load-css('utilities/nudge');
 
-@import './components/docs-header-search-box';
-@import './components/docs-hero';
-@import './components/docs-keyboard-shortcuts';
-@import './components/docs-viewer-x-current-page-index';
-@import './components/docs-viewer-x-nav';
-@import './components/modal-dialog';
+@include meta.load-css('components/docs-header-search-box');
+@include meta.load-css('components/docs-hero');
+@include meta.load-css('components/docs-keyboard-shortcuts');
+@include meta.load-css('components/docs-viewer-x-current-page-index');
+@include meta.load-css('components/docs-viewer-x-nav');
+@include meta.load-css('components/modal-dialog');
 
-@import 'syntax';
+@include meta.load-css('syntax');
 
 // Figure out how to do this in tailwind
 .docs-fill-current {

addon/styles/components/_docs-viewer-x-current-page-index.scss

@@ -1,5 +1,7 @@
+@use '../variables' as vars;
+
 .AddonDocs-DocsViewer-CurrentPageIndex {
-  width: calc(((100% - #{$site-container}) / 2) + 14rem);
-  padding-right: calc((100% - #{$site-container}) / 2);
+  width: calc(((100% - #{vars.$site-container}) / 2) + 14rem);
+  padding-right: calc((100% - #{vars.$site-container}) / 2);
   min-width: 14rem;
 }

addon/styles/components/_docs-viewer-x-nav.scss

@@ -1,6 +1,8 @@
+@use '../variables' as vars;
+
 .AddonDocs-DocsViewer-Nav {
-  @media (min-width: $site-container) {
-    width: calc(((100% - #{$site-container}) / 2) + 288px);
-    padding-left: calc((100% - #{$site-container}) / 2);
+  @media (min-width: vars.$site-container) {
+    width: calc(((100% - #{vars.$site-container}) / 2) + 288px);
+    padding-left: calc((100% - #{vars.$site-container}) / 2);
   }
 }