Redesign das páginas internas no novo design system (AAA) (#2)

* feat(design): redesign das páginas internas no novo design system

Padroniza todas as páginas e componentes internos nos tokens e primitivos
de app/globals.css, com contraste AAA (7:1) nos dois temas e alvos de toque
de 44px.

- Páginas reescritas: glossário, séries, série, seletor, comparador,
  diagnóstico, catálogo, component registry, frameworks, framework, sobre
  e a nova 404.
- Componentes: PageHero e SectionHead novos; BoardCard, CodeExample,
  PinRestrictions, SeriesTabMenu e ConnectionsDiagram refeitos, com abas
  e diálogo acessíveis.
- Remove emojis, cores avulsas por série, caixa alta com tracking, texto
  menor que 12px e os pares slate-*/dark:*.
- Comparador: "mostrar só as diferenças" e leitura de ?chips=.
- Corrige overflow em 320/390px e ajusta accent/copper do tema claro
  para fechar 7:1.
- scripts/auditar-temas.mjs passa a travar paleta crua, dark:, texto
  pequeno, emoji e contraste dos tokens.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016W1xmizFcmXLrmabSvfSuc

* ci: roda lint, auditorias de design e build em cada PR

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016W1xmizFcmXLrmabSvfSuc

---------

Co-authored-by: Claude Sonnet 5.5 <noreply@anthropic.com>

app/layout.jsx

@@ -1,18 +1,27 @@
-import { Outfit, Inter } from "next/font/google";
+import { JetBrains_Mono, Manrope, Space_Grotesk } from "next/font/google";
 import "./globals.css";
 import Providers from "@/components/Providers";
 import { SITE, jsonLd } from "@/lib/seo";
 
-const outfit = Outfit({
+const spaceGrotesk = Space_Grotesk({
 	subsets: ["latin"],
-	variable: "--font-outfit",
+	variable: "--font-space-grotesk",
 	display: "swap",
+	weight: ["500", "600", "700"],
 });
 
-const inter = Inter({
+const manrope = Manrope({
 	subsets: ["latin"],
-	variable: "--font-inter",
+	variable: "--font-manrope",
 	display: "swap",
+	weight: ["400", "500", "600", "700"],
+});
+
+const jetbrainsMono = JetBrains_Mono({
+	subsets: ["latin"],
+	variable: "--font-jetbrains",
+	display: "swap",
+	weight: ["400", "500", "600"],
 });
 
 export const metadata = {
@@ -93,14 +102,14 @@ export const metadata = {
 
 export const viewport = {
 	themeColor: [
-		{ media: "(prefers-color-scheme: light)", color: "#f8fafc" },
-		{ media: "(prefers-color-scheme: dark)", color: "#020617" },
+		{ media: "(prefers-color-scheme: light)", color: "#f5f6f8" },
+		{ media: "(prefers-color-scheme: dark)", color: "#07090d" },
 	],
 };
 
 export default function RootLayout({ children }) {
 	return (
-		<html lang="pt-BR" className={`${outfit.variable} ${inter.variable}`} suppressHydrationWarning>
+		<html lang="pt-BR" className={`${spaceGrotesk.variable} ${manrope.variable} ${jetbrainsMono.variable}`} suppressHydrationWarning>
 			<head>
 				{/* Dados estruturados do site e da organização. É o que permite ao
 				    Google montar o box de busca interna e entender a autoria. */}
@@ -109,7 +118,13 @@ export default function RootLayout({ children }) {
 					dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd.siteESociedade()) }}
 				/>
 			</head>
-			<body className="font-sans antialiased bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-50" suppressHydrationWarning>
+			<body className="font-sans antialiased bg-canvas text-ink overflow-x-clip" suppressHydrationWarning>
+				<a
+					href="#conteudo"
+					className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[200] focus:rounded-full focus:bg-ink focus:px-5 focus:py-3 focus:text-sm focus:font-semibold focus:text-canvas"
+				>
+					Pular para o conteúdo
+				</a>
 				<Providers>
 					{children}
 				</Providers>