feat(design): apply Monolith Editorial design system to all Fase 1 screens

- Remove all 1px border separators (sidebar border-r, page header border-b,
  section border-t, member list divide-y, invite card border). Separation is
  now achieved via background color shifts and whitespace per the "No-Line" rule.
- Fix sidebar: bg-surface-raised vs bg-background creates tonal separation.
- Correct dark background to #020617 (slate-950) per spec.
- Add surface-container-low, text-primary/secondary/muted, destructive tokens.
- Fix CSS variable color space: all tokens are RGB triplets; switch Tailwind
  config and app.css from hsl() to rgb() to prevent yellow/warm color bleed.
- Replace emoji nav icons with Lucide icons at 16px / 1.5 stroke-width.
- Apply Masthead typography (uppercase Label-MD + Title-LG) to all page headers
  and section labels across lists, tasks, notes, search, settings, manage.
- Destructive action (sign out) uses bg-destructive per spec.
- Add `just serve` command: builds and runs the prod Node server at :3000
  against the dev Docker stack for production build testing.
- Add nav_collective i18n key (en + es).

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

apps/web/src/routes/(app)/settings/+page.svelte

@@ -143,11 +143,16 @@
 </script>
 
 <div class="flex flex-1 flex-col overflow-hidden">
-	<header class="flex h-14 items-center border-b border-slate-200 px-6 dark:border-slate-700">
-		<h1 class="text-base font-semibold text-slate-900 dark:text-slate-50">{m.settings_title()}</h1>
+	<header class="px-8 pb-4 pt-8">
+		<p class="mb-1 text-[13px] font-semibold uppercase tracking-[0.05em] text-text-secondary">
+			{m.nav_settings()}
+		</p>
+		<h1 class="text-[20px] font-semibold tracking-[-0.01em] text-slate-900 dark:text-slate-50">
+			{m.settings_title()}
+		</h1>
 	</header>
 
-	<div class="flex-1 overflow-y-auto p-6">
+	<div class="flex-1 overflow-y-auto px-8 py-6">
 		<div class="mx-auto max-w-md space-y-8">
 
 			<!-- Avatar preview -->
@@ -163,7 +168,7 @@
 
 			<!-- Display name -->
 			<section>
-				<label for="display-name" class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">
+				<label for="display-name" class="mb-1 block text-[13px] font-semibold uppercase tracking-[0.05em] text-text-secondary">
 					{m.settings_display_name()}
 				</label>
 				<div class="relative">
@@ -185,7 +190,7 @@
 
 			<!-- Avatar -->
 			<section>
-				<p class="mb-3 text-sm font-medium text-slate-700 dark:text-slate-300">
+				<p class="mb-3 text-[13px] font-semibold uppercase tracking-[0.05em] text-text-secondary">
 					{m.settings_avatar()}
 				</p>
 
@@ -229,7 +234,7 @@
 
 			<!-- Language -->
 			<section>
-				<p class="mb-3 text-sm font-medium text-slate-700 dark:text-slate-300">
+				<p class="mb-3 text-[13px] font-semibold uppercase tracking-[0.05em] text-text-secondary">
 					{m.settings_language()}
 				</p>
 				<div class="flex gap-2">
@@ -247,9 +252,9 @@
 				</div>
 			</section>
 
-			<!-- Account -->
-			<section class="border-t border-slate-200 pt-6 dark:border-slate-700">
-				<p class="mb-3 text-sm font-medium text-slate-700 dark:text-slate-300">
+			<!-- Account — spacing creates the separation, not a border line -->
+			<section class="pt-8">
+				<p class="mb-3 text-[13px] font-semibold uppercase tracking-[0.05em] text-text-secondary">
 					{m.settings_account()}
 				</p>
 				<a
@@ -262,8 +267,7 @@
 				</a>
 				<button
 					onclick={logout}
-					class="rounded-lg border border-red-200 px-4 py-2 text-sm font-medium text-red-600
-						hover:bg-red-50 dark:border-red-800 dark:text-red-400 dark:hover:bg-red-900/20"
+					class="rounded-md bg-destructive px-4 py-2 text-sm font-semibold text-white hover:opacity-90"
 				>
 					{m.settings_logout()}
 				</button>