Simplify: token-ify hardcoded colors, remove redundant Big ternary, guard no-op shift-click

- Replace 5 hardcoded #2C2C2C/#555550/#888880 literals with var(--pico-color),
  var(--color-label), var(--pico-muted-color); add --color-label token to :root
- Remove inline Big(inputValue) ternary in results derived — convert.ts already
  handles same-unit identity via its own from.id === to.id guard
- Drop now-unused Big import from +page.svelte
- Guard onshiftclick in ConversionResult: no-op when tile is already the from-unit

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app.css

@@ -11,6 +11,7 @@
   --pico-card-border-color: #E8E4DF;
   --pico-color: #2C2C2C;
   --pico-muted-color: #888880;
+  --color-label: #555550; /* mid-muted: darker than muted-color, lighter than body text */
   --pico-muted-border-color: #E0DCD7;
   --pico-primary: #5B7FA6;
   --pico-primary-background: rgba(91, 127, 166, 0.08);
@@ -68,17 +69,17 @@
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   word-break: break-all;
-  color: #2C2C2C; /* explicit dark charcoal, do not rely on inheritance */
+  color: var(--pico-color); /* explicit; do not rely on inheritance */
 }
 
 .result-label {
   font-size: 0.85rem;
-  color: #555550;
+  color: var(--color-label);
 }
 
 .result-symbol {
   font-size: 0.75rem;
-  color: #888880;
+  color: var(--pico-muted-color);
   font-style: italic;
 }
 
@@ -104,12 +105,12 @@
   font-variant-numeric: tabular-nums;
   line-height: 1.1;
   word-break: break-all;
-  color: #2C2C2C;
+  color: var(--pico-color);
 }
 
 .highlighted-label {
   font-size: 1.25rem;
-  color: #2C2C2C;
+  color: var(--pico-color);
 }
 
 .highlighted-symbol {
@@ -160,7 +161,7 @@
 }
 
 .highlight-dismiss:hover {
-  color: #2C2C2C;
+  color: var(--pico-color);
   background-color: rgba(0, 0, 0, 0.06);
 }
 

src/components/ConversionResult.svelte

@@ -29,7 +29,9 @@
 
   function handleClick(e: MouseEvent) {
     if (e.shiftKey) {
-      onshiftclick();
+      // Shift+click promotes this tile to the from-unit.
+      // Guard: if it already IS the from-unit, the action would be a no-op.
+      if (!isInputUnit) onshiftclick();
     } else {
       onclick();
     }

src/routes/+page.svelte

@@ -2,7 +2,6 @@
   import { browser } from '$app/environment';
   import { goto } from '$app/navigation';
   import { page } from '$app/state';
-  import { Big } from 'big.js';
   import { florpUnits } from '$lib/units/definitions';
   import { convertById } from '$lib/convert';
   import { FRACTIONAL_DIGITS } from '$lib/config';
@@ -43,13 +42,12 @@
   }
 
   // ── Derived: results for ALL units in definition order ─────────────────────
+  // convert.ts already handles the same-unit identity (from.id === to.id → return value),
+  // so no special-casing needed here for the from-unit.
   let results = $derived<ResultItem[]>(
     units.map((u) => ({
       unit: u,
-      convertedValue:
-        u.id === fromUnitId
-          ? Big(inputValue) // from-unit always equals inputValue
-          : convertById(inputValue, fromUnitId, u.id, units)
+      convertedValue: convertById(inputValue, fromUnitId, u.id, units)
     }))
   );