@runwell/shopify-toolkit 0.13.3 → 0.14.0

package/lib/init.js

@@ -82,6 +82,27 @@ export async function init(flags) {
 
   fs.writeFileSync(path.join(targetDir, 'runwell.config.json'), JSON.stringify(config, null, 2) + '\n');
 
+  // Scaffold settings_data.json with optional premium-editorial defaults.
+  // body_scale and heading_scale drive Dawn's --font-body-scale and
+  // --font-heading-scale, which the toolkit's _shared/css-typography
+  // module wraps so module type sizes scale uniformly.
+  const premiumEditorial = flags.premiumEditorial || flags['premium-editorial'];
+  const settingsData = {
+    current: 'Default',
+    presets: {
+      Default: premiumEditorial
+        ? { body_scale: 110, heading_scale: 120 }
+        : {}
+    }
+  };
+  fs.writeFileSync(
+    path.join(targetDir, 'config', 'settings_data.json'),
+    JSON.stringify(settingsData, null, 2) + '\n'
+  );
+  if (premiumEditorial) {
+    console.log('Applied premium-editorial typography defaults: body_scale=110, heading_scale=120');
+  }
+
   // Scaffold templates
   fs.writeFileSync(
     path.join(targetDir, 'templates', 'index.json'),

package/modules/_shared/css-typography/assets/runwell-typography.css

@@ -0,0 +1,27 @@
+/* Runwell Shopify Toolkit: typography tokens.
+   Wraps Dawn's --font-body-scale and --font-heading-scale CSS variables
+   (which Dawn computes from the Theme Editor body_scale and heading_scale
+   sliders in layout/theme.liquid) so every toolkit module renders type
+   that scales uniformly when a merchant adjusts the sliders.
+
+   Modules reference these via var(--runwell-X-size). Tenant CSS may also
+   reference them directly OR compose its own scale-aware sizes using
+   calc(var(--font-body-scale) * Xrem) and calc(var(--font-heading-scale) * Xrem).
+
+   Do not hand-edit in client themes; re-run runwell-shopify sync to update.
+*/
+:root {
+  /* Body-scale derived. Eyebrows, captions, ledes, body, CTAs. */
+  --runwell-eyebrow-size:  calc(var(--font-body-scale) * 0.78rem);
+  --runwell-caption-size:  calc(var(--font-body-scale) * 0.85rem);
+  --runwell-meta-size:     calc(var(--font-body-scale) * 0.92rem);
+  --runwell-cta-size:      calc(var(--font-body-scale) * 1.15rem);
+  --runwell-body-size:     calc(var(--font-body-scale) * 1.6rem);
+  --runwell-lede-size:     calc(var(--font-body-scale) * 1.7rem);
+
+  /* Heading-scale derived. Section titles, big numbers, hero/aura titles. */
+  --runwell-h4-size: calc(var(--font-heading-scale) * 1.7rem);
+  --runwell-h3-size: calc(var(--font-heading-scale) * clamp(2rem, 3vw, 2.8rem));
+  --runwell-h2-size: calc(var(--font-heading-scale) * clamp(3rem, 5vw, 4.8rem));
+  --runwell-h1-size: calc(var(--font-heading-scale) * clamp(3.6rem, 6vw, 6rem));
+}

package/modules/_shared/css-typography/module.json

@@ -0,0 +1,13 @@
+{
+  "name": "_shared/css-typography",
+  "version": "0.1.0",
+  "category": "foundation",
+  "description": "Typography tokens published as :root vars. Every Runwell module references these instead of hardcoding rem values, so type scale responds to Dawn's body_scale and heading_scale Theme Editor sliders. Always synced.",
+  "always_enabled": true,
+  "files": {
+    "assets": ["assets/runwell-typography.css"]
+  },
+  "config": {
+    "schema": {}
+  }
+}

package/modules/bundle-builder/assets/runwell-bundle-builder.css

@@ -89,12 +89,12 @@
 
 .runwell-bundle-builder__stars {
   color: #E8B931;
-  font-size: 1.6rem;
+  font-size: calc(var(--font-body-scale) * 1.6rem);
   letter-spacing: 1px;
 }
 
 .runwell-bundle-builder__rating-text {
-  font-size: 1.4rem;
+  font-size: calc(var(--font-body-scale) * 1.4rem);
   font-weight: 600;
   font-style: italic;
 }
@@ -121,7 +121,7 @@
 
 .runwell-bundle-builder__sale-text {
   font-weight: 700;
-  font-size: 1.5rem;
+  font-size: calc(var(--font-body-scale) * 1.5rem);
   white-space: nowrap;
 }
 
@@ -131,7 +131,7 @@
   align-items: center;
   justify-content: center;
   gap: 6px;
-  font-size: 1.3rem;
+  font-size: calc(var(--font-body-scale) * 1.3rem);
   font-weight: 500;
   color: #b45309;
   margin-bottom: 1rem;
@@ -190,7 +190,7 @@
   right: 16px;
   background: #3F5B4C;
   color: #fff;
-  font-size: 1.0rem;
+  font-size: var(--runwell-body-size);
   font-weight: 700;
   padding: 2px 10px;
   border-radius: 4px;
@@ -242,7 +242,7 @@
 
 .runwell-bundle-builder__option-title {
   font-weight: 700;
-  font-size: 1.5rem;
+  font-size: calc(var(--font-heading-scale) * 1.5rem);
 }
 
 .runwell-bundle-builder__option-pricing {
@@ -254,11 +254,11 @@
 
 .runwell-bundle-builder__option-price {
   font-weight: 700;
-  font-size: 1.8rem;
+  font-size: calc(var(--font-body-scale) * 1.8rem);
 }
 
 .runwell-bundle-builder__option-compare {
-  font-size: 1.3rem;
+  font-size: calc(var(--font-body-scale) * 1.3rem);
   text-decoration: line-through;
   opacity: 0.5;
 }
@@ -271,7 +271,7 @@
 }
 
 .runwell-bundle-builder__badge {
-  font-size: 1.1rem;
+  font-size: calc(var(--font-body-scale) * 1.1rem);
   font-weight: 700;
   padding: 2px 8px;
   border-radius: 4px;
@@ -297,19 +297,19 @@
   padding: 8px 12px;
   background: rgba(63, 91, 76, 0.06);
   border-radius: 6px;
-  font-size: 1.3rem;
+  font-size: calc(var(--font-body-scale) * 1.3rem);
   font-weight: 600;
 }
 
 .runwell-bundle-builder__gift-icon {
-  font-size: 1.6rem;
+  font-size: calc(var(--font-body-scale) * 1.6rem);
 }
 
 /* ATC Button */
 .runwell-bundle-builder__atc {
   width: 100%;
   padding: 1.6rem;
-  font-size: 1.6rem;
+  font-size: calc(var(--font-body-scale) * 1.6rem);
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
@@ -331,7 +331,7 @@
   display: flex;
   justify-content: center;
   gap: 2rem;
-  font-size: 1.3rem;
+  font-size: calc(var(--font-body-scale) * 1.3rem);
   opacity: 0.7;
   flex-wrap: wrap;
 }

package/modules/comparison-table/variants/feature-columns/sections/runwell-comparison-table.liquid

@@ -12,7 +12,7 @@
 >
   <div style="max-width: 1200px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 6vw;">
     {%- if section.settings.eyebrow != blank -%}
-      <div style="font-family: var(--font-body-family); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.6rem;">
+      <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.6rem;">
         {{ section.settings.eyebrow }}
       </div>
     {%- endif -%}
@@ -24,25 +24,25 @@
     {%- endif -%}
 
     {%- if section.settings.lede != blank -%}
-      <p style="font-family: var(--font-body-family); font-size: 1rem; line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 2rem 0;">
+      <p style="font-family: var(--font-body-family); font-size: var(--runwell-body-size); line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 2rem 0;">
         {{ section.settings.lede }}
       </p>
     {%- endif -%}
 
     <div style="overflow-x: auto;">
-      <table style="width: 100%; border-collapse: collapse; min-width: 600px; font-family: var(--font-body-family); font-size: 0.95rem;">
+      <table style="width: 100%; border-collapse: collapse; min-width: 600px; font-family: var(--font-body-family); font-size: var(--runwell-meta-size);">
         <thead>
           <tr>
-            <th style="text-align: left; padding: 0.8rem 1rem 0.8rem 0; font-family: var(--font-body-family); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; vertical-align: bottom; border-bottom: 2px solid currentColor;">
+            <th style="text-align: left; padding: 0.8rem 1rem 0.8rem 0; font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; vertical-align: bottom; border-bottom: 2px solid currentColor;">
               {{ section.settings.row_label_header | default: 'What you get' }}
             </th>
             {%- for block in section.blocks -%}
               <th style="text-align: left; padding: 0.8rem 1rem; vertical-align: bottom; border-bottom: 2px solid currentColor;">
-                <div style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: 1.15rem; line-height: 1.2; margin-bottom: 0.2rem;">
+                <div style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: var(--runwell-cta-size); line-height: 1.2; margin-bottom: 0.2rem;">
                   {{ block.settings.column_title }}
                 </div>
                 {%- if block.settings.column_subtitle != blank -%}
-                  <div style="font-family: var(--font-body-family); font-size: 0.78rem; opacity: 0.7; font-weight: 400; letter-spacing: normal; text-transform: none;">
+                  <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); opacity: 0.7; font-weight: 400; letter-spacing: normal; text-transform: none;">
                     {{ block.settings.column_subtitle }}
                   </div>
                 {%- endif -%}

package/modules/comparison-table/variants/feature-rows/sections/runwell-comparison-table.liquid

@@ -11,7 +11,7 @@
 >
   <div style="max-width: 1200px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 6vw;">
     {%- if section.settings.eyebrow != blank -%}
-      <div style="font-family: var(--font-body-family); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.6rem; text-align: center;">
+      <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.6rem; text-align: center;">
         {{ section.settings.eyebrow }}
       </div>
     {%- endif -%}
@@ -23,26 +23,26 @@
     {%- endif -%}
 
     {%- if section.settings.lede != blank -%}
-      <p style="font-family: var(--font-body-family); font-size: 1rem; line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 auto 2rem; text-align: center;">
+      <p style="font-family: var(--font-body-family); font-size: var(--runwell-lede-size); line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 auto 2rem; text-align: center;">
         {{ section.settings.lede }}
       </p>
     {%- endif -%}
 
     {%- if section.blocks.size > 0 -%}
       <div style="overflow-x: auto; margin: 0 auto; max-width: 880px;">
-        <table style="width: 100%; border-collapse: collapse; min-width: 600px; font-family: var(--font-body-family); font-size: 1.05rem;">
+        <table style="width: 100%; border-collapse: collapse; min-width: 600px; font-family: var(--font-body-family); font-size: var(--runwell-body-size);">
           <thead>
             <tr>
-              <th style="text-align: left; width: 55%; padding: 1.1rem 1.2rem 1.1rem 0; font-family: var(--font-body-family); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; vertical-align: bottom; border-bottom: 2px solid currentColor;">
+              <th style="text-align: left; width: 55%; padding: 1.1rem 1.2rem 1.1rem 0; font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; vertical-align: bottom; border-bottom: 2px solid currentColor;">
                 {{ section.settings.feature_label }}
               </th>
               <th style="text-align: center; width: 22.5%; padding: 1.1rem 1rem; vertical-align: bottom; border-bottom: 2px solid currentColor;">
-                <div style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: 1.4rem; line-height: 1.2;">
+                <div style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: calc(var(--font-heading-scale) * 1.4rem); line-height: 1.2;">
                   {{ section.settings.brand_name }}
                 </div>
               </th>
               <th style="text-align: center; width: 22.5%; padding: 1.1rem 1rem; vertical-align: bottom; border-bottom: 2px solid currentColor;">
-                <div style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: 1.4rem; line-height: 1.2; opacity: 0.7;">
+                <div style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: calc(var(--font-heading-scale) * 1.4rem); line-height: 1.2; opacity: 0.7;">
                   {{ section.settings.competitor_name }}
                 </div>
               </th>
@@ -56,7 +56,7 @@
                 </td>
                 <td style="padding: 1.05rem 1rem; vertical-align: middle; border-bottom: 1px solid rgba(0,0,0,0.08); text-align: center;">
                   {%- if block.settings.ours == 'yes' -%}
-                    <span style="display: inline-block; min-width: 1.6rem; font-size: 1.3rem; font-weight: 700; color: var(--runwell-rain-forrest, currentColor);">&check;</span>
+                    <span style="display: inline-block; min-width: 1.6rem; font-size: calc(var(--font-body-scale) * 1.3rem); font-weight: 700; color: var(--runwell-rain-forrest, currentColor);">&check;</span>
                   {%- elsif block.settings.ours == 'no' -%}
                     <span style="display: inline-block; min-width: 1.6rem; opacity: 0.4;">&times;</span>
                   {%- else -%}
@@ -65,7 +65,7 @@
                 </td>
                 <td style="padding: 1.05rem 1rem; vertical-align: middle; border-bottom: 1px solid rgba(0,0,0,0.08); text-align: center;">
                   {%- if block.settings.theirs == 'yes' -%}
-                    <span style="display: inline-block; min-width: 1.6rem; font-size: 1.3rem; font-weight: 700; opacity: 0.55;">&check;</span>
+                    <span style="display: inline-block; min-width: 1.6rem; font-size: calc(var(--font-body-scale) * 1.3rem); font-weight: 700; opacity: 0.55;">&check;</span>
                   {%- elsif block.settings.theirs == 'no' -%}
                     <span style="display: inline-block; min-width: 1.6rem; opacity: 0.4;">&times;</span>
                   {%- else -%}

package/modules/editorial-block/sections/runwell-editorial-block.liquid

@@ -43,18 +43,18 @@
                  style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 1rem; aspect-ratio: 4/5; object-fit: cover;">
           {%- endif -%}
           {%- if block.settings.title != blank -%}
-            <h3 style="font-family: var(--font-heading-family); font-style: normal; font-weight: 400; font-size: 1.6rem; margin: 0 0 0.5rem 0; line-height: 1.2;">
+            <h3 style="font-family: var(--font-heading-family); font-style: normal; font-weight: 400; font-size: calc(var(--font-heading-scale) * 1.6rem); margin: 0 0 0.5rem 0; line-height: 1.2;">
               {{ block.settings.title }}
             </h3>
           {%- endif -%}
           {%- if block.settings.body != blank -%}
-            <p style="font-size: 0.95rem; line-height: 1.6; opacity: 0.85; margin: 0;">
+            <p style="font-size: var(--runwell-meta-size); line-height: 1.6; opacity: 0.85; margin: 0;">
               {{ block.settings.body }}
             </p>
           {%- endif -%}
           {%- if block.settings.link_label != blank -%}
             <a href="{{ block.settings.link_url | default: '#' }}"
-               style="display: inline-block; margin-top: 0.8rem; font-weight: 700; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--runwell-blue);">
+               style="display: inline-block; margin-top: 0.8rem; font-weight: 700; font-size: var(--runwell-caption-size); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--runwell-blue);">
               {{ block.settings.link_label }} &rarr;
             </a>
           {%- endif -%}

package/modules/editorial-hero/variants/hero-with-card/assets/runwell-editorial-hero.css

@@ -65,7 +65,7 @@
 }
 
 .runwell-editorial-hero__subheading {
-  font-size: 1.5rem;
+  font-size: calc(var(--font-body-scale) * 1.5rem);
   color: #6B6259;
   line-height: 1.6;
   margin-bottom: 2rem;
@@ -73,7 +73,7 @@
 
 .runwell-editorial-hero__button {
   min-width: 200px;
-  font-size: 1.5rem;
+  font-size: calc(var(--font-body-scale) * 1.5rem);
   padding: 1.4rem 3.2rem;
   background: #2A2622;
   color: #fff;

package/modules/editorial-hero/variants/video-bg/sections/runwell-video-hero.liquid

@@ -44,7 +44,7 @@
 
   <div class="runwell-video-hero__content">
     {%- if section.settings.eyebrow != blank -%}
-      <div style="font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; margin-bottom: 1rem;">
+      <div style="font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; margin-bottom: 1rem;">
         {{ section.settings.eyebrow }}
       </div>
     {%- endif -%}

package/modules/pdp-ingredients/sections/runwell-ingredients.liquid

@@ -14,19 +14,19 @@
 >
   <div style="max-width: 1200px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 6vw;">
     {%- if section.settings.eyebrow != blank -%}
-      <div style="font-family: var(--font-body-family); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.6rem;">
+      <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.6rem;">
         {{ section.settings.eyebrow }}
       </div>
     {%- endif -%}
 
     {%- if section.settings.heading != blank -%}
-      <h2 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.1; margin: 0 0 1rem 0; max-width: 22ch;">
+      <h2 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: var(--runwell-h2-size); line-height: 1.1; margin: 0 0 1rem 0; max-width: 22ch;">
         {{ section.settings.heading }}
       </h2>
     {%- endif -%}
 
     {%- if section.settings.lede != blank -%}
-      <p style="font-family: var(--font-body-family); font-size: 1rem; line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 2.5rem 0;">
+      <p style="font-family: var(--font-body-family); font-size: var(--runwell-body-size); line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 2.5rem 0;">
         {{ section.settings.lede }}
       </p>
     {%- endif -%}
@@ -36,15 +36,15 @@
         {%- for ing in ingredients_meta -%}
           <div style="border-top: 2px solid currentColor; padding-top: 1rem;">
             {%- if ing.dose != blank -%}
-              <div style="font-family: var(--font-body-family); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.4rem;">
+              <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.4rem;">
                 {{ ing.dose }}
               </div>
             {%- endif -%}
-            <h3 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin: 0 0 0.5rem 0;">
+            <h3 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: calc(var(--font-heading-scale) * 1.3rem); line-height: 1.2; margin: 0 0 0.5rem 0;">
               {{ ing.name }}
             </h3>
             {%- if ing.role != blank -%}
-              <p style="font-family: var(--font-body-family); font-size: 0.92rem; line-height: 1.6; opacity: 0.85; margin: 0;">
+              <p style="font-family: var(--font-body-family); font-size: var(--runwell-meta-size); line-height: 1.6; opacity: 0.85; margin: 0;">
                 {{ ing.role }}
               </p>
             {%- endif -%}
@@ -54,15 +54,15 @@
         {%- for block in section.blocks -%}
           <div {{ block.shopify_attributes }} style="border-top: 2px solid currentColor; padding-top: 1rem;">
             {%- if block.settings.dose != blank -%}
-              <div style="font-family: var(--font-body-family); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.4rem;">
+              <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.4rem;">
                 {{ block.settings.dose }}
               </div>
             {%- endif -%}
-            <h3 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin: 0 0 0.5rem 0;">
+            <h3 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: calc(var(--font-heading-scale) * 1.3rem); line-height: 1.2; margin: 0 0 0.5rem 0;">
               {{ block.settings.name }}
             </h3>
             {%- if block.settings.role != blank -%}
-              <p style="font-family: var(--font-body-family); font-size: 0.92rem; line-height: 1.6; opacity: 0.85; margin: 0;">
+              <p style="font-family: var(--font-body-family); font-size: var(--runwell-meta-size); line-height: 1.6; opacity: 0.85; margin: 0;">
                 {{ block.settings.role }}
               </p>
             {%- endif -%}

package/modules/pdp-journal-link/sections/runwell-pdp-journal.liquid

@@ -21,34 +21,34 @@
     <div style="display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center;">
       <div>
         {%- if section.settings.eyebrow != blank -%}
-          <div style="font-family: var(--font-body-family); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.6rem;">
+          <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.6rem;">
             {{ section.settings.eyebrow }}
           </div>
         {%- endif -%}
 
         {%- if linked_article != blank -%}
-          <h2 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.1; margin: 0 0 0.8rem 0; max-width: 22ch;">
+          <h2 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: var(--runwell-h2-size); line-height: 1.1; margin: 0 0 0.8rem 0; max-width: 22ch;">
             {{ linked_article.title }}
           </h2>
-          <p style="font-family: var(--font-body-family); font-size: 1rem; line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 1.4rem 0;">
+          <p style="font-family: var(--font-body-family); font-size: var(--runwell-body-size); line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 1.4rem 0;">
             {{ linked_article.excerpt_or_content | strip_html | truncate: 180 }}
           </p>
           <a href="{{ linked_article.url }}"
-             style="display: inline-block; padding: 0.85rem 1.4rem; border-radius: 4px; background: {{ section.settings.text_color }}; color: {{ section.settings.background_color }}; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;">
+             style="display: inline-block; padding: 0.85rem 1.4rem; border-radius: 4px; background: {{ section.settings.text_color }}; color: {{ section.settings.background_color }}; font-weight: 700; font-size: var(--runwell-caption-size); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;">
             Read the journal &rarr;
           </a>
         {%- else -%}
-          <h2 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.1; margin: 0 0 0.8rem 0; max-width: 22ch;">
+          <h2 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: var(--runwell-h2-size); line-height: 1.1; margin: 0 0 0.8rem 0; max-width: 22ch;">
             {{ section.settings.fallback_title }}
           </h2>
           {%- if section.settings.fallback_body != blank -%}
-            <p style="font-family: var(--font-body-family); font-size: 1rem; line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 1.4rem 0;">
+            <p style="font-family: var(--font-body-family); font-size: var(--runwell-body-size); line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 1.4rem 0;">
               {{ section.settings.fallback_body }}
             </p>
           {%- endif -%}
           {%- if section.settings.fallback_link_url != blank -%}
             <a href="{{ section.settings.fallback_link_url }}"
-               style="display: inline-block; padding: 0.85rem 1.4rem; border-radius: 4px; background: {{ section.settings.text_color }}; color: {{ section.settings.background_color }}; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;">
+               style="display: inline-block; padding: 0.85rem 1.4rem; border-radius: 4px; background: {{ section.settings.text_color }}; color: {{ section.settings.background_color }}; font-weight: 700; font-size: var(--runwell-caption-size); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;">
               {{ section.settings.fallback_link_label | default: 'Read more' }} &rarr;
             </a>
           {%- endif -%}

package/modules/pdp-trust-checks/sections/runwell-pdp-trust.liquid

@@ -10,19 +10,19 @@
 >
   <div class="runwell-pdp-trust__inner" style="max-width: 1200px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 6vw;">
     {%- if section.settings.eyebrow != blank -%}
-      <div style="font-family: var(--font-body-family); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.8rem;">
+      <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.8rem;">
         {{ section.settings.eyebrow }}
       </div>
     {%- endif -%}
 
     {%- if section.settings.heading != blank -%}
-      <h2 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.1; margin: 0 0 1rem 0; max-width: 22ch;">
+      <h2 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: var(--runwell-h2-size); line-height: 1.1; margin: 0 0 1rem 0; max-width: 22ch;">
         {{ section.settings.heading }}
       </h2>
     {%- endif -%}
 
     {%- if section.settings.lede != blank -%}
-      <p style="font-family: var(--font-body-family); font-size: 1rem; line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 2.5rem 0;">
+      <p style="font-family: var(--font-body-family); font-size: var(--runwell-body-size); line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 2.5rem 0;">
         {{ section.settings.lede }}
       </p>
     {%- endif -%}
@@ -30,13 +30,13 @@
     <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.6rem; margin-top: 2rem;">
       {%- for block in section.blocks -%}
         <div {{ block.shopify_attributes }} style="border-top: 2px solid currentColor; padding-top: 1rem; opacity: 0.92;">
-          <div style="font-family: var(--font-body-family); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.4rem;">
+          <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.4rem;">
             {{ block.settings.eyebrow | default: forloop.index | prepend: 'Check ' }}
           </div>
-          <h3 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: 1.25rem; line-height: 1.2; margin: 0 0 0.5rem 0;">
+          <h3 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: calc(var(--font-heading-scale) * 1.25rem); line-height: 1.2; margin: 0 0 0.5rem 0;">
             {{ block.settings.title }}
           </h3>
-          <p style="font-family: var(--font-body-family); font-size: 0.92rem; line-height: 1.6; opacity: 0.85; margin: 0;">
+          <p style="font-family: var(--font-body-family); font-size: var(--runwell-meta-size); line-height: 1.6; opacity: 0.85; margin: 0;">
             {{ block.settings.body }}
           </p>
         </div>
@@ -46,7 +46,7 @@
     {%- if section.settings.link_label != blank -%}
       <div style="margin-top: 2.5rem;">
         <a href="{{ section.settings.link_url | default: '/pages/standards' }}"
-           style="font-family: var(--font-body-family); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--runwell-blue);">
+           style="font-family: var(--font-body-family); font-weight: 700; font-size: var(--runwell-caption-size); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--runwell-blue);">
           {{ section.settings.link_label }} &rarr;
         </a>
       </div>

package/modules/post-purchase-upsell/assets/runwell-thank-you.css

@@ -19,7 +19,7 @@
   margin-bottom: 2rem;
 }
 .runwell-ty-upsell__eyebrow {
-  font-size: 0.78rem;
+  font-size: var(--runwell-eyebrow-size);
   letter-spacing: 0.2em;
   text-transform: uppercase;
   font-weight: 700;
@@ -30,12 +30,12 @@
   font-family: var(--font-heading-family, Georgia, serif);
   font-style: normal;
   font-weight: 400;
-  font-size: clamp(1.7rem, 3vw, 2.4rem);
+  font-size: calc(var(--font-heading-scale) * clamp(1.7rem, 3vw, 2.4rem));
   line-height: 1.1;
   margin: 0 0 0.8rem 0;
 }
 .runwell-ty-upsell__lede {
-  font-size: 0.95rem;
+  font-size: var(--runwell-meta-size);
   line-height: 1.5;
   margin: 0;
   opacity: 0.85;
@@ -94,15 +94,15 @@
 }
 .runwell-ty-card__title {
   font-family: var(--font-heading-family, Georgia, serif);
-  font-size: 1.1rem;
+  font-size: calc(var(--font-heading-scale) * 1.1rem);
   line-height: 1.2;
 }
 .runwell-ty-card__price {
-  font-size: 0.9rem;
+  font-size: var(--runwell-caption-size);
   opacity: 0.7;
 }
 .runwell-ty-card__cta {
-  font-size: 0.85rem;
+  font-size: var(--runwell-caption-size);
   font-weight: 700;
   text-decoration: underline;
   text-underline-offset: 4px;

package/modules/press-bar/sections/runwell-press-bar.liquid

@@ -17,7 +17,7 @@
 >
   <div style="max-width: 1400px; margin: 0 auto;">
     {%- if section.settings.eyebrow != blank -%}
-      <div style="text-align: center; font-family: var(--font-body-family); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; margin-bottom: 1.6rem;">
+      <div style="text-align: center; font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; margin-bottom: 1.6rem;">
         {{ section.settings.eyebrow }}
       </div>
     {%- endif -%}
@@ -40,7 +40,7 @@
               height="40"
               loading="lazy">
           {%- elsif block.settings.label != blank -%}
-            <span style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 2vw, 1.5rem);">
+            <span style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: calc(var(--font-heading-scale) * clamp(1.1rem, 2vw, 1.5rem));">
               {{ block.settings.label }}
             </span>
           {%- endif -%}

package/modules/risk-reversal/sections/runwell-risk-reversal.liquid

@@ -11,24 +11,24 @@
   <div style="max-width: 1200px; margin: 0 auto; padding: clamp(1.4rem, 3vw, 2.2rem) 6vw;">
     <div style="display: flex; align-items: flex-start; gap: 1rem;">
       {%- if section.settings.icon != blank -%}
-        <div style="flex: 0 0 auto; font-size: 1.6rem; line-height: 1; opacity: 0.7;">
+        <div style="flex: 0 0 auto; font-size: calc(var(--font-body-scale) * 1.6rem); line-height: 1; opacity: 0.7;">
           {{ section.settings.icon }}
         </div>
       {%- endif -%}
       <div style="flex: 1 1 auto;">
         {%- if section.settings.heading != blank -%}
-          <h3 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: 1.15rem; line-height: 1.2; margin: 0 0 0.3rem 0;">
+          <h3 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: var(--runwell-cta-size); line-height: 1.2; margin: 0 0 0.3rem 0;">
             {{ section.settings.heading }}
           </h3>
         {%- endif -%}
         {%- if section.settings.body != blank -%}
-          <p style="font-family: var(--font-body-family); font-size: 0.92rem; line-height: 1.55; margin: 0; opacity: 0.85;">
+          <p style="font-family: var(--font-body-family); font-size: var(--runwell-meta-size); line-height: 1.55; margin: 0; opacity: 0.85;">
             {{ section.settings.body }}
           </p>
         {%- endif -%}
         {%- if section.settings.link_label != blank -%}
           <a href="{{ section.settings.link_url | default: '/policies/refund-policy' }}"
-             style="display: inline-block; margin-top: 0.5rem; font-family: var(--font-body-family); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--runwell-blue);">
+             style="display: inline-block; margin-top: 0.5rem; font-family: var(--font-body-family); font-weight: 700; font-size: var(--runwell-caption-size); letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--runwell-blue);">
             {{ section.settings.link_label }} &rarr;
           </a>
         {%- endif -%}

package/modules/scrolling-ticker/assets/runwell-scrolling-ticker.css

@@ -2,7 +2,7 @@
   overflow: hidden;
   white-space: nowrap;
   padding: 12px 0;
-  font-size: 1.4rem;
+  font-size: calc(var(--font-body-scale) * 1.4rem);
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -45,7 +45,7 @@
 
 @media screen and (max-width: 749px) {
   .runwell-scrolling-ticker {
-    font-size: 1.2rem;
+    font-size: calc(var(--font-body-scale) * 1.2rem);
     padding: 10px 0;
   }
 }

package/modules/shipping-bar/sections/runwell-shipping-bar.liquid

@@ -18,7 +18,7 @@
 <aside
   class="runwell-shipping-bar"
   data-section-id="{{ section.id }}"
-  style="background: {{ section.settings.background_color }}; color: {{ section.settings.text_color }}; padding: 0.55rem 1.5rem; font-family: var(--font-body-family); font-size: 0.82rem; letter-spacing: 0.04em; text-align: center;"
+  style="background: {{ section.settings.background_color }}; color: {{ section.settings.text_color }}; padding: 0.55rem 1.5rem; font-family: var(--font-body-family); font-size: var(--runwell-caption-size); letter-spacing: 0.04em; text-align: center;"
 >
   <div style="max-width: 1400px; margin: 0 auto;">
     {%- if threshold > 0 and remaining > 0 -%}

package/modules/social-proof-banner/assets/runwell-social-proof-banner.css

@@ -8,13 +8,13 @@
 
 .social-proof-banner__count {
   font-family: var(--font-heading-family);
-  font-size: 3.6rem;
+  font-size: calc(var(--font-body-scale) * 3.6rem);
   font-weight: 600;
   line-height: 1;
 }
 
 .social-proof-banner__text {
-  font-size: 1.6rem;
+  font-size: calc(var(--font-body-scale) * 1.6rem);
   opacity: 0.8;
 }
 
@@ -25,6 +25,6 @@
   }
 
   .social-proof-banner__count {
-    font-size: 2.8rem;
+    font-size: calc(var(--font-body-scale) * 2.8rem);
   }
 }

package/modules/stats-bar/assets/runwell-stats-bar.css

@@ -25,13 +25,13 @@
 }
 
 .stats-bar__number {
-  font-size: 4.8rem;
+  font-size: calc(var(--font-heading-scale) * 4.8rem);
   line-height: 1;
   font-weight: 600;
 }
 
 .stats-bar__label {
-  font-size: 1.4rem;
+  font-size: calc(var(--font-body-scale) * 1.4rem);
   opacity: 0.85;
   max-width: 24ch;
   line-height: 1.4;
@@ -44,6 +44,6 @@
   }
 
   .stats-bar__number {
-    font-size: 3.6rem;
+    font-size: calc(var(--font-heading-scale) * 3.6rem);
   }
 }

package/modules/sticky-atc/assets/runwell-sticky-atc.css

@@ -57,7 +57,7 @@
 .runwell-sticky-atc__title {
   font-family: var(--font-heading-family, serif);
   font-style: italic;
-  font-size: 0.95rem;
+  font-size: var(--runwell-meta-size);
   font-weight: 400;
   line-height: 1.2;
   color: var(--runwell-primary, #1A1A1A);
@@ -68,7 +68,7 @@
 
 .runwell-sticky-atc__price {
   font-family: var(--font-body-family, sans-serif);
-  font-size: 0.85rem;
+  font-size: var(--runwell-caption-size);
   font-weight: 500;
   color: var(--runwell-primary, #1A1A1A);
   opacity: 0.8;
@@ -86,7 +86,7 @@
   border-radius: 0;
   padding: 0.75rem 1.5rem;
   font-family: var(--font-body-family, sans-serif);
-  font-size: 0.9rem;
+  font-size: var(--runwell-caption-size);
   font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: uppercase;
@@ -108,10 +108,10 @@
     padding: 0.6rem 0.9rem;
   }
   .runwell-sticky-atc__title {
-    font-size: 0.85rem;
+    font-size: var(--runwell-caption-size);
   }
   .runwell-sticky-atc__cta {
     padding: 0.6rem 1.1rem;
-    font-size: 0.8rem;
+    font-size: var(--runwell-eyebrow-size);
   }
 }

package/modules/testimonials/variants/carousel-ugc/assets/runwell-testimonials.css

@@ -6,14 +6,14 @@
 
 .runwell-testimonials__heading {
   font-family: var(--font-heading-family);
-  font-size: 2.4rem;
+  font-size: calc(var(--font-heading-scale) * 2.4rem);
   text-align: center;
   margin-bottom: 8px;
   color: rgba(var(--color-foreground), 1);
 }
 
 .runwell-testimonials__subheading {
-  font-size: 1.4rem;
+  font-size: calc(var(--font-body-scale) * 1.4rem);
   text-align: center;
   color: rgba(var(--color-foreground), 0.65);
   margin-bottom: 32px;
@@ -164,6 +164,6 @@
   }
 
   .runwell-testimonials__heading {
-    font-size: 2rem;
+    font-size: calc(var(--font-heading-scale) * 2rem);
   }
 }

package/modules/trust-badges/sections/runwell-trust-badges.liquid

@@ -13,15 +13,15 @@
     <div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 1.5rem;">
       {%- for block in section.blocks -%}
         <div {{ block.shopify_attributes }} style="display: flex; align-items: center; gap: 0.6rem; min-width: 0;">
-          <div style="font-size: 1.6rem; line-height: 1; opacity: 0.7;">
+          <div style="font-size: calc(var(--font-body-scale) * 1.6rem); line-height: 1; opacity: 0.7;">
             {{ block.settings.icon }}
           </div>
           <div style="min-width: 0;">
-            <div style="font-family: var(--font-body-family); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.2;">
+            <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.04em; line-height: 1.2;">
               {{ block.settings.title }}
             </div>
             {%- if block.settings.body != blank -%}
-              <div style="font-family: var(--font-body-family); font-size: 0.72rem; opacity: 0.7; line-height: 1.3; margin-top: 0.15rem;">
+              <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); opacity: 0.7; line-height: 1.3; margin-top: 0.15rem;">
                 {{ block.settings.body }}
               </div>
             {%- endif -%}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runwell/shopify-toolkit",
-  "version": "0.13.3",
+  "version": "0.14.0",
   "description": "Reusable Shopify theme modules from Runwell. Replaces typically app-driven features (reviews, wishlist, urgency, FAQ, post-purchase upsell, exit popups, free-ship progress, sticky ATC, testimonials, badges, bundles) with native Liquid + JS + CSS that ship across multiple client themes via a config-driven sync CLI.",
   "type": "module",
   "main": "lib/index.js",