Refactor modal styles to tokenized palette

components/application-form.html

@@ -10,7 +10,7 @@
     <!-- Include Tailwind CSS -->
     <link href="css/tailwind.generated.css" rel="stylesheet" />
   </head>
-  <body class="bg-gray-900 text-gray-100">
+  <body class="bg-surface text-text">
     <!-- Application Form Modal -->
     <div
       id="nostrFormModal"
@@ -19,23 +19,19 @@
       <div class="bv-modal-backdrop" data-dismiss></div>
 
       <!-- Inner content container -->
-      <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 with updated styling -->
-          <div
-            class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between border-b border-gray-700"
-          >
-            <h2 class="text-3xl font-extrabold text-white tracking-wide pb-2">
+          <div class="modal-header">
+            <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-text">
               Application Form
             </h2>
             <button
               id="closeNostrFormModal"
-              class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur 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="w-6 h-6 text-gray-300"
+                class="h-6 w-6 text-muted"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -51,13 +47,12 @@
           </div>
 
           <!-- Main Content -->
-          <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-application-form.html"
-                class="w-full h-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>