style: Add CSS variable fallbacks for better browser compatibility

Following LogRocket CSS best practices:
- Added fallback values to 150+ CSS variable usages across 22 files
- Fallbacks use light theme defaults for consistent behavior
- Improves compatibility with older browsers
- Example: var(--text-primary) → var(--text-primary, #1a1a1a)

Variables with fallbacks:
- Colors: text-primary, text-secondary, text-muted, accent-blue, etc.
- Backgrounds: page-bg, paper-bg, action-bar-bg, sidebar-bg
- Shadows: shadow-sm, shadow-md, shadow-lg
- Borders: border-color, border-light, icon-border

CSS Variables Best Practices compliance: 6/7 recommendations now followed

static/css/04-interactive/_toggles.css

@@ -47,7 +47,7 @@
 }
 
 .toggle-switch input[type="checkbox"]:checked + .toggle-slider {
-    background-color: var(--accent-blue);
+    background-color: var(--accent-blue, #0066cc);
 }
 
 .toggle-switch input[type="checkbox"]:checked + .toggle-slider::after {
@@ -113,7 +113,7 @@
 .award-item {
     margin-bottom: 2.5rem;
     padding-bottom: 2rem;
-    border-bottom: 2px solid var(--icon-border);
+    border-bottom: 2px solid var(--icon-border, #ddd);
     page-break-inside: avoid;
     display: flex;
     gap: 1.2rem;
@@ -149,7 +149,7 @@
     height: 80px;
     object-fit: contain;
     border-radius: 4px;
-    border: 1px solid var(--icon-border);
+    border: 1px solid var(--icon-border, #ddd);
     background: transparent;
     padding: 10px;
 }
@@ -164,7 +164,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 4px;
-    border: 1px solid var(--icon-border);
+    border: 1px solid var(--icon-border, #ddd);
     background: transparent;
     color: #999;
     padding: 10px;