From 495210052fa2b0d1778161f83734e0d1d5f4497c Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 8 May 2026 16:48:33 +0200
Subject: [PATCH] style: add mint-soft, line-soft, link-quiet, ink-4 tokens
 (#483)

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

diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css
index 85c41e67..9137a68f 100644
--- a/frontend/src/routes/layout.css
+++ b/frontend/src/routes/layout.css
@@ -80,6 +80,12 @@
 	/* Static brand tokens (not themed) */
 	--color-brand-navy: var(--palette-navy);
 	--color-brand-mint: var(--palette-mint);
+
+	/* Reader dashboard tokens */
+	--color-mint-soft: var(--c-mint-soft); /* Mint-Pill background */
+	--color-line-soft: var(--c-line-soft); /* Stat-column dividers, row borders */
+	--color-link-quiet: var(--c-link-quiet); /* "Alle …" secondary links */
+	--color-ink-4: var(--c-ink-4); /* Card-head labels (light = ink-3, dark = #7080a8) */
 }
 
 /* ─── 4. Light mode (default) ─────────────────────────────────────────────── */
@@ -160,6 +166,12 @@
 	   with axe (tracked in #480) before tweaking the palette. */
 	--timeline-bar-idle: rgba(161, 220, 216, 0.35);
 	--timeline-bar-outside: var(--c-line);
+
+	/* Reader dashboard tokens — light mode */
+	--c-mint-soft: #d4f0ee; /* Mint-Pill BG — decorative fill (1.1:1 on white, WCAG carve-out) */
+	--c-line-soft: #f0ede6; /* Stat-column dividers, card row separator */
+	--c-link-quiet: #4a6e8a; /* Quiet link — 4.65:1 on #f0efe9 canvas WCAG AA ✓ */
+	--c-ink-4: #6b7280; /* Card-head labels (= ink-3 in light) */
 }
 
 /* ─── 5. Dark mode ─────────────────────────────────────────────────────────── */
@@ -236,6 +248,12 @@
 		   clears WCAG 1.4.11 non-text contrast for large UI elements. */
 		--timeline-bar-idle: #3a6e8c;
 		--timeline-bar-outside: #1a2735;
+
+		/* Reader dashboard tokens — dark mode */
+		--c-mint-soft: rgba(161, 218, 216, 0.14);
+		--c-line-soft: rgba(255, 255, 255, 0.06);
+		--c-link-quiet: var(--palette-mint);
+		--c-ink-4: #7080a8; /* 5.0:1 on #011526 WCAG AA ✓ */
 	}
 }
 
@@ -308,6 +326,12 @@
 	   clears WCAG 1.4.11 non-text contrast for large UI elements. */
 	--timeline-bar-idle: #3a6e8c;
 	--timeline-bar-outside: #1a2735;
+
+	/* Reader dashboard tokens — dark mode */
+	--c-mint-soft: rgba(161, 218, 216, 0.14);
+	--c-line-soft: rgba(255, 255, 255, 0.06);
+	--c-link-quiet: var(--palette-mint);
+	--c-ink-4: #7080a8; /* 5.0:1 on #011526 WCAG AA ✓ */
 }
 
 /* ─── 6. Icon inversion — De Gruyter icons are black SVGs loaded as <img> ──── */