/* global React, ReactDOM, TopBar, Hero, Schedule, MapSection, InSeason, Vendors, Apply, About, Gallery, Footer */
// Root app — composes all sections in scroll order, mounts to #root.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"palette": "earth",
"typeStack": "garamond"
}/*EDITMODE-END*/;
// Palette presets — applied via inline CSS variables on .
const PALETTES = {
earth: {
"--bg":"#f5efe2","--bg-2":"#ede4d0","--paper":"#faf6ec",
"--ink":"#1f2418","--ink-soft":"#4a4a3a","--rule":"#d8cfb8",
"--green":"#3d5a3d","--green-d":"#2a3f2a",
"--terracotta":"#c44d2e","--terracotta-d":"#a13d22",
"--brown":"#8b6f3f","--brown-l":"#b89a6b",
"--cream-warm":"#fbf3df",
},
sun: {
"--bg":"#fffaf0","--bg-2":"#f4ead4","--paper":"#fffdf7",
"--ink":"#2a2a2a","--ink-soft":"#555","--rule":"#e6dcc0",
"--green":"#1f3d2b","--green-d":"#0e2317",
"--terracotta":"#cc6a1a","--terracotta-d":"#a85412",
"--brown":"#8a6a2a","--brown-l":"#c8a960",
"--cream-warm":"#fbf3df",
},
market: {
"--bg":"#fdf6ec","--bg-2":"#f5e9d2","--paper":"#fffaf0",
"--ink":"#2a1f15","--ink-soft":"#5b4a38","--rule":"#e2d4b8",
"--green":"#5b8a3a","--green-d":"#3f6326",
"--terracotta":"#d94f3a","--terracotta-d":"#b03722",
"--brown":"#8a6432","--brown-l":"#c89e63",
"--cream-warm":"#fff5dd",
},
forest: {
"--bg":"#f3ede0","--bg-2":"#e6dec9","--paper":"#fbf6e9",
"--ink":"#0e1c11","--ink-soft":"#3a4836","--rule":"#cabf9f",
"--green":"#2a3d2a","--green-d":"#142014",
"--terracotta":"#a13d22","--terracotta-d":"#75260f",
"--brown":"#5b4a2c","--brown-l":"#9f8b5a",
"--cream-warm":"#f6efd9",
},
};
const TYPE_STACKS = {
garamond: {
display: '"Cormorant Garamond", "EB Garamond", Georgia, serif',
body: '"Source Serif 4","Source Serif Pro", Georgia, serif',
ui: '"Source Sans 3","Source Sans Pro", system-ui, sans-serif',
},
playfair: {
display: '"Playfair Display", Georgia, serif',
body: '"Lora", Georgia, serif',
ui: '"Work Sans", system-ui, sans-serif',
},
dm: {
display: '"DM Serif Display", Georgia, serif',
body: '"Lora", Georgia, serif',
ui: '"DM Sans", system-ui, sans-serif',
},
newsreader: {
display: '"Newsreader", Georgia, serif',
body: '"Newsreader", Georgia, serif',
ui: '"Public Sans", system-ui, sans-serif',
},
};
function applyTokens(t) {
const root = document.documentElement;
const pal = PALETTES[t.palette] || PALETTES.earth;
Object.entries(pal).forEach(([k, v]) => root.style.setProperty(k, v));
const ts = TYPE_STACKS[t.typeStack] || TYPE_STACKS.garamond;
root.style.setProperty("--display", ts.display);
root.style.setProperty("--body", ts.body);
root.style.setProperty("--ui", ts.ui);
}
function App() {
const t = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : { ...TWEAK_DEFAULTS, setTweak: () => {} };
const tweaks = t;
React.useEffect(() => { applyTokens(tweaks); }, [tweaks.palette, tweaks.typeStack]);
return (
{window.TweaksPanel && (
tweaks.setTweak("palette", v)}
options={[
{ value: "earth", label: "Earth" },
{ value: "sun", label: "Sun" },
{ value: "market", label: "Market" },
{ value: "forest", label: "Forest" },
]}
/>
tweaks.setTweak("typeStack", v)}
options={[
{ value: "garamond", label: "Garamond" },
{ value: "playfair", label: "Playfair" },
{ value: "dm", label: "DM Serif" },
{ value: "newsreader", label: "Newsreader" },
]}
/>
)}
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render();