fix: design system v4 polish — home icon, mobile hamburger, contrast, font-label cleanup

- Home sidebar icon: always cyan, bg-accent-dim only when route is "/"
- Mobile TopBar: add left padding so hamburger isn't hidden behind logo
- Landing page: bump card border color (#1e2130 → #2a2f3d) for better contrast
- Replace all font-label references (40 occurrences, 19 files) with font-mono or font-sans
- Remove deprecated --font-label CSS variable from index.css
- Convert hardcoded hex in layout inline styles to CSS variables (light-mode ready)
- Add @types/react-syntax-highlighter for script builder types

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/layout/CommandPalette.tsx

@@ -329,7 +329,7 @@ export function CommandPalette({ open, onClose }: CommandPaletteProps) {
             placeholder="Search flows, ask a question, navigate…"
             className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-hidden"
           />
-          <kbd className="rounded border border-border bg-background px-1.5 py-0.5 font-label text-[0.625rem] text-muted-foreground">
+          <kbd className="rounded border border-border bg-background px-1.5 py-0.5 font-mono text-[0.625rem] text-muted-foreground">
             ESC
           </kbd>
         </div>
@@ -354,7 +354,7 @@ export function CommandPalette({ open, onClose }: CommandPaletteProps) {
                   <div key={group.type}>
                     {/* Section label */}
                     <div className="px-3 pt-2 pb-1">
-                      <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+                      <span className="font-sans text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                         {group.label}
                       </span>
                     </div>
@@ -451,11 +451,11 @@ export function CommandPalette({ open, onClose }: CommandPaletteProps) {
         {flatItems.length > 0 && (
           <div className="flex items-center gap-4 border-t border-border px-4 py-2">
             <span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
-              <kbd className="rounded border border-border bg-background px-1 py-px font-label">↑↓</kbd>
+              <kbd className="rounded border border-border bg-background px-1 py-px font-mono">↑↓</kbd>
               Navigate
             </span>
             <span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
-              <kbd className="rounded border border-border bg-background px-1 py-px font-label">↵</kbd>
+              <kbd className="rounded border border-border bg-background px-1 py-px font-mono">↵</kbd>
               Open
             </span>
           </div>