/* ============================================================
   MARKETHER — Soft Luxury Style System
   Authoritative layer. Load LAST on every page.
   Boutique strategy studio meets quiet-luxury magazine:
   cream + white + ink + muted gold, fine borders, soft shadows,
   sharp minimal buttons, editorial serif, lots of whitespace.
   ============================================================ */

:root {
  /* Palette */
  --paper: #fbfaf7;
  --cream: #f5f1ea;
  --warm: #f5f1ea;
  --white: #ffffff;
  --ink: #111111;
  --charcoal: #2b2b2b;
  --muted: #686868;
  --soft-text: #8a8a8a;
  --gold: #b89445;
  --champagne: #e8d8b2;
  --gold-tint: rgba(184, 148, 69, 0.12);

  /* Borders — fine, never harsh */
  --line: rgba(0, 0, 0, 0.10);
  --border: rgba(0, 0, 0, 0.10);

  /* Shadows — soft, never heavy */
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
  --soft: 0 10px 26px rgba(0, 0, 0, 0.05);
  --shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.07);

  /* Re-point the editorial tokens used by markether-luxe.css
     so every card driven by them softens automatically. */
  --mh-shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.04);
  --mh-shadow-card: 0 12px 30px rgba(0, 0, 0, 0.04);
  --mh-shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.07);
  --mh-shadow-editorial: 0 16px 40px rgba(0, 0, 0, 0.06);
  --mh-editorial-line: rgba(0, 0, 0, 0.14);
  --mh-editorial-rule: 1px solid rgba(0, 0, 0, 0.14);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: Inter, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ——— Base ——— */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  letter-spacing: -0.02em;
}

/* Plain content links warm to gold (buttons keep their own hovers) */
a:not([class*="btn"]):not([class*="cta"]):not([class*="link"]):not(.path-card):not(.member-link):hover {
  color: var(--gold);
}

/* ——— Serif italic gold for emotional emphasis in headings ——— */
h1 em, h2 em, h3 em, h4 em,
.hero h1 em, .final h2 em, .section-title em, .tara-copy h2 em,
.vault-promo h2 em, .dashboard-left h2 em {
  font-style: italic !important;
  color: var(--gold) !important;
  font-weight: inherit;
}

/* ——— Sharp, minimal, expensive buttons ——— */
.btn,
.nav-cta,
.freebie-link,
.buy-btn,
.final-buy,
.shop-card-btn,
.notify-btn,
.checkout-btn,
.form-submit,
.btn-add,
.btn-more,
.cart-nav-btn,
.button-primary,
.button-secondary,
.service-action,
.vault-link,
.path-link,
.review-submit,
.waitlist-form button,
.enquiry-form button {
  border-radius: 0 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  font-weight: 600 !important;
  transition: 0.35s var(--ease) !important;
}

/* Dark primary buttons → muted gold on hover */
.btn-dark:hover,
.buy-btn:hover,
.final-buy:hover,
.shop-card-btn:hover,
.checkout-btn:hover,
.btn-add:hover,
.form-submit:hover,
.nav-cta:hover,
.button-primary:hover,
.cart-nav-btn:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
}

/* Champagne pill → keep warm, sharpen, gold on hover */
.freebie-link:hover {
  background: var(--gold) !important;
  color: #fff !important;
}

/* ——— Cards — printed paper: fine border, soft shadow, square ——— */
.card,
.product-card,
.service-row,
.step,
.testimonial,
.quote-card,
.editorial-panel,
.tara-portrait-card,
.trust-item,
.trust-image-card,
.featured-copy,
.featured-visual,
.portal-card,
.member-link,
.final-card,
.final-cta-card,
.guarantee-badge,
.path-card,
.shop-card,
  .vault-nudge,
  .roadmap-item,
  .sheet,
  .waitlist-card,
.offer-card,
.capacity-card,
.breakdown-card,
.breakdown-inner,
.motion-stack-card,
.collage-card,
.value-item,
.review-card,
.enquiry-card,
.result-box,
.split-card,
.tara-mini-note,
.hero-photo,
.cart-drawer {
  border-radius: 0 !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* Slightly stronger anchor cards keep a touch more presence */
.portal-card,
.featured-visual,
.guarantee-badge {
  box-shadow: var(--soft) !important;
}

/* Calm hover lift (replaces hard offset shifts) */
.product-card:hover,
.service-row:hover,
.step:hover,
.path-card:hover,
.shop-card:hover,
.member-link:hover,
.trust-item:hover,
.testimonial:hover,
.value-item:hover {
  box-shadow: var(--shadow-lift) !important;
  transform: translateY(-5px) !important;
}

/* ——— Eyebrows / small labels → muted gold ——— */
.eyebrow,
.kicker,
.section-label,
.path-eyebrow,
.card-sub,
.result-title {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ——— Gold divider utility ——— */
.divider,
.gold-divider {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(184, 148, 69, 0.45), transparent);
  margin: 40px 0;
}

/* ——— Soften any remaining hard tags/pills ——— */
.tag,
.service-tag,
.card-tag,
.ch-tag,
.product-badge,
.featured-visual-badge,
.shop-card-badge {
  border-radius: 0 !important;
}

/* ——— Inputs — fine borders, gold focus ——— */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 1px var(--gold-tint) !important;
}

/* ——— Spacing — keep airy on desktop ——— */
@media (min-width: 901px) {
  .paths,
  .shop-panel,
  .guarantee,
  .vault-promo,
  .one-offs,
  .testimonials {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

/* ============================================================
   Palette correction — retire the dusty pink, unify on gold/cream.
   Declared last so it overrides every page's inline :root tokens.
   (Greens/sage left untouched so client brand pages stay intact.)
   ============================================================ */
:root {
  --blush: #f4ecdd;          /* was dusty pink → soft champagne cream */
  --rose: #b89445;           /* was dusty rose → muted antique gold */
  --pink: #f4ecdd;
  --cream: #f5f1ea;
  --warm: #f5f1ea;
  --champagne: #e8d8b2;
  --gold: #b89445;
  --line: rgba(0, 0, 0, 0.10);
}

/* ============================================================
   Square the bubbly pills — tags, badges, chips, labels.
   Circles (dots, avatars, blurred bubbles) keep their radius
   because those classes don't match these patterns.
   ============================================================ */
[class*="tag"],
[class*="badge"],
[class*="chip"],
[class*="-label"],
[class*="pill"],
[class*="perk"],
[class*="stamp"],
.editorial-subline,
.hero-collage-label,
.service-tag,
.popup-socials a,
.popup-download-link,
.tara-facts span,
.vault-perks span {
  border-radius: 0 !important;
}

/* Calm the playful neo-brutalist tilt on the hero subline
   (only this one — others use transform for positioning) */
.editorial-subline {
  transform: none !important;
}

/* Quiet the heaviest uppercase weights into a more refined label weight */
.eyebrow,
.kicker,
.section-label,
.service-tag,
.tara-facts span,
.vault-perks span,
[class*="badge"],
[class*="-label"] {
  font-weight: 700 !important;
}
