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: ember-learn#1673

Author: MichalBryxi

addon/styles/addon.scss

@@ -1,23 +1,24 @@
+@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-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);
   }
 }