fix: make density setting functional across entire UI

Rename "List Density" to "Density" and apply spacing changes globally
instead of only to email list item heights.

- Replace hardcoded padding/gap values with CSS custom properties
  (--density-item-py, --density-item-gap, --density-header-py,
  --density-card-p, --density-sidebar-py) set via JS on :root
- Apply density-responsive spacing to email list items, thread views,
  email viewer, sidebar, navigation rail, contacts, and calendar
- Use inline styles instead of Tailwind arbitrary value classes to
  avoid Turbopack compilation hangs
- Rename listDensity → density in store, types, and components
- Add persist migration (v1 → v2) and onRehydrateStorage callback
- Update all 8 locale files with broadened labels/descriptions

components/contacts/contact-group-list.tsx

@@ -69,10 +69,11 @@ export function ContactGroupList({
                   key={group.id}
                   onClick={() => onSelectGroup(group.id)}
                   className={cn(
-                    "w-full flex items-center gap-3 px-4 py-3 text-left transition-colors",
+                    "w-full flex items-center px-4 text-left transition-colors",
                     "hover:bg-muted",
                     group.id === selectedGroupId && "bg-accent text-accent-foreground"
                   )}
+                  style={{ gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
                 >
                   <div className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                     <Users className="w-4 h-4 text-primary" />

components/contacts/contact-list-item.tsx

@@ -22,10 +22,11 @@ export function ContactListItem({ contact, isSelected, onClick }: ContactListIte
     <button
       onClick={onClick}
       className={cn(
-        "w-full flex items-center gap-3 px-4 py-3 text-left transition-colors",
+        "w-full flex items-center px-4 text-left transition-colors",
         "hover:bg-muted",
         isSelected && "bg-accent text-accent-foreground"
       )}
+      style={{ gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
     >
       <Avatar name={name} email={email} size="sm" />
       <div className="flex-1 min-w-0">

components/contacts/contact-list.tsx

@@ -204,7 +204,8 @@ export function ContactList({
                     e.stopPropagation();
                     onToggleSelection(contact.id);
                   }}
-                  className="pl-4 pr-1 py-3 flex-shrink-0"
+                  className="pl-4 pr-1 flex-shrink-0"
+                  style={{ paddingBlock: 'var(--density-item-py)' }}
                 >
                   <div className={cn(
                     "w-4 h-4 rounded border flex items-center justify-center transition-colors",