Frutiger Aero theme, pixel-measured contrast fixes, sheet surfaces

Frutiger Aero (Settings -> Theme): a third theme, not a dark/light variant.
A sky gradient with a strip of grass, the glacier blobs become clouds, the
orbs soap bubbles, glass gets the classic horizon gloss and the buttons a
glossy aqua. The light/dark toggles (header, rail, chat header) hide while it
is on and the picker says why; the pre-paint script applies the class before
first paint and the PWA status bar follows (#3fa3e0). Its muted/frost text is
darker than Light's because those labels sit directly on the sky.

Contrast, measured on real pixels (tests/contrast.mjs, now covering aero):
- The light settings sheet was translucent over a dark scrim, so its muted
  text measured ~2.8:1. Sheets and dialogs now use --glass-sheet-bg (a more
  opaque surface), and Light's --text-muted is a touch darker.
- Result: 0 below-minimum findings and 0 axe violations across every screen,
  all three themes, phone and desktop.

Also: the suites now seed the cookie notice as already dismissed (they run as
a returning user); the regression suite opts out to test the notice itself —
the previous deploy failed its gate because the notice blocked a chat chip
click. The notice also hides during immersive sessions (overlay-open), so it
can never cover a study feed.

Version 0.1.8, SW -> freezmo-v54.

components/ThemeToggle.tsx

@@ -9,14 +9,18 @@ import { MoonIcon, SunIcon } from "@/components/icons";
 
 const STORAGE_KEY = "freezmo.theme";
 
-const THEME_COLORS = { light: "#f4f7fd", dark: "#0e1424" } as const;
+const THEME_COLORS = { light: "#f4f7fd", dark: "#0e1424", aero: "#3fa3e0" } as const;
+
+/** The three themes. Aero is not a dark/light variant: it replaces the palette
+ *  and the scene, and the light/dark toggles hide while it is on. */
+export type Theme = "light" | "dark" | "aero";
 
 /**
  * Keeps the first `theme-color` meta (the one the app owns) in step with the
  * in-app theme. The SSR metas follow the OS preference; this one always wins
  * because it is media-less and first in the head.
  */
-export function syncThemeColor(theme: "light" | "dark") {
+export function syncThemeColor(theme: Theme) {
   try {
     let meta = document.querySelector<HTMLMetaElement>('meta[name="theme-color"][data-app]');
     if (!meta) {
@@ -31,8 +35,9 @@ export function syncThemeColor(theme: "light" | "dark") {
   }
 }
 
-export function applyTheme(next: "light" | "dark") {
+export function applyTheme(next: Theme) {
   document.documentElement.classList.toggle("dark", next === "dark");
+  document.documentElement.classList.toggle("aero", next === "aero");
   syncThemeColor(next);
   try {
     window.localStorage.setItem(STORAGE_KEY, next);
@@ -42,23 +47,33 @@ export function applyTheme(next: "light" | "dark") {
 }
 
 export function useTheme() {
-  const [theme, setTheme] = useState<"light" | "dark">("light");
+  const [theme, setTheme] = useState<Theme>("light");
 
   useEffect(() => {
     const stored = window.localStorage.getItem(STORAGE_KEY);
-    const isDark = stored
-      ? stored === "dark"
-      : window.matchMedia("(prefers-color-scheme: dark)").matches;
-    setTheme(isDark ? "dark" : "light");
-    syncThemeColor(isDark ? "dark" : "light");
+    const next: Theme =
+      stored === "dark" || stored === "aero"
+        ? stored
+        : stored === "light"
+          ? "light"
+          : window.matchMedia("(prefers-color-scheme: dark)").matches
+            ? "dark"
+            : "light";
+    setTheme(next);
+    syncThemeColor(next);
   }, []);
 
-  const apply = (next: "light" | "dark") => {
+  const apply = (next: Theme) => {
     setTheme(next);
     applyTheme(next);
   };
 
-  return { theme, toggle: () => apply(theme === "dark" ? "light" : "dark") };
+  return {
+    theme,
+    setTheme: apply,
+    /** The light/dark flip; aero is chosen in Settings. */
+    toggle: () => apply(theme === "dark" ? "light" : "dark"),
+  };
 }
 
 export function ThemeToggle({ className, plain = false }: { className?: string; plain?: boolean }) {
@@ -66,6 +81,9 @@ export function ThemeToggle({ className, plain = false }: { className?: string;
   const { t } = useI18n();
   const dark = theme === "dark";
 
+  // Frutiger Aero has no light/dark switch (see the theme picker in Settings).
+  if (theme === "aero") return null;
+
   return (
     <button
       type="button"