fix(field): remove the double border on focus

The field utility was doing two things at once: recolouring the 1px border to
magenta AND drawing the brand's 2px magenta ring offset by the page colour. The
result was three concentric edges — magenta border, page-colour gap, magenta
ring — so a focused Input, Textarea or SelectTrigger read as a double border.

The ring is the part the brand specifies ("2px magenta ring, offset by the page
colour"), so the border recolour is what goes. It stays on its resting grey:
the ring is the affordance, and the border's job is to delineate the field,
which it does whether or not the field has focus.

Fixes all three consumers at once — Input, Textarea and SelectTrigger share the
utility and none add focus styling of their own. Nothing else in the set could
have the same bug: every other component uses Tailwind's ring utilities and
none recolour a border on focus.

Side benefit: an invalid field that has focus now shows its red border and the
magenta ring together, where previously the focus border overwrote the
aria-invalid one and hid the error state.

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

Author: HaydenBruin

src/lib/styles/utilities.css

@@ -92,11 +92,16 @@
   }
 
   /* 2px magenta ring, offset by the page colour, per the system's focus
-     rule. Always visible on keyboard focus — never removed. */
+     rule. Always visible on keyboard focus — never removed.
+
+     The border deliberately stays on its resting grey. Recolouring it to
+     magenta as well drew a second magenta line inside the offset gap, so a
+     focused field read as a double border — magenta, page colour, magenta.
+     The ring is the affordance; the border's job is to delineate the field,
+     and it does that whether or not the field has focus. */
   &:focus,
   &:focus-visible {
     outline: none;
-    border-color: var(--color-primary);
     box-shadow:
       0 0 0 2px var(--color-background),
       0 0 0 4px var(--color-ring);