/**
 * MomBoss Design System — v1.0 (10 Aug 2026)
 * Built from MomBoss_Design_System_Reference.md. That document is the
 * specification; this file is its executable form. Values are transcribed,
 * not interpreted.
 *
 * Loaded at priority 1 so every later stylesheet inherits from these tokens
 * rather than defining its own colours and spacing.
 *
 * INK: --mb-ink is plum #3D2630, per TOKENS-LIVE.md 6.2 (Pieter, 19 Jul) and
 * the v1.0 reference. Hard black #212121 is RETIRED as text ink and is banned
 * by tests/design-uniformity.spec.js across 12 public destinations. Do not
 * reintroduce it, and do not hardcode this value in a component - use the
 * token so one edit moves the whole system.
 */

:root {
  /* ── 1. Colour ─────────────────────────────────────────────────────── */
  --mb-pink:          #E91E63;
  --mb-pink-light:    #F8BBD0;
  --mb-pink-bg:       #FFF5F7;
  --mb-pink-card:     #FDEEF4;
  --mb-pink-section:  #FFF0F5;
  --mb-gold:          #B76E79;   /* rose gold — never #D4AF37 */
  --mb-ink:           #3D2630;   /* plum — TOKENS-LIVE 6.2, hard black retired */
  --mb-ink-light:     #666666;
  --mb-ink-muted:     #999999;
  --mb-white:         #FFFFFF;
  --mb-dark:          #1A1A2E;   /* messenger / cart panels ONLY */
  --mb-success:       #4CAF50;
  --mb-warning:       #FF9800;
  --mb-error:         #F44336;

  --mb-gradient-hero: linear-gradient(135deg, #FFF5F7 0%, #FCE4EC 50%, #F8BBD0 100%);

  /* Hairline used on pricing cards, FAQ items and the stats bar. */
  --mb-hairline:      #F0E0E5;

  /* ── 2. Typography ─────────────────────────────────────────────────── */
  --mb-font-heading: 'Playfair Display', Georgia, serif;
  --mb-font-body:    'Be Vietnam Pro', 'Poppins', -apple-system, sans-serif;

  /* ── 3. Spacing — every value a multiple of 8 ──────────────────────── */
  --mb-space-unit: 8px;
  --mb-space-xs:   4px;
  --mb-space-sm:   8px;
  --mb-space-md:   16px;
  --mb-space-lg:   24px;
  --mb-space-xl:   32px;
  --mb-space-2xl:  48px;
  --mb-space-3xl:  64px;
  --mb-space-4xl:  80px;

  --mb-content-max:    1200px;
  --mb-content-narrow: 800px;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE ACCENT RULE
   One phrase per hero carries the accent. A flat string drops it — that is
   exactly what happened on 09 Aug, so the rule lives here where every hero
   inherits it rather than in each page's own stylesheet.
   ═══════════════════════════════════════════════════════════════════════ */
.mb-hero__title em,
.mb-vendor-hero__title em,
.mb-mall-hero__title em,
.mb-odo-hero__title em,
.mb-intro__title em,
.mb-storelist-title em,
.mb-story-hero__title em {
  font-style: italic;
  color: var(--mb-pink);
}

/* Vendor registration is the documented exception: Lauren's mockup sets the
   accent UPRIGHT bold, not italic. */
.mb-vp-hero__title em {
  font-style: normal;
  font-weight: 700;
  color: var(--mb-pink);
}

/* ── 4.7 Section eyebrow ─────────────────────────────────────────────── */
.mb-eyebrow {
  font-family: var(--mb-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mb-pink);
  margin-bottom: var(--mb-space-sm);
}

/* ── 4.1 Buttons ─────────────────────────────────────────────────────── */
.mb-btn-primary {
  background: var(--mb-pink);
  color: var(--mb-white);
  border: none;
  border-radius: 50px;
  padding: 14px 32px;
  font-family: var(--mb-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.mb-btn-primary:hover { background: #D81B60; }

.mb-btn-secondary {
  background: transparent;
  color: var(--mb-pink);
  border: 2px solid var(--mb-pink);
  border-radius: 50px;
  padding: 12px 30px;
  font-family: var(--mb-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

/* ── 4.2 Feature cards — fill separates, never a border ──────────────── */
.mb-feature-card {
  background: var(--mb-pink-card);
  border: none;
  border-radius: 16px;
  padding: var(--mb-space-xl) var(--mb-space-lg);
  text-align: center;
}
.mb-feature-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mb-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--mb-space-md);
}
.mb-feature-card__icon svg {
  width: 24px;
  height: 24px;
  color: var(--mb-white);
  stroke-width: 1.5;
}

/* ── 4.3 How It Works ────────────────────────────────────────────────── */
.mb-step__number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mb-pink);
  color: var(--mb-white);
  font-family: var(--mb-font-body);
  font-size: 1.125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mb-step__connector {
  flex: 1;
  height: 0;
  border-top: 2px dashed var(--mb-pink-light);
  margin: 0 var(--mb-space-sm);
}
.mb-step__card {
  background: var(--mb-pink-section);
  border: none;
  border-radius: 16px;
  padding: var(--mb-space-lg);
  text-align: center;
}

/* ── 4.4 Pricing cards ───────────────────────────────────────────────── */
.mb-pricing-card {
  background: var(--mb-white);
  border: 1px solid var(--mb-hairline);
  border-radius: 16px;
  padding: var(--mb-space-xl) var(--mb-space-lg);
  text-align: center;
}
.mb-pricing-card--featured {
  border: 2px solid var(--mb-pink);
  position: relative;
}
.mb-pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--mb-pink);
  color: var(--mb-white);
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.mb-pricing-price {
  font-family: var(--mb-font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--mb-ink);
}
.mb-pricing-period {
  font-family: var(--mb-font-body);
  font-size: 0.875rem;
  color: var(--mb-ink-light);
}

/* ── 4.5 FAQ accordion ───────────────────────────────────────────────── */
.mb-faq-item {
  background: var(--mb-white);
  border: 1px solid var(--mb-hairline);
  border-radius: 12px;
  margin-bottom: var(--mb-space-sm);
  overflow: hidden;
}
.mb-faq-item__trigger {
  padding: var(--mb-space-md) 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--mb-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--mb-ink);
}
.mb-faq-item__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mb-pink-card);
  color: var(--mb-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 600;
  flex-shrink: 0;
}
.mb-faq-item--open .mb-faq-item__icon {
  background: var(--mb-pink);
  color: var(--mb-white);
}

/* ── 4.6 Stats bar — pink icon, near-black value ─────────────────────── */
.mb-stats-bar {
  display: flex;
  justify-content: center;
  gap: var(--mb-space-2xl);
  padding: var(--mb-space-lg) 0;
  border-top: 1px solid var(--mb-hairline);
  border-bottom: 1px solid var(--mb-hairline);
}
.mb-stats-bar__item { text-align: center; }
.mb-stats-bar__icon { color: var(--mb-pink); margin-bottom: var(--mb-space-sm); }
.mb-stats-bar__value {
  font-family: var(--mb-font-body);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--mb-ink);
}
.mb-stats-bar__label { font-size: 0.75rem; color: var(--mb-ink-light); }

/* ── 4.8 Trust badges ────────────────────────────────────────────────── */
.mb-trust-bar {
  display: flex;
  justify-content: center;
  gap: var(--mb-space-xl);
  padding: var(--mb-space-lg) 0;
  flex-wrap: wrap;
}
.mb-trust-badge {
  display: flex;
  align-items: center;
  gap: var(--mb-space-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--mb-ink-light);
}
.mb-trust-badge__icon { color: var(--mb-pink); }

/* ── 5. Banners — never cover+fixed-height on Lauren's artwork ───────── */
.mb-banner img,
.mb-lauren-banner {
  width: 100%;
  aspect-ratio: 1920 / 600;
  object-fit: contain;
}

/* ── 7. Section rhythm ───────────────────────────────────────────────── */
.mb-section          { padding: var(--mb-space-2xl) 0; }
.mb-section--white   { background: var(--mb-white); }
.mb-section--pink    { background: var(--mb-pink-section); }
.mb-section--hero    { background: var(--mb-gradient-hero); padding: var(--mb-space-3xl) 0; }
.mb-wrap             { max-width: var(--mb-content-max); margin: 0 auto; padding: 0 var(--mb-space-md); }
.mb-wrap--narrow     { max-width: var(--mb-content-narrow); }

/* ── 8. Responsive ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .mb-stats-bar { flex-wrap: wrap; gap: var(--mb-space-lg); }
  .mb-step__connector { display: none; }
}
@media (max-width: 480px) {
  .mb-stats-bar__item { flex: 0 0 calc(50% - var(--mb-space-lg)); }
}