Define the missing --color-surface token; modals were transparent

.modal (and three other rules) referenced --color-surface without a
fallback, but the token was never defined — the background declaration
was silently dropped and every modal panel rendered see-through over
the page. Define the token in tokens.css (white, matching the #fff
fallbacks other rules already carried) and pin the vault-import
dialog's opaque background in the e2e pack.

Fixes #120

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fb2VzvcoBPHkjh8bZ6PzQn

apps/web/e2e/import-vault.spec.ts

@@ -63,6 +63,9 @@ test('a pond admin imports an Obsidian vault through the settings dialog', async
   await page.locator('.vault-import__open').click();
   const dialog = page.locator('.vault-import-dialog');
   await expect(dialog).toBeVisible();
+  // #120: the panel must be opaque — --color-surface was undefined and the
+  // whole .modal background silently dropped, letting the page bleed through.
+  await expect(dialog).toHaveCSS('background-color', 'rgb(255, 255, 255)');
 
   await dialog.locator('input[type="file"]').setInputFiles({
     name: 'vault.zip',

apps/web/src/styles/tokens.css

@@ -17,6 +17,10 @@
   --color-text-muted: #616e7c;
   --color-bg: #ffffff;
   --color-bg-subtle: #f5f7fa;
+  /* Elevated panels (modals, cards) — several rules already referenced this
+   * token with a #fff fallback; the fallback-less ones dropped their
+   * background entirely (#120). */
+  --color-surface: #ffffff;
   --color-border: #d9e2ec;
   --color-accent: #2f6f4f;
   --color-accent-contrast: #ffffff;