design: swap accent to Flame Blue #1025A1 (Wild Dragon brand standard)

Replace the electric amber placeholder with the official brand accent from
the Wild Dragon Forge Noir Edition identity guide (Pantone 286 C).

- --accent: #1025A1 (Flame Blue)
- --accent-hover: #1830B8 (Ember-adjacent)
- --accent-text: #C7CFEA (Halo — readable on dark surfaces, 13:1 contrast)
- Primary button text reverts to white (11.7:1 contrast on Flame Blue)
- Avatar uses Flame Blue background + white initials
- All rgba hardcodes updated to match new hue across CSS and JSX

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

services/web-ui/public/app.jsx

@@ -1,6 +1,6 @@
 // app.jsx - main shell
 
-const ACCENT = '#5B7CFA';
+const ACCENT = '#1025A1';
 
 function App() {
   const [route, setRoute] = React.useState('home');
@@ -41,8 +41,8 @@ function App() {
     document.documentElement.style.setProperty('--accent', ACCENT);
     document.documentElement.style.setProperty('--accent-soft', hexToRgba(ACCENT, 0.14));
     document.documentElement.style.setProperty('--accent-soft-2', hexToRgba(ACCENT, 0.22));
-    document.documentElement.style.setProperty('--accent-text', lighten(ACCENT, 0.25));
-    document.documentElement.style.setProperty('--accent-hover', lighten(ACCENT, 0.08));
+    document.documentElement.style.setProperty('--accent-text', '#C7CFEA'); // Halo — readable on dark
+    document.documentElement.style.setProperty('--accent-hover', '#1830B8');
   }, []);
 
   React.useEffect(() => {

services/web-ui/public/screens-auth.jsx

@@ -76,7 +76,7 @@
         style={{
           width: '100%',
           background: disabled ? 'var(--bg-3)' : 'var(--accent)',
-          color: disabled ? 'var(--text-3)' : '#0a0c10',
+          color: '#fff',
           border: 'none',
           borderRadius: 4,
           padding: '9px',

services/web-ui/public/styles-fixes.css

@@ -253,10 +253,10 @@
   /* Convert the dark logo to white so it pops on the dark sidebar.
      brightness(0) collapses everything to black, invert(1) flips to white.
      Works on both the original dark PNG and any transparent white PNG. */
-  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(232, 130, 28, 0.30));
+  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(16, 37, 161, 0.35));
 }
 .sidebar-header:hover .brand-logo {
-  filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(232, 130, 28, 0.55));
+  filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(16, 37, 161, 0.55));
 }
 
 /* ============================================================
@@ -268,7 +268,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   background:
-    radial-gradient(1100px 500px at 50% -10%, rgba(232, 130, 28, 0.07), transparent 60%),
+    radial-gradient(1100px 500px at 50% -10%, rgba(16, 37, 161, 0.08), transparent 60%),
     var(--bg-0);
   display: flex;
   align-items: flex-start;
@@ -311,7 +311,7 @@
   object-fit: contain;
   filter:
     brightness(0) invert(1)
-    drop-shadow(0 0 8px rgba(232, 130, 28, 0.35));
+    drop-shadow(0 0 8px rgba(16, 37, 161, 0.35));
   animation: launcherLogoIn 400ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
 }
 @keyframes launcherLogoIn {
@@ -500,10 +500,10 @@
 /* Tone variants - colour the icon tile + halo, leave the body text
    neutral so the tile reads as a button, not a banner. */
 .launcher-tile.tone-accent {
-  --tile-tint: rgba(232, 130, 28, 0.15);
+  --tile-tint: rgba(16, 37, 161, 0.18);
   --tile-icon-bg: var(--accent-soft);
   --tile-icon-fg: var(--accent-text);
-  --tile-icon-border: rgba(232, 130, 28, 0.28);
+  --tile-icon-border: rgba(16, 37, 161, 0.30);
 }
 .launcher-tile.tone-live {
   --tile-tint: rgba(255, 59, 48, 0.18);
@@ -667,7 +667,7 @@ button.btn.primary:active {
   stroke-width: 1.5;
 }
 .bmd-card-trace {
-  stroke: rgba(232, 130, 28, 0.10);
+  stroke: rgba(16, 37, 161, 0.12);
   stroke-width: 0.5;
   fill: none;
 }

services/web-ui/public/styles-rest.css

@@ -171,7 +171,7 @@
   gap: 20px;
   align-items: stretch;
   background:
-    radial-gradient(ellipse at top, rgba(232,130,28,0.05), transparent 60%),
+    radial-gradient(ellipse at top, rgba(16,37,161,0.05), transparent 60%),
     var(--bg-0);
 }
 .decklink-card-face {
@@ -971,7 +971,7 @@
   border-bottom: 1px solid var(--border);
 }
 .epg-week-day:last-child { border-bottom: 0; }
-.epg-week-day.today { background: linear-gradient(180deg, rgba(232,130,28,0.04) 0%, transparent 80%); }
+.epg-week-day.today { background: linear-gradient(180deg, rgba(16,37,161,0.04) 0%, transparent 80%); }
 .epg-week-dayhead {
   display: flex; align-items: baseline; gap: 10px;
   padding: 10px 20px 6px;
@@ -1065,7 +1065,7 @@
   border-color: var(--accent-soft-2);
   background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-1) 60%);
 }
-.stat-card--active .value { color: var(--accent); }
+.stat-card--active .value { color: var(--accent-text); }
 .stat-card--failed {
   border-color: rgba(255,91,91,0.25);
   background: linear-gradient(180deg, var(--danger-soft) 0%, var(--bg-1) 60%);
@@ -1236,7 +1236,7 @@
 .token-tier.popular {
   border-color: var(--accent);
   background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-1) 40%);
-  box-shadow: 0 0 24px rgba(232,130,28,0.12);
+  box-shadow: 0 0 24px rgba(16,37,161,0.12);
 }
 .token-tier-badge {
   position: absolute;
@@ -1359,7 +1359,7 @@
   border-radius: 99px;
   flex-shrink: 0;
 }
-.search-result-kind.kind-asset { color: #FECF8A; border-color: rgba(232,130,28,0.25); }
+.search-result-kind.kind-asset { color: #C7CFEA; border-color: rgba(16,37,161,0.30); }
 .search-result-kind.kind-project { color: #FFD89B; border-color: rgba(245,166,35,0.25); }
 .search-result-kind.kind-recorder { color: #FFAFAF; border-color: rgba(255,91,91,0.25); }
 .search-result-kind.kind-job { color: #9EE7D2; border-color: rgba(45,212,168,0.25); }

services/web-ui/public/styles.css

@@ -18,12 +18,12 @@
   --text-3: #8B92A0;  /* WCAG AA (#133) - was #6B7280, 4.06:1 vs --bg-0; now ~7.5:1 */
   --text-4: #6B7280;
 
-  /* accent — electric amber (broadcast tally) */
-  --accent: #E8821C;
-  --accent-hover: #F09030;
-  --accent-soft: rgba(232, 130, 28, 0.14);
-  --accent-soft-2: rgba(232, 130, 28, 0.22);
-  --accent-text: #FECF8A;
+  /* accent — Flame Blue (Wild Dragon brand, Pantone 286 C) */
+  --accent: #1025A1;
+  --accent-hover: #1830B8;
+  --accent-soft: rgba(16, 37, 161, 0.14);
+  --accent-soft-2: rgba(16, 37, 161, 0.22);
+  --accent-text: #C7CFEA;
 
   /* status */
   --success: #2DD4A8;
@@ -244,11 +244,10 @@ a { color: inherit; text-decoration: none; }
 .avatar {
   width: 28px; height: 28px;
   border-radius: 50%;
-  background: var(--bg-3);
-  border: 1px solid var(--border-strong);
+  background: var(--accent);
   display: grid; place-items: center;
   font-weight: 700; font-size: 11px;
-  color: var(--accent);
+  color: #fff;
   flex-shrink: 0;
 }
 .user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
@@ -351,7 +350,7 @@ a { color: inherit; text-decoration: none; }
   transition: background 80ms, border 80ms, color 80ms;
   white-space: nowrap;
 }
-.btn.primary { background: var(--accent); color: #0a0c10; }
+.btn.primary { background: var(--accent); color: #fff; }
 .btn.primary:hover { background: var(--accent-hover); }
 .btn.ghost { background: transparent; color: var(--text-2); }
 .btn.ghost:hover { background: var(--hover); color: var(--text-1); }