feat: complete UI/UX overhaul with Impeccable design system

Replace Inter/Baskerville with self-hosted Manrope/Alegreya/JetBrains Mono
variable fonts. Migrate all colors from hex to OKLCH tokens (30+ CSS custom
properties) with full dark/light mode support. Replace Unicode emoji with
lucide-react SVG icons throughout. Convert all page layouts to inline styles
(Tailwind CSS 4 flex/grid classes unreliable in this project). Code-split
routes via React.lazy (760KB → 15KB initial shell + 10 lazy chunks).

Add global styles: scrollbar theming, selection color, input/button bases,
:focus-visible ring, prefers-reduced-motion. Setup wizard gets 4-phase
indicator with numbered circles, PathInput and StatusDot components.
Toast container gets aria-live="polite". Tab close buttons changed to
proper <button> elements with aria-labels.

All 8 pages (Dashboard, Editor, Build, Server, Toolset, Repos, Settings,
Setup) rewritten with consistent card/section/button patterns.

packages/frontend/src/components/gff/GffEditor.tsx

@@ -215,13 +215,13 @@ function FieldRenderer({ field, value, onChange, onLocStringChange }: FieldRende
             className="flex-1 rounded border px-2 py-1.5 font-mono text-sm"
             style={{
               backgroundColor: "var(--forge-bg)",
-              borderColor: valid ? "var(--forge-border)" : "#ef4444",
+              borderColor: valid ? "var(--forge-border)" : "var(--forge-danger)",
               color: "var(--forge-text)",
             }}
           />
           <span
             className="text-xs"
-            style={{ color: valid ? "var(--forge-text-secondary)" : "#ef4444" }}
+            style={{ color: valid ? "var(--forge-text-secondary)" : "var(--forge-danger)" }}
           >
             {str.length}/16
           </span>
@@ -421,7 +421,7 @@ export function GffEditor({
     return (
       <div className="flex h-full items-center justify-center">
         <div className="text-center">
-          <p className="text-sm" style={{ color: "#ef4444" }}>{error}</p>
+          <p className="text-sm" style={{ color: "var(--forge-danger)" }}>{error}</p>
           {onSwitchToRaw && (
             <button
               onClick={onSwitchToRaw}
@@ -461,7 +461,7 @@ export function GffEditor({
             </span>
           )}
           {error && (
-            <span className="text-xs" style={{ color: "#ef4444" }}>{error}</span>
+            <span className="text-xs" style={{ color: "var(--forge-danger)" }}>{error}</span>
           )}
         </div>
         <div className="flex items-center gap-2">
@@ -480,7 +480,7 @@ export function GffEditor({
             className="rounded px-3 py-1 text-sm font-medium transition-colors disabled:opacity-40"
             style={{
               backgroundColor: "var(--forge-accent)",
-              color: "#fff",
+              color: "var(--forge-accent-text)",
             }}
           >
             {saving ? "Saving..." : "Save"}