Refine coming soon experience and global ambient UI

app/globals.css

@@ -40,6 +40,9 @@
 
   --brand-primary: 214 84% 42%;
   --brand-secondary: 191 78% 42%;
+  --ambient-primary-alpha: 0.18;
+  --ambient-secondary-alpha: 0.14;
+  --ambient-grid-alpha: 0.4;
 
   --radius-surface: 0rem;
   --radius-nested: 0rem;
@@ -111,6 +114,9 @@
 
   --brand-primary: 205 88% 64%;
   --brand-secondary: 190 76% 57%;
+  --ambient-primary-alpha: 0.22;
+  --ambient-secondary-alpha: 0.18;
+  --ambient-grid-alpha: 0.32;
 
   --shadow-xs: 0 1px 2px hsl(220 50% 2% / 0.42);
   --shadow-sm: 0 14px 30px -20px hsl(220 50% 2% / 0.48);
@@ -145,7 +151,24 @@ html.dark {
   }
 
   body {
-    @apply min-h-screen bg-background text-foreground antialiased;
+    @apply min-h-screen text-foreground antialiased;
+    background-color: hsl(var(--background));
+    background-image:
+      radial-gradient(
+        circle at top,
+        hsl(var(--brand-primary) / var(--ambient-primary-alpha)),
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at bottom right,
+        hsl(var(--brand-secondary) / var(--ambient-secondary-alpha)),
+        transparent 30%
+      ),
+      linear-gradient(hsl(var(--border) / var(--ambient-grid-alpha)) 1px, transparent 1px),
+      linear-gradient(90deg, hsl(var(--border) / var(--ambient-grid-alpha)) 1px, transparent 1px);
+    background-size: auto, auto, 24px 24px, 24px 24px;
+    background-position: center top, right bottom, center center, center center;
+    background-attachment: fixed;
   }
 
   a {
@@ -187,4 +210,18 @@ html.dark {
     background-size: 24px 24px;
     background-position: center center;
   }
+
+  .surface-ambient {
+    background-image:
+      radial-gradient(
+        circle at top,
+        hsl(var(--brand-primary) / calc(var(--ambient-primary-alpha) + 0.04)),
+        transparent 36%
+      ),
+      radial-gradient(
+        circle at bottom right,
+        hsl(var(--brand-secondary) / calc(var(--ambient-secondary-alpha) + 0.03)),
+        transparent 32%
+      );
+  }
 }