/* Jeanettemai design tokens — APPROVED by Marc 2026-06-11: jm palette + variant B (near-white bg, muted pink: prices slate, pink for badges/links only, no script font) */
:root {
  --jm-pink: #E27297;
  --jm-pink-dark: #C75B80;
  --jm-pink-light: #FAEDF2;
  --jm-yellow: #C75B80;   /* Marc 2026-07-23: peach out — headings + CTAs unify on the buy-button pink ("keep the color, it looks great"). Token name kept for compat; semantically this is now the CTA/heading accent = jm-pink-dark. */
  --jm-yellow-dark: #B14A6F;
  --jm-yellow-light: #FAEDF2;
  --gold: #E27297;    /* Marc 2026-07-23: orange fully out — decorative accents join the pink universe (was peach #E28A57; before that amber #E8A838) */
  /* Page surface family — shifted from warm beige to barely-there teal-white
     (anchored to brand teal #E27297 at very low saturation). Step sizes match
     the previous beige progression so section alternation rhythm is preserved. */
  --cream: #FDFDFC;
  --cream-dark: #F7F6F3;
  --cream-darker: #F0EEE9;
  --white: #FFFFFF;
  --text: #333E48;
  --text-mid: #5D7184;
  --text-muted: #888888;
  --border: #ECEAE6;
  --border-subtle: #F3F1ED;

  --shadow-1: 0 8px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-2: 0 12px 48px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-3: 0 20px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-cta: 0 6px 24px rgba(226, 138, 87, 0.35);
  --shadow-cta-hover: 0 8px 32px rgba(226, 138, 87, 0.45);
  --jm-shadow-pink: 0 4px 16px rgba(226, 114, 151, 0.25);
  --shadow-image: 0 8px 32px rgba(0,0,0,0.06);
}

.f-body {
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
.f-display { font-family: 'Inter', sans-serif; font-weight: 900; letter-spacing: -1px; }
.f-head { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.3px; }
.f-eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 13px;
}

.f-btn-primary {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: #fff;
  background: var(--jm-yellow);
  border: none;
  border-radius: 14px;
  padding: 18px 32px;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: all 200ms ease-out;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.f-btn-primary:hover { background: var(--jm-yellow-dark); transform: translateY(-2px); box-shadow: var(--shadow-cta-hover); }
.f-btn-secondary {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--jm-pink);
  background: transparent;
  border: 2px solid var(--jm-pink);
  border-radius: 14px;
  padding: 12px 24px;
  cursor: pointer;
  transition: all 200ms ease-out;
}
.f-btn-secondary:hover { background: var(--jm-pink-light); }

.stitch {
  height: 2px;
  background: repeating-linear-gradient(to right, var(--jm-yellow) 0 10px, transparent 10px 20px);
  opacity: 0.35;
}
.stitch-teal {
  height: 2px;
  background: repeating-linear-gradient(to right, var(--jm-pink) 0 10px, transparent 10px 20px);
  opacity: 0.35;
}

/* SKU tile placeholder — when an image fails to load, this shows through */
.sku-ph {
  background: linear-gradient(135deg, var(--cream-dark), var(--cream-darker));
  position: relative;
}
.sku-ph::before {
  content: attr(data-name);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  padding: 12px;
  letter-spacing: 0.04em;
}

/* Mobile-first spacing + type scale (ported from fabricly, 2026-07-02).
   Phone values are the default; desktop overrides at the canonical
   900px breakpoint (≤639 phone / ≤899 tablet / min-900 desktop). */
:root {
  --container-pad: 16px;
  /* ONE shared content cap for every section. Backgrounds stay full-bleed;
     inner content + images cap here (Marc 2026-07-01: tuned for MacBook,
     never full-bleed content on iMac). */
  --container-max: 1360px;
  --section-pad: 48px;
  --card-gap: 12px;
  --fs-h1: clamp(2rem, 5vw + 0.6rem, 3.5rem);
  --fs-h2: clamp(1.5rem, 3.5vw + 0.5rem, 2.5rem);
  --fs-h3: clamp(1.2rem, 2vw + 0.5rem, 1.6rem);
}
@media (min-width: 900px) {
  :root {
    --container-pad: 32px;
    --section-pad: 96px;
    --card-gap: 20px;
  }
}

/* Mobile button sizing (ported HOME-13). Phones only — desktop padding/size
   above is unchanged. min-height keeps the 44-48px touch target even with
   the smaller padding. */
@media (max-width: 639px) {
  .f-btn-primary { padding: 14px 22px; font-size: 15px; min-height: 48px; }
  .f-btn-secondary { min-height: 44px; }
}