Use warm colors for QR code display in dark mode

- Warm cream background (#f5f0e6) instead of harsh white
- Gruvbox dark brown foreground (#3c3836) for good contrast
- Maintains ~10:1 contrast ratio for reliable phone scanning
- Easier on eyes in dark ATM environments

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

lamassu-next/apps/machine/src/components/QRCode.vue

@@ -8,12 +8,30 @@ const props = defineProps<{
 }>()
 
 const qrSize = computed(() => props.size ?? 200)
+
+// Warm cream background - easier on eyes in dark mode
+// Dark brown foreground - maintains high contrast for scanning
+const qrBackground = '#f5f0e6' // Warm cream
+const qrForeground = '#3c3836' // Gruvbox dark0_hard - ensures scanability
 </script>
 
 <template>
-  <div class="flex flex-col items-center justify-center rounded-lg bg-white p-4">
+  <div
-    <QrcodeVue :value="value" :size="qrSize" level="M" render-as="svg" />
+    class="flex flex-col items-center justify-center rounded-xl p-5"
-    <code class="mt-2 block max-w-full break-all px-2 text-center text-xs text-zinc-500">
+    :style="{ backgroundColor: qrBackground }"
+  >
+    <QrcodeVue
+      :value="value"
+      :size="qrSize"
+      level="M"
+      render-as="svg"
+      :background="qrBackground"
+      :foreground="qrForeground"
+    />
+    <code
+      class="mt-3 block max-w-full break-all px-2 text-center text-xs"
+      :style="{ color: qrForeground }"
+    >
       {{ value.slice(0, 32) }}...
     </code>
   </div>