Apply Aurora visual identity: glass panels on a lime/teal wash

Pure CSS retint plus font swap, no markup rewrite — app.js's existing
render functions already emit .card/.modal/.conv-col/.chat-panel/etc,
so the whole app picks this up through the token system.

- :root token block replaced with the Aurora set (--bg-wash, --surface*,
  --ink-primary/secondary, --border, --accent/--accent-2/--accent-gradient/
  --accent-ink/--accent-glow, --card-shadow/--card-glow/--card-blur), plus
  every pre-existing token name (--bg-elevated, --label*, --separator*,
  --blue, --bubble-out/in, --tick-blue, --fill) aliased onto it so the
  ~300 existing var() usages across the file retint automatically.
  Relative brightness order (elevated < grouped < tertiary) preserved.
- body background is the wash, background-attachment:fixed so it's
  visible on every page, not just scrolled past at the top.
- Glass-panel treatment (translucent background, backdrop-filter blur+
  saturate, border, shadow, hover glow) applied to .card, .modal,
  .conv-col, .chat-panel, plus .nav/.page-hdr/.peer-card/.fr-card for a
  coherent full-app look.
- Primary actions (.btn-connect, .btn-primary, .fr-cta, .btn-send,
  .nav-id-icon, .fr-icon, outgoing message bubbles) switched from flat
  --accent to --accent-gradient, with text/icon color switched from
  white to --accent-ink since white doesn't have enough contrast on the
  bright lime end of the gradient.
- Light theme extended (not replaced) with a real whiter/brighter

Author: claude

app.js

@@ -7,7 +7,7 @@ const S = {
   filter:'all', startTime:null, selectedNode:null,
   uptimeTimer:null, wsTimer:null,
   // UI shell state
-  page:'messages', peerFilter:'all', everConnected:false, accent:'blue',
+  page:'messages', peerFilter:'all', everConnected:false, accent:'lime',
   // Config page state — one entry per config section (see CFG_SECTIONS)
   configs:{}, configEnums:null, configTab:'device', configModuleTab:'mqtt', configDirty:{},
   logs:[],
@@ -1020,18 +1020,21 @@ function toggleTheme() {
 // ══════════════════════════════════════════════════════════════════
 // SETTINGS — accent colour
 // ══════════════════════════════════════════════════════════════════
+// Aurora accent pairs — each swatch is a {from, to} gradient, matching the
+// lime/teal pairing already used for the default brand gradient.
 const ACCENT_COLORS = [
-  { id:'blue',   name:'Blue',          hex:'#0a84ff' },
-  { id:'purple', name:'Purple',        hex:'#bf5af2' },
-  { id:'pink',   name:'Pink',          hex:'#ff375f' },
-  { id:'orange', name:'Orange',        hex:'#ff9f0a' },
-  { id:'teal',   name:'Teal',         hex:'#20c9b0' },
-  { id:'lime',   name:'Electric lime', hex:'#c6ff2e' },
+  { id:'lime',   name:'Lime',   hex:'#c6ff4a', hex2:'#34e0a1' },
+  { id:'blue',   name:'Blue',   hex:'#4ac8ff', hex2:'#7c5cff' },
+  { id:'violet', name:'Violet', hex:'#9c7cff', hex2:'#ff6bcb' },
+  { id:'coral',  name:'Coral',  hex:'#ff8a5c', hex2:'#ffd166' },
+  { id:'teal',   name:'Teal',   hex:'#34e0a1', hex2:'#4ac8ff' },
+  { id:'pink',   name:'Pink',   hex:'#ff6bcb', hex2:'#ff8a5c' },
 ];
 
 function applyAccent(id) {
   const c = ACCENT_COLORS.find(a => a.id === id) || ACCENT_COLORS[0];
   document.documentElement.style.setProperty('--accent', c.hex);
+  document.documentElement.style.setProperty('--accent-2', c.hex2);
   S.accent = c.id;
   try { localStorage.setItem('mn_accent', c.id); } catch {}
   document.querySelectorAll('.accent-swatch').forEach(el => el.classList.toggle('active', el.dataset.accent === c.id));
@@ -1044,7 +1047,7 @@ function renderSettingsPage() {
   el.innerHTML = ACCENT_COLORS.map(c => `
     <div class="accent-item">
       <button class="accent-swatch${S.accent === c.id ? ' active' : ''}" data-accent="${c.id}"
-        style="background:${c.hex}" title="${esc(c.name)}" onclick="setAccent('${c.id}')">
+        style="background:linear-gradient(135deg,${c.hex},${c.hex2})" title="${esc(c.name)}" onclick="setAccent('${c.id}')">
         <span class="icon filled">check</span>
       </button>
       <span class="accent-name">${esc(c.name)}</span>
@@ -1839,8 +1842,8 @@ function init() {
   applyTheme(theme);
 
   // Accent colour
-  let accent = 'blue';
-  try { accent = localStorage.getItem('mn_accent') || 'blue'; } catch {}
+  let accent = 'lime';
+  try { accent = localStorage.getItem('mn_accent') || 'lime'; } catch {}
   applyAccent(accent);
 
   // Remember the last node IP the user connected to

index.html

@@ -9,8 +9,8 @@
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 <!-- Material Symbols (Google Icons) -->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"/>
-<!-- SF Pro / Apple-style font stack -->
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"/>
+<!-- Aurora identity: Poppins (UI text) + JetBrains Mono (numeric/technical: peer IDs, signal metrics, timestamps) -->
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"/>
 <link rel="stylesheet" href="styles.css">
 </head>
 <body>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "meshnatter",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Meshnatter — Meshtastic Network Monitor",
   "main": "main.js",
   "type": "commonjs",