u

src/colors.js

@@ -332,6 +332,22 @@ export const SHADOW_TAB = `drop-shadow(0px 2px 4px ${shade(0.2)}) drop-shadow(0p
 export const SHADOW_BUBBLE_USER = `0 2px 8px ${BLUE_SHADOW}`;
 export const SHADOW_BUBBLE_ASSISTANT = `0 1px 4px ${TINT_ROW_HOVER}`;
 
+/* ────────────────────────────────────────────────────────────────────────────
+ * 10b. DIALOG FOG
+ *     Shared backdrop for every dialog (`src/components/AppDialog.jsx`).
+ *     Darker and more bluish than `MAIN_BACKGROUND`: deep-navy solid base
+ *     plus a translucent variant for the MUI backdrop layer. The solid
+ *     variant is also published as `--df-dialog-fog` so the
+ *     scrollbar-gutter placeholder can switch to the fog color while a
+ *     dialog is open (`html.df-dialog-open` in `src/index.css`).
+ * -------------------------------------------------------------------------*/
+
+/** Opaque fog base — deep navy with a blue push. */
+export const DIALOG_FOG_SOLID = mix(DARK_6, CHROMA.BLUE.dark, 0.42);
+
+/** Translucent backdrop wash painted over the page. */
+export const DIALOG_FOG = alpha(DIALOG_FOG_SOLID, 0.72);
+
 /* ────────────────────────────────────────────────────────────────────────────
  * 11. CSS VARIABLE BRIDGE
  *     `src/index.css` cannot import this module, so these few tokens are
@@ -340,6 +356,7 @@ export const SHADOW_BUBBLE_ASSISTANT = `0 1px 4px ${TINT_ROW_HOVER}`;
 
 export const CSS_VARS = {
   '--df-main-background': MAIN_BACKGROUND,
+  '--df-dialog-fog': DIALOG_FOG_SOLID,
   '--df-sort-ghost': SORT_GHOST,
   '--df-sort-ghost-tint': SORT_GHOST_BG,
   '--df-shadow-sortable': SHADOW_SORTABLE,