Derive primary-button gradient from --primary; narrow calm bg to violet family

Two color-coherence fixes driven by me.sky-ai.com's UI review:

- The premium button gradient was a fixed 290→350 sweep that ended in
  hot pink, so CTAs read magenta against violet nav/links — and ignored
  the data-palette accents entirely. It now derives from var(--primary)
  with a subtle ±12° hue sweep (relative color syntax; degrades to the
  solid primary fill on older browsers). Dark mode needs no override —
  it follows dark's --primary. Affects all Prism consumers.

- The calm background variant (consumer surfaces) narrows from the full
  rainbow (violet/pink/cyan/mint corners) to an analogous violet family
  (periwinkle 245 → lavender 280 → violet 295 → pink 330), light + dark,
  including calm-specific aurora drift blobs. The cyan/green corners sat
  opposite the violet brand and made pages read as four brands at once.
  Full-strength drift is untouched.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

theme.css

@@ -500,34 +500,59 @@
     }
 
     /*
-     * ── Calm variant ── opt-in via body[data-bg="calm"]. The same hue
-     * story at roughly half the stain: corner gradients drop to ~45%
-     * alpha and the drift layer dims to match. For consumer surfaces
-     * (me.sky-ai.com) where full-strength drift floods short pages and
-     * the app reads as a white card floating on a poster. Dark mode is
-     * already calm — it keeps the standard dark gradients, only the
-     * drift layer eases.
+     * ── Calm variant ── opt-in via body[data-bg="calm"]. Quieter AND
+     * narrower than drift: corner gradients drop to ~45% alpha, the
+     * drift layer dims to match, and the hue story tightens from the
+     * full rainbow (violet/pink/cyan/mint) to an analogous violet
+     * family (periwinkle 245 → lavender 280 → violet 295 → pink 330).
+     * The cyan/green corners sat opposite the violet brand on the hue
+     * wheel and made consumer pages read as four different brands at
+     * once. For consumer surfaces (me.sky-ai.com) where full-strength
+     * drift floods short pages and the app reads as a white card
+     * floating on a poster.
      */
     body[data-bg="calm"] {
         background-image:
             radial-gradient(ellipse 80% 60% at 12% 8%, oklch(0.92 0.09 295 / 0.32), transparent 60%),
-            radial-gradient(ellipse 70% 60% at 88% 14%, oklch(0.93 0.1 350 / 0.30), transparent 55%),
-            radial-gradient(ellipse 80% 60% at 92% 88%, oklch(0.93 0.1 200 / 0.30), transparent 60%),
-            radial-gradient(ellipse 70% 60% at 8% 92%, oklch(0.94 0.09 145 / 0.28), transparent 55%),
-            linear-gradient(180deg, oklch(0.985 0.012 295), oklch(0.97 0.015 320));
+            radial-gradient(ellipse 70% 60% at 88% 14%, oklch(0.93 0.09 330 / 0.30), transparent 55%),
+            radial-gradient(ellipse 80% 60% at 92% 88%, oklch(0.93 0.08 245 / 0.30), transparent 60%),
+            radial-gradient(ellipse 70% 60% at 8% 92%, oklch(0.94 0.07 280 / 0.28), transparent 55%),
+            linear-gradient(180deg, oklch(0.985 0.012 295), oklch(0.97 0.015 310));
     }
     html.dark body[data-bg="calm"] {
         background-image:
             radial-gradient(ellipse 70% 55% at 10% 8%,  oklch(0.32 0.09 295 / 0.65), transparent 60%),
-            radial-gradient(ellipse 60% 50% at 90% 14%, oklch(0.30 0.09 340 / 0.60), transparent 55%),
-            radial-gradient(ellipse 70% 55% at 92% 90%, oklch(0.28 0.07 200 / 0.55), transparent 60%),
-            radial-gradient(ellipse 60% 50% at 8% 92%,  oklch(0.30 0.06 145 / 0.50), transparent 55%),
+            radial-gradient(ellipse 60% 50% at 90% 14%, oklch(0.30 0.08 330 / 0.60), transparent 55%),
+            radial-gradient(ellipse 70% 55% at 92% 90%, oklch(0.28 0.06 245 / 0.55), transparent 60%),
+            radial-gradient(ellipse 60% 50% at 8% 92%,  oklch(0.30 0.05 280 / 0.50), transparent 55%),
             linear-gradient(180deg, oklch(0.10 0.012 285), oklch(0.08 0.018 295));
     }
     body[data-bg="calm"] [data-slot="aurora-field"] { display: block; }
     body[data-bg="calm"] .aurora-blob { opacity: 0.4; }
     html.dark body[data-bg="calm"] .aurora-blob { opacity: 0.7; }
 
+    /* Calm drift blobs ride the same narrowed violet-family hues. */
+    body[data-bg="calm"] .aurora-blob-1 {
+        background-image:
+            radial-gradient(ellipse 44% 36% at 22% 28%, oklch(0.9 0.11 295 / 0.85), transparent 60%),
+            radial-gradient(ellipse 38% 32% at 78% 22%, oklch(0.9 0.1 330 / 0.8),  transparent 55%);
+    }
+    body[data-bg="calm"] .aurora-blob-2 {
+        background-image:
+            radial-gradient(ellipse 48% 38% at 82% 74%, oklch(0.9 0.1 245 / 0.8),  transparent 60%),
+            radial-gradient(ellipse 42% 34% at 16% 80%, oklch(0.92 0.08 280 / 0.75), transparent 55%);
+    }
+    html.dark body[data-bg="calm"] .aurora-blob-1 {
+        background-image:
+            radial-gradient(ellipse 44% 36% at 22% 28%, oklch(0.32 0.09 295 / 0.55), transparent 60%),
+            radial-gradient(ellipse 38% 32% at 78% 22%, oklch(0.30 0.08 330 / 0.50), transparent 55%);
+    }
+    html.dark body[data-bg="calm"] .aurora-blob-2 {
+        background-image:
+            radial-gradient(ellipse 48% 38% at 82% 74%, oklch(0.28 0.06 245 / 0.50), transparent 60%),
+            radial-gradient(ellipse 42% 34% at 16% 80%, oklch(0.30 0.05 280 / 0.45), transparent 55%);
+    }
+
     @keyframes prism-drift-a {
         0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
         33%      { transform: translate3d(5%, -3%, 0) rotate(10deg) scale(1.07); }
@@ -590,14 +615,18 @@
     }
 
     /*
-     * Premium primary button — violet→fuchsia gradient + top-edge sheen.
+     * Premium primary button — gradient derived from --primary (subtle
+     * ±12° hue sweep) + top-edge sheen. Deriving rather than hardcoding
+     * keeps buttons on-brand with whatever --primary resolves to: the
+     * old fixed 290→350 sweep ended in hot pink, so CTAs read magenta
+     * against violet nav/links — and ignored the data-palette accents.
      */
     [data-slot="button"].bg-primary {
         background-image: linear-gradient(
             135deg,
-            oklch(0.56 0.24 290) 0%,
-            oklch(0.6 0.26 320) 50%,
-            oklch(0.58 0.24 350) 100%
+            oklch(from var(--primary) calc(l + 0.04) c calc(h - 12)) 0%,
+            var(--primary) 50%,
+            oklch(from var(--primary) calc(l - 0.02) c calc(h + 14)) 100%
         );
         position: relative;
         isolation: isolate;
@@ -616,14 +645,7 @@
         );
         mix-blend-mode: plus-lighter;
     }
-    .dark [data-slot="button"].bg-primary {
-        background-image: linear-gradient(
-            135deg,
-            oklch(0.66 0.22 290) 0%,
-            oklch(0.7 0.24 320) 50%,
-            oklch(0.66 0.22 350) 100%
-        );
-    }
+    /* Dark needs no gradient override — it derives from dark --primary. */
     .dark [data-slot="button"].bg-primary::after {
         background: linear-gradient(
             180deg,