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

@@ -197,7 +197,7 @@ body.modal-open {
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-sm);
     cursor: pointer;
-    transition: all 0.2s;
+    transition: var(--transition-base);
     font-size: 0.95em;
 }
 

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

@@ -37,7 +37,7 @@
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-sm);
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
     background: var(--bg-color);
     margin: 1px;
     position: relative;
@@ -45,7 +45,7 @@
 
 .version-item:hover {
     border-color: var(--lora-accent);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-md);
     z-index: 1;
 }
 
@@ -156,7 +156,7 @@
     background: var(--bg-color);
     color: var(--text-color);
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -225,7 +225,7 @@
     padding: 4px 8px;
     border-radius: var(--border-radius-xs);
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
     color: var(--text-color);
     opacity: 0.7;
     text-decoration: none;
@@ -272,7 +272,7 @@
     padding: 4px 8px;
     cursor: pointer;
     border-radius: var(--border-radius-xs);
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
     position: relative;
 }
 
@@ -293,7 +293,7 @@
     justify-content: center;
     cursor: pointer;
     border-radius: 2px;
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
 }
 
 .tree-expand-icon:hover {
@@ -364,7 +364,7 @@
     color: var(--text-color);
     cursor: pointer;
     font-size: 0.8em;
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
 }
 
 .create-folder-form button.confirm {
@@ -453,7 +453,7 @@
     right: 0;
     bottom: 0;
     background-color: var(--border-color);
-    transition: all 0.3s ease;
+    transition: var(--transition-slow);
     border-radius: 18px;
 }
 
@@ -465,9 +465,9 @@
     left: 3px;
     bottom: 3px;
     background-color: white;
-    transition: all 0.3s ease;
+    transition: var(--transition-slow);
     border-radius: 50%;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--shadow-xs);
 }
 
 .inline-toggle-container .toggle-switch input:checked+.toggle-slider {
@@ -516,7 +516,7 @@
     font-size: inherit;
     font-weight: 600;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
     border: 1px solid oklch(var(--lora-accent) / 0.35);
     user-select: none;
     box-shadow: 0 1px 2px oklch(var(--lora-accent) / 0.1);
@@ -577,13 +577,13 @@
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-sm);
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
     background: var(--bg-color);
 }
 
 .file-option:hover {
     border-color: var(--lora-accent);
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-sm);
 }
 
 .file-option.selected {

static/css/components/modal/example-access-modal.css

@@ -20,12 +20,12 @@
     border: 1px solid var(--lora-border);
     background-color: var(--lora-surface);
     cursor: pointer;
-    transition: all 0.2s;
+    transition: var(--transition-base);
 }
 
 .example-option-btn:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-md);
     border-color: var(--lora-accent);
 }
 
@@ -68,5 +68,5 @@
 
 /* Dark theme adjustments */
 [data-theme="dark"] .example-option-btn:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--shadow-elevated);
 }

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;

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

@@ -10,7 +10,7 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
 }
 
 .settings-toggle:hover {
@@ -81,7 +81,7 @@
     font-weight: 500;
     cursor: pointer;
     border-radius: var(--border-radius-xs);
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
     margin-bottom: 4px;
 }
 
@@ -154,7 +154,7 @@
     background-color: var(--lora-surface);
     color: var(--text-color);
     font-size: 0.9em;
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
 }
 
 .settings-search-input:focus {
@@ -183,7 +183,7 @@
     justify-content: center;
     font-size: 0.7em;
     opacity: 0.6;
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
 }
 
 .settings-search-clear:hover {
@@ -289,7 +289,7 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
     text-decoration: none;
     position: relative;
 }
@@ -614,7 +614,7 @@
     border-bottom: 2px solid transparent;
     color: var(--text-color);
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
     opacity: 0.7;
 }
 
@@ -974,7 +974,7 @@ input:checked + .toggle-slider:before {
     border-radius: var(--border-radius-xs);
     cursor: pointer;
     font-size: 0.9em;
-    transition: all 0.2s;
+    transition: var(--transition-base);
     height: 32px; /* Match other control heights */
 }
 
@@ -1030,7 +1030,7 @@ input:checked + .toggle-slider:before {
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all 0.2s;
+    transition: var(--transition-base);
 }
 
 .remove-mapping-btn:hover {
@@ -1287,7 +1287,7 @@ input:checked + .toggle-slider:before {
     pointer-events: none;
     z-index: 10000;
     line-height: 1.4;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--shadow-elevated);
     text-transform: none;
 }
 
@@ -1309,7 +1309,7 @@ input:checked + .toggle-slider:before {
 /* Dark theme adjustments for tooltip - Fully opaque */
 [data-theme="dark"] .info-icon[data-tooltip]::after {
     background: rgba(40, 40, 40, 0.95);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    box-shadow: var(--shadow-dark-lg);
 }
 
 /* Extra Folder Paths - Single input layout */
@@ -1361,7 +1361,7 @@ input:checked + .toggle-slider:before {
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all 0.2s;
+    transition: var(--transition-base);
     flex-shrink: 0;
 }
 

static/css/components/modal/support-modal.css

@@ -100,7 +100,7 @@
     border-radius: var(--border-radius-sm);
     text-decoration: none;
     color: var(--text-color);
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
 }
 
 .social-link:hover {
@@ -120,14 +120,14 @@
     border-radius: var(--border-radius-sm);
     text-decoration: none;
     font-weight: 500;
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
     margin-top: var(--space-1);
 }
 
 .kofi-button:hover {
     background: #E04946;
     transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-md);
 }
 
 /* Patreon button style */
@@ -142,14 +142,14 @@
     border-radius: var(--border-radius-sm);
     text-decoration: none;
     font-weight: 500;
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
     margin-top: var(--space-1);
 }
 
 .patreon-button:hover {
     background: #E04946;
     transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-md);
 }
 
 /* QR Code section styles */
@@ -189,7 +189,7 @@
     max-width: 80%;
     height: auto;
     border-radius: var(--border-radius-sm);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-md);
     border: 1px solid var(--lora-border);
     aspect-ratio: 1/1; /* Ensure proper aspect ratio for the square QR code */
 }
@@ -212,7 +212,7 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
 }
 
 .support-toggle:hover {
@@ -261,7 +261,7 @@
 .update-link:hover,
 .folder-item:hover {
     border-color: var(--lora-accent);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-md);
 }
 
 /* Supporters Section Styles */
@@ -347,14 +347,14 @@
     border: 1px solid var(--border-color);
     border-left: 3px solid var(--lora-accent);
     border-radius: var(--border-radius-sm);
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
     cursor: default;
 }
 
 .supporter-special-card:hover {
     border-color: var(--lora-accent);
     border-left-color: var(--lora-accent);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-header);
     transform: translateX(4px);
 }
 
@@ -439,7 +439,7 @@
     font-size: 0.95em;
     color: var(--text-color);
     opacity: 0.85;
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
     white-space: nowrap;
     cursor: default;
 }

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

@@ -160,7 +160,7 @@
     border-radius: var(--border-radius-sm);
     text-decoration: none;
     color: var(--text-color);
-    transition: all 0.2s ease;
+    transition: var(--transition-base);
 }
 
 .update-link:hover {