/* Hall page theme (scope p21). Variables --z-primary / --z-accent / --z-bg are set on :root by /theme.js
   from the API; every use has a fallback, so the page is fine without a theme. Opt-in via body.z-themed. */
body.z-themed {
  --accent: var(--z-primary, #2d6cdf);
  --bg: var(--z-bg, #f7f7f5);
  background: var(--z-bg, #f7f7f5);
}
body.z-themed .btn { background: var(--z-primary, #2d6cdf); border-color: var(--z-primary, #2d6cdf); color: #fff; }
body.z-themed .btn-light { background: transparent; color: var(--z-primary, #2d6cdf); }
body.z-themed h3, body.z-themed a { color: var(--z-accent, #2d6cdf); }
body.z-themed .top { border-bottom: 3px solid var(--z-accent, #2d6cdf); }
body.z-themed .day { border-color: var(--z-accent, #e2e4e8); }

/* owner live preview */
.theme-preview { background: var(--z-bg, #f7f7f5); border: 1px solid var(--border, #e2e4e8); border-radius: 12px; padding: 16px; }
.theme-preview .tp-title { color: var(--z-accent, #2d6cdf); font-weight: 700; border-bottom: 3px solid var(--z-accent, #2d6cdf); margin-bottom: 8px; }
.theme-preview .tp-btn { display: inline-block; padding: 8px 14px; border-radius: 8px; background: var(--z-primary, #2d6cdf); color: #fff; font-weight: 600; }
.theme-swatch { width: 3rem; height: 2rem; padding: 0; }