Restyle to a flat Miniflux-like design

- hairline separators instead of bordered rows, square corners, no shadows
- white background, system font stack, slimmer headings
- pine green accent; amber warn ramp carries the attention marks (due/late/mid)
- no hover backgrounds: hover is color/fill-state only
- reserve bold nav tab width and the scrollbar gutter so navigation never shifts layout

1 files changed, 11 insertions, 13 deletions

diff --git a/src/styles/base.css b/src/styles/base.css
index 8a67f66..5849103 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -8,22 +8,17 @@
 	}
 
 	:root {
-		font-family:
-			'Inter',
-			system-ui,
-			-apple-system,
-			BlinkMacSystemFont,
-			'Segoe UI',
-			Roboto,
-			sans-serif;
+		font-family: var(--font-sans);
 		font-size: 16px;
 		line-height: 1.5;
 		color: var(--text);
 		background-color: var(--bg);
+		scrollbar-gutter: stable;
 	}
 
 	body {
 		min-height: 100dvh;
+		background-color: var(--bg);
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
 	}
@@ -33,19 +28,22 @@
 	}
 
 	h1 {
-		font-size: 1.875rem;
+		font-size: 1.25rem;
 		font-weight: 700;
-		letter-spacing: -0.02em;
 	}
 
 	h2 {
-		font-size: 1.25rem;
-		font-weight: 600;
-		letter-spacing: -0.01em;
+		font-size: 1rem;
+		font-weight: 700;
 	}
 
 	button {
 		cursor: pointer;
 		font-family: inherit;
 	}
+
+	:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 1px;
+	}
 }