Corners: 12px, and named once

24px (Tailwind's rounded-3xl) was the roundest thing on the page and read as a phone app. A printed card
has a corner you can see.

Two tokens rather than a find-and-replace, so this is answered once and not per template:
`--radius-panel` (12px) for anything with an edge — cards, photos mounted on them, the admin's boxes — and
`--radius-field` (8px) for inputs, which were three different radii across the public form and the admin.
Buttons stay fully round: the pill is the brand's button shape and always was.

53 tests green, every class on all seven checked pages still resolves.

src/main/resources/templates/home.html

@@ -79,7 +79,7 @@
       <div class="grid md:grid-cols-2 gap-8 md:gap-12 items-center max-w-5xl mx-auto">
         <img th:src="${photos.of('gallery/Sugar Cookies.webp')}" alt="Iced sugar cookies from The Vine"
              width="800" height="600" loading="lazy"
-             class="w-full h-64 md:h-80 object-cover rounded-3xl shadow-xs">
+             class="w-full h-64 md:h-80 object-cover rounded-panel shadow-xs">
         <div>
           <h2 class="h2 text-bakery-900">Ordering for a crowd?</h2>
           <p class="mt-4 text-bakery-800 leading-relaxed">