Extract duplicated styles into shared molecules and color atoms

Move .score, .status, .add-bar and .btn-accent molecules into app.css
and replace BEM color modifiers with bare atoms (bg-success, bg-accent,
bg-danger, bg-accent-soft, text-accent, text-white). Rename the
category-specific cat-add-bar to add-bar and the groceries page's
sticky autocomplete bar to grocery-add-bar to avoid the collision.
Cuts dcd duplicate lines from 1288 to 780.

1 files changed, 4 insertions, 64 deletions

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4d4777a..fd987ff 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,9 +6,9 @@
 	let name = $state('');
 
 	function scoreClass(score: number): string {
-		if (score >= 80) return 'score score--good';
-		if (score >= 50) return 'score score--mid';
-		return 'score score--bad';
+		if (score >= 80) return 'score bg-success';
+		if (score >= 50) return 'score bg-accent';
+		return 'score bg-danger';
 	}
 </script>
 
@@ -18,7 +18,7 @@
 		<span class={scoreClass(data.globalScore)}>{data.globalScore}</span>
 	</header>
 
-	<form class="cat-add-bar" method="POST" action="?/addProject" use:enhance>
+	<form class="add-bar" method="POST" action="?/addProject" use:enhance>
 		<input
 			class="form-input"
 			type="text"
@@ -73,66 +73,6 @@
 		color: var(--accent);
 	}
 
-	.score {
-		flex-shrink: 0;
-		min-width: 2.75rem;
-		padding: 0.25rem 0.5rem;
-		border-radius: 9999px;
-		text-align: center;
-		font-size: 0.875rem;
-		font-weight: 700;
-		color: var(--white);
-	}
-
-	.score--good {
-		background: var(--success);
-	}
-
-	.score--mid {
-		background: var(--accent);
-	}
-
-	.score--bad {
-		background: var(--danger);
-	}
-
-	.cat-add-bar {
-		display: flex;
-		gap: 0.5rem;
-		padding: 0.75rem 0;
-	}
-
-	.cat-add-bar input {
-		flex: 1;
-		background: var(--surface);
-	}
-
-	.btn-accent {
-		width: 3rem;
-		height: 3rem;
-		flex-shrink: 0;
-		padding: 0;
-		border: none;
-		border-radius: 0.75rem;
-		background: var(--accent);
-		color: var(--white);
-		font-size: 1.25rem;
-		font-weight: 500;
-		font-family: inherit;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: all 0.2s ease;
-		box-shadow: 0 1px 2px var(--shadow);
-	}
-
-	.btn-accent:hover {
-		background: var(--accent-hover);
-		transform: translateY(-1px);
-		box-shadow: 0 4px 8px var(--shadow-accent-lg);
-	}
-
 	.empty {
 		margin-top: 1rem;
 		padding: 2rem;