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.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>

src/main/resources/templates/admin/catalogue.html

@@ -126,7 +126,7 @@
             <div class="flex flex-wrap gap-3">
               <figure th:each="photo, p : ${item.photos}" class="w-28">
                 <img th:src="${photo.url}" alt="" loading="lazy"
-                     class="w-28 h-28 rounded-md object-cover border border-bakery-200 bg-bakery-100">
+                     class="w-28 h-28 rounded-field object-cover border border-bakery-200 bg-bakery-100">
                 <figcaption class="mt-1 flex items-center justify-between gap-1">
                   <div class="flex gap-1">
                     <button type="submit" name="do" th:value="|photo:${photo.key}:-1|" formnovalidate class="btn-icon"

src/main/resources/templates/admin/layout.html

@@ -43,10 +43,10 @@
 
     <!--/* One place for the outcome of the last edit, whichever page posted it. */-->
     <div th:if="${problem}" role="alert"
-         class="mt-6 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800"
+         class="mt-6 rounded-field border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800"
          th:text="${problem}">Something did not save.</div>
     <div th:if="${done}" role="status"
-         class="mt-6 rounded-md border border-bakery-200 bg-white px-4 py-3 text-sm text-bakery-800"
+         class="mt-6 rounded-field border border-bakery-200 bg-white px-4 py-3 text-sm text-bakery-800"
          th:text="${done}">Saved.</div>
 
     <div class="mt-6 space-y-6">

src/main/resources/templates/contact.html

@@ -38,17 +38,17 @@
         <div class="mb-4">
           <label class="block text-sm font-medium text-bakery-800 mb-2" for="name">Name</label>
           <input type="text" id="name" name="name" th:value="${name}" required
-                 class="w-full px-4 py-2.5 bg-bakery-50 border border-bakery-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-bakery-500 focus:border-bakery-500">
+                 class="w-full px-4 py-2.5 bg-bakery-50 border border-bakery-200 rounded-field focus:outline-none focus:ring-2 focus:ring-bakery-500 focus:border-bakery-500">
         </div>
         <div class="mb-4">
           <label class="block text-sm font-medium text-bakery-800 mb-2" for="email">Email</label>
           <input type="email" id="email" name="email" th:value="${email}" required
-                 class="w-full px-4 py-2.5 bg-bakery-50 border border-bakery-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-bakery-500 focus:border-bakery-500">
+                 class="w-full px-4 py-2.5 bg-bakery-50 border border-bakery-200 rounded-field focus:outline-none focus:ring-2 focus:ring-bakery-500 focus:border-bakery-500">
         </div>
         <div class="mb-4">
           <label class="block text-sm font-medium text-bakery-800 mb-2" for="message">Message</label>
           <textarea id="message" name="message" rows="5" required th:text="${message}"
-                    class="w-full px-4 py-2.5 bg-bakery-50 border border-bakery-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-bakery-500 focus:border-bakery-500"></textarea>
+                    class="w-full px-4 py-2.5 bg-bakery-50 border border-bakery-200 rounded-field focus:outline-none focus:ring-2 focus:ring-bakery-500 focus:border-bakery-500"></textarea>
         </div>
         <div class="flex flex-col items-center gap-4">
           <button type="submit"
@@ -81,7 +81,7 @@
           <div class="mt-4 text-bakery-800"
                th:replace="~{fragments/visit :: address('hover:text-bakery-600 underline underline-offset-4')}"></div>
         </div>
-        <div class="rounded-3xl border border-bakery-200 p-6 md:p-8">
+        <div class="rounded-panel border border-bakery-200 p-6 md:p-8">
           <h2 class="h4 text-bakery-900">Ordering for a crowd?</h2>
           <p class="mt-2 text-sm text-bakery-700 leading-relaxed">
             Goodie boxes, party packages and wedding desserts have their own page, with sizes and prices.

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">