Put the report editor chrome on design tokens

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

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

@@ -4,7 +4,7 @@
 .a4-page-setup-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--backdrop);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -12,55 +12,55 @@
 }
 
 .a4-page-setup {
-  background: #fff;
+  background: var(--surface);
   border-radius: 8px;
   width: 340px;
   max-height: 85vh;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-overlay);
 }
 
 .a4-page-setup-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 18px;
-  border-bottom: 1px solid #e0e0e0;
+  padding: var(--space-4) var(--space-5);
+  border-bottom: 1px solid var(--border);
 }
 
 .a4-page-setup-header h2 {
   margin: 0;
-  font-size: 16px;
-  color: #333;
+  font-size: var(--fs-lg);
+  color: var(--text);
 }
 
 .a4-page-setup-close {
   border: none;
   background: none;
-  font-size: 22px;
+  font-size: var(--fs-2xl);
   line-height: 1;
-  color: #888;
+  color: var(--text-muted);
   cursor: pointer;
 }
 
 .a4-page-setup-close:hover {
-  color: #333;
+  color: var(--text);
 }
 
 .a4-page-setup-body {
-  padding: 8px 18px 18px;
+  padding: var(--space-2) var(--space-5) var(--space-5);
   overflow-y: auto;
 }
 
 .a4-page-setup-dims,
 .a4-page-setup-hint {
-  font-size: 11px;
-  color: #888;
-  margin-top: 6px;
+  font-size: var(--fs-xs);
+  color: var(--text-muted);
+  margin-top: var(--space-1-5);
   line-height: 1.4;
 }
 
 .a4-page-setup-dims {
-  color: #667eea;
+  color: var(--accent);
 }