feat(marca): atualiza logo, ícones, manifest e Open Graph para a identidade atual (#3)

- Logo em duas cores (teal + cobre), inline no cabeçalho e rodapé para
  seguir o tema do site; SVGs estáticos com prefers-color-scheme.
- scripts/generate-favicons.mjs passa a gerar favicons, ícones de app
  (maskable), site.webmanifest e a imagem Open Graph 1200x630.
- Manifest com fundo/tema obsidiana e lang pt-BR.


Claude-Session: https://claude.ai/code/session_016W1xmizFcmXLrmabSvfSuc

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

components/Footer.jsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import Logo from "@/components/Logo";
 import { ArrowUpRight } from "lucide-react";
 import { SITE } from "@/lib/seo";
 
@@ -41,8 +42,7 @@ export default function Footer() {
 				<div className="grid gap-12 lg:grid-cols-[1.1fr_2fr]">
 					<div>
 						<Link href="/" className="inline-flex min-h-11 items-center gap-2.5" aria-label="ESPDocs, página inicial">
-							{/* eslint-disable-next-line @next/next/no-img-element */}
-							<img src="/marca/espdocs-marca.svg" alt="" aria-hidden="true" width={28} height={28} className="h-7 w-7" />
+							<Logo className="h-7 w-7" />
 							<span className="font-display text-2xl font-semibold tracking-[-0.045em] text-ink">ESPDocs</span>
 						</Link>
 						<p className="mt-5 max-w-sm text-sm leading-relaxed text-muted">

components/Header.jsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import Link from "next/link";
+import Logo from "@/components/Logo";
 import { usePathname } from "next/navigation";
 import { useTheme } from "next-themes";
 import {
@@ -121,15 +122,7 @@ export default function Header() {
 			<div className="shell">
 				<div className="nav-pill flex h-16 items-center justify-between gap-3 rounded-full px-3 sm:px-4">
 					<Link href="/" className="flex min-h-11 shrink-0 items-center gap-2.5 rounded-full pl-1 pr-2" aria-label="ESPDocs, página inicial">
-						{/* eslint-disable-next-line @next/next/no-img-element */}
-						<img
-							src="/marca/espdocs-marca.svg"
-							alt=""
-							aria-hidden="true"
-							width={30}
-							height={30}
-							className="h-[30px] w-[30px]"
-						/>
+						<Logo className="h-[30px] w-[30px]" />
 						<span className="font-display text-[1.3rem] font-semibold leading-none tracking-[-0.045em] text-ink">ESPDocs</span>
 					</Link>
 

components/Logo.jsx

@@ -0,0 +1,32 @@
+/**
+ * Marca do ESPDocs: o encapsulamento do chip com pinos à esquerda; os pinos e
+ * o corpo viram linhas de texto, a documentação. Inline para seguir o tema do
+ * site (--accent e --copper trocam entre claro e escuro, ao contrário de uma
+ * imagem externa, que só enxerga a preferência do sistema).
+ */
+export default function Logo({ className = "h-8 w-8", title }) {
+	return (
+		<svg
+			viewBox="0 0 64 64"
+			className={className}
+			fill="none"
+			strokeLinecap="round"
+			role={title ? "img" : undefined}
+			aria-label={title}
+			aria-hidden={title ? undefined : "true"}
+		>
+			{title && <title>{title}</title>}
+			<g stroke="var(--accent)" strokeWidth="3.4">
+				<path d="M2 21h7" />
+				<path d="M2 32h7" />
+				<path d="M2 43h7" />
+			</g>
+			<rect x="9.25" y="9.25" width="45.5" height="45.5" rx="13" stroke="var(--accent)" strokeWidth="4.5" />
+			<g stroke="var(--copper)" strokeWidth="4.5">
+				<path d="M19 21h26" />
+				<path d="M19 32h21" />
+				<path d="M19 43h15" />
+			</g>
+		</svg>
+	);
+}