Frontend improvements: CSS foundations, accessibility, UX enhancements

CSS: Add design token variables (spacing, timing, weights, z-index layers),
migrate all hardcoded z-index to named vars, fix light theme contrast for
WCAG AA, add skeleton loading cards, mask-composite fallback, card padding.

Accessibility: aria-live on toast, aria-label on health dots, sr-only class,
graph container keyboard focusable, MQTT password wrapped in form element.

UX: Modal auto-focus on open, inline field validation with blur, undo toast
with countdown, bulk action progress indicator, API error toast on failure.

i18n: Add common.undo, validation.required, bulk.processing, api.error.*
keys in EN/RU/ZH.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

server/src/wled_controller/static/css/base.css

@@ -12,11 +12,47 @@
     --warning-color: #ff9800;
     --info-color: #2196F3;
     --font-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
+
+    /* Spacing scale */
+    --space-xs: 4px;
+    --space-sm: 8px;
+    --space-md: 12px;
+    --space-lg: 20px;
+    --space-xl: 40px;
+
+    /* Border radius */
     --radius: 8px;
     --radius-sm: 4px;
     --radius-md: 8px;
     --radius-lg: 12px;
     --radius-pill: 100px;
+
+    /* Animation timing */
+    --duration-fast: 0.15s;
+    --duration-normal: 0.25s;
+    --duration-slow: 0.4s;
+    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    /* Font weights */
+    --weight-normal: 400;
+    --weight-medium: 500;
+    --weight-semibold: 600;
+    --weight-bold: 700;
+
+    /* Z-index layers */
+    --z-card-elevated: 10;
+    --z-sticky: 100;
+    --z-dropdown: 200;
+    --z-bulk-toolbar: 1000;
+    --z-modal: 2000;
+    --z-log-overlay: 2100;
+    --z-confirm: 2500;
+    --z-command-palette: 3000;
+    --z-toast: 3000;
+    --z-overlay-spinner: 9999;
+    --z-lightbox: 10000;
+    --z-connection: 10000;
 }
 
 /* ── SVG icon base ── */
@@ -59,8 +95,8 @@
     --card-bg: #ffffff;
     --text-color: #333333;
     --text-primary: #333333;
-    --text-secondary: #666;
-    --text-muted: #999;
+    --text-secondary: #595959;
+    --text-muted: #767676;
     --border-color: #e0e0e0;
     --display-badge-bg: rgba(255, 255, 255, 0.85);
     --primary-text-color: #3d8b40;
@@ -186,7 +222,7 @@ body,
 .dashboard-target,
 .perf-chart-card,
 header {
-    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+    transition: background-color var(--duration-normal) ease, color var(--duration-normal) ease, border-color var(--duration-normal) ease;
 }
 
 /* ── Respect reduced motion preference ── */