/* ──────────────────────────────────────────────────────────────────
   Pocket Cologne — Theme v2
   Bryan's UI overhaul (option A): drop the cream, go solid white.
   Clean modern sans for headings, keep Recoleta only for the
   brand wordmark. Buttons match the BHN-style rectangular shape.
   Loaded AFTER each page's inline <style> so it wins on cascade.
   ────────────────────────────────────────────────────────────── */

/* Geist sans — modern, clean, what BHN ships */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* Solid white backgrounds across the board */
  --bg-deep: #ffffff !important;
  --bg-primary: #ffffff !important;
  --bg-elevated: #f7f7f7 !important;     /* subtle slate for inset surfaces */
  --bg-card: #ffffff !important;
  --bg-card-hover: #f7f7f7 !important;
  --bg-soft: #f7f7f7 !important;
  --cream: #ffffff !important;
  --cream-dark: #f0f0f0 !important;
  --cream-mid: #e8e8e8 !important;

  /* Borders pick up a neutral gray instead of warm cream */
  --border: rgba(0,0,0,0.10) !important;
  --border-light: rgba(0,0,0,0.06) !important;
  --rule: #e5e5e5 !important;

  /* Headings now Recoleta sitewide (font overhaul); body stays Geist for
     the modern sans pairing against the serif display. Logo wordmark
     stays Recoleta as before. */
  --font-display: 'Recoleta', Georgia, 'Times New Roman', serif !important;
  --font-body: 'Geist', 'DM Sans', -apple-system, sans-serif !important;
  --font-condensed: 'Geist', sans-serif !important;
}

body {
  background: #ffffff !important;
  color: #1a1a1a;
  font-family: 'Geist', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* All non-brand headings render in Recoleta. The Recoleta brand wordmark
   stays put because it uses its own .nav-logo / brand-logo classes. */
h1, h2, h3, h4, h5, h6,
.section-title,
.tiers-title,
.page-header h1,
.hero h1,
.final-cta h2 {
  font-family: 'Recoleta', Georgia, 'Times New Roman', serif !important;
  font-weight: 700;
  letter-spacing: -0.018em;
}
h1, .hero h1, .final-cta h2 {
  letter-spacing: -0.025em;
}

/* Recoleta italics ARE allowed (they're elegant, unlike Playfair's swirl).
   The em rule from the Geist phase used to flatten italics; lift it. */
.hero h1 em, .final-cta h2 em, .tiers-title em {
  font-style: italic;
  font-weight: 700;
  color: var(--gold, #c9a050);
}

/* Buttons: rectangular slightly-rounded, BHN-style.
   Override the pill / outline-gold patterns. */
.btn-primary, .hero-cta, .tier-cta, .btn-action.btn-gold,
.btn, button.btn-gold {
  border-radius: 10px !important;
  letter-spacing: 0.01em !important;
  font-weight: 600 !important;
}
.btn-secondary, .btn-action.btn-outline-gold, .btn-outline-gold,
.btn.outline {
  border-radius: 10px !important;
}
.search-tag, .pc-search-suggestion {
  border-radius: 10px !important;
}

/* Cards lose the cream blush — clean white with neutral border */
.tier-card, .stat-card, .how-step, .section, .table-wrap,
.access-card, .tier-card.featured, .login-card, .modal-card {
  background: #ffffff !important;
}
.tier-card.featured {
  background: #ffffff !important;
  border-color: var(--gold, #c9a050) !important;
  box-shadow: 0 6px 28px rgba(201,160,80,0.10) !important;
}

/* Cream-band sections lose their warm tint and become neutral */
.tiers-section, .perks-band-light, .faq-section,
.benefits-section, .testimonials-section, .footer-newsletter-band {
  background: #ffffff !important;
}

/* Footer stays dark on every page — the page CSS already sets dark wood
   (#1a140d) and pairs it with cream text. Earlier we forced
   .footer:not(.dark) to white but kept the cream text colors, which made
   the footer invisible on its own white background. Don't override here. */

/* Admin: clean white tab background, slightly tinter row stripes */
.admin-nav { background: #ffffff !important; }
.tab-nav { background: #ffffff !important; }
.tab-btn { border-radius: 10px !important; }

/* Form inputs keep slate-gray backgrounds for contrast */
.form-input, .field input, .field select, .field textarea,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], input[type="date"],
input[type="month"], select, textarea {
  background: #f7f7f7 !important;
  border-radius: 8px !important;
}

/* Announcement bar stays dark for contrast against the new white */
/* (no override — page CSS already sets it dark) */