fix(comparator): ensure readable text contrast on passport requirement comparator page

[singhanurag0317-bit]

🐛 Fix: Text color same as background — content invisible on "Passport Requirement Comparator" page

Fixes #1220

Problem

On the Passport Requirement Comparator page, text (title, description, checkbox labels, table headers/rows) could blend into the background and become unreadable. Additionally, the page imported SEOMetadata from a non-existent path (../components/SEOMetadata), which broke the /compare-requirements route chunk entirely.

Root Cause

• The comparator card previously relied on background: var(--card-bg) with inherited text color, so text picked up the page/theme background color instead of a proper foreground color.
• PassportComparatorPage.jsx imported SEOMetadata from the wrong path — the component lives at components/layout/SEOMetadata (as used by NotFoundPage).

Changes

• PassportComparatorPage.jsx: fixed the broken SEOMetadata import path so the page loads.
• PassportRequirementComparator.css: explicit high-contrast text colors in both themes —
  • Light theme text already uses theme tokens; kept and reinforced.
  • Added dark-mode overrides so description, clear button, empty state, table headers, table rows, and preview card texts always render in #f8fafc / #cbd5e1 against the dark card (≥4.5:1 WCAG contrast).
• New PassportComparatorPage.test.jsx (7 tests): verifies the page renders (title, description, checkbox labels, comparison table headers) in light and dark mode, and statically asserts explicit non-inherit foreground colors plus dark-mode contrast overrides exist in the CSS.

Verification

• npx vitest run — 22 files, 92 tests: only the 4 pre-existing unrelated failures remain (AttireSelectorStudio, SnapPassAssistant, printSheetGenerator, useOfflineSync).

[vercel]

@singhanurag0317-bit is attempting to deploy a commit to the souma9830's projects Team on Vercel.

A member of the Team first needs to authorize it.