wip: more tailwind alignment

src/components/FAQSection.astro

@@ -8,16 +8,13 @@ interface Props {
 const { items } = Astro.props;
 ---
 
-<section id="faq" class="faq-section py-20 sm:py-28">
+<section id="faq" class="py-20 sm:py-28 bg-gray-100 dark:bg-gray-900">
   <div class="section-container">
     <div class="max-w-3xl mx-auto">
       <!-- Section header -->
       <div class="mb-12 text-center">
         <h2 class="text-3xl sm:text-4xl mb-4">FAQ</h2>
-        <p
-          class="text-lg text-[var(--color-text-secondary)]
-                 dark:text-[var(--color-dark-text-secondary)]"
-        >
+        <p class="text-lg text-gray-600 dark:text-gray-400">
           Common questions about Git Common-Flow
         </p>
       </div>
@@ -112,14 +109,6 @@ const { items } = Astro.props;
 </script>
 
 <style>
-  .faq-section {
-    background-color: var(--color-bg-secondary);
-  }
-
-  :global(.dark) .faq-section {
-    background-color: var(--color-dark-bg-secondary);
-  }
-
   .spec-content :global(p:last-child) {
     margin-bottom: 0;
   }
@@ -130,10 +119,10 @@ const { items } = Astro.props;
   }
 
   .spec-content :global(li) {
-    color: var(--color-text-secondary);
+    color: #525252;
   }
 
   :global(.dark) .spec-content :global(li) {
-    color: var(--color-dark-text-secondary);
+    color: #a3a3a3;
   }
 </style>