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.

src/components/design-system/ContainerShowcase.tsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { Card, CardGrid } from "./Card";
+import { Button, Checkbox, Counter, SectionHeading } from "./primitives";
+
+export function ContainerShowcase() {
+  const [water, setWater] = useState(3);
+  const [read, setRead] = useState(false);
+
+  return (
+    <section className="ds-section ds-container-showcase" id="containers" aria-labelledby="containers-title">
+      <SectionHeading number="CONTAINERS & LAYOUT" id="containers-title" title={<>A little structure. <em>Room to breathe.</em></>}>
+        Group related content with a quiet surface. Keep open layouts for long lists and calendars.
+      </SectionHeading>
+
+      <div className="ds-spec-heading ds-spec-heading--spaced">
+        <h3>Two quiet surfaces</h3>
+        <span className="ds-code">Card · soft / outlined</span>
+      </div>
+      <CardGrid>
+        <Card eyebrow="SOFT SURFACE" heading="A gentle grouping.">
+          <p>A neutral fill gathers related content without adding another divider. Use it for summaries, guidance, and a small set of actions.</p>
+        </Card>
+        <Card variant="outlined" eyebrow="OUTLINED SURFACE" heading="A clear boundary.">
+          <p>A fine border defines a standalone group on white. Useful when a form or a focused task needs its own space.</p>
+        </Card>
+      </CardGrid>
+
+      <div className="ds-spec-heading ds-spec-heading--spaced">
+        <h3>A day, arranged simply</h3>
+        <span className="ds-code">CardGrid · bento</span>
+      </div>
+      <CardGrid layout="bento" aria-label="Interactive bento layout example">
+        <Card
+          span="featured"
+          eyebrow="TODAY / YOUR OWN PACE"
+          heading={<>Small things, <em>adding up.</em></>}
+          footer={<p className="ds-muted type-small">Interactive example · nothing is saved</p>}
+        >
+          <div className="ds-card-summary" role="status">
+            <p className="type-display">{Number(water === 8) + Number(read)}<span className="type-title ds-muted"> / 2</span></p>
+            <p>habits complete</p>
+          </div>
+          <p>Make room for a glass of water and a few pages. A little progress belongs here, too.</p>
+        </Card>
+        <Card eyebrow="DAILY / 8 GLASSES" heading="Drink water" variant="outlined">
+          <Counter label="bento glasses of water" value={water} target={8} onChange={setWater} />
+          <p className="type-small" role="status">{water === 8 ? "Complete for today" : `${8 - water} glasses to go`}</p>
+        </Card>
+        <Card eyebrow="A FEW PAGES" heading="Read a little" variant="outlined">
+          <Checkbox label="Reading done" checked={read} onChange={(event) => setRead(event.target.checked)} />
+          <p className="type-small">One page is a place to start.</p>
+        </Card>
+        <Card span="wide" eyebrow="A GENTLE REMINDER" heading="There’s no catching up.">
+          <p>Come back to today. Your next small step is enough.</p>
+        </Card>
+      </CardGrid>
+      <div className="ds-container-guidance">
+        <p className="ds-footnote">Equal grids suit peer items. Bento gives one summary more room; smaller cards hold short tasks. Both collapse in reading order on small screens. Use one surface per group, with spacing inside and no shadows.</p>
+        <Button variant="text" onClick={() => { setWater(3); setRead(false); }}>Reset card examples ↺</Button>
+      </div>
+      <pre className="ds-code ds-container-code"><code>{'<CardGrid layout="bento">\n  <Card heading="Today" span="featured">…</Card>\n  <Card heading="Water" variant="outlined">…</Card>\n  <Card heading="Reading" variant="outlined">…</Card>\n  <Card heading="A reminder" span="wide">…</Card>\n</CardGrid>'}</code></pre>
+    </section>
+  );
+}