fix: Import globals.css in BaseLayout

- Added @import for globals.css in BaseLayout <style is:global>
- Removed @import "tailwindcss" from globals.css (not needed with @tailwindcss/vite plugin)
- Tailwind v4 now properly processes all CSS
- Custom theme colors now working (primary green, secondary grays)
- All Tailwind utility classes now functional

CSS now fully working across all pages!

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>

src/styles/globals.css

@@ -1,5 +1,3 @@
-@import "tailwindcss";
-
 @theme {
   --color-primary-500: #22c55e;
   --color-primary-600: #16a34a;
@@ -31,91 +29,3 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: 700;
   letter-spacing: -0.025em;
 }
-
-.btn-primary {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.75rem 1.5rem;
-  background-color: var(--color-primary-600);
-  color: white;
-  font-weight: 600;
-  border-radius: 0.5rem;
-  transition: all 0.2s;
-}
-
-.btn-primary:hover {
-  background-color: var(--color-primary-700);
-}
-
-.btn-secondary {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.75rem 1.5rem;
-  background-color: var(--color-secondary-800);
-  color: white;
-  font-weight: 600;
-  border-radius: 0.5rem;
-  transition: all 0.2s;
-}
-
-.btn-secondary:hover {
-  background-color: var(--color-secondary-900);
-}
-
-.btn-outline {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.75rem 1.5rem;
-  border: 2px solid var(--color-primary-600);
-  color: var(--color-primary-600);
-  background-color: transparent;
-  font-weight: 600;
-  border-radius: 0.5rem;
-  transition: all 0.2s;
-}
-
-.btn-outline:hover {
-  background-color: var(--color-primary-600);
-  color: white;
-}
-
-.section-title {
-  text-align: center;
-  margin-bottom: 1rem;
-  font-size: 1.875rem;
-  font-weight: 700;
-}
-
-@media (min-width: 768px) {
-  .section-title {
-    font-size: 2.25rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .section-title {
-    font-size: 3rem;
-  }
-}
-
-.section-subtitle {
-  text-align: center;
-  color: var(--color-secondary-600);
-  font-size: 1.125rem;
-}
-
-.card {
-  background-color: white;
-  border-radius: 0.75rem;
-  transition: all 0.3s;
-  overflow: hidden;
-  box-shadow: 0 4px 6px -1px #0000001a;
-}
-
-.card:hover {
-  transform: translateY(-0.25rem);
-  box-shadow: 0 10px 15px -3px #0000001a;
-}