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, 2 insertions, 19 deletions

diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 27b9b7f..cfd24f7 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -53,32 +53,25 @@
 	button {
 		cursor: pointer;
 		font-family: inherit;
-		transition: all 0.2s ease;
 		border: none;
 	}
 
 	button:disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
-		transform: none;
-		box-shadow: none;
 	}
 
 	.primary {
 		padding: 0.75rem 1.5rem;
-		border-radius: 0.75rem;
 		background: var(--accent);
 		color: var(--white);
 		font-size: 0.9375rem;
 		font-weight: 500;
 		align-self: flex-start;
-		box-shadow: 0 1px 2px var(--shadow);
 	}
 
 	.primary:hover:not(:disabled) {
 		background: var(--accent-hover);
-		transform: translateY(-1px);
-		box-shadow: 0 4px 8px var(--shadow-accent-lg);
 	}
 
 	.accent {
@@ -86,7 +79,6 @@
 		height: 3rem;
 		flex-shrink: 0;
 		padding: 0;
-		border-radius: 0.75rem;
 		background: var(--accent);
 		color: var(--white);
 		font-size: 1.25rem;
@@ -94,13 +86,10 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		box-shadow: 0 1px 2px var(--shadow);
 	}
 
 	.accent:hover:not(:disabled) {
 		background: var(--accent-hover);
-		transform: translateY(-1px);
-		box-shadow: 0 4px 8px var(--shadow-accent-lg);
 	}
 
 	.ghost {
@@ -108,7 +97,6 @@
 		width: 2rem;
 		aspect-ratio: 1;
 		padding: 0;
-		border-radius: 0.625rem;
 		background: transparent;
 		color: var(--text-secondary);
 		font-size: 1.25rem;
@@ -118,14 +106,12 @@
 	}
 
 	.ghost:hover:not(:disabled) {
-		background: var(--danger-hover-bg);
 		color: var(--danger);
 	}
 
 	.done {
 		flex-shrink: 0;
 		padding: 0.5rem 0.875rem;
-		border-radius: 0.625rem;
 		background: var(--success);
 		color: var(--white);
 		font-size: 0.875rem;
@@ -133,13 +119,11 @@
 	}
 
 	.done:hover:not(:disabled) {
-		filter: brightness(1.05);
-		transform: translateY(-1px);
+		background: oklch(from var(--success) calc(l - 0.05) c h);
 	}
 
 	.done.lg {
 		padding: 0.75rem 1.25rem;
-		border-radius: 0.75rem;
 		font-size: 0.9375rem;
 	}
 
@@ -148,10 +132,9 @@
 		height: 3rem;
 		flex-shrink: 0;
 		padding: 0;
-		border-radius: 0.75rem;
 		background: var(--surface);
 		color: var(--text-secondary);
-		border: 1.5px solid var(--border);
+		border: 1px solid var(--border);
 		font-size: 1.25rem;
 		font-weight: 500;
 		display: flex;