@elevasis/ui 1.24.3 → 1.25.0

package/dist/{chunk-OH74INP2.js → chunk-FEZZ3IDU.js}

@@ -1,4 +1,4 @@
-import { AppBackground, CyberBackground, WaveBackground } from './chunk-JR2C4XAN.js';
+import { AppBackground, AmbientBloomGrid, CyberBackground, FloatingMotes, WaveBackground } from './chunk-CYXZHBP4.js';
 import { createElement, Fragment, createContext, useRef, useEffect, useContext } from 'react';
 import { jsxs, Fragment as Fragment$1, jsx } from 'react/jsx-runtime';
 import { Tooltip, Text, Tabs, Table, Stack, SimpleGrid, Select, Combobox, SegmentedControl, ScrollArea, Paper, Popover, Notification, Modal, Menu, Input, HoverCard, Group, Grid, Flex, Code, Divider, Card, Button, Accordion, createTheme } from '@mantine/core';
@@ -64,109 +64,6 @@ function generateShades(hex) {
   ];
   return targets.map((tl) => hslToHex(h, s, tl));
 }
-var STYLE = `
-  /* NOTE: does not neutralize AppShellContainer's background paint, unlike
-     ChromeBackground / ConstellationBackground. AmbientBloom is designed to
-     compose *above* existing background layers (CyberBackground's grid,
-     ConstellationBackground's canvas), so it must not knock out the base
-     color paint the sibling background relies on. */
-  .elevasis-ambient-bloom {
-    display: none;
-    position: fixed;
-    inset: 0;
-    pointer-events: none;
-    overflow: hidden;
-  }
-  [data-mantine-color-scheme="dark"] .elevasis-ambient-bloom {
-    display: block;
-  }
-  [data-mantine-color-scheme="dark"] .elevasis-ambient-bloom-lobe {
-    mix-blend-mode: screen;
-  }
-  @keyframes elevasis-ambient-bloom-a {
-    0%, 100% { transform: translate(0, 0) scale(1); }
-    33% { transform: translate(4%, -5%) scale(1.08); }
-    66% { transform: translate(-5%, 4%) scale(0.94); }
-  }
-  @keyframes elevasis-ambient-bloom-b {
-    0%, 100% { transform: translate(0, 0) scale(1); }
-    50% { transform: translate(-6%, 6%) scale(1.12); }
-  }
-  @keyframes elevasis-ambient-bloom-c {
-    0%, 100% { transform: translate(0, 0) scale(1); }
-    40% { transform: translate(5%, 4%) scale(0.9); }
-    80% { transform: translate(-4%, -6%) scale(1.08); }
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .elevasis-ambient-bloom-lobe { animation: none !important; }
-  }
-`;
-function AmbientBloom({
-  color = "var(--color-primary)",
-  intensity = 0.08
-}) {
-  const primaryPct = `${Math.round(intensity * 100)}%`;
-  const secondaryPct = `${Math.round(intensity * 80)}%`;
-  const tertiaryPct = `${Math.round(intensity * 60)}%`;
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx("style", { children: STYLE }),
-    /* @__PURE__ */ jsxs("div", { className: "elevasis-ambient-bloom", "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "elevasis-ambient-bloom-lobe",
-          style: {
-            position: "absolute",
-            top: "-30%",
-            left: "0%",
-            width: "100%",
-            height: "92%",
-            background: `radial-gradient(ellipse at center, color-mix(in srgb, ${color} ${primaryPct}, transparent) 0%, transparent 60%)`,
-            filter: "blur(80px)",
-            animation: "elevasis-ambient-bloom-a 32s ease-in-out infinite",
-            willChange: "transform"
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "elevasis-ambient-bloom-lobe",
-          style: {
-            position: "absolute",
-            top: "15%",
-            right: "-20%",
-            width: "88%",
-            height: "82%",
-            background: `radial-gradient(ellipse at center, color-mix(in srgb, ${color} ${secondaryPct}, transparent) 0%, transparent 65%)`,
-            filter: "blur(90px)",
-            animation: "elevasis-ambient-bloom-b 40s ease-in-out infinite",
-            willChange: "transform"
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "elevasis-ambient-bloom-lobe",
-          style: {
-            position: "absolute",
-            top: "15%",
-            left: "-15%",
-            width: "82%",
-            height: "78%",
-            background: `radial-gradient(ellipse at center, color-mix(in srgb, ${color} ${tertiaryPct}, transparent) 0%, transparent 60%)`,
-            filter: "blur(100px)",
-            animation: "elevasis-ambient-bloom-c 36s ease-in-out infinite",
-            willChange: "transform"
-          }
-        }
-      )
-    ] })
-  ] });
-}
-
-// src/theme/presets/default.ts
 var defaultPreset = {
   subtitleFontFamily: '"Inter", sans-serif',
   fontImports: ["https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"],
@@ -174,7 +71,7 @@ var defaultPreset = {
     Fragment,
     null,
     createElement(AppBackground),
-    createElement(AmbientBloom, { intensity: 0.06, color: "#606468" })
+    createElement(AmbientBloomGrid, { intensity: 0.06, color: "#606468", size: 1.2 })
   ),
   light: {
     primary: "#0099ff",
@@ -182,6 +79,7 @@ var defaultPreset = {
     background: "#ededf0",
     surface: "#f5f5f5",
     surfaceHover: "#f2f2f2",
+    elevatedSurface: "rgba(255, 255, 255, 0.95)",
     text: "#212529",
     textDimmed: "#495057",
     textSubtle: "#868e96",
@@ -206,6 +104,7 @@ var defaultPreset = {
     background: "#040404",
     surface: "rgba(16, 16, 18, 0.52)",
     surfaceHover: "rgba(24, 24, 26, 0.56)",
+    elevatedSurface: "rgba(22, 22, 24, 0.93)",
     text: "#ffffff",
     textDimmed: "#c1c2c5",
     textSubtle: "#999999",
@@ -230,7 +129,7 @@ var tacticalPreset = {
     Fragment,
     null,
     createElement(AppBackground),
-    createElement(AmbientBloom, { intensity: 0.07, color: "#5A6070" })
+    createElement(AmbientBloomGrid, { intensity: 0.07, color: "#5A6070", size: 1.2 })
   ),
   light: {
     primary: "#0099ff",
@@ -238,6 +137,7 @@ var tacticalPreset = {
     background: "#EAEBEE",
     surface: "#F3F3F6",
     surfaceHover: "#DFDFE4",
+    elevatedSurface: "rgba(255, 255, 255, 0.85)",
     text: "#0F1319",
     textDimmed: "#3B4559",
     textSubtle: "#5D677B",
@@ -262,14 +162,15 @@ var tacticalPreset = {
     background: "#030304",
     surface: "rgba(18, 19, 21, 0.3)",
     surfaceHover: "rgba(32, 33, 36, 0.5)",
+    elevatedSurface: "rgba(18, 21, 27, 0.85)",
     text: "#EFF1F4",
     textDimmed: "#B0B8C4",
     textSubtle: "#8890A0",
-    border: "rgba(136, 144, 160, 0.07)",
+    border: "rgba(136, 144, 160, 0.08)",
     error: "#FF4757",
     warning: "#FFA502",
     success: "#2ED573",
-    glassBackground: "rgba(14, 15, 17, 0.66)",
+    glassBackground: "rgba(14, 15, 17, 0.6)",
     glassBlur: "blur(24px) saturate(170%)",
     shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
     cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 2px 8px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.4), 0 32px 64px -16px rgba(0, 0, 0, 0.3)",
@@ -294,7 +195,7 @@ var regalPreset = {
     Fragment,
     null,
     createElement(AppBackground),
-    createElement(AmbientBloom, { intensity: 0.12, color: "#606870" })
+    createElement(AmbientBloomGrid, { intensity: 0.09, color: "#6E727A", size: 1.2 })
   ),
   light: {
     primary: "#B8922F",
@@ -321,22 +222,23 @@ var regalPreset = {
     fontSans: '"Inter", sans-serif'
   },
   dark: {
-    primary: "#C9A044",
-    primaryContrast: "#0A0800",
-    background: "#000000",
+    primary: "#C0A558",
+    primaryContrast: "#0A0A0A",
+    background: "#020203",
     surface: "transparent",
-    surfaceHover: "rgba(22, 23, 26, 0.12)",
-    text: "#E8E6E2",
-    textDimmed: "#A0A0A0",
-    textSubtle: "#707070",
+    surfaceHover: "rgba(180, 180, 188, 0.08)",
+    elevatedSurface: "rgba(16, 16, 19, 0.85)",
+    text: "#F0F0F2",
+    textDimmed: "#C2C2C4",
+    textSubtle: "#96969A",
     border: "rgba(255, 255, 255, 0.06)",
     error: "#E05252",
     warning: "#D4943C",
     success: "#4AA84A",
-    glassBackground: "rgba(16, 17, 20, 0.36)",
-    glassBlur: "blur(22px) saturate(180%)",
+    glassBackground: "rgba(16, 17, 20, 0.45)",
+    glassBlur: "blur(18px) saturate(180%)",
     shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 8px 24px -8px rgba(0, 0, 0, 0.5), 0px 20px 48px -16px rgba(0, 0, 0, 0.35)",
-    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 2px 8px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.4), 0 32px 64px -16px rgba(0, 0, 0, 0.3)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 2px 8px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.4), 0 32px 40px -16px rgba(0, 0, 0, 0.2)",
     durationFast: "180ms",
     durationNormal: "320ms",
     easing: "cubic-bezier(0.25, 0.1, 0.25, 1)",
@@ -363,8 +265,8 @@ var cyberVoltPreset = {
   background: createElement(
     Fragment,
     null,
-    createElement(CyberBackground, { variant: "volt" }),
-    createElement(AmbientBloom, { intensity: 0.11 })
+    createElement(CyberBackground, { variant: "void", perspectiveGridRadialGlowIntensity: 14 }),
+    createElement(AmbientBloomGrid, { intensity: 0.07, size: 1.3 })
   ),
   light: {
     primary: "#0097A7",
@@ -372,6 +274,7 @@ var cyberVoltPreset = {
     background: "#F5FAFB",
     surface: "transparent",
     surfaceHover: "rgba(0, 151, 167, 0.08)",
+    elevatedSurface: "rgba(255, 255, 255, 0.85)",
     text: "#0A0E14",
     textDimmed: "#2E3A4D",
     textSubtle: "#556680",
@@ -393,20 +296,21 @@ var cyberVoltPreset = {
   dark: {
     primary: "#00A8BD",
     primaryContrast: "#001418",
-    background: "#030506",
+    background: "#040607",
     surface: "transparent",
     surfaceHover: "rgba(0, 229, 255, 0.06)",
+    elevatedSurface: "rgba(16, 19, 21, 0.85)",
     text: "#E0F7FA",
     textDimmed: "#80DEEA",
-    textSubtle: "#5E8A94",
-    border: "rgba(0, 229, 255, 0.1)",
+    textSubtle: "#82BEC8",
+    border: "rgba(0, 229, 255, 0.08)",
     error: "#FF1744",
     warning: "#FF9100",
     success: "#00E676",
-    glassBackground: "rgba(6, 14, 20, 0.3)",
-    glassBlur: "blur(18px) saturate(180%)",
+    glassBackground: "rgba(8, 16, 22, 0.25)",
+    glassBlur: "blur(14px) saturate(160%)",
     shadow: "0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.4)",
-    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(0, 229, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 48px -18px rgba(0, 0, 0, 0.35)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(0, 229, 255, 0.06), 0 4px 4px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 48px -18px rgba(0, 0, 0, 0.25)",
     durationFast: "80ms",
     durationNormal: "160ms",
     easing: "cubic-bezier(0.16, 1, 0.3, 1)",
@@ -423,7 +327,7 @@ var cyberVoltPreset = {
   },
   fontImports: ["https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&display=swap"]
 };
-var STYLE2 = `
+var STYLE = `
   div[style*="var(--color-background)"][style*="100vh"] {
     background-color: transparent !important;
     isolation: isolate;
@@ -478,16 +382,16 @@ var STYLE2 = `
   }
   [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="ember"] {
     --chrome-base: #F7F3EF;
-    --chrome-origin-glow: rgba(254, 215, 170, 0.45);
+    --chrome-origin-glow: rgba(225, 195, 165, 0.4);
     --chrome-vignette: rgba(44, 23, 8, 0.05);
-    --chrome-beam-1: #F97316;
-    --chrome-beam-2: #FB923C;
-    --chrome-beam-3: #EA580C;
-    --chrome-beam-4: #FDBA74;
-    --chrome-beam-5: #F59E0B;
-    --chrome-beam-6: #FB923C;
-    --chrome-beam-7: #F97316;
-    --chrome-beam-8: #FDBA74;
+    --chrome-beam-1: #D4805A;
+    --chrome-beam-2: #D49468;
+    --chrome-beam-3: #BE6A40;
+    --chrome-beam-4: #D9A888;
+    --chrome-beam-5: #C48848;
+    --chrome-beam-6: #D49468;
+    --chrome-beam-7: #D4805A;
+    --chrome-beam-8: #D9A888;
   }
 
   /* ============ Dark mode variant palettes ============ */
@@ -518,13 +422,13 @@ var STYLE2 = `
     --chrome-beam-8: #059669;
   }
   [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] {
-    --chrome-base: #070405;
+    --chrome-base: #030202;
     --chrome-origin-glow: rgba(232, 165, 152, 0.05);
     --chrome-vignette: rgba(0, 0, 0, 0.4);
-    --chrome-beam-1: #4C0519;
-    --chrome-beam-2: #881337;
-    --chrome-beam-3: #9F1239;
-    --chrome-beam-4: #7C2D12;
+    --chrome-beam-1: #9F4060;
+    --chrome-beam-2: #B85070;
+    --chrome-beam-3: #C05A6A;
+    --chrome-beam-4: #A8583C;
     --chrome-beam-5: #A8695E;
     --chrome-beam-6: #C07A6F;
     --chrome-beam-7: #E8A598;
@@ -532,16 +436,16 @@ var STYLE2 = `
   }
   [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="ember"] {
     --chrome-base: #060302;
-    --chrome-origin-glow: rgba(232, 123, 85, 0.05);
+    --chrome-origin-glow: rgba(180, 120, 90, 0.05);
     --chrome-vignette: rgba(0, 0, 0, 0.4);
-    --chrome-beam-1: #431407;
-    --chrome-beam-2: #7C2D12;
-    --chrome-beam-3: #9A3412;
-    --chrome-beam-4: #B45309;
-    --chrome-beam-5: #C2410C;
-    --chrome-beam-6: #92400E;
-    --chrome-beam-7: #EA580C;
-    --chrome-beam-8: #78350F;
+    --chrome-beam-1: #8C4830;
+    --chrome-beam-2: #9C5A3A;
+    --chrome-beam-3: #7E4028;
+    --chrome-beam-4: #94583A;
+    --chrome-beam-5: #A05838;
+    --chrome-beam-6: #8A5034;
+    --chrome-beam-7: #A05F38;
+    --chrome-beam-8: #8A4E38;
   }
 
   /* ============ Shared geometry ============ */
@@ -572,7 +476,7 @@ var STYLE2 = `
     top: 50%;
     left: 0;
     right: 0;
-    height: 18vmax;
+    height: 32vmax;
     filter: blur(55px);
     transform-origin: center;
   }
@@ -582,103 +486,177 @@ var STYLE2 = `
     mix-blend-mode: multiply;
   }
   [data-mantine-color-scheme="light"] .chrome-bg-beam-1 {
-    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-1) 25%, var(--chrome-beam-1) 75%, transparent 95%);
+    background: linear-gradient(to right, transparent 0%, var(--chrome-beam-1) 10%, var(--chrome-beam-1) 90%, transparent 100%);
     transform: rotate(0deg);
     opacity: 0.09;
   }
   [data-mantine-color-scheme="light"] .chrome-bg-beam-2 {
-    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-2) 25%, var(--chrome-beam-2) 75%, transparent 95%);
+    background: linear-gradient(to right, transparent 0%, var(--chrome-beam-2) 10%, var(--chrome-beam-2) 90%, transparent 100%);
     transform: rotate(22.5deg);
     opacity: 0.08;
   }
   [data-mantine-color-scheme="light"] .chrome-bg-beam-3 {
-    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-3) 25%, var(--chrome-beam-3) 75%, transparent 95%);
+    background: linear-gradient(to right, transparent 0%, var(--chrome-beam-3) 10%, var(--chrome-beam-3) 90%, transparent 100%);
     transform: rotate(45deg);
     opacity: 0.09;
   }
   [data-mantine-color-scheme="light"] .chrome-bg-beam-4 {
-    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-4) 25%, var(--chrome-beam-4) 75%, transparent 95%);
+    background: linear-gradient(to right, transparent 0%, var(--chrome-beam-4) 10%, var(--chrome-beam-4) 90%, transparent 100%);
     transform: rotate(67.5deg);
     opacity: 0.07;
   }
   [data-mantine-color-scheme="light"] .chrome-bg-beam-5 {
-    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-5) 25%, var(--chrome-beam-5) 75%, transparent 95%);
+    background: linear-gradient(to right, transparent 0%, var(--chrome-beam-5) 10%, var(--chrome-beam-5) 90%, transparent 100%);
     transform: rotate(90deg);
     opacity: 0.09;
   }
   [data-mantine-color-scheme="light"] .chrome-bg-beam-6 {
-    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-6) 25%, var(--chrome-beam-6) 75%, transparent 95%);
+    background: linear-gradient(to right, transparent 0%, var(--chrome-beam-6) 10%, var(--chrome-beam-6) 90%, transparent 100%);
     transform: rotate(112.5deg);
     opacity: 0.07;
   }
   [data-mantine-color-scheme="light"] .chrome-bg-beam-7 {
-    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-7) 25%, var(--chrome-beam-7) 75%, transparent 95%);
+    background: linear-gradient(to right, transparent 0%, var(--chrome-beam-7) 10%, var(--chrome-beam-7) 90%, transparent 100%);
     transform: rotate(135deg);
     opacity: 0.09;
   }
   [data-mantine-color-scheme="light"] .chrome-bg-beam-8 {
-    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-8) 25%, var(--chrome-beam-8) 75%, transparent 95%);
+    background: linear-gradient(to right, transparent 0%, var(--chrome-beam-8) 10%, var(--chrome-beam-8) 90%, transparent 100%);
     transform: rotate(157.5deg);
     opacity: 0.07;
   }
 
+  /* Midnight light mode: reduce beam intensity by one step */
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-1,
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-3,
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-5,
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-7 {
+    opacity: 0.08;
+  }
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-2 {
+    opacity: 0.07;
+  }
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-4,
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-6,
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-8 {
+    opacity: 0.06;
+  }
+
+  /* Aurora light mode: reduce beam intensity by one step */
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-1,
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-3,
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-5,
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-7 {
+    opacity: 0.08;
+  }
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-2 {
+    opacity: 0.07;
+  }
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-4,
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-6,
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-8 {
+    opacity: 0.06;
+  }
+
   /* Dark mode: screen blend with low opacity over near-black base */
   [data-mantine-color-scheme="dark"] .chrome-bg-beam {
     mix-blend-mode: screen;
   }
   [data-mantine-color-scheme="dark"] .chrome-bg-beam-1 {
-    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-1) 25%, var(--chrome-beam-1) 75%, transparent 95%);
+    background: linear-gradient(to right, transparent 0%, var(--chrome-beam-1) 10%, var(--chrome-beam-1) 90%, transparent 100%);
     transform: rotate(0deg);
     opacity: 0.12;
   }
   [data-mantine-color-scheme="dark"] .chrome-bg-beam-2 {
-    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-2) 25%, var(--chrome-beam-2) 75%, transparent 95%);
+    background: linear-gradient(to right, transparent 0%, var(--chrome-beam-2) 10%, var(--chrome-beam-2) 90%, transparent 100%);
     transform: rotate(22.5deg);
     opacity: 0.1;
   }
   [data-mantine-color-scheme="dark"] .chrome-bg-beam-3 {
-    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-3) 25%, var(--chrome-beam-3) 75%, transparent 95%);
+    background: linear-gradient(to right, transparent 0%, var(--chrome-beam-3) 10%, var(--chrome-beam-3) 90%, transparent 100%);
     transform: rotate(45deg);
     opacity: 0.12;
   }
   [data-mantine-color-scheme="dark"] .chrome-bg-beam-4 {
-    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-4) 25%, var(--chrome-beam-4) 75%, transparent 95%);
+    background: linear-gradient(to right, transparent 0%, var(--chrome-beam-4) 10%, var(--chrome-beam-4) 90%, transparent 100%);
     transform: rotate(67.5deg);
     opacity: 0.1;
   }
   [data-mantine-color-scheme="dark"] .chrome-bg-beam-5 {
-    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-5) 25%, var(--chrome-beam-5) 75%, transparent 95%);
+    background: linear-gradient(to right, transparent 0%, var(--chrome-beam-5) 10%, var(--chrome-beam-5) 90%, transparent 100%);
     transform: rotate(90deg);
     opacity: 0.12;
   }
   [data-mantine-color-scheme="dark"] .chrome-bg-beam-6 {
-    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-6) 25%, var(--chrome-beam-6) 75%, transparent 95%);
+    background: linear-gradient(to right, transparent 0%, var(--chrome-beam-6) 10%, var(--chrome-beam-6) 90%, transparent 100%);
     transform: rotate(112.5deg);
     opacity: 0.1;
   }
   [data-mantine-color-scheme="dark"] .chrome-bg-beam-7 {
-    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-7) 25%, var(--chrome-beam-7) 75%, transparent 95%);
+    background: linear-gradient(to right, transparent 0%, var(--chrome-beam-7) 10%, var(--chrome-beam-7) 90%, transparent 100%);
     transform: rotate(135deg);
     opacity: 0.12;
   }
   [data-mantine-color-scheme="dark"] .chrome-bg-beam-8 {
-    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-8) 25%, var(--chrome-beam-8) 75%, transparent 95%);
+    background: linear-gradient(to right, transparent 0%, var(--chrome-beam-8) 10%, var(--chrome-beam-8) 90%, transparent 100%);
     transform: rotate(157.5deg);
     opacity: 0.1;
   }
 
+  /* Rose-gold dark mode: reduced brightness */
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] .chrome-bg-beam-1,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] .chrome-bg-beam-3,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] .chrome-bg-beam-5,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] .chrome-bg-beam-7 {
+    opacity: 0.07;
+  }
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] .chrome-bg-beam-2,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] .chrome-bg-beam-4,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] .chrome-bg-beam-6,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] .chrome-bg-beam-8 {
+    opacity: 0.06;
+  }
+
+  /* Ember dark mode: softened beams to match calmer terracotta palette */
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="ember"] .chrome-bg-beam-1,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="ember"] .chrome-bg-beam-3,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="ember"] .chrome-bg-beam-5,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="ember"] .chrome-bg-beam-7 {
+    opacity: 0.08;
+  }
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="ember"] .chrome-bg-beam-2,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="ember"] .chrome-bg-beam-4,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="ember"] .chrome-bg-beam-6,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="ember"] .chrome-bg-beam-8 {
+    opacity: 0.06;
+  }
+
   /* Aurora dark mode: softer beams to reduce ambient bloom */
   [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-1,
   [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-3,
   [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-5,
   [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-7 {
-    opacity: 0.07;
+    opacity: 0.12;
   }
   [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-2,
   [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-4,
   [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-6,
   [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-8 {
-    opacity: 0.06;
+    opacity: 0.09;
+  }
+
+  /* Midnight dark mode: slightly brighter beams */
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-1,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-3,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-5,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-7 {
+    opacity: 0.14;
+  }
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-2,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-4,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-6,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-8 {
+    opacity: 0.11;
   }
 
   @keyframes chrome-rotate {
@@ -693,7 +671,7 @@ var STYLE2 = `
 `;
 function ChromeBackground({ variant }) {
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx("style", { children: STYLE2 }),
+    /* @__PURE__ */ jsx("style", { children: STYLE }),
     /* @__PURE__ */ jsx("div", { className: "chrome-bg-root", "data-variant": variant, "aria-hidden": "true", children: /* @__PURE__ */ jsxs("div", { className: "chrome-bg-wrapper", children: [
       /* @__PURE__ */ jsx("div", { className: "chrome-bg-beam chrome-bg-beam-1" }),
       /* @__PURE__ */ jsx("div", { className: "chrome-bg-beam chrome-bg-beam-2" }),
@@ -718,6 +696,7 @@ var auroraPreset = {
     background: "#EFF5F3",
     surface: "transparent",
     surfaceHover: "rgba(0, 137, 123, 0.08)",
+    elevatedSurface: "rgba(255, 255, 255, 0.85)",
     text: "#0A1E1A",
     textDimmed: "#3D5E54",
     textSubtle: "#507368",
@@ -739,20 +718,21 @@ var auroraPreset = {
   dark: {
     primary: "#00A88A",
     primaryContrast: "#062E26",
-    background: "#020807",
+    background: "#070D0C",
     surface: "transparent",
-    surfaceHover: "#0E2620",
+    surfaceHover: "rgba(0, 168, 138, 0.10)",
+    elevatedSurface: "rgba(19, 26, 24, 0.85)",
     text: "#E0F2F1",
     textDimmed: "#80CBC4",
-    textSubtle: "#68C8BE",
+    textSubtle: "#64B0A8",
     border: "rgba(128, 203, 196, 0.09)",
     error: "#F87171",
     warning: "#FBBF24",
     success: "#4ADE80",
-    glassBackground: "rgba(10, 20, 18, 0.35)",
-    glassBlur: "blur(28px) saturate(180%)",
+    glassBackground: "rgba(18, 28, 24, 0.3)",
+    glassBlur: "blur(28px) saturate(220%)",
     shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
-    cardShadow: "inset 0 1px 0 rgba(128, 203, 196, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 2px 8px rgba(0, 0, 0, 0.45), 0 14px 34px -6px rgba(0, 0, 0, 0.55), 0 36px 68px -14px rgba(0, 0, 0, 0.45), 0 48px 96px -24px rgba(16, 185, 129, 0.14)",
+    cardShadow: "inset 0 1px 0 rgba(128, 203, 196, 0.07), inset 0 0 0 1px rgba(128, 203, 196, 0.04), 0 2px 8px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.42), 0 32px 64px -16px rgba(0, 0, 0, 0.25)",
     durationFast: "160ms",
     durationNormal: "280ms",
     easing: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -783,6 +763,7 @@ var roseGoldPreset = {
     background: "#F4F0EE",
     surface: "transparent",
     surfaceHover: "rgba(168, 105, 94, 0.08)",
+    elevatedSurface: "rgba(255, 252, 251, 0.85)",
     text: "#2D1516",
     textDimmed: "#5A4448",
     textSubtle: "#9A848A",
@@ -804,20 +785,21 @@ var roseGoldPreset = {
   dark: {
     primary: "#A56B5E",
     primaryContrast: "#2D1A16",
-    background: "#070405",
+    background: "#0B0809",
     surface: "transparent",
-    surfaceHover: "#221418",
+    surfaceHover: "rgba(165, 107, 94, 0.10)",
+    elevatedSurface: "rgba(23, 20, 21, 0.85)",
     text: "#F5E8E6",
     textDimmed: "#D8B8B2",
     textSubtle: "#B89A94",
-    border: "rgba(216, 184, 178, 0.08)",
+    border: "rgba(216, 184, 178, 0.06)",
     error: "#F87171",
     warning: "#FBBF24",
     success: "#4ADE80",
-    glassBackground: "rgba(22, 14, 16, 0.35)",
-    glassBlur: "blur(28px) saturate(180%)",
+    glassBackground: "rgba(35, 27, 31, 0.32)",
+    glassBlur: "blur(28px) saturate(210%)",
     shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
-    cardShadow: "inset 0 1px 0 rgba(216, 184, 178, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 2px 8px rgba(0, 0, 0, 0.45), 0 14px 34px -6px rgba(0, 0, 0, 0.55), 0 36px 68px -14px rgba(0, 0, 0, 0.45), 0 48px 96px -24px rgba(200, 137, 124, 0.16)",
+    cardShadow: "inset 0 1px 0 rgba(216, 184, 178, 0.07), inset 0 0 0 1px rgba(216, 184, 178, 0.03), 0 2px 8px rgba(0, 0, 0, 0.25), 0 12px 32px -8px rgba(0, 0, 0, 0.32), 0 32px 64px -16px rgba(0, 0, 0, 0.25)",
     durationFast: "160ms",
     durationNormal: "300ms",
     easing: "cubic-bezier(0.25, 0.1, 0.25, 1)",
@@ -847,6 +829,7 @@ var midnightPreset = {
     background: "#F3F5FA",
     surface: "transparent",
     surfaceHover: "rgba(71, 85, 105, 0.08)",
+    elevatedSurface: "rgba(255, 255, 255, 0.85)",
     text: "#0A1020",
     textDimmed: "#374358",
     textSubtle: "#64708A",
@@ -868,20 +851,21 @@ var midnightPreset = {
   dark: {
     primary: "#7888A8",
     primaryContrast: "#F1F5F9",
-    background: "#060A14",
+    background: "#080C16",
     surface: "transparent",
-    surfaceHover: "#171A24",
+    surfaceHover: "rgba(120, 136, 168, 0.09)",
+    elevatedSurface: "rgba(19, 24, 36, 0.85)",
     text: "#F1F5F9",
     textDimmed: "#CBD5E1",
     textSubtle: "#94A3B8",
-    border: "rgba(193, 203, 215, 0.08)",
+    border: "rgba(193, 203, 215, 0.07)",
     error: "#F87171",
     warning: "#FBBF24",
     success: "#4ADE80",
-    glassBackground: "rgba(13, 15, 22, 0.33)",
-    glassBlur: "blur(28px) saturate(180%)",
+    glassBackground: "rgba(20, 22, 31, 0.25)",
+    glassBlur: "blur(18px) saturate(210%)",
     shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
-    cardShadow: "inset 0 1px 0 rgba(203, 213, 225, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.01), 0 2px 8px rgba(0, 0, 0, 0.45), 0 14px 34px -6px rgba(0, 0, 0, 0.55), 0 36px 68px -14px rgba(0, 0, 0, 0.45), 0 48px 96px -24px rgba(100, 116, 139, 0.1)",
+    cardShadow: "inset 0 1px 0 rgba(203, 213, 225, 0.02), inset 0 0 0 1px rgba(203, 213, 225, 0.01), 0 2px 8px rgba(0, 0, 0, 0.5), 0 12px 32px -8px rgba(0, 0, 0, 0.35), 0 32px 64px -16px rgba(0, 0, 0, 0.12)",
     durationFast: "160ms",
     durationNormal: "280ms",
     easing: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -907,11 +891,12 @@ var emberPreset = {
   ],
   background: createElement(ChromeBackground, { variant: "ember" }),
   light: {
-    primary: "#D4603A",
+    primary: "#C26040",
     primaryContrast: "#ffffff",
     background: "#F3EFEB",
     surface: "transparent",
     surfaceHover: "rgba(212, 96, 58, 0.08)",
+    elevatedSurface: "rgba(255, 255, 255, 0.85)",
     text: "#2C1708",
     textDimmed: "#5E4A3A",
     textSubtle: "#8D7A6A",
@@ -931,11 +916,12 @@ var emberPreset = {
     fontSans: '"Source Sans 3", sans-serif'
   },
   dark: {
-    primary: "#E87B55",
+    primary: "#D07055",
     primaryContrast: "#1A0E08",
-    background: "#060302",
+    background: "#120F0E",
     surface: "transparent",
-    surfaceHover: "#1F1410",
+    surfaceHover: "rgba(208, 112, 85, 0.10)",
+    elevatedSurface: "rgba(30, 26, 23, 0.85)",
     text: "#F5EDE6",
     textDimmed: "#D4B9A0",
     textSubtle: "#B8A090",
@@ -943,10 +929,10 @@ var emberPreset = {
     error: "#F87171",
     warning: "#FBBF24",
     success: "#4ADE80",
-    glassBackground: "rgba(20, 14, 10, 0.35)",
-    glassBlur: "blur(28px) saturate(180%)",
+    glassBackground: "rgba(35, 29, 25, 0.3)",
+    glassBlur: "blur(18px) saturate(175%)",
     shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
-    cardShadow: "inset 0 1px 0 rgba(232, 123, 85, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.01), 0 2px 8px rgba(0, 0, 0, 0.45), 0 14px 34px -6px rgba(0, 0, 0, 0.55), 0 36px 68px -14px rgba(0, 0, 0, 0.45), 0 48px 96px -24px rgba(249, 115, 22, 0.16)",
+    cardShadow: "inset 0 1px 0 rgba(232, 123, 85, 0.12), inset 0 0 0 1px rgba(232, 123, 85, 0.05), 0 2px 8px rgba(0, 0, 0, 0.2), 0 12px 32px -8px rgba(0, 0, 0, 0.45), 0 32px 44px -16px rgba(0, 0, 0, 0.15)",
     durationFast: "150ms",
     durationNormal: "280ms",
     easing: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -963,6 +949,107 @@ var emberPreset = {
     }
   }
 };
+var STYLE2 = `
+  /* NOTE: does not neutralize AppShellContainer's background paint, unlike
+     ChromeBackground / ConstellationBackground. AmbientBloom is designed to
+     compose *above* existing background layers (CyberBackground's grid,
+     ConstellationBackground's canvas), so it must not knock out the base
+     color paint the sibling background relies on. */
+  .elevasis-ambient-bloom {
+    display: none;
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    overflow: hidden;
+  }
+  [data-mantine-color-scheme="dark"] .elevasis-ambient-bloom {
+    display: block;
+  }
+  [data-mantine-color-scheme="dark"] .elevasis-ambient-bloom-lobe {
+    mix-blend-mode: screen;
+  }
+  @keyframes elevasis-ambient-bloom-a {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    33% { transform: translate(4%, -5%) scale(1.08); }
+    66% { transform: translate(-5%, 4%) scale(0.94); }
+  }
+  @keyframes elevasis-ambient-bloom-b {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    50% { transform: translate(-2%, 2%) scale(1.06); }
+  }
+  @keyframes elevasis-ambient-bloom-c {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    40% { transform: translate(5%, 4%) scale(0.9); }
+    80% { transform: translate(-4%, -6%) scale(1.08); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .elevasis-ambient-bloom-lobe { animation: none !important; }
+  }
+`;
+function AmbientBloom({
+  color = "var(--color-primary)",
+  intensity = 0.08
+}) {
+  const primaryPct = `${Math.round(intensity * 100)}%`;
+  const secondaryPct = `${Math.round(intensity * 80)}%`;
+  const tertiaryPct = `${Math.round(intensity * 60)}%`;
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx("style", { children: STYLE2 }),
+    /* @__PURE__ */ jsxs("div", { className: "elevasis-ambient-bloom", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "elevasis-ambient-bloom-lobe",
+          style: {
+            position: "absolute",
+            top: "-45%",
+            left: "-10%",
+            width: "160%",
+            height: "150%",
+            background: `radial-gradient(ellipse at center, color-mix(in srgb, ${color} ${primaryPct}, transparent) 0%, transparent 60%)`,
+            filter: "blur(80px)",
+            animation: "elevasis-ambient-bloom-a 32s ease-in-out infinite",
+            willChange: "transform"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "elevasis-ambient-bloom-lobe",
+          style: {
+            position: "absolute",
+            top: "-8%",
+            right: "-33%",
+            width: "145%",
+            height: "135%",
+            background: `radial-gradient(ellipse at center, color-mix(in srgb, ${color} ${secondaryPct}, transparent) 0%, transparent 65%)`,
+            filter: "blur(90px)",
+            animation: "elevasis-ambient-bloom-b 40s ease-in-out infinite",
+            willChange: "transform"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "elevasis-ambient-bloom-lobe",
+          style: {
+            position: "absolute",
+            top: "-8%",
+            left: "-42%",
+            width: "138%",
+            height: "128%",
+            background: `radial-gradient(ellipse at center, color-mix(in srgb, ${color} ${tertiaryPct}, transparent) 0%, transparent 60%)`,
+            filter: "blur(100px)",
+            animation: "elevasis-ambient-bloom-c 36s ease-in-out infinite",
+            willChange: "transform"
+          }
+        }
+      )
+    ] })
+  ] });
+}
 var canopyPreset = {
   subtitleFontFamily: '"Lora", serif',
   fontImports: [
@@ -980,6 +1067,7 @@ var canopyPreset = {
     background: "#F4F8F5",
     surface: "transparent",
     surfaceHover: "rgba(46, 122, 64, 0.08)",
+    elevatedSurface: "rgba(255, 255, 255, 0.85)",
     text: "#0F2415",
     textDimmed: "#2D5235",
     textSubtle: "#5A7D62",
@@ -1003,18 +1091,19 @@ var canopyPreset = {
     primaryContrast: "#ffffff",
     background: "#060A07",
     surface: "transparent",
-    surfaceHover: "#162818",
+    surfaceHover: "rgba(74, 168, 96, 0.10)",
+    elevatedSurface: "rgba(18, 22, 19, 0.85)",
     text: "#E0F0E4",
     textDimmed: "#98C8A4",
-    textSubtle: "#80A090",
+    textSubtle: "#98B8A8",
     border: "rgba(152, 200, 164, 0.09)",
     error: "#EF5350",
     warning: "#FF8A65",
     success: "#8BC34A",
-    glassBackground: "rgba(16, 23, 18, 0.42)",
-    glassBlur: "blur(18px) saturate(180%)",
+    glassBackground: "rgba(27, 30, 25, 0.3)",
+    glassBlur: "blur(12px) saturate(180%)",
     shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
-    cardShadow: "inset 0 1px 0 rgba(74, 168, 96, 0.06), inset 0 0 0 1px rgba(74, 168, 96, 0.04), 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 32px 64px -16px rgba(0, 0, 0, 0.4)",
+    cardShadow: "inset 0 1px 0 rgba(74, 168, 96, 0.06), inset 0 0 0 1px rgba(74, 168, 96, 0.04), 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 32px 64px -16px rgba(0, 0, 0, 0.2)",
     durationFast: "150ms",
     durationNormal: "280ms",
     easing: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -1036,7 +1125,7 @@ var slatePreset = {
     Fragment,
     null,
     createElement(AppBackground),
-    createElement(AmbientBloom, { intensity: 0.06 })
+    createElement(AmbientBloomGrid, { intensity: 0.06, size: 1.2 })
   ),
   light: {
     primary: "#4A6E8E",
@@ -1044,6 +1133,7 @@ var slatePreset = {
     background: "#ECEEF0",
     surface: "#F3F4F6",
     surfaceHover: "#E0E3E7",
+    elevatedSurface: "rgba(255, 255, 255, 0.95)",
     text: "#161C22",
     textDimmed: "#404C58",
     textSubtle: "#6A7A88",
@@ -1065,9 +1155,10 @@ var slatePreset = {
   dark: {
     primary: "#6A8FAD",
     primaryContrast: "#0E1218",
-    background: "#010305",
+    background: "#030507",
     surface: "#0B1015",
-    surfaceHover: "#1C2830",
+    surfaceHover: "rgba(106, 143, 173, 0.10)",
+    elevatedSurface: "rgba(18, 22, 27, 0.93)",
     text: "#E8F0F8",
     textDimmed: "#A8C4DC",
     textSubtle: "#80A0B0",
@@ -1103,20 +1194,21 @@ var cyberStrikePreset = {
   background: createElement(
     Fragment,
     null,
-    createElement(CyberBackground, { variant: "strike" }),
-    createElement(AmbientBloom, { intensity: 0.16 })
+    createElement(CyberBackground, { variant: "strike", perspectiveGridRadialGlowIntensity: 16 }),
+    createElement(AmbientBloomGrid, { intensity: 0.07, size: 1.2 })
   ),
   light: {
-    primary: "#FF1744",
+    primary: "#D41840",
     primaryContrast: "#ffffff",
     background: "#FFF8FA",
     surface: "transparent",
-    surfaceHover: "rgba(255, 23, 68, 0.08)",
+    surfaceHover: "rgba(212, 24, 64, 0.08)",
+    elevatedSurface: "rgba(255, 252, 253, 0.92)",
     text: "#140A0C",
     textDimmed: "#4D2E35",
     textSubtle: "#805560",
     border: "rgba(20, 10, 12, 0.08)",
-    error: "#FF1744",
+    error: "#D41840",
     warning: "#FF9100",
     success: "#00E676",
     glassBackground: "rgba(255, 248, 250, 0.55)",
@@ -1131,22 +1223,23 @@ var cyberStrikePreset = {
     fontSans: '"JetBrains Mono", monospace'
   },
   dark: {
-    primary: "#FF1744",
+    primary: "#D41840",
     primaryContrast: "#ffffff",
     background: "#050303",
     surface: "transparent",
-    surfaceHover: "rgba(255, 23, 68, 0.06)",
+    surfaceHover: "rgba(212, 24, 64, 0.06)",
+    elevatedSurface: "rgba(16, 12, 12, 0.82)",
     text: "#FAE0E4",
     textDimmed: "#F0A0B0",
-    textSubtle: "#8E6068",
-    border: "rgba(200, 175, 180, 0.09)",
-    error: "#FF1744",
+    textSubtle: "#B8848E",
+    border: "rgba(230, 165, 170, 0.14)",
+    error: "#D41840",
     warning: "#FF9100",
     success: "#00E676",
-    glassBackground: "rgba(20, 14, 18, 0.42)",
-    glassBlur: "blur(28px) saturate(180%)",
+    glassBackground: "rgba(18, 19, 20, 0.2)",
+    glassBlur: "blur(12px) saturate(180%)",
     shadow: "0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -8px rgba(0, 0, 0, 0.5), 0 20px 48px -16px rgba(0, 0, 0, 0.4)",
-    cardShadow: "inset 0 1px 0 rgba(230, 200, 210, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.5), 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 32px 64px -16px rgba(0, 0, 0, 0.4)",
+    cardShadow: "inset 0 1px 0 rgba(230, 200, 210, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 4px 6px rgba(0, 0, 0, 0.4), 0 10px 24px -10px rgba(0, 0, 0, .6), 0 28px 24px -16px rgba(0, 0, 0, 0.12)",
     durationFast: "80ms",
     durationNormal: "160ms",
     easing: "cubic-bezier(0.16, 1, 0.3, 1)",
@@ -1172,8 +1265,8 @@ var cyberChromePreset = {
   background: createElement(
     Fragment,
     null,
-    createElement(CyberBackground, { variant: "chrome" }),
-    createElement(AmbientBloom, { intensity: 0.1 })
+    createElement(CyberBackground, { variant: "chrome", perspectiveGridRadialGlowIntensity: 16 }),
+    createElement(AmbientBloomGrid, { intensity: 0.08, size: 1.2 })
   ),
   light: {
     primary: "#64748B",
@@ -1181,6 +1274,7 @@ var cyberChromePreset = {
     background: "#F1F3F5",
     surface: "transparent",
     surfaceHover: "rgba(100, 116, 139, 0.08)",
+    elevatedSurface: "rgba(255, 255, 255, 0.85)",
     text: "#0B0E12",
     textDimmed: "#2F3A47",
     textSubtle: "#5C6B7A",
@@ -1200,22 +1294,23 @@ var cyberChromePreset = {
     fontSans: '"JetBrains Mono", monospace'
   },
   dark: {
-    primary: "#94A3B8",
+    primary: "#7A8EA6",
     primaryContrast: "#0B0E12",
-    background: "#010204",
+    background: "#020305",
     surface: "transparent",
-    surfaceHover: "rgba(148, 165, 184, 0.09)",
+    surfaceHover: "rgba(122, 142, 166, 0.09)",
+    elevatedSurface: "rgba(16, 20, 26, 0.82)",
     text: "#E8EEF5",
     textDimmed: "#A8B6C4",
-    textSubtle: "#5E6E80",
-    border: "rgba(148, 165, 184, 0.09)",
+    textSubtle: "#8A98AC",
+    border: "rgba(122, 142, 166, 0.14)",
     error: "#FF1744",
     warning: "#FF9100",
     success: "#00E676",
-    glassBackground: "rgba(14, 18, 24, 0.34)",
-    glassBlur: "blur(28px) saturate(180%)",
+    glassBackground: "rgba(18, 22, 28, 0.25)",
+    glassBlur: "blur(12px) saturate(185%)",
     shadow: "0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.4)",
-    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 0 0 1px rgba(148, 165, 184, 0.04), 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 48px -18px rgba(0, 0, 0, 0.35)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 0 0 1px rgba(122, 142, 166, 0.04), 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 48px -18px rgba(0, 0, 0, 0.35)",
     durationFast: "80ms",
     durationNormal: "160ms",
     easing: "cubic-bezier(0.16, 1, 0.3, 1)",
@@ -1246,15 +1341,16 @@ var cyberVoidPreset = {
   background: createElement(
     Fragment,
     null,
-    createElement(CyberBackground, { variant: "void" }),
-    createElement(AmbientBloom, { intensity: 0.13 })
+    createElement(CyberBackground, { variant: "void", perspectiveGridRadialGlowIntensity: 16 }),
+    createElement(AmbientBloomGrid, { intensity: 0.07, size: 1.2 })
   ),
   light: {
-    primary: "#2979FF",
+    primary: "#2468E0",
     primaryContrast: "#ffffff",
     background: "#F5F8FD",
     surface: "transparent",
-    surfaceHover: "rgba(41, 121, 255, 0.08)",
+    surfaceHover: "rgba(36, 104, 224, 0.08)",
+    elevatedSurface: "rgba(255, 255, 255, 0.85)",
     text: "#0A0D14",
     textDimmed: "#2E374D",
     textSubtle: "#556080",
@@ -1274,22 +1370,23 @@ var cyberVoidPreset = {
     fontSans: '"JetBrains Mono", monospace'
   },
   dark: {
-    primary: "#2979FF",
+    primary: "#2468E0",
     primaryContrast: "#ffffff",
-    background: "#020406",
+    background: "#050709",
     surface: "transparent",
-    surfaceHover: "rgba(41, 121, 255, 0.08)",
+    surfaceHover: "rgba(36, 104, 224, 0.08)",
+    elevatedSurface: "rgba(16, 19, 24, 0.85)",
     text: "#E0EAFA",
     textDimmed: "#99BBEE",
-    textSubtle: "#5E7898",
-    border: "rgba(41, 121, 255, 0.18)",
+    textSubtle: "#8AACCE",
+    border: "rgba(36, 104, 224, 0.17)",
     error: "#FF1744",
     warning: "#FF9100",
     success: "#00E676",
-    glassBackground: "rgba(11, 14, 16, 0.3)",
-    glassBlur: "blur(18px) saturate(180%)",
+    glassBackground: "rgba(17, 19, 19, 0.2)",
+    glassBlur: "blur(8px) saturate(150%)",
     shadow: "0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.4)",
-    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(41, 121, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 48px -18px rgba(0, 0, 0, 0.35)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(36, 104, 224, 0.06), 0 4px 4px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 20px -16px rgba(0, 0, 0, 0.05)",
     durationFast: "80ms",
     durationNormal: "160ms",
     easing: "cubic-bezier(0.16, 1, 0.3, 1)",
@@ -1331,6 +1428,7 @@ var nirvanaPreset = {
     background: "#ffffff",
     surface: "transparent",
     surfaceHover: "rgba(242, 56, 1, 0.06)",
+    elevatedSurface: "rgba(255, 252, 250, 0.92)",
     text: "#000000",
     textDimmed: "#32373c",
     textSubtle: "#6b7177",
@@ -1354,7 +1452,8 @@ var nirvanaPreset = {
     primaryContrast: "#ffffff",
     background: "#080605",
     surface: "transparent",
-    surfaceHover: "#1a1a1a",
+    surfaceHover: "rgba(242, 56, 1, 0.10)",
+    elevatedSurface: "rgba(20, 17, 15, 0.85)",
     text: "#ffffff",
     textDimmed: "#c8ccd0",
     textSubtle: "#8a8f95",
@@ -1362,10 +1461,10 @@ var nirvanaPreset = {
     error: "#ff5252",
     warning: "#ff9800",
     success: "#4caf50",
-    glassBackground: "rgba(20, 20, 22, 0.42)",
-    glassBlur: "blur(18px) saturate(180%)",
+    glassBackground: "rgba(26, 26, 28, 0.28)",
+    glassBlur: "blur(18px) saturate(187%)",
     shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
-    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 32px 64px -16px rgba(0, 0, 0, 0.4)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 4px 14px -2px rgba(0, 0, 0, 0.7), 0 12px 32px -8px rgba(0, 0, 0, 0.3), 0 32px 64px -16px rgba(0, 0, 0, 0.2)",
     durationFast: "150ms",
     durationNormal: "250ms",
     easing: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -1397,6 +1496,7 @@ var wavePreset = {
     background: "#f5f8fc",
     surface: "transparent",
     surfaceHover: "rgba(37, 99, 235, 0.06)",
+    elevatedSurface: "rgba(255, 255, 255, 0.85)",
     text: "#0b1220",
     textDimmed: "#334155",
     textSubtle: "#64748b",
@@ -1416,11 +1516,12 @@ var wavePreset = {
     fontSans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
   },
   dark: {
-    primary: "#60a5fa",
+    primary: "#4A90E8",
     primaryContrast: "#000000",
     background: "#030507",
     surface: "transparent",
-    surfaceHover: "#141f36",
+    surfaceHover: "rgba(74, 144, 232, 0.10)",
+    elevatedSurface: "rgba(16, 19, 22, 0.85)",
     text: "#f1f5f9",
     textDimmed: "#cbd5e1",
     textSubtle: "#94a3b8",
@@ -1428,10 +1529,10 @@ var wavePreset = {
     error: "#f87171",
     warning: "#fbbf24",
     success: "#4ade80",
-    glassBackground: "rgba(16, 20, 30, 0.42)",
-    glassBlur: "blur(18px) saturate(180%)",
-    shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
-    cardShadow: "inset 0 1px 0 rgba(148, 197, 255, 0.04), inset 0 0 0 1px rgba(148, 197, 255, 0.02), 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 32px 64px -16px rgba(0, 0, 0, 0.4)",
+    glassBackground: "rgba(19, 23, 33, 0.3)",
+    glassBlur: "blur(16px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 12px 32px -8px rgba(0, 0, 0, 0.4)",
+    cardShadow: "inset 0 1px 0 rgba(148, 197, 255, 0.03), inset 0 0 0 1px rgba(148, 197, 255, 0.02), 0 2px 8px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.4), 0 32px 64px -16px rgba(0, 0, 0, 0.2)",
     durationFast: "150ms",
     durationNormal: "250ms",
     easing: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -1483,13 +1584,16 @@ var LIGHT_PALETTE = {
 };
 function ConstellationBackground({
   darkPalette = DARK_PALETTE,
-  lightPalette = LIGHT_PALETTE
+  lightPalette = LIGHT_PALETTE,
+  particles = true
 } = {}) {
   const canvasRef = useRef(null);
   const darkPaletteRef = useRef(darkPalette);
   const lightPaletteRef = useRef(lightPalette);
+  const showParticlesRef = useRef(particles);
   darkPaletteRef.current = darkPalette;
   lightPaletteRef.current = lightPalette;
+  showParticlesRef.current = particles;
   const redrawRef = useRef(null);
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -1520,7 +1624,7 @@ function ConstellationBackground({
     };
     setSize();
     const randVelocity = () => (Math.random() - 0.5) * 0.28;
-    const particles = Array.from({ length: PARTICLE_COUNT }, () => ({
+    const particles2 = Array.from({ length: PARTICLE_COUNT }, () => ({
       x: Math.random() * width,
       y: Math.random() * height,
       vx: randVelocity(),
@@ -1556,8 +1660,9 @@ function ConstellationBackground({
       gradient.addColorStop(1, palette.bgStops[2]);
       ctx.fillStyle = gradient;
       ctx.fillRect(0, 0, width, height);
+      if (!showParticlesRef.current) return;
       ctx.globalCompositeOperation = palette.compositeOp;
-      for (const p of particles) {
+      for (const p of particles2) {
         p.x += p.vx;
         p.y += p.vy;
         p.pulse += p.pulseSpeed;
@@ -1566,10 +1671,10 @@ function ConstellationBackground({
         if (p.y < 0) p.y += height;
         if (p.y > height) p.y -= height;
       }
-      for (let i = 0; i < particles.length; i++) {
-        for (let j = i + 1; j < particles.length; j++) {
-          const a = particles[i];
-          const b = particles[j];
+      for (let i = 0; i < particles2.length; i++) {
+        for (let j = i + 1; j < particles2.length; j++) {
+          const a = particles2[i];
+          const b = particles2[j];
           const dx = a.x - b.x;
           const dy = a.y - b.y;
           const distSq = dx * dx + dy * dy;
@@ -1587,7 +1692,7 @@ function ConstellationBackground({
           }
         }
       }
-      for (const p of particles) {
+      for (const p of particles2) {
         const pulseScale = 0.8 + Math.sin(p.pulse) * 0.25;
         const [r, g, bl] = lerpColor(p.hueShift);
         const glowRadius = p.radius * 5 * pulseScale;
@@ -1675,7 +1780,8 @@ var synapsePreset = {
   ],
   colors: ["#22D3EE", "#020305", "#F0FAFB"],
   background: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(ConstellationBackground, {}),
+    /* @__PURE__ */ jsx(ConstellationBackground, { particles: false }),
+    /* @__PURE__ */ jsx(FloatingMotes, {}),
     /* @__PURE__ */ jsx(AmbientBloom, { intensity: 0.12 })
   ] }),
   light: {
@@ -1684,6 +1790,7 @@ var synapsePreset = {
     background: "#F0FAFB",
     surface: "transparent",
     surfaceHover: "rgba(8, 145, 178, 0.08)",
+    elevatedSurface: "rgba(255, 255, 255, 0.85)",
     text: "#04141A",
     textDimmed: "#1A3D48",
     textSubtle: "#547078",
@@ -1705,12 +1812,13 @@ var synapsePreset = {
   dark: {
     primary: "#0A8A9E",
     primaryContrast: "#ffffff",
-    background: "#000000",
+    background: "#111111",
     surface: "transparent",
     surfaceHover: "rgba(34, 211, 238, 0.06)",
+    elevatedSurface: "rgba(18, 30, 34, 0.78)",
     text: "#ECFEFF",
     textDimmed: "#A5F3FC",
-    textSubtle: "#5F8A94",
+    textSubtle: "#84B8C5",
     border: "rgba(34, 211, 238, 0.07)",
     error: "#F87171",
     warning: "#FBBF24",
@@ -1718,7 +1826,7 @@ var synapsePreset = {
     glassBackground: "rgba(6, 12, 16, 0.2)",
     glassBlur: "blur(20px) saturate(180%)",
     shadow: "0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.4)",
-    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(34, 211, 238, 0.06), 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 48px -18px rgba(0, 0, 0, 0.35)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(34, 211, 238, 0.06), 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 48px -18px rgba(0, 0, 0, 0.25)",
     durationFast: "120ms",
     durationNormal: "220ms",
     easing: "cubic-bezier(0.22, 0, 0.1, 1)",
@@ -1775,7 +1883,8 @@ var cortexPreset = {
   ],
   colors: ["#5A78B4", "#02050E", "#F3F5FA"],
   background: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(ConstellationBackground, { darkPalette: CORTEX_DARK, lightPalette: CORTEX_LIGHT }),
+    /* @__PURE__ */ jsx(ConstellationBackground, { darkPalette: CORTEX_DARK, lightPalette: CORTEX_LIGHT, particles: false }),
+    /* @__PURE__ */ jsx(FloatingMotes, {}),
     /* @__PURE__ */ jsx(AmbientBloom, { intensity: 0.12 })
   ] }),
   light: {
@@ -1784,6 +1893,7 @@ var cortexPreset = {
     background: "#F3F5FA",
     surface: "transparent",
     surfaceHover: "rgba(61, 96, 152, 0.07)",
+    elevatedSurface: "rgba(255, 255, 255, 0.85)",
     text: "#04102A",
     textDimmed: "#1A2E5A",
     textSubtle: "#556B94",
@@ -1803,14 +1913,15 @@ var cortexPreset = {
     fontSans: '"Inter", sans-serif'
   },
   dark: {
-    primary: "#7898BE",
+    primary: "#6282A8",
     primaryContrast: "#F1F5F9",
     background: "#000000",
     surface: "transparent",
-    surfaceHover: "rgba(120, 152, 190, 0.07)",
+    surfaceHover: "rgba(98, 130, 168, 0.09)",
+    elevatedSurface: "rgba(12, 18, 32, 0.82)",
     text: "#EBF4FF",
     textDimmed: "#BFD9FF",
-    textSubtle: "#5F7A94",
+    textSubtle: "#8AAAC8",
     border: "rgba(148, 163, 184, 0.09)",
     error: "#F87171",
     warning: "#FBBF24",
@@ -1818,7 +1929,7 @@ var cortexPreset = {
     glassBackground: "rgba(10, 14, 20, 0.18)",
     glassBlur: "blur(15px) saturate(195%)",
     shadow: "0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.4)",
-    cardShadow: "inset 0 1px 0 rgba(180, 200, 230, 0.03), inset 0 0 0 1px rgba(148, 163, 184, 0.03), 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.4), 0 24px 48px -18px rgba(0, 0, 0, 0.35)",
+    cardShadow: "inset 0 1px 0 rgba(180, 200, 230, 0.04), inset 0 0 0 1px rgba(148, 163, 184, 0.04), 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3), 0 14px 28px -10px rgba(0, 0, 0, 0.4), 0 24px 48px -18px rgba(0, 0, 0, 0.25)",
     durationFast: "120ms",
     durationNormal: "220ms",
     easing: "cubic-bezier(0.22, 0, 0.1, 1)",
@@ -1836,35 +1947,35 @@ var cortexPreset = {
   }
 };
 var HELIOS_DARK = {
-  bgStops: ["rgba(27, 19, 9, 1)", "rgba(14, 10, 4, 1)", "rgba(3, 2, 1, 1)"],
-  paletteA: [190, 150, 60],
-  // muted gold
-  paletteB: [200, 170, 80],
-  // soft warm gold
-  paletteC: [180, 120, 50],
-  // muted bronze-amber
+  bgStops: ["rgba(14, 12, 7, 1)", "rgba(8, 7, 4, 1)", "rgba(2, 2, 1, 1)"],
+  paletteA: [225, 200, 120],
+  // soft neutral yellow
+  paletteB: [215, 190, 130],
+  // pale warm yellow
+  paletteC: [205, 180, 110],
+  // muted honey (not brown)
   lineOpacity: 0.22,
   haloOpacity: 0.22,
   coreOpacity: 0.8,
   compositeOp: "lighter",
-  coreBrightenR: 20,
-  coreBrightenG: 15,
-  coreBrightenB: 5
+  coreBrightenR: 25,
+  coreBrightenG: 22,
+  coreBrightenB: 10
 };
 var HELIOS_LIGHT = {
-  bgStops: ["rgba(250, 247, 240, 1)", "rgba(242, 236, 222, 1)", "rgba(230, 220, 200, 1)"],
-  paletteA: [140, 95, 30],
-  // muted amber
-  paletteB: [150, 85, 30],
-  // muted bronze
-  paletteC: [120, 80, 30],
-  // deep warm brown
+  bgStops: ["rgba(252, 250, 244, 1)", "rgba(246, 240, 228, 1)", "rgba(234, 224, 204, 1)"],
+  paletteA: [175, 140, 60],
+  // soft muted gold
+  paletteB: [165, 130, 55],
+  // dusty honey
+  paletteC: [150, 120, 50],
+  // muted wheat
   lineOpacity: 0.22,
   haloOpacity: 0.14,
   coreOpacity: 0.7,
   compositeOp: "source-over",
-  coreBrightenR: -20,
-  coreBrightenG: -10,
+  coreBrightenR: -15,
+  coreBrightenG: -8,
   coreBrightenB: -10
 };
 var heliosPreset = {
@@ -1873,21 +1984,23 @@ var heliosPreset = {
     "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap",
     "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
   ],
-  colors: ["#B8963C", "#0C0702", "#FAF7F0"],
+  colors: ["#D4B456", "#0A0805", "#FAF7F0"],
   background: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(ConstellationBackground, { darkPalette: HELIOS_DARK, lightPalette: HELIOS_LIGHT }),
+    /* @__PURE__ */ jsx(ConstellationBackground, { darkPalette: HELIOS_DARK, lightPalette: HELIOS_LIGHT, particles: false }),
+    /* @__PURE__ */ jsx(FloatingMotes, {}),
     /* @__PURE__ */ jsx(AmbientBloom, { intensity: 0.07 })
   ] }),
   light: {
-    primary: "#8B6B2A",
+    primary: "#A8862E",
     primaryContrast: "#ffffff",
     background: "#FAF7F0",
     surface: "transparent",
-    surfaceHover: "rgba(139, 107, 42, 0.07)",
-    text: "#1F1504",
-    textDimmed: "#4A3415",
-    textSubtle: "#8A7A55",
-    border: "rgba(31, 21, 4, 0.09)",
+    surfaceHover: "rgba(168, 134, 46, 0.07)",
+    elevatedSurface: "rgba(255, 255, 255, 0.85)",
+    text: "#1F1A08",
+    textDimmed: "#4A3E1C",
+    textSubtle: "#8A8165",
+    border: "rgba(31, 26, 8, 0.09)",
     error: "#DC2626",
     warning: "#F59E0B",
     success: "#16A34A",
@@ -1903,22 +2016,23 @@ var heliosPreset = {
     fontSans: '"Inter", sans-serif'
   },
   dark: {
-    primary: "#B8963C",
-    primaryContrast: "#1A0F02",
-    background: "#000000",
+    primary: "#D4B456",
+    primaryContrast: "#1A1505",
+    background: "#0A0805",
     surface: "transparent",
-    surfaceHover: "rgba(184, 150, 60, 0.07)",
-    text: "#FFF7E6",
-    textDimmed: "#FCD98C",
-    textSubtle: "#947A55",
-    border: "rgba(184, 168, 140, 0.09)",
+    surfaceHover: "rgba(212, 180, 86, 0.07)",
+    elevatedSurface: "rgba(22, 20, 14, 0.85)",
+    text: "#FFF8E1",
+    textDimmed: "#E8D4A0",
+    textSubtle: "#B8AC85",
+    border: "rgba(216, 200, 160, 0.08)",
     error: "#F87171",
     warning: "#FBBF24",
     success: "#4ADE80",
-    glassBackground: "rgba(36, 28, 14, 0.1)",
-    glassBlur: "blur(14px) saturate(180%)",
+    glassBackground: "rgba(28, 24, 16, 0.18)",
+    glassBlur: "blur(18px) saturate(170%)",
     shadow: "0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.4)",
-    cardShadow: "inset 0 1px 0 rgba(230, 210, 170, 0.06), inset 0 0 0 1px rgba(184, 168, 140, 0.05), 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.4), 0 24px 48px -18px rgba(0, 0, 0, 0.35)",
+    cardShadow: "inset 0 1px 0 rgba(240, 220, 170, 0.06), inset 0 0 0 1px rgba(216, 200, 160, 0.05), 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.4), 0 24px 48px -18px rgba(0, 0, 0, 0.23)",
     durationFast: "120ms",
     durationNormal: "220ms",
     easing: "cubic-bezier(0.22, 0, 0.1, 1)",
@@ -1975,7 +2089,8 @@ var graphitePreset = {
   ],
   colors: ["#9CA3AF", "#08090B", "#F8F9FA"],
   background: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(ConstellationBackground, { darkPalette: GRAPHITE_DARK, lightPalette: GRAPHITE_LIGHT }),
+    /* @__PURE__ */ jsx(ConstellationBackground, { darkPalette: GRAPHITE_DARK, lightPalette: GRAPHITE_LIGHT, particles: false }),
+    /* @__PURE__ */ jsx(FloatingMotes, {}),
     /* @__PURE__ */ jsx(AmbientBloom, { intensity: 0.1 })
   ] }),
   light: {
@@ -1984,6 +2099,7 @@ var graphitePreset = {
     background: "#F8F9FA",
     surface: "transparent",
     surfaceHover: "rgba(75, 85, 99, 0.08)",
+    elevatedSurface: "rgba(255, 255, 255, 0.85)",
     text: "#0F1214",
     textDimmed: "#2E3338",
     textSubtle: "#6B7280",
@@ -2008,9 +2124,10 @@ var graphitePreset = {
     background: "#000000",
     surface: "transparent",
     surfaceHover: "rgba(156, 163, 175, 0.08)",
+    elevatedSurface: "rgba(14, 15, 16, 0.85)",
     text: "#F3F4F6",
     textDimmed: "#D1D5DB",
-    textSubtle: "#6B7280",
+    textSubtle: "#949BA6",
     border: "rgba(156, 163, 175, 0.07)",
     error: "#F87171",
     warning: "#FBBF24",
@@ -2018,7 +2135,7 @@ var graphitePreset = {
     glassBackground: "rgba(26, 30, 36, 0.2)",
     glassBlur: "blur(16px) saturate(180%)",
     shadow: "0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.4)",
-    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(156, 163, 175, 0.08), 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 48px -18px rgba(0, 0, 0, 0.35)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(156, 163, 175, 0.08), 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 48px -18px rgba(0, 0, 0, 0.25)",
     durationFast: "120ms",
     durationNormal: "220ms",
     easing: "cubic-bezier(0.22, 0, 0.1, 1)",
@@ -2052,6 +2169,7 @@ var quarryPreset = {
     background: "#F1F3F5",
     surface: "transparent",
     surfaceHover: "rgba(99, 105, 114, 0.08)",
+    elevatedSurface: "rgba(255, 255, 255, 0.85)",
     text: "#15181C",
     textDimmed: "#353A42",
     textSubtle: "#686E78",
@@ -2071,22 +2189,23 @@ var quarryPreset = {
     fontSans: '"Lato", sans-serif'
   },
   dark: {
-    primary: "#A5ACB5",
+    primary: "#8B939D",
     primaryContrast: "#101215",
     background: "#07080A",
     surface: "transparent",
-    surfaceHover: "rgba(165, 172, 181, 0.08)",
+    surfaceHover: "rgba(139, 147, 157, 0.08)",
+    elevatedSurface: "rgba(18, 20, 23, 0.85)",
     text: "#E8EBEF",
     textDimmed: "#B4B9C1",
-    textSubtle: "#7A8089",
-    border: "rgba(165, 172, 181, 0.09)",
+    textSubtle: "#9298A3",
+    border: "rgba(139, 147, 157, 0.09)",
     error: "#EF5350",
     warning: "#FF8A65",
     success: "#8EA99A",
     glassBackground: "rgba(22, 25, 30, 0.36)",
     glassBlur: "blur(18px) saturate(160%)",
     shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
-    cardShadow: "inset 0 1px 0 rgba(165, 172, 181, 0.06), inset 0 0 0 1px rgba(165, 172, 181, 0.03), 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 32px 64px -16px rgba(0, 0, 0, 0.4)",
+    cardShadow: "inset 0 1px 0 rgba(139, 147, 157, 0.06), inset 0 0 0 1px rgba(139, 147, 157, 0.03), 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 32px 64px -16px rgba(0, 0, 0, 0.25)",
     durationFast: "150ms",
     durationNormal: "280ms",
     easing: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -2263,6 +2382,7 @@ var TOKEN_VAR_MAP = {
   background: "--color-background",
   surface: "--color-surface",
   surfaceHover: "--color-surface-hover",
+  elevatedSurface: "--color-elevated",
   text: "--color-text",
   textDimmed: "--color-text-dimmed",
   textSubtle: "--color-text-subtle",
@@ -2435,8 +2555,8 @@ var componentThemes = {
   Modal: Modal.extend({
     styles: {
       content: {
-        backgroundColor: "var(--color-surface)",
-        border: "1px solid var(--color-border)"
+        backgroundColor: "var(--color-elevated, var(--color-background))",
+        ...glassBase
       }
     }
   }),