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

2 files changed, 21 insertions, 25 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;
+	}
 }
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 4ab1f05..e60a00e 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -1,26 +1,24 @@
 @layer tokens {
 	:root {
 		--white: oklch(1 0 0);
-		--bg: oklch(0.97 0.006 70);
-		--nav-height: 3rem;
+		--font-sans:
+			system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+			'Helvetica Neue', Arial, sans-serif;
+		--nav-height: 2.75rem;
+		--bg: var(--white);
 		--surface: var(--white);
-		--surface-hover: oklch(from var(--accent) 0.99 0.008 h);
-		--border: oklch(0.91 0.006 70);
+		--border: oklch(0.87 0.008 70);
 
 		--text: oklch(0.25 0.006 55);
-		--text-secondary: oklch(0.58 0.01 50);
+		--text-secondary: oklch(0.55 0.01 50);
 
-		--accent: oklch(0.66 0.12 30);
+		--accent: oklch(0.52 0.09 165);
 		--accent-hover: oklch(from var(--accent) calc(l - 0.06) c h);
+		--warn: oklch(0.58 0.11 70);
+		--warn-bg: oklch(from var(--warn) l c h / 0.12);
 
 		--success: oklch(0.72 0.07 140);
 		--danger: oklch(0.6 0.16 28);
-
-		--shadow: oklch(from var(--text) l c h / 0.06);
-		--shadow-accent: oklch(from var(--accent) l c h / 0.1);
-		--shadow-accent-focus: oklch(from var(--accent) l c h / 0.15);
-		--shadow-accent-lg: oklch(from var(--accent) l c h / 0.2);
 		--danger-bg: oklch(from var(--danger) l c h / 0.08);
-		--danger-hover-bg: oklch(from var(--danger) l c h / 0.1);
 	}
 }