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> ──── */