diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index eee9d3564..ccd60d163 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -41,7 +41,5 @@ const { title, description, image } = Astro.props;
 </html>
 
 <style is:global>
-  html {
-    font-family: 'Kanit', system-ui, sans-serif;
-  }
+  @import "../styles/globals.css";
 </style>
diff --git a/src/styles/globals.css b/src/styles/globals.css
new file mode 100644
index 000000000..b96571f72
--- /dev/null
+++ b/src/styles/globals.css
@@ -0,0 +1,34 @@
+@import "tailwindcss";
+
+/* Custom industrial theme colors */
+:root {
+  --color-primary-600: #22c55e;
+  --color-primary-700: #16a34a;
+  --color-secondary-50: #f8fafc;
+  --color-secondary-100: #f1f5f9;
+  --color-secondary-200: #e2e8f0;
+  --color-secondary-300: #cbd5e1;
+  --color-secondary-500: #64748b;
+  --color-secondary-600: #475569;
+  --color-secondary-700: #334155;
+  --color-secondary-800: #1e293b;
+  --color-secondary-900: #0f172a;
+  --color-accent-500: #eab308;
+}
+
+/* Desktop-first typography */
+html {
+  font-family: 'Kanit', system-ui, sans-serif;
+}
+
+@media (min-width: 1280px) {
+  html {
+    font-size: 18px;
+  }
+}
+
+@media (min-width: 1536px) {
+  html {
+    font-size: 20px;
+  }
+}