Visual identity: Field Almanac — Fraunces+DM Sans, OKLCH cream/leaf/clay palette, paper texture, hand-drawn stage icons, draft auto-save, stage progress dots

app/globals.css

@@ -1,84 +1,172 @@
 @import "tailwindcss";
 
 /* ─────────────────────────────────────────────────────────────────────────
- * Theme — Food Co-op Initiative palette
+ * Theme — "Field Almanac"
  *
- * "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.
+ * Inspiration: 1970s ecological-movement print, agricultural cooperative
+ * publications, hand-bound field journals. Warm cream paper, deep
+ * botanical green ink, sparing terracotta accent for emphasis.
  *
- * "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.
+ * The palette is built in OKLCH for perceptual uniformity. Every neutral
+ * is tinted toward the leaf hue (h≈130) so cream and green feel like they
+ * came from the same press run.
  * ─────────────────────────────────────────────────────────────────────── */
 
 @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;
+  /* Typography */
+  --font-display: var(--font-display), ui-serif, Georgia, "Times New Roman", serif;
+  --font-body: var(--font-body), ui-sans-serif, system-ui, -apple-system, sans-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;
+  /* Custom utility names */
+  --color-paper: oklch(97.5% 0.012 95);          /* warm cream */
+  --color-paper-2: oklch(95.5% 0.018 90);        /* deeper cream — section bands */
+  --color-ink: oklch(20% 0.02 130);              /* near-black, slight green tint */
+  --color-ink-soft: oklch(35% 0.018 130);
+  --color-ink-mute: oklch(55% 0.014 120);
+  --color-rule: oklch(82% 0.025 100);            /* hairline rules — like ink on cream */
+  --color-rule-soft: oklch(89% 0.02 100);
 
-  --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;
+  /* Botanical green — primary */
+  --color-leaf-50: oklch(97% 0.025 135);
+  --color-leaf-100: oklch(93% 0.05 135);
+  --color-leaf-200: oklch(87% 0.085 135);
+  --color-leaf-300: oklch(78% 0.115 135);
+  --color-leaf-400: oklch(68% 0.13 135);
+  --color-leaf-500: oklch(57% 0.135 135);
+  --color-leaf-600: oklch(47% 0.13 135);
+  --color-leaf-700: oklch(38% 0.115 135);
+  --color-leaf-800: oklch(30% 0.09 135);
+  --color-leaf-900: oklch(22% 0.06 135);
+
+  /* Terracotta — accent. Used sparingly: current-stage marker, key CTAs. */
+  --color-clay-100: oklch(94% 0.04 50);
+  --color-clay-200: oklch(86% 0.075 50);
+  --color-clay-400: oklch(70% 0.13 45);
+  --color-clay-500: oklch(63% 0.15 42);
+  --color-clay-600: oklch(54% 0.155 40);
+  --color-clay-700: oklch(45% 0.135 38);
+
+  /* Stone — kept as a familiar alias mapping to our warm neutrals so any
+   * earlier `text-stone-*` / `border-stone-*` references stay readable. */
+  --color-stone-50: var(--color-paper);
+  --color-stone-100: var(--color-paper-2);
+  --color-stone-200: var(--color-rule-soft);
+  --color-stone-300: var(--color-rule);
+  --color-stone-400: oklch(70% 0.018 110);
+  --color-stone-500: var(--color-ink-mute);
+  --color-stone-600: oklch(48% 0.015 120);
+  --color-stone-700: var(--color-ink-soft);
+  --color-stone-800: oklch(28% 0.018 130);
+  --color-stone-900: var(--color-ink);
 }
 
-/* Base / reset */
+/* Base — paper texture and ink defaults */
 :root {
   color-scheme: light;
-  --background: var(--color-stone-50);
-  --foreground: var(--color-stone-900);
 }
 
 html {
   -webkit-text-size-adjust: 100%;
+  font-feature-settings: "kern", "liga", "calt", "ss01";
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
+  background-color: var(--color-paper);
+  color: var(--color-ink);
+  /* Subtle paper grain — two diagonal repeating linear gradients combined
+   * with a soft radial overlay. No external image. Survives dark mode if
+   * we ever add one. */
+  background-image:
+    radial-gradient(ellipse 90% 60% at 50% 0%, oklch(99% 0.01 95 / 0.7), transparent 60%),
+    repeating-linear-gradient(
+      105deg,
+      oklch(96% 0.02 95 / 0.4) 0,
+      oklch(96% 0.02 95 / 0.4) 1px,
+      transparent 1px,
+      transparent 6px
+    ),
+    repeating-linear-gradient(
+      15deg,
+      oklch(94% 0.02 95 / 0.25) 0,
+      oklch(94% 0.02 95 / 0.25) 1px,
+      transparent 1px,
+      transparent 9px
+    );
 }
 
-/* Larger, more readable form controls on small screens */
-input,
-select,
-textarea,
-button {
+/* Typography defaults */
+.font-display { font-family: var(--font-display); font-feature-settings: "ss01", "cv01"; }
+.font-body { font-family: var(--font-body); }
+
+/* Long-form headings get optical-size tuning for richer letterforms */
+h1.font-display, h2.font-display, h3.font-display {
+  font-variation-settings: "opsz" 144, "SOFT" 50;
+  letter-spacing: -0.015em;
+}
+
+/* Forms: shared input rhythm */
+input, select, textarea, button {
   font: inherit;
 }
 
-/* Ensure focus is always perceptible (in addition to Tailwind's ring) */
+/* A more deliberate focus ring — uses the leaf token */
 *:focus-visible {
-  outline: 2px solid transparent;
+  outline: 2px solid var(--color-leaf-500);
   outline-offset: 2px;
+  border-radius: 4px;
 }
 
-/* Make Chrome's date input chevron less garish */
+/* Date input chevron styled to match */
 input[type="date"]::-webkit-calendar-picker-indicator {
-  opacity: 0.6;
+  opacity: 0.5;
   cursor: pointer;
+  filter: hue-rotate(70deg);
 }
 
-/* Prevent layout shift when the sticky submit bar appears */
-@media (min-width: 640px) {
-  main {
-    padding-bottom: 5rem;
+/* Print: lay it out like a real field-journal page when a user hits Cmd+P */
+@media print {
+  body { background: white; color: black; }
+  body { background-image: none; }
+  details { display: block !important; }
+  details > div[role="region"] { display: block !important; }
+  .no-print { display: none !important; }
+}
+
+/* Reduced motion: defer to user preference */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
   }
 }
+
+/* A small cohort of utility classes — rule lines, rough underlines, etc. */
+.rule-soft {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--color-rule) 12%,
+    var(--color-rule) 88%,
+    transparent 100%
+  );
+}
+
+/* Ink-bloom focus — used on text inputs to feel handwritten */
+.input-ink {
+  background-image: linear-gradient(
+    to top,
+    var(--color-leaf-200) 0%,
+    var(--color-leaf-200) 1px,
+    transparent 1px,
+    transparent 100%
+  );
+  background-size: 0% 100%;
+  background-repeat: no-repeat;
+  background-position: 0 100%;
+  transition: background-size 280ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.input-ink:focus {
+  background-size: 100% 100%;
+}