Phase 2 and Demo

packages/client/tailwind.config.ts

@@ -1,18 +1,78 @@
 import type { Config } from "tailwindcss";
 
+// ── Storybook Farm brand palette ───────────────────────────────────────────────
+// Derived directly from the organization logo:
+//   Forest green  → "STORYBOOK FARM" text   ≈ #2B5016
+//   Warm gold     → curved motto text        ≈ #C4952A
+
+const green = {
+  50:  "#f1f8ec",
+  100: "#daefd0",
+  200: "#b5dfa1",
+  300: "#8bcb6d",
+  400: "#63b43e",
+  500: "#4a9528",
+  600: "#3a771f",
+  700: "#2b5916",   // ← primary brand green (logo match)
+  800: "#1e3f10",
+  900: "#12270a",
+  950: "#091406",
+};
+
+const gold = {
+  50:  "#fdf8ed",
+  100: "#faeed0",
+  200: "#f4da99",
+  300: "#ecc45e",
+  400: "#e4ae32",
+  500: "#c4952a",   // ← primary brand gold (logo match)
+  600: "#a37820",
+  700: "#815d19",
+  800: "#614513",
+  900: "#422e0e",
+  950: "#221708",
+};
+
 export default {
   content: ["./index.html", "./src/**/*.{ts,tsx}"],
   theme: {
     extend: {
       colors: {
-        brand: {
-          50: "#eff6ff",
-          100: "#dbeafe",
-          500: "#3b82f6",
-          600: "#2563eb",
-          700: "#1d4ed8",
-          900: "#1e3a8a",
-        },
+        brand: green,
+        gold,
+      },
+      fontFamily: {
+        sans: [
+          "Inter",
+          "ui-sans-serif",
+          "system-ui",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Segoe UI",
+          "sans-serif",
+        ],
+      },
+      borderRadius: {
+        "2xl": "1rem",
+        "3xl": "1.5rem",
+      },
+      boxShadow: {
+        card: "0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06)",
+        "card-lg": "0 4px 12px 0 rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06)",
+        "bid-btn": "0 4px 16px 0 rgb(43 89 22 / 0.35)",
+      },
+      screens: {
+        xs: "390px",
+      },
+      keyframes: {
+        "fade-in": { from: { opacity: "0", transform: "translateY(6px)" }, to: { opacity: "1", transform: "translateY(0)" } },
+        "slide-up": { from: { opacity: "0", transform: "translateY(20px)" }, to: { opacity: "1", transform: "translateY(0)" } },
+        "pulse-green": { "0%, 100%": { backgroundColor: "rgb(43 89 22 / 0.1)" }, "50%": { backgroundColor: "rgb(43 89 22 / 0.25)" } },
+      },
+      animation: {
+        "fade-in": "fade-in 0.2s ease-out",
+        "slide-up": "slide-up 0.3s ease-out",
+        "pulse-green": "pulse-green 1.5s ease-in-out infinite",
       },
     },
   },