{{define "styleguide-head"}}
<style>
    .sg-section { padding: 3rem 0; border-top: 1px solid var(--border); }
    .sg-title   { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--subtle); margin-bottom: 1.5rem; }
    .swatch     { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
    .swatch-box { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.1); }
    .swatch-name{ font-family: var(--font-mono); font-size: 0.8rem; color: var(--text); }
    .swatch-val { font-family: var(--font-mono); font-size: 0.75rem; color: var(--subtle); }
</style>
{{end}}

{{define "styleguide"}}
<div class="container" style="padding-top:80px">
    <div style="padding: 5rem 0 2rem">
        <p class="label accent mb-3">Design System</p>
        <h1>clavitor Styleguide</h1>
        <p class="lead mt-4">Single source of truth. One stylesheet: <code style="font-family:var(--font-mono);color:var(--accent)">clavitor.css</code>. No inline styles in HTML.</p>
    </div>

    <!-- COLORS -->
    <div class="sg-section">
        <p class="sg-title">Colors</p>
        <div class="grid-3">
            <div>
                <p class="label mb-4">Backgrounds</p>
                <div class="swatch"><div class="swatch-box" style="background:var(--bg)"></div><div><div class="swatch-name">--bg</div><div class="swatch-val">#0A1628</div></div></div>
                <div class="swatch"><div class="swatch-box" style="background:var(--surface)"></div><div><div class="swatch-name">--surface</div><div class="swatch-val">#0d1627</div></div></div>
                <div class="swatch"><div class="swatch-box" style="background:var(--surface-alt)"></div><div><div class="swatch-name">--surface-alt</div><div class="swatch-val">#0a1a0a</div></div></div>
                <div class="swatch"><div class="swatch-box" style="background:var(--surface-gold)"></div><div><div class="swatch-name">--surface-gold</div><div class="swatch-val">#2a1f00</div></div></div>
            </div>
            <div>
                <p class="label mb-4">Text</p>
                <div class="swatch"><div class="swatch-box" style="background:var(--text)"></div><div><div class="swatch-name">--text</div><div class="swatch-val">#f1f5f9</div></div></div>
                <div class="swatch"><div class="swatch-box" style="background:var(--muted)"></div><div><div class="swatch-name">--muted</div><div class="swatch-val">#94a3b8</div></div></div>
                <div class="swatch"><div class="swatch-box" style="background:var(--subtle)"></div><div><div class="swatch-name">--subtle</div><div class="swatch-val">#64748b</div></div></div>
            </div>
            <div>
                <p class="label mb-4">Accent</p>
                <div class="swatch"><div class="swatch-box" style="background:var(--accent)"></div><div><div class="swatch-name">--accent</div><div class="swatch-val">#22C55E</div></div></div>
                <div class="swatch"><div class="swatch-box" style="background:var(--gold)"></div><div><div class="swatch-name">--gold</div><div class="swatch-val">#D4AF37</div></div></div>
                <div class="swatch"><div class="swatch-box" style="background:var(--red)"></div><div><div class="swatch-name">--red</div><div class="swatch-val">#EF4444</div></div></div>
            </div>
        </div>
    </div>

    <!-- TYPOGRAPHY -->
    <div class="sg-section">
        <p class="sg-title">Typography</p>
        <h1 class="mb-4">h1 — Your vault. Wherever you want it.</h1>
        <h2 class="mb-4">h2 — Sealed fields: jurisdiction irrelevant.</h2>
        <h3 class="mb-4">h3 — Only you. Only in person.</h3>
        <p class="lead mb-4">p.lead — We run it. You own it. Pick your region — your data stays there.</p>
        <p class="mb-4">p — Passwords and private notes are encrypted on your device with a key derived from your fingerprint or hardware token. We store a locked box. No key ever reaches our servers.</p>
        <p class="label mb-2">label (default)</p>
        <p class="label accent mb-2">label.accent</p>
        <p class="label gold mb-2">label.gold</p>
        <p class="label red mb-2">label.red</p>
        <p class="mt-4"><span class="vaultname">clavitor</span> — vaultname in body text</p>
    </div>

    <!-- CARDS -->
    <div class="sg-section">
        <p class="sg-title">Cards</p>
        <div class="grid-3 mb-8">
            <div class="card">
                <p class="label accent mb-3">card (default)</p>
                <h3 class="mb-3">Default surface</h3>
                <p>Use for neutral content. Background is --surface.</p>
            </div>
            <div class="card alt">
                <p class="label accent mb-3">card.alt</p>
                <h3 class="mb-3">Sealed fields</h3>
                <p>Green-tinted surface. Use for sealed layer content.</p>
            </div>
            <div class="card gold">
                <p class="label gold mb-3">card.gold</p>
                <h3 class="mb-3">Zürich, Switzerland</h3>
                <p>Gold-tinted surface. Use exclusively for Zürich/HQ.</p>
            </div>
        </div>
        <div class="grid-3">
            <div class="card red">
                <p class="label red mb-3">card.red</p>
                <h3 class="mb-3">Self-hosted</h3>
                <p>Red-tinted surface. Use for self-hosted / warning contexts.</p>
            </div>
            <div class="card card-hover">
                <p class="label mb-3">card + card-hover</p>
                <h3 class="mb-3">Hover state</h3>
                <p>Hover this card — lifts on hover. Add to any clickable card.</p>
            </div>
        </div>
    </div>

    <!-- BUTTONS -->
    <div class="sg-section">
        <p class="sg-title">Buttons</p>
        <div class="btn-row mb-6">
            <a href="#" class="btn btn-primary">btn-primary</a>
            <a href="#" class="btn btn-ghost">btn-ghost</a>
            <a href="#" class="btn btn-accent">btn-accent</a>
            <a href="#" class="btn btn-gold">btn-gold</a>
            <a href="#" class="btn btn-red">btn-red</a>
        </div>
        <p class="label mb-4">btn-row — flex wrap container for button groups</p>
        <div class="grid-3">
            <a href="#" class="btn btn-accent btn-block">btn-accent btn-block</a>
            <a href="#" class="btn btn-gold btn-block">btn-gold btn-block</a>
            <a href="#" class="btn btn-red btn-block">btn-red btn-block</a>
        </div>
    </div>

    <!-- BADGES -->
    <div class="sg-section">
        <p class="sg-title">Badges</p>
        <div class="btn-row mb-4">
            <span class="badge accent">badge.accent</span>
            <span class="badge gold">badge.gold</span>
            <span class="badge red">badge.red</span>
            <span class="badge recommended">badge.recommended</span>
        </div>
    </div>

    <!-- HERO SPLIT -->
    <div class="sg-section">
        <p class="sg-title">Hero split</p>
        <p class="label mb-4">hero-split — two-column hero with text left, visual right. Use on .container instead of .hero.</p>
        <div class="grid-2">
            <div class="card">
                <p class="label accent mb-2">Left column</p>
                <p>Text, heading, lead paragraph, btn-row.</p>
            </div>
            <div class="card">
                <p class="label accent mb-2">Right column</p>
                <p>SVG diagram or visual. Vertically centered via align-items.</p>
            </div>
        </div>
    </div>

    <!-- CODE BLOCKS -->
    <div class="sg-section">
        <p class="sg-title">Code blocks</p>
        <div class="code-block mb-6">
            <p class="code-label">Terminal</p>
            <div><span class="comment"># comment</span></div>
            <div><span class="prompt">$</span> clavitor</div>
        </div>
        <div class="code-block">
            <p class="code-label">JSON — code-block pre resets margin and sets --muted</p>
            <pre>{
  "mcpServers": {
    "clavitor": {
      "url": "http://localhost:1984/mcp",
      "headers": { "Authorization": "Bearer <span class="prompt">token_here</span>" }
    }
  }
}</pre>
        </div>
    </div>

    <!-- GRID -->
    <div class="sg-section">
        <p class="sg-title">Grid</p>
        <p class="label mb-4">grid-2</p>
        <div class="grid-2 mb-8">
            <div class="card"><p class="label mb-2">col 1</p><p>Always 1fr.</p></div>
            <div class="card"><p class="label mb-2">col 2</p><p>Always 1fr.</p></div>
        </div>
        <p class="label mb-4">grid-3</p>
        <div class="grid-3">
            <div class="card"><p class="label mb-2">col 1</p><p>Always 1fr.</p></div>
            <div class="card"><p class="label mb-2">col 2</p><p>Always 1fr.</p></div>
            <div class="card"><p class="label mb-2">col 3</p><p>Always 1fr.</p></div>
        </div>
    </div>

    <!-- SPACING -->
    <div class="sg-section">
        <p class="sg-title">Spacing scale</p>
        <p class="mb-4">All spacing via utility classes: <code style="font-family:var(--font-mono);color:var(--accent)">.mt-2 .mt-3 .mt-4 .mt-6 .mt-8 .mt-12</code> and matching <code style="font-family:var(--font-mono);color:var(--accent)">.mb-*</code>.</p>
        <p class="label mb-3">Container: max-width 1100px, padding 2rem each side. Used everywhere.</p>
        <p class="label">Section: padding 4rem top/bottom. Separated by hr.divider.</p>
    </div>

    <div style="padding:4rem 0;text-align:center">
        <p class="label">End of styleguide</p>
    </div>
</div>
{{end}}