fix: Add Tailwind CSS import to BaseLayout

- Created globals.css with @import 'tailwindcss'
- BaseLayout now imports globals.css
- Custom industrial theme colors defined
- Desktop-first typography preserved
- Fixes missing CSS/styling issue

src/layouts/BaseLayout.astro

@@ -41,7 +41,5 @@ const { title, description, image } = Astro.props;
 </html>
 
 <style is:global>
-  html {
+  @import "../styles/globals.css";
-    font-family: 'Kanit', system-ui, sans-serif;
-  }
 </style>

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;
+  }
+}