refactor(phase-4): standardize remaining transitions and box-shadows

- Replace all remaining 'transition: all' with specific token-based transitions
- Replace 80+ hardcoded box-shadow rgba values with semantic tokens
- Add new tokens: --shadow-side, --shadow-elevated, --shadow-dialog, --shadow-inset-top
- Update dark theme overrides for new shadow tokens
- 32 files changed, net +8 lines (more consistent, less duplication)

static/css/components/lora-modal/showcase.css

@@ -111,8 +111,8 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+  transition: var(--transition-base);
+  box-shadow: var(--shadow-md);
   padding: 0;
   position: relative;
   overflow: hidden;
@@ -120,7 +120,7 @@
 
 .media-control-btn:hover {
   transform: translateY(-2px);
-  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-lg);
 }
 
 .media-control-btn.set-preview-btn:hover {
@@ -205,7 +205,7 @@
   z-index: 5;
   max-height: 50%; /* Reduced to take less space */
   overflow-y: auto;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-inset-top);
   opacity: 0;
   pointer-events: none;
 }
@@ -220,7 +220,7 @@
 /* Adjust to dark theme */
 [data-theme="dark"] .image-metadata-panel {
   background: var(--card-bg);
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-inset-top);
 }
 
 .metadata-content {
@@ -312,7 +312,7 @@
   opacity: 0.6;
   cursor: pointer;
   padding: 3px;
-  transition: all 0.2s ease;
+  transition: var(--transition-base);
 }
 
 .copy-prompt-btn:hover {
@@ -409,7 +409,7 @@
   border-radius: var(--border-radius-sm);
   padding: var(--space-4);
   text-align: center;
-  transition: all 0.3s ease;
+  transition: var(--transition-slow);
   background: var(--lora-surface);
   cursor: pointer;
 }
@@ -471,7 +471,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  transition: all 0.2s;
+  transition: var(--transition-base);
 }
 
 .select-files-btn:hover {