<%
  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"
%>
<div class="bg-surface min-h-screen p-6 space-y-6">
  <header>
    <h2 class="text-2xl font-semibold text-primary">Borders</h2>
    <p class="text-sm text-secondary"><code class="font-mono">border-*</code> and <code class="font-mono">shadow-border-*</code> utilities. Boxes show the rendered effect.</p>
  </header>

  <div class="grid gap-3 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
    <% utilities.each do |u| %>
      <% is_shadow_border = u[:name].start_with?("shadow-border-") %>
      <div class="<%= card %>">
        <div class="h-12 w-full rounded-md bg-container <%= is_shadow_border ? u[:name] : "border-2 #{u[:name]}" %>"></div>
        <p class="<%= label %>"><%= u[:name] %></p>
        <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 %>
      </div>
    <% end %>
  </div>
</div>
