adaptive-luminescent-borderlisted

# Adaptive Luminescent Border A `1px solid #ccc` line is a wall: the same grey whether it sits on cream or on near-black, indifferent to the image behind it, visibly a stroke painted *on top of* the layout. The boundaries in expensive interfaces don't read as lines — they read as *edges*: a slight groove where a panel meets paper, a thin thread of light where a card lifts off a dark ground. They're made of transparency and gradient rather than opaque colour, so they pick up what's behind them and change character when the ground changes. Two profiles, one component: on light grounds the edge is a **debossed groove** — a faint dark hairline under the bottom edge and a light line just inside the top edge, drawn with an inset/outset `box-shadow` pair (a highlight can't come from a blend mode on a light ground: `multiply` can only darken, and white on cream is invisible); on dark grounds it's a **luminous fiber** (a 0.5px semi-transparent light line with a hint of the accent hue, `plus-lighter`-blended so it glows rather than sits). The switch is automatic because both are driven by the same tokens the ground system remaps. ## The masked-stroke technique Draw the border as a gradient on a pseudo-element, then mask away everything except a ring the width of the stroke: ```css .luminescent-panel { position: relative; border-radius: 8px; isolation: isolate; } .luminescent-panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--edge-s