From e4f21bd896a4bf1f82654458e0286dcb84ad951f Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 16 Apr 2026 15:50:13 +0200
Subject: [PATCH] feat(#221): add --c-tag-* CSS custom properties for 10
 semantic tag color tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Light and dark variants for: sage, sienna, amber, slate, violet, rose,
cobalt, moss, sand, coral — used as decorative dot colors on tag chips.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/layout.css | 36 ++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css
index d9b311e7..39a433e7 100644
--- a/frontend/src/routes/layout.css
+++ b/frontend/src/routes/layout.css
@@ -115,6 +115,18 @@
 	--c-danger: #c0392b;
 	--c-danger-fg: #ffffff;
 
+	/* Tag color tokens — decorative dot colors on tag chips */
+	--c-tag-sage: #5a8a6a;
+	--c-tag-sienna: #a0522d;
+	--c-tag-amber: #c17a00;
+	--c-tag-slate: #607080;
+	--c-tag-violet: #7a4f9a;
+	--c-tag-rose: #c0446e;
+	--c-tag-cobalt: #3060b0;
+	--c-tag-moss: #4a7a3a;
+	--c-tag-sand: #9a8040;
+	--c-tag-coral: #c05540;
+
 	/* PersonType badge — institution (navy-tinted blue) */
 	--c-badge-institution-bg: #e8eff7;
 	--c-badge-institution-text: #1a4971;
@@ -183,6 +195,18 @@
 		/* Danger — destructive actions (4.7:1 on #011526 — WCAG AA ✓) */
 		--c-danger: #e55347;
 		--c-danger-fg: #ffffff;
+
+		/* Tag color tokens — lighter for visibility on dark backgrounds */
+		--c-tag-sage: #7abf8a;
+		--c-tag-sienna: #cc7050;
+		--c-tag-amber: #f0aa30;
+		--c-tag-slate: #8a9db0;
+		--c-tag-violet: #b07ad0;
+		--c-tag-rose: #f07090;
+		--c-tag-cobalt: #6090e0;
+		--c-tag-moss: #70b060;
+		--c-tag-sand: #c0a060;
+		--c-tag-coral: #f07060;
 	}
 }
 
@@ -235,6 +259,18 @@
 	/* Danger — destructive actions (4.7:1 on #011526 — WCAG AA ✓) */
 	--c-danger: #e55347;
 	--c-danger-fg: #ffffff;
+
+	/* Tag color tokens — lighter for visibility on dark backgrounds */
+	--c-tag-sage: #7abf8a;
+	--c-tag-sienna: #cc7050;
+	--c-tag-amber: #f0aa30;
+	--c-tag-slate: #8a9db0;
+	--c-tag-violet: #b07ad0;
+	--c-tag-rose: #f07090;
+	--c-tag-cobalt: #6090e0;
+	--c-tag-moss: #70b060;
+	--c-tag-sand: #c0a060;
+	--c-tag-coral: #f07060;
 }
 
 /* ─── 6. Icon inversion — De Gruyter icons are black SVGs loaded as <img> ──── */