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/tokens/effects.css

@@ -12,9 +12,17 @@
   --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 3px 5px rgba(0, 0, 0, 0.08);
   --shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.15);
+  --shadow-2xl: 0 8px 32px rgba(0, 0, 0, 0.12);
   --shadow-focus: 0 0 0 1px var(--color-accent);
   --shadow-glow: 0 2px 6px var(--color-info-glow);
 
+  --shadow-card: var(--shadow-sm);
+  --shadow-dropdown: var(--shadow-md);
+  --shadow-modal: var(--shadow-lg);
+  --shadow-toast: var(--shadow-xl);
+  --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.08);
+  --shadow-dark-lg: 0 4px 24px rgba(0, 0, 0, 0.4);
+
   --transition-fast: 150ms ease;
   --transition-base: 200ms ease;
   --transition-slow: 300ms ease;
@@ -23,3 +31,19 @@
   --border-width-thin: 1px;
   --border-width-thick: 2px;
 }
+
+[data-theme="dark"] {
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
+  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35);
+  --shadow-lg: 0 3px 5px rgba(0, 0, 0, 0.3);
+  --shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.45);
+  --shadow-2xl: 0 8px 32px rgba(0, 0, 0, 0.35);
+
+  --shadow-card: var(--shadow-sm);
+  --shadow-dropdown: var(--shadow-md);
+  --shadow-modal: var(--shadow-lg);
+  --shadow-toast: var(--shadow-xl);
+  --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --shadow-dark-lg: 0 4px 24px rgba(0, 0, 0, 0.6);
+}

static/css/tokens/typography.css

@@ -1,4 +1,5 @@
 :root {
+  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
   --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
 
@@ -8,6 +9,8 @@
   --text-md: 0.95rem;
   --text-lg: 1.1rem;
   --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 2rem;
 
   --leading-tight: 1.2;
   --leading-normal: 1.4;