diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
index 84e0c60..e93328d 100644
--- a/.github/workflows/deploy-docs.yml
+++ b/.github/workflows/deploy-docs.yml
@@ -133,7 +133,7 @@ jobs:
           ls -laR _site/dox-theme/assets/js/ || echo "Directory _site/dox-theme/assets/js/ not found"
           echo "--- Compiled CSS Content ---"
           echo "style.css contents:"
-          cat _site/assets/css/style.css || echo "style.css not found!"
+          cat _site/dox-theme/assets/css/style.css || echo "style.css not found!"
       
       # Deploy to GitHub Pages
       - name: Deploy to GitHub Pages
diff --git a/_config.yml b/_config.yml
index bf7b2b5..8e03d24 100644
--- a/_config.yml
+++ b/_config.yml
@@ -15,6 +15,9 @@ includes_dir: dox-theme/_includes
 sass:
   sass_dir: dox-theme/_sass
   style: compressed
+  load_paths:
+    - _sass
+    - dox-theme/_sass
 
 # Collections
 collections:
diff --git a/dox-theme/_layouts/default.html b/dox-theme/_layouts/default.html
index 6f24967..4a9f031 100644
--- a/dox-theme/_layouts/default.html
+++ b/dox-theme/_layouts/default.html
@@ -12,7 +12,7 @@
         <link rel="shortcut icon" href="{{ '/favicon.ico' | absolute_url }}" type="image/x-icon">
 
         <!-- Theme styles -->
-        <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css">
+        <link rel="stylesheet" href="{{ site.baseurl }}/dox-theme/assets/css/style.css">
 
         <!-- Theme scripts (deferred) -->
         <!-- Theme scripts (deferred) -->
diff --git a/dox-theme/assets/css/style.scss b/dox-theme/assets/css/style.scss
new file mode 100644
index 0000000..6befa0e
--- /dev/null
+++ b/dox-theme/assets/css/style.scss
@@ -0,0 +1,146 @@
+---
+---
+
+// Import settings in correct sequence
+:root {
+    --color-primary: #7fb100;
+    --color-secondary: #446200;
+    --color-text: #f2f3f2;
+    --color-text-muted: #aaa;
+    --color-background: #1c1d1b;
+    --color-border: #2d2e2c;
+    --color-code-background: #2a2b29;
+    --color-code-header-bg: #252624;
+    --dox-border-radius: 4px;
+    --font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+}
+
+@import "settings/core";
+@import "settings/colors";
+@import "settings/layout";
+
+// Import tools
+@import "tools/breakpoints";
+@import "tools/grid";
+
+// Import generic
+@import "generic/box-sizing";
+@import "generic/normalize";
+@import "generic/reset";
+@import "generic/fonts";
+
+// Import elements
+@import "elements/page";
+@import "elements/headings";
+@import "elements/hr";
+@import "elements/links";
+@import "elements/lists";
+@import "elements/images";
+@import "elements/tables";
+@import "elements/code";
+@import "elements/forms";
+@import "elements/media";
+
+// Import objects
+@import "objects/grid";
+@import "objects/tables";
+@import "objects/icons";
+@import "objects/list-bare";
+@import "objects/list-inline";
+@import "objects/link-bare";
+
+// Import components
+@import "components/header";
+@import "components/logo";
+@import "components/navigation";
+@import "components/offcanvas";
+@import "components/hamburger-icon";
+@import "components/buttons";
+@import "components/hero";
+@import "components/footer";
+@import "components/post";
+@import "components/feature-card";
+@import "components/example";
+@import "components/callout";
+@import "components/arrow-link";
+@import "components/page-nav";
+@import "components/code";
+
+// Import utilities
+@import "utilities/backgrounds";
+@import "utilities/display";
+@import "utilities/flexbox";
+@import "utilities/grid";
+@import "utilities/headings";
+@import "utilities/positioning";
+@import "utilities/spacing";
+@import "utilities/typography";
+
+// Import vendors
+@import "vendors/code-highlight";
+
+// MainWP Dark Theme Customizations
+:root {
+  --mainwp-primary: #{$dox-color-primary};
+  --mainwp-primary-dark: #446200;
+  --mainwp-accent: #4682b4;
+  --mainwp-dark-bg: #1c1d1b;
+  --mainwp-dark-text: #f2f3f2;
+  --mainwp-warning: #ad0000;
+  --mainwp-highlight: #ffd300;
+}
+
+body {
+  background-color: var(--mainwp-dark-bg);
+  color: var(--mainwp-dark-text);
+}
+
+.c-header {
+  background-color: var(--mainwp-dark-bg);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.c-nav__link {
+  color: var(--mainwp-dark-text);
+  &:hover {
+    color: var(--mainwp-primary);
+  }
+}
+
+.c-footer {
+  background-color: var(--mainwp-dark-bg);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--mainwp-dark-text);
+}
+
+a {
+  color: var(--mainwp-primary);
+  &:hover {
+    color: var(--mainwp-primary-dark);
+  }
+}
+
+.c-button {
+  background-color: var(--mainwp-primary);
+  &:hover {
+    background-color: var(--mainwp-primary-dark);
+  }
+}
+
+pre, code {
+  background-color: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.c-post {
+  background-color: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 2rem !important;
+}
+
+// Add Inter font
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}