Put the report editor chrome on design tokens

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/components/ReportEditor/a4/A4Canvas.css

@@ -3,8 +3,8 @@
 .a4-canvas-container {
   flex: 1;
   overflow: auto;
-  background: #8a8a8a;
-  padding: 24px;
+  background: var(--desk);
+  padding: var(--space-6);
   display: flex;
   justify-content: center;
   align-items: flex-start;
@@ -102,8 +102,8 @@
 /* Rubber-band selection rectangle */
 .a4-selection-rectangle {
   position: absolute;
-  border: 1px dashed #667eea;
-  background: rgba(102, 126, 234, 0.12);
+  border: 1px dashed var(--accent);
+  background: var(--accent-soft);
   pointer-events: none;
   z-index: 15;
 }
@@ -126,13 +126,13 @@
 
 .a4-preview-page-break {
   width: 100%;
-  padding: 6px 0 14px;
+  padding: var(--space-1-5) 0 var(--space-4);
   text-align: center;
-  font-family: system-ui, sans-serif;
-  font-size: 11px;
-  color: #e8e8e8;
-  border-top: 1px dashed rgba(255, 255, 255, 0.4);
-  margin-top: 14px;
+  font-family: var(--font-sans);
+  font-size: var(--fs-xs);
+  color: var(--desk-text);
+  border-top: 1px dashed color-mix(in srgb, var(--desk-text) 40%, transparent);
+  margin-top: var(--space-4);
 }
 
 .a4-preview-el {