<!DOCTYPE html>
<!--
  md_document_template.html — Reference shape for html_renderer.py output.

  This file documents the canonical output structure. The renderer generates
  this same shape dynamically from a section AST + design-system config.

  Token slots ({{TITLE}}, {{PALETTE}}, etc.) are illustrative — the actual
  renderer interpolates Python values directly into the HTML string.

  See: html_renderer.py for the live implementation.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{TITLE}}</title>

<!-- Google Fonts CDN — the user's heading + body Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{HEADING_FONT}}:wght@400;600&family={{BODY_FONT}}:wght@400;600&display=swap">

<!-- Prism.js CDN — auto-loads per-language plugins on demand -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css">

<style>
:root {
    /* 12 CSS custom properties derived from the user's brand by
       brand_palette_validator.derive_palette() */
    --md-bg: {{BG}};
    --md-surface: {{SURFACE}};
    --md-border: {{BORDER}};
    --md-text: {{TEXT}};
    --md-text-muted: {{TEXT_MUTED}};
    --md-accent: {{ACCENT}};
    --md-accent-soft: {{ACCENT_SOFT}};
    --md-code-bg: {{CODE_BG}};
    --md-link: {{LINK}};
    --md-link-hover: {{LINK_HOVER}};
    --md-success: {{SUCCESS}};
    --md-warn: {{WARN}};
    --md-scale: {{SCALE}};                    /* e.g. 1.25 */
    --md-font-heading: '{{HEADING_FONT}}', system-ui, sans-serif;
    --md-font-body: '{{BODY_FONT}}', system-ui, sans-serif;
}
/* ... BASE_CSS ... STYLE_CSS_OVERRIDES[design_style] ... */
</style>
</head>

<!-- Body class: style-{editorial|technical|minimal|playful} and toc-{behavior} -->
<body class="style-{{DESIGN_STYLE}} toc-{{TOC_BEHAVIOR}}">

<!-- TOC (variants: sidebar / collapsible-top / inline / none) -->
<nav class="toc" aria-label="Table of contents">
    <ol>
        <li><a href="#first-section">First Section</a></li>
        <!-- ... -->
    </ol>
</nav>

<main>
    <!-- Search bar (sticky; hidden when search feature is not injected) -->
    <div class="md-search">
        <input type="search" id="md-search-input"
               placeholder="Filter sections… (Esc to clear)"
               aria-label="Filter document sections">
    </div>

    <!-- Rendered blocks from the section AST -->
    <h1>{{TITLE}}</h1>

    <h2 id="first-section">First Section</h2>
    <p>Paragraph with <strong>bold</strong>, <em>italic</em>, <code>inline code</code>, and <a href="#">link</a>.</p>

    <aside class="callout callout-note" role="note">
        <div class="callout-label"><span class="callout-icon" aria-hidden="true">i</span>NOTE</div>
        <div class="callout-body">Important contextual information.</div>
    </aside>

    <pre><button class="code-copy" type="button" aria-label="Copy code">Copy</button><code class="language-python">def hello():
    return "world"</code></pre>

    <table>
        <thead><tr><th>Header A</th><th>Header B</th></tr></thead>
        <tbody><tr><td>Cell 1</td><td>Cell 2</td></tr></tbody>
    </table>

    <!-- Footer with company_name + logo (base64-embedded) -->
    <footer class="md-footer">
        <img src="data:image/png;base64,...{{LOGO_BASE64}}" alt="{{COMPANY_NAME}}">
        <span>{{COMPANY_NAME}}</span>
        <span style="margin-left:auto">Generated by markdown-html</span>
    </footer>
</main>

<!-- Prism.js (deferred; doesn't block first paint) -->
<script defer src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>

<!-- Interactivity script injected by interactivity_injector.py
     when features are enabled. Marked with id="md-document-interactivity-v1"
     for idempotency. Contains:
       - search filter on H2 sections
       - code-copy button handlers (navigator.clipboard + execCommand fallback)
       - smooth-scroll for TOC anchors
       - scrollspy via IntersectionObserver (sets aria-current on TOC links) -->
</body>
</html>
