DPR-aware hairline + focus-ring widths tokens

Painted edges step down from 2px to 1px across the DPR 1.0 to 2.0 range, keyed by @media (min-resolution: ...) overrides further below. Two LCD artifacts drive this:

• Fractional DPR (e.g., Windows 4K @ 150% / 175% scaling): the browser's border code path snaps each side to the nearest device pixel inconsistently per scroll position, producing shimmer. Painting via inset box-shadow (the hairline utility) takes Skia's path-rendering path, which anti-aliases uniformly.
• Integer DPR (e.g., 4K @ 100% scaling): a single device-pixel hairline gets colored by whichever subpixel column it lands on, producing red/blue chromatic fringing. A wider hairline forces Skia to distribute color across adjacent subpixels. The scale is smooth (steps of 0.25px) and the three tokens move in lockstep, so the visual proportions of "hairline thickness : focus-ring gap : focus-ring thickness" stay constant when a window is dragged between monitors at different scaling, or when the browser's zoom is adjusted. This trades a tiny absolute size shift for stable proportions across DPR transitions.

Steps (hairline / focus-ring-width / focus-ring-offset): DPR < 1.25 → 2px / 4px / 2px DPR ≥ 1.25 → 1.75px / 3.5px / 1.75px DPR ≥ 1.5 → 1.5px / 3px / 1.5px DPR ≥ 1.75 → 1.25px / 2.5px / 1.25px DPR ≥ 2.0 → 1px / 2px / 1px

Focus-ring-width is always 2x hairline-width, ensuring the 2px CSS minimum required by WCAG 2.2 SC 2.4.13 (AAA) at all DPR values.

Name	Light	Dark	Description	Tailwind utility
--vueda-focus-ring-gap-color	var( --background )		gap colour between control edge and ring stroke when painting focus-ring-shadow (the inset-shadow variant of focus-ring). Must be opaque (a transparent gap would not mask the ring shadow behind it, collapsing the gap visually). Defaults to --background; scope-override per surface via [--vueda-focus-ring-gap-color:var(--card)], var(--popover), etc.

Tokens

--vueda-focus-ring-gap-color

Field	Value
Light	var( --background )
Source	client/lib/theme/vueda-tailwind/base.css:636

gap colour between control edge and ring stroke when painting focus-ring-shadow (the inset-shadow variant of focus-ring). Must be opaque (a transparent gap would not mask the ring shadow behind it, collapsing the gap visually). Defaults to --background; scope-override per surface via [--vueda-focus-ring-gap-color:var(--card)], var(--popover), etc.