Address Dart Sass warnings and variable handling

assets/scss/app-dart.scss

@@ -0,0 +1,56 @@
+@use "sass:meta";
+
+// Define template variables
+@use "hugo:vars" as h; // note: modified for dart-sass
+
+// Include default variable overrides
+@import "common/variables-dart.scss"; // note: modified for dart-sass
+@import "common/icons.scss";
+
+// Import Bootstrap configuration (mounted by core Bootstrap module)
+@import "bootstrap-dart.scss"; // note: modified for dart-sass
+
+// Include dark mode overrides
+@import "common/variables-dark.scss";
+
+// Import Hinode theme styles
+@import "components/alert.scss";
+@import "components/blockquote.scss";
+@import "components/breadcrumb.scss";
+@import "components/buttons.scss";
+@import "components/card.scss";
+@import "components/carousel.scss";
+@import "components/clipboard.scss";
+@import "components/command.scss";
+@import "components/comments.scss";
+@import "components/feature.scss";
+@import "components/footer.scss";
+@import "components/navbar.scss";
+@import "components/img.scss";
+@import "components/pagination.scss";
+@import "components/persona.scss";
+@import "components/popover.scss";
+@import "components/sidebar.scss";
+@import "components/syntax-dart.scss"; // note: modified for dart-sass
+@import "components/table.scss";
+@import "components/timeline.scss";
+@import "components/toc.scss";
+@import "components/vimeo.scss";
+@import "common/animation.scss";
+@import "common/styles.scss";
+@import "layouts/reboot.scss";
+@import "layouts/type.scss";
+@import "common/export.scss";
+@import "helpers/colored-links.scss";
+@import "helpers/display.scss";
+
+// note: modified for dart-sass
+@if h.$import-fonts {
+    @include meta.load-css(theme/fonts);
+}
+
+// Import theme placeholder
+@import "theme/theme.scss";
+
+// Import Bootstrap utilities API  (mounted by core Bootstrap module)
+@import "modules/bootstrap/utilities/api";

assets/scss/common/_variables-dart.scss

@@ -0,0 +1,45 @@
+// Bootstrap variables overrides for theme
+$enable-negative-margins:       true;
+$enable-important-utilities:    true !default;
+
+// Remove the border from the focused navigation toggler
+$navbar-toggler-focus-width:    0 !default;
+
+// scss-docs-start font
+$font-family-sans-serif:        h.$theme-font, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$headings-font-weight:          600 !default;
+$font-weight-lighter:           lighter !default;
+$font-weight-light:             200 !default;
+$font-weight-normal:            300 !default;
+$font-weight-bold:              600 !default;
+$font-weight-bolder:            bolder !default;
+
+strong {
+    font-weight:                600 if($enable-important-utilities, !important, null);
+}
+// scss-docs-end font
+
+$navbar-offset:                 h.$navbar-offset;
+$primary:                       h.$primary;
+$secondary:                     h.$secondary;
+$success:                       h.$success;
+$info:                          h.$info;
+$warning:                       h.$warning;
+$danger:                        h.$danger;
+$light:                         h.$light;
+$dark:                          h.$dark;
+
+$black:                       #000 !default;
+$btn-toggle-color:              $black !default;
+
+$carousel-dark-indicator-active-bg:  #ffffff !default;
+$carousel-dark-caption-color:        #ffffff !default;
+$carousel-dark-control-icon-filter:  invert(0) grayscale(100) !default;
+
+// scss-docs-start color-mode
+$primary-text-emphasis-dark:        mix(white, h.$primary, h.$dark-mode-tint) !default;
+$secondary-text-emphasis-dark:      mix(white, h.$secondary, h.$dark-mode-tint) !default;
+$link-color-dark:                   mix(white, h.$primary, h.$dark-mode-tint) !default;
+$primary-bg-subtle-dark:            mix(black, h.$primary, h.$dark-mode-shade) !default;
+$primary-border-subtle-dark:        mix(black, h.$primary, calc(h.$dark-mode-shade / 2)) !default;
+// scss-docs-end color-mode

assets/scss/components/_syntax-dart.scss

@@ -0,0 +1,49 @@
+// stylelint-disable annotation-no-unknown
+@import "syntax-light";
+
+.bg,
+.chroma,
+.chroma .err {
+    // set to transparent background to avoid rendering issues with example shortcode
+    background-color: transparent if($enable-important-utilities, !important, null);
+}
+
+.chroma {
+    display: flex;
+}
+
+.chroma code {
+    flex: 1;
+}
+
+.syntax-highlight {
+    background-color: var(--bs-light) if($enable-important-utilities, !important, null);
+    overflow-x: auto;
+}
+
+@if $enable-dark-mode {
+    [data-bs-theme="dark"] {
+        @include meta.load-css(syntax-dark);
+
+        .bg,
+        .chroma,
+        .chroma .err {
+            // set to transparent background to avoid rendering issues with example shortcode
+            background-color: transparent if($enable-important-utilities, !important, null);
+        }
+
+        .syntax-highlight {
+            background-color: var(--bs-tertiary-bg) if($enable-important-utilities, !important, null);
+            overflow-x: auto;
+        }
+
+        .bg,
+        .chroma,
+        .chroma .ge,
+        .chroma .gl,
+        .chroma .gs {
+            color: #c9d1d9 if($enable-important-utilities, !important, null);
+        }
+    }
+}
+// stylelint-enable annotation-no-unknown