feat: various a11y improvements

assets/styles/components/button.css

@@ -1,7 +1,7 @@
 .button {
     @apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8 cursor-pointer;
     @apply uppercase leading-none text-center;
-    @apply transition-colors outline-none focus:outline-none;
+    @apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-light;
 }
 
 .button--small {
@@ -13,14 +13,15 @@
 }
 
 .bg-button {
-    @apply bg-primary-light text-white;
-    @apply hover:bg-secondary;
+    @apply bg-none bg-primary-dark text-white;
+    @apply hover:bg-badge-gradient;
 }
 
 
 .bg-button--active,
 .bg-button--secondary {
-    @apply bg-secondary;
+    @apply bg-badge-gradient;
+    @apply hover:bg-none hover:bg-pink;
 }
 
 .bg-button--muted {

assets/styles/components/forms.css

@@ -4,7 +4,7 @@ label.required:after {
 }
 
 .form-field {
-    @apply border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 block w-full;
+    @apply border-zinc-400 focus:border-zinc-800 ring-0 focus:outline-2 focus:outline-offset-2 focus:outline-primary-light mt-1 block w-full;
 }
 
 .form-field--has-error {
@@ -13,7 +13,7 @@ label.required:after {
 
 .form-checkbox,
 .form-radio {
-    @apply border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-secondary h-4 w-4;
+    @apply border-zinc-400 focus:border-zinc-800 ring-0 focus:outline-2 focus:outline-offset-2 focus:outline-primary-light text-primary h-4 w-4;
 }
 
 .form-checkbox--has-error,

assets/styles/components/menu.css

@@ -1,11 +1,11 @@
 .menu--main {
-    @apply flex items-center m-0;
+    @apply flex items-center m-0 divide-x divide-white;
 }
 
 .menu--main a {
-    @apply block p-2 md:p-4 text-black hover:bg-zinc-400 hover:text-zinc-800 text-sm md:text-base;
+    @apply block py-2 px-4 text-white hover:bg-secondary hover:text-zinc-800 text-sm md:text-base;
 }
 
 .menu--main .current a {
-    @apply bg-zinc-400 text-zinc-800;
+    @apply bg-secondary text-zinc-800;
 }