Light mode glass borders are nearly invisible against the light background

[hletrd]

Problem

In light mode (data-mode="light"), glass component borders use white-on-light values that are nearly invisible against the #EBEEF4 background:

[data-mode=light] {
  --bg: #EBEEF4;

  --gs-bd: rgba(255, 255, 255, .56);   /* white border on light bg */
  --gc-bd: rgba(255, 255, 255, .62);   /* white border on light bg */
  --gi-bd: rgba(255, 255, 255, .52);   /* white border on light bg */
  --go-bd: rgba(255, 255, 255, .66);   /* white border on light bg */
}

The glass panels (.gs, .gc, .gi, .go) blend into the background with no visible edge. The effect is that cards, interactive elements, and overlays look like they have no border at all in light mode, which hurts visual hierarchy and makes it hard to distinguish layered glass surfaces.

In dark mode this works fine because white borders at low opacity create a subtle highlight against the dark #0A0D14 background.

Expected behavior

Glass components should have visible, subtle borders in light mode that provide enough contrast to distinguish them from the background — similar to how the dark mode borders work.

Possible fix

Use a subtle dark border in light mode instead of white:

[data-mode=light] {
  --gs-bd: rgba(15, 23, 42, .08);
  --gc-bd: rgba(15, 23, 42, .10);
  --gi-bd: rgba(15, 23, 42, .08);
  --go-bd: rgba(15, 23, 42, .12);
}

Or increase the background opacity of glass surfaces so the white inset highlight (inset 0 1px 0 rgba(255, 255, 255, .7) in --gc-sh) provides enough contrast on its own.

Environment

• Vitro base.css (latest from main)
• Tested in Chrome and Safari
• Both data-mode="light" with data-mesh="on" and data-mesh="off"