Say when to use each token on the showcase's foundation pages, and name both skills in the README

The paragraphs restate the material-3 guideline's rules beside the tokens they
govern (plan step 28); the README's AI agents section names the second guideline
and skill (step 30).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/showcase/sections/elevation.blade.php

@@ -5,6 +5,10 @@
         Five shadow levels as <code>shadow-elevation-*</code>, for what floats over content.
     </p>
 
+    <p class="max-w-3xl type-body-md text-on-surface-variant" data-test="when-to-use">
+        Panels separate by tone first: the <code>surface-container</code> steps are a hierarchy of emphasis, not of height. Shadows are for what floats or lifts — 1 for elevated cards, buttons and modal sheets; 2 for menus, the navigation bar and a scrolled app bar; 3 for the FAB, dialogs, pickers and search; one level more on hover; nothing rests above 3. Fewer shadows carry more meaning.
+    </p>
+
     <div class="grid grid-cols-2 gap-6 rounded-corner-lg bg-surface-container-low p-6 medium:grid-cols-5">
         @foreach (['shadow-elevation-1', 'shadow-elevation-2', 'shadow-elevation-3', 'shadow-elevation-4', 'shadow-elevation-5'] as $shadow)
             <div @class(['flex h-24 items-center justify-center rounded-corner-md bg-surface-container-high', $shadow])>