/* Copied from brand-kit/palette.css (v2.0, approved Oct 22, 2026). In this site copy the badge class is named .kk-badge-price (same colors). */
:root {
  /* Skeinstead palette v2.0 — Oct 2026 */
  --kk-cloud-cream: #FAF5EC; /* Cloud Cream — Background (page, clip & pin base) */
  --kk-linen: #EFE4D2; /* Linen — Surface: cards, panels, price-table rows */
  --kk-cocoa-bark: #3E2C24; /* Cocoa Bark — Text (body + headlines) */
  --kk-grounded-moss: #4E6A3D; /* Grounded Moss — Primary accent + buttons (cream text) */
  --kk-rosebud-pink: #F2B6C1; /* Rosebud Pink — Secondary accent (fills, yarn-ball motif, highlight panels) */
  --kk-mulled-berry: #9C3D52; /* Mulled Berry — Links + emphasis text; wordmark 'Krafts' */
  --kk-celery-sage: #A3B58F; /* Celery Sage — Tertiary / decorative (background blobs, dividers, tags) */
  --kk-butter-honey: #EBC66B; /* Butter Honey — Highlight: price badges & 'new' stickers (Cocoa text only) */
  --kk-moss-hover: #3C5330; /* Deep Moss — Button hover/active */
  --kk-berry-hover: #7A2E40; /* Deep Berry — Link hover (plus underline) */

  /* Roles */
  --kk-bg: var(--kk-cloud-cream);
  --kk-surface: var(--kk-linen);
  --kk-text: var(--kk-cocoa-bark);
  --kk-accent-primary: var(--kk-grounded-moss);
  --kk-accent-secondary: var(--kk-rosebud-pink);
  --kk-accent-tertiary: var(--kk-celery-sage);
  --kk-highlight: var(--kk-butter-honey);
  --kk-link: var(--kk-mulled-berry);
  --kk-link-hover: var(--kk-berry-hover);
  --kk-button-bg: var(--kk-grounded-moss);
  --kk-button-text: var(--kk-cloud-cream);
  --kk-button-hover-bg: var(--kk-moss-hover);
  --kk-focus-ring: var(--kk-mulled-berry);

  /* Fonts (Google Fonts) */
  --kk-font-display: "Fraunces", Georgia, serif;
  --kk-font-body: "Nunito", system-ui, sans-serif;
  --kk-font-ui: "Poppins", "Nunito", sans-serif;
}

/* Google Fonts import:
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,600..700,100,0&family=Nunito:wght@400;600;700;800&family=Poppins:wght@600;700;800&display=swap');
*/
body { background: var(--kk-bg); color: var(--kk-text); font-family: var(--kk-font-body); }
h1, h2, h3 { font-family: var(--kk-font-display); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--kk-text); }
a { color: var(--kk-link); text-underline-offset: 2px; }
a:hover, a:focus { color: var(--kk-link-hover); }
.kk-button { background: var(--kk-button-bg); color: var(--kk-button-text); font-family: var(--kk-font-ui); font-weight: 700; border-radius: 999px; padding: .7em 1.4em; border: 0; }
.kk-button:hover, .kk-button:focus-visible { background: var(--kk-button-hover-bg); }
:focus-visible { outline: 3px solid var(--kk-focus-ring); outline-offset: 2px; }
.kk-card { background: var(--kk-surface); border-radius: 16px; }
.kk-badge-price { background: var(--kk-highlight); color: var(--kk-text); font-weight: 800; }