/* ============================================================
   base.css — starting tokens. The AI never writes CSS directly;
   it only ever selects from the palettes/layouts defined here by
   name (see site-builder.js applyCommand). This keeps every
   possible visual state something a human reviewed in advance.
   ============================================================ */

:root {
  --bg: #fdfcfa;
  --fg: #1c1b19;
  --muted: #6b6660;
  --accent: #3a5a7a;
  --surface: #f2efe9;
  --radius: 4px;
  --font-display: Georgia, 'Iowan Old Style', serif;
  --font-body: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --maxw: 880px;
}

/* ---- named palettes (setTheme) ---- */
[data-palette="warm-sunrise"]  { --bg:#fdf6ec; --fg:#2c1e12; --muted:#8a6a4a; --accent:#c1611f; --surface:#f6e9d8; }
[data-palette="cool-ocean"]    { --bg:#f4f8fa; --fg:#132630; --muted:#517182; --accent:#1f6f8b; --surface:#e3eef2; }
[data-palette="midnight"]      { --bg:#12141c; --fg:#e9e9ee; --muted:#9a9aab; --accent:#7c9cff; --surface:#1c1f2b; }
[data-palette="forest"]        { --bg:#f6f7f2; --fg:#1c2b1c; --muted:#5c6e57; --accent:#3f6b3f; --surface:#e7ede2; }
[data-palette="mono-slate"]    { --bg:#f5f5f6; --fg:#1a1a1c; --muted:#6c6c72; --accent:#33343a; --surface:#e9e9ec; }

/* ---- named font pairings (setFontPairing) ---- */
[data-fonts="classic-serif"]  { --font-display: 'Iowan Old Style', Georgia, serif; --font-body: Georgia, serif; }
[data-fonts="modern-sans"]    { --font-display: 'Segoe UI', Helvetica, Arial, sans-serif; --font-body: 'Segoe UI', Helvetica, Arial, sans-serif; }
[data-fonts="editorial-mix"]  { --font-display: Georgia, serif; --font-body: 'Segoe UI', Helvetica, Arial, sans-serif; }
[data-fonts="rounded-friendly"] { --font-display: 'Trebuchet MS', sans-serif; --font-body: 'Trebuchet MS', sans-serif; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  transition: background 0.4s ease, color 0.4s ease;
}

.zone {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 48px 24px;
}
.zone[hidden] { display: none; }

.zone h1, .zone h2 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 16px;
}
.zone p { line-height: 1.6; color: var(--muted); max-width: 65ch; }

.cta-button {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 22px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}

/* ---- layout variants (setLayout), applied per zone via data-layout ---- */
.zone[data-layout="split-left"]  { display:flex; flex-direction: row-reverse; gap:32px; align-items:center; max-width: 1100px; }
.zone[data-layout="split-right"] { display:flex; flex-direction: row; gap:32px; align-items:center; max-width: 1100px; }
.zone[data-layout="split-left"] .zone-media,
.zone[data-layout="split-right"] .zone-media { flex: 1 1 40%; }
.zone[data-layout="split-left"] .zone-text,
.zone[data-layout="split-right"] .zone-text { flex: 1 1 55%; }

.zone[data-layout="centered"] { text-align: center; }
.zone[data-layout="centered"] p { margin-left: auto; margin-right: auto; }

.zone[data-layout="grid-2col"] .zone-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}

.zone-media img { width: 100%; height: auto; border-radius: var(--radius); display:block; }

/* ---- chat widget ---- */
#chat-widget {
  position: fixed; right: 20px; bottom: 20px; width: 320px;
  background: var(--surface); color: var(--fg);
  border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  font-family: var(--font-body); font-size: 14px;
  display: flex; flex-direction: column; max-height: 60vh; z-index: 9999;
}
#chat-log { overflow-y: auto; padding: 12px; flex: 1; }
#chat-log .msg { margin-bottom: 10px; }
#chat-log .msg.user { color: var(--fg); font-weight: 600; }
#chat-log .msg.assistant { color: var(--muted); }
#chat-input-row { display: flex; border-top: 1px solid rgba(0,0,0,0.1); }
#chat-input { flex: 1; border: none; padding: 10px; font-size: 14px; background: transparent; color: var(--fg); }
#chat-input:focus { outline: none; }
#chat-send { border: none; background: var(--accent); color: #fff; padding: 0 16px; cursor: pointer; }
#chat-header { padding: 10px 12px; font-weight: 600; border-bottom: 1px solid rgba(0,0,0,0.08); }