feat: add design system, theme toggle, SEO head and base layout

- Huemint Magazine tokens for light/dark themes with AA-safe accent variants
- FOUC-free theme init + toggle (localStorage, follows OS until chosen)
- Seo component (canonical, OG, Twitter, WebSite/Person JSON-LD)
- Header with popover mobile menu, 4-column footer with social links
- Container, GridLines, SectionHeading, Button, Badge, Card, ExternalLink
- site.json / social.json validated with zod
- dev-only /styleguide preview

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/Badge.astro

@@ -0,0 +1,36 @@
+---
+import { Icon } from 'astro-icon/components';
+
+type Variant = 'solid' | 'outline' | 'category';
+
+export interface Props {
+  variant?: Variant;
+  icon?: string;
+  href?: string;
+  class?: string;
+}
+
+const { variant = 'solid', icon, href, class: className } = Astro.props;
+
+const variants: Record<Variant, string> = {
+  // accent-fill (not accent) keeps small text ≥ 4.5:1 in both themes.
+  solid: 'bg-accent-fill text-on-accent-fill font-semibold',
+  outline: 'border border-line text-fg-muted',
+  category:
+    'bg-khaki text-ink font-semibold dark:bg-bg-alt dark:text-fg dark:border dark:border-line',
+};
+const Tag = href ? 'a' : 'span';
+---
+
+<Tag
+  href={href}
+  class:list={[
+    'inline-flex w-fit items-center gap-1 rounded-sm px-2 py-0.5 text-xs leading-5',
+    variants[variant],
+    href && 'hover:underline',
+    className,
+  ]}
+>
+  {icon && <Icon name={icon} class="size-3.5" aria-hidden="true" />}
+  <slot />
+</Tag>