<%
  card    = "rounded-lg border border-secondary bg-container p-3 space-y-1.5"
  label   = "text-xs font-medium text-primary"
  meta    = "text-xs text-secondary font-mono"
  swatch  = "h-12 w-full rounded-md border border-secondary"
%>
<div class="bg-surface min-h-screen p-6 space-y-6">
  <header>
    <h2 class="text-2xl font-semibold text-primary">Surfaces &amp; backgrounds</h2>
    <p class="text-sm text-secondary"><code class="font-mono">bg-*</code> utilities. Light/dark values shown when defined.</p>
  </header>

  <div class="grid gap-3 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
    <% utilities.each do |u| %>
      <div class="<%= card %>">
        <div class="<%= swatch %> <%= u[:name] %>"></div>
        <p class="<%= label %>"><%= u[:name] %></p>
        <% if u[:compose] %>
          <p class="<%= meta %> truncate">@apply <%= u[:compose].join(" ") %></p>
        <% else %>
          <p class="<%= meta %> truncate"><%= u[:light_resolved] || u[:light_value] %></p>
          <% if u[:dark_value] %>
            <p class="<%= meta %> truncate text-subdued">dark: <%= u[:dark_resolved] || u[:dark_value] %></p>
          <% end %>
        <% end %>
      </div>
    <% end %>
  </div>
</div>
