feat: restructure styles and components for improved design system

- Added typography and design system styles to globals.css.
- Removed deprecated home.css and landing.css files.
- Introduced DiscordSignInButton component for Discord authentication.
- Created Card and CardGrid components for structured content display.
- Implemented ContainerShowcase to demonstrate card usage and layout.
- Added DesignSystemTabs for navigation between design system sections.
- Established typography.css for consistent text styling across components.
- Added tests for typography styles to ensure compliance with design standards.

styles/typography.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+
+const css = (name: string) => readFileSync(new URL(name, import.meta.url), "utf8");
+
+describe("shared typography contract", () => {
+  test("all component and page styles use the fixed shared type utilities", () => {
+    for (const file of ["design-system.css"]) {
+      const source = css(file);
+      expect(source).not.toMatch(/font-size\s*:/);
+      expect(source).not.toMatch(/font:\s*\d/);
+      expect(source).toContain("@apply type-");
+    }
+    const typography = css("typography.css");
+    expect(typography).not.toMatch(/clamp\(|\d(?:vw|vh|px)\b/);
+    expect(typography).toContain("--text-copy: 1rem");
+    expect(typography).toContain("--text-caption: 0.875rem");
+    for (const role of ["body", "small", "label", "lead", "title", "section", "display", "control"]) {
+      expect(typography).toContain(`@utility type-${role}`);
+    }
+  });
+
+  test("text colors meet WCAG AA normal-text contrast on paper", () => {
+    const source = css("design-system.css");
+    const luminance = (token: string) => {
+      let hex = source.match(new RegExp(`--ds-${token}: #([\\da-f]+);`))![1]!;
+      if (hex.length === 3) hex = [...hex].map((c) => c + c).join("");
+      const channels = [0, 2, 4].map((start) => {
+        const value = parseInt(hex.slice(start, start + 2), 16) / 255;
+        return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+      });
+      return channels[0]! * 0.2126 + channels[1]! * 0.7152 + channels[2]! * 0.0722;
+    };
+    for (const color of ["ink", "secondary"]) {
+      expect((luminance("paper") + 0.05) / (luminance(color) + 0.05)).toBeGreaterThanOrEqual(4.5);
+    }
+  });
+});