/**
 * Maker's Nook — shared design system (tokens + buttons).
 *
 * Load this once site-wide. Page CSS should reuse these variables and
 * `.mn-btn` primitives instead of redeclaring colours / radii / CTAs.
 *
 * Visit shop / secondary colours come from the site design-system tokens
 * (`.mn-btn--secondary`, `.mn-visit-shop`) — do not invent a third palette.
 *
 * @package WoodmartChild
 */

:root {
  --ember-50: #fdf3ef;
  --ember-100: #f7ded5;
  --ember-300: #e2a38f;
  --ember-500: #c15a38;
  --ember-600: #b2452d;
  --ember-700: #8e3722;

  --fynbos-50: #f2f5ec;
  --fynbos-100: #e3e9da;
  --fynbos-300: #c2cfae;
  --fynbos-500: #9cab7f;
  --fynbos-700: #6b7a5a;
  --fynbos-900: #3d4634;

  --shell-0: #ffffff;
  --shell-50: #FDFAF4;

  /* Canonical page field — do not drift to darker kraft beiges */
  --mn-linen-50: #FDFAF4;
  --mn-bg-canvas: #FDFAF4;
  --shell-100: #f7f1ea;
  --shell-200: #ede4da;
  --shell-300: #ded2c4;
  --shell-400: #c4b7a7;
  --shell-500: #a79c90;
  --shell-600: #7a7168;
  --shell-700: #554f48;
  --shell-800: #38332e;
  --shell-900: #2a2521;

  --amber-100: #faeeda;
  --amber-700: #854f0b;
  --berry-100: #fcebeb;
  --berry-500: #8c2f39;

  --mn-font: "Manrope", system-ui, -apple-system, sans-serif;
  --mn-mono: "Martian Mono", ui-monospace, monospace;
  --mn-title-font: var(--mn-font-display, var(--wd-title-font, Georgia, "Times New Roman", serif));
  --mn-title-weight: 200;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-full: 999px;

  --mn-btn-h: 56px;
  --mn-btn-px: 32px;
  --mn-btn-fs: 15.5px;
}

/* Storefront display headings — match homepage section titles. */
.mn-home h2,
.mn-home h3,
.mn-bam h1,
.mn-bam h2,
.mn-sa__head h1,
.mn-sa__story h2,
.mn-sl__head h1,
.mn-sl__join h2,
.mn-nn h1,
.mn-nn h2,
.mn-dl h1,
.mn-dl h2,
.mn-rr h1,
.mn-rr h2,
.mn-ct h1,
.mn-ct h2,
.mn-fp h1,
.mn-fp h2,
.mn-mg h1,
.mn-mg h2,
.mn-cp h1,
.mn-cp h2,
.mn-pp h1,
.mn-pp h2,
.mn-vt h1,
.mn-vt h2,
.mn-cart__head h1,
.mn-nnu .head h1,
.mn-shop__id h1,
.mn-meet__body h2,
.mn-sec__head h2,
.mn-ma__head h2,
.mn-qr-view__title,
.mn-ft__sub h2,
.mn-auth-makercard h2,
.mn-pdp-page .mn-pdp h1,
.mn-pdp-page .mn-pdp .panel h1,
.mn-pdp-page .mn-pdp .sechead h2,
.mn-pdp-page .mn-pdp .mkstory h2,
.mn-pdp-page .mn-pdp .mn-pr__head h2,
.mn-pdp-page .mn-pdp .cta h2 {
  font-family: var(--mn-title-font);
  font-weight: var(--mn-title-weight);
}

/* ---------------------------------------------------------------------------
   Shared button primitive (layout only — colour roles live in site tokens)
   --------------------------------------------------------------------------- */

.mn-btn,
.mn-sl__btn,
.mn-bam__btn,
.mn-ma__btn,
.mn-mg a.mn-mg__btn,
.mn-pdp-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--mn-btn-h);
  padding: 0 var(--mn-btn-px);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--mn-font);
  font-size: var(--mn-btn-fs);
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
  box-sizing: border-box;
}

.mn-btn--primary,
.mn-sl__btn--primary,
.mn-bam__btn--primary,
.mn-ma__btn,
.mn-mg a.mn-mg__btn,
.mn-pdp-page .btn--primary {
  background: var(--ember-600) !important;
  border-color: var(--ember-600) !important;
  color: #fff !important;
}

.mn-btn--primary:hover,
.mn-sl__btn--primary:hover,
.mn-bam__btn--primary:hover,
.mn-ma__btn:hover,
.mn-mg a.mn-mg__btn:hover,
.mn-mg a.mn-mg__btn:focus,
.mn-pdp-page .btn--primary:hover {
  background: var(--ember-700) !important;
  border-color: var(--ember-700) !important;
  color: #fff !important;
}

.mn-btn--secondary,
.mn-pdp-page .btn--secondary {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--mn-border-strong, var(--shell-400)) !important;
  color: var(--mn-action-secondary, var(--shell-900)) !important;
  -webkit-text-fill-color: var(--mn-action-secondary, var(--shell-900)) !important;
}

.mn-btn--secondary:hover,
.mn-pdp-page .btn--secondary:hover {
  background: var(--mn-action-secondary-subtle, var(--shell-100)) !important;
  background-color: var(--mn-action-secondary-subtle, var(--shell-100)) !important;
  border-color: var(--mn-action-secondary, var(--shell-900)) !important;
  color: var(--mn-action-secondary, var(--shell-900)) !important;
  -webkit-text-fill-color: var(--mn-action-secondary, var(--shell-900)) !important;
}

.mn-btn--onDark,
.mn-sl__btn--onDark,
.mn-pdp-page .btn--onDark {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--shell-900) !important;
}

.mn-btn--onDark:hover,
.mn-sl__btn--onDark:hover,
.mn-pdp-page .btn--onDark:hover {
  transform: translateY(-1px);
  color: var(--shell-900) !important;
}

.mn-btn--block,
.mn-ma__btn {
  width: 100%;
}

.mn-btn--sm,
.mn-pdp-page .btn--sm {
  height: 46px;
  padding: 0 22px;
  font-size: 14px;
}

/* Wishlist product CTA — Additional CSS secondary .button rules force dark text on brand fill. */
.wd-wishlist-content .wd-product a.button,
.wd-wishlist-content .wd-product a.button span,
.wd-wishlist-content .products .product a.button,
.wd-wishlist-content a.button.add-to-cart-loop,
.wd-wishlist-content a.button.product_type_simple,
.woocommerce .wd-wishlist-content a.button {
  color: #fff !important;
}

.wd-wishlist-content .wd-product a.button:hover,
.wd-wishlist-content .wd-product a.button:hover span,
.woocommerce .wd-wishlist-content a.button:hover {
  color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Canvas cohesion — lock page field to light linen; beat Additional CSS re-points
   --------------------------------------------------------------------------- */
html {
  --mn-linen-50: #FDFAF4 !important;
  --mn-bg-canvas: #FDFAF4 !important;
  --mn-bg-subtle: #FDFAF4 !important;
  --shell-50: #FDFAF4 !important;
}

html body {
  background: #FDFAF4 !important;
  background-color: #FDFAF4 !important;
}