fix(ui): bind delete-project dialog to theme tokens so paper theme is readable

The confirm dialog painted its panel with `var(--bg-surface, #1e1e2e)`, but
`--bg-surface` is not defined by any stylesheet in the project. Every theme
therefore fell through to the hardcoded dark `#1e1e2e`.

That went unnoticed under the six dark themes, whose `--text` is light and so
still contrasted against the dark panel. The paper theme is the only light
palette: its `--text` is `#1e293b`, which put dark text on the dark panel at
roughly 1.05:1 contrast and made the title and body invisible.

Point the panel at `--bg-elevated` so it tracks the active palette, and give
the title and body explicit `--text` / `--text-secondary` colors instead of
relying on inherited color plus `opacity: 0.7`, which is equally unreliable
over a light surface. Add a `--border` outline so the now-white panel still
reads as a distinct layer above the scrim.

Verified by hand across all seven themes.

opc/plugins/office_ui/frontend_dist/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="data:," />
     <title>OpenOPC Pixel Office</title>
-    <script type="module" crossorigin src="./assets/index-Dw3OK9za.js"></script>
+    <script type="module" crossorigin src="./assets/index-Cdi_JV6w.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/phaser-DFK5Ua9d.js">
     <link rel="stylesheet" crossorigin href="./assets/index-B6-ikSHW.css">
   </head>

opc/plugins/office_ui/frontend_src/components/ProjectSelector.tsx

@@ -87,13 +87,14 @@ export function ProjectSelector({ projects, activeId, onSelect, onCreate, onDele
           background: 'rgba(0,0,0,0.5)',
         }}>
           <div style={{
-            background: 'var(--bg-surface, #1e1e2e)', borderRadius: 12, padding: '24px 32px',
+            background: 'var(--bg-elevated)', borderRadius: 12, padding: '24px 32px',
+            border: '1px solid var(--border)', color: 'var(--text)',
             maxWidth: 400, boxShadow: '0 8px 32px rgba(0,0,0,0.4)', textAlign: 'center',
           }}>
-            <p style={{ margin: '0 0 8px', fontWeight: 600, fontSize: 15 }}>
+            <p style={{ margin: '0 0 8px', fontWeight: 600, fontSize: 15, color: 'var(--text)' }}>
               {t('project.confirmTitle', { name: confirmDelete })}
             </p>
-            <p style={{ margin: '0 0 20px', fontSize: 13, opacity: 0.7 }}>
+            <p style={{ margin: '0 0 20px', fontSize: 13, color: 'var(--text-secondary)' }}>
               {t('project.confirmBody')}
             </p>
             <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>