formlab-mcp 0.6.50 → 0.6.52

package/README.md

@@ -30,7 +30,7 @@ Ask Claude (or another MCP client) things like:
 | Tool | Purpose |
 |---|---|
 | `list_formulations` | Filtered list of recipes |
-| `get_formulation` | Full record + flattened wt-% composition (sub-formulas expanded), the ordered **step procedure**, user **custom fields**, any **process-factor values** (DOE inputs — cure temp, mix time, RPM, pH…), the declared **finishedDensity** (g/mL of the mixed product; volume-targeted batches scale by it), and its **theoretical parameters computed** the way the app's Params tab does (Energy kcal/100g, NV %, Cost/kg…: value, unit, formula, spec pass/fail, and a `warning` when ingredients lack a value or carry mixed units) — the app's own engine, vendored in `mcp/vendor/` and run in an isolated `node:vm` context |
+| `get_formulation` | Full record (incl. `versionLabel`, the label the user types, e.g. 1.0) + **version history** (`versionHistory`: one snapshot per save, v1, v2…, newest first, with the label each save had and its note) + flattened wt-% composition (sub-formulas expanded), the ordered **step procedure**, user **custom fields**, any **process-factor values** (DOE inputs — cure temp, mix time, RPM, pH…), the declared **finishedDensity** (g/mL of the mixed product; volume-targeted batches scale by it), and its **theoretical parameters computed** the way the app's Params tab does (Energy kcal/100g, NV %, Cost/kg…: value, unit, formula, spec pass/fail, and a `warning` when ingredients lack a value or carry mixed units) — the app's own engine, vendored in `mcp/vendor/` and run in an isolated `node:vm` context |
 | `find_similar_formulations` | Find formulas using a given ingredient ≥ threshold % |
 | `compare_formulations` | Pairwise side-by-side composition diff |
 | `list_ingredients` | Filtered list of raw materials. Filters: `family`, `supplier`, `name_contains`, `in_stock_only`, `ingredient_class` (small-molecule / surfactant / polymer / extract / fragrance / pigment / sequence / mixture), `sequence_contains` (e.g. `KTTKS` → Matrixyl), `taxon_contains` (e.g. `Centella`) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "formlab-mcp",
-  "version": "0.6.50",
+  "version": "0.6.52",
   "mcpName": "io.github.juliu1980/formlab-mcp",
   "description": "Read-only Model Context Protocol server for FormLab \u2014 lets Claude (and other MCP clients) read and analyze your FormLab data, from a local export file OR your live cloud workspace.",
   "type": "module",

package/server.json

@@ -2,7 +2,7 @@
   "$schema": "https://static.modelcontextprotocol.io/schemas/2025-12-11/server.schema.json",
   "name": "io.github.juliu1980/formlab-mcp",
   "description": "Read-only MCP for FormLab — let Claude query your formulation lab. Free reads a local export; Pro connects to your live cloud workspace with a dedicated read-only token.",
-  "version": "0.6.50",
+  "version": "0.6.52",
   "websiteUrl": "https://formvix.com/mcp",
   "repository": {
     "url": "https://github.com/juliu1980/FormLab",
@@ -13,7 +13,7 @@
     {
       "registryType": "npm",
       "identifier": "formlab-mcp",
-      "version": "0.6.50",
+      "version": "0.6.52",
       "runtimeHint": "npx",
       "transport": {
         "type": "stdio"

package/tools/analytics.js

@@ -1073,6 +1073,15 @@ function _trimDoeDesign(d, db) {
     factors: (d.factors || []).map(f => ({ ingredient: f.name || nameOf(_doeFactorId(f)), low: f.low, high: f.high, unit: f.unit || '%' })),
     constraints: (d.constraints || []).map(c => _doeConstraintText(c, nameOf)),
     mixtureMode: !!d.mixtureMode,
+    // A design on a base formula (app 21r): every run is that recipe with the factors
+    // changed, the other rows held, and the balance row filling it to 100%.
+    baseFormula: (() => {
+      const st = d.settings || {};
+      if (!st.baseFormulaId) return null;
+      const bf = (db.formulations || []).find(x => x.id === st.baseFormulaId);
+      return bf ? (bf.name || bf.uid) : '(deleted formula)';
+    })(),
+    baseBalance: (d.settings || {}).baseBalanceId ? nameOf(d.settings.baseBalanceId) : null,
     // The model the design was built for. Lives in settings, so without this a
     // caller listing designs can see "D-optimal" but not whether it was fitted
     // as a process or a Scheffé (mixture) model — which changes what the runs
@@ -1143,7 +1152,7 @@ const list_doe_designs = {
 const get_doe_design = {
   definition: {
     name: 'get_doe_design',
-    description: 'Get one saved DOE design in full: factors and ranges, constraints, the model it was optimized for, generation settings (run budget, replicates, center points, seed), D-efficiency, and the complete run matrix with the formulation each run became. Everything needed to reproduce or audit the design.',
+    description: 'Get one saved DOE design in full: factors and ranges, constraints, the model it was optimized for, the base formula it was built on (if any) and its balance, generation settings (run budget, replicates, center points, axial placement, seed), D-efficiency, and the complete run matrix with the formulation each run became. Everything needed to reproduce or audit the design.',
     inputSchema: {
       type: 'object',
       properties: {
@@ -1174,7 +1183,12 @@ const get_doe_design = {
       }
     }
     if (d.designType === 'lhs') { settings.runBudget = st.nRuns; settings.randomSeed = st.seed; }
-    if (d.designType === 'ccd') { settings.centerPoints = st.centerPoints; settings.axialDistance = st.alpha; }
+    if (d.designType === 'ccd') {
+      settings.centerPoints = st.centerPoints; settings.axialDistance = st.alpha;
+      // Where the axial points sit (app 21r): outside low–high by α (classic,
+      // circumscribed) or at low/high with the cube moved in (inscribed).
+      settings.axialPoints = st.ccdInscribed ? 'inside low–high (inscribed)' : 'outside low–high by α (circumscribed)';
+    }
     if (d.designType === 'bbd') settings.centerPoints = st.centerPoints;
     if (d.designType === 'simplex') settings.latticeDegree = st.simplexDegree;
 
@@ -1193,6 +1207,9 @@ const get_doe_design = {
         ? 'No balance factor: this design places its runs on the blend simplex directly, so every component is designed and each run already sums to the mixture total. Nothing has to absorb the remainder.'
         : undefined,
       settings,
+      baseFormulaNote: base.baseFormula
+        ? `Built on the base formula "${base.baseFormula}": each run is that recipe with the factors set to the run's levels, every other row kept at its amount${base.baseBalance ? `, and ${base.baseBalance} adjusted so the run totals 100% (the "balance" column in runs)` : ' (no balance, so run totals vary)'}.`
+        : undefined,
       augmentedFromProjectId: d.augmentedFromProjectId || null,
       formulationsGenerated: (d.formulationIds || []).length,
       formulationsStillPresent: linked.length,
@@ -1209,6 +1226,9 @@ const get_doe_design = {
       out.runs = (d.runs || []).map((r, i) => {
         const row = { run: i + 1 };
         facs.forEach(f => { row[f.name || nameOf(_doeFactorId(f))] = r[_doeFactorId(f)]; });
+        // On a base, the balance row's amount for this run (it is not a factor).
+        const _bal = (d.settings || {}).baseBalanceId;
+        if (_bal && r[_bal] != null) row.balance = r[_bal];
         const lf = formsById.get((d.formulationIds || [])[i]);
         row.formulation = lf ? (lf.name || lf.uid) : null;
         return row;

package/tools/formulations.js

@@ -19,6 +19,9 @@ function _trimFormulation(f) {
     name: f.name,
     description: f.description || '',
     status: f.status || 'Draft',
+    // The Version LABEL the user types (1.0, 2.1-alpha) — not the save count;
+    // the automatic history is get_formulation's versionHistory.
+    versionLabel: f.version != null ? String(f.version) : '',
     family: f.family || '',
     application: f.application || '',
     owner: f.owner || '',
@@ -83,7 +86,7 @@ const list_formulations = {
 const get_formulation = {
   definition: {
     name: 'get_formulation',
-    description: 'Get full details for a single formulation including its composition (raw rows AND flattened wt-% leaves with sub-formulas expanded), step procedure, any recorded process-factor values (cure temp, mix time, RPM, pH — DOE inputs), and recent batches. Accepts either internal id or UID (e.g. FORM-001). Also returns `theoreticalParameters`: values computed from the composition the way the app Params tab does (e.g. Energy kcal/100g, NV %, Cost/kg) — each with name, value, unit, formula, spec + pass, and `warning` when ingredients lack a value the formula reads or carry mixed units (those rows are not counted). Quote these; do not recompute nutrition or NV yourself.',
+    description: 'Get full details for a single formulation including its composition (raw rows AND flattened wt-% leaves with sub-formulas expanded), step procedure, any recorded process-factor values (cure temp, mix time, RPM, pH — DOE inputs), and recent batches. Accepts either internal id or UID (e.g. FORM-001). Also returns `theoreticalParameters`: values computed from the composition the way the app Params tab does (e.g. Energy kcal/100g, NV %, Cost/kg) — each with name, value, unit, formula, spec + pass, and `warning` when ingredients lack a value the formula reads or carry mixed units (those rows are not counted). Quote these; do not recompute nutrition or NV yourself. `versionLabel` is the label the user types (e.g. 1.0); `versionHistory` is the automatic save history (v1, v2… one per save, newest first, up to 20, with the label each save had and its note) — two different things.',
     inputSchema: {
       type: 'object',
       properties: {
@@ -134,6 +137,20 @@ const get_formulation = {
       processFactors: (f.factorValues || []).filter(x => x && x.name).map(x => ({ name: x.name, value: x.value != null ? x.value : '', unit: x.unit || '' })),
       // Computed by the app's own engine (mcp/theoretical.js → mcp/vendor/).
       theoreticalParameters: theoreticalParams(db, 'formulation', f.id),
+      // Automatic history: one snapshot per save (v1, v2…), newest first,
+      // with the Version label each save had. Independent of versionLabel.
+      versionHistory: (() => {
+        const vs = (db.formulaVersions || []).filter(v => v && v.formulationId === f.id)
+          .sort((a, b) => (b.versionNumber || 0) - (a.versionNumber || 0));
+        return {
+          count: vs.length,
+          versions: vs.slice(0, 20).map(v => ({
+            version: v.versionNumber, label: (v.snapshot && v.snapshot.version != null) ? String(v.snapshot.version) : '',
+            savedAt: v.snapshotAt || null, savedBy: v.snapshotBy || '', note: v.changeNote || '',
+            ingredientRows: ((v.snapshot && v.snapshot.composition) || []).length, stepCount: ((v.snapshot && v.snapshot.steps) || []).length,
+          })),
+        };
+      })(),
       batchCount: batches.length,
       sampleCount: samples.length,
     };

package/vendor/cost.js

@@ -177,6 +177,9 @@ function getQuantityUnits() {
   if (typeof document === 'undefined') return;
   var POP_ID = 'fl-unit-combo-pop';
   var activeInput = null, activeIdx = -1;
+  // True only while choose() hands focus back to the field: that focus must not
+  // reopen the list the pick just closed (it did — the list stayed open, 19e).
+  var refocusing = false;
   // Show the in-popup search box once a list has more than this many units.
   var SEARCH_THRESHOLD = 8;
 
@@ -283,7 +286,9 @@ function getQuantityUnits() {
     inp.dispatchEvent(new Event('input', { bubbles: true }));
     inp.dispatchEvent(new Event('change', { bubbles: true }));
     hide();
+    refocusing = true;
     try { inp.focus(); } catch (_) {}
+    refocusing = false;
   }
   function highlight(i) {
     var its = items(); if (!its.length) { activeIdx = -1; return; }
@@ -303,7 +308,10 @@ function getQuantityUnits() {
     } else if (e.key === 'Escape') { hide(); if (activeInput) try { activeInput.focus(); } catch (_) {} }
   }
 
-  document.addEventListener('focusin', function (e) { if (isCombo(e.target)) open(e.target); });
+  document.addEventListener('focusin', function (e) { if (isCombo(e.target) && !refocusing) open(e.target); });
+  // A click on the field reopens the list after a pick (the field kept focus,
+  // so no focusin fires). Capture phase: dialogs stop click propagation.
+  document.addEventListener('click', function (e) { if (isCombo(e.target) && !isOpen()) open(e.target); }, true);
   // Typing directly in the field filters too (only matters when there's no
   // search box — i.e. short lists; otherwise focus is in the search box).
   document.addEventListener('input', function (e) {
@@ -898,7 +906,7 @@ function displayCurrencyControlHtml(reRenderJs, betweenHtml) {
   return `<select class="cost-ccy-select" onclick="event.stopPropagation()" `
     + `title="Display currency for all cost figures, live FX" `
     + `onchange="setDisplayCurrency(this.value);${after}" `
-    + `style="padding:3px 6px;border:1px solid var(--border);border-radius:5px;font-size:12px;font-family:inherit;background:#fff">${opts}</select>`
+    + `style="padding:3px 6px;border:1px solid var(--border);border-radius:5px;font-size:12px;font-family:inherit;background:var(--dk-surface, #fff)">${opts}</select>`
     + (betweenHtml || '')
     + `<span class="cost-ccy-fxhint" style="font-size:10.5px;color:var(--text-muted);margin-left:6px;white-space:nowrap">${fxAsOfHint()}</span>`;
 }
@@ -956,7 +964,7 @@ function displayCostUnitControlHtml(cost, density, densityUnit, reRenderJs) {
   return `<select class="cost-ccy-select cost-unit-select" onclick="event.stopPropagation()" `
     + `title="Show the price per this unit (the entered price is unchanged)" `
     + `onchange="setDisplayCostUnit(this.value);${after}" `
-    + `style="padding:3px 6px;border:1px solid var(--border);border-radius:5px;font-size:12px;font-family:inherit;background:#fff">${opts}</select>`;
+    + `style="padding:3px 6px;border:1px solid var(--border);border-radius:5px;font-size:12px;font-family:inherit;background:var(--dk-surface, #fff)">${opts}</select>`;
 }
 
 // ============================================================
@@ -1655,16 +1663,16 @@ function effectiveBatchAmount(batch) {
 function deviationTier(pct) {
   const p = Math.abs(parseFloat(pct));
   if (!isFinite(p))  return { tier: 'none',  color: '#94a3b8', bg: 'transparent', label: '—' };
-  if (p < 2)         return { tier: 'on',     color: '#15803d', bg: '#f0fdf4', label: 'on-target' };
-  if (p < 10)        return { tier: 'drift',  color: '#b45309', bg: '#fffbeb', label: 'drift' };
-  return             { tier: 'off',    color: '#b91c1c', bg: '#fef2f2', label: 'off-target' };
+  if (p < 2)         return { tier: 'on',     color: 'var(--dk-green-fg, #15803d)', bg: 'var(--dk-green-bg, #f0fdf4)', label: 'on-target' };
+  if (p < 10)        return { tier: 'drift',  color: 'var(--dk-amber-fg, #b45309)', bg: 'var(--dk-amber-bg, #fffbeb)', label: 'drift' };
+  return             { tier: 'off',    color: 'var(--dk-red-fg, #b91c1c)', bg: 'var(--dk-red-bg, #fef2f2)', label: 'off-target' };
 }
 
 // Plain-text tooltip + inline color legend for the deviation tiers.
 const DEVIATION_TIP = 'Δ vs plan = worst-case wt-% drift of the as-prepared composition from the proposal. Colors: under 2% on-target (green), 2–10% drift (amber), 10%+ off-target (red).';
 function deviationLegendHtml() {
   const dot = c => `<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${c};vertical-align:middle;margin-right:3px"></span>`;
-  return `<span title="${DEVIATION_TIP}" style="font-size:10.5px;color:#64748b;white-space:nowrap">Δ vs plan: ${dot('#15803d')}&lt;2% ${dot('#b45309')}2–10% ${dot('#b91c1c')}≥10%</span>`;
+  return `<span title="${DEVIATION_TIP}" style="font-size:10.5px;color:var(--dk-muted, #64748b);white-space:nowrap">Δ vs plan: ${dot('#15803d')}&lt;2% ${dot('#b45309')}2–10% ${dot('#b91c1c')}≥10%</span>`;
 }
 
 // Effective % active for grossing up a weigh-out amount of a technical
@@ -1831,13 +1839,13 @@ function _weighoutDensityLineHtml(w) {
     let src = d.how === 'measured' ? 'measured' : (d.how === 'spec' ? 'from spec' : 'entered');
     if (d.batchId && typeof db !== 'undefined') {
       const b = (db.batches || []).find(x => x.id === d.batchId);
-      if (b) src += ` on <a href="#" onclick="navigate('batch-detail','${esc(b.id)}');return false" style="color:#2563eb">${esc(b.uid)}</a>`;
+      if (b) src += ` on <a href="#" onclick="navigate('batch-detail','${esc(b.id)}');return false" style="color:var(--dk-blue-fg, #2563eb)">${esc(b.uid)}</a>`;
     }
     const parts = (w.partsSum != null && isFinite(w.partsSum) && Math.abs(w.partsSum - w.qty) > 1e-6)
       ? ` Pure-ingredient volumes sum to ${+w.partsSum.toFixed(2)} ${esc(w.unit)} — volumes aren't additive on mixing; the masses are what to weigh.` : '';
-    return `<div style="margin-top:4px;font-size:11.5px;color:#0f172a"><strong>${qty} ≙ ${mass}</strong> at finished density <strong>${rho}</strong>${temp} <span style="color:#64748b">(${src})</span>.${parts}</div>`;
+    return `<div style="margin-top:4px;font-size:11.5px;color:var(--dk-text, #0f172a)"><strong>${qty} ≙ ${mass}</strong> at finished density <strong>${rho}</strong>${temp} <span style="color:var(--dk-muted, #64748b)">(${src})</span>.${parts}</div>`;
   }
-  return `<div style="margin-top:4px;font-size:11.5px;color:#92400e"><strong>${qty} ≙ ${mass}</strong> at <strong>${rho}</strong> — an <strong>ideal-mix estimate</strong> from the ingredient densities (assumes volumes add up; real mixes contract or expand). Record a measured density on a batch and adopt it as the formula's finished density to make this exact.</div>`;
+  return `<div style="margin-top:4px;font-size:11.5px;color:var(--dk-amber-fg, #92400e)"><strong>${qty} ≙ ${mass}</strong> at <strong>${rho}</strong> — an <strong>ideal-mix estimate</strong> from the ingredient densities (assumes volumes add up; real mixes contract or expand). Record a measured density on a batch and adopt it as the formula's finished density to make this exact.</div>`;
 }
 
 function renderWeighoutPanel(w, actuals, formula, copyOnclick, noun) {
@@ -1845,9 +1853,9 @@ function renderWeighoutPanel(w, actuals, formula, copyOnclick, noun) {
   const sgn = n => (n == null || !isFinite(n)) ? '—' : (n > 0 ? '+' : '') + parseFloat(n.toFixed(4)).toString();
   if (!w || !w.available) {
     if (w && w.reason === 'bad-unit')
-      return `<div style="padding:8px 11px;margin-bottom:12px;background:#fffbeb;border:1px solid #fde68a;border-radius:6px;color:#92400e;font-size:12px"><span class="fl-warn" aria-hidden="true"></span> Set the ${noun} quantity in a <strong>mass or volume unit</strong> (g, kg, mL, L…) to get a weigh-out sheet — currently <strong>${esc(w.unit || '—')}</strong>.</div>`;
+      return `<div style="padding:8px 11px;margin-bottom:12px;background:var(--dk-amber-bg, #fffbeb);border:1px solid var(--dk-amber-line, #fde68a);border-radius:6px;color:var(--dk-amber-fg, #92400e);font-size:12px"><span class="fl-warn" aria-hidden="true"></span> Set the ${noun} quantity in a <strong>mass or volume unit</strong> (g, kg, mL, L…) to get a weigh-out sheet — currently <strong>${esc(w.unit || '—')}</strong>.</div>`;
     if (w && w.reason === 'no-qty')
-      return `<div style="padding:8px 11px;margin-bottom:12px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;color:#1e40af;font-size:12px">Set a <strong>${noun} quantity</strong> to compute the per-ingredient weigh-out amounts technicians need.</div>`;
+      return `<div style="padding:8px 11px;margin-bottom:12px;background:var(--dk-blue-bg, #eff6ff);border:1px solid var(--dk-blue-line, #bfdbfe);border-radius:6px;color:var(--dk-blue-fg, #1e40af);font-size:12px">Set a <strong>${noun} quantity</strong> to compute the per-ingredient weigh-out amounts technicians need.</div>`;
     return '';
   }
   // Map as-prepared actuals by ingredient / sub-formula key. Only absolute
@@ -1900,12 +1908,12 @@ function renderWeighoutPanel(w, actuals, formula, copyOnclick, noun) {
     _woUnits = [...set].sort((a, b) => factorOf(a) - factorOf(b));
   }
   const _woResetBtn = (_woDim && displayUnit !== w.unit)
-    ? `<button type="button" onclick="_weighoutResetDisplayUnit('${_woDim}')" title="Reset to the batch's target unit (${esc(w.unit)})" style="font-size:11px;padding:2px 7px;border:1px solid var(--border);border-radius:5px;background:#fff;color:#64748b;cursor:pointer;white-space:nowrap">↺ ${esc(w.unit)}</button>`
+    ? `<button type="button" onclick="_weighoutResetDisplayUnit('${_woDim}')" title="Reset to the batch's target unit (${esc(w.unit)})" style="font-size:11px;padding:2px 7px;border:1px solid var(--border);border-radius:5px;background:var(--dk-surface, #fff);color:var(--dk-muted, #64748b);cursor:pointer;white-space:nowrap">↺ ${esc(w.unit)}</button>`
     : '';
   const unitDropdown = (_woDim && _woUnits.length > 1)
     ? `<span style="display:inline-flex;align-items:center;gap:6px;white-space:nowrap;margin-left:16px">
-        <label style="font-size:11px;color:#64748b;display:inline-flex;align-items:center;gap:4px;white-space:nowrap">show in
-          <select onchange="_weighoutSetDisplayUnit('${_woDim}', this.value)" title="Display the weigh-out amounts in this unit; the sheet stays in one consistent unit" style="padding:2px 6px;border:1px solid var(--border);border-radius:5px;font-size:11px;background:#fff">
+        <label style="font-size:11px;color:var(--dk-muted, #64748b);display:inline-flex;align-items:center;gap:4px;white-space:nowrap">show in
+          <select onchange="_weighoutSetDisplayUnit('${_woDim}', this.value)" title="Display the weigh-out amounts in this unit; the sheet stays in one consistent unit" style="padding:2px 6px;border:1px solid var(--border);border-radius:5px;font-size:11px;background:var(--dk-surface, #fff)">
             ${_woUnits.map(u => `<option value="${esc(u)}" ${u === displayUnit ? 'selected' : ''}>${esc(u)}</option>`).join('')}
           </select></label>
         ${_woResetBtn}
@@ -1950,17 +1958,17 @@ function renderWeighoutPanel(w, actuals, formula, copyOnclick, noun) {
   }
   const _rNumFmt = v => (typeof _fmpNum === 'function') ? _fmpNum(v) : (Math.abs(v) >= 100 ? (+v).toFixed(1) : (+v).toFixed(3)).replace(/\.?0+$/, '');
   const _purityTagBase = r => (r.purity == null) ? '' :
-    ` <span style="font-size:9.5px;color:#6d28d9;font-weight:600;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:4px;padding:0 3px;vertical-align:middle;white-space:nowrap" title="Grossed up for ${esc(String(+r.purity))}% purity, delivers ${cv(r.activeAmount)} ${esc(displayUnit)} of active">↑${esc(String(+r.purity))}%</span>`;
+    ` <span style="font-size:9.5px;color:var(--dk-violet-fg, #6d28d9);font-weight:600;background:var(--dk-violet-bg, #f5f3ff);border:1px solid var(--dk-violet-line, #ddd6fe);border-radius:4px;padding:0 3px;vertical-align:middle;white-space:nowrap" title="Grossed up for ${esc(String(+r.purity))}% purity, delivers ${cv(r.activeAmount)} ${esc(displayUnit)} of active">↑${esc(String(+r.purity))}%</span>`;
   // Lot-assay deviation: the lot this row draws from assays away from the nominal.
   const purityTag = r => _purityTagBase(r) + (!r.lotDev ? '' :
-    ` <span style="font-size:9.5px;color:#b45309;font-weight:600;background:#fffbeb;border:1px solid #fde68a;border-radius:4px;padding:0 3px;vertical-align:middle;white-space:nowrap" title="Lot ${esc(String(r.lotDev.lotNumber))} assays ${esc(String(+r.lotDev.lotPurity))}% but the weigh-out is grossed up on the nominal ${esc(String(+r.lotDev.nominal))}%. ${r.lotDev.consumed ? 'This batch drew from that lot.' : 'FIFO will draw from that lot next.'} To deliver the spec active at the lot's assay, weigh ${r.lotDev.correctedAmount != null ? esc(_rNumFmt(r.lotDev.correctedAmount)) + ' ' + esc(String(displayUnit || w.unit || '')) : 'the corrected amount'} instead.">⚠ lot ${esc(String(+r.lotDev.lotPurity))}% vs ${esc(String(+r.lotDev.nominal))}%${r.lotDev.correctedAmount != null ? ' → ' + esc(_rNumFmt(r.lotDev.correctedAmount)) : ''}</span>`);
+    ` <span style="font-size:9.5px;color:var(--dk-amber-fg, #b45309);font-weight:600;background:var(--dk-amber-bg, #fffbeb);border:1px solid var(--dk-amber-line, #fde68a);border-radius:4px;padding:0 3px;vertical-align:middle;white-space:nowrap" title="Lot ${esc(String(r.lotDev.lotNumber))} assays ${esc(String(+r.lotDev.lotPurity))}% but the weigh-out is grossed up on the nominal ${esc(String(+r.lotDev.nominal))}%. ${r.lotDev.consumed ? 'This batch drew from that lot.' : 'FIFO will draw from that lot next.'} To deliver the spec active at the lot's assay, weigh ${r.lotDev.correctedAmount != null ? esc(_rNumFmt(r.lotDev.correctedAmount)) + ' ' + esc(String(displayUnit || w.unit || '')) : 'the corrected amount'} instead.">⚠ lot ${esc(String(+r.lotDev.lotPurity))}% vs ${esc(String(+r.lotDev.nominal))}%${r.lotDev.correctedAmount != null ? ' → ' + esc(_rNumFmt(r.lotDev.correctedAmount)) : ''}</span>`);
   const _woVolTarget = (typeof isVolUnit === 'function') && isVolUnit(w.unit);
   const qsTag = r => (!r.qs) ? '' :
-    ` <span style="font-size:9.5px;color:#0369a1;font-weight:600;background:#eff6ff;border:1px solid #bfdbfe;border-radius:4px;padding:0 3px;vertical-align:middle;white-space:nowrap" title="${_woVolTarget ? `Balance ingredient — add it up to the ${w.qty} ${esc(w.unit)} mark rather than to this number, then log what actually went in` : 'Balance ingredient, set to hold the batch at its target size'}">${_woVolTarget ? `q.s. to ${w.qty} ${esc(w.unit)}` : 'q.s.'}</span>`;
+    ` <span style="font-size:9.5px;color:var(--dk-sky-fg, #0369a1);font-weight:600;background:var(--dk-blue-bg, #eff6ff);border:1px solid var(--dk-blue-line, #bfdbfe);border-radius:4px;padding:0 3px;vertical-align:middle;white-space:nowrap" title="${_woVolTarget ? `Balance ingredient — add it up to the ${w.qty} ${esc(w.unit)} mark rather than to this number, then log what actually went in` : 'Balance ingredient, set to hold the batch at its target size'}">${_woVolTarget ? `q.s. to ${w.qty} ${esc(w.unit)}` : 'q.s.'}</span>`;
   const dColor = rel => rel == null ? '#94a3b8' : (rel < 0.02 ? '#15803d' : rel < 0.10 ? '#b45309' : '#b91c1c');
   // Tint a whole row when it deviates, so off-plan ingredients pop at a glance
   // (matches the composition-% table's row tinting). On-target rows stay white.
-  const dRowBg = rel => (rel == null || rel < 0.02) ? '' : (rel < 0.10 ? 'background:#fffbeb' : 'background:#fef2f2');
+  const dRowBg = rel => (rel == null || rel < 0.02) ? '' : (rel < 0.10 ? 'background:var(--dk-amber-bg, #fffbeb)' : 'background:var(--dk-red-bg, #fef2f2)');
   // ---- Secondary reference column: each row shown in the OTHER dimension,
   // derived per-row from that ingredient's OWN density (sub-formulas use their
   // rolled-up density). The prepared unit stays the single basis; this is a
@@ -2006,40 +2014,40 @@ function renderWeighoutPanel(w, actuals, formula, copyOnclick, noun) {
   const _altAmt = r => (r.planned != null) ? r.planned : r.actInUnit;
   const altCell = r => {
     const v = altConv(_altAmt(r), rowDensity(r));
-    if (v == null) return `<span style="color:#cbd5e1" title="No density set for this ingredient — add one to show its ${esc(_altDim || '')} equivalent">—</span>`;
-    return `≈ ${fmt(v)} <span translate="no" style="color:#94a3b8;font-size:10px">${esc(altUnit)}</span>`;
+    if (v == null) return `<span style="color:var(--dk-dim, #cbd5e1)" title="No density set for this ingredient — add one to show its ${esc(_altDim || '')} equivalent">—</span>`;
+    return `≈ ${fmt(v)} <span translate="no" style="color:var(--dk-faint, #94a3b8);font-size:10px">${esc(altUnit)}</span>`;
   };
   const _altAny = !!_altDim && rows.some(r => altConv(_altAmt(r), rowDensity(r)) != null);
   // Unit picker for the ≈ column (mirrors the show-in dropdown). Only when the
   // column is actually showing and there's more than one unit to choose.
   const altDropdown = (_altAny && _altDim && _altUnits.length > 1)
     ? `<span style="display:inline-flex;align-items:center;gap:6px;white-space:nowrap;margin-left:10px">
-        <label style="font-size:11px;color:#64748b;display:inline-flex;align-items:center;gap:4px;white-space:nowrap">≈ in
-          <select onchange="_weighoutSetAltUnit('${_altDim}', this.value)" title="Unit for the ≈ reference column — the other dimension, derived per-ingredient from its density" style="padding:2px 6px;border:1px solid var(--border);border-radius:5px;font-size:11px;background:#fff">
+        <label style="font-size:11px;color:var(--dk-muted, #64748b);display:inline-flex;align-items:center;gap:4px;white-space:nowrap">≈ in
+          <select onchange="_weighoutSetAltUnit('${_altDim}', this.value)" title="Unit for the ≈ reference column — the other dimension, derived per-ingredient from its density" style="padding:2px 6px;border:1px solid var(--border);border-radius:5px;font-size:11px;background:var(--dk-surface, #fff)">
             ${_altUnits.map(u => `<option value="${esc(u)}" ${u === altUnit ? 'selected' : ''}>${esc(u)}</option>`).join('')}
           </select></label>
       </span>`
     : '';
-  const th = (txt, extra = '') => `<th style="padding:5px 8px;color:#475569;font-weight:400;${extra}">${txt}</th>`;
-  const head = `<tr style="background:#eff6ff">
+  const th = (txt, extra = '') => `<th style="padding:5px 8px;color:var(--dk-text-3, #475569);font-weight:400;${extra}">${txt}</th>`;
+  const head = `<tr style="background:var(--dk-blue-bg, #eff6ff)">
     ${th('#', 'text-align:left;width:28px')}
     ${th('Ingredient / Sub-formula', 'text-align:left')}
     ${th('Planned', 'text-align:right')}
     ${hasActuals ? th('Actual', 'text-align:right') + th('Δ', 'text-align:right') : ''}
     ${th('Unit', 'text-align:left')}
-    ${_altAny ? `<th style="padding:5px 8px;color:#475569;font-weight:400;text-align:right" title="Approx. ${esc(_altDim || '')} equivalent, derived per-ingredient from its own density. Reference only — not additive, so no total.">≈ ${esc(altUnit)}</th>` : ''}
+    ${_altAny ? `<th style="padding:5px 8px;color:var(--dk-text-3, #475569);font-weight:400;text-align:right" title="Approx. ${esc(_altDim || '')} equivalent, derived per-ingredient from its own density. Reference only — not additive, so no total.">≈ ${esc(altUnit)}</th>` : ''}
   </tr>`;
   const body = rows.map((r, i) => `<tr data-wo-key="${esc(r.key)}" style="${hasActuals ? dRowBg(r.rel) : ''}">
-    <td style="padding:4px 8px;color:#94a3b8">${i + 1}</td>
-    <td style="padding:4px 8px">${esc(r.name)}${r._added ? ` <span style="font-size:9.5px;color:#b91c1c;font-weight:600;background:#fef2f2;border:1px solid #fecaca;border-radius:4px;padding:0 4px;vertical-align:middle;white-space:nowrap" title="Added to the as-prepared batch — not part of the linked recipe">+ not in recipe</span>` : ''}</td>
-    <td style="padding:4px 8px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:#0f172a">${r.planned != null ? `${cv(r.planned)}${purityTag(r)}${qsTag(r)}` : '<span style="color:#cbd5e1">—</span>'}</td>
+    <td style="padding:4px 8px;color:var(--dk-faint, #94a3b8)">${i + 1}</td>
+    <td style="padding:4px 8px">${esc(r.name)}${r._added ? ` <span style="font-size:9.5px;color:var(--dk-red-fg, #b91c1c);font-weight:600;background:var(--dk-red-bg, #fef2f2);border:1px solid var(--dk-red-line, #fecaca);border-radius:4px;padding:0 4px;vertical-align:middle;white-space:nowrap" title="Added to the as-prepared batch — not part of the linked recipe">+ not in recipe</span>` : ''}</td>
+    <td style="padding:4px 8px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--dk-text, #0f172a)">${r.planned != null ? `${cv(r.planned)}${purityTag(r)}${qsTag(r)}` : '<span style="color:var(--dk-dim, #cbd5e1)">—</span>'}</td>
     ${hasActuals ? `<td style="padding:4px 8px;text-align:right;font-variant-numeric:tabular-nums">${
       r.actInUnit != null ? cv(r.actInUnit)
-        : (r.actRaw ? `${fmt(r.actRaw.amount)} <span translate="no" style="color:#94a3b8;font-size:10px">${esc(r.actRaw.unit)}</span>` : '<span style="color:#cbd5e1">—</span>')
+        : (r.actRaw ? `${fmt(r.actRaw.amount)} <span translate="no" style="color:var(--dk-faint, #94a3b8);font-size:10px">${esc(r.actRaw.unit)}</span>` : '<span style="color:var(--dk-dim, #cbd5e1)">—</span>')
     }</td>
     <td style="padding:4px 8px;text-align:right;font-variant-numeric:tabular-nums;color:${dColor(r.rel)};font-weight:${r.delta ? 600 : 400}">${r.delta != null ? cvs(r.delta) : '—'}</td>` : ''}
-    <td style="padding:4px 8px;color:#64748b">${esc(displayUnit)}</td>
-    ${_altAny ? `<td style="padding:4px 8px;text-align:right;font-variant-numeric:tabular-nums;color:#64748b">${altCell(r)}</td>` : ''}
+    <td style="padding:4px 8px;color:var(--dk-muted, #64748b)">${esc(displayUnit)}</td>
+    ${_altAny ? `<td style="padding:4px 8px;text-align:right;font-variant-numeric:tabular-nums;color:var(--dk-muted, #64748b)">${altCell(r)}</td>` : ''}
   </tr>`).join('');
   const totalDelta = hasActuals ? (actualTotal - w.total) : null;
   // Volume target: the Planned column's sum is the sum of PURE-ingredient
@@ -2051,30 +2059,30 @@ function renderWeighoutPanel(w, actuals, formula, copyOnclick, noun) {
     if (!_volTarget || !_altAny || _altDim !== 'mass') return null;
     const g = w.totalMassKg * 1000;
     const inAlt = (typeof convertQuantity === 'function') ? convertQuantity(g, 'g', altUnit, formula) : null;
-    return (inAlt != null && isFinite(inAlt)) ? `<strong>${fmt(inAlt)}</strong> <span translate="no" style="color:#94a3b8;font-size:10px">${esc(altUnit)}</span>` : null;
+    return (inAlt != null && isFinite(inAlt)) ? `<strong>${fmt(inAlt)}</strong> <span translate="no" style="color:var(--dk-faint, #94a3b8);font-size:10px">${esc(altUnit)}</span>` : null;
   })();
   const tfoot = `<tr style="border-top:1px solid #dbeafe">
-    <td></td><td style="padding:5px 8px;font-weight:600">Total${_volTarget ? ` <span style="font-weight:400;color:#94a3b8;font-size:10.5px" title="Sum of the pure-ingredient volumes in the Planned column. Not a lab quantity — the finished batch is ${w.qty} ${esc(w.unit)}; the mass in the ≈ column is what the batch weighs.">(pure-ingredient volumes)</span>` : ''}</td>
-    <td style="padding:5px 8px;text-align:right;font-variant-numeric:tabular-nums;font-weight:${_volTarget ? 400 : 700};color:${_volTarget ? '#94a3b8' : 'inherit'}" title="${_volTarget ? `Volumes aren't additive on mixing — this sum has no bench meaning. Finished batch: ${w.qty} ${esc(w.unit)}.` : ''}">${cv(w.total)}</td>
+    <td></td><td style="padding:5px 8px;font-weight:600">Total${_volTarget ? ` <span style="font-weight:400;color:var(--dk-faint, #94a3b8);font-size:10.5px" title="Sum of the pure-ingredient volumes in the Planned column. Not a lab quantity — the finished batch is ${w.qty} ${esc(w.unit)}; the mass in the ≈ column is what the batch weighs.">(pure-ingredient volumes)</span>` : ''}</td>
+    <td style="padding:5px 8px;text-align:right;font-variant-numeric:tabular-nums;font-weight:${_volTarget ? 400 : 700};color:${_volTarget ? 'var(--dk-faint, #94a3b8)' : 'inherit'}" title="${_volTarget ? `Volumes aren't additive on mixing — this sum has no bench meaning. Finished batch: ${w.qty} ${esc(w.unit)}.` : ''}">${cv(w.total)}</td>
     ${hasActuals ? `<td style="padding:5px 8px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700">${cv(actualTotal)}</td>
-      <td style="padding:5px 8px;text-align:right;font-variant-numeric:tabular-nums;color:#64748b">${cvs(totalDelta)}</td>` : ''}
-    <td style="padding:5px 8px;color:#64748b">${esc(displayUnit)}</td>
+      <td style="padding:5px 8px;text-align:right;font-variant-numeric:tabular-nums;color:var(--dk-muted, #64748b)">${cvs(totalDelta)}</td>` : ''}
+    <td style="padding:5px 8px;color:var(--dk-muted, #64748b)">${esc(displayUnit)}</td>
     ${_altAny ? (_totalMassCell
       ? `<td style="padding:5px 8px;text-align:right;font-variant-numeric:tabular-nums" title="Total mass of the finished ${w.qty} ${esc(w.unit)} = volume × finished density. This is what the batch weighs — the number to reconcile the balance against.">${_totalMassCell}</td>`
-      : `<td style="padding:5px 8px;text-align:right;color:#cbd5e1" title="No total — the ${esc(_altDim || '')} equivalent isn't additive across ingredients">—</td>`) : ''}
+      : `<td style="padding:5px 8px;text-align:right;color:var(--dk-dim, #cbd5e1)" title="No total — the ${esc(_altDim || '')} equivalent isn't additive across ingredients">—</td>`) : ''}
   </tr>`;
   const densityNote = w.anyNull
-    ? `<div style="margin-top:7px;font-size:11.5px;color:#92400e"><span class="fl-warn" aria-hidden="true"></span> Some rows can't be scaled to ${esc(displayUnit)} — set the formula / ingredient <strong>density</strong> to convert % across mass↔volume.</div>`
+    ? `<div style="margin-top:7px;font-size:11.5px;color:var(--dk-amber-fg, #92400e)"><span class="fl-warn" aria-hidden="true"></span> Some rows can't be scaled to ${esc(displayUnit)} — set the formula / ingredient <strong>density</strong> to convert % across mass↔volume.</div>`
     : '';
   // Purity / q.s. footer. Three cases: q.s. balanced (on target), q.s. short
   // (actives exceed target), or drift (corrected, no balance ingredient).
   let purityNote = '';
   if (w.qsApplied && w.qsShort) {
-    purityNote = `<div style="margin-top:7px;font-size:11.5px;color:#b91c1c"><span class="fl-warn" aria-hidden="true"></span> Purity-corrected amounts already <strong>exceed the ${cv(w.qty)} ${esc(displayUnit)} target</strong> — the q.s. ingredient can't balance it (clamped to 0). Increase the batch size or reduce the actives.</div>`;
+    purityNote = `<div style="margin-top:7px;font-size:11.5px;color:var(--dk-red-fg, #b91c1c)"><span class="fl-warn" aria-hidden="true"></span> Purity-corrected amounts already <strong>exceed the ${cv(w.qty)} ${esc(displayUnit)} target</strong> — the q.s. ingredient can't balance it (clamped to 0). Increase the batch size or reduce the actives.</div>`;
   } else if (w.qsApplied && w.correctedAny) {
-    purityNote = `<div style="margin-top:7px;font-size:11.5px;color:#0369a1">↑ Actives <strong>grossed up for purity</strong>; the <strong>q.s. ingredient</strong> was shrunk to hold the batch at <strong>${cv(w.total)} ${esc(displayUnit)}</strong> — on target, concentrations on-spec.</div>`;
+    purityNote = `<div style="margin-top:7px;font-size:11.5px;color:var(--dk-sky-fg, #0369a1)">↑ Actives <strong>grossed up for purity</strong>; the <strong>q.s. ingredient</strong> was shrunk to hold the batch at <strong>${cv(w.total)} ${esc(displayUnit)}</strong> — on target, concentrations on-spec.</div>`;
   } else if (w.correctedAny && w.nominalTotal != null && isFinite(w.nominalTotal)) {
-    purityNote = `<div style="margin-top:7px;font-size:11.5px;color:#5b21b6">↑ Amounts <strong>grossed up for purity</strong> so each delivers its target active. Total <strong>${cv(w.total)} ${esc(displayUnit)}</strong> vs ${cv(w.nominalTotal)} nominal (+${cv(w.total - w.nominalTotal)}). Other rows are unchanged, so the batch runs a little over target — mark a diluent's role <strong>“${esc(QS_ROLE)}”</strong> to auto-balance back to ${cv(w.qty)} ${esc(displayUnit)}.</div>`;
+    purityNote = `<div style="margin-top:7px;font-size:11.5px;color:var(--dk-violet-fg, #5b21b6)">↑ Amounts <strong>grossed up for purity</strong> so each delivers its target active. Total <strong>${cv(w.total)} ${esc(displayUnit)}</strong> vs ${cv(w.nominalTotal)} nominal (+${cv(w.total - w.nominalTotal)}). Other rows are unchanged, so the batch runs a little over target — mark a diluent's role <strong>“${esc(QS_ROLE)}”</strong> to auto-balance back to ${cv(w.qty)} ${esc(displayUnit)}.</div>`;
   }
   // Make-up-to-volume instruction: a VOLUME target with a balance row is best
   // made the pharmacist's way — weigh everything else, fill the balance
@@ -2087,7 +2095,7 @@ function renderWeighoutPanel(w, actuals, formula, copyOnclick, noun) {
     const bal = (_qsRow.amount != null && isFinite(_qsRow.amount)) ? _qsRow.amount : null;
     const balMass = (bal != null && typeof convertQuantity === 'function' && _qsRow.comp && _qsRow.comp.ingredientId)
       ? (() => { const ing = (db.ingredients || []).find(i => i.id === _qsRow.comp.ingredientId); const d = ing ? _densityToKgPerL(ing.density, ing.densityUnit) : null; return (d && VOL_TO_L[w.unit]) ? bal * VOL_TO_L[w.unit] * d * 1000 : null; })() : null;
-    makeUpNote = `<div style="margin-top:7px;padding:7px 10px;background:#f0f9ff;border:1px solid #bae6fd;border-radius:6px;font-size:11.5px;color:#0c4a6e;line-height:1.45"><strong>Make up to volume.</strong> Weigh the other rows as planned, then add <strong>${esc(_qsRow.name)}</strong> up to the <strong>${w.qty} ${esc(w.unit)}</strong> mark and log the amount that actually went in${balMass != null ? ` (planned ≈ ${+balMass.toFixed(1)} g)` : ''}. Volumes aren't additive, so the mark — not the planned number — decides the balance. Once logged, the batch page derives the finished density from the total mass ÷ ${w.qty} ${esc(w.unit)} and offers to save it on the formula for next time.</div>`;
+    makeUpNote = `<div style="margin-top:7px;padding:7px 10px;background:var(--dk-sky-bg, #f0f9ff);border:1px solid var(--dk-sky-line, #bae6fd);border-radius:6px;font-size:11.5px;color:var(--dk-sky-fg, #0c4a6e);line-height:1.45"><strong>Make up to volume.</strong> Weigh the other rows as planned, then add <strong>${esc(_qsRow.name)}</strong> up to the <strong>${w.qty} ${esc(w.unit)}</strong> mark and log the amount that actually went in${balMass != null ? ` (planned ≈ ${+balMass.toFixed(1)} g)` : ''}. Volumes aren't additive, so the mark — not the planned number — decides the balance. Once logged, the batch page derives the finished density from the total mass ÷ ${w.qty} ${esc(w.unit)} and offers to save it on the formula for next time.</div>`;
   }
   const title = hasActuals ? '⚖ Weigh-out — planned vs actual amounts' : '⚖ Weigh-out — target amounts';
   // One-line explainer so this table's job (concrete amounts) is unmistakable
@@ -2105,27 +2113,27 @@ function renderWeighoutPanel(w, actuals, formula, copyOnclick, noun) {
     const pct = (d / w.qty) * 100;
     const near = Math.abs(pct) < 0.5;
     const mag = Math.abs(pct);
-    const c  = near ? '#15803d' : (mag < 5 ? '#b45309' : '#b91c1c');
-    const bg = near ? '#f0fdf4' : (mag < 5 ? '#fffbeb' : '#fef2f2');
-    const bd = near ? '#bbf7d0' : (mag < 5 ? '#fde68a' : '#fecaca');
+    const c  = near ? 'var(--dk-green-fg, #15803d)' : (mag < 5 ? 'var(--dk-amber-fg, #b45309)' : 'var(--dk-red-fg, #b91c1c)');
+    const bg = near ? 'var(--dk-green-bg, #f0fdf4)' : (mag < 5 ? 'var(--dk-amber-bg, #fffbeb)' : 'var(--dk-red-bg, #fef2f2)');
+    const bd = near ? 'var(--dk-green-line, #bbf7d0)' : (mag < 5 ? 'var(--dk-amber-line, #fde68a)' : 'var(--dk-red-line, #fecaca)');
     yieldBanner = `<div style="display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 10px;padding:8px 12px;background:${bg};border:1px solid ${bd};border-radius:7px;font-size:13px">
       <span style="font-weight:700;color:${c}">As-prepared total ${cv(actualTotal)} ${esc(displayUnit)}</span>
       ${near
-        ? `<span style="color:#15803d;font-weight:600">✓ on the ${cv(w.qty)} ${esc(displayUnit)} target</span>`
+        ? `<span style="color:var(--dk-green-fg, #15803d);font-weight:600">✓ on the ${cv(w.qty)} ${esc(displayUnit)} target</span>`
         : `<span style="color:${c};font-weight:600">${cvs(d)} ${esc(displayUnit)} (${d > 0 ? '+' : ''}${pct.toFixed(1)}%) ${d > 0 ? 'over' : 'under'} the ${cv(w.qty)} ${esc(displayUnit)} target</span>`}
     </div>`;
   }
   const copyLabel = hasActuals ? '<span class="fl-import" aria-hidden="true"></span> Reset to planned' : '<span class="fl-import" aria-hidden="true"></span> Copy into As-prepared';
   return `
-  <div style="border:1px solid #dbeafe;border-radius:8px;padding:12px 14px;margin-bottom:12px;background:#f8fbff">
+  <div style="border:1px solid #dbeafe;border-radius:8px;padding:12px 14px;margin-bottom:12px;background:var(--dk-subtle, #f8fbff)">
     <div style="display:flex;align-items:center;gap:8px;margin-bottom:2px;flex-wrap:wrap">
-      <span style="font-size:13px;font-weight:600;color:#0f172a">${title}</span>
-      <span style="font-size:11.5px;color:#64748b">scaled to ${cv(w.qty)} ${esc(displayUnit)}</span>
+      <span style="font-size:13px;font-weight:600;color:var(--dk-text, #0f172a)">${title}</span>
+      <span style="font-size:11.5px;color:var(--dk-muted, #64748b)">scaled to ${cv(w.qty)} ${esc(displayUnit)}</span>
       ${unitDropdown}
       ${altDropdown}
       <button type="button" class="btn btn-secondary btn-sm" style="margin-left:auto" onclick="${copyOnclick}" title="Seed / reset the as-prepared amounts to the planned weigh-out, then edit each to what you actually weighed.">${copyLabel}</button>
     </div>
-    <div style="font-size:11px;color:#64748b;line-height:1.5;margin:0 0 9px">${subtitle}</div>
+    <div style="font-size:11px;color:var(--dk-muted, #64748b);line-height:1.5;margin:0 0 9px">${subtitle}</div>
     ${yieldBanner}
     <table style="width:100%;border-collapse:collapse;font-size:12px">
       <thead>${head}</thead>
@@ -2256,9 +2264,9 @@ function shelfLifeBadgeHtml(iso) {
   if (!iso) return '—';
   const d = Math.floor((Date.parse(iso) - Date.now()) / 86400000);
   let style = 'color:var(--text)', note = '';
-  if (d < 0) { style = 'background:#fee2e2;color:#991b1b;padding:1px 7px;border-radius:10px;font-weight:600'; note = ' · expired'; }
-  else if (d <= 30) { style = 'background:#fef3c7;color:#b45309;padding:1px 7px;border-radius:10px;font-weight:600'; note = ` · ${d}d`; }
-  else if (d <= 90) { style = 'color:#b45309'; note = ` · ${d}d`; }
+  if (d < 0) { style = 'background:var(--dk-red-bg2, #fee2e2);color:var(--dk-red-fg, #991b1b);padding:1px 7px;border-radius:10px;font-weight:600'; note = ' · expired'; }
+  else if (d <= 30) { style = 'background:var(--dk-amber-bg2, #fef3c7);color:var(--dk-amber-fg, #b45309);padding:1px 7px;border-radius:10px;font-weight:600'; note = ` · ${d}d`; }
+  else if (d <= 90) { style = 'color:var(--dk-amber-fg, #b45309)'; note = ` · ${d}d`; }
   return `<span style="${style}">${(typeof esc === 'function' ? esc(iso) : iso)}${note}</span>`;
 }
 
@@ -2478,7 +2486,7 @@ const COST_DRIFT_PCT = 10;
 function entityCostCellHtml(summary, label) {
   const lbl = label || 'Cost';
   if (!summary || summary.total == null) {
-    return `<span title="${esc(lbl)}, not priced (no ingredient prices, or a volume amount with no density)" style="color:#94a3b8">—</span>`;
+    return `<span title="${esc(lbl)}, not priced (no ingredient prices, or a volume amount with no density)" style="color:var(--dk-faint, #94a3b8)">—</span>`;
   }
   const money = v => (typeof formatMoney === 'function') ? formatMoney(v, summary.currency) : (summary.currency + ' ' + (+v).toFixed(2));
   const amt = money(summary.total);
@@ -2492,8 +2500,8 @@ function entityCostCellHtml(summary, label) {
     + (drifted ? ' · drifted from live cost' : '')
     + (summary.note ? ` · “${summary.note}”` : '');
   const mark = drifted
-    ? ` <span style="color:#b45309;font-size:11px" aria-hidden="true">⚠</span>`
-    : `<sup style="color:#2563eb;font-size:9px;font-weight:700;margin-left:1px" aria-hidden="true">M</sup>`;
+    ? ` <span style="color:var(--dk-amber-fg, #b45309);font-size:11px" aria-hidden="true">⚠</span>`
+    : `<sup style="color:var(--dk-blue-fg, #2563eb);font-size:9px;font-weight:700;margin-left:1px" aria-hidden="true">M</sup>`;
   return `<span title="${esc(tip)}">${amt}${mark}</span>`;
 }
 
@@ -2516,12 +2524,12 @@ function entityCostValueHtml(o) {
   const editBtn = `<a onclick="openCostOverrideModal('${o.kind}','${o.id}')" style="color:var(--primary);cursor:pointer;font-size:11px;margin-left:8px">${ov != null ? 'Edit' : 'Override'}</a>`;
   let chipTitle = note ? 'Reason: ' + note : 'Manually overridden cost';
   if (ovRaw != null && ovCcy !== ccy) chipTitle += ` · entered as ${formatMoney(ovRaw, ovCcy)}`;
-  const manualChip = `<span title="${esc(chipTitle)}" style="font-size:10.5px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;padding:1px 6px;border-radius:999px;margin-left:6px">manual</span>`;
+  const manualChip = `<span title="${esc(chipTitle)}" style="font-size:10.5px;background:var(--dk-blue-bg, #eff6ff);border:1px solid var(--dk-blue-line, #bfdbfe);color:var(--dk-blue-fg, #1e40af);padding:1px 6px;border-radius:999px;margin-left:6px">manual</span>`;
 
   // Currency source hint: viewer's own display preference always wins.
   // Only fall back to "from formula" if the user has no display preference set.
   const fromFormula = !!(o.formula && o.formula.costCurrency && !getDisplayCurrency());
-  const ccyLine = `<div style="font-size:10.5px;color:#94a3b8;margin-top:2px">${esc(ccy)} · <a onclick="event.stopPropagation();${fromFormula ? `navigate('formulation-detail','${o.formula.id}')` : `goToDisplayCurrencySetting()`}" title="${fromFormula ? esc('Currency inherited from the formula; click to change it there') : esc('Global display currency; click to change in Settings → Preferences')}" style="color:var(--primary);cursor:pointer">${fromFormula ? 'from formula' : 'display currency'}</a></div>`;
+  const ccyLine = `<div style="font-size:10.5px;color:var(--dk-faint, #94a3b8);margin-top:2px">${esc(ccy)} · <a onclick="event.stopPropagation();${fromFormula ? `navigate('formulation-detail','${o.formula.id}')` : `goToDisplayCurrencySetting()`}" title="${fromFormula ? esc('Currency inherited from the formula; click to change it there') : esc('Global display currency; click to change in Settings → Preferences')}" style="color:var(--primary);cursor:pointer">${fromFormula ? 'from formula' : 'display currency'}</a></div>`;
 
   if (ov != null) {
     let ref = '';
@@ -2529,7 +2537,7 @@ function entityCostValueHtml(o) {
       if (computed > 0) {
         const pct = (ov - computed) / computed * 100;
         if (Math.abs(pct) >= 1) {
-          ref = `<span title="Manual override differs from the live computed cost; recheck if the recipe or ingredient prices changed" style="margin-left:8px;font-size:10.5px;background:#fef3c7;border:1px solid #fcd34d;color:#92400e;padding:1px 6px;border-radius:999px"><span class="fl-warn" aria-hidden="true"></span> computed ${money(computed)} (Δ ${pct > 0 ? '+' : ''}${pct.toFixed(0)}%)</span>`;
+          ref = `<span title="Manual override differs from the live computed cost; recheck if the recipe or ingredient prices changed" style="margin-left:8px;font-size:10.5px;background:var(--dk-amber-bg2, #fef3c7);border:1px solid var(--dk-amber-line, #fcd34d);color:var(--dk-amber-fg, #92400e);padding:1px 6px;border-radius:999px"><span class="fl-warn" aria-hidden="true"></span> computed ${money(computed)} (Δ ${pct > 0 ? '+' : ''}${pct.toFixed(0)}%)</span>`;
         }
       }
       if (!ref) ref = `<span style="font-size:11px;color:var(--text-muted);margin-left:8px">computed ${money(computed)}</span>`;

package/vendor/theoretical-params.js

@@ -752,10 +752,10 @@ function _tpCalcHtml(p, evalRows, valueMap) {
     if (aggs.length && spansOrig.length === aggs.length && spansSub.length === aggs.length) {
       const sym = _tpReplaceSpans(formula, spansOrig, L).replace(/\s+/g, ' ').trim();
       const nums = _tpReplaceSpans(substituted, spansSub, k => num(aggs[k].result)).replace(/\s+/g, ' ').trim();
-      resultHtml = `<div style="${mono};font-size:12.5px;margin-top:8px;color:#0f172a">Value = ${esc(sym)}${sym === nums ? '' : ` = ${esc(nums)}`} = <strong>${esc(_tpFmtValue(t.value))}</strong>${unit}</div>`;
+      resultHtml = `<div style="${mono};font-size:12.5px;margin-top:8px;color:var(--dk-text, #0f172a)">Value = ${esc(sym)}${sym === nums ? '' : ` = ${esc(nums)}`} = <strong>${esc(_tpFmtValue(t.value))}</strong>${unit}</div>`;
     } else if (!aggs.length && refs.length) {
       const nums = substituted.replace(/\((-?[\d.e+-]+)\)/gi, (m, v) => _tpFmtValue(+v)).replace(/\s+/g, ' ').trim();
-      resultHtml = `<div style="${mono};font-size:12.5px;margin-top:8px;color:#0f172a">Value = ${esc(formula.replace(/\s+/g, ' ').trim())} = ${esc(nums)} = <strong>${esc(_tpFmtValue(t.value))}</strong>${unit}</div>`;
+      resultHtml = `<div style="${mono};font-size:12.5px;margin-top:8px;color:var(--dk-text, #0f172a)">Value = ${esc(formula.replace(/\s+/g, ' ').trim())} = ${esc(nums)} = <strong>${esc(_tpFmtValue(t.value))}</strong>${unit}</div>`;
     } else {
       resultHtml = `<div style="font-size:12.5px;margin-top:8px">Value = <strong>${esc(_tpFmtValue(t.value))}</strong>${unit}</div>`;
     }
@@ -772,19 +772,19 @@ function _tpCalcHtml(p, evalRows, valueMap) {
     const units = {};
     fields.forEach(f => { const r = (evalRows || []).find(x => x && x._cfUnits && x._cfUnits[f]); units[f] = r ? r._cfUnits[f] : ''; });
     const byAgg = aggs.map(a => { const m = new Map(); (a.terms || []).forEach(tm => m.set(tm.idx, tm.value)); return m; });
-    const th = (txt, title, right) => `<th${title ? ` title="${esc(title)}"` : ''} style="text-align:${right ? 'right' : 'left'};padding:4px 10px;font-size:10.5px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid #cbd5e1;white-space:nowrap">${txt}</th>`;
+    const th = (txt, title, right) => `<th${title ? ` title="${esc(title)}"` : ''} style="text-align:${right ? 'right' : 'left'};padding:4px 10px;font-size:10.5px;font-weight:600;color:var(--dk-muted, #64748b);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--dk-line, #cbd5e1);white-space:nowrap">${txt}</th>`;
     const td = (html, extra) => `<td style="padding:4px 10px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;${extra || ''}">${html}</td>`;
-    const muted = 'color:#94a3b8';
+    const muted = 'color:var(--dk-faint, #94a3b8)';
     const head = th('Ingredient') + (showEntered ? th('As entered', 'Amount and unit as typed on the composition row', true) : '')
       + (usesAmount ? th('wt%', 'row.amount — grams, kg and mL are put on a per-100 basis (volume through each ingredient\'s density) before the formula runs', true) : '')
       + fields.map(f => th(esc(f) + (units[f] ? ` <span style="text-transform:none;font-weight:400">(${esc(units[f])})</span>` : ''), 'ing.' + f + ' — the bare number; the unit is a label only', true)).join('')
-      + aggs.map((a, k) => th(`<span style="${mono};text-transform:none;color:#1e40af">${L(k)}</span>`, (spansOrig[k] && spansOrig[k].text) || a.op, true)).join('');
+      + aggs.map((a, k) => th(`<span style="${mono};text-transform:none;color:var(--dk-blue-fg, #1e40af)">${L(k)}</span>`, (spansOrig[k] && spansOrig[k].text) || a.op, true)).join('');
     // Banded rows (Jun, 2026-10-06): white / slate-100 on the panel's slate-50,
     // so a row reads across a wide table without a ruler.
     let band = 0;
     const body = (evalRows || []).map((r, i) => {
       if (!r) return '';
-      const bg = (band++ % 2) ? '#f1f5f9' : '#ffffff';
+      const bg = (band++ % 2) ? 'var(--dk-raised, #f1f5f9)' : 'var(--dk-surface, #ffffff)';
       const isSub = r.ing && r.ing._isSubFormula;
       const name = isSub ? `${esc(r._subName || 'sub-formula')} <span style="${muted}">(sub-formula)</span>` : esc((r.ing && (r.ing.name || r.ing.uid)) || '(row)');
       const e = r._entered || {};
@@ -795,23 +795,23 @@ function _tpCalcHtml(p, evalRows, valueMap) {
       if (usesAmount) cells.push(td(num(r.amount)));
       fields.forEach(f => {
         const v = isSub ? undefined : (r.ing && r.ing[f]);
-        cells.push(typeof v === 'number' && Number.isFinite(v) ? td(num(v)) : td('missing', 'color:#b45309;font-style:italic'));
+        cells.push(typeof v === 'number' && Number.isFinite(v) ? td(num(v)) : td('missing', 'color:var(--dk-amber-fg, #b45309);font-style:italic'));
       });
       byAgg.forEach((m, k) => {
         if (!m.has(i)) { cells.push(td('·', muted + `" title="Left out by the WHERE in ${L(k)}`)); return; }
         const v = m.get(i);
-        cells.push(v == null ? td('not counted', 'color:#b45309;font-style:italic') : td(num(v)));
+        cells.push(v == null ? td('not counted', 'color:var(--dk-amber-fg, #b45309);font-style:italic') : td(num(v)));
       });
       return `<tr class="tp-calc-row" style="background:${bg}">${cells.join('')}</tr>`;
     }).join('');
     const nLead = 1 + (showEntered ? 1 : 0) + (usesAmount ? 1 : 0) + fields.length;
     const opWord = { SUM: 'Sum', AVG: 'Average', MIN: 'Min', MAX: 'Max', COUNT: 'Count' };
-    const foot = `<tr style="border-top:1px solid #cbd5e1">
+    const foot = `<tr style="border-top:1px solid var(--dk-line, #cbd5e1)">
       <td colspan="${nLead}" style="padding:5px 10px;font-weight:600">Total</td>
       ${aggs.map((a, k) => td(`<span style="${muted};font-weight:400">${opWord[a.op] || a.op}</span> <strong>${num(a.result)}</strong>`)).join('')}
     </tr>`;
-    const legend = aggs.map((a, k) => `<span style="white-space:nowrap"><span style="${mono};color:#1e40af;font-weight:600">${L(k)}</span> = <code style="${mono}">${esc((spansOrig[k] && spansOrig[k].text) || a.op)}</code></span>`).join(' &nbsp;·&nbsp; ');
-    tableHtml = `<div style="font-size:11.5px;color:#475569;margin:2px 0 6px;line-height:1.7">${legend}</div>
+    const legend = aggs.map((a, k) => `<span style="white-space:nowrap"><span style="${mono};color:var(--dk-blue-fg, #1e40af);font-weight:600">${L(k)}</span> = <code style="${mono}">${esc((spansOrig[k] && spansOrig[k].text) || a.op)}</code></span>`).join(' &nbsp;·&nbsp; ');
+    tableHtml = `<div style="font-size:11.5px;color:var(--dk-text-3, #475569);margin:2px 0 6px;line-height:1.7">${legend}</div>
       <table style="border-collapse:collapse;font-size:12px;min-width:60%"><thead><tr>${head}</tr></thead><tbody>${body}</tbody><tfoot>${foot}</tfoot></table>`;
   } else if (aggs.length) {
     // Many aggregates, or rows we can't line up: the plain per-aggregate lists.
@@ -820,7 +820,7 @@ function _tpCalcHtml(p, evalRows, valueMap) {
         <table style="font-size:11.5px;border-collapse:collapse">${a.terms.map(term => `<tr><td style="padding:1px 12px 1px 0;white-space:nowrap">${esc(term.label)}</td><td style="text-align:right;font-variant-numeric:tabular-nums">${term.value == null ? 'not counted' : num(term.value)}</td></tr>`).join('')}</table>
       </div>`).join('');
   }
-  return `<div style="padding:12px 14px;background:#f8fafc;border-top:1px solid #e2e8f0;font-size:12px;color:var(--text);overflow-x:auto">
+  return `<div style="padding:12px 14px;background:var(--dk-subtle, #f8fafc);border-top:1px solid var(--dk-line-soft, #e2e8f0);font-size:12px;color:var(--text);overflow-x:auto">
     ${refBits.length ? `<div style="font-size:11.5px;color:var(--text-muted);margin-bottom:6px">References: ${refBits.join(' &nbsp;·&nbsp; ')}</div>` : ''}
     ${tableHtml || (refBits.length ? '' : '<div style="color:var(--text-muted);font-size:11px">Value comes straight from the expression (no row aggregation).</div>')}
     ${resultHtml}
@@ -950,21 +950,21 @@ function renderTheoreticalParamsHtml(entityType, entity) {
     const pfBadge = (!errorText && Number.isFinite(value)) ? _tpSpecBadgeHtml(value, p.spec) : '';
 
     const miss = (!errorText && Number.isFinite(value)) ? _tpMissingNote(_tpMissingInputs(p.formula, evalRows)) : null;
-    const missHtml = miss ? `<div class="tp-miss" title="${esc(miss.tip)}" style="margin-top:3px;font-size:11px;font-weight:400;color:#b45309;cursor:help">⚠ ${esc(miss.text)}</div>` : '';
+    const missHtml = miss ? `<div class="tp-miss" title="${esc(miss.tip)}" style="margin-top:3px;font-size:11px;font-weight:400;color:var(--dk-amber-fg, #b45309);cursor:help">⚠ ${esc(miss.text)}</div>` : '';
 
     const formulaPreview = (p.formula || '').length > 80
       ? esc(p.formula.slice(0, 80)) + '…'
       : esc(p.formula || '');
 
-    return `<tr style="border-bottom:1px solid #f1f5f9">
-      <td style="padding:8px 12px;font-weight:500;color:#0f172a">${esc(p.name || '—')}${p.pinned ? ` <span class="fl-pin" title="Pinned to the summary" role="img" aria-label="pinned" style="width:.8em;height:.8em;color:var(--primary);margin-left:3px"></span>` : ''}${missHtml}</td>
+    return `<tr style="border-bottom:1px solid var(--dk-line-soft, #f1f5f9)">
+      <td style="padding:8px 12px;font-weight:500;color:var(--dk-text, #0f172a)">${esc(p.name || '—')}${p.pinned ? ` <span class="fl-pin" title="Pinned to the summary" role="img" aria-label="pinned" style="width:.8em;height:.8em;color:var(--primary);margin-left:3px"></span>` : ''}${missHtml}</td>
       <td style="padding:8px 12px;text-align:right;font-variant-numeric:tabular-nums">
-        <strong>${valueStr}</strong>${p.unit ? ` <span translate="no" style="font-size:11px;color:#94a3b8">${esc(p.unit)}</span>` : ''}
+        <strong>${valueStr}</strong>${p.unit ? ` <span translate="no" style="font-size:11px;color:var(--dk-faint, #94a3b8)">${esc(p.unit)}</span>` : ''}
       </td>
       <td style="padding:8px 12px;text-align:center">${pfBadge}</td>
-      <td style="padding:8px 12px;font-family:ui-monospace,monospace;font-size:11px;color:#475569" title="${esc(p.formula || '')}">
+      <td style="padding:8px 12px;font-family:ui-monospace,monospace;font-size:11px;color:var(--dk-text-3, #475569)" title="${esc(p.formula || '')}">
         <span>${formulaPreview}</span>
-        ${(!errorText && Number.isFinite(value)) ? `<button onclick="_tpToggleCalc('${p.id}')" title="Show how this value was calculated" style="margin-left:8px;font-family:inherit;font-size:10px;padding:1px 7px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:9999px;cursor:pointer;white-space:nowrap">Show calc</button>` : ''}
+        ${(!errorText && Number.isFinite(value)) ? `<button onclick="_tpToggleCalc('${p.id}')" title="Show how this value was calculated" style="margin-left:8px;font-family:inherit;font-size:10px;padding:1px 7px;background:var(--dk-blue-bg, #eff6ff);border:1px solid var(--dk-blue-line, #bfdbfe);color:var(--dk-blue-fg, #1e40af);border-radius:9999px;cursor:pointer;white-space:nowrap">Show calc</button>` : ''}
       </td>
       <td style="padding:8px 12px;text-align:right;white-space:nowrap">
         <button class="btn btn-secondary btn-sm btn-icon" onclick="openTheoreticalParamModal('${entityType}','${entity.id}','${p.id}')" title="Edit">${typeof ICON !== 'undefined' && ICON.edit ? ICON.edit : '✎'}</button>
@@ -978,11 +978,11 @@ function renderTheoreticalParamsHtml(entityType, entity) {
     <div style="overflow-x:auto">
       <table style="width:100%;border-collapse:collapse;font-size:13px">
         <thead>
-          <tr style="background:#f8fafc;border-bottom:2px solid var(--border)">
-            <th style="text-align:left;padding:8px 12px;font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.05em">Parameter</th>
-            <th style="text-align:right;padding:8px 12px;font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.05em">Value</th>
-            <th style="text-align:center;padding:8px 12px;font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.05em" title="Pass/fail vs. spec, when a spec is defined">Result</th>
-            <th style="text-align:left;padding:8px 12px;font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.05em">Formula</th>
+          <tr style="background:var(--dk-subtle, #f8fafc);border-bottom:2px solid var(--border)">
+            <th style="text-align:left;padding:8px 12px;font-size:11px;color:var(--dk-muted, #64748b);text-transform:uppercase;letter-spacing:.05em">Parameter</th>
+            <th style="text-align:right;padding:8px 12px;font-size:11px;color:var(--dk-muted, #64748b);text-transform:uppercase;letter-spacing:.05em">Value</th>
+            <th style="text-align:center;padding:8px 12px;font-size:11px;color:var(--dk-muted, #64748b);text-transform:uppercase;letter-spacing:.05em" title="Pass/fail vs. spec, when a spec is defined">Result</th>
+            <th style="text-align:left;padding:8px 12px;font-size:11px;color:var(--dk-muted, #64748b);text-transform:uppercase;letter-spacing:.05em">Formula</th>
             <th></th>
           </tr>
         </thead>
@@ -1028,22 +1028,22 @@ function _tpPinnedChipsHtml(entityType, entity) {
       ? 'ERR'
       : (Number.isFinite(r.value) ? _tpFmtValue(r.value) : '—');
     // Spec tint (matches the table's pass/fail badge colours)
-    let bg = '#f1f5f9', fg = '#334155', bd = '#e2e8f0';
+    let bg = 'var(--dk-raised, #f1f5f9)', fg = 'var(--dk-text-2, #334155)', bd = 'var(--dk-line-soft, #e2e8f0)';
     if (!r.error && Number.isFinite(r.value) && p.spec) {
       const okMin = p.spec.min == null || r.value >= p.spec.min;
       const okMax = p.spec.max == null || r.value <= p.spec.max;
-      if (okMin && okMax) { bg = '#dcfce7'; fg = '#15803d'; bd = '#bbf7d0'; }
-      else                { bg = '#fee2e2'; fg = '#b91c1c'; bd = '#fecaca'; }
-    } else if (r.error) { fg = '#b91c1c'; }
+      if (okMin && okMax) { bg = 'var(--dk-green-bg2, #dcfce7)'; fg = 'var(--dk-green-fg, #15803d)'; bd = 'var(--dk-green-line, #bbf7d0)'; }
+      else                { bg = 'var(--dk-red-bg2, #fee2e2)'; fg = 'var(--dk-red-fg, #b91c1c)'; bd = 'var(--dk-red-line, #fecaca)'; }
+    } else if (r.error) { fg = 'var(--dk-red-fg, #b91c1c)'; }
     const miss = (!r.error && Number.isFinite(r.value)) ? _tpMissingNote(_tpMissingInputs(p.formula, chipRows)) : null;
     const title = r.error ? r.error : ((p.description || `${p.name}${p.unit ? ' (' + p.unit + ')' : ''}`) + (miss ? '\n⚠ ' + miss.text + '\n' + miss.tip : ''));
     return `<span title="${esc(title)}" style="display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px;border-radius:9999px;background:${bg};border:1px solid ${bd};font-size:11.5px;line-height:1.4;white-space:nowrap">
-      <span style="color:#64748b">${esc(p.name)}</span>
-      <strong style="color:${fg};font-variant-numeric:tabular-nums">${esc(valueStr)}</strong>${miss ? '<span style="color:#b45309" aria-label="some ingredient values missing">⚠</span>' : ''}${p.unit ? `<span translate="no" style="color:#94a3b8;font-size:10.5px">${esc(p.unit)}</span>` : ''}
+      <span style="color:var(--dk-muted, #64748b)">${esc(p.name)}</span>
+      <strong style="color:${fg};font-variant-numeric:tabular-nums">${esc(valueStr)}</strong>${miss ? '<span style="color:var(--dk-amber-fg, #b45309)" aria-label="some ingredient values missing">⚠</span>' : ''}${p.unit ? `<span translate="no" style="color:var(--dk-faint, #94a3b8);font-size:10.5px">${esc(p.unit)}</span>` : ''}
     </span>`;
   }).join('');
   return `<div class="tp-pinned-chips" style="display:flex;flex-wrap:wrap;gap:6px;align-items:center" title="Pinned theoretical parameters">
-    <span style="font-size:11px;color:#94a3b8" aria-hidden="true">ƒx</span>${chips}
+    <span style="font-size:11px;color:var(--dk-faint, #94a3b8)" aria-hidden="true">ƒx</span>${chips}
   </div>`;
 }
 
@@ -1077,8 +1077,8 @@ function _tpSpecBadgeHtml(value, spec) {
   const min = spec.min != null ? _tpFmtValue(spec.min) : '–∞';
   const max = spec.max != null ? _tpFmtValue(spec.max) : '+∞';
   return pass
-    ? `<span style="display:inline-block;padding:1px 7px;border-radius:9999px;background:#dcfce7;color:#15803d;font-size:11px;font-weight:500" title="Within spec ${min}..${max}"><span class="fl-check" aria-hidden="true"></span></span>`
-    : `<span style="display:inline-block;padding:1px 7px;border-radius:9999px;background:#fee2e2;color:#b91c1c;font-size:11px;font-weight:500" title="Outside spec ${min}..${max}"><span class="fl-cross" aria-hidden="true"></span></span>`;
+    ? `<span style="display:inline-block;padding:1px 7px;border-radius:9999px;background:var(--dk-green-bg2, #dcfce7);color:var(--dk-green-fg, #15803d);font-size:11px;font-weight:500" title="Within spec ${min}..${max}"><span class="fl-check" aria-hidden="true"></span></span>`
+    : `<span style="display:inline-block;padding:1px 7px;border-radius:9999px;background:var(--dk-red-bg2, #fee2e2);color:var(--dk-red-fg, #b91c1c);font-size:11px;font-weight:500" title="Outside spec ${min}..${max}"><span class="fl-cross" aria-hidden="true"></span></span>`;
 }
 
 // ---- Modal ----
@@ -1156,10 +1156,10 @@ function _tpFieldPaletteHtml(evalRows, params, currentParamId) {
     .filter(pp => pp.id !== currentParamId && pp.name)
     .map(pp => chip(`[${pp.name}]`, `[${pp.name}]`, 'Use this parameter’s computed value')).join('');
 
-  const numNote = `<span style="font-size:11px;color:#b45309">No numeric fields on these ingredients yet — add values like density, or a custom field such as “solids”, on the Ingredients page to use them here.</span>`;
+  const numNote = `<span style="font-size:11px;color:var(--dk-amber-fg, #b45309)">No numeric fields on these ingredients yet — add values like density, or a custom field such as “solids”, on the Ingredients page to use them here.</span>`;
 
   return `
-    <div style="margin-top:6px;padding:9px 11px;background:#f8fafc;border:1px solid var(--border);border-radius:6px">
+    <div style="margin-top:6px;padding:9px 11px;background:var(--dk-subtle, #f8fafc);border:1px solid var(--border);border-radius:6px">
       <div style="font-size:11.5px;color:var(--text-muted);margin-bottom:7px;line-height:1.55">
         <strong style="color:var(--text)">Click to build.</strong> A formula runs across every ingredient row, so wrap fields in an aggregation like <code>SUM()</code> or <code>AVG()</code>. Try: click <code>AVG()</code>, then (cursor inside the brackets) click <code>ing.density</code>.
       </div>
@@ -1340,14 +1340,14 @@ function _tpRefreshPreview(entityType, entityId) {
   };
   const pfBadge = _tpSpecBadgeHtml(result, liveSpec);
   const missingHtml = ingMissingFields.size
-    ? `<div style="margin-top:6px;color:#d97706;font-size:11.5px"><strong><span class="fl-warn" aria-hidden="true"></span> ${ingMissingFields.size} missing field${ingMissingFields.size===1?'':'s'}:</strong> ${[...ingMissingFields].slice(0, 4).map(esc).join(', ')}${ingMissingFields.size > 4 ? '…' : ''}</div>`
+    ? `<div style="margin-top:6px;color:var(--dk-amber-fg, #d97706);font-size:11.5px"><strong><span class="fl-warn" aria-hidden="true"></span> ${ingMissingFields.size} missing field${ingMissingFields.size===1?'':'s'}:</strong> ${[...ingMissingFields].slice(0, 4).map(esc).join(', ')}${ingMissingFields.size > 4 ? '…' : ''}</div>`
     : '';
   const unknownRefHtml = unknownRefs.length
-    ? `<div style="margin-top:6px;color:#d97706;font-size:11.5px"><strong><span class="fl-warn" aria-hidden="true"></span> Unknown parameter${unknownRefs.length===1?'':'s'}:</strong> ${unknownRefs.slice(0, 4).map(n => esc('[' + n + ']')).join(', ')}${unknownRefs.length > 4 ? '…' : ''} — check the name matches another parameter exactly.</div>`
+    ? `<div style="margin-top:6px;color:var(--dk-amber-fg, #d97706);font-size:11.5px"><strong><span class="fl-warn" aria-hidden="true"></span> Unknown parameter${unknownRefs.length===1?'':'s'}:</strong> ${unknownRefs.slice(0, 4).map(n => esc('[' + n + ']')).join(', ')}${unknownRefs.length > 4 ? '…' : ''} — check the name matches another parameter exactly.</div>`
     : '';
   wrap.innerHTML = `
     <div style="display:flex;align-items:baseline;gap:8px;flex-wrap:wrap">
-      <span style="font-size:15px;color:#94a3b8;font-weight:600" aria-hidden="true">=</span>
+      <span style="font-size:15px;color:var(--dk-faint, #94a3b8);font-weight:600" aria-hidden="true">=</span>
       <span style="font-size:28px;line-height:1.1;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums">${esc(valueStr)}</span>
       ${unit ? `<span translate="no" style="font-size:14px;color:var(--text-muted);font-weight:500">${esc(unit)}</span>` : ''}
       ${pfBadge}
@@ -1401,7 +1401,7 @@ function _tpPresetCatalog() {
       name: 'VOC (g/L)',
       unit: 'g/L',
       formula: "1000 * SUM(row.amount WHERE ing.class == 'Solvent') / SUM(row.amount / ing.density WHERE ing.density)",
-      description: 'Volatile-organic-compound load per litre of paint. Needs ing.class and ing.density.',
+      description: 'Volatile-organic-compound load per liter of paint. Needs ing.class and ing.density.',
     },
     {
       group: 'Coatings',
@@ -1525,7 +1525,7 @@ function openTheoreticalParamPresets(entityType, entityId) {
           return `<button type="button" class="btn btn-secondary" style="display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:10px 14px;width:100%;gap:4px;white-space:normal;line-height:1.4"
             onclick="_tpAddPresetByIndex('${entityType}','${entityId}',${globalIdx})">
             <div style="font-weight:600;font-size:13.5px">${esc(p.name)}${p.unit ? ` <span style="font-weight:400;color:var(--text-muted)">(${esc(p.unit)})</span>` : ''}</div>
-            <div style="font-family:ui-monospace,monospace;font-size:11px;color:#475569;word-break:break-all">${esc(p.formula)}</div>
+            <div style="font-family:ui-monospace,monospace;font-size:11px;color:var(--dk-text-3, #475569);word-break:break-all">${esc(p.formula)}</div>
             ${p.description ? `<div style="font-size:11.5px;color:var(--text-muted)">${esc(p.description)}</div>` : ''}
           </button>`;
         }).join('')}