Fix host portal using wrong CSS variables; v2.0.10

Replaced --color-bg/surface/border/input-bg fallbacks (which don't exist
in the site's CSS) with the actual --brand-* tokens so the portal
renders in the site's dark theme instead of light fallback colors.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "2.0.9",
+  "version": "2.0.10",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/NuggetsHostPortal.tsx

@@ -336,22 +336,22 @@ const s: Record<string, React.CSSProperties> = {
     alignItems: 'center',
     justifyContent: 'center',
     padding: '2rem 1rem',
-    background: 'var(--color-bg, #f7f5f0)',
+    background: 'var(--brand-black, #0a0a08)',
   },
   card: {
-    background: 'var(--color-surface, #fff)',
+    background: 'var(--brand-black-2, #0f0f0c)',
-    border: '1px solid var(--color-border, #e5e0d5)',
+    border: '1px solid var(--brand-border, #2a2518)',
     borderRadius: 16,
     padding: '2.25rem 2rem',
     width: '100%',
     maxWidth: 420,
-    boxShadow: '0 4px 24px rgba(0,0,0,0.06)',
+    boxShadow: '0 4px 24px rgba(0,0,0,0.4)',
   },
   logoRow: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 },
   logoEmoji: { fontSize: '1.5rem' },
-  logoTitle: { fontWeight: 700, fontSize: '1rem' },
+  logoTitle: { fontWeight: 700, fontSize: '1rem', color: 'var(--brand-gold, #c9a84c)' },
-  heading: { fontSize: '1.4rem', fontWeight: 700, margin: '0 0 6px' },
+  heading: { fontSize: '1.4rem', fontWeight: 700, margin: '0 0 6px', color: 'var(--brand-warm-white, #f0ead8)' },
-  subText: { color: '#888', fontSize: '0.88rem', margin: '0 0 1.4rem' },
+  subText: { color: 'var(--brand-muted, #b0a48c)', fontSize: '0.88rem', margin: '0 0 1.4rem' },
   header: {
     display: 'flex',
     alignItems: 'flex-start',
@@ -361,66 +361,69 @@ const s: Record<string, React.CSSProperties> = {
     flexWrap: 'wrap',
   },
   headerRight: { display: 'flex', alignItems: 'center', gap: 10, paddingTop: 2 },
-  welcomeText: { fontSize: '0.85rem', color: '#888', fontWeight: 500 },
+  welcomeText: { fontSize: '0.85rem', color: 'var(--brand-muted, #b0a48c)', fontWeight: 500 },
   btnGhost: {
     background: 'none',
-    border: '1px solid var(--color-border, #e5e0d5)',
+    border: '1px solid var(--brand-border, #2a2518)',
     borderRadius: 6,
     padding: '0.3rem 0.65rem',
     fontSize: '0.8rem',
     cursor: 'pointer',
+    color: 'var(--brand-muted, #b0a48c)',
   },
   warning: {
-    background: '#fff8e1',
+    background: 'rgba(200,169,110,0.1)',
-    border: '1px solid #ffe082',
+    border: '1px solid var(--brand-gold-dark, #8a6e28)',
     borderRadius: 8,
     padding: '0.6rem 0.85rem',
     fontSize: '0.84rem',
     marginBottom: 16,
-    color: '#7a5f00',
+    color: 'var(--brand-gold-light, #e0c070)',
   },
   form: { display: 'flex', flexDirection: 'column', gap: 14 },
   field: { display: 'flex', flexDirection: 'column', gap: 5 },
-  label: { fontSize: '0.85rem', fontWeight: 600 },
+  label: { fontSize: '0.85rem', fontWeight: 600, color: 'var(--brand-warm-white, #f0ead8)' },
-  req: { color: '#c0392b' },
+  req: { color: '#e07070' },
   input: {
     padding: '0.55rem 0.75rem',
-    border: '1px solid var(--color-border, #e5e0d5)',
+    border: '1px solid var(--brand-border, #2a2518)',
     borderRadius: 8,
     fontSize: '0.93rem',
-    background: 'var(--color-input-bg, #faf9f7)',
+    background: 'var(--brand-black-3, #1a1a15)',
+    color: 'var(--brand-warm-white, #f0ead8)',
     outline: 'none',
     width: '100%',
     boxSizing: 'border-box',
     fontFamily: 'inherit',
   },
   dropZone: {
-    border: '2px dashed var(--color-border, #ddd8cc)',
+    border: '2px dashed var(--brand-border, #2a2518)',
     borderRadius: 10,
     padding: '1.4rem 1rem',
     textAlign: 'center',
     cursor: 'pointer',
     transition: 'border-color 0.15s, background 0.15s',
     userSelect: 'none',
+    color: 'var(--brand-warm-white, #f0ead8)',
   },
-  dropZoneActive: { borderColor: '#c8a96e', background: 'rgba(200,169,110,0.06)' },
+  dropZoneActive: { borderColor: 'var(--brand-gold, #c9a84c)', background: 'rgba(201,168,76,0.06)' },
-  dropZoneDisabled: { cursor: 'default', opacity: 0.65 },
+  dropZoneDisabled: { cursor: 'default', opacity: 0.5 },
-  dropZoneHasFile: { borderColor: '#27ae60', background: 'rgba(39,174,96,0.04)' },
+  dropZoneHasFile: { borderColor: 'var(--brand-gold, #c9a84c)', background: 'rgba(201,168,76,0.04)' },
   dropIcon: { fontSize: '1.8rem', display: 'block', marginBottom: 6 },
   dropLabel: { fontWeight: 600, margin: '0 0 3px', fontSize: '0.9rem' },
-  dropSub: { color: '#888', fontSize: '0.8rem', margin: 0 },
+  dropSub: { color: 'var(--brand-muted, #b0a48c)', fontSize: '0.8rem', margin: 0 },
   fileInfo: { display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left' },
   fileIcon: { fontSize: '1.8rem', flexShrink: 0 },
-  fileName: { fontWeight: 600, fontSize: '0.88rem', margin: '0 0 2px', wordBreak: 'break-all' },
+  fileName: { fontWeight: 600, fontSize: '0.88rem', margin: '0 0 2px', wordBreak: 'break-all', color: 'var(--brand-warm-white, #f0ead8)' },
-  fileSize: { color: '#888', fontSize: '0.78rem', margin: 0 },
+  fileSize: { color: 'var(--brand-muted, #b0a48c)', fontSize: '0.78rem', margin: 0 },
   progressWrap: { display: 'flex', flexDirection: 'column', gap: 5 },
-  progressBar: { height: 7, background: '#e5e0d5', borderRadius: 4, overflow: 'hidden' },
+  progressBar: { height: 7, background: 'var(--brand-black-3, #1a1a15)', borderRadius: 4, overflow: 'hidden' },
-  progressFill: { height: '100%', background: '#c8a96e', borderRadius: 4, transition: 'width 0.2s' },
+  progressFill: { height: '100%', background: 'var(--brand-gold, #c9a84c)', borderRadius: 4, transition: 'width 0.2s' },
-  progressLabel: { fontSize: '0.82rem', color: '#888', margin: 0, textAlign: 'center' },
+  progressLabel: { fontSize: '0.82rem', color: 'var(--brand-muted, #b0a48c)', margin: 0, textAlign: 'center' },
-  errorMsg: { color: '#c0392b', fontSize: '0.84rem', margin: '2px 0' },
+  errorMsg: { color: '#e07070', fontSize: '0.84rem', margin: '2px 0' },
   btnPrimary: {
-    background: '#c8a96e',
+    background: 'var(--brand-gold, #c9a84c)',
-    color: '#fff',
+    color: '#0a0a08',
     border: 'none',
     borderRadius: 8,
     padding: '0.7rem 1rem',
@@ -431,20 +434,20 @@ const s: Record<string, React.CSSProperties> = {
   },
   submittedList: {
     marginTop: 20,
-    border: '1px solid var(--color-border, #e5e0d5)',
+    border: '1px solid var(--brand-border, #2a2518)',
     borderRadius: 10,
     padding: '0.75rem 1rem',
   },
   submittedTitle: {
     fontWeight: 600,
     fontSize: '0.78rem',
-    color: '#888',
+    color: 'var(--brand-muted, #b0a48c)',
     margin: '0 0 8px',
     textTransform: 'uppercase',
     letterSpacing: '0.05em',
   },
   submittedRow: { display: 'flex', alignItems: 'flex-start', gap: 10, padding: '5px 0' },
-  checkMark: { color: '#27ae60', fontWeight: 700, flexShrink: 0 },
+  checkMark: { color: 'var(--brand-gold, #c9a84c)', fontWeight: 700, flexShrink: 0 },
-  submittedEp: { fontWeight: 600, fontSize: '0.88rem', margin: '0 0 2px' },
+  submittedEp: { fontWeight: 600, fontSize: '0.88rem', margin: '0 0 2px', color: 'var(--brand-warm-white, #f0ead8)' },
-  submittedMeta: { color: '#888', fontSize: '0.78rem', margin: 0 },
+  submittedMeta: { color: 'var(--brand-muted, #b0a48c)', fontSize: '0.78rem', margin: 0 },
 }