feat(web): couche de tokens de design centralisée (surfaces, statuts, terminal)

Introduit une couche sémantique dans style.css (@theme) : surfaces (surface-0..3), bordures, texte (fg/muted/subtle) et accent, aliasant la palette Tailwind (rendu identique, vérifié dans le CSS produit). Ajoute les métriques du chrome IDE (--ide-*) pour la refonte à venir.

Centralise deux sources uniques : lib/terminal-theme.ts (thème + police xterm) et lib/status-tokens.ts (tons de statut, dédupliqués entre BaseBadge et SessionStateBadge). Définit le thème Monaco « arboretum-dark ». Remplace les #09090b épars des composants par bg-surface-0 (ne restent que index.html et les renderers exigeant un hex concret).

packages/web/src/components/ui/BaseBadge.vue

@@ -6,30 +6,15 @@
 </template>
 
 <script setup lang="ts">
-// Pastille d'état : centralise les paires bg/text répétées (zinc/emerald/amber/sky/red).
+// Pastille d'état : les paires bg/text et couleurs de point vivent dans lib/status-tokens
+// (partagées avec SessionStateBadge).
 import { computed } from 'vue';
-
-type Tone = 'zinc' | 'emerald' | 'amber' | 'sky' | 'red';
+import { TONE_BADGE, TONE_DOT, type Tone } from '../../lib/status-tokens';
 
 const props = withDefaults(defineProps<{ tone?: Tone; dot?: boolean; pulse?: boolean }>(), {
   tone: 'zinc',
 });
 
-const TONES: Record<Tone, string> = {
-  zinc: 'bg-zinc-800 text-zinc-400',
-  emerald: 'bg-emerald-950 text-emerald-400',
-  amber: 'bg-amber-950 text-amber-300',
-  sky: 'bg-sky-950 text-sky-300',
-  red: 'bg-red-950 text-red-400',
-};
-const DOTS: Record<Tone, string> = {
-  zinc: 'bg-zinc-500',
-  emerald: 'bg-emerald-400',
-  amber: 'bg-amber-300',
-  sky: 'bg-sky-300',
-  red: 'bg-red-400',
-};
-
-const toneClass = computed(() => TONES[props.tone]);
-const dotClass = computed(() => [DOTS[props.tone], props.pulse ? 'animate-pulse' : '']);
+const toneClass = computed(() => TONE_BADGE[props.tone]);
+const dotClass = computed(() => [TONE_DOT[props.tone], props.pulse ? 'animate-pulse' : '']);
 </script>