fix(webapp): keep light's surfaces distinct and soften its grid lines

Two things were wrong at high contrast in light.

The side menu and title bar (background-bright) and the page behind them
(background-dimmed) sit 0.035 luminance apart at contrast 0, and equal step
counts closed that to 0.005 by 100% - the two read as one colour exactly when
the user asked for more definition. The scale is unevenly spaced up here, so
counting stops was the wrong measure. Destinations now come from a luminance
target instead, roughly 0.13 per tier, which keeps every gap and widens the one
that matters: bright stays above dimmed all the way, 0.035 -> 0.046. The whole
stack also lands darker than before, so the slider does more.

Grid lines went all the way to charcoal-400, which read as ruled paper over a
table. They divide rows rather than outline anything, so they now stop a tier
short of the borders: 1.65:1 against the page at full contrast where they were
2.8:1, still legible but no longer the loudest thing on screen.

Contrast 0 is untouched, the stack stays monotonic at 0/50/100%, and White
still pins all six surfaces flat.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: samejr

apps/webapp/app/tailwind.css

@@ -1057,20 +1057,30 @@
   --color-text-dimmed: color-mix(in srgb, var(--color-charcoal-500), var(--color-charcoal-600) calc(var(--theme-contrast, 0) * 100%));
   --color-text-faint: color-mix(in srgb, var(--color-charcoal-400), var(--color-charcoal-500) calc(var(--theme-contrast, 0) * 100%));
 
-  /* Surfaces, mirroring the dark side: the whole stack translates two stops
-     together, so the gaps between the tiers are the same at both ends of the
-     slider. Dark deepens away from its light text; light has nowhere brighter to
-     go than the white it already sits on, so it deepens too - which is what buys
-     panel separation here rather than text contrast.
+  /* Surfaces. Light has nowhere brighter to go than the white it already sits
+     on, so the whole stack deepens - which is what buys panel separation here
+     rather than text contrast.
+
+     Destinations are chosen by LUMINANCE, not by counting stops. The scale is
+     unevenly spaced up here, so equal step counts squeezed the two surfaces that
+     matter most: background-bright (the side menu and title bar) and
+     background-dimmed (the page) sit 0.042 apart at contrast 0, and equal steps
+     closed that to 0.005 by 100% - the two read as one colour exactly when the
+     user asked for more definition. Each tier now drops about 0.13 luminance, so
+     the gaps survive the trip and bright stays clearly above dimmed:
+
+       bright  1.000 -> 0.862     dimmed 0.958 -> 0.822   (gap 0.042 -> 0.040)
+       hover   0.890 -> 0.780     deep   0.885 -> 0.740
+       raised  0.822 -> 0.693
 
      These stay among light's own pale greys: charcoal has nothing between c-100
      and c-200 to hold them. White pins all six afterwards, so it stays flat. */
-  --color-background-bright: color-mix(in srgb, #ffffff, #f2f3f5 calc(var(--theme-contrast, 0) * 100%));
-  --color-background-dimmed: color-mix(in srgb, #fbfbfc, #f1f2f4 calc(var(--theme-contrast, 0) * 100%));
-  --color-background-hover: color-mix(in srgb, #f2f3f5, #eef0f3 calc(var(--theme-contrast, 0) * 100%));
-  --color-background-deep: color-mix(in srgb, #f1f2f4, #eceef1 calc(var(--theme-contrast, 0) * 100%));
-  --color-background-raised: color-mix(in srgb, #e9eaee, #e2e4e9 calc(var(--theme-contrast, 0) * 100%));
-  --color-input-bg: color-mix(in srgb, #ffffff, #f2f3f5 calc(var(--theme-contrast, 0) * 100%));
+  --color-background-bright: color-mix(in srgb, #ffffff, #eef0f3 calc(var(--theme-contrast, 0) * 100%));
+  --color-background-dimmed: color-mix(in srgb, #fbfbfc, #e9eaee calc(var(--theme-contrast, 0) * 100%));
+  --color-background-hover: color-mix(in srgb, #f2f3f5, #e2e4e9 calc(var(--theme-contrast, 0) * 100%));
+  --color-background-deep: color-mix(in srgb, #f1f2f4, #dcdee3 calc(var(--theme-contrast, 0) * 100%));
+  --color-background-raised: color-mix(in srgb, #e9eaee, var(--color-charcoal-200) calc(var(--theme-contrast, 0) * 100%));
+  --color-input-bg: color-mix(in srgb, #ffffff, #eef0f3 calc(var(--theme-contrast, 0) * 100%));
 
   /* Controls, grid lines and borders push down onto the charcoal stops - this is
      where light-mode contrast is actually visible, and where mixing toward #000
@@ -1079,8 +1089,12 @@
   --color-surface-control: color-mix(in srgb, #dcdee3, var(--color-charcoal-300) calc(var(--theme-contrast, 0) * 100%));
   --color-surface-control-hover: color-mix(in srgb, #cfd2d9, var(--color-charcoal-400) calc(var(--theme-contrast, 0) * 100%));
   --color-surface-control-active: color-mix(in srgb, #b8bcc6, var(--color-charcoal-500) calc(var(--theme-contrast, 0) * 100%));
-  --color-grid-dimmed: color-mix(in srgb, #eceef1, var(--color-charcoal-300) calc(var(--theme-contrast, 0) * 100%));
-  --color-grid-bright: color-mix(in srgb, #e2e4e9, var(--color-charcoal-400) calc(var(--theme-contrast, 0) * 100%));
+  /* Grid lines stop a tier short of where the controls and borders end up. They
+     divide rows and sections rather than outlining anything, so at full contrast
+     charcoal-400 read as ruled paper; these land soft but still legible against
+     the page (grid-bright 1.65:1, grid-dimmed 1.25:1 at 100%). */
+  --color-grid-dimmed: color-mix(in srgb, #eceef1, #cfd2d9 calc(var(--theme-contrast, 0) * 100%));
+  --color-grid-bright: color-mix(in srgb, #e2e4e9, var(--color-charcoal-300) calc(var(--theme-contrast, 0) * 100%));
   --color-border-bright: color-mix(in srgb, #d2d5db, var(--color-charcoal-400) calc(var(--theme-contrast, 0) * 100%));
   --color-border-brighter: color-mix(in srgb, #b9bdc7, var(--color-charcoal-500) calc(var(--theme-contrast, 0) * 100%));
   --color-border-brightest: color-mix(in srgb, #9ba1ad, var(--color-charcoal-550) calc(var(--theme-contrast, 0) * 100%));