style(design): migrate to DESIGN.md system

Full visual migration: Space Grotesk + DM Sans + JetBrains Mono fonts,
warm amber two-accent system (amber=state, blue=action), dark mode with
CSS vars + localStorage + FOUC prevention, mobile bottom nav (5 tabs),
full-width tables, error/skipped dot glow, ~13 hardcoded hex replaced
with CSS vars in 4 JS files, 5 new E2E tests.

Files: style.css (full rewrite), base.html (fonts, theme script, dark
toggle, bottom nav), settings.html (dark toggle card), dashboard.js,
logs.js, mappings.js, settings.js (color vars), 5 templates (bnav
active blocks), test_design_system_e2e.py (NEW).

Cache-bust: style.css?v=18, shared.js?v=14, dashboard.js?v=27,
logs.js?v=13, mappings.js?v=12, settings.js?v=8

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

api/app/static/js/dashboard.js

@@ -119,7 +119,7 @@ function updateSyncPanel(data) {
         }
         if (st) {
             st.textContent = lr.status === 'completed' ? '\u2713' : '\u2715';
-            st.style.color = lr.status === 'completed' ? '#10b981' : '#ef4444';
+            st.style.color = lr.status === 'completed' ? 'var(--success)' : 'var(--error)';
         }
     }
 }
@@ -342,7 +342,7 @@ async function loadDashOrders() {
                     const totalStr = o.order_total ? Number(o.order_total).toFixed(2) : '';
                     return `<div class="flat-row" onclick="openDashOrderDetail('${esc(o.order_number)}')" style="font-size:0.875rem">
                         ${statusDot(o.status)}
-                        <span style="color:#6b7280" class="text-nowrap">${dateFmt}</span>
+                        <span style="color:var(--text-muted)" class="text-nowrap">${dateFmt}</span>
                         <span class="grow truncate fw-bold">${esc(name)}</span>
                         <span class="text-nowrap">x${o.items_count || 0}${totalStr ? ' · <strong>' + totalStr + '</strong>' : ''}</span>
                     </div>`;

api/app/static/js/logs.js

@@ -19,9 +19,9 @@ function fmtDuration(startedAt, finishedAt) {
 
 function runStatusBadge(status) {
     switch ((status || '').toLowerCase()) {
-        case 'completed': return '<span style="color:#16a34a;font-weight:600">completed</span>';
-        case 'running':   return '<span style="color:#2563eb;font-weight:600">running</span>';
-        case 'failed':    return '<span style="color:#dc2626;font-weight:600">failed</span>';
+        case 'completed': return '<span style="color:var(--success);font-weight:600">completed</span>';
+        case 'running':   return '<span style="color:var(--info);font-weight:600">running</span>';
+        case 'failed':    return '<span style="color:var(--error);font-weight:600">failed</span>';
         default:          return `<span style="font-weight:600">${esc(status)}</span>`;
     }
 }
@@ -174,7 +174,7 @@ async function loadRunOrders(runId, statusFilter, page) {
                     const totalStr = o.order_total ? Number(o.order_total).toFixed(2) : '';
                     return `<div class="flat-row" onclick="openOrderDetail('${esc(o.order_number)}')" style="font-size:0.875rem">
                         ${statusDot(o.status)}
-                        <span style="color:#6b7280" class="text-nowrap">${dateFmt}</span>
+                        <span style="color:var(--text-muted)" class="text-nowrap">${dateFmt}</span>
                         <span class="grow truncate fw-bold">${esc(o.customer_name || '—')}</span>
                         <span class="text-nowrap">x${o.items_count || 0}${totalStr ? ' · <strong>' + totalStr + '</strong>' : ''}</span>
                     </div>`;

api/app/static/js/mappings.js

@@ -107,7 +107,7 @@ function renderTable(mappings, showDeleted) {
                 ? ` <span class="text-muted small">Kit · ${skuCodmatCount[m.sku]}</span><span class="kit-price-loading" data-sku="${esc(m.sku)}" style="display:none"><span class="spinner-border spinner-border-sm ms-1" style="width:0.8rem;height:0.8rem"></span></span>`
                 : '';
             const inactiveStyle = !m.activ && !m.sters ? 'opacity:0.6;' : '';
-            html += `<div class="flat-row" style="background:#f8fafc;font-weight:600;border-top:1px solid #e5e7eb;${inactiveStyle}">
+            html += `<div class="flat-row" style="background:var(--surface-raised);font-weight:600;border-top:1px solid var(--border);${inactiveStyle}">
                 <span class="${m.activ ? 'dot dot-green' : 'dot dot-yellow'}" style="cursor:${m.sters ? 'default' : 'pointer'}"
                       ${m.sters ? '' : `onclick="event.stopPropagation();toggleActive('${esc(m.sku)}', '${esc(m.codmat)}', ${m.activ})"`}
                       title="${m.activ ? 'Activ' : 'Inactiv'}"></span>
@@ -135,7 +135,7 @@ function renderTable(mappings, showDeleted) {
         // After last CODMAT of a kit, add total row
         const isLastOfKit = isKitRow && (i === mappings.length - 1 || mappings[i + 1].sku !== m.sku);
         if (isLastOfKit) {
-            html += `<div class="flat-row kit-total-slot text-muted small" data-sku="${esc(m.sku)}" style="padding-left:1.5rem;display:none;border-top:1px dashed #e5e7eb"></div>`;
+            html += `<div class="flat-row kit-total-slot text-muted small" data-sku="${esc(m.sku)}" style="padding-left:1.5rem;display:none;border-top:1px dashed var(--border)"></div>`;
         }
 
         prevSku = m.sku;
@@ -523,7 +523,7 @@ function showInlineAddRow() {
     const row = document.createElement('div');
     row.id = 'inlineAddRow';
     row.className = 'flat-row';
-    row.style.background = '#eff6ff';
+    row.style.background = 'var(--info-light)';
     row.style.gap = '0.5rem';
     row.innerHTML = `
         <input type="text" class="form-control form-control-sm" id="inlineSku" placeholder="SKU" style="width:140px">

api/app/static/js/settings.js

@@ -15,6 +15,15 @@ document.addEventListener('DOMContentLoaded', async () => {
         });
     });
 
+    // Dark mode toggle
+    const darkToggle = document.getElementById('settDarkMode');
+    if (darkToggle) {
+        darkToggle.checked = document.documentElement.getAttribute('data-theme') === 'dark';
+        darkToggle.addEventListener('change', () => {
+            if (typeof toggleDarkMode === 'function') toggleDarkMode();
+        });
+    }
+
     // Catalog sync toggle
     const catChk = document.getElementById('settCatalogSyncEnabled');
     if (catChk) catChk.addEventListener('change', () => {
@@ -191,14 +200,14 @@ async function saveSettings() {
         const data = await res.json();
         const resultEl = document.getElementById('settSaveResult');
         if (data.success) {
-            if (resultEl) { resultEl.textContent = 'Salvat!'; resultEl.style.color = '#16a34a'; }
+            if (resultEl) { resultEl.textContent = 'Salvat!'; resultEl.style.color = 'var(--success)'; }
             setTimeout(() => { if (resultEl) resultEl.textContent = ''; }, 3000);
         } else {
-            if (resultEl) { resultEl.textContent = 'Eroare: ' + JSON.stringify(data); resultEl.style.color = '#dc2626'; }
+            if (resultEl) { resultEl.textContent = 'Eroare: ' + JSON.stringify(data); resultEl.style.color = 'var(--error)'; }
         }
     } catch (err) {
         const resultEl = document.getElementById('settSaveResult');
-        if (resultEl) { resultEl.textContent = 'Eroare: ' + err.message; resultEl.style.color = '#dc2626'; }
+        if (resultEl) { resultEl.textContent = 'Eroare: ' + err.message; resultEl.style.color = 'var(--error)'; }
     }
 }