style: use theme colors for sync status icon

Replace green/blue/yellow/red with palette colors: --primary for synced,
--primary with opacity for syncing, --text-muted for offline, muted red
for error.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/lib/components/SyncIndicator.svelte

@@ -46,12 +46,12 @@
 
 <div class="flex items-center" title="Sync status: {status}" data-testid="sync-indicator">
 	{#if displayStatus === 'synced'}
-		<CloudCheck class="h-5 w-5 text-green-500" />
+		<CloudCheck class="h-5 w-5 text-[var(--primary)]" />
 	{:else if displayStatus === 'syncing'}
-		<CloudSync class="h-5 w-5 text-blue-500" />
+		<CloudSync class="h-5 w-5 text-[var(--primary)] opacity-60" />
 	{:else if displayStatus === 'offline'}
-		<CloudOff class="h-5 w-5 text-yellow-500" />
+		<CloudOff class="h-5 w-5 text-[var(--text-muted)]" />
 	{:else}
-		<CloudAlert class="h-5 w-5 text-red-500" />
+		<CloudAlert class="h-5 w-5 text-[#b44]" />
 	{/if}
 </div>

todo.md

@@ -0,0 +1,5 @@
+- [x] use colors for the cloud status icon that fit more into the colour scheme
+- [x] do we actually have a colour palette and theme ?
+- [ ] choose diffent icon for the background colour
+- [ ] make sure we use only lucid icons everywhere
+- [ ]