feat(web): refonte visuelle « Emerald » (thème clair/sombre, polices, tokens)

Adopte le langage visuel du design system Emerald dans l'IDE web :
neutres zinc + accent emerald, polices auto-hébergées Inter + JetBrains
Mono, radii/pills mono, points de statut, motif terminal, halo/grain.
Refonte purement visuelle et additive (layout, routing, stores, protocole
inchangés).

- style.css : défauts sombres dans @theme + override clair sous
  html[data-theme=light] ; accent scindé (bright #34d399 / solid #059669 /
  hover) ; tokens border-soft/info/warn/danger/coffee ; idiomes globaux
  (focus/selection accent, scrollbars fines, jl-pulse/jl-blink, classes
  .chip/.status/.eyebrow/.label-mono/.caret/.halo/.grain, .btn*/.badge pill).
- lib/theme.ts : singleton themeMode/resolvedTheme (dark/light/system,
  persistedRef arb.theme) + application dataset.theme/metas ; script
  anti-FOUC inline dans index.html ; toggle ActivityBar + Réglages.
- Thèmes Monaco + xterm dark/light réactifs (palette ANSI + coloration
  syntaxique) ; fonts.ready + remeasureFonts pour l'alignement des glyphes.
- status-tokens : tons sémantiques tokenisés ; balayage des ~340 couleurs
  Tailwind brutes vers les tokens sur tout components/* et views/*
  (exceptions assumées commentées).
- GroupSummary.color exploité : icône de groupe teintée + ColorSwatchPicker
  (lib/group-colors.ts) dans les modals de groupe.
- Polices via @fontsource-variable/{inter,jetbrains-mono} (offline).

packages/web/src/components/CommandPalette.vue

@@ -2,14 +2,14 @@
   <Teleport to="body">
     <div v-if="open" class="fixed inset-0 z-[60] flex items-start justify-center p-4 pt-[10vh]" role="dialog" aria-modal="true">
       <div class="absolute inset-0 bg-black/60" @click="close" />
-      <div class="relative flex max-h-[70vh] w-full max-w-lg flex-col overflow-hidden rounded-xl border border-zinc-700 bg-zinc-900 shadow-pop">
-        <div class="flex items-center gap-2 border-b border-zinc-800 px-3">
-          <Search :size="16" class="text-zinc-500" />
+      <div class="relative flex max-h-[70vh] w-full max-w-lg flex-col overflow-hidden rounded-xl border border-border-strong bg-surface-1 shadow-pop">
+        <div class="flex items-center gap-2 border-b border-border px-3">
+          <Search :size="16" class="text-fg-subtle" />
           <input
             ref="inputEl"
             v-model="query"
             type="text"
-            class="w-full bg-transparent py-3 text-sm text-zinc-100 outline-none placeholder:text-zinc-600"
+            class="w-full bg-transparent py-3 text-sm text-fg outline-none placeholder:text-fg-subtle"
             :placeholder="t('palette.placeholder')"
             :aria-activedescendant="activeId ? `cmd-${activeId}` : undefined"
             role="combobox"
@@ -30,21 +30,21 @@
             role="option"
             :aria-selected="i === activeIndex"
             class="flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-2"
-            :class="i === activeIndex ? 'bg-zinc-800' : 'hover:bg-zinc-800/50'"
+            :class="i === activeIndex ? 'bg-surface-2' : 'hover:bg-surface-2/50'"
             @mousemove="activeIndex = i"
             @click="run(item)"
           >
-            <component :is="item.icon" :size="15" class="shrink-0 text-zinc-500" />
+            <component :is="item.icon" :size="15" class="shrink-0 text-fg-subtle" />
             <span class="min-w-0 flex-1">
-              <span class="block truncate text-sm text-zinc-100">{{ item.label }}</span>
-              <span v-if="item.sublabel" class="block truncate font-mono text-[11px] text-zinc-500">{{ item.sublabel }}</span>
+              <span class="block truncate text-sm text-fg">{{ item.label }}</span>
+              <span v-if="item.sublabel" class="block truncate font-mono text-[11px] text-fg-subtle">{{ item.sublabel }}</span>
             </span>
-            <span class="shrink-0 text-[10px] uppercase tracking-wide text-zinc-600">{{ t(`palette.types.${item.type}`) }}</span>
+            <span class="shrink-0 text-[10px] uppercase tracking-wide text-fg-subtle">{{ t(`palette.types.${item.type}`) }}</span>
           </li>
         </ul>
-        <p v-else class="px-3 py-6 text-center text-sm text-zinc-500">{{ t('palette.empty') }}</p>
+        <p v-else class="px-3 py-6 text-center text-sm text-fg-subtle">{{ t('palette.empty') }}</p>
 
-        <div class="border-t border-zinc-800 px-3 py-1.5 text-[11px] text-zinc-600">{{ t('palette.hint') }}</div>
+        <div class="border-t border-border px-3 py-1.5 text-[11px] text-fg-subtle">{{ t('palette.hint') }}</div>
       </div>
     </div>
   </Teleport>