From 7b9448ffd5cb0e23db59e03c30ff1f00c2baaec9 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sun, 12 Apr 2026 11:16:53 +0100
Subject: [PATCH] style(coming-soon): align with design system tokens

Replace Tailwind utility color classes with CSS custom properties,
remove rounded corners, use dashed borders and parch button style.
---
 app/layouts/coming-soon.vue |   9 +-
 app/pages/coming-soon.vue   | 199 ++++++++++++++++++++++++++++--------
 2 files changed, 166 insertions(+), 42 deletions(-)

diff --git a/app/layouts/coming-soon.vue b/app/layouts/coming-soon.vue
index 5eb155e..76b3ec7 100644
--- a/app/layouts/coming-soon.vue
+++ b/app/layouts/coming-soon.vue
@@ -1,5 +1,12 @@
 <template>
-  <div class="min-h-screen bg-guild-900">
+  <div class="coming-soon-layout">
     <slot />
   </div>
 </template>
+
+<style scoped>
+.coming-soon-layout {
+  min-height: 100vh;
+  background: var(--bg);
+}
+</style>
diff --git a/app/pages/coming-soon.vue b/app/pages/coming-soon.vue
index 986f912..07cbccb 100644
--- a/app/pages/coming-soon.vue
+++ b/app/pages/coming-soon.vue
@@ -1,44 +1,30 @@
 <template>
-  <div class="min-h-screen w-full flex flex-col items-center justify-center px-4">
-    <h1 class="text-display-xl font-bold mb-2 uppercase font-sans!">Ghost Guild</h1>
-    <p
-      v-if="!isAuthenticated"
-      class="text-display-sm text-guild-400 mb-10 uppercase py-4 text-center font-sans!">
-      Coming Soon
-    </p>
+  <div class="coming-soon">
+    <h1 class="coming-soon-title">Ghost Guild</h1>
+    <p v-if="!isAuthenticated" class="coming-soon-subtitle">Coming Soon</p>
 
     <!-- Logged-in state -->
-    <div v-if="isAuthenticated" class="w-full max-w-sm flex flex-col items-center space-y-4 text-center mt-8">
-      <p class="text-guild-200 font-sans py-4 text-center">
-        Welcome, <strong class="text-guild-100">{{ memberData.name || memberData.email }}</strong>
+    <div v-if="isAuthenticated" class="coming-soon-auth">
+      <p>
+        Welcome, <strong>{{ memberData.name || memberData.email }}</strong>
       </p>
-      <a
-        href="https://wiki.ghostguild.org"
-        class="block w-full py-3 px-6 bg-candlelight-500 hover:bg-candlelight-600 text-guild-900 font-semibold rounded-full uppercase tracking-wide transition-colors font-sans text-center">
+      <a href="https://wiki.ghostguild.org" class="coming-soon-btn">
         Go to Wiki
       </a>
-      <button
-        class="block w-full text-sm text-candlelight-400 hover:text-candlelight-300 font-medium uppercase tracking-wide transition-colors"
-        @click="handleLogout">
+      <button class="coming-soon-signout" @click="handleLogout">
         Sign out
       </button>
     </div>
 
     <!-- Login form -->
-    <div v-else class="w-full max-w-sm">
+    <div v-else class="coming-soon-form">
       <!-- Success state -->
-      <div v-if="loginSuccess" class="text-center py-4">
-        <div
-          class="w-16 h-16 bg-candlelight-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-          <UIcon name="i-heroicons-check-circle" class="w-10 h-10 text-candlelight-400" />
-        </div>
-        <h3 class="text-lg font-semibold text-guild-100 mb-2">
-          Check your email
-        </h3>
-        <p class="text-guild-300">
+      <div v-if="loginSuccess" class="coming-soon-success">
+        <h3>Check your email</h3>
+        <p>
           We've sent a magic link to
-          <strong class="text-guild-100">{{ email }}</strong>.
-          Click the link to sign in.
+          <strong>{{ email }}</strong
+          >. Click the link to sign in.
         </p>
       </div>
 
@@ -50,32 +36,28 @@
             type="email"
             size="lg"
             class="w-full"
-            placeholder="your.email@example.com" />
+            placeholder="your.email@example.com"
+          />
         </UFormField>
 
-        <div v-if="loginError" class="mb-4 p-3 bg-ember-500/10 border border-ember-500/30 rounded-lg">
-          <p class="text-ember-400 text-sm">{{ loginError }}</p>
+        <div v-if="loginError" class="coming-soon-error">
+          <p>{{ loginError }}</p>
         </div>
 
-        <div class="flex justify-center">
+        <div class="coming-soon-actions">
           <UButton
             type="submit"
             :loading="isLoggingIn"
             :disabled="!isFormValid"
             size="lg"
-            class="rounded-full uppercase tracking-wide font-semibold whitespace-nowrap">
+            class="uppercase tracking-wide font-semibold whitespace-nowrap"
+          >
             Send Magic Link
           </UButton>
         </div>
 
-        <div class="text-center pt-6 border-t border-guild-700 mt-6">
-          <p class="text-guild-400 text-sm">
-            <a
-              href="https://babyghosts.fund/ghost-guild/"
-              class="text-candlelight-400 hover:text-candlelight-300 font-medium uppercase tracking-wide">
-              Pre-Register
-            </a>
-          </p>
+        <div class="coming-soon-preregister">
+          <a href="https://babyghosts.fund/ghost-guild/">Pre-Register</a>
         </div>
       </UForm>
     </div>
@@ -127,3 +109,138 @@ const handleLogout = async () => {
   await logout();
 };
 </script>
+
+<style scoped>
+.coming-soon {
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.coming-soon-title {
+  font-family: var(--font-display);
+  font-size: 3rem;
+  font-weight: 700;
+  color: var(--text-bright);
+  margin-bottom: 8px;
+}
+
+.coming-soon-subtitle {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin-bottom: 40px;
+  padding: 16px 0;
+}
+
+.coming-soon-auth {
+  width: 100%;
+  max-width: 24rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  text-align: center;
+  margin-top: 32px;
+  color: var(--text-dim);
+}
+
+.coming-soon-auth strong {
+  color: var(--text-bright);
+}
+
+.coming-soon-btn {
+  display: block;
+  width: 100%;
+  padding: 12px 24px;
+  background: var(--parch);
+  color: var(--parch-text);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  text-align: center;
+  transition: background 0.15s;
+}
+
+.coming-soon-btn:hover {
+  background: var(--parch-hover);
+  text-decoration: none;
+}
+
+.coming-soon-signout {
+  font-size: 12px;
+  color: var(--candle);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition: color 0.15s;
+  cursor: pointer;
+}
+
+.coming-soon-signout:hover {
+  color: var(--candle-dim);
+}
+
+.coming-soon-form {
+  width: 100%;
+  max-width: 24rem;
+}
+
+.coming-soon-success {
+  text-align: center;
+  padding: 16px 0;
+}
+
+.coming-soon-success h3 {
+  font-family: var(--font-display);
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--text-bright);
+  margin-bottom: 8px;
+}
+
+.coming-soon-success p {
+  color: var(--text-dim);
+}
+
+.coming-soon-success strong {
+  color: var(--text-bright);
+}
+
+.coming-soon-error {
+  margin-bottom: 16px;
+  padding: 12px;
+  background: var(--ember-bg);
+  border: 1px dashed var(--ember);
+}
+
+.coming-soon-error p {
+  color: var(--ember);
+  font-size: 12px;
+}
+
+.coming-soon-actions {
+  display: flex;
+  justify-content: center;
+}
+
+.coming-soon-preregister {
+  text-align: center;
+  padding-top: 24px;
+  border-top: 1px dashed var(--border);
+  margin-top: 24px;
+  font-size: 12px;
+}
+
+.coming-soon-preregister a {
+  color: var(--candle);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+</style>