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/modal/_base.css

@@ -75,7 +75,14 @@ body.modal-open {
     font-weight: 500;
     font-size: 0.95em;
     min-width: 100px;
-    transition: background-color 0.2s, opacity 0.2s;
+    transition: background-color var(--transition-base), opacity var(--transition-base), transform var(--transition-fast);
+}
+
+.cancel-btn:active,
+.delete-btn:active,
+.exclude-btn:active,
+.confirm-btn:active {
+    transform: scale(0.98);
 }
 
 .cancel-btn {
@@ -128,7 +135,7 @@ body.modal-open {
     font-size: 1.5em;
     cursor: pointer;
     opacity: 0.7;
-    transition: opacity 0.2s;
+    transition: opacity var(--transition-base);
     z-index: 10;
 }
 

static/css/components/modal/delete-modal.css

@@ -51,7 +51,7 @@
     background: var(--lora-surface);
     padding: 2px 6px;
     border-radius: 3px;
-    font-family: monospace;
+    font-family: var(--font-mono);
     border: 1px solid var(--lora-border);
 }
 

static/css/components/modal/download-modal.css

@@ -404,7 +404,7 @@
 .path-display {
     padding: var(--space-1);
     color: var(--text-color);
-    font-family: monospace;
+    font-family: var(--font-mono);
     font-size: 0.9em;
     line-height: 1.4;
     white-space: pre-wrap;
@@ -678,7 +678,7 @@
     border-radius: var(--border-radius-xs);
     background: var(--bg-color);
     color: var(--text-color);
-    font-family: monospace;
+    font-family: var(--font-mono);
     font-size: 0.9em;
     resize: vertical;
     line-height: 1.5;

static/css/components/modal/settings-modal.css

@@ -582,7 +582,7 @@
 }
 
 .priority-tags-example code {
-    font-family: var(--code-font, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
+    font-family: var(--font-mono);
     background-color: rgba(var(--lora-accent-rgb, 79, 70, 229), 0.12);
     padding: 2px 6px;
     border-radius: var(--border-radius-xs);
@@ -932,7 +932,7 @@ input:checked + .toggle-slider:before {
     border-radius: var(--border-radius-xs);
     padding: var(--space-1);
     margin-top: 8px;
-    font-family: monospace;
+    font-family: var(--font-mono);
     font-size: 0.9em;
     color: var(--lora-accent);
     display: none;
@@ -1146,7 +1146,7 @@ input:checked + .toggle-slider:before {
     color: white;
     padding: 2px 6px;
     border-radius: 3px;
-    font-family: monospace;
+    font-family: var(--font-mono);
     font-size: 1em;
     font-weight: 500;
 }
@@ -1175,7 +1175,7 @@ input:checked + .toggle-slider:before {
     background-color: var(--lora-surface);
     color: var(--text-color);
     font-size: 0.95em;
-    font-family: monospace;
+    font-family: var(--font-mono);
     height: 24px;
     transition: border-color 0.2s;
 }
@@ -1277,7 +1277,7 @@ input:checked + .toggle-slider:before {
     border-radius: 6px;
     font-size: 14px;
     font-weight: normal;
-    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+    font-family: var(--font-body);
     white-space: normal;
     max-width: 220px;
     width: max-content;

static/css/components/modal/update-modal.css

@@ -123,7 +123,7 @@
 }
 
 .version-number {
-    font-family: monospace;
+    font-family: var(--font-mono);
     font-weight: 600;
 }
 
@@ -136,7 +136,7 @@
     font-size: 0.85em;
     opacity: 0.7;
     margin-top: 4px;
-    font-family: monospace;
+    font-family: var(--font-mono);
     color: var(--text-color);
 }
 
@@ -332,7 +332,7 @@
     background: rgba(0, 0, 0, 0.05);
     padding: 2px 4px;
     border-radius: 3px;
-    font-family: monospace;
+    font-family: var(--font-mono);
     font-size: 0.9em;
 }