frontend/e2e/header.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test';
 import AxeBuilder from '@axe-core/playwright';
 
-// #012851 — brand-navy, defined as --c-primary in layout.css
+// #012851 — brand-navy, set as --c-header in layout.css (both light and dark mode)
 const BRAND_NAVY = 'rgb(1, 40, 81)';
 
 test.describe('Header — brand-navy background', () => {
@@ -94,3 +94,25 @@ test.describe('Login page — AuthHeader', () => {
 		expect(results.violations).toEqual([]);
 	});
 });
+
+test.describe('Forgot-password page — AuthHeader', () => {
+	test.use({ storageState: { cookies: [], origins: [] } });
+
+	test('forgot-password page has brand-navy header', async ({ page }) => {
+		await page.goto('/forgot-password');
+
+		const header = page.locator('header');
+		await expect(header).toBeVisible();
+
+		const bg = await header.evaluate((el) => getComputedStyle(el).backgroundColor);
+		expect(bg).toBe(BRAND_NAVY);
+	});
+
+	test('forgot-password page header passes accessibility audit', async ({ page }) => {
+		await page.goto('/forgot-password');
+		await expect(page.locator('header')).toBeVisible();
+
+		const results = await new AxeBuilder({ page }).include('header').analyze();
+		expect(results.violations).toEqual([]);
+	});
+});

frontend/src/routes/AuthHeader.svelte

@@ -2,7 +2,7 @@
 import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
 </script>
 
-<header class="bg-brand-navy">
+<header class="bg-header">
 	<div class="h-1 bg-accent"></div>
 	<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
 		<div class="flex h-12 items-center justify-between">