ux improvements: contrast, readability, accessibility, keyboard nav

css/base.css

@@ -3,7 +3,7 @@
     --surface-container-highest: #eae2d2;
     --surface: #fff8f0;
     --backdrop-blur: 24px;
-    --primary: #8c4d50;
+    --primary: #753a3d;
     --primary-container: #fcacaf;
     --on-background: #363227;
     --nav-height: 4rem;
@@ -33,8 +33,8 @@
 
 body {
     background-color: var(--surface);
-    font-family: "Plus Jakarta Sans", sans-serif;
     box-sizing: border-box;
+    line-height: 1.5;
 }
 
 h1,
@@ -91,7 +91,7 @@ h5 {
 
 p {
     color: var(--on-background);
-    line-height: 1.5rem;
+    line-height: 1.5;
 }
 
 body > nav,
@@ -134,6 +134,41 @@ img {
     color: transparent;
 }
 
+:focus-visible {
+    outline: 2px solid var(--on-background);
+    outline-offset: 2px;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+.sr-only:focus {
+    position: fixed;
+    top: 0.5rem;
+    left: 0.5rem;
+    width: auto;
+    height: auto;
+    padding: 0.5rem 1rem;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+    background: var(--surface);
+    color: var(--on-background);
+    z-index: 1000;
+    border-radius: var(--small-radius);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+
 main {
     transition: opacity 0.15s ease;
 }