update base styles

src/assets/css/global/base/global-styles.css

@@ -76,7 +76,7 @@ textarea {
 }
 
 svg {
-  block-size: 2ex;
+  block-size: 0.6lh;
   inline-size: auto;
   flex: none;
 }
@@ -87,21 +87,12 @@ strong {
 }
 
 hr {
+  border: none;
   height: 1px;
   width: 10%;
-  margin-block: var(--space-m-l);
+  margin-block: var(--flow-space, var(--space-m-l));
   margin-inline-start: 0;
   background-color: var(--color-bg-accent-2);
-  border: 0;
-}
-
-a {
-  color: currentcolor;
-  text-decoration-thickness: 0.08em;
-}
-
-a:hover {
-  text-decoration: none;
 }
 
 figcaption {
@@ -109,12 +100,33 @@ figcaption {
   font-size: var(--size-step-min-1);
   text-align: center;
   padding-block-end: var(--space-xs);
-  border-bottom: 1px solid var(--color-bg-accent);
+  border-bottom: var(--stroke);
+}
+
+a {
+  text-decoration-thickness: 0.15ex;
+  text-underline-offset: 0.2ch;
+}
+
+a:not([class]):hover {
+  text-decoration: none;
+}
+
+:focus {
+  outline: none;
 }
 
 :focus-visible {
-  outline: 3px solid;
+  outline: 3px solid var(--focus-color, currentColor);
-  outline-offset: 0.3ch;
+  outline-offset: var(--focus-offset, 0.3ch);
+}
+
+/* reduce focus offset for Firefox
+*/
+@supports (-moz-appearance: none) {
+  :root {
+    --focus-offset: 0.08em;
+  }
 }
 
 ::selection {

src/assets/css/global/base/reset.css

@@ -56,14 +56,14 @@ ol[role='list'] {
   list-style: none;
 }
 
-/* Padding for lists */
 [role='list'] {
   padding: 0;
 }
 
 /* Anchor styles */
-a:not([class]) {
+a {
   text-decoration-skip-ink: auto;
+  color: currentColor;
 }
 
 /* Image styles */
@@ -100,7 +100,6 @@ textarea {
   resize: block;
 }
 
-/* Textarea height */
 textarea:not([rows]) {
   min-height: 10em;
 }
@@ -153,7 +152,7 @@ html:has(dialog[open]:modal) {
 
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
-  html:focus-within {
+  :focus-within {
     scroll-behavior: auto;
   }
 

src/assets/css/global/base/variables.css

@@ -6,9 +6,10 @@
   --transition-duration: 250ms;
   --transition-timing: ease;
   --wrapper-width: 85rem;
-  --tracking: -0.05ch;
+  --tracking: -0.04ch;
   --tracking-s: -0.075ch;
-  --tracking-wide: 0.05ch;
+  --tracking-wide: 0.04ch;
+  --stroke: 1px solid var(--color-bg-accent);
 
   --gradient-rainbow: linear-gradient(90deg, #cf4662 10%, #fbbe25 30%, #62c95c 50%, #08bccb 75%, #a977d5 90%);
   --gradient-conic: conic-gradient(
@@ -26,6 +27,7 @@
 
   --color-light: var(--color-gray-100);
   --color-dark: var(--color-gray-900);
+  --color-mid: var(--color-gray-400);
 }
 
 /* Light theme */