From 71d10b0749366c70b4032bd8a7c6609dc8924079 Mon Sep 17 00:00:00 2001
From: austin <austin@thebennett.net>
Date: Sun, 26 Jul 2026 18:32:29 -0500
Subject: [PATCH] Corners: 12px, and named once
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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/admin/catalogue.html |  2 +-
 src/main/resources/templates/admin/layout.html    |  4 ++--
 src/main/resources/templates/contact.html         |  8 ++++----
 src/main/resources/templates/home.html            |  2 +-
 src/main/styles/admin.css                         |  8 ++++----
 src/main/styles/components.css                    |  2 +-
 src/main/styles/theme.css                         | 10 ++++++++++
 7 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/main/resources/templates/admin/catalogue.html b/src/main/resources/templates/admin/catalogue.html
index 84f4148..86e3f95 100644
--- a/src/main/resources/templates/admin/catalogue.html
+++ b/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"
diff --git a/src/main/resources/templates/admin/layout.html b/src/main/resources/templates/admin/layout.html
index ec7906f..6bc275f 100644
--- a/src/main/resources/templates/admin/layout.html
+++ b/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">
diff --git a/src/main/resources/templates/contact.html b/src/main/resources/templates/contact.html
index 4cc1612..d56add2 100644
--- a/src/main/resources/templates/contact.html
+++ b/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.
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 4be2917..ce91e41 100644
--- a/src/main/resources/templates/home.html
+++ b/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">
diff --git a/src/main/styles/admin.css b/src/main/styles/admin.css
index 8682d38..b9b178f 100644
--- a/src/main/styles/admin.css
+++ b/src/main/styles/admin.css
@@ -11,7 +11,7 @@
  * on the photo pickers needs.
  */
 @utility btn {
-  @apply inline-flex items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium
+  @apply inline-flex items-center justify-center gap-1.5 rounded-field px-3 py-1.5 text-sm font-medium
          transition-colors;
 }
 
@@ -31,18 +31,18 @@
 
 /* Square, for the arrows and the crosses — a row of these is how anything gets reordered. */
 @utility btn-icon {
-  @apply inline-flex items-center justify-center w-7 h-7 rounded-md border border-bakery-300
+  @apply inline-flex items-center justify-center w-7 h-7 rounded-field border border-bakery-300
          text-bakery-700 hover:bg-bakery-100 transition-colors
          disabled:opacity-30 disabled:cursor-not-allowed;
 }
 
 @utility field {
-  @apply w-full rounded-md border border-bakery-300 bg-white px-3 py-2 text-sm
+  @apply w-full rounded-field border border-bakery-300 bg-white px-3 py-2 text-sm
          focus:border-bakery-500 focus:outline-none focus:ring-1 focus:ring-bakery-500;
 }
 
 @utility card {
-  @apply rounded-lg border border-bakery-200 bg-white p-4 shadow-sm;
+  @apply rounded-panel border border-bakery-200 bg-white p-4 shadow-sm;
 }
 
 @utility card-heading {
diff --git a/src/main/styles/components.css b/src/main/styles/components.css
index 07cf441..713e00c 100644
--- a/src/main/styles/components.css
+++ b/src/main/styles/components.css
@@ -70,7 +70,7 @@
  * `panel-lift` is one you can click, and it rises rather than just darkening.
  */
 @utility panel {
-  @apply bg-white rounded-3xl border border-bakery-200/70;
+  @apply bg-white rounded-panel border border-bakery-200/70;
   box-shadow: var(--shadow-card);
 }
 
diff --git a/src/main/styles/theme.css b/src/main/styles/theme.css
index 257db9d..768c765 100644
--- a/src/main/styles/theme.css
+++ b/src/main/styles/theme.css
@@ -38,6 +38,16 @@
   --color-bakery-800: #37412f;
   --color-bakery-900: #232b1e;
 
+  /*
+   * CORNERS. Two decisions, named, so "how round is a card" is answered once rather than per template.
+   *
+   * A card is 12px. It was 24px (Tailwind's rounded-3xl), which is the roundest thing on the page and
+   * reads as a phone app; a bakery's printed card has a corner you can see. Fields are tighter again, and
+   * buttons stay fully round — the pill is the brand's button shape and always was.
+   */
+  --radius-panel: 0.75rem;
+  --radius-field: 0.5rem;
+
   /*
    * Shadows tinted with the darkest sage rather than black. A neutral grey shadow on a cream page reads
    * as a UI panel floating over a screen; a warm one reads as card stock lying on a counter, which is