feat(ui): add sheet surface token between canvas and white cards

The reading sheet used bg-surface (white), so the document cards inside
the article had the same background as the sheet itself. The spec's
three-level hierarchy is canvas → article panel (#FAFAF7) → white cards;
introduce --color-sheet (mode-aware) and use it on the article. Also
move JourneyItemCard from bg-white to bg-surface so dark mode remaps it,
and tint the curator annotation with bg-muted so it stands off the card.

Refs #797
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/lib/geschichte/JourneyItemCard.svelte

@@ -25,7 +25,7 @@ const hasNote = $derived(item.note != null && item.note.trim().length > 0);
 </script>
 
 <div class="mb-3">
-	<div class="rounded-sm border border-line bg-white p-3">
+	<div class="rounded-sm border border-line bg-surface p-3">
 		<!-- plaintext — do NOT use {@html} here -->
 		<p class="mb-0.5 font-serif text-sm leading-snug text-ink">{doc.title}</p>
 		{#if metaLine}
@@ -58,7 +58,7 @@ const hasNote = $derived(item.note != null && item.note.trim().length > 0);
 		</a>
 		{#if hasNote}
 			<!-- plaintext — do NOT use {@html} here -->
-			<div class="mt-3 rounded-r-sm border-l-2 border-brand-mint bg-surface py-1.5 pr-2 pl-3">
+			<div class="mt-3 rounded-r-sm border-l-2 border-brand-mint bg-muted py-1.5 pr-2 pl-3">
 				<p class="text-xs leading-relaxed text-ink-2 italic">{item.note}</p>
 			</div>
 		{/if}

frontend/src/lib/geschichte/JourneyItemCard.svelte.spec.ts

@@ -118,6 +118,22 @@ describe('JourneyItemCard', () => {
 		expect(note!.className).toContain('border-brand-mint');
 	});
 
+	it('card uses the surface token, not bg-white, so dark mode remaps it', async () => {
+		render(JourneyItemCard, { props: { item: baseItem() } });
+
+		const card = document.querySelector('[class*="border-line"]');
+		expect(card).not.toBeNull();
+		expect(card!.className).toContain('bg-surface');
+		expect(card!.className).not.toContain('bg-white');
+	});
+
+	it('annotation block is tinted with bg-muted to stand off the white card', async () => {
+		render(JourneyItemCard, { props: { item: baseItem({ note: 'Ein wichtiger Brief' }) } });
+
+		const note = document.querySelector('[class*="border-l-2"]');
+		expect(note!.className).toContain('bg-muted');
+	});
+
 	it('omits annotation block when note is blank or whitespace', async () => {
 		render(JourneyItemCard, { props: { item: baseItem({ note: '   ' }) } });