{
  "theme": "light",
  "archetype": "Organic & Earthy",
  "typography": {
    "fonts_to_install": [
      "@fontsource/playfair-display",
      "@fontsource/outfit"
    ],
    "headings": {
      "font_family": "Playfair Display, serif",
      "style_notes": "Use for all H1, H2, H3. Apply tracking-tight. Do not use bold unless necessary, prefer font-medium or font-semibold for a more elegant, editorial look.",
      "sizes": {
        "h1": "text-5xl sm:text-6xl+",
        "h2": "text-4xl sm:text-5xl",
        "h3": "text-2xl sm:text-3xl"
      }
    },
    "body": {
      "font_family": "Outfit, sans-serif",
      "style_notes": "Clean, friendly sans-serif. Highly readable. Use leading-relaxed.",
      "sizes": {
        "base": "text-base md:text-lg",
        "small": "text-sm"
      }
    }
  },
  "colors": {
    "backgrounds": {
      "primary": "#FAFAF7",
      "secondary": "#F4F0EA",
      "overlay": "rgba(250, 250, 247, 0.8)"
    },
    "surfaces": {
      "card": "#FFFFFF",
      "card_subtle": "#F9F6F0"
    },
    "text": {
      "primary": "#2C2420",
      "secondary": "#594E46",
      "muted": "#8A7E76"
    },
    "brand_accents": {
      "primary": "#9A3B30",
      "primary_hover": "#7A2E25",
      "secondary": "#D88D3B",
      "whatsapp": "#25D366"
    },
    "borders": {
      "subtle": "#E8E2D9",
      "medium": "#D6CFC4"
    }
  },
  "layout_and_spacing": {
    "philosophy": "Generous Spacing Philosophy. Use 2-3x more spacing than typical designs. Use p-8, p-12, py-24, py-32 for sections.",
    "border_radius": "Soft and friendly. Use rounded-2xl or rounded-3xl for cards and images. Avoid sharp corners.",
    "shadows": "Very subtle, diffuse warm shadows. e.g., shadow-[0_8px_30px_rgba(44,36,32,0.04)]",
    "grid_strategy": "Asymmetrical and organic. Use bento layouts for the product gallery. Don't make everything a perfect square. Use tall and wide spanning items."
  },
  "ui_components": {
    "buttons": {
      "primary": "bg-[#9A3B30] text-white hover:bg-[#7A2E25] rounded-full px-8 py-4 font-sans font-medium transition-transform active:scale-95",
      "whatsapp": "bg-[#25D366] text-white hover:bg-[#1EBE5D] rounded-full px-8 py-4 font-sans font-medium flex items-center gap-2",
      "instagram": "bg-gradient-to-tr from-[#f9ce34] via-[#ee2a7b] to-[#6228d7] text-white rounded-full px-8 py-4 font-sans font-medium flex items-center gap-2 hover:opacity-90 transition-opacity"
    },
    "inputs": {
      "style": "bg-white border-[#E8E2D9] rounded-xl focus:ring-[#D88D3B] focus:border-[#D88D3B] text-[#2C2420] placeholder:text-[#8A7E76] p-4 font-sans"
    },
    "cards": {
      "style": "bg-white rounded-3xl border border-[#E8E2D9] overflow-hidden"
    }
  },
  "media_urls": {
    "hero_background": {
      "url": "https://static.prod-images.emergentagent.com/jobs/486401a8-16d0-4487-9d50-5e819bd9da58/images/bed792246aa47905f53e7671ab354a7594511c8ace134cb326230ff60627a865.png",
      "description": "Warm rustic kitchen with flour and vintage rolling pin. Use as the hero section background. IMPORTANT: Apply a gradient overlay (e.g. from-[#FAFAF7] to-transparent or black/30) so text is readable."
    },
    "ai_estimator_background": {
      "url": "https://static.prod-images.emergentagent.com/jobs/486401a8-16d0-4487-9d50-5e819bd9da58/images/2df9a7c7e7a655924c492a5946758c099f87e7d74f26f649fafd4d0c1c3ab801.png",
      "description": "Vintage scale and recipe card. Use this as a decorative image next to or behind the AI Estimator form. If behind, use glassmorphism (backdrop-blur-xl bg-white/70) for the form container."
    },
    "products": [
      {
        "name": "Cake Tape",
        "url": "https://customer-assets.emergentagent.com/job_486401a8-16d0-4487-9d50-5e819bd9da58/artifacts/g0714jbe_Cake%20tape.jpeg"
      },
      {
        "name": "Pudding Coklat",
        "url": "https://customer-assets.emergentagent.com/job_486401a8-16d0-4487-9d50-5e819bd9da58/artifacts/5qymobbo_Poeding%20coklat.jpeg"
      },
      {
        "name": "Macaroni Schotel",
        "url": "https://customer-assets.emergentagent.com/job_486401a8-16d0-4487-9d50-5e819bd9da58/artifacts/areixq4g_Macaroni%20Schotel.jpeg"
      },
      {
        "name": "Pastel",
        "url": "https://customer-assets.emergentagent.com/job_486401a8-16d0-4487-9d50-5e819bd9da58/artifacts/z5fn6psc_Pastel.jpeg"
      },
      {
        "name": "Brownies",
        "url": "https://customer-assets.emergentagent.com/job_486401a8-16d0-4487-9d50-5e819bd9da58/artifacts/wrg598if_Brownies.jpeg"
      }
    ]
  },
  "sections": [
    {
      "name": "Header/Nav",
      "instructions": "Sticky header with glassmorphism (backdrop-blur-xl bg-[#FAFAF7]/80). Logo on left (Text: ASEAN BAKERY). Nav links on right, plus a primary 'Preorder' CTA button. Must have border-b border-[#E8E2D9]."
    },
    {
      "name": "Hero",
      "instructions": "Use 'hero_background' as background image with object-cover. Add a gradient overlay so the text is fully readable (Contrast > 4.5:1). H1: 'Homemade Goodness, Delivered to You.' Subtitle mentioning Colorado, COD, and Preorder. Two buttons: 'View Menu' and 'Estimate Price'."
    },
    {
      "name": "How It Works",
      "instructions": "4 simple steps: 1. Pick your favorite. 2. Preorder via WA/IG. 3. We bake it fresh. 4. Delivered & Pay on Delivery. Use large elegant serif numerals (1, 2, 3, 4) in the primary accent color. Horizontal layout on desktop, stack on mobile."
    },
    {
      "name": "Product Gallery",
      "instructions": "Showcase the 5 product images provided in 'media_urls'. Use an asymmetric bento grid. Let the images fill their containers with rounded-3xl borders. Add product name elegantly below or on hover. Ensure images don't exceed 80vh on mobile."
    },
    {
      "name": "AI Price Estimator",
      "instructions": "A visually delightful section. Left side: The form. Right side: The 'ai_estimator_background' image, or vice versa. Form fields: Cake Type (select), Size/Servings (select), Flavor/Extras (input). Button: 'Estimate Price'. Upon clicking, simulate an AI response showing a price range in USD for Colorado (e.g., '$25 - $40'). The form must NOT look like a generic SaaS form; use soft borders, padding, and warm colors."
    },
    {
      "name": "Call to Action (Preorder)",
      "instructions": "Big bold section. 'Ready to taste the warmth?'. Two massive buttons for WhatsApp and Instagram. Floating WA/IG buttons in the bottom right of the screen are also required."
    },
    {
      "name": "FAQ / Trust",
      "instructions": "Accordion or simple grid. Address: Homemade freshness, COD policy, Lead time for preorders, Colorado service area."
    },
    {
      "name": "Footer",
      "instructions": "Warm dark background (e.g., #2C2420) with cream text. Brand name, contact details (+1 303 994-7268), Colorado area mention, simple links."
    }
  ],
  "technical_requirements": {
    "icons": "Use lucide-react for UI icons (Chevron, Menu). Use react-icons (FaWhatsapp, FaInstagram) for brand icons. Install 'react-icons'.",
    "animations": "Use framer-motion for simple, elegant fade-ins and slide-ups as the user scrolls. Do not over-animate; keep it subtle and organic.",
    "testing": "All interactive elements MUST have data-testid attributes (e.g., data-testid='whatsapp-preorder-button').",
    "components": "Use Shadcn components for Select, Input, Accordion, but customize them heavily using Tailwind to match the 'Organic & Earthy' theme (no default slate colors, no sharp borders)."
  }
}