fix(ui): align semantic headings contrast and Settings panels

job-tracker-ui/src/admin-system-page.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import '@testing-library/jest-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
 import AdminSystemPage from './views/AdminSystemPage';
@@ -166,6 +167,19 @@ describe('AdminSystemPage', () => {
     jest.clearAllMocks();
   });
 
+  it('uses contextual system headings and keeps metric values out of heading navigation', async () => {
+    render(<I18nProvider><AdminSystemPage /></I18nProvider>);
+    await screen.findByText('Production');
+    expect(screen.getByRole('heading', { name: 'System status', level: 2 })).toBeInTheDocument();
+    expect(screen.queryByRole('heading', { name: 'Production' })).not.toBeInTheDocument();
+    const levels = screen.getAllByRole('heading').map(heading => Number(heading.tagName.slice(1)));
+    let previous = 1;
+    for (const level of levels) {
+      expect(level).toBeLessThanOrEqual(previous + 1);
+      previous = level;
+    }
+  });
+
   it('renders AI service health, latency, and OCR readiness', async () => {
     render(
       <I18nProvider>