A design pass: the type ladder from the logo, and one name per thing

TYPOGRAPHY, taken from the lockup and walked down to something you can read a paragraph in. "The Vine" in
LeJour Script over COFFEEHOUSE + BAKERY in AdBhashitha is the whole brand voice, so: the script stays in
the wordmark and nowhere else (it is unreadable at length); AdBhashitha carries h1–h4 and the price, and
keeps the wordmark's 0.01em letter-spacing so a heading sits on the same rhythm as the logo above it;
`eyebrow` and `label` are the hinge — sans, but letterspaced like the tagline — and then plain Raleway.
Sizes are declared once in type.css instead of being re-chosen per template, and none of the type classes
set a colour, because the same heading appears in sage on cream and in cream on sage.

BUTTONS AND SURFACES have names now. `panel` is the white box that was "bg-white rounded-3xl shadow-xs"
written out in nine places (which is how two of them end up with different corners); `panel-lift` is one
that reacts. `pill` is one shape in four colourways, which exist because this site puts buttons on cream
AND on sage and they cannot be the same colour on both. `chip`/`chip-on` are the products filter.

RHYTHM: `section` (py-16 md:py-24) and `band` (py-14 md:py-20, tighter because a coloured strip is already
doing the separating) replace nine hand-picked paddings.

FOCUS: one visible ring for everything reachable by keyboard, as an outline rather than a shadow so it
works on cream, on white and on the sage bands, at zero specificity so a utility can still win.

Z-INDEX: written down in base.css, all two of it — 40 the sticky header, 30 the mobile panel, which is a
child of the header and so can only ever sit under the bar. Everything else stacks in document order. The
point of the comment is that a third layer doesn't get invented at 9999.

DROPDOWNS: the admin's category selects were drawing the platform's own arrow in the platform's grey; they
get the site's chevron and room for it.

53 tests green. Every class used across all nine pages — five public, four admin — resolves in the
compiled stylesheet, so nothing here is styled by a name that doesn't exist.

src/main/styles/components.css

@@ -58,3 +58,67 @@ summary {
 summary::-webkit-details-marker {
   display: none;
 }
+
+/*
+ * SURFACES. Every white box on the site was "bg-white rounded-3xl shadow-xs" written out again, which is
+ * how two of them end up with different corners. `panel` is that box; `panel-lift` is one you can click
+ * or hover, and it lifts.
+ */
+@utility panel {
+  @apply bg-white rounded-3xl shadow-xs;
+}
+
+@utility panel-lift {
+  @apply panel transition duration-300 hover:shadow-lg;
+}
+
+/*
+ * BUTTONS. One shape — a full pill, generous, letterspaced — in four colourways, because the site puts
+ * buttons on cream and on sage and they cannot be the same colour on both.
+ *
+ *   pill-sage    filled, on a light background      pill-outline  quiet, on a light background
+ *   pill-cream   filled, on a sage background       pill-ghost    quiet, on a sage background
+ */
+@utility pill {
+  @apply inline-flex items-center justify-center gap-2 rounded-full
+         px-8 py-3.5 font-medium tracking-wide transition-colors;
+}
+
+@utility pill-sage {
+  @apply pill bg-bakery-600 text-white hover:bg-bakery-700;
+}
+
+@utility pill-cream {
+  @apply pill bg-bakery-50 text-bakery-900 hover:bg-white shadow-lg;
+}
+
+@utility pill-outline {
+  @apply pill border border-bakery-300 text-bakery-800 hover:bg-bakery-100;
+}
+
+@utility pill-ghost {
+  @apply pill border border-bakery-200/60 text-bakery-50 hover:bg-bakery-50/10;
+}
+
+/* Smaller, for a filter row rather than a call to action. */
+@utility chip {
+  @apply inline-flex items-center rounded-full border px-6 py-2 label
+         bg-white border-bakery-300 text-bakery-700 transition-colors hover:bg-bakery-100;
+}
+
+@utility chip-on {
+  @apply chip bg-bakery-600 border-bakery-600 text-white hover:bg-bakery-600;
+}
+
+/*
+ * RHYTHM. Two vertical sizes, so the page has a beat instead of nine hand-picked paddings: `section` for
+ * a block of content, `band` for a photographic or coloured strip, which sits tighter because its
+ * background is already doing the separating.
+ */
+@utility section {
+  @apply py-16 md:py-24;
+}
+
+@utility band {
+  @apply py-14 md:py-20;
+}