Build standalone CiviCRM check-in middleware

app/globals.css

@@ -1,26 +1,84 @@
 @import "tailwindcss";
 
+/* ─────────────────────────────────────────────────────────────────────────
+ * Theme — Food Co-op Initiative palette
+ *
+ * "leaf" is the primary green. Inspired by the warm, grassroots-organic
+ * feel of fci.coop: not corporate teal, not jewel-toned. A balanced
+ * field-green that sits comfortably alongside warm cream/stone neutrals.
+ *
+ * "stone" is the neutral ramp — slightly warm, never icy.
+ *
+ * Both are built as Tailwind 4 color tokens, so utility classes like
+ * `bg-leaf-700`, `text-stone-600` work everywhere.
+ * ─────────────────────────────────────────────────────────────────────── */
+
+@theme {
+  --font-sans: var(--font-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-serif: var(--font-serif), ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+
+  --color-leaf-50: #f3f8f0;
+  --color-leaf-100: #e3eed9;
+  --color-leaf-200: #c8dcb3;
+  --color-leaf-300: #a3c280;
+  --color-leaf-400: #7ea455;
+  --color-leaf-500: #5e8638;
+  --color-leaf-600: #4a6c2a;
+  --color-leaf-700: #3a5520;
+  --color-leaf-800: #2c401a;
+  --color-leaf-900: #1f2d12;
+
+  --color-stone-50: #fafaf7;
+  --color-stone-100: #f3f2ed;
+  --color-stone-200: #e7e4dc;
+  --color-stone-300: #d4cfc1;
+  --color-stone-400: #aaa494;
+  --color-stone-500: #807a6a;
+  --color-stone-600: #5b574b;
+  --color-stone-700: #403d35;
+  --color-stone-800: #2a2823;
+  --color-stone-900: #1a1815;
+}
+
+/* Base / reset */
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  color-scheme: light;
+  --background: var(--color-stone-50);
+  --foreground: var(--color-stone-900);
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+html {
+  -webkit-text-size-adjust: 100%;
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+}
+
+/* Larger, more readable form controls on small screens */
+input,
+select,
+textarea,
+button {
+  font: inherit;
+}
+
+/* Ensure focus is always perceptible (in addition to Tailwind's ring) */
+*:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+/* Make Chrome's date input chevron less garish */
+input[type="date"]::-webkit-calendar-picker-indicator {
+  opacity: 0.6;
+  cursor: pointer;
+}
+
+/* Prevent layout shift when the sticky submit bar appears */
+@media (min-width: 640px) {
+  main {
+    padding-bottom: 5rem;
+  }
 }