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

@@ -32,7 +32,7 @@
   color: var(--text-color);
   cursor: pointer;
   font-weight: 500;
-  transition: all 0.2s;
+  transition: var(--transition-base);
   opacity: 0.7;
 }
 
@@ -150,7 +150,7 @@
   margin-left: 8px;
   vertical-align: middle;
   animation: fadeIn 0.5s ease-in-out;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-sm);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -164,7 +164,7 @@
 
 /* Dark theme adjustments for new content badge */
 [data-theme="dark"] .new-content-badge {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  box-shadow: var(--shadow-lg);
 }
 
 /* Update video list styles */
@@ -210,7 +210,7 @@
   margin-left: 10px;
   vertical-align: middle;
   animation: fadeIn 0.5s ease-in-out;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-md);
 }
 
 .update-date-badge i {
@@ -225,7 +225,7 @@
 
 /* Dark theme adjustments */
 [data-theme="dark"] .update-date-badge {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-md);
 }
 
 /* Privacy-friendly video embed styles */
@@ -281,7 +281,7 @@
   border-radius: var(--border-radius-sm);
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: var(--transition-base);
   background-color: var(--lora-accent);
   color: white;
   text-decoration: none;