3p1idvga1: Add dark and light design tokens with a persisted pre-paint theme

src/app/layout.tsx

@@ -1,7 +1,9 @@
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
 import { Roboto } from "next/font/google";
+import { DEFAULT_THEME, THEME_SCRIPT } from "@/lib/theme";
 import "./globals.css";
+import "../styles/legacy.css";
 
 const roboto = Roboto({ subsets: ["latin"], weight: ["400", "500", "700"] });
 
@@ -12,7 +14,11 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" className={roboto.className}>
+    <html lang="en" className={roboto.className} data-theme={DEFAULT_THEME} suppressHydrationWarning>
+      <head>
+        {/* Applies the stored theme before first paint (ADR 0001, section 5). */}
+        <script dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} />
+      </head>
       <body>{children}</body>
     </html>
   );