💄(keyboard) improve the global focus ring selector

this triggered on a few things we didn't want (labels particularly).
plus, handle the focus ring color via panda, so that it's available in
the JS (will be useful in soon to be commited stuff)

src/frontend/panda.config.ts

@@ -214,6 +214,7 @@ const config: Config = {
           subtle: { value: '{colors.amber.100}' },
           'subtle-text': { value: '{colors.amber.700}' },
         },
+        focusRing: { value: 'rgb(74, 121, 199)' },
       },
       shadows: {
         box: { value: '{shadows.sm}' },

src/frontend/src/styles/index.css

@@ -11,10 +11,11 @@ body,
   outline: none;
 }
 
-[data-rac][data-focus-visible],
-:is(a, button, input, select, textarea):not([data-rac]):focus-visible {
+[data-rac][data-focus-visible]:not(label),
+:is(a, button, input[type='text'], select, textarea):not(
+    [data-rac]
+  ):focus-visible {
   outline: 2px solid black;
   outline-offset: 1px;
-  outline-color: Highlight;
-  outline-color: -webkit-focus-ring-color;
+  outline-color: var(--colors-focus-ring);
 }