Light theme: cream page background and warm neutrals, matching the dashboard

v3 used the green wash #eaf3ea for --surface-primary, the page background,
which read as too green. Replaced with the palette read from the DEPLOYED
CSS of the dashboard, portal and panel (identical across all three):

  --surface-primary  #eaf3ea -> #faf8f5 (cream, page background)
  --surface-tertiary green   -> #f4f2ec (warm chip)
  --surface-hover    green   -> #f0ede6 (warm hover)
  --surface-composer-hover   -> #f0ede6
  --border-light     #cde0cb -> #e4e0d8 (warm neutral border)
  --presentation     #eaf3ea -> #faf8f5 (composer band)
  --link             #4a7a4a -> #4e7a4d (deeper green, 4.70:1 on cream)

Accents are unchanged (green-deep #5b8c5a, green-mid #6ba86b) — they are
the earthy greens the co-op design system already uses. Dark mode is
untouched. Also fixed the two hard-coded washes: the #loading-container
flash and the bare html/body background, plus custom2.js COOP_BG.light,
which was still painting the browser/PWA chrome #eaf3ea while the
manifest said cream.

assets/custom.css

@@ -1,31 +1,36 @@
 /* ============================================================
-   Inference Co-op branding — LibreChat overlay (v3)
+   Inference Co-op branding — LibreChat overlay (v4)
-   Colors are pulled from the co-op homepage's own CSS variables
+   Palette = the dashboard/portal/panel design system, read from the
-   (inference.coop): --cream #faf8f5, --wash #eef4ea, --green-deep
+   DEPLOYED CSS of each and kept identical: --cream #faf8f5 (page
-   #5b8c5a, --green-mid #6ba86b, --green-light #7ab87a, --ink
+   background), white #ffffff (cards/sidebar), warm neutrals #f4f2ec /
-   #2d3327, --muted #6b7a62, --border #e8e2d8, font Figtree.
+   #f0ede6 (chips, hovers), border #e4e0d8, ink #2d3327, muted #6b7a62,
+   accents --green-deep #5b8c5a / --green-mid #6ba86b / --green-light
+   #7ab87a, danger #b3543a, font Figtree.
+   The green wash #eaf3ea lives in the dashboard's vocabulary but is
+   used there only sparingly (badges, table headers) — NOT as a page
+   background. v3 used it for surfaces, which read as "too green".
    LibreChat resolves its Tailwind colors through CSS variables on
    html.light / html.dark (space-separated RGB) — overriding them
    rebrands the WHOLE app through the existing theme system.
    ============================================================ */
 
 html.light {
-  --surface-primary: 234 243 234;   /* #eaf3ea — dashboard green wash, page background */
+  --surface-primary: 250 248 245;   /* --cream #faf8f5 — PAGE background, as on the dashboard */
-  --surface-secondary: 255 255 255; /* sidebar + composer box: white cards */
+  --surface-secondary: 255 255 255; /* sidebar + composer box: white cards, as on the dashboard */
-  --surface-tertiary: 240 246 239;  /* light green chip background */
+  --surface-tertiary: 244 242 236;  /* #f4f2ec warm chip background (was green-tinted) */
-  --surface-hover: 223 237 222;     /* deeper green hover */
+  --surface-hover: 240 237 230;     /* #f0ede6 warm hover (was green) */
   --surface-submit: 91 140 90;      /* --green-deep #5b8c5a */
   --surface-submit-hover: 107 168 107; /* --green-mid #6ba86b */
   --accent-primary: 91 140 90;      /* --green-deep */
   --accent-primary-hover: 107 168 107; /* --green-mid */
   --ring-primary: 91 140 90;
-  --link: 74 122 74;
+  --link: 78 122 77;                /* #4e7a4d — the deeper green the dashboard uses; 4.7:1 on cream */
   --text-primary: 45 51 39;         /* --ink #2d3327 */
   --text-secondary: 107 122 98;     /* --muted #6b7a62 */
-  --border-light: 205 224 203;      /* green-tinted border */
+  --border-light: 228 224 216;      /* --border #e4e0d8 — warm neutral, was green-tinted */
-  --presentation: 234 243 234;      /* composer band matches page */
+  --presentation: 250 248 245;      /* composer band matches the cream page */
   --surface-chat: 255 255 255;      /* chat box text areas: white */
-  --surface-composer-hover: 223 237 222;
+  --surface-composer-hover: 240 237 230;
 }
 
 html.dark {
@@ -79,7 +84,7 @@ html.dark {
 
 /* ---- Loading screen: brand the pre-React flash instead of white/black ---- */
 #loading-container {
-  background-color: rgb(234, 243, 234); /* green wash */
+  background-color: rgb(250, 248, 245); /* cream, matches the page */
 }
 @media (prefers-color-scheme: dark) {
   #loading-container {
@@ -120,9 +125,11 @@ footer a:hover {
   text-decoration: underline;
 }
 
-/* Bare page background: green wash in light, deep pine in dark — so any viewport
+/* Bare page background: cream in light, deep pine in dark — so any viewport
-   area the app UI does not cover (e.g. PWA navigation-bar insets) matches. */
+   area the app UI does not cover (e.g. PWA navigation-bar insets) matches.
-html:not(.dark), html:not(.dark) body { background-color: rgb(234, 243, 234); }
+   These are the PWA band colors; keep them in sync with custom2.js COOP_BG
+   and the manifest theme_color, or the system bars mismatch the page. */
+html:not(.dark), html:not(.dark) body { background-color: rgb(250, 248, 245); }
 html.dark, html.dark body { background-color: rgb(34, 39, 31); }
 
 /* ---- PWA safe areas: with viewport-fit=cover the page draws under system

assets/custom2.js

@@ -45,7 +45,7 @@
   // RESOLVED theme (html.dark class — LibreChat applies it from the user's
   // theme setting, which defaults to system = the phone's theme). Falls back
   // to the light/dark media-query pair in index.html when this script is off.
-  var COOP_BG = { light: '#eaf3ea', dark: '#22271f' };
+  var COOP_BG = { light: '#faf8f5', dark: '#22271f' };
   function syncThemeColor() {
     var dark = document.documentElement.classList.contains('dark');
     var metas = document.querySelectorAll('meta[name="theme-color"]');