Refactor modal styles to tokenized palette

components/feature-request-form.html

@@ -7,23 +7,19 @@
 >
   <div class="bv-modal-backdrop" data-dismiss></div>
 
-  <div
-    class="bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
-  >
+  <div class="modal-sheet">
     <!-- Header bar (sticky) with updated title styling -->
-    <div
-      class="sticky top-0 flex items-center justify-between border-b border-gray-700 bg-gradient-to-b from-black/80 to-transparent p-4"
-    >
-      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-white">
+    <div class="modal-header">
+      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-text">
         Feature Request Form
       </h2>
       <button
         id="closeFeatureRequestModal"
-        class="flex h-10 w-10 items-center justify-center rounded-full bg-black/50 transition-all duration-200 backdrop-blur hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
+        class="modal-close"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6 text-gray-300"
+          class="h-6 w-6 text-muted"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
@@ -38,13 +34,12 @@
       </button>
     </div>
 
-    <div class="p-6">
-      <div class="w-full" style="height: 80vh">
+    <div class="modal-body">
+      <div class="h-[80vh] w-full">
         <iframe
           src="./components/iframe_forms/iframe-request-form.html"
-          class="h-full w-full"
+          class="h-full w-full rounded-lg border border-border/30 shadow-sm"
           frameborder="0"
-          style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
         ></iframe>
       </div>
     </div>