/* ── marketing.css — shared palette + base for /about, /pricing, /explore
 *
 * These three pages each had their own copy of the same palette tokens,
 * body defaults, light-mode swap, and public-chrome fallback. The duplicates
 * drifted over time (one page's light mode was subtly different from the
 * next). This file is the single source of truth; each page's own <style>
 * block is for page-specific layout only.
 *
 * Loaded AFTER styles.css and app.css so token/palette overrides for
 * these pages always win.
 */

:root {
  --amber:       #cc6443;
  --amber-soft:  rgba(204, 100, 67, 0.18);
  --paper:       #12110f;
  --paper-deep:  #0b0a09;
  --paper-light: #f4f0e8;
  --ink-soft:    rgba(244, 240, 232, 0.74);
  --ink-faint:   rgba(244, 240, 232, 0.48);
}

body { background: var(--paper); color: var(--paper-light); }

/* Public-only chrome (Home / Log in / Request an invite) — hidden once
 * theme.js adds body.is-authenticated so logged-in visitors only see
 * the app hamburger + theme toggle. Every page uses the same class now. */
.hf-public-chrome { display: inline-flex; gap: 18px; align-items: center; }
body.is-authenticated .hf-public-chrome { display: none; }

/* ── Light mode palette swap ──────────────────────────────────── */
html[data-theme="light"] {
  --paper:       #f7f2e8;
  --paper-deep:  #efe9db;
  --paper-light: #1a1614;
  --ink-soft:    rgba(26, 22, 20, 0.74);
  --ink-faint:   rgba(26, 22, 20, 0.5);
}
html[data-theme="light"] body { background: var(--paper); color: var(--paper-light); }