@olonjs/cli 3.0.85 → 3.0.86

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/src_tenant_alpha.sh +432 -295
  2. package/assets/templates/agritourism/src_tenant.sh +1 -1
  3. package/assets/templates/alpha/src_tenant.sh +432 -295
  4. package/package.json +1 -1
package/assets/src_tenant_alpha.sh CHANGED
@@ -596,7 +596,7 @@ cat << 'END_OF_FILE_CONTENT' > "package.json"
596
596
  "@tiptap/extension-link": "^2.11.5",
597
597
  "@tiptap/react": "^2.11.5",
598
598
  "@tiptap/starter-kit": "^2.11.5",
599
- "@olonjs/core": "^1.0.73",
599
+ "@olonjs/core": "^1.0.74",
600
600
  "clsx": "^2.1.1",
601
601
  "lucide-react": "^0.474.0",
602
602
  "react": "^19.0.0",
@@ -1825,18 +1825,18 @@ import { cn } from '@/lib/utils';
1825
1825
  import type { ArchLayersData, ArchLayersSettings, ArchLayerLevel, SyntaxTokenType } from './types';
1826
1826
 
1827
1827
  const layerBgStyles: Record<ArchLayerLevel, string> = {
1828
- l0: 'bg-[#3b82f6]',
1829
- l1: 'bg-[rgba(59,130,246,0.6)]',
1830
- l2: 'bg-[rgba(59,130,246,0.35)]',
1828
+ l0: 'bg-[var(--local-primary)]',
1829
+ l1: 'bg-[var(--local-accent-strong)]',
1830
+ l2: 'bg-[var(--local-accent-soft)]',
1831
1831
  };
1832
1832
 
1833
1833
  const tokenStyles: Record<SyntaxTokenType, string> = {
1834
- plain: 'text-[#cbd5e1]',
1835
- keyword: 'text-[#60a5fa]',
1836
- type: 'text-[#22d3ee]',
1837
- string: 'text-[#4ade80]',
1838
- comment: 'text-[#64748b] italic',
1839
- operator: 'text-[#f472b6]',
1834
+ plain: 'text-[var(--local-demo-text)]',
1835
+ keyword: 'text-[var(--local-accent)]',
1836
+ type: 'text-[var(--local-cyan)]',
1837
+ string: 'text-[var(--local-primary)]',
1838
+ comment: 'text-[var(--local-demo-text-faint)] italic',
1839
+ operator: 'text-[var(--local-accent)]',
1840
1840
  };
1841
1841
 
1842
1842
  export const ArchLayers: React.FC<{ data: ArchLayersData; settings?: ArchLayersSettings }> = ({ data }) => {
@@ -1847,14 +1847,25 @@ export const ArchLayers: React.FC<{ data: ArchLayersData; settings?: ArchLayersS
1847
1847
  '--local-text': 'var(--foreground)',
1848
1848
  '--local-text-muted': 'var(--muted-foreground)',
1849
1849
  '--local-primary': 'var(--primary)',
1850
- '--local-accent': 'var(--color-accent, #60a5fa)',
1850
+ '--local-accent': 'var(--accent)',
1851
+ '--local-cyan': 'var(--secondary)',
1851
1852
  '--local-border': 'var(--border)',
1852
1853
  '--local-deep': 'var(--background)',
1854
+ '--local-radius-md': 'var(--theme-radius-md)',
1855
+ '--local-radius-lg': 'var(--theme-radius-lg)',
1856
+ '--local-panel-bg': 'var(--demo-surface-soft)',
1857
+ '--local-panel-bar': 'var(--demo-surface)',
1858
+ '--local-panel-border': 'var(--demo-border-soft)',
1859
+ '--local-panel-border-strong': 'var(--demo-border-strong)',
1860
+ '--local-accent-soft': 'var(--demo-accent-soft)',
1861
+ '--local-accent-strong': 'var(--demo-accent-strong)',
1862
+ '--local-demo-text': 'var(--demo-text-soft)',
1863
+ '--local-demo-text-faint': 'var(--demo-text-faint)',
1853
1864
  } as React.CSSProperties}
1854
1865
  className="relative z-0 py-28 bg-[var(--local-bg)]"
1855
1866
  >
1856
- <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
1857
- <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
1867
+ <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border-strong)] to-transparent" />
1868
+ <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border-strong)] to-transparent" />
1858
1869
  <div className="max-w-[1200px] mx-auto px-8">
1859
1870
  <div className="text-center">
1860
1871
  {data.label && (
@@ -1876,12 +1887,12 @@ export const ArchLayers: React.FC<{ data: ArchLayersData; settings?: ArchLayersS
1876
1887
  {data.layers.map((layer, idx) => (
1877
1888
  <div
1878
1889
  key={layer.id ?? idx}
1879
- className="group border border-[rgba(255,255,255,0.06)] rounded-[7px] p-8 mb-4 bg-[rgba(255,255,255,0.015)] flex items-start gap-6 transition-all duration-300 hover:border-[rgba(59,130,246,0.2)] hover:translate-x-1.5"
1890
+ className="group border border-[var(--local-panel-border)] rounded-[var(--local-radius-md)] p-8 mb-4 bg-[var(--local-panel-bg)] flex items-start gap-6 transition-all duration-300 hover:border-[var(--local-panel-border-strong)] hover:translate-x-1.5"
1880
1891
  data-jp-item-id={layer.id ?? `legacy-${idx}`}
1881
1892
  data-jp-item-field="layers"
1882
1893
  >
1883
1894
  <div className={cn(
1884
- 'shrink-0 w-9 h-9 rounded-lg flex items-center justify-center font-mono text-[0.85rem] font-bold text-white',
1895
+ 'shrink-0 w-9 h-9 rounded-[var(--local-radius-md)] flex items-center justify-center font-mono text-[0.85rem] font-bold text-white',
1885
1896
  layerBgStyles[layer.layerLevel]
1886
1897
  )}>
1887
1898
  {layer.number}
@@ -1899,8 +1910,8 @@ export const ArchLayers: React.FC<{ data: ArchLayersData; settings?: ArchLayersS
1899
1910
  </div>
1900
1911
  {data.codeLines && data.codeLines.length > 0 && (
1901
1912
  <div className="mt-12 max-w-[740px] mx-auto">
1902
- <div className="border border-[rgba(255,255,255,0.08)] rounded-[7px] overflow-hidden bg-[var(--local-deep)]">
1903
- <div className="flex items-center gap-2 px-5 py-3 bg-[rgba(255,255,255,0.03)] border-b border-[rgba(255,255,255,0.06)]">
1913
+ <div className="border border-[var(--local-panel-border)] rounded-[var(--local-radius-md)] overflow-hidden bg-[var(--local-deep)]">
1914
+ <div className="flex items-center gap-2 px-5 py-3 bg-[var(--local-panel-bar)] border-b border-[var(--local-panel-border)]">
1904
1915
  <span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]" />
1905
1916
  <span className="w-2.5 h-2.5 rounded-full bg-[#f59e0b]" />
1906
1917
  <span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
@@ -1991,12 +2002,20 @@ export const CliSection: React.FC<{ data: CliSectionData; settings?: CliSectionS
1991
2002
  '--local-text': 'var(--foreground)',
1992
2003
  '--local-text-muted': 'var(--muted-foreground)',
1993
2004
  '--local-primary': 'var(--primary)',
1994
- '--local-accent': 'var(--color-accent, #60a5fa)',
2005
+ '--local-accent': 'var(--accent)',
1995
2006
  '--local-border': 'var(--border)',
2007
+ '--local-radius-sm': 'var(--theme-radius-sm)',
2008
+ '--local-radius-lg': 'var(--theme-radius-lg)',
2009
+ '--local-panel-bg': 'var(--demo-surface-strong)',
2010
+ '--local-panel-deep': 'var(--demo-surface-deep)',
2011
+ '--local-panel-bar': 'var(--demo-surface)',
2012
+ '--local-panel-border': 'var(--demo-border-soft)',
2013
+ '--local-panel-text-soft': 'var(--demo-text-soft)',
2014
+ '--local-panel-text-faint': 'var(--demo-text-faint)',
1996
2015
  } as React.CSSProperties}
1997
2016
  className="relative z-0 py-28 bg-[var(--local-bg)]"
1998
2017
  >
1999
- <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
2018
+ <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border)] to-transparent" />
2000
2019
  <div className="max-w-[1200px] mx-auto px-8 grid grid-cols-2 gap-24 items-center">
2001
2020
 
2002
2021
  {/* LEFT */}
@@ -2023,11 +2042,11 @@ export const CliSection: React.FC<{ data: CliSectionData; settings?: CliSectionS
2023
2042
  {data.steps.map((step, idx) => (
2024
2043
  <div
2025
2044
  key={step.id ?? idx}
2026
- className="grid grid-cols-[32px_1fr] gap-4 py-6 border-b border-[rgba(255,255,255,0.06)] last:border-b-0 items-start"
2045
+ className="grid grid-cols-[32px_1fr] gap-4 py-6 border-b border-[var(--local-panel-border)] last:border-b-0 items-start"
2027
2046
  data-jp-item-id={step.id ?? `legacy-${idx}`}
2028
2047
  data-jp-item-field="steps"
2029
2048
  >
2030
- <div className="font-display text-[1.25rem] font-black text-[#334155] leading-none mt-0.5">{step.num}</div>
2049
+ <div className="font-display text-[1.25rem] font-black text-[var(--local-panel-text-faint)] leading-none mt-0.5">{step.num}</div>
2031
2050
  <div>
2032
2051
  <div className="font-display font-bold text-[1rem] text-[var(--local-text)] mb-1">{step.title}</div>
2033
2052
  <p className="text-[0.85rem] text-[var(--local-text-muted)] leading-[1.6]">{step.description}</p>
@@ -2039,30 +2058,30 @@ export const CliSection: React.FC<{ data: CliSectionData; settings?: CliSectionS
2039
2058
  </div>
2040
2059
 
2041
2060
  {/* RIGHT — terminal */}
2042
- <div className="rounded-[12px] overflow-hidden border border-[rgba(255,255,255,0.10)] shadow-[0_30px_60px_rgba(0,0,0,0.5)]">
2043
- <div className="bg-[#0d1828] px-4 py-2.5 flex items-center gap-1.5 border-b border-[rgba(255,255,255,0.05)]">
2061
+ <div className="rounded-[var(--local-radius-lg)] overflow-hidden border border-[var(--local-panel-border)] shadow-[0_30px_60px_rgba(0,0,0,0.5)]">
2062
+ <div className="bg-[var(--local-panel-bar)] px-4 py-2.5 flex items-center gap-1.5 border-b border-[var(--local-panel-border)]">
2044
2063
  <span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]" />
2045
2064
  <span className="w-2.5 h-2.5 rounded-full bg-[#f59e0b]" />
2046
2065
  <span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
2047
- <span className="mx-auto font-mono text-[0.60rem] text-[rgba(255,255,255,0.25)]">Terminal</span>
2066
+ <span className="mx-auto font-mono text-[0.60rem] text-[var(--local-panel-text-faint)]">Terminal</span>
2048
2067
  </div>
2049
- <div className="bg-[#020508] px-7 py-6 font-mono text-[0.78rem] leading-[2.1] overflow-x-auto">
2050
- <div><span className="text-[#5c6370] italic"># Step 1 — install CLI globally</span></div>
2051
- <div><span className="text-[#3b82f6]">$</span> <span className="text-white">npm install -g </span><span className="text-[#98c379]">@jsonpages/cli@latest</span></div>
2052
- <div><span className="text-[#334155]">added 1 package in 2.3s</span></div>
2053
- <div><span className="text-[#22c55e]">✓ @jsonpages/cli@1.2.0 installed</span></div>
2068
+ <div className="bg-[var(--local-panel-deep)] px-7 py-6 font-mono text-[0.78rem] leading-[2.1] overflow-x-auto">
2069
+ <div><span className="text-[var(--local-panel-text-faint)] italic"># Step 1 — install CLI globally</span></div>
2070
+ <div><span className="text-[var(--local-accent)]">$</span> <span className="text-[var(--local-text)]">npm install -g </span><span className="text-[var(--local-panel-text-soft)]">@jsonpages/cli@latest</span></div>
2071
+ <div><span className="text-[var(--local-panel-text-faint)]">added 1 package in 2.3s</span></div>
2072
+ <div><span className="text-[var(--local-primary)]">✓ @jsonpages/cli@1.2.0 installed</span></div>
2054
2073
  <div>&nbsp;</div>
2055
- <div><span className="text-[#5c6370] italic"># Step 2 — scaffold a new tenant</span></div>
2056
- <div><span className="text-[#3b82f6]">$</span> <span className="text-[#98c379]">npx @jsonpages/cli@latest</span> <span className="text-white">new my-tenant</span></div>
2057
- <div><span className="text-[#22c55e]"> ✓ src/components/hero/</span></div>
2058
- <div><span className="text-[#22c55e]"> ✓ src/lib/schemas.ts</span></div>
2059
- <div><span className="text-[#22c55e]"> ✓ src/lib/ComponentRegistry.tsx</span></div>
2060
- <div><span className="text-[#22c55e]"> ✓ src/data/pages/home.json</span></div>
2061
- <div><span className="text-[#22c55e]"> ✓ Done in 1.8s</span></div>
2074
+ <div><span className="text-[var(--local-panel-text-faint)] italic"># Step 2 — scaffold a new tenant</span></div>
2075
+ <div><span className="text-[var(--local-accent)]">$</span> <span className="text-[var(--local-panel-text-soft)]">npx @jsonpages/cli@latest</span> <span className="text-[var(--local-text)]">new my-tenant</span></div>
2076
+ <div><span className="text-[var(--local-primary)]"> ✓ src/components/hero/</span></div>
2077
+ <div><span className="text-[var(--local-primary)]"> ✓ src/lib/schemas.ts</span></div>
2078
+ <div><span className="text-[var(--local-primary)]"> ✓ src/lib/ComponentRegistry.tsx</span></div>
2079
+ <div><span className="text-[var(--local-primary)]"> ✓ src/data/pages/home.json</span></div>
2080
+ <div><span className="text-[var(--local-primary)]"> ✓ Done in 1.8s</span></div>
2062
2081
  <div>&nbsp;</div>
2063
- <div><span className="text-[#5c6370] italic"># Step 3 — start Studio</span></div>
2064
- <div><span className="text-[#3b82f6]">$</span> <span className="text-white">cd my-tenant && npm run dev</span></div>
2065
- <div><span className="text-[#22c55e]"> ➜ Studio ready at </span><span className="text-[#60a5fa]">http://localhost:5173</span><span className="inline-block w-2 h-[1em] bg-[#3b82f6] ml-1 align-text-bottom animate-pulse" /></div>
2082
+ <div><span className="text-[var(--local-panel-text-faint)] italic"># Step 3 — start Studio</span></div>
2083
+ <div><span className="text-[var(--local-accent)]">$</span> <span className="text-[var(--local-text)]">cd my-tenant && npm run dev</span></div>
2084
+ <div><span className="text-[var(--local-primary)]"> ➜ Studio ready at </span><span className="text-[var(--local-accent)]">http://localhost:5173</span><span className="inline-block w-2 h-[1em] bg-[var(--local-primary)] ml-1 align-text-bottom animate-pulse" /></div>
2066
2085
  </div>
2067
2086
  </div>
2068
2087
 
@@ -2122,14 +2141,26 @@ export const CmsIce: React.FC<{ data: CmsIceData; settings?: CmsIceSettings }> =
2122
2141
  '--local-text': 'var(--foreground)',
2123
2142
  '--local-text-muted': 'var(--muted-foreground)',
2124
2143
  '--local-primary': 'var(--primary)',
2125
- '--local-accent': 'var(--color-accent, #60a5fa)',
2126
- '--local-cyan': 'var(--color-secondary, #22d3ee)',
2144
+ '--local-accent': 'var(--accent)',
2145
+ '--local-cyan': 'var(--secondary)',
2127
2146
  '--local-border': 'var(--border)',
2128
2147
  '--local-surface': 'var(--card)',
2148
+ '--local-radius-sm': 'var(--theme-radius-sm)',
2149
+ '--local-radius-md': 'var(--theme-radius-md)',
2150
+ '--local-radius-lg': 'var(--theme-radius-lg)',
2151
+ '--local-panel-bg': 'var(--demo-surface-soft)',
2152
+ '--local-panel-bar': 'var(--demo-surface)',
2153
+ '--local-panel-deep': 'var(--demo-surface-deep)',
2154
+ '--local-panel-border': 'var(--demo-border-soft)',
2155
+ '--local-panel-border-strong': 'var(--demo-border-strong)',
2156
+ '--local-panel-text-soft': 'var(--demo-text-soft)',
2157
+ '--local-panel-text-faint': 'var(--demo-text-faint)',
2158
+ '--local-accent-soft': 'var(--demo-accent-soft)',
2159
+ '--local-accent-strong': 'var(--demo-accent-strong)',
2129
2160
  } as React.CSSProperties}
2130
2161
  className="relative z-0 py-28 bg-[var(--local-bg)]"
2131
2162
  >
2132
- <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
2163
+ <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border-strong)] to-transparent" />
2133
2164
  <div className="max-w-[1200px] mx-auto px-8">
2134
2165
 
2135
2166
  {/* Header */}
@@ -2159,66 +2190,66 @@ export const CmsIce: React.FC<{ data: CmsIceData; settings?: CmsIceSettings }> =
2159
2190
  </div>
2160
2191
 
2161
2192
  {/* ICE Mockup — product demo, decorative */}
2162
- <div className="rounded-[16px] overflow-hidden border border-[rgba(255,255,255,0.10)] shadow-[0_0_0_1px_rgba(255,255,255,0.03),0_60px_120px_rgba(0,0,0,0.7),0_0_80px_rgba(59,130,246,0.08)] mb-16">
2193
+ <div className="rounded-[var(--local-radius-lg)] overflow-hidden border border-[var(--local-panel-border)] shadow-[0_0_0_1px_rgba(255,255,255,0.03),0_60px_120px_rgba(0,0,0,0.7),0_0_80px_rgba(59,130,246,0.08)] mb-16">
2163
2194
  {/* Browser bar */}
2164
- <div className="bg-[#0d1828] px-4 py-2.5 flex items-center gap-1.5 border-b border-[rgba(255,255,255,0.05)]">
2195
+ <div className="bg-[var(--local-panel-bar)] px-4 py-2.5 flex items-center gap-1.5 border-b border-[var(--local-panel-border)]">
2165
2196
  <span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]" />
2166
2197
  <span className="w-2.5 h-2.5 rounded-full bg-[#f59e0b]" />
2167
2198
  <span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
2168
- <span className="mx-auto font-mono text-[0.62rem] text-[rgba(255,255,255,0.20)] bg-[rgba(255,255,255,0.04)] px-8 py-0.5 rounded">localhost:5173/admin — JsonPages Studio</span>
2199
+ <span className="mx-auto font-mono text-[0.62rem] text-[var(--local-panel-text-faint)] bg-[var(--local-panel-bg)] px-8 py-0.5 rounded-[var(--local-radius-sm)]">localhost:5173/admin — JsonPages Studio</span>
2169
2200
  </div>
2170
2201
  {/* Split */}
2171
- <div className="grid grid-cols-[1fr_300px] h-[520px] bg-[#060d1b]">
2202
+ <div className="grid grid-cols-[1fr_300px] h-[520px] bg-[var(--local-panel-deep)]">
2172
2203
  {/* Stage */}
2173
2204
  <div className="flex flex-col overflow-hidden">
2174
2205
  {/* Tenant nav sim */}
2175
- <div className="bg-[rgba(6,13,27,0.96)] px-6 py-3 flex items-center justify-between border-b border-[rgba(255,255,255,0.05)] flex-shrink-0">
2206
+ <div className="bg-[var(--local-panel-bg)] px-6 py-3 flex items-center justify-between border-b border-[var(--local-panel-border)] flex-shrink-0">
2176
2207
  <div className="flex items-center gap-2 font-display font-bold text-[0.9rem] text-white">
2177
- <div className="w-5 h-5 bg-gradient-to-br from-[#3b82f6] to-[#22d3ee] rounded flex items-center justify-center font-mono text-[0.45rem] text-white font-bold">{'{}'}</div>
2178
- Json<span className="text-[#60a5fa]">Pages</span>
2208
+ <div className="w-5 h-5 bg-gradient-to-br from-[var(--local-primary)] to-[var(--local-cyan)] rounded-[var(--local-radius-sm)] flex items-center justify-center font-mono text-[0.45rem] text-white font-bold">{'{}'}</div>
2209
+ Json<span className="text-[var(--local-accent)]">Pages</span>
2179
2210
  </div>
2180
- <div className="flex gap-6 text-[0.68rem] text-[#475569] font-sans">
2211
+ <div className="flex gap-6 text-[0.68rem] text-[var(--local-panel-text-faint)] font-sans">
2181
2212
  <span>Architecture</span><span>CMS</span><span>Versioning</span><span>Developer</span>
2182
2213
  </div>
2183
2214
  </div>
2184
2215
  {/* Hero section — selected */}
2185
- <div className="flex-1 relative p-8 flex flex-col justify-center bg-gradient-to-br from-[#04090f] to-[#071320] outline outline-2 outline-[#3b82f6] -outline-offset-2">
2186
- <span className="absolute top-2.5 right-2.5 font-mono text-[0.5rem] font-bold uppercase tracking-widest bg-[#3b82f6] text-white px-2 py-0.5">HERO | LOCAL</span>
2216
+ <div className="flex-1 relative p-8 flex flex-col justify-center bg-gradient-to-br from-[var(--local-panel-deep)] to-[var(--local-panel-bg)] outline outline-2 outline-[var(--local-primary)] -outline-offset-2">
2217
+ <span className="absolute top-2.5 right-2.5 font-mono text-[0.5rem] font-bold uppercase tracking-widest bg-[var(--local-primary)] text-white px-2 py-0.5 rounded-[var(--local-radius-sm)]">HERO | LOCAL</span>
2187
2218
  <div className="font-display font-black text-[2.4rem] leading-none text-white mb-0.5">The Sovereign Shell.</div>
2188
- <div className="font-display font-black text-[2.4rem] leading-none bg-gradient-to-r from-[#60a5fa] to-[#22d3ee] bg-clip-text text-transparent mb-4">Zero Runtime Overhead.</div>
2189
- <p className="text-[0.75rem] text-[#475569] leading-[1.65] max-w-[360px] mb-5">The @jsonpages/core package is a headless, schema-driven runtime. It handles routing, hydration, and the admin interface.</p>
2219
+ <div className="font-display font-black text-[2.4rem] leading-none bg-gradient-to-r from-[var(--local-accent)] to-[var(--local-cyan)] bg-clip-text text-transparent mb-4">Zero Runtime Overhead.</div>
2220
+ <p className="text-[0.75rem] text-[var(--local-panel-text-faint)] leading-[1.65] max-w-[360px] mb-5">The @jsonpages/core package is a headless, schema-driven runtime. It handles routing, hydration, and the admin interface.</p>
2190
2221
  <div className="flex gap-2">
2191
- <span className="text-[0.65rem] font-semibold bg-[#3b82f6] text-white px-3.5 py-1.5 rounded-[5px]">Read the Docs</span>
2192
- <span className="text-[0.65rem] border border-[rgba(255,255,255,0.15)] text-[#94a3b8] px-3.5 py-1.5 rounded-[5px]">View on NPM</span>
2222
+ <span className="text-[0.65rem] font-semibold bg-[var(--local-primary)] text-white px-3.5 py-1.5 rounded-[var(--local-radius-md)]">Read the Docs</span>
2223
+ <span className="text-[0.65rem] border border-[var(--local-panel-border)] text-[var(--local-panel-text-soft)] px-3.5 py-1.5 rounded-[var(--local-radius-md)]">View on NPM</span>
2193
2224
  </div>
2194
2225
  </div>
2195
2226
  {/* Next section visible but dimmed */}
2196
- <div className="flex-shrink-0 px-6 py-4 bg-[#0a1628] border-t border-[rgba(255,255,255,0.05)] flex gap-3 opacity-40">
2227
+ <div className="flex-shrink-0 px-6 py-4 bg-[var(--local-panel-bar)] border-t border-[var(--local-panel-border)] flex gap-3 opacity-40">
2197
2228
  {['The Form Factory', 'The Tenant Protocol', 'The Core Engine'].map((t) => (
2198
- <div key={t} className="flex-1 bg-[rgba(255,255,255,0.02)] border border-[rgba(255,255,255,0.05)] rounded p-2.5">
2199
- <div className="w-3.5 h-3.5 rounded bg-[rgba(59,130,246,0.15)] mb-1.5" />
2200
- <div className="font-display font-bold text-[0.58rem] text-[#94a3b8]">{t}</div>
2229
+ <div key={t} className="flex-1 bg-[var(--local-panel-bg)] border border-[var(--local-panel-border)] rounded-[var(--local-radius-sm)] p-2.5">
2230
+ <div className="w-3.5 h-3.5 rounded-[var(--local-radius-sm)] bg-[var(--local-accent-soft)] mb-1.5" />
2231
+ <div className="font-display font-bold text-[0.58rem] text-[var(--local-panel-text-soft)]">{t}</div>
2201
2232
  </div>
2202
2233
  ))}
2203
2234
  </div>
2204
2235
  </div>
2205
2236
  {/* Inspector */}
2206
- <div className="bg-[#08121f] border-l border-[rgba(255,255,255,0.06)] flex flex-col overflow-hidden">
2207
- <div className="px-4 py-3 border-b border-[rgba(255,255,255,0.05)] flex items-start justify-between">
2237
+ <div className="bg-[var(--local-panel-bar)] border-l border-[var(--local-panel-border)] flex flex-col overflow-hidden">
2238
+ <div className="px-4 py-3 border-b border-[var(--local-panel-border)] flex items-start justify-between">
2208
2239
  <div>
2209
2240
  <div className="font-display font-bold text-[0.88rem] text-white">Inspector</div>
2210
- <div className="flex items-center gap-1.5 mt-0.5 font-mono text-[0.56rem] text-[#3b82f6]">
2241
+ <div className="flex items-center gap-1.5 mt-0.5 font-mono text-[0.56rem] text-[var(--local-accent)]">
2211
2242
  <span className="font-bold">■ HERO</span>
2212
- <span className="text-[#1e3a5f]">|</span>
2213
- <span className="text-[#334155]">LOCAL</span>
2243
+ <span className="text-[var(--local-panel-text-faint)]">|</span>
2244
+ <span className="text-[var(--local-panel-text-faint)]">LOCAL</span>
2214
2245
  </div>
2215
2246
  </div>
2216
- <span className="font-mono text-[0.58rem] text-[#3b82f6]">+ Add section</span>
2247
+ <span className="font-mono text-[0.58rem] text-[var(--local-accent)]">+ Add section</span>
2217
2248
  </div>
2218
2249
  {/* Layers */}
2219
- <div className="border-b border-[rgba(255,255,255,0.05)]">
2220
- <div className="px-4 py-1.5 font-mono text-[0.54rem] uppercase tracking-widest text-[#1e3a5f] flex justify-between">
2221
- <span>Page Layers</span><span className="text-[#334155]">(8)</span>
2250
+ <div className="border-b border-[var(--local-panel-border)]">
2251
+ <div className="px-4 py-1.5 font-mono text-[0.54rem] uppercase tracking-widest text-[var(--local-panel-text-faint)] flex justify-between">
2252
+ <span>Page Layers</span><span className="text-[var(--local-panel-text-faint)]">(8)</span>
2222
2253
  </div>
2223
2254
  {[
2224
2255
  { type: 'HERO', label: 'The Sovereign Shell.', active: true, opacity: '' },
@@ -2226,11 +2257,11 @@ export const CmsIce: React.FC<{ data: CmsIceData; settings?: CmsIceSettings }> =
2226
2257
  { type: 'GIT', label: 'Your content is code.', active: false, opacity: 'opacity-45' },
2227
2258
  { type: 'DEVEX', label: 'App.tsx is incredibly thin.', active: false, opacity: 'opacity-35' },
2228
2259
  ].map(({ type, label, active, opacity }) => (
2229
- <div key={type} className={`flex items-center gap-2 px-4 py-1.5 ${active ? 'bg-[rgba(59,130,246,0.08)]' : ''} ${opacity}`}>
2230
- <span className="text-[#1e3a5f] text-[0.58rem]">⠿</span>
2231
- <span className={`font-mono text-[0.52rem] uppercase tracking-wide w-10 flex-shrink-0 ${active ? 'text-[#3b82f6]' : 'text-[#1e3a5f]'}`}>{type}</span>
2232
- <span className={`font-sans text-[0.65rem] flex-1 truncate ${active ? 'text-[#e2e8f0] font-semibold' : 'text-[#475569]'}`}>{label}</span>
2233
- <span className={`w-1.5 h-1.5 rounded-full ${active ? 'bg-[#22c55e]' : 'bg-[#334155] opacity-40'}`} />
2260
+ <div key={type} className={`flex items-center gap-2 px-4 py-1.5 ${active ? 'bg-[var(--local-accent-soft)]' : ''} ${opacity}`}>
2261
+ <span className="text-[var(--local-panel-text-faint)] text-[0.58rem]">⠿</span>
2262
+ <span className={`font-mono text-[0.52rem] uppercase tracking-wide w-10 flex-shrink-0 ${active ? 'text-[var(--local-accent)]' : 'text-[var(--local-panel-text-faint)]'}`}>{type}</span>
2263
+ <span className={`font-sans text-[0.65rem] flex-1 truncate ${active ? 'text-[var(--local-text)] font-semibold' : 'text-[var(--local-panel-text-soft)]'}`}>{label}</span>
2264
+ <span className={`w-1.5 h-1.5 rounded-full ${active ? 'bg-[var(--local-primary)]' : 'bg-[var(--local-panel-border)] opacity-40'}`} />
2234
2265
  </div>
2235
2266
  ))}
2236
2267
  </div>
@@ -2242,41 +2273,41 @@ export const CmsIce: React.FC<{ data: CmsIceData; settings?: CmsIceSettings }> =
2242
2273
  { label: 'Badge', val: 'Architecture v1.2', active: false },
2243
2274
  ].map(({ label, val, active }) => (
2244
2275
  <div key={label}>
2245
- <div className="font-mono text-[0.52rem] uppercase tracking-widest text-[#334155] mb-1">{label}</div>
2246
- <div className={`rounded px-2.5 py-1.5 font-mono text-[0.60rem] truncate ${active
2247
- ? 'bg-[rgba(59,130,246,0.05)] border border-[rgba(59,130,246,0.45)] text-[#e2e8f0]'
2248
- : 'bg-[rgba(255,255,255,0.03)] border border-[rgba(255,255,255,0.07)] text-[#94a3b8]'}`}
2276
+ <div className="font-mono text-[0.52rem] uppercase tracking-widest text-[var(--local-panel-text-faint)] mb-1">{label}</div>
2277
+ <div className={`rounded-[var(--local-radius-sm)] px-2.5 py-1.5 font-mono text-[0.60rem] truncate ${active
2278
+ ? 'bg-[var(--local-accent-soft)] border border-[var(--local-panel-border-strong)] text-[var(--local-text)]'
2279
+ : 'bg-[var(--local-panel-bg)] border border-[var(--local-panel-border)] text-[var(--local-panel-text-soft)]'}`}
2249
2280
  >{val}</div>
2250
2281
  </div>
2251
2282
  ))}
2252
2283
  <div>
2253
- <div className="font-mono text-[0.52rem] uppercase tracking-widest text-[#334155] mb-1 flex justify-between">
2254
- <span>CTAs (2)</span><span className="text-[#3b82f6]">+ Add Item</span>
2284
+ <div className="font-mono text-[0.52rem] uppercase tracking-widest text-[var(--local-panel-text-faint)] mb-1 flex justify-between">
2285
+ <span>CTAs (2)</span><span className="text-[var(--local-accent)]">+ Add Item</span>
2255
2286
  </div>
2256
- <div className="border border-[rgba(255,255,255,0.05)] rounded overflow-hidden">
2287
+ <div className="border border-[var(--local-panel-border)] rounded-[var(--local-radius-sm)] overflow-hidden">
2257
2288
  {[{ lbl: 'Read the Docs', tag: 'primary' }, { lbl: 'View on NPM', tag: 'secondary' }].map(({ lbl, tag }) => (
2258
- <div key={lbl} className="flex items-center gap-1.5 px-2.5 py-1.5 border-b border-[rgba(255,255,255,0.04)] last:border-b-0">
2259
- <span className="text-[#3b82f6] text-[0.52rem]">▸</span>
2260
- <span className="font-sans text-[0.60rem] text-[#475569] flex-1">{lbl}</span>
2261
- <span className="font-mono text-[0.48rem] px-1 py-0.5 rounded bg-[rgba(59,130,246,0.08)] text-[#60a5fa]">{tag}</span>
2289
+ <div key={lbl} className="flex items-center gap-1.5 px-2.5 py-1.5 border-b border-[var(--local-panel-border)] last:border-b-0">
2290
+ <span className="text-[var(--local-accent)] text-[0.52rem]">▸</span>
2291
+ <span className="font-sans text-[0.60rem] text-[var(--local-panel-text-soft)] flex-1">{lbl}</span>
2292
+ <span className="font-mono text-[0.48rem] px-1 py-0.5 rounded-[var(--local-radius-sm)] bg-[var(--local-accent-soft)] text-[var(--local-accent)]">{tag}</span>
2262
2293
  </div>
2263
2294
  ))}
2264
2295
  </div>
2265
2296
  </div>
2266
2297
  </div>
2267
2298
  {/* Bottom bar */}
2268
- <div className="px-4 py-2.5 border-t border-[rgba(255,255,255,0.05)] bg-[#060e1c] flex items-center gap-2">
2269
- <span className="w-1.5 h-1.5 rounded-full bg-[#22c55e]" />
2270
- <span className="font-mono text-[0.52rem] text-[#475569]">All Changes Saved</span>
2271
- <div className="flex items-center gap-1.5 ml-1 font-mono text-[0.52rem] text-[#334155]">
2272
- <div className="w-5 h-2.5 bg-[#3b82f6] rounded-full relative flex-shrink-0">
2299
+ <div className="px-4 py-2.5 border-t border-[var(--local-panel-border)] bg-[var(--local-panel-bg)] flex items-center gap-2">
2300
+ <span className="w-1.5 h-1.5 rounded-full bg-[var(--local-primary)]" />
2301
+ <span className="font-mono text-[0.52rem] text-[var(--local-panel-text-soft)]">All Changes Saved</span>
2302
+ <div className="flex items-center gap-1.5 ml-1 font-mono text-[0.52rem] text-[var(--local-panel-text-faint)]">
2303
+ <div className="w-5 h-2.5 bg-[var(--local-primary)] rounded-full relative flex-shrink-0">
2273
2304
  <div className="absolute top-[1.5px] right-[1.5px] w-[9px] h-[9px] bg-white rounded-full" />
2274
2305
  </div>
2275
2306
  Autosave
2276
2307
  </div>
2277
2308
  <div className="ml-auto flex gap-1.5">
2278
- <span className="font-mono text-[0.50rem] px-1.5 py-0.5 rounded border border-[rgba(59,130,246,0.3)] bg-[rgba(59,130,246,0.12)] text-[#60a5fa] flex items-center gap-1">⬡ HTML</span>
2279
- <span className="font-mono text-[0.50rem] px-1.5 py-0.5 rounded border border-[rgba(255,255,255,0.08)] bg-[rgba(255,255,255,0.03)] text-[#94a3b8] opacity-50">{'{}'} JSON</span>
2309
+ <span className="font-mono text-[0.50rem] px-1.5 py-0.5 rounded-[var(--local-radius-sm)] border border-[var(--local-panel-border-strong)] bg-[var(--local-accent-soft)] text-[var(--local-accent)] flex items-center gap-1">⬡ HTML</span>
2310
+ <span className="font-mono text-[0.50rem] px-1.5 py-0.5 rounded-[var(--local-radius-sm)] border border-[var(--local-panel-border)] bg-[var(--local-panel-bg)] text-[var(--local-panel-text-soft)] opacity-50">{'{}'} JSON</span>
2280
2311
  </div>
2281
2312
  </div>
2282
2313
  </div>
@@ -2289,11 +2320,11 @@ export const CmsIce: React.FC<{ data: CmsIceData; settings?: CmsIceSettings }> =
2289
2320
  {data.callouts.map((c, idx) => (
2290
2321
  <div
2291
2322
  key={c.id ?? idx}
2292
- className="border border-[rgba(255,255,255,0.06)] rounded-[12px] p-8 bg-[rgba(255,255,255,0.015)] hover:border-[rgba(59,130,246,0.2)] hover:bg-[rgba(59,130,246,0.03)] transition-all duration-200"
2323
+ className="border border-[var(--local-panel-border)] rounded-[var(--local-radius-lg)] p-8 bg-[var(--local-panel-bg)] hover:border-[var(--local-panel-border-strong)] hover:bg-[var(--local-accent-soft)] transition-all duration-200"
2293
2324
  data-jp-item-id={c.id ?? `legacy-${idx}`}
2294
2325
  data-jp-item-field="callouts"
2295
2326
  >
2296
- <div className="w-9 h-9 rounded-[8px] bg-[rgba(59,130,246,0.10)] flex items-center justify-center text-[1.1rem] mb-4">
2327
+ <div className="w-9 h-9 rounded-[var(--local-radius-md)] bg-[var(--local-accent-soft)] flex items-center justify-center text-[1.1rem] mb-4">
2297
2328
  {c.icon}
2298
2329
  </div>
2299
2330
  <h4 className="font-display font-bold text-[1.05rem] text-[var(--local-text)] mb-2">{c.title}</h4>
@@ -2364,7 +2395,7 @@ export const CodeBlock: React.FC<{ data: CodeBlockData; settings?: CodeBlockSett
2364
2395
  '--local-border': 'var(--border)',
2365
2396
  '--local-text': 'var(--foreground)',
2366
2397
  '--local-accent': 'var(--primary)',
2367
- '--local-radius-lg': 'var(--radius)',
2398
+ '--local-radius-lg': 'var(--theme-radius-lg)',
2368
2399
  } as React.CSSProperties}
2369
2400
  className="py-16 bg-[var(--local-surface)]"
2370
2401
  >
@@ -2458,13 +2489,19 @@ export const CtaBanner: React.FC<{ data: CtaBannerData; settings?: CtaBannerSett
2458
2489
  '--local-text': 'var(--foreground)',
2459
2490
  '--local-text-muted': 'var(--muted-foreground)',
2460
2491
  '--local-primary': 'var(--primary)',
2461
- '--local-accent': 'var(--color-accent, #60a5fa)',
2462
- '--local-cyan': 'var(--color-secondary, #22d3ee)',
2492
+ '--local-accent': 'var(--accent)',
2493
+ '--local-cyan': 'var(--secondary)',
2494
+ '--local-radius-md': 'var(--theme-radius-md)',
2495
+ '--local-radius-lg': 'var(--theme-radius-lg)',
2496
+ '--local-panel-bg': 'var(--demo-surface-deep)',
2497
+ '--local-panel-border': 'var(--demo-border-soft)',
2498
+ '--local-panel-border-strong': 'var(--demo-border-strong)',
2499
+ '--local-accent-soft': 'var(--demo-accent-soft)',
2463
2500
  } as React.CSSProperties}
2464
2501
  className="relative py-28 bg-[var(--local-bg)] overflow-hidden text-center"
2465
2502
  >
2466
2503
  <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[48px] h-[2px] bg-gradient-to-r from-[var(--local-primary)] to-[var(--local-cyan)]" />
2467
- <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[60vw] h-[60vw] bg-[radial-gradient(circle,rgba(59,130,246,0.06)_0%,transparent_60%)] pointer-events-none" />
2504
+ <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[60vw] h-[60vw] bg-[radial-gradient(circle,var(--local-accent-soft)_0%,transparent_60%)] pointer-events-none" />
2468
2505
  <div className="relative max-w-[960px] mx-auto px-8">
2469
2506
  <h2
2470
2507
  className="font-display text-[clamp(3rem,7vw,6.5rem)] font-black text-[var(--local-text)] leading-[1.0] tracking-tight mb-6"
@@ -2482,11 +2519,11 @@ export const CtaBanner: React.FC<{ data: CtaBannerData; settings?: CtaBannerSett
2482
2519
  )}
2483
2520
  {data.cliCommand && (
2484
2521
  <div
2485
- className="inline-flex items-center gap-4 bg-[rgba(0,0,0,0.5)] border border-[rgba(255,255,255,0.12)] rounded-[12px] px-6 py-4 font-mono text-[0.88rem] text-[var(--local-text-muted)] mb-10"
2522
+ className="inline-flex items-center gap-4 bg-[var(--local-panel-bg)] border border-[var(--local-panel-border)] rounded-[var(--local-radius-lg)] px-6 py-4 font-mono text-[0.88rem] text-[var(--local-text-muted)] mb-10"
2486
2523
  data-jp-field="cliCommand"
2487
2524
  >
2488
2525
  <span className="text-[var(--local-primary)]">$</span>
2489
- <span className="text-white">{data.cliCommand}</span>
2526
+ <span className="text-[var(--local-text)]">{data.cliCommand}</span>
2490
2527
  </div>
2491
2528
  )}
2492
2529
  {data.ctas && data.ctas.length > 0 && (
@@ -2498,10 +2535,10 @@ export const CtaBanner: React.FC<{ data: CtaBannerData; settings?: CtaBannerSett
2498
2535
  data-jp-item-id={cta.id ?? `legacy-${idx}`}
2499
2536
  data-jp-item-field="ctas"
2500
2537
  className={cn(
2501
- 'inline-flex items-center gap-2 px-9 py-3.5 rounded-[7px] font-semibold text-[1rem] transition-all duration-200 no-underline',
2538
+ 'inline-flex items-center gap-2 px-9 py-3.5 rounded-[var(--local-radius-md)] font-semibold text-[1rem] transition-all duration-200 no-underline',
2502
2539
  cta.variant === 'primary'
2503
- ? 'bg-[var(--local-primary)] text-white hover:brightness-110 hover:-translate-y-0.5 shadow-[0_0_32px_rgba(59,130,246,0.25)]'
2504
- : 'bg-transparent text-[var(--local-text)] border border-[rgba(255,255,255,0.12)] hover:border-[rgba(255,255,255,0.3)] hover:bg-[rgba(255,255,255,0.04)]'
2540
+ ? 'bg-[var(--local-primary)] text-white hover:brightness-110 hover:-translate-y-0.5 shadow-[0_0_32px_var(--local-accent-soft)]'
2541
+ : 'bg-transparent text-[var(--local-text)] border border-[var(--local-panel-border)] hover:border-[var(--local-panel-border-strong)] hover:bg-[var(--local-accent-soft)]'
2505
2542
  )}
2506
2543
  >
2507
2544
  {cta.label}
@@ -2566,10 +2603,10 @@ const APP_TSX_LINES = [
2566
2603
  ] as const;
2567
2604
 
2568
2605
  const tokenClass: Record<string, string> = {
2569
- cm: 'text-[#5c6370] italic',
2570
- kw: 'text-[#c678dd]',
2571
- fn: 'text-[#61afef]',
2572
- pl: 'text-[#cbd5e1]',
2606
+ cm: 'text-[var(--local-panel-text-faint)] italic',
2607
+ kw: 'text-[var(--local-accent)]',
2608
+ fn: 'text-[var(--local-primary)]',
2609
+ pl: 'text-[var(--local-panel-text-soft)]',
2573
2610
  };
2574
2611
 
2575
2612
  export const Devex: React.FC<{ data: DevexData; settings?: DevexSettings }> = ({ data }) => {
@@ -2580,12 +2617,19 @@ export const Devex: React.FC<{ data: DevexData; settings?: DevexSettings }> = ({
2580
2617
  '--local-text': 'var(--foreground)',
2581
2618
  '--local-text-muted': 'var(--muted-foreground)',
2582
2619
  '--local-primary': 'var(--primary)',
2583
- '--local-accent': 'var(--color-accent, #60a5fa)',
2620
+ '--local-accent': 'var(--accent)',
2584
2621
  '--local-border': 'var(--border)',
2622
+ '--local-radius-lg': 'var(--theme-radius-lg)',
2623
+ '--local-panel-bg': 'var(--demo-surface)',
2624
+ '--local-panel-deep': 'var(--demo-surface-deep)',
2625
+ '--local-panel-border': 'var(--demo-border-soft)',
2626
+ '--local-panel-border-strong': 'var(--demo-border-strong)',
2627
+ '--local-panel-text-soft': 'var(--demo-text-soft)',
2628
+ '--local-panel-text-faint': 'var(--demo-text-faint)',
2585
2629
  } as React.CSSProperties}
2586
2630
  className="relative z-0 py-28 bg-[var(--local-bg)]"
2587
2631
  >
2588
- <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
2632
+ <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border-strong)] to-transparent" />
2589
2633
  <div className="max-w-[1200px] mx-auto px-8 grid grid-cols-2 gap-24 items-center">
2590
2634
 
2591
2635
  {/* LEFT */}
@@ -2612,11 +2656,11 @@ export const Devex: React.FC<{ data: DevexData; settings?: DevexSettings }> = ({
2612
2656
  {data.features.map((f, idx) => (
2613
2657
  <li
2614
2658
  key={f.id ?? idx}
2615
- className="flex items-center gap-3.5 text-[0.9rem] text-[var(--local-text-muted)] py-3.5 border-b border-[rgba(255,255,255,0.06)] last:border-b-0 hover:text-[var(--local-text)] hover:pl-1.5 transition-all"
2659
+ className="flex items-center gap-3.5 text-[0.9rem] text-[var(--local-text-muted)] py-3.5 border-b border-[var(--local-panel-border)] last:border-b-0 hover:text-[var(--local-text)] hover:pl-1.5 transition-all"
2616
2660
  data-jp-item-id={f.id ?? `legacy-${idx}`}
2617
2661
  data-jp-item-field="features"
2618
2662
  >
2619
- <svg className="w-4 h-4 text-[#22c55e] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2663
+ <svg className="w-4 h-4 text-[var(--local-primary)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2620
2664
  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
2621
2665
  </svg>
2622
2666
  {f.text}
@@ -2627,14 +2671,14 @@ export const Devex: React.FC<{ data: DevexData; settings?: DevexSettings }> = ({
2627
2671
  </div>
2628
2672
 
2629
2673
  {/* RIGHT — code window */}
2630
- <div className="rounded-[12px] overflow-hidden border border-[rgba(255,255,255,0.10)] shadow-[0_30px_60px_rgba(0,0,0,0.5),0_0_40px_rgba(59,130,246,0.06)]">
2631
- <div className="bg-[#0d1828] px-4 py-2.5 flex items-center gap-1.5 border-b border-[rgba(255,255,255,0.05)]">
2674
+ <div className="rounded-[var(--local-radius-lg)] overflow-hidden border border-[var(--local-panel-border)] shadow-[0_30px_60px_rgba(0,0,0,0.5),0_0_40px_rgba(59,130,246,0.06)]">
2675
+ <div className="bg-[var(--local-panel-bg)] px-4 py-2.5 flex items-center gap-1.5 border-b border-[var(--local-panel-border)]">
2632
2676
  <span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]" />
2633
2677
  <span className="w-2.5 h-2.5 rounded-full bg-[#f59e0b]" />
2634
2678
  <span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
2635
- <span className="ml-auto font-mono text-[0.62rem] text-[rgba(255,255,255,0.25)]">src/App.tsx</span>
2679
+ <span className="ml-auto font-mono text-[0.62rem] text-[var(--local-panel-text-faint)]">src/App.tsx</span>
2636
2680
  </div>
2637
- <div className="bg-[#030609] px-8 py-7 font-mono text-[0.80rem] leading-[2] overflow-x-auto">
2681
+ <div className="bg-[var(--local-panel-deep)] px-8 py-7 font-mono text-[0.80rem] leading-[2] overflow-x-auto">
2638
2682
  {APP_TSX_LINES.map((ln, i) => (
2639
2683
  <div key={i}>
2640
2684
  <span className={tokenClass[ln.t]}>{ln.c || '\u00A0'}</span>
@@ -2702,7 +2746,7 @@ function renderInline(text: string): React.ReactNode {
2702
2746
 
2703
2747
  /* ── block renderer ───────────────────────────────────────── */
2704
2748
  function DocBlock({ block, idx }: { block: Block; idx: number }) {
2705
- const inlineCls = '[&_strong]:text-[var(--local-text)] [&_strong]:font-semibold [&_code]:font-mono [&_code]:text-[0.84em] [&_code]:bg-[rgba(255,255,255,0.07)] [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded-[3px] [&_code]:text-[var(--local-accent)]';
2749
+ const inlineCls = '[&_strong]:text-[var(--local-text)] [&_strong]:font-semibold [&_code]:font-mono [&_code]:text-[0.84em] [&_code]:bg-[var(--local-inline-code-bg)] [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded-[var(--local-radius-sm)] [&_code]:text-[var(--local-accent)]';
2706
2750
 
2707
2751
  switch (block.type) {
2708
2752
  case 'heading':
@@ -2713,16 +2757,16 @@ function DocBlock({ block, idx }: { block: Block; idx: number }) {
2713
2757
 
2714
2758
  case 'code':
2715
2759
  return (
2716
- <div key={idx} className="mb-6 rounded-[10px] overflow-hidden border border-[rgba(255,255,255,0.08)] shadow-[0_8px_32px_rgba(0,0,0,0.4)]">
2760
+ <div key={idx} className="mb-6 rounded-[var(--local-radius-lg)] overflow-hidden border border-[var(--local-panel-border)] shadow-[0_8px_32px_rgba(0,0,0,0.4)]">
2717
2761
  {block.codeFilename && (
2718
- <div className="bg-[#0d1828] px-4 py-2.5 flex items-center gap-2 border-b border-[rgba(255,255,255,0.05)]">
2762
+ <div className="bg-[var(--local-panel-bar)] px-4 py-2.5 flex items-center gap-2 border-b border-[var(--local-panel-border)]">
2719
2763
  <span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]" />
2720
2764
  <span className="w-2.5 h-2.5 rounded-full bg-[#f59e0b]" />
2721
2765
  <span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
2722
- <span className="ml-3 font-mono text-[0.65rem] text-[rgba(255,255,255,0.28)]">{block.codeFilename}</span>
2766
+ <span className="ml-3 font-mono text-[0.65rem] text-[var(--local-panel-text-faint)]">{block.codeFilename}</span>
2723
2767
  </div>
2724
2768
  )}
2725
- <pre className="bg-[#020508] px-6 py-5 font-mono text-[0.78rem] leading-[1.9] overflow-x-auto text-[#cbd5e1] m-0 whitespace-pre">
2769
+ <pre className="bg-[var(--local-panel-deep)] px-6 py-5 font-mono text-[0.78rem] leading-[1.9] overflow-x-auto text-[var(--local-panel-text-soft)] m-0 whitespace-pre">
2726
2770
  <code>{block.content}</code>
2727
2771
  </pre>
2728
2772
  </div>
@@ -2742,17 +2786,17 @@ function DocBlock({ block, idx }: { block: Block; idx: number }) {
2742
2786
 
2743
2787
  case 'table':
2744
2788
  return (
2745
- <div key={idx} className="mb-6 overflow-hidden rounded-[10px] border border-[rgba(255,255,255,0.06)]">
2789
+ <div key={idx} className="mb-6 overflow-hidden rounded-[var(--local-radius-lg)] border border-[var(--local-panel-border)]">
2746
2790
  <table className="w-full text-[0.88rem]">
2747
2791
  <thead>
2748
- <tr className="bg-[rgba(59,130,246,0.06)] border-b border-[rgba(255,255,255,0.06)]">
2792
+ <tr className="bg-[var(--local-accent-soft)] border-b border-[var(--local-panel-border)]">
2749
2793
  <th className="px-5 py-3 text-left font-mono text-[0.66rem] uppercase tracking-widest text-[var(--local-accent)] w-[200px]">Cosa</th>
2750
2794
  <th className="px-5 py-3 text-left font-mono text-[0.66rem] uppercase tracking-widest text-[var(--local-accent)]">Azione</th>
2751
2795
  </tr>
2752
2796
  </thead>
2753
2797
  <tbody>
2754
2798
  {(block.rows ?? []).map((row, i) => (
2755
- <tr key={row.id ?? i} className="border-b border-[rgba(255,255,255,0.04)] last:border-0 hover:bg-[rgba(59,130,246,0.025)] transition-colors">
2799
+ <tr key={row.id ?? i} className="border-b border-[var(--local-panel-border)] last:border-0 hover:bg-[var(--local-accent-soft)] transition-colors">
2756
2800
  <td className={`px-5 py-4 text-[var(--local-text)] font-semibold align-top text-[0.88rem] ${inlineCls}`}>
2757
2801
  {renderInline(row.col1)}
2758
2802
  </td>
@@ -2768,7 +2812,7 @@ function DocBlock({ block, idx }: { block: Block; idx: number }) {
2768
2812
 
2769
2813
  case 'callout':
2770
2814
  return (
2771
- <div key={idx} className={`mb-5 rounded-[10px] border border-[rgba(59,130,246,0.22)] bg-[rgba(59,130,246,0.05)] px-5 py-4 ${inlineCls}`}>
2815
+ <div key={idx} className={`mb-5 rounded-[var(--local-radius-lg)] border border-[var(--local-panel-border-strong)] bg-[var(--local-accent-soft)] px-5 py-4 ${inlineCls}`}>
2772
2816
  <div className="flex items-start gap-3">
2773
2817
  <span className="text-[var(--local-accent)] font-mono text-[0.9rem] flex-shrink-0 mt-0.5 leading-none">ℹ</span>
2774
2818
  <p className="text-[0.90rem] text-[var(--local-text-muted)] leading-[1.8] m-0">{renderInline(block.content)}</p>
@@ -2778,9 +2822,9 @@ function DocBlock({ block, idx }: { block: Block; idx: number }) {
2778
2822
 
2779
2823
  case 'note':
2780
2824
  return (
2781
- <div key={idx} className={`mb-5 rounded-[10px] border border-[rgba(239,68,68,0.20)] bg-[rgba(239,68,68,0.04)] px-5 py-4 ${inlineCls}`}>
2825
+ <div key={idx} className={`mb-5 rounded-[var(--local-radius-lg)] border border-[var(--local-panel-border-strong)] bg-[var(--local-accent-soft)] px-5 py-4 ${inlineCls}`}>
2782
2826
  <div className="flex items-start gap-3">
2783
- <span className="text-[#f87171] font-mono text-[0.9rem] flex-shrink-0 mt-0.5 leading-none">⚠</span>
2827
+ <span className="text-[var(--local-accent)] font-mono text-[0.9rem] flex-shrink-0 mt-0.5 leading-none">⚠</span>
2784
2828
  <p className="text-[0.90rem] text-[var(--local-text-muted)] leading-[1.8] m-0">{renderInline(block.content)}</p>
2785
2829
  </div>
2786
2830
  </div>
@@ -2834,22 +2878,33 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
2834
2878
  '--local-text': 'var(--foreground)',
2835
2879
  '--local-text-muted': 'var(--muted-foreground)',
2836
2880
  '--local-primary': 'var(--primary)',
2837
- '--local-accent': 'var(--color-accent, #60a5fa)',
2838
- '--local-cyan': 'var(--color-secondary, #22d3ee)',
2881
+ '--local-accent': 'var(--accent)',
2882
+ '--local-cyan': 'var(--secondary)',
2839
2883
  '--local-border': 'var(--border)',
2840
2884
  '--local-surface': 'var(--card)',
2885
+ '--local-radius-sm': 'var(--theme-radius-sm)',
2886
+ '--local-radius-md': 'var(--theme-radius-md)',
2887
+ '--local-radius-lg': 'var(--theme-radius-lg)',
2888
+ '--local-panel-bar': 'var(--demo-surface)',
2889
+ '--local-panel-deep': 'var(--demo-surface-deep)',
2890
+ '--local-panel-border': 'var(--demo-border-soft)',
2891
+ '--local-panel-border-strong': 'var(--demo-border-strong)',
2892
+ '--local-panel-text-soft': 'var(--demo-text-soft)',
2893
+ '--local-panel-text-faint': 'var(--demo-text-faint)',
2894
+ '--local-accent-soft': 'var(--demo-accent-soft)',
2895
+ '--local-inline-code-bg': 'var(--demo-surface)',
2841
2896
  } as React.CSSProperties}
2842
2897
  className="relative z-0 min-h-screen bg-[var(--local-bg)]"
2843
2898
  >
2844
- <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.15)] to-transparent" />
2899
+ <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border-strong)] to-transparent" />
2845
2900
 
2846
2901
  {/* ── Page hero ──────────────────────────────────── */}
2847
2902
  <div className="max-w-[1200px] mx-auto px-8 pt-28 pb-12">
2848
2903
  <div
2849
- className="inline-flex items-center gap-2 bg-[rgba(59,130,246,0.08)] border border-[rgba(59,130,246,0.18)] px-3.5 py-1 rounded-full font-mono text-[0.66rem] font-semibold text-[var(--local-accent)] mb-5 tracking-widest uppercase"
2904
+ className="inline-flex items-center gap-2 bg-[var(--local-accent-soft)] border border-[var(--local-panel-border-strong)] px-3.5 py-1 rounded-full font-mono text-[0.66rem] font-semibold text-[var(--local-accent)] mb-5 tracking-widest uppercase"
2850
2905
  data-jp-field="version"
2851
2906
  >
2852
- <span className="w-1.5 h-1.5 rounded-full bg-[#22c55e]" />
2907
+ <span className="w-1.5 h-1.5 rounded-full bg-[var(--local-primary)]" />
2853
2908
  {data.version ?? 'v1.2'}
2854
2909
  </div>
2855
2910
  <h1
@@ -2866,7 +2921,7 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
2866
2921
  {data.pageSubtitle}
2867
2922
  </p>
2868
2923
  )}
2869
- <div className="mt-8 h-px bg-gradient-to-r from-[rgba(59,130,246,0.3)] via-[rgba(59,130,246,0.06)] to-transparent" />
2924
+ <div className="mt-8 h-px bg-gradient-to-r from-[var(--local-panel-border-strong)] via-[var(--local-accent-soft)] to-transparent" />
2870
2925
  </div>
2871
2926
 
2872
2927
  {/* ── Sidebar + Content ──────────────────────────── */}
@@ -2885,11 +2940,11 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
2885
2940
  href={`#${group.anchor}`}
2886
2941
  onClick={scrollTo(group.anchor)}
2887
2942
  className={`
2888
- flex items-center gap-2 px-3 py-2 rounded-[6px] font-display font-bold text-[0.80rem]
2943
+ flex items-center gap-2 px-3 py-2 rounded-[var(--local-radius-md)] font-display font-bold text-[0.80rem]
2889
2944
  transition-all duration-150 no-underline
2890
2945
  ${groupActive
2891
- ? 'text-[var(--local-text)] bg-[rgba(255,255,255,0.04)]'
2892
- : 'text-[var(--local-text-muted)] hover:text-[var(--local-text)] hover:bg-[rgba(255,255,255,0.03)]'}
2946
+ ? 'text-[var(--local-text)] bg-[var(--local-panel-bar)]'
2947
+ : 'text-[var(--local-text-muted)] hover:text-[var(--local-text)] hover:bg-[var(--local-panel-bar)]'}
2893
2948
  ${activeAnchor === group.anchor ? 'border-l-2 border-[var(--local-primary)] pl-[10px] text-[var(--local-accent)]' : ''}
2894
2949
  `}
2895
2950
  >
@@ -2903,14 +2958,14 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
2903
2958
  href={`#${s.anchor}`}
2904
2959
  onClick={scrollTo(s.anchor)}
2905
2960
  className={`
2906
- flex items-center gap-2.5 pl-[22px] pr-3 py-1.5 rounded-[5px]
2961
+ flex items-center gap-2.5 pl-[22px] pr-3 py-1.5 rounded-[var(--local-radius-sm)]
2907
2962
  font-sans text-[0.76rem] transition-all duration-120 no-underline ml-0.5
2908
2963
  ${activeAnchor === s.anchor
2909
- ? 'text-[var(--local-accent)] font-semibold bg-[rgba(59,130,246,0.07)]'
2910
- : 'text-[var(--local-text-muted)] hover:text-[var(--local-text)] hover:bg-[rgba(255,255,255,0.025)]'}
2964
+ ? 'text-[var(--local-accent)] font-semibold bg-[var(--local-accent-soft)]'
2965
+ : 'text-[var(--local-text-muted)] hover:text-[var(--local-text)] hover:bg-[var(--local-panel-bar)]'}
2911
2966
  `}
2912
2967
  >
2913
- <span className={`w-[5px] h-[5px] rounded-full flex-shrink-0 transition-colors ${activeAnchor === s.anchor ? 'bg-[var(--local-accent)]' : 'bg-[rgba(255,255,255,0.12)]'}`} />
2968
+ <span className={`w-[5px] h-[5px] rounded-full flex-shrink-0 transition-colors ${activeAnchor === s.anchor ? 'bg-[var(--local-accent)]' : 'bg-[var(--local-panel-border)]'}`} />
2914
2969
  {s.title}
2915
2970
  </a>
2916
2971
  ))}
@@ -2921,7 +2976,7 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
2921
2976
  </nav>
2922
2977
 
2923
2978
  {/* Divider + back to top */}
2924
- <div className="mt-6 pt-5 border-t border-[rgba(255,255,255,0.05)]">
2979
+ <div className="mt-6 pt-5 border-t border-[var(--local-panel-border)]">
2925
2980
  <button
2926
2981
  onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
2927
2982
  className="flex items-center gap-2 font-mono text-[0.62rem] uppercase tracking-widest text-[var(--local-text-muted)] hover:text-[var(--local-accent)] transition-colors px-3"
@@ -2938,7 +2993,7 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
2938
2993
 
2939
2994
  {/* Group header */}
2940
2995
  <div id={group.anchor} className="scroll-mt-[88px] flex items-center gap-3 mb-2">
2941
- <div className="w-7 h-7 rounded-[7px] bg-[rgba(59,130,246,0.12)] border border-[rgba(59,130,246,0.18)] flex items-center justify-center flex-shrink-0">
2996
+ <div className="w-7 h-7 rounded-[var(--local-radius-md)] bg-[var(--local-accent-soft)] border border-[var(--local-panel-border-strong)] flex items-center justify-center flex-shrink-0">
2942
2997
  <span className="font-mono text-[var(--local-accent)] text-[0.66rem] font-bold">{gi + 1}</span>
2943
2998
  </div>
2944
2999
  <h2
@@ -2949,7 +3004,7 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
2949
3004
  {group.label}
2950
3005
  </h2>
2951
3006
  </div>
2952
- <div className="h-px bg-[rgba(255,255,255,0.05)] mb-10 ml-10" />
3007
+ <div className="h-px bg-[var(--local-panel-border)] mb-10 ml-10" />
2953
3008
 
2954
3009
  {/* Sections */}
2955
3010
  {(group.sections ?? []).map((section, si) => (
@@ -2963,7 +3018,7 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
2963
3018
  {/* Section title */}
2964
3019
  <div className="flex items-center gap-2.5 mb-6">
2965
3020
  {section.tag && (
2966
- <span className="font-mono text-[0.60rem] uppercase tracking-widest text-[var(--local-accent)] bg-[rgba(59,130,246,0.08)] border border-[rgba(59,130,246,0.15)] px-2 py-0.5 rounded-[4px] flex-shrink-0">
3021
+ <span className="font-mono text-[0.60rem] uppercase tracking-widest text-[var(--local-accent)] bg-[var(--local-accent-soft)] border border-[var(--local-panel-border-strong)] px-2 py-0.5 rounded-[var(--local-radius-sm)] flex-shrink-0">
2967
3022
  {section.tag}
2968
3023
  </span>
2969
3024
  )}
@@ -2982,7 +3037,7 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
2982
3037
 
2983
3038
  {/* Section divider */}
2984
3039
  {si < (group.sections ?? []).length - 1 && (
2985
- <div className="mt-12 h-px bg-[rgba(255,255,255,0.035)]" />
3040
+ <div className="mt-12 h-px bg-[var(--local-panel-border)]" />
2986
3041
  )}
2987
3042
  </div>
2988
3043
  ))}
@@ -2991,9 +3046,9 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
2991
3046
 
2992
3047
  {/* EOF marker */}
2993
3048
  <div className="mt-16 flex items-center gap-4 opacity-30">
2994
- <div className="flex-1 h-px bg-[rgba(255,255,255,0.08)]" />
3049
+ <div className="flex-1 h-px bg-[var(--local-panel-border)]" />
2995
3050
  <span className="font-mono text-[0.60rem] uppercase tracking-widest text-[var(--local-text-muted)]">End of document</span>
2996
- <div className="flex-1 h-px bg-[rgba(255,255,255,0.08)]" />
3051
+ <div className="flex-1 h-px bg-[var(--local-panel-border)]" />
2997
3052
  </div>
2998
3053
  </div>
2999
3054
 
@@ -3080,8 +3135,8 @@ export const FeatureGrid: React.FC<{ data: FeatureGridData; settings?: FeatureGr
3080
3135
  '--local-surface': 'var(--card)',
3081
3136
  '--local-surface-alt': 'var(--muted)',
3082
3137
  '--local-border': 'var(--border)',
3083
- '--local-radius-lg': 'var(--radius)',
3084
- '--local-radius-md': 'calc(var(--radius) - 2px)',
3138
+ '--local-radius-lg': 'var(--theme-radius-lg)',
3139
+ '--local-radius-md': 'var(--theme-radius-md)',
3085
3140
  } as React.CSSProperties;
3086
3141
 
3087
3142
  return (
@@ -3175,8 +3230,8 @@ export const Footer: React.FC<{ data: FooterData; settings?: FooterSettings }> =
3175
3230
  '--local-bg': 'var(--background)',
3176
3231
  '--local-text': 'var(--foreground)',
3177
3232
  '--local-text-muted': 'var(--muted-foreground)',
3178
- '--local-accent': 'var(--color-accent, #60a5fa)',
3179
- '--local-border': 'rgba(255,255,255,0.05)',
3233
+ '--local-accent': 'var(--accent)',
3234
+ '--local-border': 'color-mix(in oklch, var(--foreground) 8%, transparent)',
3180
3235
  } as React.CSSProperties}
3181
3236
  className="py-12 border-t border-[var(--local-border)] bg-[var(--local-bg)] relative z-0"
3182
3237
  >
@@ -3262,13 +3317,22 @@ export const GitSection: React.FC<{ data: GitSectionData; settings?: GitSectionS
3262
3317
  '--local-text': 'var(--foreground)',
3263
3318
  '--local-text-muted': 'var(--muted-foreground)',
3264
3319
  '--local-primary': 'var(--primary)',
3265
- '--local-accent': 'var(--color-accent, #60a5fa)',
3266
- '--local-cyan': 'var(--color-secondary, #22d3ee)',
3320
+ '--local-accent': 'var(--accent)',
3321
+ '--local-cyan': 'var(--secondary)',
3267
3322
  '--local-border': 'var(--border)',
3323
+ '--local-radius-sm': 'var(--theme-radius-sm)',
3324
+ '--local-radius-lg': 'var(--theme-radius-lg)',
3325
+ '--local-panel-bg': 'var(--demo-surface-soft)',
3326
+ '--local-panel-bar': 'var(--demo-surface)',
3327
+ '--local-panel-deep': 'var(--demo-surface-deep)',
3328
+ '--local-panel-border': 'var(--demo-border-soft)',
3329
+ '--local-panel-border-strong': 'var(--demo-border-strong)',
3330
+ '--local-panel-text-soft': 'var(--demo-text-soft)',
3331
+ '--local-panel-text-faint': 'var(--demo-text-faint)',
3268
3332
  } as React.CSSProperties}
3269
3333
  className="relative z-0 py-28 bg-[var(--local-bg)]"
3270
3334
  >
3271
- <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
3335
+ <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border-strong)] to-transparent" />
3272
3336
  <div className="max-w-[1200px] mx-auto px-8 grid grid-cols-2 gap-24 items-center">
3273
3337
 
3274
3338
  {/* LEFT — copy */}
@@ -3300,7 +3364,7 @@ export const GitSection: React.FC<{ data: GitSectionData; settings?: GitSectionS
3300
3364
  {data.points.map((p, idx) => (
3301
3365
  <li
3302
3366
  key={p.id ?? idx}
3303
- className="flex items-start gap-3.5 text-[0.9rem] text-[var(--local-text-muted)] py-3.5 border-b border-[rgba(255,255,255,0.06)] last:border-b-0 hover:text-[var(--local-text)] transition-colors leading-[1.5]"
3367
+ className="flex items-start gap-3.5 text-[0.9rem] text-[var(--local-text-muted)] py-3.5 border-b border-[var(--local-panel-border)] last:border-b-0 hover:text-[var(--local-text)] transition-colors leading-[1.5]"
3304
3368
  data-jp-item-id={p.id ?? `legacy-${idx}`}
3305
3369
  data-jp-item-field="points"
3306
3370
  >
@@ -3313,21 +3377,21 @@ export const GitSection: React.FC<{ data: GitSectionData; settings?: GitSectionS
3313
3377
  </div>
3314
3378
 
3315
3379
  {/* RIGHT — git diff panel (decorative, content-driven commits) */}
3316
- <div className="rounded-[12px] overflow-hidden border border-[rgba(255,255,255,0.10)] shadow-[0_30px_60px_rgba(0,0,0,0.5)]">
3317
- <div className="bg-[#0d1828] px-4 py-2.5 flex items-center gap-1.5 border-b border-[rgba(255,255,255,0.05)]">
3380
+ <div className="rounded-[var(--local-radius-lg)] overflow-hidden border border-[var(--local-panel-border)] shadow-[0_30px_60px_rgba(0,0,0,0.5)]">
3381
+ <div className="bg-[var(--local-panel-bar)] px-4 py-2.5 flex items-center gap-1.5 border-b border-[var(--local-panel-border)]">
3318
3382
  <span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]" />
3319
3383
  <span className="w-2.5 h-2.5 rounded-full bg-[#f59e0b]" />
3320
3384
  <span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
3321
- <span className="ml-auto font-mono text-[0.62rem] text-[rgba(255,255,255,0.25)]">src/data/pages/home.json</span>
3385
+ <span className="ml-auto font-mono text-[0.62rem] text-[var(--local-panel-text-faint)]">src/data/pages/home.json</span>
3322
3386
  </div>
3323
3387
  {/* Tabs */}
3324
- <div className="bg-[#0a1624] border-b border-[rgba(255,255,255,0.05)] flex">
3325
- <div className="font-mono text-[0.60rem] px-4 py-2 text-white border-b-2 border-[#3b82f6]">Changes</div>
3326
- <div className="font-mono text-[0.60rem] px-4 py-2 text-[#475569]">History</div>
3327
- <div className="font-mono text-[0.60rem] px-4 py-2 text-[#475569]">Blame</div>
3388
+ <div className="bg-[var(--local-panel-bg)] border-b border-[var(--local-panel-border)] flex">
3389
+ <div className="font-mono text-[0.60rem] px-4 py-2 text-[var(--local-text)] border-b-2 border-[var(--local-primary)]">Changes</div>
3390
+ <div className="font-mono text-[0.60rem] px-4 py-2 text-[var(--local-panel-text-faint)]">History</div>
3391
+ <div className="font-mono text-[0.60rem] px-4 py-2 text-[var(--local-panel-text-faint)]">Blame</div>
3328
3392
  </div>
3329
3393
  {/* Diff */}
3330
- <div className="bg-[#030609] px-4 py-4 font-mono text-[0.73rem] leading-[1.9] overflow-x-auto">
3394
+ <div className="bg-[var(--local-panel-deep)] px-4 py-4 font-mono text-[0.73rem] leading-[1.9] overflow-x-auto">
3331
3395
  {[
3332
3396
  { t: 'ctx', g: '12', s: ' ', c: ' "type": "hero",' },
3333
3397
  { t: 'ctx', g: '13', s: ' ', c: ' "data": {' },
@@ -3338,28 +3402,28 @@ export const GitSection: React.FC<{ data: GitSectionData; settings?: GitSectionS
3338
3402
  { t: 'ctx', g: '16', s: ' ', c: ' "badge": "Architecture v1.2",' },
3339
3403
  { t: 'ctx', g: '17', s: ' ', c: ' }' },
3340
3404
  ].map((ln, i) => (
3341
- <div key={i} className={`flex gap-3 px-1 rounded-[2px] ${
3342
- ln.t === 'add' ? 'bg-[rgba(34,197,94,0.07)]' :
3343
- ln.t === 'del' ? 'bg-[rgba(239,68,68,0.07)]' :
3405
+ <div key={i} className={`flex gap-3 px-1 rounded-[var(--local-radius-sm)] ${
3406
+ ln.t === 'add' ? 'bg-[var(--local-panel-bg)]' :
3407
+ ln.t === 'del' ? 'bg-[var(--local-panel-bg)]' :
3344
3408
  'opacity-45'}`}
3345
3409
  >
3346
- <span className="text-[#334155] min-w-[18px] text-right select-none">{ln.g}</span>
3347
- <span className={`min-w-[12px] ${ln.t === 'add' ? 'text-[#22c55e]' : ln.t === 'del' ? 'text-[#ef4444]' : 'text-[#334155]'}`}>{ln.s}</span>
3348
- <span className={`whitespace-pre ${ln.t === 'add' ? 'text-[#86efac]' : ln.t === 'del' ? 'text-[#fca5a5]' : 'text-[#cbd5e1]'}`}>{ln.c}</span>
3410
+ <span className="text-[var(--local-panel-text-faint)] min-w-[18px] text-right select-none">{ln.g}</span>
3411
+ <span className={`min-w-[12px] ${ln.t === 'add' ? 'text-[var(--local-primary)]' : ln.t === 'del' ? 'text-[var(--local-accent)]' : 'text-[var(--local-panel-text-faint)]'}`}>{ln.s}</span>
3412
+ <span className={`whitespace-pre ${ln.t === 'add' ? 'text-[var(--local-primary)]' : ln.t === 'del' ? 'text-[var(--local-accent)]' : 'text-[var(--local-panel-text-soft)]'}`}>{ln.c}</span>
3349
3413
  </div>
3350
3414
  ))}
3351
3415
  </div>
3352
3416
  {/* Commits */}
3353
- <div className="bg-[#050d1c] border-t border-[rgba(255,255,255,0.05)] px-4 py-3 flex flex-col gap-2.5">
3417
+ <div className="bg-[var(--local-panel-bg)] border-t border-[var(--local-panel-border)] px-4 py-3 flex flex-col gap-2.5">
3354
3418
  {[
3355
3419
  { hash: 'a3f9c12', msg: 'feat(home): update hero headline copy', time: '2m ago', op: 1 },
3356
3420
  { hash: '8b21e04', msg: 'content(home): add 3 metrics to hero', time: '1h ago', op: 0.6 },
3357
3421
  { hash: 'cc70a91', msg: 'feat(home): initial page structure', time: '2d ago', op: 0.4 },
3358
3422
  ].map(({ hash, msg, time, op }) => (
3359
3423
  <div key={hash} className="flex items-center gap-3" style={{ opacity: op }}>
3360
- <span className="font-mono text-[0.58rem] text-[#3b82f6] min-w-[52px]">{hash}</span>
3361
- <span className="font-sans text-[0.70rem] text-[#475569] flex-1 truncate">{msg}</span>
3362
- <span className="font-mono text-[0.56rem] text-[#334155]">{time}</span>
3424
+ <span className="font-mono text-[0.58rem] text-[var(--local-accent)] min-w-[52px]">{hash}</span>
3425
+ <span className="font-sans text-[0.70rem] text-[var(--local-panel-text-soft)] flex-1 truncate">{msg}</span>
3426
+ <span className="font-mono text-[0.56rem] text-[var(--local-panel-text-faint)]">{time}</span>
3363
3427
  </div>
3364
3428
  ))}
3365
3429
  </div>
@@ -3430,12 +3494,13 @@ export const Header: React.FC<{
3430
3494
  return (
3431
3495
  <header
3432
3496
  style={{
3433
- '--local-bg': 'rgba(6,13,27,0.92)',
3497
+ '--local-bg': 'color-mix(in oklch, var(--background) 88%, transparent)',
3434
3498
  '--local-text': 'var(--foreground)',
3435
3499
  '--local-text-muted': 'var(--muted-foreground)',
3436
3500
  '--local-primary': 'var(--primary)',
3437
- '--local-accent': 'var(--color-accent, #60a5fa)',
3438
- '--local-border': 'rgba(59,130,246,0.08)',
3501
+ '--local-accent': 'var(--accent)',
3502
+ '--local-border': 'color-mix(in oklch, var(--primary) 18%, transparent)',
3503
+ '--local-radius-md': 'var(--theme-radius-md)',
3439
3504
  } as React.CSSProperties}
3440
3505
  className={cn(
3441
3506
  'w-full py-4 transition-all duration-300 z-0',
@@ -3474,7 +3539,7 @@ export const Header: React.FC<{
3474
3539
  className={cn(
3475
3540
  'no-underline text-sm font-medium transition-colors',
3476
3541
  item.isCta
3477
- ? 'bg-[var(--local-primary)] text-white px-5 py-2 rounded-lg font-semibold hover:brightness-110 hover:-translate-y-px'
3542
+ ? 'bg-[var(--local-primary)] text-white px-5 py-2 rounded-[var(--local-radius-md)] font-semibold hover:brightness-110 hover:-translate-y-px'
3478
3543
  : 'text-[var(--local-text-muted)] hover:text-[var(--local-text)]'
3479
3544
  )}
3480
3545
  >
@@ -3589,19 +3654,26 @@ export const Hero: React.FC<{ data: HeroData; settings?: HeroSettings }> = ({ da
3589
3654
  '--local-text': 'var(--foreground)',
3590
3655
  '--local-text-muted': 'var(--muted-foreground)',
3591
3656
  '--local-primary': 'var(--primary)',
3592
- '--local-accent': 'var(--color-accent, #60a5fa)',
3593
- '--local-cyan': 'var(--color-secondary, #22d3ee)',
3657
+ '--local-accent': 'var(--accent)',
3658
+ '--local-cyan': 'var(--secondary)',
3594
3659
  '--local-border': 'var(--border)',
3595
3660
  '--local-surface': 'var(--card)',
3596
3661
  '--local-radius-sm': 'var(--theme-radius-sm)',
3597
3662
  '--local-radius-md': 'var(--theme-radius-md)',
3598
3663
  '--local-radius-lg': 'var(--theme-radius-lg)',
3664
+ '--local-panel-bg': 'var(--demo-surface)',
3665
+ '--local-panel-deep': 'var(--demo-surface-deep)',
3666
+ '--local-panel-border': 'var(--demo-border-soft)',
3667
+ '--local-panel-border-strong': 'var(--demo-border-strong)',
3668
+ '--local-panel-text-soft': 'var(--demo-text-soft)',
3669
+ '--local-panel-text-faint': 'var(--demo-text-faint)',
3670
+ '--local-accent-soft': 'var(--demo-accent-soft)',
3599
3671
  } as React.CSSProperties}
3600
3672
  className="jp-hero relative min-h-screen flex items-center overflow-hidden pt-24 pb-0 bg-[var(--local-bg)]"
3601
3673
  >
3602
3674
  {/* Background glows */}
3603
- <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1100px] h-[650px] bg-[radial-gradient(ellipse_at_50%_0%,rgba(59,130,246,0.13),transparent_65%)] pointer-events-none" />
3604
- <div className="absolute inset-0 bg-[image:linear-gradient(rgba(59,130,246,0.04)_1px,transparent_1px),linear-gradient(90deg,rgba(59,130,246,0.04)_1px,transparent_1px)] bg-[size:80px_80px] [mask-image:radial-gradient(ellipse_at_50%_0%,black_25%,transparent_75%)] pointer-events-none" />
3675
+ <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1100px] h-[650px] bg-[radial-gradient(ellipse_at_50%_0%,var(--local-accent-soft),transparent_65%)] pointer-events-none" />
3676
+ <div className="absolute inset-0 bg-[image:linear-gradient(var(--local-accent-soft)_1px,transparent_1px),linear-gradient(90deg,var(--local-accent-soft)_1px,transparent_1px)] bg-[size:80px_80px] [mask-image:radial-gradient(ellipse_at_50%_0%,black_25%,transparent_75%)] pointer-events-none" />
3605
3677
 
3606
3678
  <div className="relative z-0 max-w-[1200px] mx-auto px-8 w-full">
3607
3679
  <div className="grid grid-cols-2 gap-16 items-center pb-20">
@@ -3610,10 +3682,10 @@ export const Hero: React.FC<{ data: HeroData; settings?: HeroSettings }> = ({ da
3610
3682
  <div>
3611
3683
  {data.badge && (
3612
3684
  <div
3613
- className="inline-flex items-center gap-2 bg-[rgba(59,130,246,0.10)] border border-[rgba(59,130,246,0.20)] px-4 py-1.5 rounded-full text-[0.70rem] font-mono font-semibold text-[var(--local-accent)] mb-8 tracking-widest uppercase jp-animate-in"
3685
+ className="inline-flex items-center gap-2 bg-[var(--local-accent-soft)] border border-[var(--local-panel-border-strong)] px-4 py-1.5 rounded-full text-[0.70rem] font-mono font-semibold text-[var(--local-accent)] mb-8 tracking-widest uppercase jp-animate-in"
3614
3686
  data-jp-field="badge"
3615
3687
  >
3616
- <span className="w-1.5 h-1.5 rounded-full bg-[#22c55e] jp-pulse-dot" />
3688
+ <span className="w-1.5 h-1.5 rounded-full bg-[var(--local-primary)] jp-pulse-dot" />
3617
3689
  {data.badge}
3618
3690
  </div>
3619
3691
  )}
@@ -3656,8 +3728,8 @@ export const Hero: React.FC<{ data: HeroData; settings?: HeroSettings }> = ({ da
3656
3728
  className={cn(
3657
3729
  'inline-flex items-center gap-2 px-7 py-3 rounded-[var(--local-radius-md)] font-semibold text-[0.95rem] transition-all duration-200 no-underline',
3658
3730
  cta.variant === 'primary'
3659
- ? 'bg-[var(--local-primary)] text-white hover:brightness-110 hover:-translate-y-0.5 shadow-[0_0_24px_rgba(59,130,246,0.25)]'
3660
- : 'bg-transparent text-[var(--local-text)] border border-[rgba(255,255,255,0.12)] hover:border-[rgba(255,255,255,0.3)] hover:bg-[rgba(255,255,255,0.04)]'
3731
+ ? 'bg-[var(--local-primary)] text-white hover:brightness-110 hover:-translate-y-0.5 shadow-[0_0_24px_var(--local-accent-soft)]'
3732
+ : 'bg-transparent text-[var(--local-text)] border border-[var(--local-panel-border)] hover:border-[var(--local-panel-border-strong)] hover:bg-[var(--local-panel-bg)]'
3661
3733
  )}
3662
3734
  >
3663
3735
  {cta.label}
@@ -3667,7 +3739,7 @@ export const Hero: React.FC<{ data: HeroData; settings?: HeroSettings }> = ({ da
3667
3739
  )}
3668
3740
 
3669
3741
  {data.metrics && data.metrics.length > 0 && (
3670
- <div className="flex gap-10 mt-14 pt-10 border-t border-[rgba(255,255,255,0.06)] flex-wrap jp-animate-in jp-d4">
3742
+ <div className="flex gap-10 mt-14 pt-10 border-t border-[var(--local-panel-border)] flex-wrap jp-animate-in jp-d4">
3671
3743
  {data.metrics.map((metric, idx) => (
3672
3744
  <div
3673
3745
  key={(metric as { id?: string }).id ?? idx}
@@ -3687,102 +3759,102 @@ export const Hero: React.FC<{ data: HeroData; settings?: HeroSettings }> = ({ da
3687
3759
  </div>
3688
3760
 
3689
3761
  {/* RIGHT — ICE mini-mockup */}
3690
- <div className="jp-animate-in jp-d2 rounded-[var(--local-radius-lg)] overflow-hidden border border-[rgba(255,255,255,0.10)] shadow-[0_0_0_1px_rgba(255,255,255,0.04),0_40px_80px_rgba(0,0,0,0.6),0_0_60px_rgba(59,130,246,0.08)]">
3762
+ <div className="jp-animate-in jp-d2 rounded-[var(--local-radius-lg)] overflow-hidden border border-[var(--local-panel-border)] shadow-[0_0_0_1px_rgba(255,255,255,0.04),0_40px_80px_rgba(0,0,0,0.6),0_0_60px_rgba(59,130,246,0.08)]">
3691
3763
  {/* Browser bar */}
3692
- <div className="bg-[#0f1923] px-3 py-2.5 flex items-center gap-1.5 border-b border-[rgba(255,255,255,0.05)]">
3764
+ <div className="bg-[var(--local-panel-bg)] px-3 py-2.5 flex items-center gap-1.5 border-b border-[var(--local-panel-border)]">
3693
3765
  <span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]" />
3694
3766
  <span className="w-2.5 h-2.5 rounded-full bg-[#f59e0b]" />
3695
3767
  <span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
3696
- <span className="mx-auto font-mono text-[0.60rem] text-[rgba(255,255,255,0.20)] bg-[rgba(255,255,255,0.04)] px-3 py-0.5 rounded-[var(--local-radius-sm)]">localhost:5173 · Studio</span>
3768
+ <span className="mx-auto font-mono text-[0.60rem] text-[var(--local-panel-text-faint)] bg-[var(--local-panel-deep)] px-3 py-0.5 rounded-[var(--local-radius-sm)]">localhost:5173 · Studio</span>
3697
3769
  </div>
3698
3770
  {/* Split: canvas + inspector */}
3699
- <div className="grid grid-cols-[1fr_260px] h-[360px] bg-[#060d1b]">
3771
+ <div className="grid grid-cols-[1fr_260px] h-[360px] bg-[var(--local-panel-deep)]">
3700
3772
  {/* Canvas */}
3701
- <div className="relative bg-gradient-to-br from-[#04090f] to-[#07112a] p-8 flex flex-col justify-center">
3702
- <span className="absolute top-2 right-2 font-mono text-[0.48rem] font-bold tracking-widest uppercase bg-[#3b82f6] text-white px-1.5 py-0.5">HERO | LOCAL</span>
3703
- <div className="absolute inset-0 border-2 border-[#3b82f6] pointer-events-none" />
3704
- <div className="inline-flex items-center gap-1.5 bg-[rgba(255,255,255,0.07)] border border-[rgba(255,255,255,0.10)] rounded-full px-2.5 py-1 font-mono text-[0.52rem] text-[#94a3b8] mb-3 w-fit">
3705
- <span className="w-1 h-1 rounded-full bg-[#22c55e]" />
3773
+ <div className="relative bg-gradient-to-br from-[var(--local-panel-deep)] to-[var(--local-panel-bg)] p-8 flex flex-col justify-center">
3774
+ <span className="absolute top-2 right-2 font-mono text-[0.48rem] font-bold tracking-widest uppercase bg-[var(--local-primary)] text-white px-1.5 py-0.5 rounded-[var(--local-radius-sm)]">HERO | LOCAL</span>
3775
+ <div className="absolute inset-0 border-2 border-[var(--local-primary)] pointer-events-none" />
3776
+ <div className="inline-flex items-center gap-1.5 bg-[var(--local-panel-bg)] border border-[var(--local-panel-border)] rounded-full px-2.5 py-1 font-mono text-[0.52rem] text-[var(--local-panel-text-soft)] mb-3 w-fit">
3777
+ <span className="w-1 h-1 rounded-full bg-[var(--local-primary)]" />
3706
3778
  {data.badge ?? 'Architecture v1.2'}
3707
3779
  </div>
3708
3780
  <div className="font-display font-black text-[1.5rem] leading-none text-white mb-0.5">
3709
3781
  {data.title}
3710
3782
  </div>
3711
3783
  {data.titleHighlight && (
3712
- <div className="font-display font-black text-[1.5rem] leading-none bg-gradient-to-r from-[#60a5fa] to-[#22d3ee] bg-clip-text text-transparent mb-3">
3784
+ <div className="font-display font-black text-[1.5rem] leading-none bg-gradient-to-r from-[var(--local-accent)] to-[var(--local-cyan)] bg-clip-text text-transparent mb-3">
3713
3785
  {data.titleHighlight}
3714
3786
  </div>
3715
3787
  )}
3716
- <p className="text-[0.65rem] text-[#475569] leading-[1.6] max-w-[220px] mb-3">
3788
+ <p className="text-[0.65rem] text-[var(--local-panel-text-faint)] leading-[1.6] max-w-[220px] mb-3">
3717
3789
  {data.description?.slice(0, 100)}…
3718
3790
  </p>
3719
3791
  <div className="flex gap-1.5">
3720
- <span className="text-[0.58rem] font-semibold bg-[#3b82f6] text-white px-2.5 py-1 rounded-[var(--local-radius-sm)]">Read the Docs</span>
3721
- <span className="text-[0.58rem] border border-[rgba(255,255,255,0.15)] text-[#94a3b8] px-2.5 py-1 rounded-[var(--local-radius-sm)]">View on NPM</span>
3792
+ <span className="text-[0.58rem] font-semibold bg-[var(--local-primary)] text-white px-2.5 py-1 rounded-[var(--local-radius-sm)]">Read the Docs</span>
3793
+ <span className="text-[0.58rem] border border-[var(--local-panel-border)] text-[var(--local-panel-text-soft)] px-2.5 py-1 rounded-[var(--local-radius-sm)]">View on NPM</span>
3722
3794
  </div>
3723
- <div className="flex gap-4 mt-3 pt-3 border-t border-[rgba(255,255,255,0.05)]">
3795
+ <div className="flex gap-4 mt-3 pt-3 border-t border-[var(--local-panel-border)]">
3724
3796
  {(data.metrics ?? []).map((m, i) => (
3725
3797
  <div key={i}>
3726
3798
  <div className="font-display font-black text-[1rem] text-white leading-none">{m.val}</div>
3727
- <div className="font-mono text-[0.44rem] uppercase tracking-widest text-[#334155] mt-0.5">{m.label}</div>
3799
+ <div className="font-mono text-[0.44rem] uppercase tracking-widest text-[var(--local-panel-text-faint)] mt-0.5">{m.label}</div>
3728
3800
  </div>
3729
3801
  ))}
3730
3802
  </div>
3731
3803
  </div>
3732
3804
  {/* Inspector */}
3733
- <div className="bg-[#08121f] border-l border-[rgba(255,255,255,0.06)] flex flex-col">
3734
- <div className="px-3.5 py-2.5 border-b border-[rgba(255,255,255,0.05)] flex items-start justify-between">
3805
+ <div className="bg-[var(--local-panel-bg)] border-l border-[var(--local-panel-border)] flex flex-col">
3806
+ <div className="px-3.5 py-2.5 border-b border-[var(--local-panel-border)] flex items-start justify-between">
3735
3807
  <div>
3736
3808
  <div className="font-display font-bold text-[0.80rem] text-white">Inspector</div>
3737
- <div className="flex items-center gap-1.5 mt-0.5 font-mono text-[0.54rem] text-[#3b82f6]">
3809
+ <div className="flex items-center gap-1.5 mt-0.5 font-mono text-[0.54rem] text-[var(--local-accent)]">
3738
3810
  <span className="font-bold">■ HERO</span>
3739
- <span className="text-[#1e3a5f]">|</span>
3740
- <span className="text-[#334155]">LOCAL</span>
3811
+ <span className="text-[var(--local-panel-text-faint)]">|</span>
3812
+ <span className="text-[var(--local-panel-text-faint)]">LOCAL</span>
3741
3813
  </div>
3742
3814
  </div>
3743
- <span className="font-mono text-[0.55rem] text-[#3b82f6]">+ Add section</span>
3815
+ <span className="font-mono text-[0.55rem] text-[var(--local-accent)]">+ Add section</span>
3744
3816
  </div>
3745
3817
  {/* Layers */}
3746
- <div className="border-b border-[rgba(255,255,255,0.05)]">
3747
- <div className="px-3.5 py-1.5 font-mono text-[0.50rem] uppercase tracking-widest text-[#1e3a5f] flex justify-between">
3748
- <span>Page Layers</span><span className="text-[#334155]">(8)</span>
3818
+ <div className="border-b border-[var(--local-panel-border)]">
3819
+ <div className="px-3.5 py-1.5 font-mono text-[0.50rem] uppercase tracking-widest text-[var(--local-panel-text-faint)] flex justify-between">
3820
+ <span>Page Layers</span><span className="text-[var(--local-panel-text-faint)]">(8)</span>
3749
3821
  </div>
3750
- <div className="flex items-center gap-2 px-3.5 py-1.5 bg-[rgba(59,130,246,0.08)]">
3751
- <span className="font-mono text-[0.50rem] uppercase tracking-wide text-[#3b82f6] w-9">HERO</span>
3752
- <span className="font-sans text-[0.60rem] text-[#e2e8f0] font-semibold flex-1 truncate">{data.title}</span>
3753
- <span className="w-1.5 h-1.5 rounded-full bg-[#22c55e]" />
3822
+ <div className="flex items-center gap-2 px-3.5 py-1.5 bg-[var(--local-accent-soft)]">
3823
+ <span className="font-mono text-[0.50rem] uppercase tracking-wide text-[var(--local-accent)] w-9">HERO</span>
3824
+ <span className="font-sans text-[0.60rem] text-[var(--local-text)] font-semibold flex-1 truncate">{data.title}</span>
3825
+ <span className="w-1.5 h-1.5 rounded-full bg-[var(--local-primary)]" />
3754
3826
  </div>
3755
3827
  <div className="flex items-center gap-2 px-3.5 py-1.5 opacity-50">
3756
- <span className="font-mono text-[0.50rem] uppercase tracking-wide text-[#1e3a5f] w-9">SOC</span>
3757
- <span className="font-sans text-[0.60rem] text-[#334155] flex-1 truncate">Separation of Concerns</span>
3828
+ <span className="font-mono text-[0.50rem] uppercase tracking-wide text-[var(--local-panel-text-faint)] w-9">SOC</span>
3829
+ <span className="font-sans text-[0.60rem] text-[var(--local-panel-text-faint)] flex-1 truncate">Separation of Concerns</span>
3758
3830
  </div>
3759
3831
  <div className="flex items-center gap-2 px-3.5 py-1.5 opacity-35">
3760
- <span className="font-mono text-[0.50rem] uppercase tracking-wide text-[#1e3a5f] w-9">CMS</span>
3761
- <span className="font-sans text-[0.60rem] text-[#334155] flex-1 truncate">In-Context Editing</span>
3832
+ <span className="font-mono text-[0.50rem] uppercase tracking-wide text-[var(--local-panel-text-faint)] w-9">CMS</span>
3833
+ <span className="font-sans text-[0.60rem] text-[var(--local-panel-text-faint)] flex-1 truncate">In-Context Editing</span>
3762
3834
  </div>
3763
3835
  </div>
3764
3836
  {/* Fields */}
3765
3837
  <div className="flex-1 px-3.5 py-3 flex flex-col gap-2.5 overflow-hidden">
3766
3838
  <div>
3767
- <div className="font-mono text-[0.50rem] uppercase tracking-widest text-[#334155] mb-1">Title</div>
3768
- <div className="bg-[rgba(59,130,246,0.05)] border border-[rgba(59,130,246,0.45)] rounded-[var(--local-radius-sm)] px-2 py-1.5 font-mono text-[0.58rem] text-[#e2e8f0] truncate">{data.title}</div>
3839
+ <div className="font-mono text-[0.50rem] uppercase tracking-widest text-[var(--local-panel-text-faint)] mb-1">Title</div>
3840
+ <div className="bg-[var(--local-accent-soft)] border border-[var(--local-panel-border-strong)] rounded-[var(--local-radius-sm)] px-2 py-1.5 font-mono text-[0.58rem] text-[var(--local-text)] truncate">{data.title}</div>
3769
3841
  </div>
3770
3842
  <div>
3771
- <div className="font-mono text-[0.50rem] uppercase tracking-widest text-[#334155] mb-1">Subtitle</div>
3772
- <div className="bg-[rgba(255,255,255,0.03)] border border-[rgba(255,255,255,0.07)] rounded-[var(--local-radius-sm)] px-2 py-1.5 font-mono text-[0.58rem] text-[#94a3b8] truncate">{data.titleHighlight}</div>
3843
+ <div className="font-mono text-[0.50rem] uppercase tracking-widest text-[var(--local-panel-text-faint)] mb-1">Subtitle</div>
3844
+ <div className="bg-[var(--local-panel-bg)] border border-[var(--local-panel-border)] rounded-[var(--local-radius-sm)] px-2 py-1.5 font-mono text-[0.58rem] text-[var(--local-panel-text-soft)] truncate">{data.titleHighlight}</div>
3773
3845
  </div>
3774
3846
  <div>
3775
- <div className="font-mono text-[0.50rem] uppercase tracking-widest text-[#334155] mb-1">Badge</div>
3776
- <div className="bg-[rgba(255,255,255,0.03)] border border-[rgba(255,255,255,0.07)] rounded-[var(--local-radius-sm)] px-2 py-1.5 font-mono text-[0.58rem] text-[#94a3b8] truncate">{data.badge}</div>
3847
+ <div className="font-mono text-[0.50rem] uppercase tracking-widest text-[var(--local-panel-text-faint)] mb-1">Badge</div>
3848
+ <div className="bg-[var(--local-panel-bg)] border border-[var(--local-panel-border)] rounded-[var(--local-radius-sm)] px-2 py-1.5 font-mono text-[0.58rem] text-[var(--local-panel-text-soft)] truncate">{data.badge}</div>
3777
3849
  </div>
3778
3850
  </div>
3779
3851
  {/* Bottom bar */}
3780
- <div className="px-3.5 py-2 border-t border-[rgba(255,255,255,0.05)] bg-[#060e1c] flex items-center gap-2">
3781
- <span className="w-1.5 h-1.5 rounded-full bg-[#22c55e]" />
3782
- <span className="font-mono text-[0.50rem] text-[#475569]">All Changes Saved</span>
3852
+ <div className="px-3.5 py-2 border-t border-[var(--local-panel-border)] bg-[var(--local-panel-bg)] flex items-center gap-2">
3853
+ <span className="w-1.5 h-1.5 rounded-full bg-[var(--local-primary)]" />
3854
+ <span className="font-mono text-[0.50rem] text-[var(--local-panel-text-soft)]">All Changes Saved</span>
3783
3855
  <div className="ml-auto flex gap-1.5">
3784
- <span className="font-mono text-[0.48rem] px-1.5 py-0.5 rounded-[var(--local-radius-sm)] border border-[rgba(59,130,246,0.3)] bg-[rgba(59,130,246,0.12)] text-[#60a5fa]">⬡ HTML</span>
3785
- <span className="font-mono text-[0.48rem] px-1.5 py-0.5 rounded-[var(--local-radius-sm)] border border-[rgba(255,255,255,0.08)] bg-[rgba(255,255,255,0.03)] text-[#94a3b8] opacity-50">{ } JSON</span>
3856
+ <span className="font-mono text-[0.48rem] px-1.5 py-0.5 rounded-[var(--local-radius-sm)] border border-[var(--local-panel-border-strong)] bg-[var(--local-accent-soft)] text-[var(--local-accent)]">⬡ HTML</span>
3857
+ <span className="font-mono text-[0.48rem] px-1.5 py-0.5 rounded-[var(--local-radius-sm)] border border-[var(--local-panel-border)] bg-[var(--local-panel-bg)] text-[var(--local-panel-text-soft)] opacity-50">{ } JSON</span>
3786
3858
  </div>
3787
3859
  </div>
3788
3860
  </div>
@@ -3850,6 +3922,7 @@ export const ImageBreak: React.FC<{ data: ImageBreakData; settings?: ImageBreakS
3850
3922
  '--local-bg': 'var(--background)',
3851
3923
  '--local-text': 'var(--foreground)',
3852
3924
  '--local-text-muted': 'var(--muted-foreground)',
3925
+ '--local-surface-overlay': 'color-mix(in oklch, var(--background) 78%, transparent)',
3853
3926
  } as React.CSSProperties}
3854
3927
  className="relative z-0 bg-[var(--local-bg)]"
3855
3928
  >
@@ -3864,10 +3937,10 @@ export const ImageBreak: React.FC<{ data: ImageBreakData; settings?: ImageBreakS
3864
3937
  />
3865
3938
  {data.caption && (
3866
3939
  <div
3867
- className="absolute bottom-0 inset-x-0 bg-black/60 backdrop-blur-sm px-6 py-4"
3940
+ className="absolute bottom-0 inset-x-0 bg-[var(--local-surface-overlay)] backdrop-blur-sm px-6 py-4"
3868
3941
  data-jp-field="caption"
3869
3942
  >
3870
- <p className="text-sm text-zinc-300 italic">{data.caption}</p>
3943
+ <p className="text-sm text-[var(--local-text-muted)] italic">{data.caption}</p>
3871
3944
  </div>
3872
3945
  )}
3873
3946
  </div>
@@ -3928,13 +4001,19 @@ export const PaSection: React.FC<{ data: PaSectionData; settings?: PaSectionSett
3928
4001
  '--local-text': 'var(--foreground)',
3929
4002
  '--local-text-muted': 'var(--muted-foreground)',
3930
4003
  '--local-primary': 'var(--primary)',
3931
- '--local-accent': 'var(--color-accent, #60a5fa)',
4004
+ '--local-accent': 'var(--accent)',
3932
4005
  '--local-deep': 'var(--background)',
4006
+ '--local-radius-md': 'var(--theme-radius-md)',
4007
+ '--local-radius-lg': 'var(--theme-radius-lg)',
4008
+ '--local-panel-bg': 'var(--demo-surface-soft)',
4009
+ '--local-panel-border': 'var(--demo-border-soft)',
4010
+ '--local-panel-border-strong': 'var(--demo-border-strong)',
4011
+ '--local-accent-soft': 'var(--demo-accent-soft)',
3933
4012
  } as React.CSSProperties}
3934
4013
  className="relative z-0 py-28 bg-[var(--local-bg)]"
3935
4014
  >
3936
- <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
3937
- <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
4015
+ <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border-strong)] to-transparent" />
4016
+ <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border-strong)] to-transparent" />
3938
4017
  <div className="max-w-[1200px] mx-auto px-8">
3939
4018
  {data.label && (
3940
4019
  <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
@@ -3960,7 +4039,7 @@ export const PaSection: React.FC<{ data: PaSectionData; settings?: PaSectionSett
3960
4039
  {data.badges.map((badge, idx) => (
3961
4040
  <span
3962
4041
  key={idx}
3963
- className="inline-flex items-center gap-1.5 bg-[rgba(34,197,94,0.08)] border border-[rgba(34,197,94,0.2)] text-[#4ade80] px-3 py-1.5 rounded-md text-[0.78rem] font-semibold"
4042
+ className="inline-flex items-center gap-1.5 bg-[var(--local-accent-soft)] border border-[var(--local-panel-border-strong)] text-[var(--local-accent)] px-3 py-1.5 rounded-[var(--local-radius-md)] text-[0.78rem] font-semibold"
3964
4043
  data-jp-item-id={(badge as { id?: string }).id ?? `legacy-${idx}`}
3965
4044
  data-jp-item-field="badges"
3966
4045
  >
@@ -3970,7 +4049,7 @@ export const PaSection: React.FC<{ data: PaSectionData; settings?: PaSectionSett
3970
4049
  </div>
3971
4050
  )}
3972
4051
  </div>
3973
- <div className="border border-[rgba(255,255,255,0.06)] rounded-lg p-12 bg-[rgba(255,255,255,0.02)] text-center">
4052
+ <div className="border border-[var(--local-panel-border)] rounded-[var(--local-radius-lg)] p-12 bg-[var(--local-panel-bg)] text-center">
3974
4053
  {data.engines && data.engines.length >= 2 && (
3975
4054
  <div className="flex items-center justify-center gap-6 mb-8">
3976
4055
  {data.engines.map((engine, idx) => (
@@ -3981,8 +4060,8 @@ export const PaSection: React.FC<{ data: PaSectionData; settings?: PaSectionSett
3981
4060
  <div
3982
4061
  className={
3983
4062
  engine.variant === 'tailwind'
3984
- ? 'px-6 py-4 rounded-xl font-bold text-[0.95rem] border bg-[rgba(59,130,246,0.08)] border-[rgba(59,130,246,0.2)] text-[#60a5fa]'
3985
- : 'px-6 py-4 rounded-xl font-bold text-[0.95rem] border bg-[rgba(34,197,94,0.08)] border-[rgba(34,197,94,0.2)] text-[#4ade80]'
4063
+ ? 'px-6 py-4 rounded-[var(--local-radius-md)] font-bold text-[0.95rem] border bg-[var(--local-accent-soft)] border-[var(--local-panel-border-strong)] text-[var(--local-accent)]'
4064
+ : 'px-6 py-4 rounded-[var(--local-radius-md)] font-bold text-[0.95rem] border bg-[var(--local-panel-bg)] border-[var(--local-panel-border)] text-[var(--local-primary)]'
3986
4065
  }
3987
4066
  data-jp-item-id={(engine as { id?: string }).id ?? `legacy-${idx}`}
3988
4067
  data-jp-item-field="engines"
@@ -3994,7 +4073,7 @@ export const PaSection: React.FC<{ data: PaSectionData; settings?: PaSectionSett
3994
4073
  </div>
3995
4074
  )}
3996
4075
  {data.codeSnippet && (
3997
- <div className="font-mono text-[0.85rem] text-[var(--local-text-muted)] bg-[var(--local-deep)] p-4 rounded-lg text-left border border-[rgba(255,255,255,0.04)]" data-jp-field="codeSnippet">
4076
+ <div className="font-mono text-[0.85rem] text-[var(--local-text-muted)] bg-[var(--local-deep)] p-4 rounded-[var(--local-radius-lg)] text-left border border-[var(--local-panel-border)]" data-jp-field="codeSnippet">
3998
4077
  <pre className="whitespace-pre-wrap m-0">{data.codeSnippet}</pre>
3999
4078
  <div className="mt-4 text-[0.75rem] text-center opacity-50">
4000
4079
  Same JSON. Different Render Engine.
@@ -4085,7 +4164,7 @@ export const Philosophy: React.FC<{ data: PhilosophyData; settings?: PhilosophyS
4085
4164
  '--local-bg': 'var(--background)',
4086
4165
  '--local-text': 'var(--foreground)',
4087
4166
  '--local-text-muted': 'var(--muted-foreground)',
4088
- '--local-accent': 'var(--color-accent, #60a5fa)',
4167
+ '--local-accent': 'var(--accent)',
4089
4168
  '--local-primary': 'var(--primary)',
4090
4169
  } as React.CSSProperties}
4091
4170
  className="relative z-0 py-28 bg-[var(--local-bg)]"
@@ -4156,15 +4235,15 @@ import { Icon, isIconName } from '@/lib/IconResolver';
4156
4235
  import type { PillarsGridData, PillarsGridSettings, PillarIconVariant, PillarTagVariant } from './types';
4157
4236
 
4158
4237
  const iconVariantStyles: Record<PillarIconVariant, string> = {
4159
- split: 'bg-[rgba(59,130,246,0.1)] text-[#60a5fa]',
4160
- registry: 'bg-[rgba(34,211,238,0.1)] text-[#22d3ee]',
4161
- federation: 'bg-[rgba(168,85,247,0.1)] text-[#c084fc]',
4238
+ split: 'bg-[var(--local-accent-soft)] text-[var(--local-accent)]',
4239
+ registry: 'bg-[var(--local-cyan-soft)] text-[var(--local-cyan)]',
4240
+ federation: 'bg-[var(--local-panel-bg)] text-[var(--local-primary)]',
4162
4241
  };
4163
4242
 
4164
4243
  const tagVariantStyles: Record<PillarTagVariant, string> = {
4165
- core: 'bg-[rgba(59,130,246,0.1)] text-[#60a5fa]',
4166
- pattern: 'bg-[rgba(34,211,238,0.1)] text-[#22d3ee]',
4167
- enterprise: 'bg-[rgba(168,85,247,0.1)] text-[#c084fc]',
4244
+ core: 'bg-[var(--local-accent-soft)] text-[var(--local-accent)]',
4245
+ pattern: 'bg-[var(--local-cyan-soft)] text-[var(--local-cyan)]',
4246
+ enterprise: 'bg-[var(--local-panel-bg)] text-[var(--local-primary)]',
4168
4247
  };
4169
4248
 
4170
4249
  export const PillarsGrid: React.FC<{ data: PillarsGridData; settings?: PillarsGridSettings }> = ({ data }) => {
@@ -4175,12 +4254,20 @@ export const PillarsGrid: React.FC<{ data: PillarsGridData; settings?: PillarsGr
4175
4254
  '--local-text': 'var(--foreground)',
4176
4255
  '--local-text-muted': 'var(--muted-foreground)',
4177
4256
  '--local-primary': 'var(--primary)',
4178
- '--local-accent': 'var(--color-accent, #60a5fa)',
4257
+ '--local-accent': 'var(--accent)',
4258
+ '--local-cyan': 'var(--secondary)',
4179
4259
  '--local-border': 'var(--border)',
4260
+ '--local-radius-md': 'var(--theme-radius-md)',
4261
+ '--local-radius-lg': 'var(--theme-radius-lg)',
4262
+ '--local-panel-bg': 'var(--demo-surface-soft)',
4263
+ '--local-panel-border': 'var(--demo-border-soft)',
4264
+ '--local-panel-border-strong': 'var(--demo-border-strong)',
4265
+ '--local-accent-soft': 'var(--demo-accent-soft)',
4266
+ '--local-cyan-soft': 'color-mix(in oklch, var(--secondary) 14%, transparent)',
4180
4267
  } as React.CSSProperties}
4181
4268
  className="relative z-0 py-28 bg-[var(--local-bg)]"
4182
4269
  >
4183
- <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[80%] h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.15)] to-transparent" />
4270
+ <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[80%] h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border-strong)] to-transparent" />
4184
4271
  <div className="max-w-[1200px] mx-auto px-8">
4185
4272
  {data.label && (
4186
4273
  <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
@@ -4200,13 +4287,13 @@ export const PillarsGrid: React.FC<{ data: PillarsGridData; settings?: PillarsGr
4200
4287
  {data.pillars.map((pillar, idx) => (
4201
4288
  <div
4202
4289
  key={pillar.id ?? idx}
4203
- className="jp-pillar-card group relative border border-[rgba(255,255,255,0.06)] rounded-lg p-10 bg-[rgba(255,255,255,0.015)] transition-all duration-300 overflow-hidden hover:border-[rgba(59,130,246,0.2)] hover:-translate-y-1 hover:bg-[rgba(59,130,246,0.03)]"
4290
+ className="jp-pillar-card group relative border border-[var(--local-panel-border)] rounded-[var(--local-radius-lg)] p-10 bg-[var(--local-panel-bg)] transition-all duration-300 overflow-hidden hover:border-[var(--local-panel-border-strong)] hover:-translate-y-1 hover:bg-[var(--local-accent-soft)]"
4204
4291
  data-jp-item-id={pillar.id ?? `legacy-${idx}`}
4205
4292
  data-jp-item-field="pillars"
4206
4293
  >
4207
- <div className="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-[var(--local-primary)] to-[#22d3ee] opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
4294
+ <div className="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-[var(--local-primary)] to-[var(--local-cyan)] opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
4208
4295
  <div className={cn(
4209
- 'w-12 h-12 rounded-xl flex items-center justify-center mb-6 text-xl font-bold',
4296
+ 'w-12 h-12 rounded-[var(--local-radius-md)] flex items-center justify-center mb-6 text-xl font-bold',
4210
4297
  iconVariantStyles[pillar.iconVariant]
4211
4298
  )}>
4212
4299
  {pillar.icon && isIconName(pillar.icon) ? (
@@ -4288,10 +4375,10 @@ import { cn } from '@/lib/utils';
4288
4375
  import type { ProblemStatementData, ProblemStatementSettings, SiloBlockVariant } from './types';
4289
4376
 
4290
4377
  const variantStyles: Record<SiloBlockVariant, string> = {
4291
- red: 'bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)] text-[#f87171]',
4292
- amber: 'bg-[rgba(245,158,11,0.08)] border-[rgba(245,158,11,0.3)] text-[#fbbf24]',
4293
- green: 'bg-[rgba(34,197,94,0.08)] border-[rgba(34,197,94,0.3)] text-[#4ade80]',
4294
- blue: 'bg-[rgba(59,130,246,0.08)] border-[rgba(59,130,246,0.3)] text-[#60a5fa]',
4378
+ red: 'bg-[var(--local-panel-bg)] border-[var(--local-panel-border)] text-[var(--local-text-muted)]',
4379
+ amber: 'bg-[var(--local-panel-bg)] border-[var(--local-panel-border)] text-[var(--local-text-muted)]',
4380
+ green: 'bg-[var(--local-accent-soft)] border-[var(--local-panel-border-strong)] text-[var(--local-accent)]',
4381
+ blue: 'bg-[var(--local-accent-soft)] border-[var(--local-panel-border-strong)] text-[var(--local-accent)]',
4295
4382
  };
4296
4383
 
4297
4384
  export const ProblemStatement: React.FC<{ data: ProblemStatementData; settings?: ProblemStatementSettings }> = ({ data }) => {
@@ -4303,12 +4390,19 @@ export const ProblemStatement: React.FC<{ data: ProblemStatementData; settings?:
4303
4390
  '--local-text': 'var(--foreground)',
4304
4391
  '--local-text-muted': 'var(--muted-foreground)',
4305
4392
  '--local-border': 'var(--border)',
4393
+ '--local-radius-md': 'var(--theme-radius-md)',
4394
+ '--local-radius-lg': 'var(--theme-radius-lg)',
4395
+ '--local-panel-bg': 'var(--demo-surface-soft)',
4396
+ '--local-panel-border': 'var(--demo-border-soft)',
4397
+ '--local-panel-border-strong': 'var(--demo-border-strong)',
4398
+ '--local-accent': 'var(--accent)',
4399
+ '--local-accent-soft': 'var(--demo-accent-soft)',
4306
4400
  } as React.CSSProperties}
4307
4401
  className="jp-problem relative z-0 py-28 bg-gradient-to-b from-[var(--local-bg)] to-[var(--local-surface)]"
4308
4402
  >
4309
4403
  <div className="max-w-[1200px] mx-auto px-8">
4310
4404
  <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
4311
- <div className="relative h-[360px] border border-[rgba(255,255,255,0.06)] rounded-lg bg-[rgba(255,255,255,0.02)] overflow-hidden flex items-center justify-center">
4405
+ <div className="relative h-[360px] border border-[var(--local-panel-border)] rounded-[var(--local-radius-lg)] bg-[var(--local-panel-bg)] overflow-hidden flex items-center justify-center">
4312
4406
  <div className="text-center p-8">
4313
4407
  {data.siloGroups.map((group, gIdx) => (
4314
4408
  <div
@@ -4322,7 +4416,7 @@ export const ProblemStatement: React.FC<{ data: ProblemStatementData; settings?:
4322
4416
  <span
4323
4417
  key={(block as { id?: string }).id ?? bIdx}
4324
4418
  className={cn(
4325
- 'inline-block px-4 py-2 rounded-lg text-[0.8rem] font-semibold border',
4419
+ 'inline-block px-4 py-2 rounded-[var(--local-radius-md)] text-[0.8rem] font-semibold border',
4326
4420
  variantStyles[block.variant]
4327
4421
  )}
4328
4422
  data-jp-item-id={(block as { id?: string }).id ?? `legacy-${bIdx}`}
@@ -4423,8 +4517,17 @@ export const ProductTriad: React.FC<{ data: ProductTriadData; settings?: Product
4423
4517
  '--local-text': 'var(--foreground)',
4424
4518
  '--local-text-muted': 'var(--muted-foreground)',
4425
4519
  '--local-primary': 'var(--primary)',
4426
- '--local-accent': 'var(--color-accent, #60a5fa)',
4520
+ '--local-accent': 'var(--accent)',
4427
4521
  '--local-border': 'var(--border)',
4522
+ '--local-radius-sm': 'var(--theme-radius-sm)',
4523
+ '--local-radius-md': 'var(--theme-radius-md)',
4524
+ '--local-radius-lg': 'var(--theme-radius-lg)',
4525
+ '--local-panel-bg': 'var(--demo-surface-soft)',
4526
+ '--local-panel-bg-featured': 'var(--demo-accent-soft)',
4527
+ '--local-panel-border': 'var(--demo-border-soft)',
4528
+ '--local-panel-border-strong': 'var(--demo-border-strong)',
4529
+ '--local-panel-hover': 'var(--demo-accent-soft)',
4530
+ '--local-panel-text-soft': 'var(--demo-text-soft)',
4428
4531
  } as React.CSSProperties}
4429
4532
  className="relative z-0 py-28 bg-[var(--local-bg)]"
4430
4533
  >
@@ -4450,10 +4553,10 @@ export const ProductTriad: React.FC<{ data: ProductTriadData; settings?: Product
4450
4553
  <div
4451
4554
  key={product.id ?? idx}
4452
4555
  className={cn(
4453
- 'relative border rounded-lg p-10 transition-all duration-300 hover:-translate-y-1',
4556
+ 'relative border rounded-[var(--local-radius-lg)] p-10 transition-all duration-300 hover:-translate-y-1',
4454
4557
  product.featured
4455
- ? 'border-[rgba(59,130,246,0.3)] bg-gradient-to-b from-[rgba(59,130,246,0.06)] to-[rgba(59,130,246,0.01)] hover:border-[rgba(59,130,246,0.4)]'
4456
- : 'border-[rgba(255,255,255,0.06)] bg-[rgba(255,255,255,0.015)] hover:border-[rgba(59,130,246,0.2)]'
4558
+ ? 'border-[var(--local-panel-border-strong)] bg-[var(--local-panel-bg-featured)] hover:border-[var(--local-accent)]'
4559
+ : 'border-[var(--local-panel-border)] bg-[var(--local-panel-bg)] hover:border-[var(--local-panel-border-strong)]'
4457
4560
  )}
4458
4561
  data-jp-item-id={product.id ?? `legacy-${idx}`}
4459
4562
  data-jp-item-field="products"
@@ -4477,14 +4580,14 @@ export const ProductTriad: React.FC<{ data: ProductTriadData; settings?: Product
4477
4580
  </span>
4478
4581
  )}
4479
4582
  </div>
4480
- <div className="text-[0.85rem] text-[var(--local-text-muted)] mb-6 pb-6 border-b border-[rgba(255,255,255,0.06)]">
4583
+ <div className="text-[0.85rem] text-[var(--local-text-muted)] mb-6 pb-6 border-b border-[var(--local-panel-border)]">
4481
4584
  {product.delivery}
4482
4585
  </div>
4483
4586
  <ul className="mb-8 space-y-0">
4484
4587
  {product.features.map((feature, fIdx) => (
4485
4588
  <li
4486
4589
  key={fIdx}
4487
- className="text-[0.9rem] text-[#cbd5e1] py-1.5 pl-6 relative before:content-['✓'] before:absolute before:left-0 before:text-[var(--local-accent)] before:font-bold before:text-[0.8rem]"
4590
+ className="text-[0.9rem] text-[var(--local-panel-text-soft)] py-1.5 pl-6 relative before:content-['✓'] before:absolute before:left-0 before:text-[var(--local-accent)] before:font-bold before:text-[0.8rem]"
4488
4591
  >
4489
4592
  {feature.text}
4490
4593
  </li>
@@ -4494,10 +4597,10 @@ export const ProductTriad: React.FC<{ data: ProductTriadData; settings?: Product
4494
4597
  <a
4495
4598
  href={product.ctaHref}
4496
4599
  className={cn(
4497
- 'block text-center py-3 rounded-[5px] no-underline font-semibold text-[0.95rem] transition-all duration-200',
4600
+ 'block text-center py-3 rounded-[var(--local-radius-md)] no-underline font-semibold text-[0.95rem] transition-all duration-200',
4498
4601
  product.ctaVariant === 'primary'
4499
4602
  ? 'bg-[var(--local-primary)] text-white hover:brightness-110 hover:-translate-y-px'
4500
- : 'bg-[rgba(255,255,255,0.05)] text-[#e2e8f0] border border-[rgba(255,255,255,0.1)] hover:bg-[rgba(255,255,255,0.08)] hover:border-[rgba(255,255,255,0.2)]'
4603
+ : 'bg-[var(--local-panel-bg)] text-[var(--local-panel-text-soft)] border border-[var(--local-panel-border)] hover:bg-[var(--local-panel-hover)] hover:border-[var(--local-panel-border-strong)]'
4501
4604
  )}
4502
4605
  >
4503
4606
  {product.ctaLabel}
@@ -5921,10 +6024,10 @@ const Btn: React.FC<{
5921
6024
  onMouseDown={(e) => e.preventDefault()}
5922
6025
  onClick={onClick}
5923
6026
  className={[
5924
- 'inline-flex h-7 min-w-7 items-center justify-center rounded-md px-2 text-xs transition-colors',
6027
+ 'inline-flex h-7 min-w-7 items-center justify-center rounded-[var(--local-radius-sm)] px-2 text-xs transition-colors',
5925
6028
  active
5926
- ? 'bg-zinc-700/70 text-zinc-100'
5927
- : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200',
6029
+ ? 'bg-[var(--local-toolbar-active-bg)] text-[var(--local-text)]'
6030
+ : 'text-[var(--local-toolbar-text)] hover:bg-[var(--local-toolbar-hover-bg)] hover:text-[var(--local-text)]',
5928
6031
  ].join(' ')}
5929
6032
  >
5930
6033
  {children}
@@ -5932,7 +6035,7 @@ const Btn: React.FC<{
5932
6035
  );
5933
6036
 
5934
6037
  const Sep: React.FC = () => (
5935
- <span className="mx-0.5 h-5 w-px shrink-0 bg-zinc-800" aria-hidden />
6038
+ <span className="mx-0.5 h-5 w-px shrink-0 bg-[var(--local-toolbar-border)]" aria-hidden />
5936
6039
  );
5937
6040
 
5938
6041
  // ── Image extension with upload metadata ──────────────────────────────────────
@@ -6372,7 +6475,7 @@ const StudioTiptapEditor: React.FC<{ data: TiptapData }> = ({ data }) => {
6372
6475
  {editor && (
6373
6476
  <div
6374
6477
  data-jp-ignore-select="true"
6375
- className="sticky top-0 z-[65] border-b border-zinc-800 bg-zinc-950"
6478
+ className="sticky top-0 z-[65] border-b border-[var(--local-toolbar-border)] bg-[var(--local-toolbar-bg)]"
6376
6479
  >
6377
6480
  {/* ── Main toolbar ── */}
6378
6481
  <div className="flex flex-wrap items-center justify-center gap-1 p-2">
@@ -6505,8 +6608,8 @@ const StudioTiptapEditor: React.FC<{ data: TiptapData }> = ({ data }) => {
6505
6608
 
6506
6609
  {/* ── Link popover row (replaces window.prompt) ── */}
6507
6610
  {linkOpen && (
6508
- <div className="flex items-center gap-2 border-t border-zinc-700 px-2 py-1.5">
6509
- <Link2 size={12} className="shrink-0 text-zinc-500" />
6611
+ <div className="flex items-center gap-2 border-t border-[var(--local-toolbar-border)] px-2 py-1.5">
6612
+ <Link2 size={12} className="shrink-0 text-[var(--local-toolbar-text)]" />
6510
6613
  <input
6511
6614
  ref={linkInputRef}
6512
6615
  type="url"
@@ -6520,13 +6623,13 @@ const StudioTiptapEditor: React.FC<{ data: TiptapData }> = ({ data }) => {
6520
6623
  if (e.key === 'Escape') setLinkOpen(false);
6521
6624
  }}
6522
6625
  placeholder="https://example.com"
6523
- className="min-w-0 flex-1 bg-transparent text-xs text-zinc-100 placeholder:text-zinc-500 outline-none"
6626
+ className="min-w-0 flex-1 bg-transparent text-xs text-[var(--local-text)] placeholder:text-[var(--local-toolbar-text)] outline-none"
6524
6627
  />
6525
6628
  <button
6526
6629
  type="button"
6527
6630
  onMouseDown={(e) => e.preventDefault()}
6528
6631
  onClick={applyLink}
6529
- className="shrink-0 rounded px-2 py-0.5 text-xs bg-blue-600 hover:bg-blue-500 text-white transition-colors"
6632
+ className="shrink-0 rounded-[var(--local-radius-sm)] px-2 py-0.5 text-xs bg-[var(--local-primary)] hover:brightness-110 text-white transition-colors"
6530
6633
  >
6531
6634
  Set
6532
6635
  </button>
@@ -6534,7 +6637,7 @@ const StudioTiptapEditor: React.FC<{ data: TiptapData }> = ({ data }) => {
6534
6637
  type="button"
6535
6638
  onMouseDown={(e) => e.preventDefault()}
6536
6639
  onClick={() => setLinkOpen(false)}
6537
- className="shrink-0 rounded px-2 py-0.5 text-xs bg-zinc-700 hover:bg-zinc-600 text-zinc-200 transition-colors"
6640
+ className="shrink-0 rounded-[var(--local-radius-sm)] px-2 py-0.5 text-xs bg-[var(--local-toolbar-active-bg)] hover:bg-[var(--local-toolbar-hover-bg)] text-[var(--local-text)] transition-colors"
6538
6641
  >
6539
6642
  Cancel
6540
6643
  </button>
@@ -6571,7 +6674,25 @@ const PublicTiptapContent: React.FC<{ content: string }> = ({ content }) => (
6571
6674
  export const Tiptap: React.FC<{ data: TiptapData; settings?: TiptapSettings }> = ({ data }) => {
6572
6675
  const { mode } = useStudio();
6573
6676
  return (
6574
- <section className="w-full py-12">
6677
+ <section
6678
+ style={{
6679
+ '--local-bg': 'var(--background)',
6680
+ '--local-text': 'var(--foreground)',
6681
+ '--local-text-muted': 'var(--muted-foreground)',
6682
+ '--local-primary': 'var(--primary)',
6683
+ '--local-accent': 'var(--accent)',
6684
+ '--local-border': 'var(--border)',
6685
+ '--local-radius-sm': 'var(--theme-radius-sm)',
6686
+ '--local-radius-md': 'var(--theme-radius-md)',
6687
+ '--local-radius-lg': 'var(--theme-radius-lg)',
6688
+ '--local-toolbar-bg': 'var(--demo-surface-strong)',
6689
+ '--local-toolbar-hover-bg': 'var(--demo-surface)',
6690
+ '--local-toolbar-active-bg': 'var(--demo-accent-soft)',
6691
+ '--local-toolbar-border': 'var(--demo-border-soft)',
6692
+ '--local-toolbar-text': 'var(--demo-text-faint)',
6693
+ } as React.CSSProperties}
6694
+ className="w-full py-12 bg-[var(--local-bg)]"
6695
+ >
6575
6696
  <div className="container mx-auto px-6 max-w-3xl">
6576
6697
  {mode === 'studio' ? (
6577
6698
  <StudioTiptapEditor data={data} />
@@ -7233,9 +7354,9 @@ cat << 'END_OF_FILE_CONTENT' > "src/data/config/site.json"
7233
7354
  "id": "global-header",
7234
7355
  "type": "header",
7235
7356
  "data": {
7236
- "logoText": "Json",
7237
- "logoHighlight": "Pages",
7238
- "logoIconText": "{ }",
7357
+ "logoText": "Olon",
7358
+ "logoHighlight": "JS",
7359
+ "logoIconText": "",
7239
7360
  "links": [
7240
7361
  {
7241
7362
  "label": "Architecture",
@@ -7300,7 +7421,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/data/config/theme.json"
7300
7421
  "primary": "#3b82f6",
7301
7422
  "secondary": "#22d3ee",
7302
7423
  "accent": "#60a5fa",
7303
- "background": "#060d1b",
7424
+ "background": "#0f1115",
7304
7425
  "surface": "#0b1529",
7305
7426
  "surfaceAlt": "#101e38",
7306
7427
  "text": "#e2e8f0",
@@ -7312,13 +7433,13 @@ cat << 'END_OF_FILE_CONTENT' > "src/data/config/theme.json"
7312
7433
  "primary": "'Instrument Sans', system-ui, sans-serif",
7313
7434
  "mono": "'JetBrains Mono', monospace",
7314
7435
  "display": "'Bricolage Grotesque', system-ui, sans-serif",
7315
- "display-2":"'Instrument Sans'"
7436
+ "display-2": "'Instrument Sans'"
7316
7437
  }
7317
7438
  },
7318
7439
  "borderRadius": {
7319
- "sm": "4px",
7320
- "md": "8px",
7321
- "lg": "36px"
7440
+ "sm": "3px",
7441
+ "md": "6px",
7442
+ "lg": "12px"
7322
7443
  }
7323
7444
  }
7324
7445
  }
@@ -8307,9 +8428,9 @@ cat << 'END_OF_FILE_CONTENT' > "src/index.css"
8307
8428
  --color-accent: var(--accent);
8308
8429
  --color-border: var(--border);
8309
8430
 
8310
- --radius-lg: var(--radius);
8311
- --radius-md: calc(var(--radius) - 2px);
8312
- --radius-sm: calc(var(--radius) - 4px);
8431
+ --radius-lg: var(--theme-radius-lg);
8432
+ --radius-md: var(--theme-radius-md);
8433
+ --radius-sm: var(--theme-radius-sm);
8313
8434
 
8314
8435
  --font-primary: var(--theme-font-primary);
8315
8436
  --font-mono: var(--theme-font-mono);
@@ -8338,7 +8459,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/index.css"
8338
8459
  --muted: var(--theme-surface-alt);
8339
8460
  --muted-foreground: var(--theme-text-muted);
8340
8461
  --border: var(--theme-border);
8341
- --radius: 3.45rem;
8462
+ --radius: var(--theme-radius-lg);
8342
8463
 
8343
8464
  /*
8344
8465
  🔧 ACCENT CHAIN — Forward-compatible workaround
@@ -8348,6 +8469,22 @@ cat << 'END_OF_FILE_CONTENT' > "src/index.css"
8348
8469
  Falls back to --theme-primary if accent is undefined.
8349
8470
  */
8350
8471
  --accent: var(--theme-accent, var(--theme-primary));
8472
+
8473
+ /*
8474
+ Shared demo/mockup helpers
8475
+ These are still theme-derived, but give the tenant a stable semantic
8476
+ palette for browser/terminal/inspector style surfaces.
8477
+ */
8478
+ --demo-surface: color-mix(in oklch, var(--card) 86%, var(--background));
8479
+ --demo-surface-soft: color-mix(in oklch, var(--card) 72%, var(--background));
8480
+ --demo-surface-strong: color-mix(in oklch, var(--background) 82%, black);
8481
+ --demo-surface-deep: color-mix(in oklch, var(--background) 70%, black);
8482
+ --demo-border-soft: color-mix(in oklch, var(--foreground) 8%, transparent);
8483
+ --demo-border-strong: color-mix(in oklch, var(--primary) 24%, transparent);
8484
+ --demo-accent-soft: color-mix(in oklch, var(--primary) 10%, transparent);
8485
+ --demo-accent-strong: color-mix(in oklch, var(--primary) 18%, transparent);
8486
+ --demo-text-soft: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
8487
+ --demo-text-faint: color-mix(in oklch, var(--muted-foreground) 72%, transparent);
8351
8488
  }
8352
8489
 
8353
8490
  @layer base {
@@ -8488,12 +8625,12 @@ html {
8488
8625
  font-family: var(--font-mono, ui-monospace, monospace);
8489
8626
  font-size: 0.875em;
8490
8627
  background: color-mix(in oklch, var(--foreground) 8%, transparent);
8491
- border-radius: 0.25em;
8628
+ border-radius: var(--theme-radius-sm);
8492
8629
  padding: 0.1em 0.35em;
8493
8630
  }
8494
8631
  .jp-tiptap-content pre {
8495
8632
  background: color-mix(in oklch, var(--background) 60%, black);
8496
- border-radius: 0.5em;
8633
+ border-radius: var(--theme-radius-lg);
8497
8634
  padding: 1em 1.25em;
8498
8635
  overflow-x: auto;
8499
8636
  }
@@ -8517,7 +8654,7 @@ html {
8517
8654
  margin: 1.5em 0;
8518
8655
  }
8519
8656
 
8520
- .jp-tiptap-content img { max-width: 100%; height: auto; border-radius: 0.5rem; }
8657
+ .jp-tiptap-content img { max-width: 100%; height: auto; border-radius: var(--theme-radius-lg); }
8521
8658
 
8522
8659
  /* ==========================================================================
8523
8660
  TIPTAP / PROSEMIRROR — Editor typography
@@ -8548,12 +8685,12 @@ html {
8548
8685
  font-family: var(--font-mono, ui-monospace, monospace);
8549
8686
  font-size: 0.875em;
8550
8687
  background: color-mix(in oklch, var(--foreground) 8%, transparent);
8551
- border-radius: 0.25em;
8688
+ border-radius: var(--theme-radius-sm);
8552
8689
  padding: 0.1em 0.35em;
8553
8690
  }
8554
8691
  .jp-simple-editor .ProseMirror pre {
8555
8692
  background: color-mix(in oklch, var(--background) 60%, black);
8556
- border-radius: 0.5em;
8693
+ border-radius: var(--theme-radius-lg);
8557
8694
  padding: 1em 1.25em;
8558
8695
  overflow-x: auto;
8559
8696
  }
@@ -8583,18 +8720,18 @@ html {
8583
8720
  .jp-simple-editor .ProseMirror img {
8584
8721
  max-width: 100%;
8585
8722
  height: auto;
8586
- border-radius: 0.5rem;
8723
+ border-radius: var(--theme-radius-lg);
8587
8724
  }
8588
8725
 
8589
8726
  .jp-simple-editor .ProseMirror img[data-uploading="true"] {
8590
8727
  opacity: 0.6;
8591
8728
  filter: grayscale(0.25);
8592
- outline: 2px dashed rgb(59 130 246 / 0.7);
8729
+ outline: 2px dashed color-mix(in oklch, var(--primary) 70%, transparent);
8593
8730
  outline-offset: 2px;
8594
8731
  }
8595
8732
 
8596
8733
  .jp-simple-editor .ProseMirror img[data-upload-error="true"] {
8597
- outline: 2px solid rgb(239 68 68 / 0.8);
8734
+ outline: 2px solid color-mix(in oklch, var(--accent) 70%, transparent);
8598
8735
  outline-offset: 2px;
8599
8736
  }
8600
8737