/* ─────────────────────────────────────────────────────────────────────────
 * brand.css — sitewide logo + palette tokens.
 *
 * Source of truth for the canonical landing-page palette. Every served HTML
 * page gets this stylesheet via routes/pages.js so colours and the logo box
 * stay identical regardless of which page the visitor lands on.
 *
 * Mirror of public/index.html :root (landing palette).
 * ──────────────────────────────────────────────────────────────────────── */

:root {
  --pink: #D81B84;
  --pink-hover: #B81570;
  --pink-light: #F8E5F3;
  --pink-border: #F0B3D6;
  --purple: #663399;
  --purple-light: #EDE0F5;
  --white: #FFFFFF;
  --surface: #F8FAFC;
  --surface-alt: #F1F5F9;
  --text-body: #1E293B;
  --text-heading: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --border: #E2E8F0;
  --success: #16A34A;
  --success-bg: #DCFCE7;
}

/* Force the site-wide light theme on every served page. Injected after
 * inline <style> blocks (see lib/serve-html.js), so per-page dark themes
 * (login.html, 404.html) lose regardless of whether the page opts in via
 * .page-shell. The body::before/::after rules kill the dark grid + glow. */
body { background: var(--white); color: var(--text-body); font-family: 'Plus Jakarta Sans', sans-serif; }
body::before, body::after { content: none !important; }

/* Brand logo link — identical rendering on every page. */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.brand-logo img {
  height: 32px;
  width: auto;
  display: block;
}

/* "Back to Home" / "Back to Pricing" right-side header links. */
.brand-link-back {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}
.brand-link-back:hover { color: var(--pink); }

/* Page shell — centered/standalone pages (pricing, checkout, signup, etc.) get
 * the same light, Plus-Jakarta background and a light-gray header border. */
.page-shell {
  background: var(--white);
  color: var(--text-body);
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-height: 100vh;
}
.page-shell .header-inner,
.page-shell header,
.page-shell .topbar {
  background: transparent;
  border-bottom: 1px solid var(--border);
}