feat: add [data-demo] attribute, purge all inline CSS from docs

New data-demo attribute for demo blocks in documentation.
Replaced 16 files worth of inline style="" wrappers with <div data-demo>.
Only remaining style= is charts --size data injection (legitimate).

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

site/content/docs/components/buttons.md

@@ -14,7 +14,7 @@ ai-provider: "Anthropic"
 
 ## Inline Demo
 
-<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;gap:0.75rem;flex-wrap:wrap;align-items:center">
+<div data-demo>
   <button>Primary</button>
   <button data-variant="secondary">Secondary</button>
   <button data-variant="danger">Danger</button>

site/content/docs/components/callouts.md

@@ -14,7 +14,7 @@ Add `data-callout="<type>"` to any block element to style it as a callout. Four
 
 ## Inline Demo
 
-<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;flex-direction:column;gap:1rem">
+<div data-demo>
   <div data-callout="note"><strong>Note</strong> — General information worth highlighting.</div>
   <div data-callout="tip"><strong>Tip</strong> — A helpful suggestion or best practice.</div>
   <div data-callout="warning"><strong>Warning</strong> — Something to watch out for.</div>

site/content/docs/components/dialog.md

@@ -14,7 +14,7 @@ ASW styles the native `<dialog>` element — no JavaScript modal libraries requi
 
 ## Inline Demo
 
-<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+<div data-demo>
   <button onclick="document.getElementById('demo-dialog').showModal()">Open dialog</button>
   <dialog id="demo-dialog">
     <article>

site/content/docs/components/forms.md

@@ -14,8 +14,8 @@ All standard form elements are styled out of the box. Labels, inputs, selects, a
 
 ## Inline Demo
 
-<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+<div data-demo>
-  <form style="display:flex;flex-direction:column;gap:1rem;max-width:28rem" onsubmit="return false">
+  <form onsubmit="return false">
     <label>
       Name
       <input type="text" placeholder="Jane Smith">

site/content/docs/content/blockquotes.md

@@ -14,7 +14,7 @@ ai-provider: "Anthropic"
 
 ## Inline Demo
 
-<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+<div data-demo>
   <blockquote>
     <p>Simplicity is the ultimate sophistication.</p>
     <footer>— Leonardo da Vinci</footer>

site/content/docs/content/figures.md

@@ -14,9 +14,9 @@ ai-provider: "Anthropic"
 
 ## Inline Demo
 
-<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+<div data-demo>
   <figure>
-    <div style="background:var(--surface-2,#f0f0f0);height:120px;display:flex;align-items:center;justify-content:center;border-radius:4px">
+    <div data-text="dim">
       <span data-text="dim">[ image placeholder ]</span>
     </div>
     <figcaption>Figure 1 — ASW renders figcaption below the content with muted styling.</figcaption>

site/content/docs/content/tables.md

@@ -14,7 +14,7 @@ ai-provider: "Anthropic"
 
 ## Inline Demo
 
-<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;overflow-x:auto">
+<div data-demo>
   <table>
     <thead>
       <tr><th>Element</th><th>Role</th><th>Class needed?</th></tr>

site/content/docs/getting-started/getting-started.md

@@ -14,8 +14,8 @@ Drop `asw.css` into your project, add one `<link>` tag, and write semantic HTML.
 
 ## Inline Demo
 
-<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+<div data-demo>
-  <nav style="margin-bottom:1rem">
+  <nav>
     <a href="#">Home</a> ·
     <a href="#">Docs</a> ·
     <a href="#">About</a>

site/content/docs/reference/utilities.md

@@ -14,7 +14,7 @@ ASW provides a small set of utility attributes for inline adjustments. Rather th
 
 ## Inline Demo
 
-<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;flex-direction:column;gap:0.5rem">
+<div data-demo>
   <p><span data-text="mono">data-text="mono"</span> — monospace font</p>
   <p><span data-text="dim">data-text="dim"</span> — reduced opacity / muted</p>
   <p><span data-text="accent">data-text="accent"</span> — accent colour</p>

site/content/docs/reference/vocabulary.md

@@ -14,7 +14,7 @@ Every `data-*` attribute that ASW recognises is listed here. This is the authori
 
 ## Inline Demo
 
-<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;overflow-x:auto">
+<div data-demo>
   <table>
     <thead>
       <tr><th>Attribute</th><th>Values</th><th>Effect</th></tr>

site/content/docs/typography/code.md

@@ -14,7 +14,7 @@ Inline `<code>` uses a monospace font with a subtle background tint. Block-level
 
 ## Inline Demo
 
-<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+<div data-demo>
   <p>Use <code>data-callout="tip"</code> to style a callout block, or <code>data-layout="docs"</code> for a sidebar layout.</p>
   <pre><code>/* Minimal ASW page */
 &lt;!doctype html&gt;

site/content/docs/typography/headings.md

@@ -14,7 +14,7 @@ Headings `h1` through `h6` are sized using a fluid scale derived from the token
 
 ## Inline Demo
 
-<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+<div data-demo>
   <h1>Heading level 1</h1>
   <h2>Heading level 2</h2>
   <h3>Heading level 3</h3>

site/content/docs/typography/prose.md

@@ -14,7 +14,7 @@ ASW sets comfortable line-height, paragraph spacing, and list markers on prose e
 
 ## Inline Demo
 
-<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+<div data-demo>
   <p>This is a body paragraph. ASW uses a fluid font size and generous line-height so long-form text remains comfortable to read on any screen width.</p>
   <ul>
     <li>First item in an unordered list</li>

site/content/docs/vault/status.md

@@ -14,7 +14,7 @@ ai-provider: "Anthropic"
 
 ## Inline Demo
 
-<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;flex-direction:column;gap:0.5rem">
+<div data-demo>
   <p><span data-status="active">active</span> — currently running or in use</p>
   <p><span data-status="sleeping">sleeping</span> — paused or idle</p>
   <p><span data-status="blocked">blocked</span> — waiting on a dependency</p>

site/content/docs/vault/tasks.md

@@ -14,8 +14,8 @@ Add `data-task="<state>"` to a `<li>` element to render it as a task item with a
 
 ## Inline Demo
 
-<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+<div data-demo>
-  <ul style="list-style:none;padding-left:0">
+  <ul>
     <li data-task="done">Write the ASW reset layer</li>
     <li data-task="done">Publish initial token system</li>
     <li data-task="wip">Document all data-* attributes</li>

site/content/docs/vault/wikilinks.md

@@ -14,7 +14,7 @@ ai-provider: "Anthropic"
 
 ## Inline Demo
 
-<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+<div data-demo>
   <p>
     See the <a href="#" data-wikilink>Getting Started</a> page, or cross-reference
     <a href="#" data-wikilink>Core Concepts</a> and <a href="#" data-wikilink>Token System</a>.

src/layers/07-data-attrs.css

@@ -678,4 +678,16 @@ a[data-role="secondary"]:hover {
   gap: var(--space-5);
 }
 
+/* ── Demo block ────────────────────────────────────────────────────── */
+/* Inline demonstration area within docs pages.
+   Usage: <div data-demo>…live HTML example…</div> */
+
+[data-demo] {
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-md);
+  padding: var(--space-5);
+  background: var(--surface-1);
+  margin-block: var(--space-4);
+}
+
 } /* end @layer data-attrs */