design(web): "Tactile Deck" redesign with light/dark theming

- Full semantic design-token layer (surfaces, spacing scale, radii, elevation,
  type scale) as the single source of truth; electric-violet signature accent
  instead of default blue.
- Light + dark themes via prefers-color-scheme; muted text now meets WCAG AA
  (replaces low-contrast #aaa/#888).
- Macro cards read as physical keys (raised, hairline highlight, per-macro
  --macro-color wash + placeholder, press/executing feedback, 2-line clamp).
- Proper modal sheet (blurred scrim, sticky header/footer, focus rings),
  thumb-reachable floating action button, 44px tap targets, app-wide
  :focus-visible, and prefers-reduced-motion support.
- manifest + theme-color meta updated to the new palette.

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

web/index.html

@@ -4,7 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: blob:; connect-src 'self' ws: wss:; object-src 'none'; base-uri 'none'; frame-ancestors 'none'">
-    <meta name="theme-color" content="#007acc">
+    <meta name="theme-color" content="#15161a" media="(prefers-color-scheme: dark)">
+    <meta name="theme-color" content="#eceef4" media="(prefers-color-scheme: light)">
     <meta name="description" content="Remote macro control for your desktop">
 
     <!-- PWA / iOS specific -->
@@ -13,7 +14,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="apple-mobile-web-app-title" content="MacroPad">
     <meta name="application-name" content="MacroPad">
-    <meta name="msapplication-TileColor" content="#007acc">
+    <meta name="msapplication-TileColor" content="#7c5cff">
     <meta name="msapplication-tap-highlight" content="no">
 
     <title>MacroPad</title>

web/manifest.json

@@ -6,9 +6,10 @@
     "start_url": "/",
     "scope": "/",
     "display": "standalone",
-    "background_color": "#2e2e2e",
-    "theme_color": "#007acc",
+    "background_color": "#15161a",
+    "theme_color": "#7c5cff",
     "orientation": "any",
+    "//": "Maskable icons ideally need ~10% transparent padding so they aren't cropped inside the platform safe zone; the current PNGs are reused as-is without new art.",
     "icons": [
         {
             "src": "/static/icons/icon-192.png",