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, 82 insertions, 0 deletions

diff --git a/src/app.css b/src/app.css
index 90ee084..7b8464f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -316,3 +316,85 @@ button {
 	background: var(--danger-hover-bg);
 	color: var(--danger);
 }
+
+.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);
+}
+
+.bg-success {
+	background: var(--success);
+}
+
+.bg-accent {
+	background: var(--accent);
+}
+
+.bg-danger {
+	background: var(--danger);
+}
+
+.bg-accent-soft {
+	background: var(--shadow-accent);
+}
+
+.text-accent {
+	color: var(--accent);
+}
+
+.text-white {
+	color: var(--white);
+}
+
+.add-bar {
+	display: flex;
+	gap: 0.5rem;
+	padding: 0.75rem 0;
+}
+
+.add-bar input {
+	flex: 1;
+	background: var(--surface);
+	min-width: 0;
+}
+
+.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);
+}
+
+.status {
+	flex-shrink: 0;
+	padding: 0.25rem 0.5rem;
+	border-radius: 9999px;
+	font-size: 0.75rem;
+	font-weight: 600;
+	white-space: nowrap;
+}