Design: Improve text readability in many places

- Change light to dark text over theme-colored backgrounds
- Nit: Fix a tiny margin in one place

Author: vdavid

apps/desktop/src/app.css

@@ -27,11 +27,24 @@
     --color-text-secondary: #666666;
     --color-text-tertiary: #888888;
 
+    /* === macOS system accent colors (for reference / testing) ===
+     * These are the fixed colors returned by NSColor.controlAccentColor().
+     * "Multicolor" (the default macOS option) returns Blue. */
+    --color-apple-blue: #087aff;
+    --color-apple-purple: #a54fa7;
+    --color-apple-pink: #f74f9f;
+    --color-apple-red: #ff5157;
+    --color-apple-orange: #f6821b;
+    --color-apple-yellow: #ffc601;
+    --color-apple-green: #61bb46;
+    --color-apple-graphite: #8b8c8c;
+
     /* === Interactive States ===
      * These accent colors are CSS fallbacks only. At runtime, the Rust backend
      * reads the macOS system accent color and overrides --color-accent via
      * accent-color.ts → initAccentColor(). See src-tauri/src/accent_color.rs. */
     --color-accent: #d4a006;
+    --color-accent-fg: #1a1a1a; /* Text on accent backgrounds — dark in both themes for a11y */
     --color-accent-hover: color-mix(in oklch, var(--color-accent), white 15%);
     --color-accent-subtle: color-mix(in oklch, var(--color-accent), transparent 85%);
     --color-cmdr-gold: #d4a006;

apps/desktop/src/lib/file-operations/transfer/TransferDialog.svelte

@@ -651,7 +651,7 @@
     .toggle-option.active {
         background: var(--color-accent);
         border-color: var(--color-accent);
-        color: white;
+        color: var(--color-accent-fg);
     }
 
     .toggle-option:not(.active):hover {

apps/desktop/src/lib/settings/components/SettingRow.svelte

@@ -130,8 +130,9 @@
     }
 
     .restart-badge {
-        background: var(--color-warning);
-        color: white;
+        background: var(--color-accent);
+        color: var(--color-accent-fg);
+        margin-left: var(--spacing-xs);
     }
 
     .setting-control {

apps/desktop/src/lib/settings/components/SettingSelect.svelte

@@ -323,12 +323,12 @@
     /* Highlighted item (keyboard navigation) - same as checked for immediate feedback */
     :global(.select-item[data-highlighted]) {
         background: var(--color-accent);
-        color: white;
+        color: var(--color-accent-fg);
     }
 
     :global(.select-item[data-state='checked']) {
         background: var(--color-accent);
-        color: white;
+        color: var(--color-accent-fg);
     }
 
     :global(.select-item[data-state='checked']:hover),
@@ -353,7 +353,7 @@
     :global(.select-item[data-state='checked'] .item-indicator),
     :global(.select-item[data-highlighted] .item-indicator) {
         visibility: visible;
-        color: white;
+        color: var(--color-accent-fg);
     }
 
     /* When Custom... is highlighted, hide the checked state from other items */

apps/desktop/src/lib/settings/components/SettingToggleGroup.svelte

@@ -71,7 +71,7 @@
 
     :global(.toggle-item[data-state='on']) {
         background: var(--color-accent);
-        color: white;
+        color: var(--color-accent-fg);
     }
 
     :global(.toggle-item[data-state='on']:hover) {

apps/desktop/src/lib/settings/components/SettingsSidebar.svelte

@@ -306,7 +306,7 @@
 
     .section-item.selected {
         background: var(--color-accent);
-        color: white;
+        color: var(--color-accent-fg);
     }
 
     .section-item.selected:hover {
@@ -319,6 +319,6 @@
     }
 
     .section-item.subsection.selected {
-        color: white;
+        color: var(--color-accent-fg);
     }
 </style>

apps/desktop/src/lib/settings/sections/KeyboardShortcutsSection.svelte

@@ -556,7 +556,7 @@
 
     .filter-chip.active {
         background: var(--color-accent);
-        color: white;
+        color: var(--color-accent-fg);
         border-color: var(--color-accent);
     }
 
@@ -681,7 +681,7 @@
 
     .shortcut-pill.editing {
         background: var(--color-accent);
-        color: white;
+        color: var(--color-accent-fg);
         border-color: var(--color-accent);
     }
 

apps/desktop/src/lib/ui/Button.svelte

@@ -71,7 +71,7 @@
     /* === Variant: primary === */
     .btn-primary {
         background: var(--color-accent);
-        color: white;
+        color: var(--color-accent-fg);
         border: none;
     }