feat(brand): adopt official Kode brand guidelines

- Brand palette: purple #6B35A7 (primary), #000000 (ink), #FFFFFF, #F5F4F0 (canvas)
- Typography: Manrope (UI, 200-800) + Opificio Bold (wordmark/display); drop Inter
- design.md: add wordmarkSecondary token, new display scale (Opificio 72/80)
- foundations: refresh swatches and typography README to match guidelines
- assets/fonts: replace Inter folder with Manrope; add Opificio cuts (Bold/Rounded/Regular)
- fonts.css: register Manrope variable + Opificio cuts; keep Roboto Mono for code only
- examples/web: render the kode wordmark lockup on the off-white canvas
- brand-guidelines: real specs (lockup, palette, typography, logo variant rules)
- README: add brand-at-a-glance, bump version to beta

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

examples/web/styles.css

@@ -1,6 +1,9 @@
 :root {
-  --color-brand-primary: #0B5FFF;
-  --color-brand-primary-hover: #0848C2;
+  --color-brand-primary: #6B35A7;
+  --color-brand-primary-hover: #582A8D;
+  --color-brand-primary-pressed: #45216E;
+  --color-brand-ink: #000000;
+  --color-brand-canvas: #F5F4F0;
   --color-text-default: #111827;
   --color-surface-bg: #FFFFFF;
   --radius-md: 8px;
@@ -10,14 +13,32 @@
 
 body {
   margin: 0;
-  font-family: "Inter", system-ui, sans-serif;
+  font-family: "Manrope", system-ui, sans-serif;
   color: var(--color-text-default);
-  background: var(--color-surface-bg);
+  background: var(--color-brand-canvas);
 }
 
 .container { max-width: 1200px; margin: 0 auto; padding: var(--space-5); }
-.display   { font-size: 48px; font-weight: 700; line-height: 56px; letter-spacing: -0.02em; }
-.body      { font-size: 16px; line-height: 24px; }
+
+.wordmark {
+  font-family: "Opificio", "Manrope", system-ui, sans-serif;
+  font-weight: 700;
+  font-size: 72px;
+  line-height: 80px;
+  letter-spacing: -0.01em;
+  color: var(--color-brand-primary);
+  margin: 0;
+}
+.wordmark-sub {
+  font-family: "Manrope", system-ui, sans-serif;
+  font-weight: 200;
+  font-size: 20px;
+  letter-spacing: 0.04em;
+  color: var(--color-brand-primary);
+  margin: 0 0 24px;
+}
+
+.body { font-size: 16px; line-height: 24px; }
 
 .btn-primary {
   background: var(--color-brand-primary);
@@ -26,6 +47,8 @@ body {
   border-radius: var(--radius-md);
   padding: 12px 20px;
   font: inherit;
+  font-weight: 600;
   cursor: pointer;
 }
-.btn-primary:hover { background: var(--color-brand-primary-hover); }
+.btn-primary:hover  { background: var(--color-brand-primary-hover); }
+.btn-primary:active { background: var(--color-brand-primary-pressed); }