<h1>Design Tokens</h1>
<p class="description">Token specimens from agent/visual/tokens/.</p>
<p class="context-switch">
  <% for (const c of ['base', 'web', 'product']) { %><a href="?context=<%= c %>" class="badge<%= c === ctx ? ' active' : '' %>"><%= c %></a><% } %>
</p>

<% if (tokens.length === 0) { %>
<p>No token specimens found for the <%= ctx %> context.</p>
<% } else { %>
<table class="data-table">
  <thead><tr><th>Name</th><th>Value</th><th>Type</th><th>Role</th></tr></thead>
  <tbody>
    <% for (const t of tokens) { %>
    <tr>
      <td><code><%= t.name %></code></td>
      <td><%= t.value %></td>
      <td><span class="badge"><%= t.type %></span></td>
      <td><%= t.role || '' %></td>
    </tr>
    <% } %>
  </tbody>
</table>
<% } %>
