feat(phase-4): visual polish — font stack, shadow system, transitions, micro-interactions

Phase 4: Visual Polish

4.1 Font Stack Upgrade:
- Add --font-display token for headings
- Replace all hardcoded font-family: monospace with var(--font-mono)
- Replace hardcoded 'Segoe UI' stack with var(--font-body)

4.2 Shadow Elevation System:
- Add --shadow-2xl, --shadow-card/dropdown/modal/toast/header/dark-lg tokens
- Replace hardcoded shadows in header, menu, banner, shared, recipe-modal,
  progress-panel, import-modal, alphabet-bar with semantic tokens
- Add dark theme shadow overrides with increased opacity

4.3 Transitions & Micro-interactions:
- Replace transition: all with specified properties (performance)
- Use --transition-fast/base/slow tokens instead of hardcoded 0.2s/0.3s
- Add :active scale feedback to modal buttons
- Enhance card hover with box-shadow + border-color lift

4.4 Dark Theme Refinement:
- Elevated shadow opacity for dark theme visibility

4.5 Density:
- Standardize container padding with --space-2 token

21 files changed

static/css/components/menu.css

@@ -5,7 +5,7 @@
     border-radius: var(--border-radius-xs);
     padding: 4px 0;
     min-width: 180px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--shadow-dropdown);
     z-index: 1000;
     display: none;
     backdrop-filter: blur(10px);
@@ -77,7 +77,7 @@
     border-radius: var(--border-radius-xs);
     padding: 0;
     min-width: 200px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--shadow-dropdown);
     z-index: 1001;
     backdrop-filter: blur(10px);
 }
@@ -110,7 +110,7 @@
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-base);
     padding: 16px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--shadow-modal);
     z-index: var(--z-modal);
     width: 300px;
     display: none;
@@ -188,7 +188,7 @@
     max-width: 350px;
     max-height: 400px;
     overflow-y: auto;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--shadow-dropdown);
     z-index: var(--z-overlay);
     display: none;
     backdrop-filter: blur(10px);