@gemboss/gem-framework 0.9.8 → 0.10.1

package/README.md

@@ -25,6 +25,26 @@ khi CÀI, nên build trên Railway không kéo được, và GemFactory phải c
 thì mọi repo cài theo version, và bị tụt thì thấy ngay ở số version. Mã trong gói là CSS và runtime vốn đã tới
 trình duyệt của người mua, cộng bộ kiểm; `license: UNLICENSED` giữ nguyên (xem được, không có quyền dùng lại).
 
+## Kênh `next` (thử trước khi phát hành)
+
+Mỗi commit lên main của gemtheme mà đổi gói thì có ngay một bản trên GitHub Packages:
+`@chriskoh26/gem-framework@next`, số phiên bản `<x.y.z của main>-next.<10 ký tự băm của bản dựng>`. Workflow:
+`.github/workflows/gem-framework-next.yml`. Kênh `latest` trên npm vẫn chỉ đi qua passkey (mục dưới).
+
+Thử ở một repo dùng gói, KHÔNG commit hai thay đổi này:
+
+```
+# .npmrc của repo (hoặc ~/.npmrc), token chỉ cần read:packages
+@chriskoh26:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${GITHUB_PACKAGES_TOKEN}
+
+npm install --no-save "@gemboss/gem-framework@npm:@chriskoh26/gem-framework@next"
+```
+
+Bí danh giữ nguyên tên `@gemboss/gem-framework`, nên mã và `import` của bên dùng không đổi. Bản dựng ghi
+`gemtheme_sha` trong `dist/SOURCE.json`. Luôn ghi `@next` (hoặc đúng số): tag `latest` của gói trên GitHub Packages là
+0.4.0 từ 29/09/2026, không phải bản mới nhất.
+
 ## Phát hành
 
 Một lệnh, chạy trên máy, không dùng GitHub Actions (Chris chốt 30/09/2026: không trả tiền runner):
@@ -73,6 +93,60 @@ Từ 0.8.2 mỗi module có `.d.ts` cạnh nó (`mount(root?: ParentNode | null,
 
 ## Nhật ký thay đổi
 
+- **0.10.1** (09/10/2026): màu `color.warning` mặc định `#b7791f` → `#9a661a`. Màu cũ chỉ đạt 3,36:1 trên nền mặc định và
+  3,64:1 trên surface (dưới AA 4,5:1), trong khi section GemFactory dùng nó làm màu chữ và badge vẽ `accentText` trên nó. Màu
+  mới đạt 4,52 / 4,90, giữ tông. Phiên gemfactory phát hiện khi thêm cảnh báo tương phản cho preset. Test mới
+  `default-colours-meet-aa`: mọi màu mặc định dùng làm chữ ≥ 4,5:1 trên cả hai nền. Plan khai `color.warning` riêng (mọi
+  plan sinh từ style pack) thì không đổi: bảng màu pack sửa ở theme-presets (#722). Preview harness của gem-landing-blocks
+  theo màu mới. Vòng tham chiếu chéo nhóm của khoá điện thoại vẫn CHƯA chặn (ghi ở `readPhoneTokens`).
+- **0.10.0** (08/10/2026, gộp 0.9.10 và 0.9.11 chưa phát hành): phần còn lại của yêu cầu #4 GemFactory (Figma CRO, issue
+  gemfactory #95). Plan không khai khoá nào dưới đây thì CSS tính ra như cũ (mỗi `var()` lùi về đúng giá trị cũ).
+  - Line-height tiêu đề: opt-in `data-gem-heading="section"` (1.1), `.gem-section__heading` nền (1.04) và của Dawn parity
+    (1.08) đọc `--gem-font-heading-line-height`, tức `typography.headingLineHeight`. Khoá này ĐÃ CÓ trong hai style pack
+    (`graphic-editorial` 0.95, `warm-mineral-spf` 1.2) mà trước giờ không tới tiêu đề section: store dùng hai pack đó đổi
+    line-height tiêu đề section và hero theo đúng khoá đã khai. Giá trị không phải line-height bị bỏ (biến khai sai làm
+    `var()` bỏ qua fallback và rơi về 1,5 của body), `validateGemTokens` báo `invalid_line_height_token`. Luật riêng của
+    biến thể Dawn có cỡ px cố định (hero split-proof 46px/1.08, compact-collection…) giữ line-height riêng.
+  - Cỡ tiêu đề theo thang chữ, CHỈ khi plan khai `typography.base` hoặc `scale`: phát `--gem-section-heading-size`
+    (= `--gem-h2` × núm heading-scale), `--gem-hero-heading-size` (`--gem-h1`, chỉ luật hero h1/h2 của Dawn đọc) và bản
+    `-mobile` (không lớn hơn `--gem-heading-phone-cap`, trần điện thoại của PROFILE: Dawn khai `clamp(2rem, 11vw, 3.6rem)`
+    trên `:root`, profile nền lùi về `clamp(1.75rem, 9vw, 2.75rem)` như #587). Mọi luật tiêu đề section đọc chúng.
+  - Khoá điện thoại: `spacing.<bậc>Mobile` (cả 10 bậc) và `layout.sectionMobile` (so khoá bỏ qua hoa thường và dấu nối)
+    khai lại biến gốc trong khối `@media (max-width: 749px)` của `baseMobile`. Spacing nhân núm mật độ; giá trị kiểm hình
+    dạng như `md` (0 trần thành `0px`); giá trị không đơn vị, hoặc đọc biến của chính nhóm nó (khai lại trên `:root` là
+    vòng lặp, padding về 0), bị bỏ và `validateGemTokens` báo `invalid_phone_token`. `sectionMobile` còn đặt
+    `--gem-layout-section-mobile` trên `:root` desktop: padding ≤760px của profile nền dùng nguyên giá trị thay vì
+    desktop × 0,72. Không có khoá điện thoại cho `page`/`gutter` (bề rộng điện thoại của profile nền không đọc chúng).
+    Ở lane một stylesheet (`createGemThemeCss`), `:root` của Dawn đứng sau token và khoá `layout.*` như trước.
+  - Opt-in eyebrow có `font-size: var(--gem-text-sm)` (mặc định 13,1px, luật nền 13px).
+  - Xuất `optionalGemTokenKeys` (manifest `token_groups[].optional_keys` đọc từ đây, gồm khoá nút của 0.9.10),
+    `gemMobileTokenCssVars`, `gemPhoneTokenTarget`, `GEM_HEADING_SIZE_CSS_VARS`, `GEM_LINE_HEIGHT_TOKEN_KEYS`: bản chép ở
+    gemsite (`theme-plan-style.ts`) và cổng preset của GemFactory đối chiếu với chúng thay vì chép tay.
+- **0.9.11** (08/10/2026): marquee còn MỘT định nghĩa. Trước đó primitives.css có hai: bản của gemtheme #124 (một track
+  nhân đôi con, dịch -50%) nằm TRÊN bản #79 (`__viewport` + hai track, dịch -100%) nên thua mọi thuộc tính cả hai cùng đặt
+  (`min-width`, `animation`), và hợp đồng của #124 chưa từng chạy. Giữ hợp đồng #79, đúng thứ clone kit của gemcapture và
+  GemFactory dựng, cộng những gì của #124 vẫn đang có hiệu lực: viền `border-block`, `will-change`, dừng khi rê lên cả
+  `.gem-marquee`, đảo chiều bằng `data-gem-marquee-reverse` (bên cạnh `.gem-marquee--reverse`). Bỏ dòng `animation-duration`
+  của marquee trong khối reduced-motion của ambient: ở đó track đã `animation: none`. Đo Chromium (6 kiểu dựng marquee, 390 và
+  1280, có và không reduced-motion, rê chuột 3 chỗ, đồng hồ animation ghim ở 1234 ms): 516.832 giá trị tính ra, 56 lệch, cả 56
+  là `animation-duration` dưới reduced-motion trên track có `animation-name: none` ở cả hai bản, tức không có gì chạy; bản cố ý
+  hỏng (bỏ `will-change` và hook đảo chiều bằng thuộc tính) lệch 328. Test mới `one-owner-per-selector`: selector viết hai lần
+  trong cùng file, cùng @media, có thuộc tính đè nhau thì chỉ được giảm (còn 28 ca, liệt kê trong test).
+- **0.9.10** (08/10/2026): token nút tuỳ chọn (`GEM_BUTTON_TOKEN_KEYS`, hình dạng ở `GEM_BUTTON_TOKEN_SHAPES`), cả bốn tên
+  đã có mà chưa ai vẽ: `radius.button` (`--gem-radius-button`, scale theo `--gem-style-radius`; validators và generation-jobs
+  đã dùng tên này), `typography.buttonWeight`, `typography.buttonTransform` và `typography.buttonLetterSpacing` (schema style
+  pack; `luxury-editorial` khai nút in hoa 0.18em từ trước, giờ mới hiện). Không khai thì nút vẽ y như trước (đo Chromium:
+  90/90 giá trị tính ra trùng bản cũ ở dawn-parity và ở morph). Bo góc là của riêng nút, nên nút pill không kéo thẻ thành
+  pill; dawn-parity hết ép nút vuông / đậm 400 khi có token. In hoa và giãn chữ không nằm trong `.gem-button` (UA cho
+  `<button>` `none`, còn `<a>` kế thừa): `createGemTokenCss` thêm luật `:where(...)` độ ưu tiên 0 chỉ khi có token
+  (`gemButtonCaseCss`, export cho storefront tự viết token CSS), nên luật CTA của section vẫn thắng. Nút dạng link không nhận
+  độ đậm / chữ hoa của token. Giá trị sai hình dạng (`"pill"`, rỗng, `"semibold"`) không được phát, `validateGemTokens` cảnh
+  báo `invalid_button_token`; khoá snake_case của editor đi qua cùng cổng. Manifest có `optional_keys`. Nguồn: GemFactory
+  Global Style 08/10/2026 (339 trang store hàng đầu: CTA pill 39%, in hoa 47%, giãn chữ 18%).
+- **0.9.9** (08/10/2026): `gemFrameworkVersion` (và `framework_version` / `gem_framework_version` trong manifest) bằng
+  đúng phiên bản của gói. Từ 0.4.0 tới 0.9.8 nó đứng yên ở `"0.1.0"`, nên trang Framework của gemboss hiện sai phiên bản
+  và GemFactory phải tự đọc phiên bản npm. Test trong `index.test.ts` đỏ khi hai giá trị lệch nhau. Không đổi CSS hay
+  runtime.
 - **0.9.8** (06/10/2026): biến chỉ được tính là "khai trên :root" khi MỌI vế của selector đúng là gốc (`:root`, `html`,
   `:host`, có thể kèm điều kiện như `:root[data-theme="dark"]`), không bao giờ là con của nó. Bản 0.9.7 chỉ xét đầu
   selector, nên một luật `:root .gem-row { --gem-row-auto-sm: … }` sẽ biến biến nội bộ thành công khai. Stylesheet hiện

package/dist/SOURCE.json

@@ -1,7 +1,7 @@
 {
   "package": "@gemboss/gem-framework",
-  "version": "0.9.8",
-  "gemtheme_sha": "fea3af50909be36e9fc8968ae407409e324a1c6b",
+  "version": "0.10.1",
+  "gemtheme_sha": "cc172eb630a30b0bacf02648deaa097c9d149883",
   "gemtheme_dirty": false,
-  "framework_version": "0.1.0"
+  "framework_version": "0.10.1"
 }

package/dist/gem-framework.css

@@ -7,7 +7,7 @@
   --gem-color-accent-text: #ffffff;
   --gem-color-border: #d2d5d8;
   --gem-color-success: #008060;
-  --gem-color-warning: #b7791f;
+  --gem-color-warning: #9a661a;
   --gem-color-danger: #d72c0d;
   --gem-font-body: Inter, system-ui, sans-serif;
   --gem-font-heading: Inter, system-ui, sans-serif;
@@ -160,9 +160,9 @@ a {
   justify-content: center;
   min-height: var(--gem-component-input-height, 44px);
   border: var(--gem-button-border-width, 1px) solid var(--gem-color-border);
-  border-radius: var(--gem-radius-md);
+  border-radius: var(--gem-radius-button, var(--gem-radius-md));
   padding: var(--gem-component-button-padding-block, 12px) var(--gem-component-button-padding-inline, 18px);
-  font-weight: 700;
+  font-weight: var(--gem-font-button-weight, 700);
   text-decoration: none;
   transition: background var(--gem-motion-duration, 160ms) var(--gem-motion-easing, ease), color var(--gem-motion-duration, 160ms) var(--gem-motion-easing, ease);
 }
@@ -440,23 +440,6 @@ a {
   border-radius: var(--gem-radius-md);
   background: color-mix(in srgb, var(--gem-color-text) 8%, var(--gem-color-background));
 }
-.gem-marquee {
-  overflow: hidden;
-  border-block: var(--gem-border-subtle, 1px solid var(--gem-color-border));
-}
-.gem-marquee__track {
-  display: flex;
-  gap: var(--gem-space-lg);
-  min-width: max-content;
-  animation: gem-marquee-scroll var(--gem-marquee-duration, 40s) linear infinite;
-  will-change: transform;
-}
-.gem-marquee:hover .gem-marquee__track {
-  animation-play-state: paused;
-}
-.gem-marquee[data-gem-marquee-reverse] .gem-marquee__track {
-  animation-direction: reverse;
-}
 .gem-carousel {
   display: grid;
   gap: var(--gem-space-md);
@@ -582,7 +565,10 @@ a {
   overflow: hidden;
   color: var(--gem-color-accent);
 }
-.gem-marquee { overflow: hidden; }
+.gem-marquee {
+  overflow: hidden;
+  border-block: var(--gem-border-subtle, 1px solid var(--gem-color-border));
+}
 .gem-marquee__viewport { display: flex; overflow: hidden; }
 .gem-marquee__track {
   flex: 0 0 auto;
@@ -593,9 +579,10 @@ a {
   gap: var(--gem-space-lg);
   white-space: nowrap;
   animation: gem-marquee var(--gem-marquee-duration, 24s) linear infinite;
+  will-change: transform;
 }
-.gem-marquee__viewport:hover .gem-marquee__track { animation-play-state: paused; }
-.gem-marquee--reverse .gem-marquee__track { animation-direction: reverse; }
+.gem-marquee:hover .gem-marquee__track, .gem-marquee__viewport:hover .gem-marquee__track { animation-play-state: paused; }
+.gem-marquee--reverse .gem-marquee__track, .gem-marquee[data-gem-marquee-reverse] .gem-marquee__track { animation-direction: reverse; }
 @keyframes gem-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
 @media (prefers-reduced-motion: reduce) {
   .gem-marquee__track { animation: none; }
@@ -1109,7 +1096,6 @@ a {
 @media (prefers-reduced-motion: reduce) {
   [data-gem-ambient] { --gem-ambient-amp: 2px; animation-duration: 12s; }
   [data-gem-reveal] { transition: none; opacity: 1; transform: none; }
-  .gem-marquee__track { animation-duration: calc(var(--gem-marquee-duration, 40s) * 2.5); }
 }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top], :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom] { position: relative; overflow: clip; overflow-clip-margin: var(--gem-divider-height, 48px); }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='wave']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='slope']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='spikes']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='arch']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='blob']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='wave']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='slope']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='spikes']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='arch']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='blob']::before { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; height: var(--gem-divider-height, 48px); background: var(--gem-section-bg, var(--gem-color-background)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
@@ -2231,8 +2217,8 @@ sticky-header.header-wrapper {
 .gem-section__heading {
   margin: 0;
   font-family: var(--gem-font-heading);
-  font-size: clamp(calc(2rem * var(--gem-typography-heading-scale, 1)), calc(4vw * var(--gem-typography-heading-scale, 1)), calc(4rem * var(--gem-typography-heading-scale, 1)));
-  line-height: 1.04;
+  font-size: var(--gem-section-heading-size, clamp(calc(2rem * var(--gem-typography-heading-scale, 1)), calc(4vw * var(--gem-typography-heading-scale, 1)), calc(4rem * var(--gem-typography-heading-scale, 1))));
+  line-height: var(--gem-font-heading-line-height, 1.04);
 }
 .gem-section__body {
   margin: 0;
@@ -2349,20 +2335,20 @@ sticky-header.header-wrapper {
   }
 }
 @media (max-width: 760px) {
-  .gem-section { padding-block: calc(var(--gem-layout-section, 64px) * 0.72); }
+  .gem-section { padding-block: var(--gem-layout-section-mobile, calc(var(--gem-layout-section, 64px) * 0.72)); }
   .gem-section__inner, .gem-container { width: min(100% - 32px, var(--gem-layout-page, 1180px)); }
-  .gem-section__heading { font-size: clamp(1.75rem, 9vw, 2.75rem); }
+  .gem-section__heading { font-size: var(--gem-section-heading-size-mobile, clamp(1.75rem, 9vw, 2.75rem)); }
   .gem-section__grid { grid-template-columns: minmax(0, 1fr); }
   .gem-section:is([data-gem-composition-mode='split-collage'], [data-gem-editorial-band-mode='media-story']) .gem-section__grid { grid-template-columns: minmax(0, 1fr); }
   .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__inner { grid-template-columns: minmax(0, 1fr); }
   .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__summary { position: static; }
   .gem-section:is([data-gem-composition-mode='slideshow'], [data-gem-composition-mode='video-led']) .gem-section__inner { min-block-size: min(62vh, 560px); }
 }
-:where(.gem-section[data-gem-eyebrow='show']) .gem-section__eyebrow { display: block; letter-spacing: 0.12em; }
-:where(.gem-section[data-gem-heading='section']) .gem-section__heading { margin: 0; font-family: var(--gem-font-heading); font-size: var(--gem-h2); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
+:where(.gem-section[data-gem-eyebrow='show']) .gem-section__eyebrow { display: block; font-size: var(--gem-text-sm); letter-spacing: 0.12em; }
+:where(.gem-section[data-gem-heading='section']) .gem-section__heading { margin: 0; font-family: var(--gem-font-heading); font-size: var(--gem-section-heading-size, var(--gem-h2)); line-height: var(--gem-font-heading-line-height, 1.1); letter-spacing: -0.01em; text-wrap: balance; }
 :where(.gem-section[data-gem-body='section']) .gem-section__body { margin: 0; color: var(--gem-color-muted); font-size: var(--gem-body); line-height: var(--gem-font-body-line-height, 1.5); }
 @media (max-width: 760px) {
-  :where(.gem-section[data-gem-heading='section']) .gem-section__heading { font-size: min(var(--gem-h2), clamp(1.75rem, 9vw, 2.75rem)); }
+  :where(.gem-section[data-gem-heading='section']) .gem-section__heading { font-size: var(--gem-section-heading-size-mobile, min(var(--gem-h2), clamp(1.75rem, 9vw, 2.75rem))); }
 }
 .gem-row:where(:not([hidden])) { --gem-row-auto-sm: repeat(var(--gem-row-cols-sm), minmax(0, 1fr)); --gem-row-auto-md: repeat(var(--gem-row-cols-md), minmax(0, 1fr)); --gem-row-auto-lg: repeat(var(--gem-row-cols), minmax(0, 1fr)); display: grid; grid-template-columns: var(--gem-row-tracks-sm, var(--gem-row-auto-sm, minmax(0, 1fr))); }
 :where(.gem-row > *) { min-width: 0; --gem-row-cols: initial; --gem-row-cols-md: initial; --gem-row-cols-sm: initial; --gem-row-tracks: initial; --gem-row-tracks-md: initial; --gem-row-tracks-sm: initial; --gem-row-gap: initial; --gem-row-gap-y: initial; }
@@ -2370,7 +2356,7 @@ sticky-header.header-wrapper {
 @media (min-width: 990px) { .gem-row { grid-template-columns: var(--gem-row-tracks, var(--gem-row-auto-lg, repeat(2, minmax(0, 1fr)))); } }
 
 /* Dawn parity profile: locked default baseline; morph presets must opt out before applying Gem visual identity. */
-:root { --gem-profile-mode: dawn-parity; --gem-layout-page: 1100px; --gem-layout-gutter: 32px; --gem-layout-section: 52px; --gem-radius-md: 0px; --gem-card-radius: 0px; --gem-media-radius: 0px; --gem-grid-column-gap: 8px; --gem-grid-row-gap: 8px; }
+:root { --gem-profile-mode: dawn-parity; --gem-layout-page: 1100px; --gem-layout-gutter: 32px; --gem-layout-section: 52px; --gem-radius-md: 0px; --gem-card-radius: 0px; --gem-media-radius: 0px; --gem-grid-column-gap: 8px; --gem-grid-row-gap: 8px; --gem-heading-phone-cap: clamp(2rem, 11vw, 3.6rem); }
 .utility-bar, .announcement-bar, .utility-bar__grid { min-height: 38px; }
 .announcement-bar__message { margin: 0; min-height: 38px; padding-block: 10px; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.04em; }
 .announcement-bar__message span { font-size: 0.75rem; }
@@ -2423,7 +2409,9 @@ main > .gem-section:first-child { padding-top: 0; }
 .gem-hero-banner--split-proof .gem-hero-banner__media, .gem-hero-banner--editorial .gem-hero-banner__media { position: relative; inset: auto; min-height: 26rem; height: 100%; overflow: hidden; border-radius: 6px; background: rgb(244 244 244); }
 .gem-hero-banner--split-proof .gem-hero-banner__image, .gem-hero-banner--split-proof .gem-hero-banner__placeholder, .gem-hero-banner--editorial .gem-hero-banner__image, .gem-hero-banner--editorial .gem-hero-banner__placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
 .gem-hero-banner .gem-section__content { max-width: 78rem; margin-inline: auto; }
-.gem-hero-banner h1, .gem-hero-banner h2, .gem-section__heading { margin: 0 0 1.5rem; font-size: clamp(calc(2.5rem * var(--gem-typography-heading-scale, 1)), calc(4vw * var(--gem-typography-heading-scale, 1)), calc(5.2rem * var(--gem-typography-heading-scale, 1))); font-weight: 400; line-height: 1.08; letter-spacing: 0; }
+.gem-hero-banner h1, .gem-hero-banner h2, .gem-section__heading { margin: 0 0 1.5rem; font-weight: 400; line-height: var(--gem-font-heading-line-height, 1.08); letter-spacing: 0; }
+.gem-section__heading { font-size: var(--gem-section-heading-size, clamp(calc(2.5rem * var(--gem-typography-heading-scale, 1)), calc(4vw * var(--gem-typography-heading-scale, 1)), calc(5.2rem * var(--gem-typography-heading-scale, 1)))); }
+.gem-hero-banner h1, .gem-hero-banner h2 { font-size: var(--gem-hero-heading-size, clamp(calc(2.5rem * var(--gem-typography-heading-scale, 1)), calc(4vw * var(--gem-typography-heading-scale, 1)), calc(5.2rem * var(--gem-typography-heading-scale, 1)))); }
 .gem-section__eyebrow { display: none; }
 .gem-hero-banner--compact-collection { min-height: auto; display: block; text-align: left; padding-block: 25px; }
 .gem-hero-banner--compact-collection .gem-section__content, .gem-product-card-grid--quick-view-grid > .gem-section__inner { width: min(var(--gem-layout-page, 1200px), calc(100% - var(--gem-layout-gutter, 32px))); margin-inline: auto; }
@@ -2438,7 +2426,8 @@ main > .gem-section:first-child { padding-top: 0; }
 .gem-rich-text--dawn-intro .gem-section__body { width: 100%; max-width: none; margin: 20px 0 0; font-size: 16px; line-height: 28.8px; }
 .gem-rich-text--dawn-intro .gem-section__body p { margin: 0; }
 .gem-rich-text--dawn-intro .gem-rich-text__blocks { display: block; width: 100%; }
-.gem-button { min-width: 12rem; border-radius: 0; font-weight: 400; box-shadow: none; }
+.gem-button { min-width: 12rem; border-radius: var(--gem-radius-button, 0); font-weight: 400; box-shadow: none; }
+.gem-button:where(:not(.gem-button--link)) { font-weight: var(--gem-font-button-weight, 400); }
 .gem-product-card-wrapper { display: block; min-width: 0; }
 .gem-card, .gem-product-card { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }
 .gem-product-card__media, .gem-media { border: 0; border-radius: 0; box-shadow: none; background: rgb(244 244 244); }
@@ -2577,8 +2566,8 @@ main > .gem-section:first-child { padding-top: 0; }
 .gem-shell-footer__payment-fallback { display: inline-grid; place-items: center; min-width: 38px; height: 24px; border: 1px solid rgb(18 18 18 / 12%); border-radius: 3px; background: white; color: rgb(18 18 18 / 72%); font-size: 8px; line-height: 1; }
 .gem-shell-footer__localization { order: -1; flex: 0 0 100%; width: 100%; }
 .gem-shell-footer__localization .gem-select, .gem-shell-footer__localization > .gem-select { display: inline-flex; align-items: center; min-width: 210px; min-height: 45px; border: 1px solid rgb(18 18 18 / 55%); border-radius: 0; background: transparent; padding: 10px 36px 10px 12px; color: rgb(18 18 18); font-size: 13px; line-height: 18px; }
-:where(.gem-section[data-gem-eyebrow='show']) .gem-section__eyebrow { display: block; letter-spacing: 0.12em; }
-:where(.gem-section[data-gem-heading='section']) .gem-section__heading { margin: 0; font-family: var(--gem-font-heading); font-size: var(--gem-h2); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
+:where(.gem-section[data-gem-eyebrow='show']) .gem-section__eyebrow { display: block; font-size: var(--gem-text-sm); letter-spacing: 0.12em; }
+:where(.gem-section[data-gem-heading='section']) .gem-section__heading { margin: 0; font-family: var(--gem-font-heading); font-size: var(--gem-section-heading-size, var(--gem-h2)); line-height: var(--gem-font-heading-line-height, 1.1); letter-spacing: -0.01em; text-wrap: balance; }
 :where(.gem-section[data-gem-body='section']) .gem-section__body { margin: 0; color: var(--gem-color-muted); font-size: var(--gem-body); line-height: var(--gem-font-body-line-height, 1.5); }
 @media (max-width: 760px) {
   :root { --gem-layout-gutter: 24px; --gem-layout-section: 36px; }
@@ -2615,7 +2604,8 @@ main > .gem-section:first-child { padding-top: 0; }
   .gem-product-card__content { padding-top: 8px; gap: 4px; }
   .gem-product-card__title { font-size: 15px; line-height: 24px; }
   .gem-product-card__price, .gem-product-card__price .gem-price { font-size: 16px; line-height: 24px; }
-  .gem-hero-banner h1, .gem-hero-banner h2, .gem-section__heading { font-size: clamp(2rem, 11vw, 3.6rem); }
+  .gem-section__heading { font-size: var(--gem-section-heading-size-mobile, var(--gem-heading-phone-cap)); }
+  .gem-hero-banner h1, .gem-hero-banner h2 { font-size: var(--gem-hero-heading-size-mobile, var(--gem-heading-phone-cap)); }
   .gem-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid { grid-template-columns: repeat(var(--gem-product-card-grid-mobile-columns, 2), minmax(0, 1fr)); }
   .gem-product-main[data-gem-product-main-layout='dawn-main'] > .gem-section__inner { width: calc(100% - 30px); }
   .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-media-gallery__frame { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; }
@@ -2696,7 +2686,7 @@ main > .gem-section:first-child { padding-top: 0; }
   .gem-hero-video--dawn-video > .gem-section__inner, .gem-hero-video--dawn-video .gem-hero-video__inner, .gem-hero-video--dawn-video .gem-hero-video__media { height: 212px; min-height: 212px; }
   .gem-advanced-list--feature-grid { height: 420px; min-height: 420px; padding-block: 36px; }
   .gem-advanced-list--feature-grid .gem-section__grid { grid-template-columns: 1fr; }
-  :where(.gem-section[data-gem-heading='section']) .gem-section__heading { font-size: min(var(--gem-h2), clamp(1.75rem, 9vw, 2.75rem)); }
+  :where(.gem-section[data-gem-heading='section']) .gem-section__heading { font-size: var(--gem-section-heading-size-mobile, min(var(--gem-h2), clamp(1.75rem, 9vw, 2.75rem))); }
 }
 .gem-row:where(:not([hidden])) { --gem-row-auto-sm: repeat(var(--gem-row-cols-sm), minmax(0, 1fr)); --gem-row-auto-md: repeat(var(--gem-row-cols-md), minmax(0, 1fr)); --gem-row-auto-lg: repeat(var(--gem-row-cols), minmax(0, 1fr)); display: grid; grid-template-columns: var(--gem-row-tracks-sm, var(--gem-row-auto-sm, minmax(0, 1fr))); }
 :where(.gem-row > *) { min-width: 0; --gem-row-cols: initial; --gem-row-cols-md: initial; --gem-row-cols-sm: initial; --gem-row-tracks: initial; --gem-row-tracks-md: initial; --gem-row-tracks-sm: initial; --gem-row-gap: initial; --gem-row-gap-y: initial; }