fix: Convert CSS to Tailwind v4 syntax

- Uses @theme for custom colors (Tailwind v4)
- Plain CSS for components (no @layer/@apply)
- CSS variables from @theme
- All old classes preserved (.btn-primary, .card, etc.)
- Fully compatible with Tailwind v4

src/layouts/BaseLayout.astro

@@ -26,9 +26,6 @@ const { title, description, image } = Astro.props;
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
     
-    <!-- Tailwind CSS -->
-    <link rel="stylesheet" href="/_astro/globals.css" />
-    
     <!-- SEO -->
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description || 'Deal Plus Tech - ผู้เชี่ยวชาญด้านระบบน้ำ'} />
@@ -44,36 +41,5 @@ const { title, description, image } = Astro.props;
 </html>
 
 <style is:global>
-@import "tailwindcss";
+  @import "../styles/globals.css";
-
-: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;
-}
-
-html {
-  font-family: 'Kanit', system-ui, sans-serif;
-}
-
-@media (min-width: 1280px) {
-  html {
-    font-size: 18px;
-  }
-}
-
-@media (min-width: 1536px) {
-  html {
-    font-size: 20px;
-  }
-}
 </style>

src/styles/globals.css

@@ -1,66 +1,6 @@
 @import "tailwindcss";
 
-/* Base styles */
+@theme {
-@layer base {
-  html {
-    scroll-behavior: smooth;
-  }
-  
-  body {
-    @apply bg-white text-secondary-900 antialiased;
-  }
-  
-  h1, h2, h3, h4, h5, h6 {
-    @apply font-bold tracking-tight;
-  }
-}
-
-/* Component classes - matching old site */
-@layer components {
-  .btn-primary {
-    @apply inline-flex items-center justify-center px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg
-           hover:bg-primary-700 transition-all duration-200 shadow-bold hover:shadow-industrial
-           active:translate-y-0.5;
-  }
-  
-  .btn-secondary {
-    @apply inline-flex items-center justify-center px-6 py-3 bg-secondary-800 text-white font-semibold rounded-lg
-           hover:bg-secondary-900 transition-all duration-200;
-  }
-  
-  .btn-outline {
-    @apply inline-flex items-center justify-center px-6 py-3 border-2 border-primary-600 text-primary-600 font-semibold rounded-lg
-           hover:bg-primary-600 hover:text-white transition-all duration-200;
-  }
-  
-  .section-title {
-    @apply text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900;
-  }
-  
-  .section-subtitle {
-    @apply text-lg md:text-xl text-secondary-600 mt-4;
-  }
-  
-  .card {
-    @apply bg-white rounded-xl shadow-card overflow-hidden transition-all duration-300 
-           hover:shadow-industrial hover:-translate-y-1;
-  }
-  
-  .card-industrial {
-    @apply bg-secondary-800 text-white rounded-xl p-6 border-l-4 border-primary-500;
-  }
-  
-  .gradient-overlay {
-    @apply absolute inset-0 bg-gradient-to-r from-industrial-dark/90 to-industrial-dark/70;
-  }
-  
-  .industrial-badge {
-    @apply inline-flex items-center px-3 py-1 bg-primary-600 text-white text-sm font-semibold rounded;
-  }
-}
-
-/* Custom theme colors - Industrial theme */
-:root {
   --color-primary-500: #22c55e;
   --color-primary-600: #16a34a;
   --color-primary-700: #15803d;
@@ -78,11 +18,24 @@
   --color-accent-500: #eab308;
 }
 
-/* Desktop-first typography */
+/* Base styles */
 html {
+  scroll-behavior: smooth;
   font-family: 'Kanit', system-ui, sans-serif;
 }
 
+body {
+  background-color: white;
+  color: var(--color-secondary-900);
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+
+/* Desktop-first typography */
 @media (min-width: 1280px) {
   html {
     font-size: 18px;
@@ -94,3 +47,141 @@ html {
     font-size: 20px;
   }
 }
+
+/* Button components */
+.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;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+}
+
+.btn-primary:hover {
+  background-color: var(--color-primary-700);
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
+
+.btn-primary:active {
+  transform: translateY(0.125rem);
+}
+
+.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);
+  font-weight: 600;
+  border-radius: 0.5rem;
+  transition: all 0.2s;
+}
+
+.btn-outline:hover {
+  background-color: var(--color-primary-600);
+  color: white;
+}
+
+/* Section typography */
+.section-title {
+  font-size: 1.875rem;
+  font-weight: 700;
+  color: var(--color-secondary-900);
+}
+
+@media (min-width: 768px) {
+  .section-title {
+    font-size: 2.25rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .section-title {
+    font-size: 3rem;
+  }
+}
+
+.section-subtitle {
+  font-size: 1.125rem;
+  color: var(--color-secondary-600);
+  margin-top: 1rem;
+}
+
+@media (min-width: 768px) {
+  .section-subtitle {
+    font-size: 1.25rem;
+  }
+}
+
+/* Card components */
+.card {
+  background-color: white;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  transition: all 0.3s;
+}
+
+.card:hover {
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  transform: translateY(-0.25rem);
+}
+
+.card-industrial {
+  background-color: var(--color-secondary-800);
+  color: white;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  border-left: 4px solid var(--color-primary-500);
+}
+
+/* Utility classes */
+.text-balance {
+  text-wrap: balance;
+}
+
+.text-gradient {
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-image: linear-gradient(to right, var(--color-primary-500), var(--color-primary-700));
+}
+
+.gradient-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, rgb(15 23 42 / 0.9), rgb(15 23 42 / 0.7));
+}
+
+.industrial-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  background-color: var(--color-primary-600);
+  color: white;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border-radius: 0.25rem;
+}