create-avocado-site 0.22.0 → 0.24.0

package/dist/templates/demo-app.js

@@ -7,13 +7,13 @@ import { DEMO_SITE_CONFIG_JSON } from "./demo-content.js";
  * It is 300 lines of token values with no interpolation in it, and it has to
  * stay identical to the one `apps/site` wears or the scaffold drifts into a
  * near-miss of the demo. `scripts/sync-demo-seed.mjs` writes it here from
- * `apps/site/app/theme-night-harvest.css`; like the demo assets beside it,
+ * `apps/site/app/theme-meadow.css`; like the demo assets beside it,
  * this file is generated and must not be edited in place.
  *
  * Resolved relative to the package root — two levels up from both
  * `src/templates` and `dist/templates`.
  */
-const THEME_FILE = fileURLToPath(new URL("../../theme/night-harvest.css", import.meta.url));
+const THEME_FILE = fileURLToPath(new URL("../../theme/meadow.css", import.meta.url));
 /*
  * The theme control, on the same terms.
  *
@@ -645,7 +645,7 @@ main {
 }
 function layout(config) {
     return `import type { ReactNode } from "react"
-import { Anton, Archivo } from "next/font/google"
+import { Bricolage_Grotesque, DM_Sans } from "next/font/google"
 import { SiteThemeToggle } from "./theme-toggle"
 import "./globals.css"
 
@@ -655,20 +655,20 @@ import "./globals.css"
  * \`--font-display\` and \`--font-body\` at these variables; without them the
  * whole thing falls back to system sans and reads like a different design.
  *
- * Anton has one cut, so asking it for a bold gets a synthesised one — the
- * display weight token stays at 400.
+ * Both are variable faces; the display weight token is 800, a real cut of
+ * Bricolage Grotesque.
  */
-const anton = Anton({ weight: "400", subsets: ["latin"], display: "swap", variable: "--font-anton" })
-const archivo = Archivo({ weight: ["400", "500"], subsets: ["latin"], display: "swap", variable: "--font-archivo" })
+const bricolage = Bricolage_Grotesque({ subsets: ["latin"], display: "swap", variable: "--font-bricolage" })
+const dmSans = DM_Sans({ subsets: ["latin"], display: "swap", variable: "--font-dmsans" })
 
 /*
  * Runs before first paint so the theme never flashes.
  *
- * The query is \`prefers-color-scheme: light\`, not \`: dark\`: this is a dark
- * theme with a light half, so dark is the fallback and light is the opt-in. A
- * stored value is a pin; no stored value follows the system.
+ * The query is \`prefers-color-scheme: dark\`: this is a light theme with a
+ * dark half, so light is the fallback and dark is the opt-in. A stored value
+ * is a pin; no stored value follows the system.
  */
-const themeScript = \`(function(){try{var t=localStorage.getItem('site-theme-v1');var d=t==='dark'||(t!=='light'&&!matchMedia('(prefers-color-scheme:light)').matches);if(d)document.documentElement.classList.add('dark')}catch(e){document.documentElement.classList.add('dark')}})()\`
+const themeScript = \`(function(){try{var f=window.parent!==window;var t=(f?sessionStorage:localStorage).getItem(f?'site-theme-preview-v1':'site-theme-v1');var d=t==='dark'||(t!=='light'&&matchMedia('(prefers-color-scheme:dark)').matches);if(d)document.documentElement.classList.add('dark')}catch(e){}})()\`
 
 /*
  * Otherwise deliberately minimal. Every page's own <title> and description come
@@ -681,13 +681,13 @@ export default function RootLayout({ children }: { children: ReactNode }) {
     <html
       lang="en"
       suppressHydrationWarning
-      className={\`theme-night-harvest \${anton.variable} \${archivo.variable}\`}
-      style={{ background: "var(--bg-0, #12170f)" }}
+      className={\`theme-meadow \${bricolage.variable} \${dmSans.variable}\`}
+      style={{ background: "var(--bg-0, #fafcf5)" }}
     >
       <head>
         <script dangerouslySetInnerHTML={{ __html: themeScript }} />
       </head>
-      <body style={{ background: "var(--bg-0, #12170f)" }}>
+      <body style={{ background: "var(--bg-0, #fafcf5)" }}>
         {children}
         {/*
           One control, in the header's top-right corner — see the note in

package/dist/versions.d.ts

@@ -17,7 +17,7 @@
  * `@avocadostudio-ai/orchestrator-core`, already pinned there; naming it again
  * here is how a project ends up with two.
  */
-export declare const AVOCADO = "0.22.0";
+export declare const AVOCADO = "0.24.0";
 /**
  * Next 15.5.25 rather than 16, because that is the version every example app
  * and the demo site in this repository build and test against. The SDK

package/dist/versions.js

@@ -17,7 +17,7 @@
  * `@avocadostudio-ai/orchestrator-core`, already pinned there; naming it again
  * here is how a project ends up with two.
  */
-export const AVOCADO = "0.22.0";
+export const AVOCADO = "0.24.0";
 /**
  * Next 15.5.25 rather than 16, because that is the version every example app
  * and the demo site in this repository build and test against. The SDK

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-avocado-site",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "description": "Bootstrap a runnable Avocado Studio demo site, or wire Avocado into an existing Next.js project",
   "type": "module",
   "bin": {
@@ -31,14 +31,14 @@
   },
   "dependencies": {
     "@clack/prompts": "^0.9.1",
-    "@avocadostudio-ai/skills": "^0.22.0"
+    "@avocadostudio-ai/skills": "^0.24.0"
   },
   "devDependencies": {
     "@types/node": "^22.13.10",
     "tsx": "^4.19.0",
     "typescript": "^5.7.3",
-    "@avocadostudio-ai/site-sdk": "0.22.0",
-    "@avocadostudio-ai/shared": "0.22.0"
+    "@avocadostudio-ai/shared": "0.24.0",
+    "@avocadostudio-ai/site-sdk": "0.24.0"
   },
   "license": "Apache-2.0",
   "homepage": "https://docs.avocadostudio.dev",

package/theme/meadow.css

@@ -0,0 +1,225 @@
+/*
+ * Light is the theme, dark is its variant — the other way round from Night
+ * Harvest. `html.theme-meadow` is the primary declaration, and the pre-paint
+ * script in `layout.tsx` and `SiteThemeToggle` add `dark` only when a visitor
+ * pins it or their system prefers dark.
+ *
+ * `--font-bricolage` and `--font-dmsans` are the `next/font` variables that
+ * `layout.tsx` sets on <html>.
+ */
+
+/*
+ * theme-meadow
+ * A fresh green alternative (no red, no blue, minimal yellow) to theme-night-harvest for The Avocado Hub.
+ * Same token contract as theme-night-harvest: only variables that theme already
+ * sets are overridden, so every block (banner, hero, card-grid, stats, two-column,
+ * tabs, video, faq, cta, site-top-nav, site-footer) picks it up without markup changes.
+ *
+ * Activate: <html class="theme-meadow"> (in place of theme-night-harvest).
+ * Fonts: add Bricolage Grotesque + DM Sans via next/font and expose them as
+ * --font-bricolage and --font-dmsans (same pattern as --font-anton / --font-archivo).
+ */
+
+html.theme-meadow {
+  /* Ground and surfaces */
+  --bg-0: #fafcf5;
+  --bg-000: #fafcf5;
+  --bg-1: #ffffff;
+  --bg-100: #ffffff;
+  --bg-200: #e3f2e1;
+  --bg-300: #cfe6cc;
+  --section-bg: #fafcf5;
+  --section-bg-panel: #e3f2e1;
+  --hero-bg: #fafcf5;
+  --surface: #ffffff;
+  --surface-border: #17301c;
+  --stripe-bg: #e3f2e1;
+  --table-header-bg: #e3f2e1;
+  --card-bg: #ffffff;
+  --cta-bg: #1d4e3a;
+  --placeholder-img: #b7d3a8;
+  --media-bg: #17301c;
+
+  /* Text */
+  --heading: #17301c;
+  --body: #243b28;
+  --prose-body: #243b28;
+  --body-secondary: #4e6552;
+  --lead: #4e6552;
+  --caption: #4e6552;
+  --text-100: #17301c;
+  --text-200: #243b28;
+  --text-300: #4e6552;
+  --text-400: #4e6552;
+  --text-500: #4e6552;
+
+  /* Brand, links, accent */
+  --brand: #1e6e3a;
+  --brand-fg: #ffffff;
+  --brand-hover: #17301c;
+  --brand-subtle: rgba(30, 110, 58, 0.10);
+  --link: #1e6e3a;
+  --accent: #9ed36a;
+  --accent-hover: #8cc657;
+  --accent-ink: #1e6e3a;
+  --on-accent: #17301c;
+  --btn-primary-bg: #9ed36a;
+  --btn-primary-fg: #17301c;
+  --quote-mark: #b7d3a8;
+  --quote-mark-opacity: 1;
+
+  /* Inverse band (banner--info, cta-section, section--inverse) */
+  --band: #1d4e3a;
+  --on-band: #b8e986;
+  --on-ink: #b8e986;
+
+  /* Imagery */
+  --on-image: #fafcf5;
+  --on-image-muted: rgba(250, 252, 245, 0.88);
+  --on-image-subtle: #b8e986;
+  --photo-treatment: saturate(1.25) contrast(1.06);
+  --scrim: linear-gradient(to bottom, rgb(23 48 28 / 0.10) 0%, rgb(23 48 28 / 0.45) 55%, rgb(23 48 28 / 0.85) 100%);
+
+  /* Rules and borders */
+  --border: rgba(23, 48, 28, 0.18);
+  --rule: rgba(23, 48, 28, 0.18);
+  --nav-bg: rgba(250, 252, 245, 0.94);
+  --nav-border: #17301c;
+  --code-bg: rgba(30, 110, 58, 0.10);
+  --pre-bg: rgba(30, 110, 58, 0.07);
+
+  /* Footer */
+  --footer-bg: #17301c;
+  --footer-border: rgba(213, 230, 214, 0.2);
+  --footer-heading: #b8e986;
+  --footer-text: #d5e6d6;
+  --footer-link: #d5e6d6;
+  --footer-link-hover: #9ed36a;
+
+  /* Type */
+  --font-display: var(--font-bricolage), "Bricolage Grotesque", Helvetica, sans-serif;
+  --font-heading: var(--font-bricolage), "Bricolage Grotesque", Helvetica, sans-serif;
+  --font-quote: var(--font-bricolage), "Bricolage Grotesque", Helvetica, sans-serif;
+  --font-body: var(--font-dmsans), "DM Sans", Helvetica, sans-serif;
+  --font-label: var(--font-dmsans), "DM Sans", Helvetica, sans-serif;
+  --font-display-weight: 800;
+  --font-display-track: -0.03em;
+  --hero-headline-size: clamp(2.75rem, 6vw, 5.25rem);
+  --hero-headline-leading: 0.95;
+  --hero-headline-width: 12ch;
+  --hero-content-anchor: flex-end;
+  --hero-content-width: 100%;
+  --hero-image-position: 50% 40%;
+  --hero-min-h: min(62vh, 600px);
+
+  /* Shape: pills for actions, soft cards, hard offset "sticker" shadows (unchanged from the first proposal) */
+  --radius: 16px;
+  --radius-btn: 999px;
+  --radius-card: 24px;
+  --radius-feature: 28px;
+  --radius-input: 14px;
+  --radius-dropdown: 16px;
+  --radius-logo: 12px;
+  --card-shadow: 0 0 0 2px #17301c, 6px 6px 0 #17301c;
+  --shadow-btn: 0 0 0 2px #17301c, 3px 3px 0 #17301c;
+  --shadow-float: 0 0 0 2px #17301c, 4px 4px 0 #17301c;
+  --shadow-dropdown: 0 0 0 2px #17301c, 4px 4px 0 #17301c;
+  --shadow-menu: 0 0 0 2px #17301c, 4px 4px 0 #17301c;
+
+  /* Spacing (kept close to night-harvest so block layouts do not shift) */
+  --section-pad-x: 40px;
+  --section-pad-x-sm: 16px;
+  --section-pad-x-tight-sm: 16px;
+  --section-pad-y: 64px;
+  --section-pad-y-cta: 72px;
+  --section-pad-y-hero: 56px;
+  --section-pad-y-hero-sm: 32px;
+  --section-pad-y-sm: 40px;
+  --section-pad-y-tight: 48px;
+  --section-pad-y-tight-sm: 32px;
+
+  /* Status banners */
+  --banner-success-bg: #c9e27a;
+  --banner-success-text: #17301c;
+  --banner-warning-bg: #efd9a0;
+  --banner-warning-text: #17301c;
+}
+
+html.theme-meadow.dark {
+  --bg-0: #0f1d14;
+  --bg-000: #0f1d14;
+  --bg-1: #182a1e;
+  --bg-100: #182a1e;
+  --bg-200: #182a1e;
+  --bg-300: #223829;
+  --section-bg: #0f1d14;
+  --section-bg-panel: #182a1e;
+  --hero-bg: #0f1d14;
+  --surface: #182a1e;
+  --surface-border: #9ed36a;
+  --stripe-bg: #182a1e;
+  --table-header-bg: #182a1e;
+  --card-bg: #182a1e;
+  --cta-bg: #1f4a33;
+  --media-bg: #0f1d14;
+
+  --heading: #eef6ee;
+  --body: #eef6ee;
+  --prose-body: #eef6ee;
+  --body-secondary: #a3b8a6;
+  --lead: #a3b8a6;
+  --caption: #a3b8a6;
+  --text-100: #eef6ee;
+  --text-200: #eef6ee;
+  --text-300: #a3b8a6;
+  --text-400: #a3b8a6;
+  --text-500: #a3b8a6;
+
+  --brand: #8fd17a;
+  --brand-fg: #0f1d14;
+  --brand-hover: #eef6ee;
+  --brand-subtle: rgba(143, 209, 122, 0.14);
+  --link: #8fd17a;
+  --accent: #9ed36a;
+  --accent-hover: #b3e08a;
+  --accent-ink: #9ed36a;
+  --on-accent: #0f1d14;
+  --btn-primary-bg: #9ed36a;
+  --btn-primary-fg: #0f1d14;
+  --quote-mark: #b7d3a8;
+
+  /* The band and the CTA stay a deep green with lime words, as in light.
+     A full lime strip was the loudest thing on a dark page. */
+  --band: #1f4a33;
+  --on-band: #b8e986;
+  --on-ink: #9ed36a;
+
+  --border: rgba(238, 246, 238, 0.2);
+  --rule: rgba(238, 246, 238, 0.2);
+  --nav-bg: rgba(15, 29, 20, 0.94);
+  --nav-border: #9ed36a;
+  --code-bg: rgba(238, 246, 238, 0.12);
+  --pre-bg: rgba(238, 246, 238, 0.08);
+
+  --footer-bg: #0a140e;
+  --footer-border: rgba(238, 246, 238, 0.2);
+  --footer-heading: #9ed36a;
+  --footer-text: #a3b8a6;
+  --footer-link: #a3b8a6;
+  --footer-link-hover: #9ed36a;
+
+  --card-shadow: 0 0 0 2px #9ed36a, 6px 6px 0 #9ed36a;
+  --shadow-btn: 0 0 0 2px #4f7d34, 3px 3px 0 #4f7d34;
+  --shadow-float: 0 0 0 2px #9ed36a, 4px 4px 0 #9ed36a;
+  --shadow-dropdown: 0 0 0 2px #9ed36a, 4px 4px 0 #9ed36a;
+  --shadow-menu: 0 0 0 2px #9ed36a, 4px 4px 0 #9ed36a;
+
+  --banner-success-bg: #182a1e;
+  --banner-success-text: #9ed36a;
+  --banner-warning-bg: #182a1e;
+  --banner-warning-text: #efd9a0;
+  --error-bg: #182a1e;
+  --error-border: rgba(238, 246, 238, 0.2);
+  --error-text: #eef6ee;
+  --error-detail: #a3b8a6;
+}

package/theme/theme-toggle.tsx

@@ -4,6 +4,26 @@ import { useCallback, useEffect, useState } from "react"
 import { createPortal } from "react-dom"
 
 const SITE_THEME_STORAGE_KEY = "site-theme-v1"
+/*
+ * Inside the editor's preview frame the choice lives in sessionStorage under
+ * its own key. It used to live nowhere — deliberately, so an editor session
+ * leaves no pinned preference in the published site's storage — and every
+ * link clicked in the preview loaded a page that had forgotten it: the theme
+ * reset on each navigation. sessionStorage survives the navigation, dies with
+ * the tab, and never touches the site's own key. The pre-paint script in
+ * `layout.tsx` reads the same pair.
+ */
+const PREVIEW_THEME_STORAGE_KEY = "site-theme-preview-v1"
+
+function themeStore(): { storage: Storage; key: string } | null {
+  try {
+    return window.parent !== window
+      ? { storage: window.sessionStorage, key: PREVIEW_THEME_STORAGE_KEY }
+      : { storage: window.localStorage, key: SITE_THEME_STORAGE_KEY }
+  } catch {
+    return null
+  }
+}
 
 type Choice = "system" | "light" | "dark"
 
@@ -18,12 +38,11 @@ const LABEL: Record<Choice, string> = { system: "System", light: "Light", dark:
  * who has never touched the control tracks their OS for as long as the page is
  * open, and one who has chosen keeps their choice across visits.
  *
- * `prefers-color-scheme: light` and not `: dark`. Night Harvest is a dark
- * theme with a light half, so the fallback is dark and light is the opt-in.
- * That is the same way round as the token contract itself, where the light
- * values sit inside a `prefers-color-scheme: light` query and dark is what
- * `:root` says. A browser that expresses no preference gets the theme's
- * primary state rather than its secondary one.
+ * `prefers-color-scheme: dark`. Meadow is a light theme with a dark
+ * half, so the fallback is light and dark is the opt-in — the same way round
+ * as the theme file, whose `html.theme-meadow` block is the light one.
+ * A browser that expresses no preference gets the theme's primary state
+ * rather than its secondary one.
  *
  * It writes the `dark` class on `<html>`, not `data-theme`. The brief asks for
  * the attribute and the attribute would be the nicer contract, but the class
@@ -45,14 +64,17 @@ const THEME_EVENT = "site-theme-change"
 
 export function SiteThemeToggle({ portalTo }: { portalTo?: string } = {}) {
   const [choice, setChoice] = useState<Choice>("system")
-  const [resolved, setResolved] = useState<"light" | "dark">("dark")
+  const [resolved, setResolved] = useState<"light" | "dark">("light")
+  /* Until the stored choice has been read, the class the pre-paint script set
+     is the truth. Applying the initial "light" first flashed a dark page. */
+  const [ready, setReady] = useState(false)
 
   /* Kept identical to the pre-paint script in `layout.tsx`. If the two ever
      disagree the page paints one theme and then visibly switches to the
      other, which is the flash the script exists to prevent. */
   const resolve = useCallback((c: Choice): "light" | "dark" => {
     if (c !== "system") return c
-    return window.matchMedia?.("(prefers-color-scheme: light)").matches ? "light" : "dark"
+    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"
   }, [])
 
   const [host, setHost] = useState<Element | null>(null)
@@ -69,10 +91,17 @@ export function SiteThemeToggle({ portalTo }: { portalTo?: string } = {}) {
   }, [portalTo])
 
   useEffect(() => {
-    const stored = window.localStorage.getItem(SITE_THEME_STORAGE_KEY)
+    const store = themeStore()
+    let stored: string | null = null
+    try {
+      stored = store ? store.storage.getItem(store.key) : null
+    } catch {
+      // Blocked storage reads as "follow the system".
+    }
     const next: Choice = stored === "light" || stored === "dark" ? stored : "system"
     setChoice(next)
     setResolved(resolve(next))
+    setReady(true)
   }, [resolve])
 
   /* Track the OS for as long as the visitor is on "system". Re-subscribing on
@@ -80,7 +109,7 @@ export function SiteThemeToggle({ portalTo }: { portalTo?: string } = {}) {
      back by the OS mid-session. */
   useEffect(() => {
     if (choice !== "system") return
-    const mq = window.matchMedia?.("(prefers-color-scheme: light)")
+    const mq = window.matchMedia?.("(prefers-color-scheme: dark)")
     if (!mq) return
     const onChange = () => setResolved(resolve("system"))
     mq.addEventListener("change", onChange)
@@ -98,6 +127,7 @@ export function SiteThemeToggle({ portalTo }: { portalTo?: string } = {}) {
   }, [resolve])
 
   useEffect(() => {
+    if (!ready) return
     const root = window.document.documentElement
     /*
      * Colour transitions are right for a hover and wrong for a theme change:
@@ -112,24 +142,19 @@ export function SiteThemeToggle({ portalTo }: { portalTo?: string } = {}) {
       window.requestAnimationFrame(() => root.removeAttribute("data-theme-switching"))
     )
     return () => window.cancelAnimationFrame(frame)
-  }, [resolved])
+  }, [resolved, ready])
 
   const handleClick = () => {
     const next = ORDER[(ORDER.indexOf(choice) + 1) % ORDER.length]
     setChoice(next)
     setResolved(resolve(next))
     window.dispatchEvent(new CustomEvent(THEME_EVENT, { detail: next }))
-    /*
-     * Not inside the preview iframe: an editor session should not leave a
-     * pinned preference behind in the published site's own storage.
-     */
-    if (window.parent === window) {
-      try {
-        if (next === "system") window.localStorage.removeItem(SITE_THEME_STORAGE_KEY)
-        else window.localStorage.setItem(SITE_THEME_STORAGE_KEY, next)
-      } catch {
-        // Blocked storage — the class toggle above still applies for this visit.
-      }
+    const store = themeStore()
+    try {
+      if (store && next === "system") store.storage.removeItem(store.key)
+      else if (store) store.storage.setItem(store.key, next)
+    } catch {
+      // Blocked storage — the class toggle above still applies for this visit.
     }
   }
 

package/theme/night-harvest.css

@@ -1,320 +0,0 @@
-/*
- * Theme: Night Harvest
- *
- * Chartreuse on near-black, Anton over Archivo, nothing rounded. A set of
- * values for the tokens the blocks package already reads — there is no Night
- * Harvest code anywhere, and no block knows this file exists.
- *
- * Dark is the theme, not a mode of it. `html.theme-night-harvest.dark` is
- * therefore the primary declaration and the site's pre-paint script leaves the
- * `dark` class on unless a visitor has asked for light. The light half is a
- * genuine inversion rather than a lightening: the band flips from chartreuse
- * on ink to ink on chartreuse, and the accent stops being legible as text, so
- * words in the accent switch to a darker relative of the same hue.
- *
- * ── The three that are easy to get wrong ──
- *
- * `--accent` is a fill and `--accent-ink` is the accent as a word. They are
- * the same value in dark and different in light: #C5E035 on #F2F3EA is about
- * 1.3:1, which is a highlighter, not text. Anything that sets `color` reads
- * `--accent-ink`.
- *
- * `--band` and `--on-band` are the full-bleed strip. The band inverts between
- * themes instead of lightening, so it cannot be derived from the accent.
- *
- * `--bg-100` (the panel) against `--bg-0` (the ground) is roughly 1.1:1 in
- * both themes, and that is the intent. A card is separated by the grid gap.
- * Do not reach for a border or a shadow to make one "visible".
- */
-
-/* ── Light ──────────────────────────────────────────────────────────────── */
-
-html.theme-night-harvest {
-  color-scheme: light;
-
-  /* Ground and panel */
-  --bg-0: #f2f3ea;
-  --bg-000: #f2f3ea;
-  --bg-100: #e4e7d7;
-  --bg-200: #e4e7d7;
-  --bg-300: #d5d9c6;
-  --bg-1: #e4e7d7;
-  --surface: #e4e7d7;
-  --card-bg: #e4e7d7;
-  --section-bg: #f2f3ea;
-  --hero-bg: #f2f3ea;
-  --cta-bg: #e4e7d7;
-  --stripe-bg: #e4e7d7;
-  --table-header-bg: #e4e7d7;
-
-  /* The alternating ground. Panel is the same #E4E7D7 a card sits on, so a
-     panel section and the cards inside it read as one surface. */
-  --section-bg-panel: #e4e7d7;
-
-  /* Ink and muted */
-  --text-100: #14190f;
-  --text-200: #14190f;
-  --text-300: #565c4c;
-  --text-400: #565c4c;
-  --text-500: #565c4c;
-  --heading: #14190f;
-  --body: #14190f;
-  --body-secondary: #565c4c;
-  --caption: #565c4c;
-  --prose-body: #14190f;
-  --lead: #565c4c;
-
-  /*
-   * The accent, in its two jobs. `--brand` is the repo's name for "the colour
-   * a word is set in", so it takes the text-safe value; the fill lives in
-   * `--accent` and reaches the primary button through `--btn-primary-bg`.
-   */
-  --accent: #c5e035;
-  --accent-hover: #c5e035;
-  --accent-ink: #46630d;
-  --on-accent: #14190f;
-  --brand: #46630d;
-  --brand-hover: #14190f;
-  --brand-fg: #14190f;
-  --brand-subtle: rgba(197, 224, 53, 0.22);
-  --link: #46630d;
-  --btn-primary-bg: #c5e035;
-  --btn-primary-fg: #14190f;
-
-  /* The band inverts: ink ground, chartreuse type. */
-  --band: #14190f;
-  --on-band: #c5e035;
-  --on-ink: #c5e035;
-
-  /* Hairlines */
-  --rule: rgba(20, 25, 15, 0.16);
-  --border: rgba(20, 25, 15, 0.16);
-  --surface-border: rgba(20, 25, 15, 0.16);
-  --nav-border: rgba(20, 25, 15, 0.16);
-  --footer-border: rgba(20, 25, 15, 0.16);
-  --code-bg: rgba(20, 25, 15, 0.1);
-  --pre-bg: rgba(20, 25, 15, 0.07);
-
-  /* Chrome */
-  --nav-bg: rgba(242, 243, 234, 0.94);
-
-  /*
-   * The footer is a panel, not a slab of ink.
-   *
-   * It was #14190F — the same value as the inverse band — so on any page
-   * ending in a CTA the band ran straight into the footer and the two read as
-   * one undifferentiated dark block a third of the page tall. The boundary
-   * between "the last thing we are asking you to do" and "the small print"
-   * had disappeared.
-   *
-   * Making it the panel ground fixes it in both directions: in light the ink
-   * band now sits against a pale footer, and in dark the chartreuse band sits
-   * against the same panel. The footer is the same surface as a card in both
-   * themes, which is what it is.
-   */
-  --footer-bg: var(--section-bg-panel);
-  --footer-text: #565c4c;
-  --footer-heading: #14190f;
-  --footer-link: #565c4c;
-  --footer-link-hover: #46630d;
-
-  /*
-   * An image position with no image is a flat accent field, not a grey box.
-   * It is a designed state: on a page whose photography is not all there yet,
-   * a chartreuse panel reads as a decision and a grey one reads as a bug.
-   */
-  --placeholder-img: #c5e035;
-  --media-bg: #14190f;
-
-  /*
-   * The hero as a poster.
-   *
-   * Most of the fold, the headline at display scale set solid, and the type
-   * anchored to the bottom of the frame rather than floating in the middle of
-   * it — which is what separates a poster from a stock hero with words on it.
-   *
-   * The scrim sinks the photograph towards the page's own near-black instead
-   * of neutral black. A warm palette with a neutral scrim over its one
-   * photograph reads as two designs, and the grey is the one you notice.
-   */
-  /*
-   * A duotone, built from filters rather than an asset, so it applies to
-   * whatever photograph the content happens to name. Desaturate, lift the
-   * contrast, drop the exposure, then push the whole thing through the
-   * palette's own hue. The photograph stops being a warm neutral standing
-   * beside chartreuse and becomes the dark end of it.
-   */
-  --photo-treatment: grayscale(1) contrast(1.15) brightness(0.55) sepia(0.55) hue-rotate(35deg) saturate(2.6);
-
-  /* 58vh, not 78. The frame was taking the whole fold for a photograph that is
-     mostly empty wall, which is a lot of screen spent on very little. */
-  /* The fruit sits in the upper half of this photograph, so a centred crop
-     takes the top off it. */
-  --hero-image-position: 50% 18%;
-
-  --hero-min-h: min(58vh, 560px);
-  --hero-headline-size: clamp(2.5rem, 5.2vw, 4.5rem);
-  --hero-headline-leading: 0.92;
-  --hero-content-anchor: flex-end;
-  --hero-content-width: 100%;
-  /*
-   * 11ch, not 14. At 14 the headline ran two wide lines straight across the
-   * middle of the frame and landed on the fruit — the photograph had room for
-   * type on the left and the type refused to stay in it. A narrow column is
-   * also simply what a poster does: three short lines stacked hard left read
-   * as deliberate, where two long ones read as a caption that outgrew its box.
-   */
-  --hero-headline-width: 11ch;
-  --scrim: linear-gradient(to bottom, rgb(18 23 15 / 0.35) 0%, rgb(18 23 15 / 0.62) 55%, rgb(18 23 15 / 0.9) 100%);
-  --on-image: #ecefe3;
-  --on-image-muted: rgba(236, 239, 227, 0.82);
-  --on-image-subtle: #c5e035;
-
-  --quote-mark: #46630d;
-  --quote-mark-opacity: 1;
-
-  /* Nothing is rounded. */
-  --radius: 0px;
-  --radius-btn: 0px;
-  --radius-card: 0px;
-  --radius-feature: 0px;
-  --radius-logo: 0px;
-  --radius-input: 0px;
-  --radius-dropdown: 0px;
-
-  /* Flat. The panel/ground relationship does the separating. */
-  --card-shadow: none;
-  --shadow-btn: none;
-  --shadow-float: none;
-  --shadow-dropdown: 0 0 0 1px var(--rule);
-  --shadow-menu: 0 0 0 1px var(--rule);
-
-  /*
-   * Anton has one cut, so the display weight drops to 400 — asking a poster
-   * face for 800 gets you a synthesised bold that ruins its sidebearings.
-   */
-  --font-display: var(--font-anton), Impact, "Haettenschweiler", sans-serif;
-  --font-heading: var(--font-anton), Impact, "Haettenschweiler", sans-serif;
-  --font-body: var(--font-archivo), Helvetica, Arial, sans-serif;
-  --font-label: var(--font-archivo), Helvetica, Arial, sans-serif;
-  --font-quote: var(--font-anton), Impact, sans-serif;
-  --font-display-weight: 400;
-  --font-display-track: -0.005em;
-
-  /*
-   * ~120px BETWEEN sections, which is 56 a side — not 120 a side.
-   *
-   * Sections abut, so each one pays half the gap. Reading "section spacing
-   * holds at 120px" as 120 of padding put 240px of dead ground between a card
-   * row and the next heading, which is not a rhythm, it is a hole.
-   *
-   * 56 rather than 60 because 60 is not on the scale (4 8 12 16 24 32 40 56 80
-   * 120) and a step invented to make one sum come out is how a scale stops
-   * being one. 56 a side gives 112 between, four pixels off the number in the
-   * brief and indistinguishable from it on a page.
-   *
-   * This is the first thing that quietly collapses during an implementation,
-   * so it is one value: every block reads it, and no block sets its own.
-   */
-  --section-pad-y: 56px;
-  --section-pad-y-tight: 56px;
-  --section-pad-y-cta: 56px;
-  --section-pad-y-hero: 56px;
-  --section-pad-x: 40px;
-
-  --section-pad-y-sm: 32px;
-  --section-pad-y-tight-sm: 32px;
-  --section-pad-y-hero-sm: 32px;
-  --section-pad-x-sm: 16px;
-  --section-pad-x-tight-sm: 16px;
-}
-
-/* ── Dark, the primary ──────────────────────────────────────────────────── */
-
-html.theme-night-harvest.dark {
-  color-scheme: dark;
-
-  --bg-0: #12170f;
-  --bg-000: #12170f;
-  --bg-100: #1c2317;
-  --bg-200: #1c2317;
-  --bg-300: #262f1f;
-  --bg-1: #1c2317;
-  --surface: #1c2317;
-  --card-bg: #1c2317;
-  --section-bg: #12170f;
-  --hero-bg: #12170f;
-  --cta-bg: #1c2317;
-  --stripe-bg: #1c2317;
-  --table-header-bg: #1c2317;
-  --section-bg-panel: #1c2317;
-
-  --text-100: #ecefe3;
-  --text-200: #ecefe3;
-  --text-300: #9aa38c;
-  --text-400: #9aa38c;
-  --text-500: #9aa38c;
-  --heading: #ecefe3;
-  --body: #ecefe3;
-  --body-secondary: #9aa38c;
-  --caption: #9aa38c;
-  --prose-body: #ecefe3;
-  --lead: #9aa38c;
-
-  /* Here the fill and the ink are the same value — chartreuse on #12170F is
-     legible as a word. That coincidence is why `--accent-ink` has to exist:
-     the light half proves it is a coincidence. */
-  --accent: #c5e035;
-  --accent-hover: #c5e035;
-  --accent-ink: #c5e035;
-  --on-accent: #12170f;
-  --brand: #c5e035;
-  --brand-hover: #ecefe3;
-  --brand-fg: #12170f;
-  --brand-subtle: rgba(197, 224, 53, 0.12);
-  --link: #c5e035;
-  --btn-primary-bg: #c5e035;
-  --btn-primary-fg: #12170f;
-
-  --band: #c5e035;
-  --on-band: #12170f;
-  --on-ink: #c5e035;
-
-  --rule: rgba(236, 239, 227, 0.2);
-  --border: rgba(236, 239, 227, 0.2);
-  --surface-border: rgba(236, 239, 227, 0.2);
-  --nav-border: rgba(236, 239, 227, 0.2);
-  --footer-border: rgba(236, 239, 227, 0.2);
-  --code-bg: rgba(236, 239, 227, 0.12);
-  --pre-bg: rgba(236, 239, 227, 0.08);
-
-  --nav-bg: rgba(18, 23, 15, 0.94);
-  --footer-bg: var(--section-bg-panel);
-  --footer-text: #9aa38c;
-  --footer-heading: #ecefe3;
-  --footer-link: #9aa38c;
-  --footer-link-hover: #c5e035;
-
-  --placeholder-img: #c5e035;
-  --media-bg: #12170f;
-
-  --quote-mark: #c5e035;
-  --quote-mark-opacity: 1;
-
-  --card-shadow: none;
-  --shadow-btn: none;
-  --shadow-float: none;
-  --shadow-dropdown: 0 0 0 1px var(--rule);
-  --shadow-menu: 0 0 0 1px var(--rule);
-
-  /* Status fills, restated so they sit in the palette rather than arriving
-     from the package's slate-and-emerald defaults. */
-  --banner-success-bg: #1c2317;
-  --banner-success-text: #c5e035;
-  --banner-warning-bg: #1c2317;
-  --banner-warning-text: #ecefe3;
-  --error-bg: #1c2317;
-  --error-border: rgba(236, 239, 227, 0.2);
-  --error-text: #ecefe3;
-  --error-detail: #9aa38c;
-}