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>

components/SectionHead.jsx

@@ -0,0 +1,15 @@
+/** Título de seção: rótulo curto + título + frase de apoio, alinhado à esquerda. */
+export default function SectionHead({ id, eyebrow, title, lede, children }) {
+	return (
+		<div className="flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
+			<div className="max-w-2xl">
+				{eyebrow && <p className="eyebrow">{eyebrow}</p>}
+				<h2 id={id} className={`section-title ${eyebrow ? "mt-3" : ""}`}>
+					{title}
+				</h2>
+				{lede && <p className="mt-3 text-base leading-relaxed text-muted">{lede}</p>}
+			</div>
+			{children && <div className="shrink-0">{children}</div>}
+		</div>
+	);
+}