/* ============================================================
   BOON — SHARED DESIGN SYSTEM
   Upload to: helloboon.com/wp-content/uploads/2026/04/boon-shared.css
   Reference: <link rel="stylesheet" href="https://helloboon.com/wp-content/uploads/2026/04/boon-shared.css">
   ============================================================ */

/* ---------- Self-hosted brand fonts ---------- */
@font-face{
  font-family:'Faculty Glyphic';
  src:url('https://helloboon.com/wp-content/uploads/2026/04/FacultyGlyphic-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Polysans';
  src:url('https://helloboon.com/wp-content/uploads/2026/04/polysanstrial-neutral.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---------- Brand tokens (available to all components) ---------- */
:root{
  /* Palette */
  --boon-green:#1B4332;
  --boon-green-light:#2D6B4F;
  --boon-green-deep:#143A2A;
  --boon-bright:#52B788;
  --boon-bright-deep:#3D9A6E;
  --boon-bright-light:#7DD9A8;
  --boon-sage:#A8C5B8;
  --boon-teal:#2A5F56;
  --boon-teal-dark:#1C423B;
  --boon-teal-darkest:#102924;
  --boon-black:#0B1D13;
  --boon-near-black:#071912;
  --boon-cream:#F5F3EC;
  --boon-cream-tint:#FAF8F2;
  --boon-cream-deep:#EDEAE0;
  --boon-warm-gray:#D4D1CA;
  --boon-warm-gray-deep:#9E9B95;
  --boon-warm-dark:#5A5855;
  --boon-surface:#FFFFFF;

  /* Layout */
  --boon-max:1200px;
  --boon-prose:680px;
  --boon-gutter:24px;
  --boon-gutter-lg:48px;
  --boon-sy:96px;
  --boon-sy-lg:144px;
  --boon-r:8px;
  --boon-r-lg:12px;

  /* Motion */
  --boon-ease:cubic-bezier(.2,.7,.2,1);
  --boon-dur-fast:160ms;
  --boon-dur-base:240ms;
  --boon-dur-reveal:520ms;

  /* Typography stacks */
  --boon-display:'Faculty Glyphic','Playfair Display','DM Serif Display',Georgia,serif;
  --boon-body:'Polysans','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --boon-mono:'SFMono-Regular',Menlo,Consolas,monospace;
}

/* ---------- Google Fonts fallback (DM Sans for components that use it) ---------- */
/* Note: Components using DM Sans should still include the Google Fonts <link> in their HTML,
   or switch to Polysans via var(--boon-body). */

/* ---------- Common full-bleed container escape ----------
   Apply these properties to any component root that needs to
   break out of WooCommerce's constrained parent:

   width:100vw!important;max-width:100vw!important;
   position:relative!important;left:50%!important;right:50%!important;
   margin-left:-50vw!important;margin-right:-50vw!important;
   -------------------------------------------------------- */

/* ---------- Reveal animation (scroll-triggered fade-up) ---------- */
.boon-reveal{opacity:0;transform:translateY(18px);transition:opacity var(--boon-dur-reveal) var(--boon-ease),transform var(--boon-dur-reveal) var(--boon-ease)}
.boon-reveal.is-in{opacity:1;transform:translateY(0)}