Keep modal and peer-row surfaces readable under the theme's text

[awizardxch]

Problem

Themes with a background image set --background to transparent so the image shows through. Two surfaces then fall back to --secondary:

• App modals (AppModalShell / SystemModalShell via resolveBackgroundTint): the first non-transparent candidate after --background is --secondary.
• Mobile peer rows (PeerList MobileRow): painted with --secondary directly, opaque so the swipe-to-delete trash can stays hidden.

A theme whose secondary is light under light text, such as the minted awizard theme (secondary: #f5f5f5, foreground: #e0f7ff), shows white bridge-approval modals and white peer rows with near-invisible text. The theme is an NFT, so its JSON can't be edited.

Change

Both places now pick the first theme surface that is opaque enough and has at least 3:1 contrast with --foreground. Colors are read through the browser's own parser, so hex, rgb(), hsl() and bare HSL channels all work.

• Modal tint: --background, --secondary, --muted, --card, then --popover, the theme's own floating-surface color, added before the hard fallback.
• Peer row: --secondary is kept whenever it is readable, then --popover, --card, --background.
• No readable candidate: the fallback is chosen against the text color: #1d2530 under light text, #ffffff under dark text. It is never white under white text.

Themes whose current choice is already readable are unchanged. A check in a browser engine with real theme values:

Theme	Modal	Peer row
awizard	--popover (dark)	--popover (dark)
dark HSL theme	--background (unchanged)	--secondary (unchanged)
light theme	--background (unchanged)	--secondary (unchanged)
every surface light under light text	#1d2530	#1d2530

tsc -p tsconfig.app.json, eslint and prettier pass on the touched files.

🤖 Generated with Claude Code