fix: couple css improvements for webkit-based browsers

introduces a new mixin to handle webkit-based shenanigans.
also adds a mixin to make keyboard navigation easier.
and other small tweaks to css(like accent color and color scheme).

src/styles/base/_base.scss

@@ -9,11 +9,17 @@ body {
 #__next {
   display: grid;
   grid-template-rows: min-content 1fr min-content;
+
+  &:has(span[role='progressbar']) {
+    cursor: progress;
+  }
 }
 
 body {
   color: var(--clr-text);
   background-color: var(--clr-bg);
+  color-scheme: var(--clr-scheme);
+  accent-color: var(--clr-fill);
 }
 
 // restricting to 1600px width
@@ -22,3 +28,20 @@ body {
   width: min(100%, var(--max-width));
   margin-inline: auto;
 }
+
+////////////////////////////////////////////////////////
+//                 KEYBOARD NAVIGATION
+////////////////////////////////////////////////////////
+:focus {
+  @include helper.focus-rules;
+}
+
+@supports selector(:focus-visible) {
+  :focus {
+    outline: none;
+  }
+
+  :focus-visible {
+    @include helper.focus-rules;
+  }
+}

src/styles/base/_index.scss

@@ -1,5 +1,5 @@
 @forward './reset';
-// @forward './helpers';
+@forward './helpers';
 @forward './root';
 @forward './base';
 @forward './fonts';

src/styles/base/_root.scss

@@ -24,4 +24,9 @@
   @include helper.bp('bp-700') {
     @include helper.typescale('mobile');
   }
+
+  // not using any external fonts on webkit because of many issues
+  @include helper.fix-for-safari {
+    --ff-accent: var(--ff-base);
+  }
 }