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/Button.astro

@@ -0,0 +1,41 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import { Icon } from 'astro-icon/components';
+
+type Variant = 'primary' | 'secondary' | 'link';
+
+export interface Props extends HTMLAttributes<'a'> {
+  href?: string;
+  variant?: Variant;
+  icon?: string;
+  type?: 'button' | 'submit';
+}
+
+const { href, variant = 'primary', icon, type = 'button', class: className, ...rest } = Astro.props;
+
+// Primary uses ink on red at ≥19px bold (large text, ratio 4.46 ≥ 3).
+const variants: Record<Variant, string> = {
+  primary:
+    'bg-accent text-on-accent px-6 py-3 text-[1.1875rem] font-bold rounded-[2px] hover:bg-fg hover:text-bg',
+  secondary:
+    'bg-fg text-bg px-6 py-3 text-[1.1875rem] font-bold rounded-[2px] hover:bg-accent hover:text-on-accent',
+  link: 'link-strong text-lg',
+};
+const classes = [
+  'font-display inline-flex items-center gap-2 transition-colors',
+  variants[variant],
+  className,
+];
+---
+
+{href ? (
+  <a href={href} class:list={classes} {...rest}>
+    <slot />
+    {icon && <Icon name={icon} class="size-5" aria-hidden="true" />}
+  </a>
+) : (
+  <button type={type} class:list={[classes, 'cursor-pointer']}>
+    <slot />
+    {icon && <Icon name={icon} class="size-5" aria-hidden="true" />}
+  </button>
+)}