From fa4b0549cd10490c027459babbf2d00fd6bc109e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 11 Jul 2026 04:50:00 +0000
Subject: [PATCH 1/2] feat(components,configurator): per-size .sf-btn padding +
 min-height knobs; move flatten-all to Advanced
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extends the per-size button model (added for label font-size in v0.7.14) to
padding and height, and reworks the configurator button panel around it.

Framework:
- Add 15 PUBLIC per-size knobs — --sf-btn-{xs,s,m,l,xl}-{padding-block,
  padding-inline,min-height} — each `initial`, wired as the first arg of the
  matching --sf-btn-{prop}--size tier so an unset knob falls through to that
  rung's scale default. Retune one rung's font/padding/height independently
  without flattening the --xs…xl ladder.
- Re-tier the flatten-all overrides (--sf-btn-font-size, --sf-btn-padding-block,
  --sf-btn-padding-inline, --sf-btn-min-height) to PUBLIC-ADVANCED — same SemVer
  guarantee, surfaced as advanced (per-size knobs are the everyday path).

Configurator:
- ComponentsPanel: the per-size editor now tunes font-size / padding-block /
  padding-inline / min-height for the selected rung, and selecting a rung drives
  the live preview (fixes "preview doesn't react" to per-rung edits). The
  flatten-all "Advanced" disclosure is removed from the panel — those knobs now
  live only in the All-tokens tab, where the tier dividers group them under
  Advanced.

Regenerate registry / docs / annotations / demos / audit artifacts; extend the
token-api snapshot, empty-token coverage list, per-size browser test (now also
asserts padding + min-height per rung), and CHANGELOG.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GnwqYHgHNAWPbsUJWUeY1w
---
 CHANGELOG.md                                  |   7 +
 .../components/panels/ComponentsPanel.svelte  | 197 ++++-----
 .../src/data/api-index.generated.json         | 324 +++++++++++++-
 .../src/data/token-registry.generated.json    |  62 ++-
 demos/full-api-demo-with-overrides.html       |   8 +-
 demos/full-api-demo.html                      |   8 +-
 demos/generate.mjs                            |  34 +-
 demos/ultimate-override.css                   |  29 +-
 dist/css-custom-data.json                     |  83 +++-
 docs/api-index.json                           | 403 +++++++++++++++++-
 docs/api-index.md                             |  33 +-
 docs/llm-guide.md                             |  19 +-
 docs/registry.json                            |  17 +-
 docs/test-coverage-6-token-reference.html     |   2 +-
 docs/token-annotations.json                   |  21 +-
 docs/token-index.json                         | 136 +++++-
 docs/token-index.md                           |  35 +-
 docs/tokens.md                                |  19 +-
 optional/components.css                       |  39 +-
 optional/tokens.components.css                |  42 +-
 .../full-api-audit/results/tokens-report.json | 231 +++++++++-
 scripts/token-tiers.js                        |   4 +
 tests/token-api.snapshot.json                 |  15 +
 tests/tokens.spec.js                          |  36 +-
 token-registry.json                           |  62 ++-
 25 files changed, 1616 insertions(+), 250 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 171434fc9..bf0bcaf3e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## Unreleased
 
+### Features
+- **components:** extend the per-size `.sf-btn` knobs to padding + height — `--sf-btn-{xs,s,m,l,xl}-{padding-block,padding-inline,min-height}` (15 new PUBLIC knobs) join the per-size `font-size` knobs, so each rung's font/padding/height can be retuned independently without flattening the `.sf-btn--xs…xl` ladder
+- **configurator:** the button panel's per-size editor now tunes font-size / padding / min-height per rung (and drives the live preview); the flatten-all knobs move out of the panel into the All-tokens tab's Advanced group
+
+### Changed
+- **tokens:** re-tier the flatten-all `.sf-btn` overrides (`--sf-btn-font-size`, `--sf-btn-padding-block`, `--sf-btn-padding-inline`, `--sf-btn-min-height`) to PUBLIC-ADVANCED — same SemVer guarantee, surfaced as advanced (the per-size knobs are the everyday path)
+
 ## [0.7.14] - 2026-07-10
 
 ### Features
diff --git a/configurator/src/components/panels/ComponentsPanel.svelte b/configurator/src/components/panels/ComponentsPanel.svelte
index 6b400dce6..98cea24ab 100644
--- a/configurator/src/components/panels/ComponentsPanel.svelte
+++ b/configurator/src/components/panels/ComponentsPanel.svelte
@@ -46,37 +46,45 @@
     { label: "Border width",  token: "--sf-btn-border-width",   unit: "px",  min: 0, max: 4,   step: 0.5,    default: 1,     rawDefault: "var(--sf-border-width-1)", variableOptions: BORDER_WIDTH_SCALE },
   ];
 
-  // Advanced flatten-all knobs — each shadows the per-size scale (.sf-btn--xs…xl)
-  // on EVERY size once set, so they live behind the panel's "Advanced" toggle
-  // rather than the primary surface. (For everyday sizing use the label-size
-  // multiplier + per-size knobs above.)
-  const BUTTON_ADVANCED_TOKENS: Array<{ label: string; token: string; unit: string; min: number; max: number; step: number; default: number; rawDefault: string; variableOptions: VarOption[] }> = [
-    { label: "Padding block",  token: "--sf-btn-padding-block",  unit: "rem", min: 0, max: 1,   step: 0.025,  default: 0.375, rawDefault: "var(--sf-space-xs)", variableOptions: SPACE_SCALE },
-    { label: "Padding inline", token: "--sf-btn-padding-inline", unit: "rem", min: 0, max: 2,   step: 0.025,  default: 1,     rawDefault: "var(--sf-space-m)", variableOptions: SPACE_SCALE },
-    // Unset, --sf-btn-min-height falls through to the per-size tier
-    // (--sf-size-* via .sf-btn--xs…xl), whose base is --sf-size-m (40px) — so
-    // THAT is the real default, not --sf-touch-target. Presenting touch-target
-    // (44px) as the default silently pinned every size to 44px and collapsed
-    // the XS–XL scale. touch-target stays available as an explicit choice via
-    // the variable dropdown for consumers who want the WCAG AAA target.
-    { label: "Min height",    token: "--sf-btn-min-height",      unit: "rem", min: 1, max: 4,   step: 0.125,  default: 2.5,   rawDefault: "var(--sf-size-m)", variableOptions: SIZE_SCALE },
-  ];
-
   // Everyday label-size multiplier — scales every button's font-size by one
   // factor while KEEPING the xs…xl ladder intact (unlike the flatten-all
-  // --sf-btn-font-size override, which lives in Advanced).
+  // --sf-btn-font-size override, which now lives only in the All-tokens tab).
   const BTN_FONT_SCALE = { token: "--sf-btn-font-scale", default: 1, min: 0.75, max: 1.5, step: 0.05 };
 
-  // Per-size label-size knobs — one public knob per rung, the button counterpart
-  // of the per-heading size knobs. Each rung's default step matches its own name
-  // (xs→--sf-text-xs …); unset falls through to that scale default.
-  const BTN_FONT_SIZES = [
-    { rung: "xs", token: "--sf-btn-xs-font-size" },
-    { rung: "s",  token: "--sf-btn-s-font-size" },
-    { rung: "m",  token: "--sf-btn-m-font-size" },
-    { rung: "l",  token: "--sf-btn-l-font-size" },
-    { rung: "xl", token: "--sf-btn-xl-font-size" },
-  ];
+  // Per-size editor — one PUBLIC knob per rung for each sizing property, the
+  // button counterpart of the per-heading typography editor. Defaults mirror the
+  // framework's --sf-btn-*--size tier; unset falls through to that scale default.
+  const BTN_SIZE_RUNGS = ["xs", "s", "m", "l", "xl"];
+  type RungSizing = {
+    fontStep: string;
+    pb: { raw: string; num: number };
+    pi: { raw: string; num: number };
+    mh: { raw: string; num: number };
+  };
+  const RUNG_SIZING: Record<string, RungSizing> = {
+    xs: { fontStep: "xs", pb: { raw: "0.125rem",           num: 0.125 }, pi: { raw: "var(--sf-space-xs)",  num: 0.375 }, mh: { raw: "var(--sf-size-xs)", num: 2 } },
+    s:  { fontStep: "s",  pb: { raw: "var(--sf-space-2xs)", num: 0.25  }, pi: { raw: "var(--sf-space-s)",   num: 0.5   }, mh: { raw: "var(--sf-size-s)",  num: 2.25 } },
+    m:  { fontStep: "m",  pb: { raw: "var(--sf-space-xs)",  num: 0.375 }, pi: { raw: "var(--sf-space-m)",   num: 0.75  }, mh: { raw: "var(--sf-size-m)",  num: 2.5 } },
+    l:  { fontStep: "l",  pb: { raw: "var(--sf-space-s)",   num: 0.5   }, pi: { raw: "var(--sf-space-l)",   num: 1     }, mh: { raw: "var(--sf-size-l)",  num: 3 } },
+    xl: { fontStep: "xl", pb: { raw: "var(--sf-space-m)",   num: 0.75  }, pi: { raw: "var(--sf-space-xl)",  num: 1.5   }, mh: { raw: "var(--sf-size-xl)", num: 3.5 } },
+  };
+  // Per-rung SliderRow config for a padding / min-height property.
+  function rungRow(rung: string, prop: "pb" | "pi" | "mh") {
+    const d = RUNG_SIZING[rung][prop];
+    const suffix = prop === "pb" ? "padding-block" : prop === "pi" ? "padding-inline" : "min-height";
+    const isHeight = prop === "mh";
+    return {
+      token: `--sf-btn-${rung}-${suffix}`,
+      rawDefault: d.raw,
+      default: d.num,
+      unit: "rem",
+      min: 0,
+      max: isHeight ? 4 : 2,
+      step: isHeight ? 0.125 : 0.025,
+      variableOptions: isHeight ? SIZE_SCALE : SPACE_SCALE,
+      label: prop === "pb" ? "Padding block" : prop === "pi" ? "Padding inline" : "Min height",
+    };
+  }
 
   const CARD_TOKENS: Array<{ label: string; token: string; unit: string; min: number; max: number; step: number; default: number; rawDefault: string; variableOptions: VarOption[] }> = [
     { label: "Padding",       token: "--sf-card-padding",       unit: "rem", min: 0, max: 3, step: 0.05, default: 1.5, rawDefault: "var(--sf-space-l)", variableOptions: SPACE_SCALE },
@@ -86,16 +94,6 @@
     { label: "Media radius",  token: "--sf-card-media-radius",  unit: "rem", min: 0, max: 2, step: 0.05, default: 0.5, rawDefault: "var(--sf-card-radius, var(--sf-radius-m))", variableOptions: RADIUS_SCALE },
   ];
 
-  // Global knobs that, once set, shadow the per-size scale (.sf-btn--xs…xl) on
-  // EVERY size — the framework reads the public knob before the size tier. The
-  // UI flags these so a global tweak that flattens the size scale isn't a
-  // surprise. (Label size / --sf-btn-font-size behaves the same way.)
-  const SCALE_SHADOWING = new Set([
-    "--sf-btn-padding-block",
-    "--sf-btn-padding-inline",
-    "--sf-btn-min-height",
-  ]);
-
   function resetButtonTokens() {
     for (const k of Object.keys(overrides)) {
       if (k.startsWith("--sf-btn-")) onReset(k);
@@ -103,9 +101,9 @@
   }
 
   let showButton = $state(false);
-  let showBtnAdvanced = $state(false);
   let activeBtnRung = $state("m");
-  let activeBtnSize = $derived(BTN_FONT_SIZES.find((r) => r.rung === activeBtnRung) ?? BTN_FONT_SIZES[2]);
+  let activeFontToken = $derived(`--sf-btn-${activeBtnRung}-font-size`);
+  let activeFontDef = $derived(RUNG_SIZING[activeBtnRung].fontStep);
   let showCard = $state(false);
 
   // Preview-only state — never touches overrides, just picks which real
@@ -232,7 +230,7 @@
         <div class="flex flex-wrap gap-1">
           {#each BTN_SIZES as s (s)}
             <button
-              onclick={() => { btnSize = s; }}
+              onclick={() => { btnSize = s; activeBtnRung = s; }}
               class={`px-2.5 py-1 rounded-lg text-[10px] border transition-all cursor-pointer uppercase ${
                 btnSize === s
                   ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
@@ -332,95 +330,62 @@
           </div>
         </div>
 
-        <!-- Per-size label size — one rung at a time (parity with per-heading
-             size knobs). Retunes --sf-btn-{rung}-font-size for a single rung. -->
+        <!-- Per-size editor — one rung at a time (parity with the per-heading
+             typography editor). Retunes font-size / padding / min-height for a
+             single rung; picking a rung also drives the live preview above. The
+             flatten-all globals live in the All-tokens tab (Advanced group). -->
         <div>
-          <div class="text-[9px] text-slate-500 mb-1">Per-size label — {activeBtnSize.token}</div>
-          <div class="flex gap-0.5 mb-1.5 bg-black/5 dark:bg-white/5 rounded-lg p-0.5">
-            {#each BTN_FONT_SIZES as r (r.rung)}
+          <div class="text-[9px] font-bold text-slate-500 uppercase tracking-wider mb-1">Per-size ({activeBtnRung.toUpperCase()})</div>
+          <div class="flex gap-0.5 mb-2 bg-black/5 dark:bg-white/5 rounded-lg p-0.5">
+            {#each BTN_SIZE_RUNGS as rung (rung)}
+              {@const touched = [`--sf-btn-${rung}-font-size`, `--sf-btn-${rung}-padding-block`, `--sf-btn-${rung}-padding-inline`, `--sf-btn-${rung}-min-height`].some((k) => k in overrides)}
               <button
-                onclick={() => { activeBtnRung = r.rung; }}
+                onclick={() => { activeBtnRung = rung; btnSize = rung; }}
                 class={`relative flex-1 py-1 rounded-md text-[10px] font-bold uppercase transition-all cursor-pointer ${
-                  activeBtnRung === r.rung
+                  activeBtnRung === rung
                     ? "bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white"
                     : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
                 }`}
               >
-                {r.rung}
-                {#if r.token in overrides}<span class="absolute top-0.5 right-0.5 w-1 h-1 rounded-full bg-indigo-400"></span>{/if}
+                {rung}
+                {#if touched}<span class="absolute top-0.5 right-0.5 w-1 h-1 rounded-full bg-indigo-400"></span>{/if}
               </button>
             {/each}
           </div>
-          <div class="flex flex-wrap gap-1">
-            {#each TEXT_STEPS as step (step)}
-              {@const cur = currentStep(activeBtnSize.token, "text", TEXT_STEPS, activeBtnRung)}
-              <button
-                onclick={() => setStep(activeBtnSize.token, "text", step, activeBtnRung)}
-                class={`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${
-                  cur === step
-                    ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
-                    : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5"
-                }`}
-              >{step}</button>
-            {/each}
-          </div>
-        </div>
 
-        <!-- Advanced — flatten-all knobs that override the whole size ladder. -->
-        <div class="pt-1">
-          <button
-            onclick={() => { showBtnAdvanced = !showBtnAdvanced; }}
-            aria-expanded={showBtnAdvanced}
-            class="w-full flex items-center justify-between text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400 transition-colors cursor-pointer"
-          >
-            <div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div>
-            <span class="text-[10px]">{showBtnAdvanced ? "▲" : "▼"}</span>
-          </button>
-          {#if showBtnAdvanced}
-            <div class="mt-2 space-y-2">
-              <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-snug">
-                These <b>flatten every size</b>: once set they override the
-                <code class="text-slate-500 dark:text-slate-400">.sf-btn--xs…xl</code> scale on all buttons.
-                For proportional sizing use the multiplier + per-size knobs above.
-              </p>
-              {#each BUTTON_ADVANCED_TOKENS as t (t.token)}
-                <SliderRow
-                  label={t.label} value={getVal(t)} min={t.min} max={t.max} step={t.step} unit={t.unit}
-                  help={t.token}
-                  overridden={t.token in overrides}
-                  onChange={(v) => onSet(t.token, `${v}${t.unit}`)}
-                  onReset={() => onReset(t.token)}
-                  rawDefault={t.rawDefault}
-                  variableOptions={t.variableOptions}
-                  currentRaw={overrides[t.token]}
-                  onRawSet={(v) => onSet(t.token, v)}
-                />
-                {#if SCALE_SHADOWING.has(t.token) && t.token in overrides}
-                  <div class="text-[9px] text-amber-600 dark:text-amber-400 -mt-1 pl-0.5">↕ overrides every size (.sf-btn--xs…xl)</div>
-                {/if}
+          <!-- Label size for the active rung (text scale steps) -->
+          <div class="mb-2">
+            <div class="text-[9px] text-slate-500 mb-1">Label size — {activeFontToken}</div>
+            <div class="flex flex-wrap gap-1">
+              {#each TEXT_STEPS as step (step)}
+                {@const cur = currentStep(activeFontToken, "text", TEXT_STEPS, activeFontDef)}
+                <button
+                  onclick={() => setStep(activeFontToken, "text", step, activeFontDef)}
+                  class={`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${
+                    cur === step
+                      ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                      : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5"
+                  }`}
+                >{step}</button>
               {/each}
-
-              <div>
-                <div class="text-[9px] text-slate-500 mb-1">Label size — flatten all — --sf-btn-font-size</div>
-                <div class="flex flex-wrap gap-1">
-                  {#each TEXT_STEPS as step (step)}
-                    {@const cur = currentStep("--sf-btn-font-size", "text", TEXT_STEPS, "m")}
-                    <button
-                      onclick={() => setStep("--sf-btn-font-size", "text", step, "m")}
-                      class={`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${
-                        cur === step
-                          ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
-                          : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5"
-                      }`}
-                    >{step}</button>
-                  {/each}
-                </div>
-                {#if "--sf-btn-font-size" in overrides}
-                  <div class="text-[9px] text-amber-600 dark:text-amber-400 mt-1 pl-0.5">↕ overrides every size (.sf-btn--xs…xl)</div>
-                {/if}
-              </div>
             </div>
-          {/if}
+          </div>
+
+          <!-- Padding + min-height sliders for the active rung -->
+          {#each (["pb", "pi", "mh"] as const) as prop (prop)}
+            {@const r = rungRow(activeBtnRung, prop)}
+            <SliderRow
+              label={r.label} value={getVal(r)} min={r.min} max={r.max} step={r.step} unit={r.unit}
+              help={r.token}
+              overridden={r.token in overrides}
+              onChange={(v) => onSet(r.token, `${v}${r.unit}`)}
+              onReset={() => onReset(r.token)}
+              rawDefault={r.rawDefault}
+              variableOptions={r.variableOptions}
+              currentRaw={overrides[r.token]}
+              onRawSet={(v) => onSet(r.token, v)}
+            />
+          {/each}
         </div>
 
         {#if Object.keys(overrides).some((k) => k.startsWith("--sf-btn-"))}
diff --git a/configurator/src/data/api-index.generated.json b/configurator/src/data/api-index.generated.json
index 5017ef1e4..8ce0a5029 100644
--- a/configurator/src/data/api-index.generated.json
+++ b/configurator/src/data/api-index.generated.json
@@ -2,23 +2,23 @@
   "_sync": {
     "generatedBy": "configurator/scripts/sync-api.mjs",
     "source": "docs/api-index.json",
-    "tokensHash": "6a484a58e793",
+    "tokensHash": "a5ad579f55b1",
     "bundles": [
       "full",
       "optimal"
     ],
     "counts": {
-      "tokens": 741,
+      "tokens": 756,
       "byTier": {
-        "PUBLIC": 685,
-        "PUBLIC-ADVANCED": 55,
+        "PUBLIC": 696,
+        "PUBLIC-ADVANCED": 59,
         "INTERNAL": 1
       },
       "byCategory": {
         "Layout tokens": 53,
         "Core tokens": 622,
         "Macro tokens": 34,
-        "Component tokens": 32
+        "Component tokens": 47
       }
     }
   },
@@ -1304,7 +1304,7 @@
     },
     {
       "name": "--sf-btn-font-size",
-      "tier": "PUBLIC",
+      "tier": "PUBLIC-ADVANCED",
       "role": "knob",
       "namespace": "btn",
       "category": "Component tokens",
@@ -1382,6 +1382,66 @@
         "full"
       ]
     },
+    {
+      "name": "--sf-btn-l-min-height",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "group": "BUTTON TOKENS",
+      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "note": "Minimum target height for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-l-padding-block",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "group": "BUTTON TOKENS",
+      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "note": "Vertical (block) padding for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-l-padding-inline",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "group": "BUTTON TOKENS",
+      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "note": "Horizontal (inline) padding for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full"
+      ]
+    },
     {
       "name": "--sf-btn-m-font-size",
       "tier": "PUBLIC",
@@ -1403,14 +1463,14 @@
       ]
     },
     {
-      "name": "--sf-btn-min-height",
+      "name": "--sf-btn-m-min-height",
       "tier": "PUBLIC",
       "role": "knob",
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
       "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
-      "note": "Minimum target height for .sf-btn. Defaults to --sf-touch-target so buttons meet the WCAG 2.2 target-size minimum.",
+      "note": "Minimum target height for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
       "registered": false,
@@ -1423,14 +1483,14 @@
       ]
     },
     {
-      "name": "--sf-btn-padding-block",
+      "name": "--sf-btn-m-padding-block",
       "tier": "PUBLIC",
       "role": "knob",
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
       "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
-      "note": "Vertical (block) padding inside .sf-btn.",
+      "note": "Vertical (block) padding for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
       "registered": false,
@@ -1443,14 +1503,74 @@
       ]
     },
     {
-      "name": "--sf-btn-padding-inline",
+      "name": "--sf-btn-m-padding-inline",
       "tier": "PUBLIC",
       "role": "knob",
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
       "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
-      "note": "Horizontal (inline) padding inside .sf-btn.",
+      "note": "Horizontal (inline) padding for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-min-height",
+      "tier": "PUBLIC-ADVANCED",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "group": "BUTTON TOKENS",
+      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "note": "Flatten-all minimum target height for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-min-height.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-padding-block",
+      "tier": "PUBLIC-ADVANCED",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "group": "BUTTON TOKENS",
+      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "note": "Flatten-all vertical (block) padding for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-padding-block.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-padding-inline",
+      "tier": "PUBLIC-ADVANCED",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "group": "BUTTON TOKENS",
+      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "note": "Flatten-all horizontal (inline) padding for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-padding-inline.",
       "value": "initial",
       "aliasOf": null,
       "registered": false,
@@ -1502,6 +1622,66 @@
         "full"
       ]
     },
+    {
+      "name": "--sf-btn-s-min-height",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "group": "BUTTON TOKENS",
+      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "note": "Minimum target height for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-s-padding-block",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "group": "BUTTON TOKENS",
+      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "note": "Vertical (block) padding for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-s-padding-inline",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "group": "BUTTON TOKENS",
+      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "note": "Horizontal (inline) padding for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full"
+      ]
+    },
     {
       "name": "--sf-btn-xl-font-size",
       "tier": "PUBLIC",
@@ -1522,6 +1702,66 @@
         "full"
       ]
     },
+    {
+      "name": "--sf-btn-xl-min-height",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "group": "BUTTON TOKENS",
+      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "note": "Minimum target height for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-xl-padding-block",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "group": "BUTTON TOKENS",
+      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "note": "Vertical (block) padding for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-xl-padding-inline",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "group": "BUTTON TOKENS",
+      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "note": "Horizontal (inline) padding for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full"
+      ]
+    },
     {
       "name": "--sf-btn-xs-font-size",
       "tier": "PUBLIC",
@@ -1542,6 +1782,66 @@
         "full"
       ]
     },
+    {
+      "name": "--sf-btn-xs-min-height",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "group": "BUTTON TOKENS",
+      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "note": "Minimum target height for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-xs-padding-block",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "group": "BUTTON TOKENS",
+      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "note": "Vertical (block) padding for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-xs-padding-inline",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "group": "BUTTON TOKENS",
+      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "note": "Horizontal (inline) padding for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full"
+      ]
+    },
     {
       "name": "--sf-card-avatar-size",
       "tier": "PUBLIC",
diff --git a/configurator/src/data/token-registry.generated.json b/configurator/src/data/token-registry.generated.json
index 6ec88c2cf..c0f819975 100644
--- a/configurator/src/data/token-registry.generated.json
+++ b/configurator/src/data/token-registry.generated.json
@@ -1,7 +1,7 @@
 {
   "_meta": {
     "generatedBy": "scripts/gen-token-registry.js",
-    "nextId": 777
+    "nextId": 792
   },
   "tokens": [
     {
@@ -3147,6 +3147,66 @@
     {
       "id": 776,
       "name": "--sf-btn-xs-font-size"
+    },
+    {
+      "id": 777,
+      "name": "--sf-btn-l-min-height"
+    },
+    {
+      "id": 778,
+      "name": "--sf-btn-l-padding-block"
+    },
+    {
+      "id": 779,
+      "name": "--sf-btn-l-padding-inline"
+    },
+    {
+      "id": 780,
+      "name": "--sf-btn-m-min-height"
+    },
+    {
+      "id": 781,
+      "name": "--sf-btn-m-padding-block"
+    },
+    {
+      "id": 782,
+      "name": "--sf-btn-m-padding-inline"
+    },
+    {
+      "id": 783,
+      "name": "--sf-btn-s-min-height"
+    },
+    {
+      "id": 784,
+      "name": "--sf-btn-s-padding-block"
+    },
+    {
+      "id": 785,
+      "name": "--sf-btn-s-padding-inline"
+    },
+    {
+      "id": 786,
+      "name": "--sf-btn-xl-min-height"
+    },
+    {
+      "id": 787,
+      "name": "--sf-btn-xl-padding-block"
+    },
+    {
+      "id": 788,
+      "name": "--sf-btn-xl-padding-inline"
+    },
+    {
+      "id": 789,
+      "name": "--sf-btn-xs-min-height"
+    },
+    {
+      "id": 790,
+      "name": "--sf-btn-xs-padding-block"
+    },
+    {
+      "id": 791,
+      "name": "--sf-btn-xs-padding-inline"
     }
   ]
 }
diff --git a/demos/full-api-demo-with-overrides.html b/demos/full-api-demo-with-overrides.html
index 37b0aaa53..74d1bb835 100644
--- a/demos/full-api-demo-with-overrides.html
+++ b/demos/full-api-demo-with-overrides.html
@@ -122,7 +122,7 @@
   </nav>
   <main id="main">
     <h1>SLASHED Full API Demo</h1>
-    <p style="color:var(--sf-color-text--muted)">v0.7.13 · full bundle from jsDelivr CDN · 328 classes · 741 tokens (250 configurable)</p>
+    <p style="color:var(--sf-color-text--muted)">v0.7.14 · full bundle from jsDelivr CDN · 328 classes · 756 tokens (265 configurable)</p>
     <div class="notice"><strong>ultimate-override.css is ACTIVE.</strong> Every value below is recomputed from perturbed knob tokens — toggle it off in the toolbar, or compare against <a href="full-api-demo.html">the un-overridden page</a>.</div>
 
     <section id="tokens">
@@ -1273,7 +1273,7 @@ <h2>Theme <span class="count">3</span></h2>
     </section>
 
     <section id="reference">
-      <h2>Part 2 — Complete token reference <span class="count">741 tokens · live values</span></h2>
+      <h2>Part 2 — Complete token reference <span class="count">756 tokens · live values</span></h2>
       <div class="notice">Every <code>--sf-*</code> token — knob and consumption, all tiers — with its <strong>live computed value</strong> (filled by JS). Toggle the theme or the override in the toolbar and watch every value recompute. Tokens that resolve to a colour, length, shadow, gradient, type or motion value also show a visual.</div>
       <h3>color <span class="count">255</span></h3>
       <div class="ref-grid"><figure class="ttile" data-token="--sf-color-action"><code class="ttile__name">--sf-color-action</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action--active"><code class="ttile__name">--sf-color-action--active</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action--active)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action--hover"><code class="ttile__name">--sf-color-action--hover</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action--hover)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-100"><code class="ttile__name">--sf-color-action-100</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-100)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-200"><code class="ttile__name">--sf-color-action-200</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-200)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-300"><code class="ttile__name">--sf-color-action-300</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-300)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-400"><code class="ttile__name">--sf-color-action-400</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-400)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-50"><code class="ttile__name">--sf-color-action-50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-500"><code class="ttile__name">--sf-color-action-500</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-500)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-600"><code class="ttile__name">--sf-color-action-600</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-600)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-700"><code class="ttile__name">--sf-color-action-700</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-700)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-800"><code class="ttile__name">--sf-color-action-800</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-800)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-900"><code class="ttile__name">--sf-color-action-900</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-900)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-950"><code class="ttile__name">--sf-color-action-950</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-950)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-a10"><code class="ttile__name">--sf-color-action-a10</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-a10)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-a30"><code class="ttile__name">--sf-color-action-a30</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-a30)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-a5"><code class="ttile__name">--sf-color-action-a5</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-a5)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-a50"><code class="ttile__name">--sf-color-action-a50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-a50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-a80"><code class="ttile__name">--sf-color-action-a80</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-a80)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-darker"><code class="ttile__name">--sf-color-action-darker</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-darker)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-lighter"><code class="ttile__name">--sf-color-action-lighter</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-lighter)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-muted"><code class="ttile__name">--sf-color-action-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-source-dark"><code class="ttile__name">--sf-color-action-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-source-light"><code class="ttile__name">--sf-color-action-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-subtle"><code class="ttile__name">--sf-color-action-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-superdark"><code class="ttile__name">--sf-color-action-superdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-superdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-superlight"><code class="ttile__name">--sf-color-action-superlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-superlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-tint"><code class="ttile__name">--sf-color-action-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-xdark"><code class="ttile__name">--sf-color-action-xdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-xdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-xlight"><code class="ttile__name">--sf-color-action-xlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-xlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base"><code class="ttile__name">--sf-color-base</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base--active"><code class="ttile__name">--sf-color-base--active</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base--active)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base--hover"><code class="ttile__name">--sf-color-base--hover</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base--hover)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-100"><code class="ttile__name">--sf-color-base-100</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-100)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-200"><code class="ttile__name">--sf-color-base-200</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-200)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-300"><code class="ttile__name">--sf-color-base-300</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-300)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-400"><code class="ttile__name">--sf-color-base-400</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-400)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-50"><code class="ttile__name">--sf-color-base-50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-500"><code class="ttile__name">--sf-color-base-500</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-500)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-600"><code class="ttile__name">--sf-color-base-600</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-600)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-700"><code class="ttile__name">--sf-color-base-700</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-700)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-800"><code class="ttile__name">--sf-color-base-800</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-800)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-900"><code class="ttile__name">--sf-color-base-900</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-900)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-950"><code class="ttile__name">--sf-color-base-950</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-950)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-a10"><code class="ttile__name">--sf-color-base-a10</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-a10)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-a30"><code class="ttile__name">--sf-color-base-a30</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-a30)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-a5"><code class="ttile__name">--sf-color-base-a5</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-a5)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-a50"><code class="ttile__name">--sf-color-base-a50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-a50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-a80"><code class="ttile__name">--sf-color-base-a80</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-a80)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-muted"><code class="ttile__name">--sf-color-base-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-source-dark"><code class="ttile__name">--sf-color-base-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-source-light"><code class="ttile__name">--sf-color-base-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-subtle"><code class="ttile__name">--sf-color-base-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-tint"><code class="ttile__name">--sf-color-base-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-bg"><code class="ttile__name">--sf-color-bg</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-bg)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-bg--active"><code class="ttile__name">--sf-color-bg--active</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-bg--active)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-bg--disabled"><code class="ttile__name">--sf-color-bg--disabled</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-bg--disabled)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-bg--focus"><code class="ttile__name">--sf-color-bg--focus</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-bg--focus)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-bg--hover"><code class="ttile__name">--sf-color-bg--hover</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-bg--hover)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-bg--selected"><code class="ttile__name">--sf-color-bg--selected</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-bg--selected)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-black"><code class="ttile__name">--sf-color-black</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-black)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-border"><code class="ttile__name">--sf-color-border</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-border)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-border--disabled"><code class="ttile__name">--sf-color-border--disabled</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-border--disabled)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-border--focus"><code class="ttile__name">--sf-color-border--focus</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-border--focus)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-border--strong"><code class="ttile__name">--sf-color-border--strong</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-border--strong)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-border--subtle"><code class="ttile__name">--sf-color-border--subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-border--subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-border--translucent"><code class="ttile__name">--sf-color-border--translucent</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-border--translucent)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-code-bg"><code class="ttile__name">--sf-color-code-bg</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-code-bg)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-code-text"><code class="ttile__name">--sf-color-code-text</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-code-text)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-danger"><code class="ttile__name">--sf-color-danger</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-danger)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-danger-muted"><code class="ttile__name">--sf-color-danger-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-danger-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-danger-source-dark"><code class="ttile__name">--sf-color-danger-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-danger-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-danger-source-light"><code class="ttile__name">--sf-color-danger-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-danger-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-danger-strong"><code class="ttile__name">--sf-color-danger-strong</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-danger-strong)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-danger-subtle"><code class="ttile__name">--sf-color-danger-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-danger-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-danger-tint"><code class="ttile__name">--sf-color-danger-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-danger-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-dim"><code class="ttile__name">--sf-color-dim</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-dim)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-heading"><code class="ttile__name">--sf-color-heading</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-heading)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-info"><code class="ttile__name">--sf-color-info</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-info)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-info-muted"><code class="ttile__name">--sf-color-info-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-info-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-info-source-dark"><code class="ttile__name">--sf-color-info-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-info-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-info-source-light"><code class="ttile__name">--sf-color-info-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-info-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-info-strong"><code class="ttile__name">--sf-color-info-strong</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-info-strong)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-info-subtle"><code class="ttile__name">--sf-color-info-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-info-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-info-tint"><code class="ttile__name">--sf-color-info-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-info-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-inset"><code class="ttile__name">--sf-color-inset</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-inset)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-inverse"><code class="ttile__name">--sf-color-inverse</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-inverse)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-link"><code class="ttile__name">--sf-color-link</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-link)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-link--active"><code class="ttile__name">--sf-color-link--active</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-link--active)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-link--disabled"><code class="ttile__name">--sf-color-link--disabled</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-link--disabled)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-link--hover"><code class="ttile__name">--sf-color-link--hover</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-link--hover)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-link--underline"><code class="ttile__name">--sf-color-link--underline</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-link--underline)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-link--visited"><code class="ttile__name">--sf-color-link--visited</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-link--visited)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-mark-bg"><code class="ttile__name">--sf-color-mark-bg</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-mark-bg)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-mark-text" data-inherit="true"><code class="ttile__name">--sf-color-mark-text</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-mark-text)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral"><code class="ttile__name">--sf-color-neutral</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral--active"><code class="ttile__name">--sf-color-neutral--active</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral--active)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral--hover"><code class="ttile__name">--sf-color-neutral--hover</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral--hover)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-100"><code class="ttile__name">--sf-color-neutral-100</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-100)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-200"><code class="ttile__name">--sf-color-neutral-200</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-200)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-300"><code class="ttile__name">--sf-color-neutral-300</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-300)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-400"><code class="ttile__name">--sf-color-neutral-400</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-400)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-50"><code class="ttile__name">--sf-color-neutral-50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-500"><code class="ttile__name">--sf-color-neutral-500</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-500)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-600"><code class="ttile__name">--sf-color-neutral-600</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-600)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-700"><code class="ttile__name">--sf-color-neutral-700</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-700)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-800"><code class="ttile__name">--sf-color-neutral-800</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-800)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-900"><code class="ttile__name">--sf-color-neutral-900</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-900)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-950"><code class="ttile__name">--sf-color-neutral-950</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-950)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-a10"><code class="ttile__name">--sf-color-neutral-a10</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-a10)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-a30"><code class="ttile__name">--sf-color-neutral-a30</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-a30)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-a5"><code class="ttile__name">--sf-color-neutral-a5</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-a5)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-a50"><code class="ttile__name">--sf-color-neutral-a50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-a50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-a80"><code class="ttile__name">--sf-color-neutral-a80</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-a80)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-darker"><code class="ttile__name">--sf-color-neutral-darker</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-darker)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-lighter"><code class="ttile__name">--sf-color-neutral-lighter</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-lighter)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-muted"><code class="ttile__name">--sf-color-neutral-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-source-dark"><code class="ttile__name">--sf-color-neutral-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-source-light"><code class="ttile__name">--sf-color-neutral-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-subtle"><code class="ttile__name">--sf-color-neutral-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-superdark"><code class="ttile__name">--sf-color-neutral-superdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-superdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-superlight"><code class="ttile__name">--sf-color-neutral-superlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-superlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-tint"><code class="ttile__name">--sf-color-neutral-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-xdark"><code class="ttile__name">--sf-color-neutral-xdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-xdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-xlight"><code class="ttile__name">--sf-color-neutral-xlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-xlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-overlay"><code class="ttile__name">--sf-color-overlay</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-overlay)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary"><code class="ttile__name">--sf-color-primary</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary--active"><code class="ttile__name">--sf-color-primary--active</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary--active)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary--hover"><code class="ttile__name">--sf-color-primary--hover</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary--hover)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-100"><code class="ttile__name">--sf-color-primary-100</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-100)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-200"><code class="ttile__name">--sf-color-primary-200</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-200)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-300"><code class="ttile__name">--sf-color-primary-300</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-300)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-400"><code class="ttile__name">--sf-color-primary-400</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-400)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-50"><code class="ttile__name">--sf-color-primary-50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-500"><code class="ttile__name">--sf-color-primary-500</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-500)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-600"><code class="ttile__name">--sf-color-primary-600</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-600)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-700"><code class="ttile__name">--sf-color-primary-700</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-700)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-800"><code class="ttile__name">--sf-color-primary-800</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-800)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-900"><code class="ttile__name">--sf-color-primary-900</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-900)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-950"><code class="ttile__name">--sf-color-primary-950</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-950)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-a10"><code class="ttile__name">--sf-color-primary-a10</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-a10)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-a30"><code class="ttile__name">--sf-color-primary-a30</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-a30)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-a5"><code class="ttile__name">--sf-color-primary-a5</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-a5)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-a50"><code class="ttile__name">--sf-color-primary-a50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-a50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-a80"><code class="ttile__name">--sf-color-primary-a80</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-a80)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-darker"><code class="ttile__name">--sf-color-primary-darker</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-darker)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-lighter"><code class="ttile__name">--sf-color-primary-lighter</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-lighter)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-muted"><code class="ttile__name">--sf-color-primary-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-source-dark"><code class="ttile__name">--sf-color-primary-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-source-light"><code class="ttile__name">--sf-color-primary-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-subtle"><code class="ttile__name">--sf-color-primary-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-superdark"><code class="ttile__name">--sf-color-primary-superdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-superdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-superlight"><code class="ttile__name">--sf-color-primary-superlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-superlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-tint"><code class="ttile__name">--sf-color-primary-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-xdark"><code class="ttile__name">--sf-color-primary-xdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-xdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-xlight"><code class="ttile__name">--sf-color-primary-xlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-xlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-raised"><code class="ttile__name">--sf-color-raised</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-raised)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-scheme"><code class="ttile__name">--sf-color-scheme</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-scheme)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary"><code class="ttile__name">--sf-color-secondary</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary--active"><code class="ttile__name">--sf-color-secondary--active</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary--active)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary--hover"><code class="ttile__name">--sf-color-secondary--hover</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary--hover)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-100"><code class="ttile__name">--sf-color-secondary-100</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-100)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-200"><code class="ttile__name">--sf-color-secondary-200</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-200)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-300"><code class="ttile__name">--sf-color-secondary-300</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-300)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-400"><code class="ttile__name">--sf-color-secondary-400</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-400)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-50"><code class="ttile__name">--sf-color-secondary-50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-500"><code class="ttile__name">--sf-color-secondary-500</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-500)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-600"><code class="ttile__name">--sf-color-secondary-600</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-600)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-700"><code class="ttile__name">--sf-color-secondary-700</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-700)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-800"><code class="ttile__name">--sf-color-secondary-800</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-800)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-900"><code class="ttile__name">--sf-color-secondary-900</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-900)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-950"><code class="ttile__name">--sf-color-secondary-950</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-950)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-a10"><code class="ttile__name">--sf-color-secondary-a10</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-a10)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-a30"><code class="ttile__name">--sf-color-secondary-a30</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-a30)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-a5"><code class="ttile__name">--sf-color-secondary-a5</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-a5)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-a50"><code class="ttile__name">--sf-color-secondary-a50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-a50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-a80"><code class="ttile__name">--sf-color-secondary-a80</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-a80)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-darker"><code class="ttile__name">--sf-color-secondary-darker</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-darker)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-lighter"><code class="ttile__name">--sf-color-secondary-lighter</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-lighter)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-muted"><code class="ttile__name">--sf-color-secondary-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-source-dark"><code class="ttile__name">--sf-color-secondary-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-source-light"><code class="ttile__name">--sf-color-secondary-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-subtle"><code class="ttile__name">--sf-color-secondary-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-superdark"><code class="ttile__name">--sf-color-secondary-superdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-superdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-superlight"><code class="ttile__name">--sf-color-secondary-superlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-superlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-tint"><code class="ttile__name">--sf-color-secondary-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-xdark"><code class="ttile__name">--sf-color-secondary-xdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-xdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-xlight"><code class="ttile__name">--sf-color-secondary-xlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-xlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-selection-bg"><code class="ttile__name">--sf-color-selection-bg</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-selection-bg)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-selection-bg--alt"><code class="ttile__name">--sf-color-selection-bg--alt</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-selection-bg--alt)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-selection-text" data-inherit="true"><code class="ttile__name">--sf-color-selection-text</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-selection-text)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-selection-text--alt"><code class="ttile__name">--sf-color-selection-text--alt</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-selection-text--alt)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-success"><code class="ttile__name">--sf-color-success</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-success)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-success-muted"><code class="ttile__name">--sf-color-success-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-success-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-success-source-dark"><code class="ttile__name">--sf-color-success-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-success-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-success-source-light"><code class="ttile__name">--sf-color-success-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-success-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-success-strong"><code class="ttile__name">--sf-color-success-strong</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-success-strong)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-success-subtle"><code class="ttile__name">--sf-color-success-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-success-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-success-tint"><code class="ttile__name">--sf-color-success-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-success-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-surface"><code class="ttile__name">--sf-color-surface</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-surface)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary"><code class="ttile__name">--sf-color-tertiary</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary--active"><code class="ttile__name">--sf-color-tertiary--active</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary--active)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary--hover"><code class="ttile__name">--sf-color-tertiary--hover</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary--hover)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-100"><code class="ttile__name">--sf-color-tertiary-100</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-100)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-200"><code class="ttile__name">--sf-color-tertiary-200</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-200)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-300"><code class="ttile__name">--sf-color-tertiary-300</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-300)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-400"><code class="ttile__name">--sf-color-tertiary-400</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-400)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-50"><code class="ttile__name">--sf-color-tertiary-50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-500"><code class="ttile__name">--sf-color-tertiary-500</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-500)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-600"><code class="ttile__name">--sf-color-tertiary-600</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-600)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-700"><code class="ttile__name">--sf-color-tertiary-700</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-700)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-800"><code class="ttile__name">--sf-color-tertiary-800</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-800)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-900"><code class="ttile__name">--sf-color-tertiary-900</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-900)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-950"><code class="ttile__name">--sf-color-tertiary-950</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-950)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-a10"><code class="ttile__name">--sf-color-tertiary-a10</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-a10)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-a30"><code class="ttile__name">--sf-color-tertiary-a30</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-a30)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-a5"><code class="ttile__name">--sf-color-tertiary-a5</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-a5)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-a50"><code class="ttile__name">--sf-color-tertiary-a50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-a50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-a80"><code class="ttile__name">--sf-color-tertiary-a80</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-a80)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-darker"><code class="ttile__name">--sf-color-tertiary-darker</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-darker)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-lighter"><code class="ttile__name">--sf-color-tertiary-lighter</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-lighter)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-muted"><code class="ttile__name">--sf-color-tertiary-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-source-dark"><code class="ttile__name">--sf-color-tertiary-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-source-light"><code class="ttile__name">--sf-color-tertiary-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-subtle"><code class="ttile__name">--sf-color-tertiary-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-superdark"><code class="ttile__name">--sf-color-tertiary-superdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-superdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-superlight"><code class="ttile__name">--sf-color-tertiary-superlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-superlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-tint"><code class="ttile__name">--sf-color-tertiary-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-xdark"><code class="ttile__name">--sf-color-tertiary-xdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-xdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-xlight"><code class="ttile__name">--sf-color-tertiary-xlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-xlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text"><code class="ttile__name">--sf-color-text</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--disabled"><code class="ttile__name">--sf-color-text--disabled</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--disabled)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--inverse"><code class="ttile__name">--sf-color-text--inverse</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--inverse)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--muted"><code class="ttile__name">--sf-color-text--muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-action"><code class="ttile__name">--sf-color-text--on-action</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-action)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-base"><code class="ttile__name">--sf-color-text--on-base</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-base)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-danger"><code class="ttile__name">--sf-color-text--on-danger</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-danger)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-info"><code class="ttile__name">--sf-color-text--on-info</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-info)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-inverse"><code class="ttile__name">--sf-color-text--on-inverse</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-inverse)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-neutral"><code class="ttile__name">--sf-color-text--on-neutral</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-neutral)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-primary"><code class="ttile__name">--sf-color-text--on-primary</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-primary)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-secondary"><code class="ttile__name">--sf-color-text--on-secondary</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-secondary)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-success"><code class="ttile__name">--sf-color-text--on-success</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-success)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-tertiary"><code class="ttile__name">--sf-color-text--on-tertiary</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-tertiary)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-warning"><code class="ttile__name">--sf-color-text--on-warning</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-warning)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--placeholder"><code class="ttile__name">--sf-color-text--placeholder</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--placeholder)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--secondary"><code class="ttile__name">--sf-color-text--secondary</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--secondary)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-warning"><code class="ttile__name">--sf-color-warning</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-warning)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-warning-muted"><code class="ttile__name">--sf-color-warning-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-warning-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-warning-source-dark"><code class="ttile__name">--sf-color-warning-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-warning-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-warning-source-light"><code class="ttile__name">--sf-color-warning-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-warning-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-warning-strong"><code class="ttile__name">--sf-color-warning-strong</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-warning-strong)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-warning-subtle"><code class="ttile__name">--sf-color-warning-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-warning-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-warning-tint"><code class="ttile__name">--sf-color-warning-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-warning-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-white"><code class="ttile__name">--sf-color-white</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-white)"></div></div><output class="ttile__val">…</output></figure></div>
@@ -1329,8 +1329,8 @@ <h3>box <span class="count">3</span></h3>
       <div class="ref-grid"><figure class="ttile" data-token="--sf-box-border-color"><code class="ttile__name">--sf-box-border-color</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-box-border-color),3px),100%)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-box-border-width"><code class="ttile__name">--sf-box-border-width</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-box-padding"><code class="ttile__name">--sf-box-padding</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-box-padding),3px),100%)"></div></div><output class="ttile__val">…</output></figure></div>
       <h3>breakout <span class="count">1</span></h3>
       <div class="ref-grid"><figure class="ttile" data-token="--sf-breakout-width"><code class="ttile__name">--sf-breakout-width</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-breakout-width),3px),100%)"></div></div><output class="ttile__val">…</output></figure></div>
-      <h3>btn <span class="count">14</span></h3>
-      <div class="ref-grid"><figure class="ttile" data-token="--sf-btn-border-width"><code class="ttile__name">--sf-btn-border-width</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-btn-border-width),3px),100%)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-font-scale"><code class="ttile__name">--sf-btn-font-scale</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-font-size"><code class="ttile__name">--sf-btn-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-font-weight"><code class="ttile__name">--sf-btn-font-weight</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-btn-font-weight),3px),100%)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-gap"><code class="ttile__name">--sf-btn-gap</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-btn-gap),3px),100%)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-l-font-size"><code class="ttile__name">--sf-btn-l-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-m-font-size"><code class="ttile__name">--sf-btn-m-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-min-height"><code class="ttile__name">--sf-btn-min-height</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-padding-block"><code class="ttile__name">--sf-btn-padding-block</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-padding-inline"><code class="ttile__name">--sf-btn-padding-inline</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-radius"><code class="ttile__name">--sf-btn-radius</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-btn-radius),3px),100%)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-s-font-size"><code class="ttile__name">--sf-btn-s-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xl-font-size"><code class="ttile__name">--sf-btn-xl-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xs-font-size"><code class="ttile__name">--sf-btn-xs-font-size</code><output class="ttile__val">…</output></figure></div>
+      <h3>btn <span class="count">29</span></h3>
+      <div class="ref-grid"><figure class="ttile" data-token="--sf-btn-border-width"><code class="ttile__name">--sf-btn-border-width</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-btn-border-width),3px),100%)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-font-scale"><code class="ttile__name">--sf-btn-font-scale</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-font-size"><code class="ttile__name">--sf-btn-font-size <span class="ttile__tier">adv</span></code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-font-weight"><code class="ttile__name">--sf-btn-font-weight</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-btn-font-weight),3px),100%)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-gap"><code class="ttile__name">--sf-btn-gap</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-btn-gap),3px),100%)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-l-font-size"><code class="ttile__name">--sf-btn-l-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-l-min-height"><code class="ttile__name">--sf-btn-l-min-height</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-l-padding-block"><code class="ttile__name">--sf-btn-l-padding-block</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-l-padding-inline"><code class="ttile__name">--sf-btn-l-padding-inline</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-m-font-size"><code class="ttile__name">--sf-btn-m-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-m-min-height"><code class="ttile__name">--sf-btn-m-min-height</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-m-padding-block"><code class="ttile__name">--sf-btn-m-padding-block</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-m-padding-inline"><code class="ttile__name">--sf-btn-m-padding-inline</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-min-height"><code class="ttile__name">--sf-btn-min-height <span class="ttile__tier">adv</span></code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-padding-block"><code class="ttile__name">--sf-btn-padding-block <span class="ttile__tier">adv</span></code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-padding-inline"><code class="ttile__name">--sf-btn-padding-inline <span class="ttile__tier">adv</span></code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-radius"><code class="ttile__name">--sf-btn-radius</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-btn-radius),3px),100%)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-s-font-size"><code class="ttile__name">--sf-btn-s-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-s-min-height"><code class="ttile__name">--sf-btn-s-min-height</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-s-padding-block"><code class="ttile__name">--sf-btn-s-padding-block</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-s-padding-inline"><code class="ttile__name">--sf-btn-s-padding-inline</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xl-font-size"><code class="ttile__name">--sf-btn-xl-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xl-min-height"><code class="ttile__name">--sf-btn-xl-min-height</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xl-padding-block"><code class="ttile__name">--sf-btn-xl-padding-block</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xl-padding-inline"><code class="ttile__name">--sf-btn-xl-padding-inline</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xs-font-size"><code class="ttile__name">--sf-btn-xs-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xs-min-height"><code class="ttile__name">--sf-btn-xs-min-height</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xs-padding-block"><code class="ttile__name">--sf-btn-xs-padding-block</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xs-padding-inline"><code class="ttile__name">--sf-btn-xs-padding-inline</code><output class="ttile__val">…</output></figure></div>
       <h3>card <span class="count">15</span></h3>
       <div class="ref-grid"><figure class="ttile" data-token="--sf-card-avatar-size"><code class="ttile__name">--sf-card-avatar-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-bg"><code class="ttile__name">--sf-card-bg</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-border-color"><code class="ttile__name">--sf-card-border-color</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-border-width"><code class="ttile__name">--sf-card-border-width</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-btn-font-size"><code class="ttile__name">--sf-card-btn-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-gap"><code class="ttile__name">--sf-card-gap</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-heading-size"><code class="ttile__name">--sf-card-heading-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-media-radius"><code class="ttile__name">--sf-card-media-radius</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-media-ratio"><code class="ttile__name">--sf-card-media-ratio</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-padding"><code class="ttile__name">--sf-card-padding</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-radius"><code class="ttile__name">--sf-card-radius</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-radius-outer"><code class="ttile__name">--sf-card-radius-outer</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-shadow"><code class="ttile__name">--sf-card-shadow</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-shadow--elevated"><code class="ttile__name">--sf-card-shadow--elevated</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-shadow--hover"><code class="ttile__name">--sf-card-shadow--hover</code><output class="ttile__val">…</output></figure></div>
       <h3>caret <span class="count">1</span></h3>
diff --git a/demos/full-api-demo.html b/demos/full-api-demo.html
index 957d652a5..ff2e4e88d 100644
--- a/demos/full-api-demo.html
+++ b/demos/full-api-demo.html
@@ -121,7 +121,7 @@
   </nav>
   <main id="main">
     <h1>SLASHED Full API Demo</h1>
-    <p style="color:var(--sf-color-text--muted)">v0.7.13 · full bundle from jsDelivr CDN · 328 classes · 741 tokens (250 configurable)</p>
+    <p style="color:var(--sf-color-text--muted)">v0.7.14 · full bundle from jsDelivr CDN · 328 classes · 756 tokens (265 configurable)</p>
     <div class="notice">Baseline render with default tokens. Use the toolbar to switch theme, toggle the ultimate override live, or replay motion. The always-on override variant is <a href="full-api-demo-with-overrides.html">full-api-demo-with-overrides.html</a>.</div>
 
     <section id="tokens">
@@ -1272,7 +1272,7 @@ <h2>Theme <span class="count">3</span></h2>
     </section>
 
     <section id="reference">
-      <h2>Part 2 — Complete token reference <span class="count">741 tokens · live values</span></h2>
+      <h2>Part 2 — Complete token reference <span class="count">756 tokens · live values</span></h2>
       <div class="notice">Every <code>--sf-*</code> token — knob and consumption, all tiers — with its <strong>live computed value</strong> (filled by JS). Toggle the theme or the override in the toolbar and watch every value recompute. Tokens that resolve to a colour, length, shadow, gradient, type or motion value also show a visual.</div>
       <h3>color <span class="count">255</span></h3>
       <div class="ref-grid"><figure class="ttile" data-token="--sf-color-action"><code class="ttile__name">--sf-color-action</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action--active"><code class="ttile__name">--sf-color-action--active</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action--active)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action--hover"><code class="ttile__name">--sf-color-action--hover</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action--hover)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-100"><code class="ttile__name">--sf-color-action-100</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-100)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-200"><code class="ttile__name">--sf-color-action-200</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-200)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-300"><code class="ttile__name">--sf-color-action-300</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-300)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-400"><code class="ttile__name">--sf-color-action-400</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-400)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-50"><code class="ttile__name">--sf-color-action-50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-500"><code class="ttile__name">--sf-color-action-500</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-500)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-600"><code class="ttile__name">--sf-color-action-600</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-600)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-700"><code class="ttile__name">--sf-color-action-700</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-700)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-800"><code class="ttile__name">--sf-color-action-800</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-800)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-900"><code class="ttile__name">--sf-color-action-900</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-900)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-950"><code class="ttile__name">--sf-color-action-950</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-950)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-a10"><code class="ttile__name">--sf-color-action-a10</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-a10)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-a30"><code class="ttile__name">--sf-color-action-a30</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-a30)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-a5"><code class="ttile__name">--sf-color-action-a5</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-a5)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-a50"><code class="ttile__name">--sf-color-action-a50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-a50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-a80"><code class="ttile__name">--sf-color-action-a80</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-a80)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-darker"><code class="ttile__name">--sf-color-action-darker</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-darker)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-lighter"><code class="ttile__name">--sf-color-action-lighter</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-lighter)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-muted"><code class="ttile__name">--sf-color-action-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-source-dark"><code class="ttile__name">--sf-color-action-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-source-light"><code class="ttile__name">--sf-color-action-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-subtle"><code class="ttile__name">--sf-color-action-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-superdark"><code class="ttile__name">--sf-color-action-superdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-superdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-superlight"><code class="ttile__name">--sf-color-action-superlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-superlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-tint"><code class="ttile__name">--sf-color-action-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-xdark"><code class="ttile__name">--sf-color-action-xdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-xdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-action-xlight"><code class="ttile__name">--sf-color-action-xlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-action-xlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base"><code class="ttile__name">--sf-color-base</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base--active"><code class="ttile__name">--sf-color-base--active</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base--active)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base--hover"><code class="ttile__name">--sf-color-base--hover</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base--hover)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-100"><code class="ttile__name">--sf-color-base-100</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-100)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-200"><code class="ttile__name">--sf-color-base-200</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-200)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-300"><code class="ttile__name">--sf-color-base-300</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-300)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-400"><code class="ttile__name">--sf-color-base-400</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-400)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-50"><code class="ttile__name">--sf-color-base-50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-500"><code class="ttile__name">--sf-color-base-500</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-500)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-600"><code class="ttile__name">--sf-color-base-600</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-600)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-700"><code class="ttile__name">--sf-color-base-700</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-700)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-800"><code class="ttile__name">--sf-color-base-800</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-800)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-900"><code class="ttile__name">--sf-color-base-900</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-900)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-950"><code class="ttile__name">--sf-color-base-950</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-950)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-a10"><code class="ttile__name">--sf-color-base-a10</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-a10)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-a30"><code class="ttile__name">--sf-color-base-a30</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-a30)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-a5"><code class="ttile__name">--sf-color-base-a5</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-a5)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-a50"><code class="ttile__name">--sf-color-base-a50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-a50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-a80"><code class="ttile__name">--sf-color-base-a80</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-a80)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-muted"><code class="ttile__name">--sf-color-base-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-source-dark"><code class="ttile__name">--sf-color-base-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-source-light"><code class="ttile__name">--sf-color-base-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-subtle"><code class="ttile__name">--sf-color-base-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-base-tint"><code class="ttile__name">--sf-color-base-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-base-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-bg"><code class="ttile__name">--sf-color-bg</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-bg)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-bg--active"><code class="ttile__name">--sf-color-bg--active</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-bg--active)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-bg--disabled"><code class="ttile__name">--sf-color-bg--disabled</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-bg--disabled)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-bg--focus"><code class="ttile__name">--sf-color-bg--focus</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-bg--focus)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-bg--hover"><code class="ttile__name">--sf-color-bg--hover</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-bg--hover)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-bg--selected"><code class="ttile__name">--sf-color-bg--selected</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-bg--selected)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-black"><code class="ttile__name">--sf-color-black</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-black)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-border"><code class="ttile__name">--sf-color-border</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-border)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-border--disabled"><code class="ttile__name">--sf-color-border--disabled</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-border--disabled)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-border--focus"><code class="ttile__name">--sf-color-border--focus</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-border--focus)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-border--strong"><code class="ttile__name">--sf-color-border--strong</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-border--strong)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-border--subtle"><code class="ttile__name">--sf-color-border--subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-border--subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-border--translucent"><code class="ttile__name">--sf-color-border--translucent</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-border--translucent)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-code-bg"><code class="ttile__name">--sf-color-code-bg</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-code-bg)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-code-text"><code class="ttile__name">--sf-color-code-text</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-code-text)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-danger"><code class="ttile__name">--sf-color-danger</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-danger)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-danger-muted"><code class="ttile__name">--sf-color-danger-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-danger-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-danger-source-dark"><code class="ttile__name">--sf-color-danger-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-danger-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-danger-source-light"><code class="ttile__name">--sf-color-danger-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-danger-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-danger-strong"><code class="ttile__name">--sf-color-danger-strong</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-danger-strong)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-danger-subtle"><code class="ttile__name">--sf-color-danger-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-danger-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-danger-tint"><code class="ttile__name">--sf-color-danger-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-danger-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-dim"><code class="ttile__name">--sf-color-dim</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-dim)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-heading"><code class="ttile__name">--sf-color-heading</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-heading)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-info"><code class="ttile__name">--sf-color-info</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-info)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-info-muted"><code class="ttile__name">--sf-color-info-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-info-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-info-source-dark"><code class="ttile__name">--sf-color-info-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-info-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-info-source-light"><code class="ttile__name">--sf-color-info-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-info-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-info-strong"><code class="ttile__name">--sf-color-info-strong</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-info-strong)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-info-subtle"><code class="ttile__name">--sf-color-info-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-info-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-info-tint"><code class="ttile__name">--sf-color-info-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-info-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-inset"><code class="ttile__name">--sf-color-inset</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-inset)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-inverse"><code class="ttile__name">--sf-color-inverse</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-inverse)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-link"><code class="ttile__name">--sf-color-link</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-link)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-link--active"><code class="ttile__name">--sf-color-link--active</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-link--active)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-link--disabled"><code class="ttile__name">--sf-color-link--disabled</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-link--disabled)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-link--hover"><code class="ttile__name">--sf-color-link--hover</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-link--hover)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-link--underline"><code class="ttile__name">--sf-color-link--underline</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-link--underline)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-link--visited"><code class="ttile__name">--sf-color-link--visited</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-link--visited)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-mark-bg"><code class="ttile__name">--sf-color-mark-bg</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-mark-bg)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-mark-text" data-inherit="true"><code class="ttile__name">--sf-color-mark-text</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-mark-text)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral"><code class="ttile__name">--sf-color-neutral</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral--active"><code class="ttile__name">--sf-color-neutral--active</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral--active)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral--hover"><code class="ttile__name">--sf-color-neutral--hover</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral--hover)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-100"><code class="ttile__name">--sf-color-neutral-100</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-100)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-200"><code class="ttile__name">--sf-color-neutral-200</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-200)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-300"><code class="ttile__name">--sf-color-neutral-300</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-300)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-400"><code class="ttile__name">--sf-color-neutral-400</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-400)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-50"><code class="ttile__name">--sf-color-neutral-50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-500"><code class="ttile__name">--sf-color-neutral-500</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-500)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-600"><code class="ttile__name">--sf-color-neutral-600</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-600)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-700"><code class="ttile__name">--sf-color-neutral-700</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-700)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-800"><code class="ttile__name">--sf-color-neutral-800</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-800)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-900"><code class="ttile__name">--sf-color-neutral-900</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-900)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-950"><code class="ttile__name">--sf-color-neutral-950</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-950)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-a10"><code class="ttile__name">--sf-color-neutral-a10</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-a10)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-a30"><code class="ttile__name">--sf-color-neutral-a30</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-a30)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-a5"><code class="ttile__name">--sf-color-neutral-a5</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-a5)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-a50"><code class="ttile__name">--sf-color-neutral-a50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-a50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-a80"><code class="ttile__name">--sf-color-neutral-a80</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-a80)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-darker"><code class="ttile__name">--sf-color-neutral-darker</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-darker)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-lighter"><code class="ttile__name">--sf-color-neutral-lighter</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-lighter)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-muted"><code class="ttile__name">--sf-color-neutral-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-source-dark"><code class="ttile__name">--sf-color-neutral-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-source-light"><code class="ttile__name">--sf-color-neutral-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-subtle"><code class="ttile__name">--sf-color-neutral-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-superdark"><code class="ttile__name">--sf-color-neutral-superdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-superdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-superlight"><code class="ttile__name">--sf-color-neutral-superlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-superlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-tint"><code class="ttile__name">--sf-color-neutral-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-xdark"><code class="ttile__name">--sf-color-neutral-xdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-xdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-neutral-xlight"><code class="ttile__name">--sf-color-neutral-xlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-neutral-xlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-overlay"><code class="ttile__name">--sf-color-overlay</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-overlay)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary"><code class="ttile__name">--sf-color-primary</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary--active"><code class="ttile__name">--sf-color-primary--active</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary--active)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary--hover"><code class="ttile__name">--sf-color-primary--hover</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary--hover)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-100"><code class="ttile__name">--sf-color-primary-100</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-100)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-200"><code class="ttile__name">--sf-color-primary-200</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-200)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-300"><code class="ttile__name">--sf-color-primary-300</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-300)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-400"><code class="ttile__name">--sf-color-primary-400</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-400)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-50"><code class="ttile__name">--sf-color-primary-50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-500"><code class="ttile__name">--sf-color-primary-500</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-500)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-600"><code class="ttile__name">--sf-color-primary-600</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-600)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-700"><code class="ttile__name">--sf-color-primary-700</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-700)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-800"><code class="ttile__name">--sf-color-primary-800</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-800)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-900"><code class="ttile__name">--sf-color-primary-900</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-900)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-950"><code class="ttile__name">--sf-color-primary-950</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-950)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-a10"><code class="ttile__name">--sf-color-primary-a10</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-a10)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-a30"><code class="ttile__name">--sf-color-primary-a30</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-a30)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-a5"><code class="ttile__name">--sf-color-primary-a5</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-a5)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-a50"><code class="ttile__name">--sf-color-primary-a50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-a50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-a80"><code class="ttile__name">--sf-color-primary-a80</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-a80)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-darker"><code class="ttile__name">--sf-color-primary-darker</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-darker)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-lighter"><code class="ttile__name">--sf-color-primary-lighter</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-lighter)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-muted"><code class="ttile__name">--sf-color-primary-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-source-dark"><code class="ttile__name">--sf-color-primary-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-source-light"><code class="ttile__name">--sf-color-primary-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-subtle"><code class="ttile__name">--sf-color-primary-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-superdark"><code class="ttile__name">--sf-color-primary-superdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-superdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-superlight"><code class="ttile__name">--sf-color-primary-superlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-superlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-tint"><code class="ttile__name">--sf-color-primary-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-xdark"><code class="ttile__name">--sf-color-primary-xdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-xdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-primary-xlight"><code class="ttile__name">--sf-color-primary-xlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-primary-xlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-raised"><code class="ttile__name">--sf-color-raised</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-raised)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-scheme"><code class="ttile__name">--sf-color-scheme</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-scheme)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary"><code class="ttile__name">--sf-color-secondary</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary--active"><code class="ttile__name">--sf-color-secondary--active</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary--active)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary--hover"><code class="ttile__name">--sf-color-secondary--hover</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary--hover)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-100"><code class="ttile__name">--sf-color-secondary-100</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-100)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-200"><code class="ttile__name">--sf-color-secondary-200</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-200)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-300"><code class="ttile__name">--sf-color-secondary-300</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-300)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-400"><code class="ttile__name">--sf-color-secondary-400</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-400)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-50"><code class="ttile__name">--sf-color-secondary-50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-500"><code class="ttile__name">--sf-color-secondary-500</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-500)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-600"><code class="ttile__name">--sf-color-secondary-600</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-600)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-700"><code class="ttile__name">--sf-color-secondary-700</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-700)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-800"><code class="ttile__name">--sf-color-secondary-800</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-800)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-900"><code class="ttile__name">--sf-color-secondary-900</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-900)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-950"><code class="ttile__name">--sf-color-secondary-950</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-950)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-a10"><code class="ttile__name">--sf-color-secondary-a10</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-a10)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-a30"><code class="ttile__name">--sf-color-secondary-a30</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-a30)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-a5"><code class="ttile__name">--sf-color-secondary-a5</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-a5)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-a50"><code class="ttile__name">--sf-color-secondary-a50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-a50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-a80"><code class="ttile__name">--sf-color-secondary-a80</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-a80)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-darker"><code class="ttile__name">--sf-color-secondary-darker</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-darker)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-lighter"><code class="ttile__name">--sf-color-secondary-lighter</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-lighter)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-muted"><code class="ttile__name">--sf-color-secondary-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-source-dark"><code class="ttile__name">--sf-color-secondary-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-source-light"><code class="ttile__name">--sf-color-secondary-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-subtle"><code class="ttile__name">--sf-color-secondary-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-superdark"><code class="ttile__name">--sf-color-secondary-superdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-superdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-superlight"><code class="ttile__name">--sf-color-secondary-superlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-superlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-tint"><code class="ttile__name">--sf-color-secondary-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-xdark"><code class="ttile__name">--sf-color-secondary-xdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-xdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-secondary-xlight"><code class="ttile__name">--sf-color-secondary-xlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-secondary-xlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-selection-bg"><code class="ttile__name">--sf-color-selection-bg</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-selection-bg)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-selection-bg--alt"><code class="ttile__name">--sf-color-selection-bg--alt</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-selection-bg--alt)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-selection-text" data-inherit="true"><code class="ttile__name">--sf-color-selection-text</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-selection-text)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-selection-text--alt"><code class="ttile__name">--sf-color-selection-text--alt</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-selection-text--alt)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-success"><code class="ttile__name">--sf-color-success</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-success)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-success-muted"><code class="ttile__name">--sf-color-success-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-success-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-success-source-dark"><code class="ttile__name">--sf-color-success-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-success-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-success-source-light"><code class="ttile__name">--sf-color-success-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-success-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-success-strong"><code class="ttile__name">--sf-color-success-strong</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-success-strong)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-success-subtle"><code class="ttile__name">--sf-color-success-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-success-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-success-tint"><code class="ttile__name">--sf-color-success-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-success-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-surface"><code class="ttile__name">--sf-color-surface</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-surface)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary"><code class="ttile__name">--sf-color-tertiary</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary--active"><code class="ttile__name">--sf-color-tertiary--active</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary--active)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary--hover"><code class="ttile__name">--sf-color-tertiary--hover</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary--hover)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-100"><code class="ttile__name">--sf-color-tertiary-100</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-100)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-200"><code class="ttile__name">--sf-color-tertiary-200</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-200)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-300"><code class="ttile__name">--sf-color-tertiary-300</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-300)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-400"><code class="ttile__name">--sf-color-tertiary-400</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-400)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-50"><code class="ttile__name">--sf-color-tertiary-50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-500"><code class="ttile__name">--sf-color-tertiary-500</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-500)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-600"><code class="ttile__name">--sf-color-tertiary-600</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-600)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-700"><code class="ttile__name">--sf-color-tertiary-700</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-700)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-800"><code class="ttile__name">--sf-color-tertiary-800</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-800)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-900"><code class="ttile__name">--sf-color-tertiary-900</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-900)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-950"><code class="ttile__name">--sf-color-tertiary-950</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-950)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-a10"><code class="ttile__name">--sf-color-tertiary-a10</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-a10)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-a30"><code class="ttile__name">--sf-color-tertiary-a30</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-a30)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-a5"><code class="ttile__name">--sf-color-tertiary-a5</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-a5)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-a50"><code class="ttile__name">--sf-color-tertiary-a50</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-a50)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-a80"><code class="ttile__name">--sf-color-tertiary-a80</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-a80)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-darker"><code class="ttile__name">--sf-color-tertiary-darker</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-darker)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-lighter"><code class="ttile__name">--sf-color-tertiary-lighter</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-lighter)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-muted"><code class="ttile__name">--sf-color-tertiary-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-source-dark"><code class="ttile__name">--sf-color-tertiary-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-source-light"><code class="ttile__name">--sf-color-tertiary-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-subtle"><code class="ttile__name">--sf-color-tertiary-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-superdark"><code class="ttile__name">--sf-color-tertiary-superdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-superdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-superlight"><code class="ttile__name">--sf-color-tertiary-superlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-superlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-tint"><code class="ttile__name">--sf-color-tertiary-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-xdark"><code class="ttile__name">--sf-color-tertiary-xdark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-xdark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-tertiary-xlight"><code class="ttile__name">--sf-color-tertiary-xlight</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-tertiary-xlight)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text"><code class="ttile__name">--sf-color-text</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--disabled"><code class="ttile__name">--sf-color-text--disabled</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--disabled)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--inverse"><code class="ttile__name">--sf-color-text--inverse</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--inverse)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--muted"><code class="ttile__name">--sf-color-text--muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-action"><code class="ttile__name">--sf-color-text--on-action</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-action)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-base"><code class="ttile__name">--sf-color-text--on-base</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-base)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-danger"><code class="ttile__name">--sf-color-text--on-danger</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-danger)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-info"><code class="ttile__name">--sf-color-text--on-info</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-info)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-inverse"><code class="ttile__name">--sf-color-text--on-inverse</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-inverse)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-neutral"><code class="ttile__name">--sf-color-text--on-neutral</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-neutral)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-primary"><code class="ttile__name">--sf-color-text--on-primary</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-primary)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-secondary"><code class="ttile__name">--sf-color-text--on-secondary</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-secondary)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-success"><code class="ttile__name">--sf-color-text--on-success</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-success)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-tertiary"><code class="ttile__name">--sf-color-text--on-tertiary</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-tertiary)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--on-warning"><code class="ttile__name">--sf-color-text--on-warning</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--on-warning)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--placeholder"><code class="ttile__name">--sf-color-text--placeholder</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--placeholder)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-text--secondary"><code class="ttile__name">--sf-color-text--secondary</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-text--secondary)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-warning"><code class="ttile__name">--sf-color-warning</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-warning)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-warning-muted"><code class="ttile__name">--sf-color-warning-muted</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-warning-muted)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-warning-source-dark"><code class="ttile__name">--sf-color-warning-source-dark</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-warning-source-dark)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-warning-source-light"><code class="ttile__name">--sf-color-warning-source-light</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-warning-source-light)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-warning-strong"><code class="ttile__name">--sf-color-warning-strong</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-warning-strong)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-warning-subtle"><code class="ttile__name">--sf-color-warning-subtle</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-warning-subtle)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-warning-tint"><code class="ttile__name">--sf-color-warning-tint</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-warning-tint)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-color-white"><code class="ttile__name">--sf-color-white</code><div class="ttile__vis"><div class="tvis" style="background:var(--sf-color-white)"></div></div><output class="ttile__val">…</output></figure></div>
@@ -1328,8 +1328,8 @@ <h3>box <span class="count">3</span></h3>
       <div class="ref-grid"><figure class="ttile" data-token="--sf-box-border-color"><code class="ttile__name">--sf-box-border-color</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-box-border-color),3px),100%)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-box-border-width"><code class="ttile__name">--sf-box-border-width</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-box-padding"><code class="ttile__name">--sf-box-padding</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-box-padding),3px),100%)"></div></div><output class="ttile__val">…</output></figure></div>
       <h3>breakout <span class="count">1</span></h3>
       <div class="ref-grid"><figure class="ttile" data-token="--sf-breakout-width"><code class="ttile__name">--sf-breakout-width</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-breakout-width),3px),100%)"></div></div><output class="ttile__val">…</output></figure></div>
-      <h3>btn <span class="count">14</span></h3>
-      <div class="ref-grid"><figure class="ttile" data-token="--sf-btn-border-width"><code class="ttile__name">--sf-btn-border-width</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-btn-border-width),3px),100%)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-font-scale"><code class="ttile__name">--sf-btn-font-scale</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-font-size"><code class="ttile__name">--sf-btn-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-font-weight"><code class="ttile__name">--sf-btn-font-weight</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-btn-font-weight),3px),100%)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-gap"><code class="ttile__name">--sf-btn-gap</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-btn-gap),3px),100%)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-l-font-size"><code class="ttile__name">--sf-btn-l-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-m-font-size"><code class="ttile__name">--sf-btn-m-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-min-height"><code class="ttile__name">--sf-btn-min-height</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-padding-block"><code class="ttile__name">--sf-btn-padding-block</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-padding-inline"><code class="ttile__name">--sf-btn-padding-inline</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-radius"><code class="ttile__name">--sf-btn-radius</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-btn-radius),3px),100%)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-s-font-size"><code class="ttile__name">--sf-btn-s-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xl-font-size"><code class="ttile__name">--sf-btn-xl-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xs-font-size"><code class="ttile__name">--sf-btn-xs-font-size</code><output class="ttile__val">…</output></figure></div>
+      <h3>btn <span class="count">29</span></h3>
+      <div class="ref-grid"><figure class="ttile" data-token="--sf-btn-border-width"><code class="ttile__name">--sf-btn-border-width</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-btn-border-width),3px),100%)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-font-scale"><code class="ttile__name">--sf-btn-font-scale</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-font-size"><code class="ttile__name">--sf-btn-font-size <span class="ttile__tier">adv</span></code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-font-weight"><code class="ttile__name">--sf-btn-font-weight</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-btn-font-weight),3px),100%)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-gap"><code class="ttile__name">--sf-btn-gap</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-btn-gap),3px),100%)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-l-font-size"><code class="ttile__name">--sf-btn-l-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-l-min-height"><code class="ttile__name">--sf-btn-l-min-height</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-l-padding-block"><code class="ttile__name">--sf-btn-l-padding-block</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-l-padding-inline"><code class="ttile__name">--sf-btn-l-padding-inline</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-m-font-size"><code class="ttile__name">--sf-btn-m-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-m-min-height"><code class="ttile__name">--sf-btn-m-min-height</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-m-padding-block"><code class="ttile__name">--sf-btn-m-padding-block</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-m-padding-inline"><code class="ttile__name">--sf-btn-m-padding-inline</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-min-height"><code class="ttile__name">--sf-btn-min-height <span class="ttile__tier">adv</span></code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-padding-block"><code class="ttile__name">--sf-btn-padding-block <span class="ttile__tier">adv</span></code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-padding-inline"><code class="ttile__name">--sf-btn-padding-inline <span class="ttile__tier">adv</span></code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-radius"><code class="ttile__name">--sf-btn-radius</code><div class="ttile__vis"><div class="tvis tvis--bar" style="inline-size:min(max(var(--sf-btn-radius),3px),100%)"></div></div><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-s-font-size"><code class="ttile__name">--sf-btn-s-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-s-min-height"><code class="ttile__name">--sf-btn-s-min-height</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-s-padding-block"><code class="ttile__name">--sf-btn-s-padding-block</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-s-padding-inline"><code class="ttile__name">--sf-btn-s-padding-inline</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xl-font-size"><code class="ttile__name">--sf-btn-xl-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xl-min-height"><code class="ttile__name">--sf-btn-xl-min-height</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xl-padding-block"><code class="ttile__name">--sf-btn-xl-padding-block</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xl-padding-inline"><code class="ttile__name">--sf-btn-xl-padding-inline</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xs-font-size"><code class="ttile__name">--sf-btn-xs-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xs-min-height"><code class="ttile__name">--sf-btn-xs-min-height</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xs-padding-block"><code class="ttile__name">--sf-btn-xs-padding-block</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-btn-xs-padding-inline"><code class="ttile__name">--sf-btn-xs-padding-inline</code><output class="ttile__val">…</output></figure></div>
       <h3>card <span class="count">15</span></h3>
       <div class="ref-grid"><figure class="ttile" data-token="--sf-card-avatar-size"><code class="ttile__name">--sf-card-avatar-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-bg"><code class="ttile__name">--sf-card-bg</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-border-color"><code class="ttile__name">--sf-card-border-color</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-border-width"><code class="ttile__name">--sf-card-border-width</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-btn-font-size"><code class="ttile__name">--sf-card-btn-font-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-gap"><code class="ttile__name">--sf-card-gap</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-heading-size"><code class="ttile__name">--sf-card-heading-size</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-media-radius"><code class="ttile__name">--sf-card-media-radius</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-media-ratio"><code class="ttile__name">--sf-card-media-ratio</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-padding"><code class="ttile__name">--sf-card-padding</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-radius"><code class="ttile__name">--sf-card-radius</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-radius-outer"><code class="ttile__name">--sf-card-radius-outer</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-shadow"><code class="ttile__name">--sf-card-shadow</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-shadow--elevated"><code class="ttile__name">--sf-card-shadow--elevated</code><output class="ttile__val">…</output></figure><figure class="ttile" data-token="--sf-card-shadow--hover"><code class="ttile__name">--sf-card-shadow--hover</code><output class="ttile__val">…</output></figure></div>
       <h3>caret <span class="count">1</span></h3>
diff --git a/demos/generate.mjs b/demos/generate.mjs
index 8f7b527aa..4b3ad94d3 100644
--- a/demos/generate.mjs
+++ b/demos/generate.mjs
@@ -55,29 +55,41 @@ const SKIP = {
   '--sf-text-shadow-none': 'sentinel "none" — the API guarantees no text-shadow',
   '--sf-surface-bg-animation': 'background animation shorthand on .sf-surface — a global value would force motion on every surface and fight reduced-motion; no safe single-element visual perturbation',
   '--sf-btn-font-size': 'flatten-all label size — reads FIRST in the font-size cascade, so setting it would shadow the per-size --sf-btn-{size}-font-size knobs (and mask the --sf-btn-font-scale multiplier) this demo exercises; the per-size ladder is the recommended surface',
+  '--sf-btn-padding-block': 'flatten-all block padding — reads FIRST in the cascade, shadowing the per-size --sf-btn-{size}-padding-block knobs this demo exercises',
+  '--sf-btn-padding-inline': 'flatten-all inline padding — reads FIRST in the cascade, shadowing the per-size --sf-btn-{size}-padding-inline knobs this demo exercises',
+  '--sf-btn-min-height': 'flatten-all min-height — reads FIRST in the cascade, shadowing the per-size --sf-btn-{size}-min-height knobs this demo exercises',
 };
 
 // Curated overrides for keyword / numeric / zero-valued knobs that no generic
 // numeric rule can safely transform. Each is a valid, visibly-distinct value.
 const CURATED = {
-  // Button sizing knobs declared `initial` (opt-in hooks with no baked value —
+  // Button per-size knobs declared `initial` (opt-in hooks with no baked value —
   // their default lives on the rule-local --sf-btn-*--size tier). Give explicit
-  // lengths so the demo exercises them; `initial` carries no type to infer.
-  // (The flatten-all --sf-btn-font-size is intentionally in SKIP above so it
-  // doesn't shadow the per-size knobs below.)
-  '--sf-btn-padding-block': '0.9rem',
-  '--sf-btn-padding-inline': '2rem',
-  '--sf-btn-min-height': '4rem',
-  // Uniform label-size multiplier (unitless) + per-size label knobs (also
-  // `initial`). With the flatten-all skipped, these explicit per-rung lengths
-  // actually take effect — each rung's font-size differs, then --sf-btn-font-scale
-  // multiplies the whole ladder.
+  // per-rung lengths so the demo exercises each rung; `initial` carries no type
+  // to infer. The flatten-all --sf-btn-{font-size,padding-block,padding-inline,
+  // min-height} are intentionally in SKIP above so they don't shadow these.
+  // The unitless --sf-btn-font-scale multiplier then scales the whole ladder.
   '--sf-btn-font-scale': '1.6',
   '--sf-btn-xs-font-size': '0.9rem',
   '--sf-btn-s-font-size': '1.1rem',
   '--sf-btn-m-font-size': '1.4rem',
   '--sf-btn-l-font-size': '1.8rem',
   '--sf-btn-xl-font-size': '2.2rem',
+  '--sf-btn-xs-padding-block': '0.2rem',
+  '--sf-btn-s-padding-block': '0.35rem',
+  '--sf-btn-m-padding-block': '0.5rem',
+  '--sf-btn-l-padding-block': '0.7rem',
+  '--sf-btn-xl-padding-block': '0.9rem',
+  '--sf-btn-xs-padding-inline': '0.6rem',
+  '--sf-btn-s-padding-inline': '0.9rem',
+  '--sf-btn-m-padding-inline': '1.2rem',
+  '--sf-btn-l-padding-inline': '1.6rem',
+  '--sf-btn-xl-padding-inline': '2rem',
+  '--sf-btn-xs-min-height': '1.8rem',
+  '--sf-btn-s-min-height': '2.1rem',
+  '--sf-btn-m-min-height': '2.5rem',
+  '--sf-btn-l-min-height': '3rem',
+  '--sf-btn-xl-min-height': '3.5rem',
   // zero-valued lengths → small but visible
   '--sf-bg-layer-inset': '0.75rem',
   '--sf-bg-layer-radius': '0.75rem',
diff --git a/demos/ultimate-override.css b/demos/ultimate-override.css
index 4fdf58260..19f831b7f 100644
--- a/demos/ultimate-override.css
+++ b/demos/ultimate-override.css
@@ -1,12 +1,12 @@
 /* ============================================================================
    ULTIMATE OVERRIDE — generated by demos/generate.mjs (do not edit by hand)
-   SLASHED v0.7.13
+   SLASHED v0.7.14
 
    Perturbs every CONFIGURABLE (role: "knob") token to a valid, visibly-distinct
    value so full-api-demo.html can prove each one is wired end to end.
 
-   Coverage: 225 of 250 knob tokens overridden.
-   25 knobs are intentionally NOT perturbed (structural /
+   Coverage: 237 of 265 knob tokens overridden.
+   28 knobs are intentionally NOT perturbed (structural /
    meta / sentinel) — listed with reasons at the bottom of this file.
    ============================================================================ */
 
@@ -45,13 +45,25 @@
   /* btn */
   --sf-btn-font-scale: 1.6; /* was: 1 */
   --sf-btn-l-font-size: 1.8rem; /* was: initial */
+  --sf-btn-l-min-height: 3rem; /* was: initial */
+  --sf-btn-l-padding-block: 0.7rem; /* was: initial */
+  --sf-btn-l-padding-inline: 1.6rem; /* was: initial */
   --sf-btn-m-font-size: 1.4rem; /* was: initial */
-  --sf-btn-min-height: 4rem; /* was: initial */
-  --sf-btn-padding-block: 0.9rem; /* was: initial */
-  --sf-btn-padding-inline: 2rem; /* was: initial */
+  --sf-btn-m-min-height: 2.5rem; /* was: initial */
+  --sf-btn-m-padding-block: 0.5rem; /* was: initial */
+  --sf-btn-m-padding-inline: 1.2rem; /* was: initial */
   --sf-btn-s-font-size: 1.1rem; /* was: initial */
+  --sf-btn-s-min-height: 2.1rem; /* was: initial */
+  --sf-btn-s-padding-block: 0.35rem; /* was: initial */
+  --sf-btn-s-padding-inline: 0.9rem; /* was: initial */
   --sf-btn-xl-font-size: 2.2rem; /* was: initial */
+  --sf-btn-xl-min-height: 3.5rem; /* was: initial */
+  --sf-btn-xl-padding-block: 0.9rem; /* was: initial */
+  --sf-btn-xl-padding-inline: 2rem; /* was: initial */
   --sf-btn-xs-font-size: 0.9rem; /* was: initial */
+  --sf-btn-xs-min-height: 1.8rem; /* was: initial */
+  --sf-btn-xs-padding-block: 0.2rem; /* was: initial */
+  --sf-btn-xs-padding-inline: 0.6rem; /* was: initial */
 
   /* card */
   --sf-card-avatar-size: 4rem; /* was: 2.5rem */
@@ -369,9 +381,12 @@
 }
 
 /* ----------------------------------------------------------------------------
-   Intentionally NOT overridden (25):
+   Intentionally NOT overridden (28):
    --sf-bg-layer-z — stacking order — lowering it would push the background layer over content
    --sf-btn-font-size — flatten-all label size — reads FIRST in the font-size cascade, so setting it would shadow the per-size --sf-btn-{size}-font-size knobs (and mask the --sf-btn-font-scale multiplier) this demo exercises; the per-size ladder is the recommended surface
+   --sf-btn-min-height — flatten-all min-height — reads FIRST in the cascade, shadowing the per-size --sf-btn-{size}-min-height knobs this demo exercises
+   --sf-btn-padding-block — flatten-all block padding — reads FIRST in the cascade, shadowing the per-size --sf-btn-{size}-padding-block knobs this demo exercises
+   --sf-btn-padding-inline — flatten-all inline padding — reads FIRST in the cascade, shadowing the per-size --sf-btn-{size}-padding-inline knobs this demo exercises
    --sf-color-scheme — meta control — forcing a scheme would override the page light/dark behaviour rather than test a visual token
    --sf-is-active — runtime state flag — exercised via the .sf-is-active class; a global :root flip would force every element active
    --sf-is-current — runtime state flag — exercised via the .sf-is-current class
diff --git a/dist/css-custom-data.json b/dist/css-custom-data.json
index 56ba899e5..41d3eb8ad 100644
--- a/dist/css-custom-data.json
+++ b/dist/css-custom-data.json
@@ -308,7 +308,7 @@
     },
     {
       "name": "--sf-btn-font-size",
-      "description": "Flatten-all label font-size for .sf-btn — once set it overrides every size (--xs/--s/--l/--xl) to the same value. For proportional sizing use --sf-btn-font-scale; to retune a single rung use --sf-btn-{size}-font-size.\n\nDefault: `initial`",
+      "description": "Flatten-all label font-size for .sf-btn — once set it overrides every size (--xs/--s/--l/--xl) to the same value. For proportional sizing use --sf-btn-font-scale; to retune a single rung use --sf-btn-{size}-font-size.\n\nDefault: `initial`\n\n(advanced token)",
       "syntax": "*"
     },
     {
@@ -326,24 +326,54 @@
       "description": "Label font-size for the large button (.sf-btn--l). Unset, falls through to --sf-text-l; set to retune this rung without touching the others.\n\nDefault: `initial`",
       "syntax": "*"
     },
+    {
+      "name": "--sf-btn-l-min-height",
+      "description": "Minimum target height for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone.\n\nDefault: `initial`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-btn-l-padding-block",
+      "description": "Vertical (block) padding for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone.\n\nDefault: `initial`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-btn-l-padding-inline",
+      "description": "Horizontal (inline) padding for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone.\n\nDefault: `initial`",
+      "syntax": "*"
+    },
     {
       "name": "--sf-btn-m-font-size",
       "description": "Label font-size for the default (medium) button (.sf-btn). Unset, falls through to --sf-text-m; set to retune this rung without touching the others.\n\nDefault: `initial`",
       "syntax": "*"
     },
+    {
+      "name": "--sf-btn-m-min-height",
+      "description": "Minimum target height for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone.\n\nDefault: `initial`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-btn-m-padding-block",
+      "description": "Vertical (block) padding for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone.\n\nDefault: `initial`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-btn-m-padding-inline",
+      "description": "Horizontal (inline) padding for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone.\n\nDefault: `initial`",
+      "syntax": "*"
+    },
     {
       "name": "--sf-btn-min-height",
-      "description": "Minimum target height for .sf-btn. Defaults to --sf-touch-target so buttons meet the WCAG 2.2 target-size minimum.\n\nDefault: `initial`",
+      "description": "Flatten-all minimum target height for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-min-height.\n\nDefault: `initial`\n\n(advanced token)",
       "syntax": "*"
     },
     {
       "name": "--sf-btn-padding-block",
-      "description": "Vertical (block) padding inside .sf-btn.\n\nDefault: `initial`",
+      "description": "Flatten-all vertical (block) padding for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-padding-block.\n\nDefault: `initial`\n\n(advanced token)",
       "syntax": "*"
     },
     {
       "name": "--sf-btn-padding-inline",
-      "description": "Horizontal (inline) padding inside .sf-btn.\n\nDefault: `initial`",
+      "description": "Flatten-all horizontal (inline) padding for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-padding-inline.\n\nDefault: `initial`\n\n(advanced token)",
       "syntax": "*"
     },
     {
@@ -356,16 +386,61 @@
       "description": "Label font-size for the small button (.sf-btn--s). Unset, falls through to --sf-text-s; set to retune this rung without touching the others.\n\nDefault: `initial`",
       "syntax": "*"
     },
+    {
+      "name": "--sf-btn-s-min-height",
+      "description": "Minimum target height for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone.\n\nDefault: `initial`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-btn-s-padding-block",
+      "description": "Vertical (block) padding for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone.\n\nDefault: `initial`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-btn-s-padding-inline",
+      "description": "Horizontal (inline) padding for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone.\n\nDefault: `initial`",
+      "syntax": "*"
+    },
     {
       "name": "--sf-btn-xl-font-size",
       "description": "Label font-size for the extra-large button (.sf-btn--xl). Unset, falls through to --sf-text-xl; set to retune this rung without touching the others.\n\nDefault: `initial`",
       "syntax": "*"
     },
+    {
+      "name": "--sf-btn-xl-min-height",
+      "description": "Minimum target height for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone.\n\nDefault: `initial`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-btn-xl-padding-block",
+      "description": "Vertical (block) padding for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone.\n\nDefault: `initial`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-btn-xl-padding-inline",
+      "description": "Horizontal (inline) padding for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone.\n\nDefault: `initial`",
+      "syntax": "*"
+    },
     {
       "name": "--sf-btn-xs-font-size",
       "description": "Label font-size for the extra-small button (.sf-btn--xs). Unset, falls through to --sf-text-xs; set to retune this rung without touching the others.\n\nDefault: `initial`",
       "syntax": "*"
     },
+    {
+      "name": "--sf-btn-xs-min-height",
+      "description": "Minimum target height for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone.\n\nDefault: `initial`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-btn-xs-padding-block",
+      "description": "Vertical (block) padding for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone.\n\nDefault: `initial`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-btn-xs-padding-inline",
+      "description": "Horizontal (inline) padding for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone.\n\nDefault: `initial`",
+      "syntax": "*"
+    },
     {
       "name": "--sf-card-avatar-size",
       "description": "Diameter of .sf-card__avatar. Defaults to 2.5rem.\n\nDefault: `2.5rem`",
diff --git a/docs/api-index.json b/docs/api-index.json
index 6090b1350..93d8c9b66 100644
--- a/docs/api-index.json
+++ b/docs/api-index.json
@@ -26,28 +26,28 @@
       "optimal"
     ],
     "counts": {
-      "total": 1070,
+      "total": 1085,
       "by_type": {
         "class": 329,
-        "token": 741
+        "token": 756
       },
       "by_tier": {
         "INTERNAL": 1,
-        "PUBLIC": 1014,
-        "PUBLIC-ADVANCED": 55
+        "PUBLIC": 1025,
+        "PUBLIC-ADVANCED": 59
       },
       "by_role": {
         "consumption": 491,
-        "knob": 250
+        "knob": 265
       },
-      "tokens": 741,
+      "tokens": 756,
       "classes": 329,
       "sf_classes": 292,
       "is_classes": 28,
       "unprefixed_classes": 9,
       "by_category": {
         "Accessibility": 8,
-        "Component tokens": 32,
+        "Component tokens": 47,
         "Components": 30,
         "Core tokens": 622,
         "Layout primitives": 145,
@@ -1677,7 +1677,7 @@
     {
       "name": "--sf-btn-font-size",
       "type": "token",
-      "tier": "PUBLIC",
+      "tier": "PUBLIC-ADVANCED",
       "role": "knob",
       "namespace": "btn",
       "category": "Component tokens",
@@ -1774,6 +1774,81 @@
         "full"
       ]
     },
+    {
+      "name": "--sf-btn-l-min-height",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Minimum target height for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "optional/tokens.components.css"
+      ],
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-l-padding-block",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Vertical (block) padding for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "optional/tokens.components.css"
+      ],
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-l-padding-inline",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Horizontal (inline) padding for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "optional/tokens.components.css"
+      ],
+      "bundles": [
+        "full"
+      ]
+    },
     {
       "name": "--sf-btn-m-font-size",
       "type": "token",
@@ -1800,7 +1875,7 @@
       ]
     },
     {
-      "name": "--sf-btn-min-height",
+      "name": "--sf-btn-m-min-height",
       "type": "token",
       "tier": "PUBLIC",
       "role": "knob",
@@ -1808,7 +1883,7 @@
       "category": "Component tokens",
       "area": "components",
       "group": "BUTTON TOKENS",
-      "description": "Minimum target height for .sf-btn. Defaults to --sf-touch-target so buttons meet the WCAG 2.2 target-size minimum.",
+      "description": "Minimum target height for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
       "registered": false,
@@ -1825,7 +1900,7 @@
       ]
     },
     {
-      "name": "--sf-btn-padding-block",
+      "name": "--sf-btn-m-padding-block",
       "type": "token",
       "tier": "PUBLIC",
       "role": "knob",
@@ -1833,7 +1908,7 @@
       "category": "Component tokens",
       "area": "components",
       "group": "BUTTON TOKENS",
-      "description": "Vertical (block) padding inside .sf-btn.",
+      "description": "Vertical (block) padding for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
       "registered": false,
@@ -1850,7 +1925,7 @@
       ]
     },
     {
-      "name": "--sf-btn-padding-inline",
+      "name": "--sf-btn-m-padding-inline",
       "type": "token",
       "tier": "PUBLIC",
       "role": "knob",
@@ -1858,7 +1933,82 @@
       "category": "Component tokens",
       "area": "components",
       "group": "BUTTON TOKENS",
-      "description": "Horizontal (inline) padding inside .sf-btn.",
+      "description": "Horizontal (inline) padding for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "optional/tokens.components.css"
+      ],
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-min-height",
+      "type": "token",
+      "tier": "PUBLIC-ADVANCED",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Flatten-all minimum target height for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-min-height.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "optional/tokens.components.css"
+      ],
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-padding-block",
+      "type": "token",
+      "tier": "PUBLIC-ADVANCED",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Flatten-all vertical (block) padding for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-padding-block.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "optional/tokens.components.css"
+      ],
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-padding-inline",
+      "type": "token",
+      "tier": "PUBLIC-ADVANCED",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Flatten-all horizontal (inline) padding for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-padding-inline.",
       "value": "initial",
       "aliasOf": null,
       "registered": false,
@@ -1924,6 +2074,81 @@
         "full"
       ]
     },
+    {
+      "name": "--sf-btn-s-min-height",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Minimum target height for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "optional/tokens.components.css"
+      ],
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-s-padding-block",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Vertical (block) padding for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "optional/tokens.components.css"
+      ],
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-s-padding-inline",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Horizontal (inline) padding for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "optional/tokens.components.css"
+      ],
+      "bundles": [
+        "full"
+      ]
+    },
     {
       "name": "--sf-btn-xl-font-size",
       "type": "token",
@@ -1949,6 +2174,81 @@
         "full"
       ]
     },
+    {
+      "name": "--sf-btn-xl-min-height",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Minimum target height for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "optional/tokens.components.css"
+      ],
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-xl-padding-block",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Vertical (block) padding for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "optional/tokens.components.css"
+      ],
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-xl-padding-inline",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Horizontal (inline) padding for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "optional/tokens.components.css"
+      ],
+      "bundles": [
+        "full"
+      ]
+    },
     {
       "name": "--sf-btn-xs-font-size",
       "type": "token",
@@ -1974,6 +2274,81 @@
         "full"
       ]
     },
+    {
+      "name": "--sf-btn-xs-min-height",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Minimum target height for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "optional/tokens.components.css"
+      ],
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-xs-padding-block",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Vertical (block) padding for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "optional/tokens.components.css"
+      ],
+      "bundles": [
+        "full"
+      ]
+    },
+    {
+      "name": "--sf-btn-xs-padding-inline",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "btn",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Horizontal (inline) padding for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+      "value": "initial",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "optional/tokens.components.css"
+      ],
+      "bundles": [
+        "full"
+      ]
+    },
     {
       "name": "--sf-card-avatar-size",
       "type": "token",
diff --git a/docs/api-index.md b/docs/api-index.md
index f3dad7034..ff2a1ecb8 100644
--- a/docs/api-index.md
+++ b/docs/api-index.md
@@ -10,34 +10,49 @@ and a short description. The machine-readable companion (with all columns) is
 [registry.json](registry.json); for the tier contract see
 [architecture.md](architecture.md).
 
-**1070 elements** — 741 tokens, 329 classes.
+**1085 elements** — 756 tokens, 329 classes.
 
 | Tier | Count | Meaning |
 |---|---|---|
-| PUBLIC | 1014 | Everyday surface. SemVer-stable. |
-| PUBLIC-ADVANCED | 55 | Same SemVer guarantee; niche/powerful. |
+| PUBLIC | 1025 | Everyday surface. SemVer-stable. |
+| PUBLIC-ADVANCED | 59 | Same SemVer guarantee; niche/powerful. |
 | INTERNAL | 1 | Implementation detail; may change without a major bump. |
 
-## Tokens (741)
+## Tokens (756)
 
-### Component tokens (32)
+### Component tokens (47)
 
 | Token | Tier | Role | Namespace | Default | Description |
 |---|---|---|---|---|---|
 | `--sf-btn-border-width` | PUBLIC | consumption | btn | `var(--sf-border-width-1)` | Border thickness for .sf-btn (used by all fill, outline, and secondary treatments). |
 | `--sf-btn-font-scale` | PUBLIC | knob | btn | `1` | Uniform label-size multiplier for .sf-btn — scales every size's font-size by one factor while keeping the xs…xl ladder intact. The everyday 'bigger/smaller button text' knob. |
-| `--sf-btn-font-size` | PUBLIC | knob | btn | `initial` | Flatten-all label font-size for .sf-btn — once set it overrides every size (--xs/--s/--l/--xl) to the same value. For proportional sizing use --sf-btn-font-scale; to retune a single rung use --sf-btn-{size}-font-size. |
+| `--sf-btn-font-size` | PUBLIC-ADVANCED | knob | btn | `initial` | Flatten-all label font-size for .sf-btn — once set it overrides every size (--xs/--s/--l/--xl) to the same value. For proportional sizing use --sf-btn-font-scale; to retune a single rung use --sf-btn-{size}-font-size. |
 | `--sf-btn-font-weight` | PUBLIC | consumption | btn | `var(--sf-font-weight-interactive)` | Label font-weight for .sf-btn. Defaults to the interactive weight. |
 | `--sf-btn-gap` | PUBLIC | consumption | btn | `var(--sf-space-2xs)` | Gap between an icon and the label inside .sf-btn. |
 | `--sf-btn-l-font-size` | PUBLIC | knob | btn | `initial` | Label font-size for the large button (.sf-btn--l). Unset, falls through to --sf-text-l; set to retune this rung without touching the others. |
+| `--sf-btn-l-min-height` | PUBLIC | knob | btn | `initial` | Minimum target height for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone. |
+| `--sf-btn-l-padding-block` | PUBLIC | knob | btn | `initial` | Vertical (block) padding for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone. |
+| `--sf-btn-l-padding-inline` | PUBLIC | knob | btn | `initial` | Horizontal (inline) padding for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone. |
 | `--sf-btn-m-font-size` | PUBLIC | knob | btn | `initial` | Label font-size for the default (medium) button (.sf-btn). Unset, falls through to --sf-text-m; set to retune this rung without touching the others. |
-| `--sf-btn-min-height` | PUBLIC | knob | btn | `initial` | Minimum target height for .sf-btn. Defaults to --sf-touch-target so buttons meet the WCAG 2.2 target-size minimum. |
-| `--sf-btn-padding-block` | PUBLIC | knob | btn | `initial` | Vertical (block) padding inside .sf-btn. |
-| `--sf-btn-padding-inline` | PUBLIC | knob | btn | `initial` | Horizontal (inline) padding inside .sf-btn. |
+| `--sf-btn-m-min-height` | PUBLIC | knob | btn | `initial` | Minimum target height for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone. |
+| `--sf-btn-m-padding-block` | PUBLIC | knob | btn | `initial` | Vertical (block) padding for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone. |
+| `--sf-btn-m-padding-inline` | PUBLIC | knob | btn | `initial` | Horizontal (inline) padding for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone. |
+| `--sf-btn-min-height` | PUBLIC-ADVANCED | knob | btn | `initial` | Flatten-all minimum target height for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-min-height. |
+| `--sf-btn-padding-block` | PUBLIC-ADVANCED | knob | btn | `initial` | Flatten-all vertical (block) padding for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-padding-block. |
+| `--sf-btn-padding-inline` | PUBLIC-ADVANCED | knob | btn | `initial` | Flatten-all horizontal (inline) padding for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-padding-inline. |
 | `--sf-btn-radius` | PUBLIC | consumption | btn | `var(--sf-radius-m)` | Corner radius for .sf-btn. Defaults to --sf-radius-m; gives buttons a distinct radius from form fields without touching global tokens. |
 | `--sf-btn-s-font-size` | PUBLIC | knob | btn | `initial` | Label font-size for the small button (.sf-btn--s). Unset, falls through to --sf-text-s; set to retune this rung without touching the others. |
+| `--sf-btn-s-min-height` | PUBLIC | knob | btn | `initial` | Minimum target height for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone. |
+| `--sf-btn-s-padding-block` | PUBLIC | knob | btn | `initial` | Vertical (block) padding for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone. |
+| `--sf-btn-s-padding-inline` | PUBLIC | knob | btn | `initial` | Horizontal (inline) padding for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone. |
 | `--sf-btn-xl-font-size` | PUBLIC | knob | btn | `initial` | Label font-size for the extra-large button (.sf-btn--xl). Unset, falls through to --sf-text-xl; set to retune this rung without touching the others. |
+| `--sf-btn-xl-min-height` | PUBLIC | knob | btn | `initial` | Minimum target height for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone. |
+| `--sf-btn-xl-padding-block` | PUBLIC | knob | btn | `initial` | Vertical (block) padding for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone. |
+| `--sf-btn-xl-padding-inline` | PUBLIC | knob | btn | `initial` | Horizontal (inline) padding for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone. |
 | `--sf-btn-xs-font-size` | PUBLIC | knob | btn | `initial` | Label font-size for the extra-small button (.sf-btn--xs). Unset, falls through to --sf-text-xs; set to retune this rung without touching the others. |
+| `--sf-btn-xs-min-height` | PUBLIC | knob | btn | `initial` | Minimum target height for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone. |
+| `--sf-btn-xs-padding-block` | PUBLIC | knob | btn | `initial` | Vertical (block) padding for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone. |
+| `--sf-btn-xs-padding-inline` | PUBLIC | knob | btn | `initial` | Horizontal (inline) padding for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone. |
 | `--sf-card-avatar-size` | PUBLIC | knob | card | `2.5rem` | Diameter of .sf-card__avatar. Defaults to 2.5rem. |
 | `--sf-card-bg` | PUBLIC | consumption | card | `var(--sf-color-surface)` | Background surface for .sf-card. Defaults to --sf-color-surface. |
 | `--sf-card-border-color` | PUBLIC | consumption | card | `var(--sf-color-border)` | Border colour for .sf-card. Defaults to --sf-color-border. |
diff --git a/docs/llm-guide.md b/docs/llm-guide.md
index a17c099d4..c374fb6c6 100644
--- a/docs/llm-guide.md
+++ b/docs/llm-guide.md
@@ -1105,19 +1105,24 @@ Component tokens from `optional/tokens.components.css`:
 
 /* Buttons — .sf-btn (live since 0.7.0) */
 --sf-btn-radius:         var(--sf-radius-m)
---sf-btn-padding-block:  var(--sf-space-xs)
---sf-btn-padding-inline: var(--sf-space-m)
 --sf-btn-gap:            var(--sf-space-2xs)
---sf-btn-font-size:      var(--sf-text-m)   /* flatten-ALL override; unset by default so the per-size scale wins. Prefer --sf-btn-font-scale or --sf-btn-{size}-font-size */
+--sf-btn-border-width:   var(--sf-border-width-1)
+--sf-btn-font-weight:    var(--sf-font-weight-interactive)
 --sf-btn-font-scale:     1                  /* multiply EVERY size's label by this factor, keeping the xs…xl ladder intact — the everyday "bigger/smaller button text" knob */
---sf-btn-xs-font-size:   var(--sf-text-xs)  /* per-size label size; unset → scale default. Set one to retune a single rung, mirroring the per-heading size knobs */
+/* Per-size knobs — retune ONE rung; unset → that rung's own scale default. Mirror the per-heading typography knobs. */
+--sf-btn-xs-font-size:   var(--sf-text-xs)
 --sf-btn-s-font-size:    var(--sf-text-s)
 --sf-btn-m-font-size:    var(--sf-text-m)
 --sf-btn-l-font-size:    var(--sf-text-l)
 --sf-btn-xl-font-size:   var(--sf-text-xl)
---sf-btn-font-weight:    var(--sf-font-weight-interactive)
---sf-btn-min-height:     var(--sf-size-m)   /* size m default; honoured on touch too (.sf-btn is exempt from the coarse-pointer 44px floor) — set to var(--sf-touch-target) for the 44px AAA floor */
---sf-btn-border-width:   var(--sf-border-width-1)
+--sf-btn-xs-padding-block --sf-btn-s-padding-block --sf-btn-m-padding-block --sf-btn-l-padding-block --sf-btn-xl-padding-block
+--sf-btn-xs-padding-inline --sf-btn-s-padding-inline --sf-btn-m-padding-inline --sf-btn-l-padding-inline --sf-btn-xl-padding-inline
+--sf-btn-xs-min-height --sf-btn-s-min-height --sf-btn-m-min-height --sf-btn-l-min-height --sf-btn-xl-min-height
+/* Flatten-ALL overrides (PUBLIC-ADVANCED) — collapse the whole --xs…xl ladder to one value; prefer the --sf-btn-font-scale / per-size knobs above */
+--sf-btn-font-size:      var(--sf-text-m)   /* effective m default; unset by default */
+--sf-btn-padding-block:  var(--sf-space-xs)
+--sf-btn-padding-inline: var(--sf-space-m)
+--sf-btn-min-height:     var(--sf-size-m)   /* effective m default; .sf-btn is exempt from the coarse-pointer 44px floor — set var(--sf-touch-target) for the 44px AAA floor */
 
 /* Cards — .sf-card (live since 0.7.0) */
 --sf-card-padding:          var(--sf-space-l)
diff --git a/docs/registry.json b/docs/registry.json
index 538967680..d6b2dc766 100644
--- a/docs/registry.json
+++ b/docs/registry.json
@@ -20,7 +20,7 @@
       "optional/utilities.css"
     ],
     "counts": {
-      "tokens": 741,
+      "tokens": 756,
       "sf_classes": 292,
       "is_classes": 28
     }
@@ -91,14 +91,29 @@
     "--sf-btn-font-weight",
     "--sf-btn-gap",
     "--sf-btn-l-font-size",
+    "--sf-btn-l-min-height",
+    "--sf-btn-l-padding-block",
+    "--sf-btn-l-padding-inline",
     "--sf-btn-m-font-size",
+    "--sf-btn-m-min-height",
+    "--sf-btn-m-padding-block",
+    "--sf-btn-m-padding-inline",
     "--sf-btn-min-height",
     "--sf-btn-padding-block",
     "--sf-btn-padding-inline",
     "--sf-btn-radius",
     "--sf-btn-s-font-size",
+    "--sf-btn-s-min-height",
+    "--sf-btn-s-padding-block",
+    "--sf-btn-s-padding-inline",
     "--sf-btn-xl-font-size",
+    "--sf-btn-xl-min-height",
+    "--sf-btn-xl-padding-block",
+    "--sf-btn-xl-padding-inline",
     "--sf-btn-xs-font-size",
+    "--sf-btn-xs-min-height",
+    "--sf-btn-xs-padding-block",
+    "--sf-btn-xs-padding-inline",
     "--sf-card-avatar-size",
     "--sf-card-bg",
     "--sf-card-border-color",
diff --git a/docs/test-coverage-6-token-reference.html b/docs/test-coverage-6-token-reference.html
index f7cd759e3..0f2892809 100644
--- a/docs/test-coverage-6-token-reference.html
+++ b/docs/test-coverage-6-token-reference.html
@@ -109,7 +109,7 @@ <h2>Full token reference — <span id="tok-count"></span> tokens</h2>
         else apply(next);
       });
 
-      var TOKENS = ["--sf-alternate-gap","--sf-alternate-inner-gap","--sf-animation-blink","--sf-animation-color-pulse","--sf-animation-delay-1","--sf-animation-delay-2","--sf-animation-delay-3","--sf-animation-delay-4","--sf-animation-delay-5","--sf-animation-fade-in","--sf-animation-fade-out","--sf-animation-float","--sf-animation-ping","--sf-animation-scale-down","--sf-animation-scale-up","--sf-animation-shimmer","--sf-animation-slide-in-down","--sf-animation-slide-in-left","--sf-animation-slide-in-right","--sf-animation-slide-in-up","--sf-animation-slide-out-down","--sf-animation-slide-out-left","--sf-animation-slide-out-right","--sf-animation-slide-out-up","--sf-animation-spin","--sf-aspect","--sf-bento-cols-default","--sf-bento-gap","--sf-bento-row-compact","--sf-bento-row-default","--sf-bento-row-tall","--sf-bg-layer-fit","--sf-bg-layer-inset","--sf-bg-layer-position","--sf-bg-layer-radius","--sf-bg-layer-z","--sf-blur","--sf-body-color","--sf-body-em-style","--sf-body-font-family","--sf-body-font-size","--sf-body-font-weight","--sf-body-line-height","--sf-body-strong-weight","--sf-body-text-wrap","--sf-border","--sf-border-scale","--sf-border-strong","--sf-border-style","--sf-border-subtle","--sf-border-width-1","--sf-border-width-2","--sf-border-width-3","--sf-border-width-4","--sf-border-width-hairline","--sf-box-border-color","--sf-box-border-width","--sf-box-padding","--sf-breakout-width","--sf-btn-border-width","--sf-btn-font-scale","--sf-btn-font-size","--sf-btn-font-weight","--sf-btn-gap","--sf-btn-l-font-size","--sf-btn-m-font-size","--sf-btn-min-height","--sf-btn-padding-block","--sf-btn-padding-inline","--sf-btn-radius","--sf-btn-s-font-size","--sf-btn-xl-font-size","--sf-btn-xs-font-size","--sf-card-avatar-size","--sf-card-bg","--sf-card-border-color","--sf-card-border-width","--sf-card-btn-font-size","--sf-card-gap","--sf-card-heading-size","--sf-card-media-radius","--sf-card-media-ratio","--sf-card-padding","--sf-card-radius","--sf-card-radius-outer","--sf-card-shadow","--sf-card-shadow--elevated","--sf-card-shadow--hover","--sf-caret-color","--sf-center-gutter","--sf-center-max","--sf-cluster-align","--sf-cluster-gap","--sf-cluster-justify","--sf-code-font-size","--sf-color-action","--sf-color-action--active","--sf-color-action--hover","--sf-color-action-100","--sf-color-action-200","--sf-color-action-300","--sf-color-action-400","--sf-color-action-50","--sf-color-action-500","--sf-color-action-600","--sf-color-action-700","--sf-color-action-800","--sf-color-action-900","--sf-color-action-950","--sf-color-action-a10","--sf-color-action-a30","--sf-color-action-a5","--sf-color-action-a50","--sf-color-action-a80","--sf-color-action-darker","--sf-color-action-lighter","--sf-color-action-muted","--sf-color-action-source-dark","--sf-color-action-source-light","--sf-color-action-subtle","--sf-color-action-superdark","--sf-color-action-superlight","--sf-color-action-tint","--sf-color-action-xdark","--sf-color-action-xlight","--sf-color-base","--sf-color-base--active","--sf-color-base--hover","--sf-color-base-100","--sf-color-base-200","--sf-color-base-300","--sf-color-base-400","--sf-color-base-50","--sf-color-base-500","--sf-color-base-600","--sf-color-base-700","--sf-color-base-800","--sf-color-base-900","--sf-color-base-950","--sf-color-base-a10","--sf-color-base-a30","--sf-color-base-a5","--sf-color-base-a50","--sf-color-base-a80","--sf-color-base-muted","--sf-color-base-source-dark","--sf-color-base-source-light","--sf-color-base-subtle","--sf-color-base-tint","--sf-color-bg","--sf-color-bg--active","--sf-color-bg--disabled","--sf-color-bg--focus","--sf-color-bg--hover","--sf-color-bg--selected","--sf-color-black","--sf-color-border","--sf-color-border--disabled","--sf-color-border--focus","--sf-color-border--strong","--sf-color-border--subtle","--sf-color-border--translucent","--sf-color-code-bg","--sf-color-code-text","--sf-color-danger","--sf-color-danger-muted","--sf-color-danger-source-dark","--sf-color-danger-source-light","--sf-color-danger-strong","--sf-color-danger-subtle","--sf-color-danger-tint","--sf-color-dim","--sf-color-heading","--sf-color-info","--sf-color-info-muted","--sf-color-info-source-dark","--sf-color-info-source-light","--sf-color-info-strong","--sf-color-info-subtle","--sf-color-info-tint","--sf-color-inset","--sf-color-inverse","--sf-color-link","--sf-color-link--active","--sf-color-link--disabled","--sf-color-link--hover","--sf-color-link--underline","--sf-color-link--visited","--sf-color-mark-bg","--sf-color-mark-text","--sf-color-neutral","--sf-color-neutral--active","--sf-color-neutral--hover","--sf-color-neutral-100","--sf-color-neutral-200","--sf-color-neutral-300","--sf-color-neutral-400","--sf-color-neutral-50","--sf-color-neutral-500","--sf-color-neutral-600","--sf-color-neutral-700","--sf-color-neutral-800","--sf-color-neutral-900","--sf-color-neutral-950","--sf-color-neutral-a10","--sf-color-neutral-a30","--sf-color-neutral-a5","--sf-color-neutral-a50","--sf-color-neutral-a80","--sf-color-neutral-darker","--sf-color-neutral-lighter","--sf-color-neutral-muted","--sf-color-neutral-source-dark","--sf-color-neutral-source-light","--sf-color-neutral-subtle","--sf-color-neutral-superdark","--sf-color-neutral-superlight","--sf-color-neutral-tint","--sf-color-neutral-xdark","--sf-color-neutral-xlight","--sf-color-overlay","--sf-color-primary","--sf-color-primary--active","--sf-color-primary--hover","--sf-color-primary-100","--sf-color-primary-200","--sf-color-primary-300","--sf-color-primary-400","--sf-color-primary-50","--sf-color-primary-500","--sf-color-primary-600","--sf-color-primary-700","--sf-color-primary-800","--sf-color-primary-900","--sf-color-primary-950","--sf-color-primary-a10","--sf-color-primary-a30","--sf-color-primary-a5","--sf-color-primary-a50","--sf-color-primary-a80","--sf-color-primary-darker","--sf-color-primary-lighter","--sf-color-primary-muted","--sf-color-primary-source-dark","--sf-color-primary-source-light","--sf-color-primary-subtle","--sf-color-primary-superdark","--sf-color-primary-superlight","--sf-color-primary-tint","--sf-color-primary-xdark","--sf-color-primary-xlight","--sf-color-raised","--sf-color-scheme","--sf-color-secondary","--sf-color-secondary--active","--sf-color-secondary--hover","--sf-color-secondary-100","--sf-color-secondary-200","--sf-color-secondary-300","--sf-color-secondary-400","--sf-color-secondary-50","--sf-color-secondary-500","--sf-color-secondary-600","--sf-color-secondary-700","--sf-color-secondary-800","--sf-color-secondary-900","--sf-color-secondary-950","--sf-color-secondary-a10","--sf-color-secondary-a30","--sf-color-secondary-a5","--sf-color-secondary-a50","--sf-color-secondary-a80","--sf-color-secondary-darker","--sf-color-secondary-lighter","--sf-color-secondary-muted","--sf-color-secondary-source-dark","--sf-color-secondary-source-light","--sf-color-secondary-subtle","--sf-color-secondary-superdark","--sf-color-secondary-superlight","--sf-color-secondary-tint","--sf-color-secondary-xdark","--sf-color-secondary-xlight","--sf-color-selection-bg","--sf-color-selection-bg--alt","--sf-color-selection-text","--sf-color-selection-text--alt","--sf-color-success","--sf-color-success-muted","--sf-color-success-source-dark","--sf-color-success-source-light","--sf-color-success-strong","--sf-color-success-subtle","--sf-color-success-tint","--sf-color-surface","--sf-color-tertiary","--sf-color-tertiary--active","--sf-color-tertiary--hover","--sf-color-tertiary-100","--sf-color-tertiary-200","--sf-color-tertiary-300","--sf-color-tertiary-400","--sf-color-tertiary-50","--sf-color-tertiary-500","--sf-color-tertiary-600","--sf-color-tertiary-700","--sf-color-tertiary-800","--sf-color-tertiary-900","--sf-color-tertiary-950","--sf-color-tertiary-a10","--sf-color-tertiary-a30","--sf-color-tertiary-a5","--sf-color-tertiary-a50","--sf-color-tertiary-a80","--sf-color-tertiary-darker","--sf-color-tertiary-lighter","--sf-color-tertiary-muted","--sf-color-tertiary-source-dark","--sf-color-tertiary-source-light","--sf-color-tertiary-subtle","--sf-color-tertiary-superdark","--sf-color-tertiary-superlight","--sf-color-tertiary-tint","--sf-color-tertiary-xdark","--sf-color-tertiary-xlight","--sf-color-text","--sf-color-text--disabled","--sf-color-text--inverse","--sf-color-text--muted","--sf-color-text--on-action","--sf-color-text--on-base","--sf-color-text--on-danger","--sf-color-text--on-info","--sf-color-text--on-inverse","--sf-color-text--on-neutral","--sf-color-text--on-primary","--sf-color-text--on-secondary","--sf-color-text--on-success","--sf-color-text--on-tertiary","--sf-color-text--on-warning","--sf-color-text--placeholder","--sf-color-text--secondary","--sf-color-warning","--sf-color-warning-muted","--sf-color-warning-source-dark","--sf-color-warning-source-light","--sf-color-warning-strong","--sf-color-warning-subtle","--sf-color-warning-tint","--sf-color-white","--sf-component-pad","--sf-container-default","--sf-container-full","--sf-container-narrow","--sf-container-prose","--sf-container-wide","--sf-content-gap","--sf-content-intrinsic-size","--sf-content-width","--sf-contrast-bias","--sf-contrast-threshold","--sf-corner-scoop-at","--sf-corner-scoop-size","--sf-cover-min-height","--sf-cover-padding","--sf-current-font-weight","--sf-display-l-line-height","--sf-display-m-line-height","--sf-display-s-line-height","--sf-divider-color","--sf-divider-gap","--sf-divider-style","--sf-divider-width","--sf-drop-shadow-l","--sf-drop-shadow-m","--sf-drop-shadow-s","--sf-drop-shadow-xl","--sf-drop-shadow-xs","--sf-duration-fast","--sf-duration-instant","--sf-duration-none","--sf-duration-normal","--sf-duration-slow","--sf-duration-slower","--sf-ease-bounce","--sf-ease-elastic","--sf-ease-in","--sf-ease-in-out","--sf-ease-linear","--sf-ease-out","--sf-ease-overshoot","--sf-ease-spring","--sf-equal-gap","--sf-equal-min-col","--sf-equal-rule-color","--sf-equal-rule-style","--sf-equal-rule-width","--sf-field-block","--sf-field-padding-block","--sf-field-padding-inline","--sf-field-radius","--sf-field-required-marker","--sf-flow-space","--sf-fluid-max-vw","--sf-fluid-min-vw","--sf-fluid-width","--sf-focus-ring-color","--sf-focus-ring-offset","--sf-focus-ring-shadow","--sf-focus-ring-style","--sf-focus-ring-width","--sf-font-body","--sf-font-display","--sf-font-features","--sf-font-geometric","--sf-font-heading","--sf-font-humanist","--sf-font-mono","--sf-font-numeric","--sf-font-slab","--sf-font-variation","--sf-font-weight-body","--sf-font-weight-bold","--sf-font-weight-display","--sf-font-weight-heading","--sf-font-weight-interactive","--sf-font-weight-light","--sf-font-weight-medium","--sf-font-weight-normal","--sf-font-weight-semibold","--sf-font-weight-strong","--sf-frame-ratio","--sf-gap","--sf-gradient-action","--sf-gradient-brand","--sf-gradient-fade--b","--sf-gradient-fade--l","--sf-gradient-fade--r","--sf-gradient-fade--t","--sf-gradient-primary","--sf-gradient-secondary","--sf-gradient-surface","--sf-gradient-tertiary","--sf-grid-gap","--sf-grid-min","--sf-grid-min-2xl","--sf-grid-min-l","--sf-grid-min-m","--sf-grid-min-s","--sf-grid-min-xl","--sf-grid-min-xs","--sf-gutter","--sf-h1-font-weight","--sf-h1-letter-spacing","--sf-h1-line-height","--sf-h1-max-width","--sf-h1-size","--sf-h2-font-weight","--sf-h2-letter-spacing","--sf-h2-line-height","--sf-h2-max-width","--sf-h2-size","--sf-h3-font-weight","--sf-h3-letter-spacing","--sf-h3-line-height","--sf-h3-max-width","--sf-h3-size","--sf-h4-font-weight","--sf-h4-letter-spacing","--sf-h4-line-height","--sf-h4-max-width","--sf-h4-size","--sf-h5-font-weight","--sf-h5-letter-spacing","--sf-h5-line-height","--sf-h5-max-width","--sf-h5-size","--sf-h6-font-weight","--sf-h6-letter-spacing","--sf-h6-line-height","--sf-h6-max-width","--sf-h6-size","--sf-header-height","--sf-header-height-desktop","--sf-header-height-mobile","--sf-heading-color","--sf-heading-font-family","--sf-heading-text-wrap","--sf-icon-2xl","--sf-icon-box-bg","--sf-icon-box-border","--sf-icon-box-pad","--sf-icon-box-radius","--sf-icon-l","--sf-icon-m","--sf-icon-s","--sf-icon-xl","--sf-icon-xs","--sf-imposter-margin","--sf-is-active","--sf-is-current","--sf-is-dark","--sf-is-open","--sf-is-pressed","--sf-leading-normal","--sf-leading-relaxed","--sf-leading-snug","--sf-leading-taper","--sf-leading-tight","--sf-line-clamp","--sf-link-external-label","--sf-link-external-marker","--sf-link-underline-offset","--sf-link-underline-thickness","--sf-lumlocker","--sf-mask-scrim-end","--sf-mask-scrim-start","--sf-media-radius","--sf-motion-scale","--sf-object-fit","--sf-object-position","--sf-opacity-disabled","--sf-opacity-muted","--sf-optical-sizing","--sf-overlap-pull","--sf-palette-mix-100","--sf-palette-mix-200","--sf-palette-mix-300","--sf-palette-mix-400","--sf-palette-mix-50","--sf-palette-mix-600","--sf-palette-mix-700","--sf-palette-mix-800","--sf-palette-mix-900","--sf-palette-mix-950","--sf-print-base-size","--sf-print-page-margin","--sf-print-page-size","--sf-prose-block-margin","--sf-prose-blockquote-border","--sf-prose-blockquote-padding","--sf-prose-figcaption-size","--sf-prose-figure-margin","--sf-prose-heading-gap","--sf-prose-hr-margin","--sf-prose-list-gap","--sf-prose-marker-color","--sf-prose-media-margin","--sf-prose-media-radius","--sf-prose-nested-list-gap","--sf-prose-paragraph","--sf-prose-table-pad","--sf-radius-2xl","--sf-radius-2xs","--sf-radius-3xl","--sf-radius-4xl","--sf-radius-full","--sf-radius-l","--sf-radius-m","--sf-radius-none","--sf-radius-outer","--sf-radius-pill","--sf-radius-s","--sf-radius-scale","--sf-radius-xl","--sf-radius-xs","--sf-ratio-3-2","--sf-ratio-4-3","--sf-ratio-cinema","--sf-ratio-golden","--sf-ratio-portrait","--sf-ratio-square","--sf-ratio-video","--sf-reel-gap","--sf-reel-height","--sf-reel-item-width","--sf-safe-bottom","--sf-safe-left","--sf-safe-right","--sf-safe-top","--sf-scrim-color","--sf-scrim-direction","--sf-scrim-gradient","--sf-scrim-text-shadow","--sf-scroll-shadow-size","--sf-scroll-timeline-range-end","--sf-scroll-timeline-range-exit-end","--sf-scroll-timeline-range-exit-start","--sf-scroll-timeline-range-start","--sf-scrollbar-thumb","--sf-scrollbar-track","--sf-section-pad","--sf-section-pad--2xl","--sf-section-pad--l","--sf-section-pad--m","--sf-section-pad--s","--sf-section-pad--xl","--sf-section-pad--xs","--sf-section-scale","--sf-shadow-2xl","--sf-shadow-color","--sf-shadow-glow","--sf-shadow-glow-color","--sf-shadow-inner","--sf-shadow-l","--sf-shadow-lightness","--sf-shadow-m","--sf-shadow-none","--sf-shadow-s","--sf-shadow-strength","--sf-shadow-xl","--sf-shadow-xs","--sf-sidebar-gap","--sf-sidebar-min-width","--sf-sidebar-width","--sf-size-l","--sf-size-m","--sf-size-s","--sf-size-xl","--sf-size-xs","--sf-space-2xl","--sf-space-2xs","--sf-space-3xl","--sf-space-4xl","--sf-space-base-max","--sf-space-base-min","--sf-space-l","--sf-space-m","--sf-space-none","--sf-space-px","--sf-space-ratio-max","--sf-space-ratio-min","--sf-space-s","--sf-space-scale","--sf-space-xl","--sf-space-xs","--sf-stack-gap","--sf-state-pending-opacity","--sf-sticky-offset","--sf-sticky-offset-desktop","--sf-sticky-offset-mobile","--sf-surface-bg-animation","--sf-surface-bg-attachment","--sf-surface-bg-color","--sf-surface-bg-image","--sf-surface-bg-overlay","--sf-surface-bg-position","--sf-surface-bg-repeat","--sf-surface-bg-size","--sf-surface-color","--sf-switcher-gap","--sf-switcher-threshold","--sf-text-2xl","--sf-text-2xl-font-weight","--sf-text-2xl-letter-spacing","--sf-text-2xl-line-height","--sf-text-2xl-max-width","--sf-text-2xs","--sf-text-2xs-font-weight","--sf-text-2xs-letter-spacing","--sf-text-2xs-line-height","--sf-text-2xs-max-width","--sf-text-3xl","--sf-text-3xl-font-weight","--sf-text-3xl-letter-spacing","--sf-text-3xl-line-height","--sf-text-3xl-max-width","--sf-text-4xl","--sf-text-4xl-font-weight","--sf-text-4xl-letter-spacing","--sf-text-4xl-line-height","--sf-text-4xl-max-width","--sf-text-base-max","--sf-text-base-min","--sf-text-display-base-max","--sf-text-display-base-min","--sf-text-display-l","--sf-text-display-m","--sf-text-display-s","--sf-text-display-scale","--sf-text-l","--sf-text-l-font-weight","--sf-text-l-letter-spacing","--sf-text-l-line-height","--sf-text-l-max-width","--sf-text-m","--sf-text-m-font-weight","--sf-text-m-letter-spacing","--sf-text-m-line-height","--sf-text-m-max-width","--sf-text-ratio-max","--sf-text-ratio-min","--sf-text-s","--sf-text-s-font-weight","--sf-text-s-letter-spacing","--sf-text-s-line-height","--sf-text-s-max-width","--sf-text-scale","--sf-text-shadow-l","--sf-text-shadow-m","--sf-text-shadow-none","--sf-text-shadow-s","--sf-text-shadow-xl","--sf-text-shadow-xs","--sf-text-xl","--sf-text-xl-font-weight","--sf-text-xl-letter-spacing","--sf-text-xl-line-height","--sf-text-xl-max-width","--sf-text-xs","--sf-text-xs-font-weight","--sf-text-xs-letter-spacing","--sf-text-xs-line-height","--sf-text-xs-max-width","--sf-theme-transition-duration","--sf-touch-target","--sf-tracking-normal","--sf-tracking-tight","--sf-tracking-wide","--sf-tracking-wider","--sf-tracking-widest","--sf-transition-colors","--sf-transition-enter","--sf-transition-exit","--sf-transition-fast","--sf-transition-form-field","--sf-transition-opacity","--sf-transition-overlay","--sf-transition-shadow","--sf-transition-slow","--sf-transition-transform","--sf-z-base","--sf-z-below","--sf-z-dropdown","--sf-z-fixed","--sf-z-modal","--sf-z-overlay","--sf-z-raised","--sf-z-sticky","--sf-z-toast","--sf-z-tooltip"];
+      var TOKENS = ["--sf-alternate-gap","--sf-alternate-inner-gap","--sf-animation-blink","--sf-animation-color-pulse","--sf-animation-delay-1","--sf-animation-delay-2","--sf-animation-delay-3","--sf-animation-delay-4","--sf-animation-delay-5","--sf-animation-fade-in","--sf-animation-fade-out","--sf-animation-float","--sf-animation-ping","--sf-animation-scale-down","--sf-animation-scale-up","--sf-animation-shimmer","--sf-animation-slide-in-down","--sf-animation-slide-in-left","--sf-animation-slide-in-right","--sf-animation-slide-in-up","--sf-animation-slide-out-down","--sf-animation-slide-out-left","--sf-animation-slide-out-right","--sf-animation-slide-out-up","--sf-animation-spin","--sf-aspect","--sf-bento-cols-default","--sf-bento-gap","--sf-bento-row-compact","--sf-bento-row-default","--sf-bento-row-tall","--sf-bg-layer-fit","--sf-bg-layer-inset","--sf-bg-layer-position","--sf-bg-layer-radius","--sf-bg-layer-z","--sf-blur","--sf-body-color","--sf-body-em-style","--sf-body-font-family","--sf-body-font-size","--sf-body-font-weight","--sf-body-line-height","--sf-body-strong-weight","--sf-body-text-wrap","--sf-border","--sf-border-scale","--sf-border-strong","--sf-border-style","--sf-border-subtle","--sf-border-width-1","--sf-border-width-2","--sf-border-width-3","--sf-border-width-4","--sf-border-width-hairline","--sf-box-border-color","--sf-box-border-width","--sf-box-padding","--sf-breakout-width","--sf-btn-border-width","--sf-btn-font-scale","--sf-btn-font-size","--sf-btn-font-weight","--sf-btn-gap","--sf-btn-l-font-size","--sf-btn-l-min-height","--sf-btn-l-padding-block","--sf-btn-l-padding-inline","--sf-btn-m-font-size","--sf-btn-m-min-height","--sf-btn-m-padding-block","--sf-btn-m-padding-inline","--sf-btn-min-height","--sf-btn-padding-block","--sf-btn-padding-inline","--sf-btn-radius","--sf-btn-s-font-size","--sf-btn-s-min-height","--sf-btn-s-padding-block","--sf-btn-s-padding-inline","--sf-btn-xl-font-size","--sf-btn-xl-min-height","--sf-btn-xl-padding-block","--sf-btn-xl-padding-inline","--sf-btn-xs-font-size","--sf-btn-xs-min-height","--sf-btn-xs-padding-block","--sf-btn-xs-padding-inline","--sf-card-avatar-size","--sf-card-bg","--sf-card-border-color","--sf-card-border-width","--sf-card-btn-font-size","--sf-card-gap","--sf-card-heading-size","--sf-card-media-radius","--sf-card-media-ratio","--sf-card-padding","--sf-card-radius","--sf-card-radius-outer","--sf-card-shadow","--sf-card-shadow--elevated","--sf-card-shadow--hover","--sf-caret-color","--sf-center-gutter","--sf-center-max","--sf-cluster-align","--sf-cluster-gap","--sf-cluster-justify","--sf-code-font-size","--sf-color-action","--sf-color-action--active","--sf-color-action--hover","--sf-color-action-100","--sf-color-action-200","--sf-color-action-300","--sf-color-action-400","--sf-color-action-50","--sf-color-action-500","--sf-color-action-600","--sf-color-action-700","--sf-color-action-800","--sf-color-action-900","--sf-color-action-950","--sf-color-action-a10","--sf-color-action-a30","--sf-color-action-a5","--sf-color-action-a50","--sf-color-action-a80","--sf-color-action-darker","--sf-color-action-lighter","--sf-color-action-muted","--sf-color-action-source-dark","--sf-color-action-source-light","--sf-color-action-subtle","--sf-color-action-superdark","--sf-color-action-superlight","--sf-color-action-tint","--sf-color-action-xdark","--sf-color-action-xlight","--sf-color-base","--sf-color-base--active","--sf-color-base--hover","--sf-color-base-100","--sf-color-base-200","--sf-color-base-300","--sf-color-base-400","--sf-color-base-50","--sf-color-base-500","--sf-color-base-600","--sf-color-base-700","--sf-color-base-800","--sf-color-base-900","--sf-color-base-950","--sf-color-base-a10","--sf-color-base-a30","--sf-color-base-a5","--sf-color-base-a50","--sf-color-base-a80","--sf-color-base-muted","--sf-color-base-source-dark","--sf-color-base-source-light","--sf-color-base-subtle","--sf-color-base-tint","--sf-color-bg","--sf-color-bg--active","--sf-color-bg--disabled","--sf-color-bg--focus","--sf-color-bg--hover","--sf-color-bg--selected","--sf-color-black","--sf-color-border","--sf-color-border--disabled","--sf-color-border--focus","--sf-color-border--strong","--sf-color-border--subtle","--sf-color-border--translucent","--sf-color-code-bg","--sf-color-code-text","--sf-color-danger","--sf-color-danger-muted","--sf-color-danger-source-dark","--sf-color-danger-source-light","--sf-color-danger-strong","--sf-color-danger-subtle","--sf-color-danger-tint","--sf-color-dim","--sf-color-heading","--sf-color-info","--sf-color-info-muted","--sf-color-info-source-dark","--sf-color-info-source-light","--sf-color-info-strong","--sf-color-info-subtle","--sf-color-info-tint","--sf-color-inset","--sf-color-inverse","--sf-color-link","--sf-color-link--active","--sf-color-link--disabled","--sf-color-link--hover","--sf-color-link--underline","--sf-color-link--visited","--sf-color-mark-bg","--sf-color-mark-text","--sf-color-neutral","--sf-color-neutral--active","--sf-color-neutral--hover","--sf-color-neutral-100","--sf-color-neutral-200","--sf-color-neutral-300","--sf-color-neutral-400","--sf-color-neutral-50","--sf-color-neutral-500","--sf-color-neutral-600","--sf-color-neutral-700","--sf-color-neutral-800","--sf-color-neutral-900","--sf-color-neutral-950","--sf-color-neutral-a10","--sf-color-neutral-a30","--sf-color-neutral-a5","--sf-color-neutral-a50","--sf-color-neutral-a80","--sf-color-neutral-darker","--sf-color-neutral-lighter","--sf-color-neutral-muted","--sf-color-neutral-source-dark","--sf-color-neutral-source-light","--sf-color-neutral-subtle","--sf-color-neutral-superdark","--sf-color-neutral-superlight","--sf-color-neutral-tint","--sf-color-neutral-xdark","--sf-color-neutral-xlight","--sf-color-overlay","--sf-color-primary","--sf-color-primary--active","--sf-color-primary--hover","--sf-color-primary-100","--sf-color-primary-200","--sf-color-primary-300","--sf-color-primary-400","--sf-color-primary-50","--sf-color-primary-500","--sf-color-primary-600","--sf-color-primary-700","--sf-color-primary-800","--sf-color-primary-900","--sf-color-primary-950","--sf-color-primary-a10","--sf-color-primary-a30","--sf-color-primary-a5","--sf-color-primary-a50","--sf-color-primary-a80","--sf-color-primary-darker","--sf-color-primary-lighter","--sf-color-primary-muted","--sf-color-primary-source-dark","--sf-color-primary-source-light","--sf-color-primary-subtle","--sf-color-primary-superdark","--sf-color-primary-superlight","--sf-color-primary-tint","--sf-color-primary-xdark","--sf-color-primary-xlight","--sf-color-raised","--sf-color-scheme","--sf-color-secondary","--sf-color-secondary--active","--sf-color-secondary--hover","--sf-color-secondary-100","--sf-color-secondary-200","--sf-color-secondary-300","--sf-color-secondary-400","--sf-color-secondary-50","--sf-color-secondary-500","--sf-color-secondary-600","--sf-color-secondary-700","--sf-color-secondary-800","--sf-color-secondary-900","--sf-color-secondary-950","--sf-color-secondary-a10","--sf-color-secondary-a30","--sf-color-secondary-a5","--sf-color-secondary-a50","--sf-color-secondary-a80","--sf-color-secondary-darker","--sf-color-secondary-lighter","--sf-color-secondary-muted","--sf-color-secondary-source-dark","--sf-color-secondary-source-light","--sf-color-secondary-subtle","--sf-color-secondary-superdark","--sf-color-secondary-superlight","--sf-color-secondary-tint","--sf-color-secondary-xdark","--sf-color-secondary-xlight","--sf-color-selection-bg","--sf-color-selection-bg--alt","--sf-color-selection-text","--sf-color-selection-text--alt","--sf-color-success","--sf-color-success-muted","--sf-color-success-source-dark","--sf-color-success-source-light","--sf-color-success-strong","--sf-color-success-subtle","--sf-color-success-tint","--sf-color-surface","--sf-color-tertiary","--sf-color-tertiary--active","--sf-color-tertiary--hover","--sf-color-tertiary-100","--sf-color-tertiary-200","--sf-color-tertiary-300","--sf-color-tertiary-400","--sf-color-tertiary-50","--sf-color-tertiary-500","--sf-color-tertiary-600","--sf-color-tertiary-700","--sf-color-tertiary-800","--sf-color-tertiary-900","--sf-color-tertiary-950","--sf-color-tertiary-a10","--sf-color-tertiary-a30","--sf-color-tertiary-a5","--sf-color-tertiary-a50","--sf-color-tertiary-a80","--sf-color-tertiary-darker","--sf-color-tertiary-lighter","--sf-color-tertiary-muted","--sf-color-tertiary-source-dark","--sf-color-tertiary-source-light","--sf-color-tertiary-subtle","--sf-color-tertiary-superdark","--sf-color-tertiary-superlight","--sf-color-tertiary-tint","--sf-color-tertiary-xdark","--sf-color-tertiary-xlight","--sf-color-text","--sf-color-text--disabled","--sf-color-text--inverse","--sf-color-text--muted","--sf-color-text--on-action","--sf-color-text--on-base","--sf-color-text--on-danger","--sf-color-text--on-info","--sf-color-text--on-inverse","--sf-color-text--on-neutral","--sf-color-text--on-primary","--sf-color-text--on-secondary","--sf-color-text--on-success","--sf-color-text--on-tertiary","--sf-color-text--on-warning","--sf-color-text--placeholder","--sf-color-text--secondary","--sf-color-warning","--sf-color-warning-muted","--sf-color-warning-source-dark","--sf-color-warning-source-light","--sf-color-warning-strong","--sf-color-warning-subtle","--sf-color-warning-tint","--sf-color-white","--sf-component-pad","--sf-container-default","--sf-container-full","--sf-container-narrow","--sf-container-prose","--sf-container-wide","--sf-content-gap","--sf-content-intrinsic-size","--sf-content-width","--sf-contrast-bias","--sf-contrast-threshold","--sf-corner-scoop-at","--sf-corner-scoop-size","--sf-cover-min-height","--sf-cover-padding","--sf-current-font-weight","--sf-display-l-line-height","--sf-display-m-line-height","--sf-display-s-line-height","--sf-divider-color","--sf-divider-gap","--sf-divider-style","--sf-divider-width","--sf-drop-shadow-l","--sf-drop-shadow-m","--sf-drop-shadow-s","--sf-drop-shadow-xl","--sf-drop-shadow-xs","--sf-duration-fast","--sf-duration-instant","--sf-duration-none","--sf-duration-normal","--sf-duration-slow","--sf-duration-slower","--sf-ease-bounce","--sf-ease-elastic","--sf-ease-in","--sf-ease-in-out","--sf-ease-linear","--sf-ease-out","--sf-ease-overshoot","--sf-ease-spring","--sf-equal-gap","--sf-equal-min-col","--sf-equal-rule-color","--sf-equal-rule-style","--sf-equal-rule-width","--sf-field-block","--sf-field-padding-block","--sf-field-padding-inline","--sf-field-radius","--sf-field-required-marker","--sf-flow-space","--sf-fluid-max-vw","--sf-fluid-min-vw","--sf-fluid-width","--sf-focus-ring-color","--sf-focus-ring-offset","--sf-focus-ring-shadow","--sf-focus-ring-style","--sf-focus-ring-width","--sf-font-body","--sf-font-display","--sf-font-features","--sf-font-geometric","--sf-font-heading","--sf-font-humanist","--sf-font-mono","--sf-font-numeric","--sf-font-slab","--sf-font-variation","--sf-font-weight-body","--sf-font-weight-bold","--sf-font-weight-display","--sf-font-weight-heading","--sf-font-weight-interactive","--sf-font-weight-light","--sf-font-weight-medium","--sf-font-weight-normal","--sf-font-weight-semibold","--sf-font-weight-strong","--sf-frame-ratio","--sf-gap","--sf-gradient-action","--sf-gradient-brand","--sf-gradient-fade--b","--sf-gradient-fade--l","--sf-gradient-fade--r","--sf-gradient-fade--t","--sf-gradient-primary","--sf-gradient-secondary","--sf-gradient-surface","--sf-gradient-tertiary","--sf-grid-gap","--sf-grid-min","--sf-grid-min-2xl","--sf-grid-min-l","--sf-grid-min-m","--sf-grid-min-s","--sf-grid-min-xl","--sf-grid-min-xs","--sf-gutter","--sf-h1-font-weight","--sf-h1-letter-spacing","--sf-h1-line-height","--sf-h1-max-width","--sf-h1-size","--sf-h2-font-weight","--sf-h2-letter-spacing","--sf-h2-line-height","--sf-h2-max-width","--sf-h2-size","--sf-h3-font-weight","--sf-h3-letter-spacing","--sf-h3-line-height","--sf-h3-max-width","--sf-h3-size","--sf-h4-font-weight","--sf-h4-letter-spacing","--sf-h4-line-height","--sf-h4-max-width","--sf-h4-size","--sf-h5-font-weight","--sf-h5-letter-spacing","--sf-h5-line-height","--sf-h5-max-width","--sf-h5-size","--sf-h6-font-weight","--sf-h6-letter-spacing","--sf-h6-line-height","--sf-h6-max-width","--sf-h6-size","--sf-header-height","--sf-header-height-desktop","--sf-header-height-mobile","--sf-heading-color","--sf-heading-font-family","--sf-heading-text-wrap","--sf-icon-2xl","--sf-icon-box-bg","--sf-icon-box-border","--sf-icon-box-pad","--sf-icon-box-radius","--sf-icon-l","--sf-icon-m","--sf-icon-s","--sf-icon-xl","--sf-icon-xs","--sf-imposter-margin","--sf-is-active","--sf-is-current","--sf-is-dark","--sf-is-open","--sf-is-pressed","--sf-leading-normal","--sf-leading-relaxed","--sf-leading-snug","--sf-leading-taper","--sf-leading-tight","--sf-line-clamp","--sf-link-external-label","--sf-link-external-marker","--sf-link-underline-offset","--sf-link-underline-thickness","--sf-lumlocker","--sf-mask-scrim-end","--sf-mask-scrim-start","--sf-media-radius","--sf-motion-scale","--sf-object-fit","--sf-object-position","--sf-opacity-disabled","--sf-opacity-muted","--sf-optical-sizing","--sf-overlap-pull","--sf-palette-mix-100","--sf-palette-mix-200","--sf-palette-mix-300","--sf-palette-mix-400","--sf-palette-mix-50","--sf-palette-mix-600","--sf-palette-mix-700","--sf-palette-mix-800","--sf-palette-mix-900","--sf-palette-mix-950","--sf-print-base-size","--sf-print-page-margin","--sf-print-page-size","--sf-prose-block-margin","--sf-prose-blockquote-border","--sf-prose-blockquote-padding","--sf-prose-figcaption-size","--sf-prose-figure-margin","--sf-prose-heading-gap","--sf-prose-hr-margin","--sf-prose-list-gap","--sf-prose-marker-color","--sf-prose-media-margin","--sf-prose-media-radius","--sf-prose-nested-list-gap","--sf-prose-paragraph","--sf-prose-table-pad","--sf-radius-2xl","--sf-radius-2xs","--sf-radius-3xl","--sf-radius-4xl","--sf-radius-full","--sf-radius-l","--sf-radius-m","--sf-radius-none","--sf-radius-outer","--sf-radius-pill","--sf-radius-s","--sf-radius-scale","--sf-radius-xl","--sf-radius-xs","--sf-ratio-3-2","--sf-ratio-4-3","--sf-ratio-cinema","--sf-ratio-golden","--sf-ratio-portrait","--sf-ratio-square","--sf-ratio-video","--sf-reel-gap","--sf-reel-height","--sf-reel-item-width","--sf-safe-bottom","--sf-safe-left","--sf-safe-right","--sf-safe-top","--sf-scrim-color","--sf-scrim-direction","--sf-scrim-gradient","--sf-scrim-text-shadow","--sf-scroll-shadow-size","--sf-scroll-timeline-range-end","--sf-scroll-timeline-range-exit-end","--sf-scroll-timeline-range-exit-start","--sf-scroll-timeline-range-start","--sf-scrollbar-thumb","--sf-scrollbar-track","--sf-section-pad","--sf-section-pad--2xl","--sf-section-pad--l","--sf-section-pad--m","--sf-section-pad--s","--sf-section-pad--xl","--sf-section-pad--xs","--sf-section-scale","--sf-shadow-2xl","--sf-shadow-color","--sf-shadow-glow","--sf-shadow-glow-color","--sf-shadow-inner","--sf-shadow-l","--sf-shadow-lightness","--sf-shadow-m","--sf-shadow-none","--sf-shadow-s","--sf-shadow-strength","--sf-shadow-xl","--sf-shadow-xs","--sf-sidebar-gap","--sf-sidebar-min-width","--sf-sidebar-width","--sf-size-l","--sf-size-m","--sf-size-s","--sf-size-xl","--sf-size-xs","--sf-space-2xl","--sf-space-2xs","--sf-space-3xl","--sf-space-4xl","--sf-space-base-max","--sf-space-base-min","--sf-space-l","--sf-space-m","--sf-space-none","--sf-space-px","--sf-space-ratio-max","--sf-space-ratio-min","--sf-space-s","--sf-space-scale","--sf-space-xl","--sf-space-xs","--sf-stack-gap","--sf-state-pending-opacity","--sf-sticky-offset","--sf-sticky-offset-desktop","--sf-sticky-offset-mobile","--sf-surface-bg-animation","--sf-surface-bg-attachment","--sf-surface-bg-color","--sf-surface-bg-image","--sf-surface-bg-overlay","--sf-surface-bg-position","--sf-surface-bg-repeat","--sf-surface-bg-size","--sf-surface-color","--sf-switcher-gap","--sf-switcher-threshold","--sf-text-2xl","--sf-text-2xl-font-weight","--sf-text-2xl-letter-spacing","--sf-text-2xl-line-height","--sf-text-2xl-max-width","--sf-text-2xs","--sf-text-2xs-font-weight","--sf-text-2xs-letter-spacing","--sf-text-2xs-line-height","--sf-text-2xs-max-width","--sf-text-3xl","--sf-text-3xl-font-weight","--sf-text-3xl-letter-spacing","--sf-text-3xl-line-height","--sf-text-3xl-max-width","--sf-text-4xl","--sf-text-4xl-font-weight","--sf-text-4xl-letter-spacing","--sf-text-4xl-line-height","--sf-text-4xl-max-width","--sf-text-base-max","--sf-text-base-min","--sf-text-display-base-max","--sf-text-display-base-min","--sf-text-display-l","--sf-text-display-m","--sf-text-display-s","--sf-text-display-scale","--sf-text-l","--sf-text-l-font-weight","--sf-text-l-letter-spacing","--sf-text-l-line-height","--sf-text-l-max-width","--sf-text-m","--sf-text-m-font-weight","--sf-text-m-letter-spacing","--sf-text-m-line-height","--sf-text-m-max-width","--sf-text-ratio-max","--sf-text-ratio-min","--sf-text-s","--sf-text-s-font-weight","--sf-text-s-letter-spacing","--sf-text-s-line-height","--sf-text-s-max-width","--sf-text-scale","--sf-text-shadow-l","--sf-text-shadow-m","--sf-text-shadow-none","--sf-text-shadow-s","--sf-text-shadow-xl","--sf-text-shadow-xs","--sf-text-xl","--sf-text-xl-font-weight","--sf-text-xl-letter-spacing","--sf-text-xl-line-height","--sf-text-xl-max-width","--sf-text-xs","--sf-text-xs-font-weight","--sf-text-xs-letter-spacing","--sf-text-xs-line-height","--sf-text-xs-max-width","--sf-theme-transition-duration","--sf-touch-target","--sf-tracking-normal","--sf-tracking-tight","--sf-tracking-wide","--sf-tracking-wider","--sf-tracking-widest","--sf-transition-colors","--sf-transition-enter","--sf-transition-exit","--sf-transition-fast","--sf-transition-form-field","--sf-transition-opacity","--sf-transition-overlay","--sf-transition-shadow","--sf-transition-slow","--sf-transition-transform","--sf-z-base","--sf-z-below","--sf-z-dropdown","--sf-z-fixed","--sf-z-modal","--sf-z-overlay","--sf-z-raised","--sf-z-sticky","--sf-z-toast","--sf-z-tooltip"];
       document.getElementById('tok-count').textContent = TOKENS.length;
       var grid = document.getElementById('tok-grid');
       var filter = document.getElementById('token-filter');
diff --git a/docs/token-annotations.json b/docs/token-annotations.json
index b26d25ba4..e5909a11e 100644
--- a/docs/token-annotations.json
+++ b/docs/token-annotations.json
@@ -726,8 +726,8 @@
     "--sf-field-padding-inline": "Horizontal (inline) inner padding for form field inputs. Reserved for a future .sf-field class — declared but not yet consumed by any shipped rule.",
     "--sf-field-radius": "Border radius for form field inputs. Defaults to --sf-radius-m; override to reshape all inputs at once. Reserved for a future .sf-field class — declared but not yet consumed by any shipped rule.",
     "--sf-btn-radius": "Corner radius for .sf-btn. Defaults to --sf-radius-m; gives buttons a distinct radius from form fields without touching global tokens.",
-    "--sf-btn-padding-block": "Vertical (block) padding inside .sf-btn.",
-    "--sf-btn-padding-inline": "Horizontal (inline) padding inside .sf-btn.",
+    "--sf-btn-padding-block": "Flatten-all vertical (block) padding for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-padding-block.",
+    "--sf-btn-padding-inline": "Flatten-all horizontal (inline) padding for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-padding-inline.",
     "--sf-btn-gap": "Gap between an icon and the label inside .sf-btn.",
     "--sf-btn-font-size": "Flatten-all label font-size for .sf-btn — once set it overrides every size (--xs/--s/--l/--xl) to the same value. For proportional sizing use --sf-btn-font-scale; to retune a single rung use --sf-btn-{size}-font-size.",
     "--sf-btn-font-scale": "Uniform label-size multiplier for .sf-btn — scales every size's font-size by one factor while keeping the xs…xl ladder intact. The everyday 'bigger/smaller button text' knob.",
@@ -736,8 +736,23 @@
     "--sf-btn-m-font-size": "Label font-size for the default (medium) button (.sf-btn). Unset, falls through to --sf-text-m; set to retune this rung without touching the others.",
     "--sf-btn-l-font-size": "Label font-size for the large button (.sf-btn--l). Unset, falls through to --sf-text-l; set to retune this rung without touching the others.",
     "--sf-btn-xl-font-size": "Label font-size for the extra-large button (.sf-btn--xl). Unset, falls through to --sf-text-xl; set to retune this rung without touching the others.",
+    "--sf-btn-xs-padding-block": "Vertical (block) padding for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+    "--sf-btn-s-padding-block": "Vertical (block) padding for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+    "--sf-btn-m-padding-block": "Vertical (block) padding for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+    "--sf-btn-l-padding-block": "Vertical (block) padding for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+    "--sf-btn-xl-padding-block": "Vertical (block) padding for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+    "--sf-btn-xs-padding-inline": "Horizontal (inline) padding for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+    "--sf-btn-s-padding-inline": "Horizontal (inline) padding for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+    "--sf-btn-m-padding-inline": "Horizontal (inline) padding for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+    "--sf-btn-l-padding-inline": "Horizontal (inline) padding for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+    "--sf-btn-xl-padding-inline": "Horizontal (inline) padding for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+    "--sf-btn-xs-min-height": "Minimum target height for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+    "--sf-btn-s-min-height": "Minimum target height for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+    "--sf-btn-m-min-height": "Minimum target height for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+    "--sf-btn-l-min-height": "Minimum target height for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone.",
+    "--sf-btn-xl-min-height": "Minimum target height for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone.",
     "--sf-btn-font-weight": "Label font-weight for .sf-btn. Defaults to the interactive weight.",
-    "--sf-btn-min-height": "Minimum target height for .sf-btn. Defaults to --sf-touch-target so buttons meet the WCAG 2.2 target-size minimum.",
+    "--sf-btn-min-height": "Flatten-all minimum target height for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-min-height.",
     "--sf-btn-border-width": "Border thickness for .sf-btn (used by all fill, outline, and secondary treatments).",
     "--sf-card-padding": "Inner padding for .sf-card. Also feeds the concentric-radius math (outer = inner radius + padding).",
     "--sf-card-gap": "Divider spacing for .sf-card__header / __footer (padding + margin around the rule).",
diff --git a/docs/token-index.json b/docs/token-index.json
index 94cb28f09..f947a9063 100644
--- a/docs/token-index.json
+++ b/docs/token-index.json
@@ -8,14 +8,14 @@
       "optional/tokens.components.css"
     ],
     "counts": {
-      "tokens": 741,
+      "tokens": 756,
       "by_tier": {
-        "PUBLIC": 685,
-        "PUBLIC-ADVANCED": 55,
+        "PUBLIC": 696,
+        "PUBLIC-ADVANCED": 59,
         "INTERNAL": 1
       },
       "by_role": {
-        "knob": 250,
+        "knob": 265,
         "consumption": 491
       }
     }
@@ -510,7 +510,7 @@
       "value": "1"
     },
     "--sf-btn-font-size": {
-      "tier": "PUBLIC",
+      "tier": "PUBLIC-ADVANCED",
       "role": "knob",
       "files": [
         "optional/tokens.components.css"
@@ -541,6 +541,30 @@
       ],
       "value": "initial"
     },
+    "--sf-btn-l-min-height": {
+      "tier": "PUBLIC",
+      "role": "knob",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "initial"
+    },
+    "--sf-btn-l-padding-block": {
+      "tier": "PUBLIC",
+      "role": "knob",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "initial"
+    },
+    "--sf-btn-l-padding-inline": {
+      "tier": "PUBLIC",
+      "role": "knob",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "initial"
+    },
     "--sf-btn-m-font-size": {
       "tier": "PUBLIC",
       "role": "knob",
@@ -549,7 +573,7 @@
       ],
       "value": "initial"
     },
-    "--sf-btn-min-height": {
+    "--sf-btn-m-min-height": {
       "tier": "PUBLIC",
       "role": "knob",
       "files": [
@@ -557,7 +581,7 @@
       ],
       "value": "initial"
     },
-    "--sf-btn-padding-block": {
+    "--sf-btn-m-padding-block": {
       "tier": "PUBLIC",
       "role": "knob",
       "files": [
@@ -565,7 +589,7 @@
       ],
       "value": "initial"
     },
-    "--sf-btn-padding-inline": {
+    "--sf-btn-m-padding-inline": {
       "tier": "PUBLIC",
       "role": "knob",
       "files": [
@@ -573,6 +597,30 @@
       ],
       "value": "initial"
     },
+    "--sf-btn-min-height": {
+      "tier": "PUBLIC-ADVANCED",
+      "role": "knob",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "initial"
+    },
+    "--sf-btn-padding-block": {
+      "tier": "PUBLIC-ADVANCED",
+      "role": "knob",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "initial"
+    },
+    "--sf-btn-padding-inline": {
+      "tier": "PUBLIC-ADVANCED",
+      "role": "knob",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "initial"
+    },
     "--sf-btn-radius": {
       "tier": "PUBLIC",
       "role": "consumption",
@@ -589,6 +637,30 @@
       ],
       "value": "initial"
     },
+    "--sf-btn-s-min-height": {
+      "tier": "PUBLIC",
+      "role": "knob",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "initial"
+    },
+    "--sf-btn-s-padding-block": {
+      "tier": "PUBLIC",
+      "role": "knob",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "initial"
+    },
+    "--sf-btn-s-padding-inline": {
+      "tier": "PUBLIC",
+      "role": "knob",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "initial"
+    },
     "--sf-btn-xl-font-size": {
       "tier": "PUBLIC",
       "role": "knob",
@@ -597,6 +669,30 @@
       ],
       "value": "initial"
     },
+    "--sf-btn-xl-min-height": {
+      "tier": "PUBLIC",
+      "role": "knob",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "initial"
+    },
+    "--sf-btn-xl-padding-block": {
+      "tier": "PUBLIC",
+      "role": "knob",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "initial"
+    },
+    "--sf-btn-xl-padding-inline": {
+      "tier": "PUBLIC",
+      "role": "knob",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "initial"
+    },
     "--sf-btn-xs-font-size": {
       "tier": "PUBLIC",
       "role": "knob",
@@ -605,6 +701,30 @@
       ],
       "value": "initial"
     },
+    "--sf-btn-xs-min-height": {
+      "tier": "PUBLIC",
+      "role": "knob",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "initial"
+    },
+    "--sf-btn-xs-padding-block": {
+      "tier": "PUBLIC",
+      "role": "knob",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "initial"
+    },
+    "--sf-btn-xs-padding-inline": {
+      "tier": "PUBLIC",
+      "role": "knob",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "initial"
+    },
     "--sf-card-avatar-size": {
       "tier": "PUBLIC",
       "role": "knob",
diff --git a/docs/token-index.md b/docs/token-index.md
index 32fe29b29..ecf078f5a 100644
--- a/docs/token-index.md
+++ b/docs/token-index.md
@@ -8,12 +8,12 @@ A cross-reference of every `--sf-*` custom property by **source file** and
 for the flat name list see [registry.json](registry.json); for the tier
 contract and naming rules see [architecture.md](architecture.md).
 
-**741 tokens** (deduplicated by name across the 4 token source files).
+**756 tokens** (deduplicated by name across the 4 token source files).
 
 | Tier | Count | Meaning |
 |---|---|---|
-| PUBLIC | 685 | Everyday knobs. SemVer-stable. |
-| PUBLIC-ADVANCED | 55 | Same SemVer guarantee; niche/powerful. |
+| PUBLIC | 696 | Everyday knobs. SemVer-stable. |
+| PUBLIC-ADVANCED | 59 | Same SemVer guarantee; niche/powerful. |
 | INTERNAL | 1 | Implementation detail; may change without a major bump. |
 
 Every token also carries a **role** — an orthogonal, SemVer-neutral hint about
@@ -22,7 +22,7 @@ declared value (a value that references `var(--sf-…)` is a derived output):
 
 | Role | Count | Meaning |
 |---|---|---|
-| knob | 250 | Input you **set** to configure the system (a literal primitive: length, number, colour literal, keyword, font stack, easing curve …). |
+| knob | 265 | Input you **set** to configure the system (a literal primitive: length, number, colour literal, keyword, font stack, easing curve …). |
 | consumption | 491 | Ready-to-use output you **read**; derived from other tokens via `var(--sf-…)` (incl. `light-dark()`/`oklch(from …)`/`color-mix()`). |
 
 ## INTERNAL tokens
@@ -31,6 +31,10 @@ declared value (a value that references `var(--sf-…)` is a derived output):
 
 ## PUBLIC-ADVANCED tokens
 
+- `--sf-btn-font-size`
+- `--sf-btn-min-height`
+- `--sf-btn-padding-block`
+- `--sf-btn-padding-inline`
 - `--sf-contrast-bias`
 - `--sf-contrast-threshold`
 - `--sf-fluid-max-vw`
@@ -152,18 +156,33 @@ declared value (a value that references `var(--sf-…)` is a derived output):
 | `--sf-breakout-width` | PUBLIC | consumption | Layout | `var(--sf-container-wide)` |
 | `--sf-btn-border-width` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-border-width-1)` |
 | `--sf-btn-font-scale` | PUBLIC | knob | Components (optional, incomplete) | `1` |
-| `--sf-btn-font-size` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-font-size` | PUBLIC-ADVANCED | knob | Components (optional, incomplete) | `initial` |
 | `--sf-btn-font-weight` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-font-weight-interactive)` |
 | `--sf-btn-gap` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-space-2xs)` |
 | `--sf-btn-l-font-size` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-l-min-height` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-l-padding-block` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-l-padding-inline` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
 | `--sf-btn-m-font-size` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
-| `--sf-btn-min-height` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
-| `--sf-btn-padding-block` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
-| `--sf-btn-padding-inline` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-m-min-height` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-m-padding-block` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-m-padding-inline` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-min-height` | PUBLIC-ADVANCED | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-padding-block` | PUBLIC-ADVANCED | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-padding-inline` | PUBLIC-ADVANCED | knob | Components (optional, incomplete) | `initial` |
 | `--sf-btn-radius` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-radius-m)` |
 | `--sf-btn-s-font-size` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-s-min-height` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-s-padding-block` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-s-padding-inline` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
 | `--sf-btn-xl-font-size` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-xl-min-height` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-xl-padding-block` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-xl-padding-inline` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
 | `--sf-btn-xs-font-size` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-xs-min-height` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-xs-padding-block` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
+| `--sf-btn-xs-padding-inline` | PUBLIC | knob | Components (optional, incomplete) | `initial` |
 | `--sf-card-avatar-size` | PUBLIC | knob | Components (optional, incomplete) | `2.5rem` |
 | `--sf-card-bg` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-color-surface)` |
 | `--sf-card-border-color` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-color-border)` |
diff --git a/docs/tokens.md b/docs/tokens.md
index 6cd97a7b9..fb4fe843d 100644
--- a/docs/tokens.md
+++ b/docs/tokens.md
@@ -3,7 +3,7 @@
 > **Generated** from source by `scripts/gen-token-reference.js` —
 > run `npm run docs:tokens` to refresh. Do not edit by hand.
 
-**741 tokens.** Every `--sf-*` custom property and its default value, grouped by source file.
+**756 tokens.** Every `--sf-*` custom property and its default value, grouped by source file.
 If a token is defined in multiple files, it is listed once per section — so this
 count can be higher than `docs/registry.json` (which deduplicates by name). See
 [architecture.md](architecture.md) for the PUBLIC / PUBLIC-ADVANCED / INTERNAL
@@ -743,7 +743,7 @@ rebrand workflow.
 
 ## Component tokens (`optional/tokens.components.css`)
 
-32 tokens.
+47 tokens.
 
 | Token | Default |
 |---|---|
@@ -753,14 +753,29 @@ rebrand workflow.
 | `--sf-btn-font-weight` | `var(--sf-font-weight-interactive)` |
 | `--sf-btn-gap` | `var(--sf-space-2xs)` |
 | `--sf-btn-l-font-size` | `initial` |
+| `--sf-btn-l-min-height` | `initial` |
+| `--sf-btn-l-padding-block` | `initial` |
+| `--sf-btn-l-padding-inline` | `initial` |
 | `--sf-btn-m-font-size` | `initial` |
+| `--sf-btn-m-min-height` | `initial` |
+| `--sf-btn-m-padding-block` | `initial` |
+| `--sf-btn-m-padding-inline` | `initial` |
 | `--sf-btn-min-height` | `initial` |
 | `--sf-btn-padding-block` | `initial` |
 | `--sf-btn-padding-inline` | `initial` |
 | `--sf-btn-radius` | `var(--sf-radius-m)` |
 | `--sf-btn-s-font-size` | `initial` |
+| `--sf-btn-s-min-height` | `initial` |
+| `--sf-btn-s-padding-block` | `initial` |
+| `--sf-btn-s-padding-inline` | `initial` |
 | `--sf-btn-xl-font-size` | `initial` |
+| `--sf-btn-xl-min-height` | `initial` |
+| `--sf-btn-xl-padding-block` | `initial` |
+| `--sf-btn-xl-padding-inline` | `initial` |
 | `--sf-btn-xs-font-size` | `initial` |
+| `--sf-btn-xs-min-height` | `initial` |
+| `--sf-btn-xs-padding-block` | `initial` |
+| `--sf-btn-xs-padding-inline` | `initial` |
 | `--sf-card-avatar-size` | `2.5rem` |
 | `--sf-card-bg` | `var(--sf-color-surface)` |
 | `--sf-card-border-color` | `var(--sf-color-border)` |
diff --git a/optional/components.css b/optional/components.css
index b8d6ce066..b042343f2 100644
--- a/optional/components.css
+++ b/optional/components.css
@@ -62,14 +62,15 @@
        (--sf-btn-font-size, --sf-btn-padding-block/-inline, --sf-btn-min-height)
        is read FIRST in its property below, so a :root override of the knob
        wins on every size, while an unset knob falls through to the size tier.
-       For font-size the tier's first arg is the per-size knob
-       --sf-btn-{size}-font-size (initial → falls through to --sf-text-{size}),
-       and the whole resolved value is then multiplied by --sf-btn-font-scale
-       in the property below. */
+       Each tier's first arg is the matching per-size knob
+       --sf-btn-{size}-{prop} (initial → falls through to that rung's own scale
+       default), so a :root override retunes one rung; for font-size the whole
+       resolved value is then multiplied by --sf-btn-font-scale in the property
+       below. */
     --sf-btn-font-size--size:      var(--sf-btn-m-font-size, var(--sf-text-m));
-    --sf-btn-padding-block--size:  var(--sf-space-xs);
-    --sf-btn-padding-inline--size: var(--sf-space-m);
-    --sf-btn-min-height--size:     var(--sf-size-m);
+    --sf-btn-padding-block--size:  var(--sf-btn-m-padding-block, var(--sf-space-xs));
+    --sf-btn-padding-inline--size: var(--sf-btn-m-padding-inline, var(--sf-space-m));
+    --sf-btn-min-height--size:     var(--sf-btn-m-min-height, var(--sf-size-m));
 
     display:          inline-flex;
     align-items:      center;
@@ -320,28 +321,28 @@
      the size scale stays visible on phones/tablets instead of every rung
      collapsing to 44px. The AAA opt-in above restores the floor when wanted. */
   .sf-btn--xs {
-    --sf-btn-padding-block--size:  0.125rem;
-    --sf-btn-padding-inline--size: var(--sf-space-xs);
+    --sf-btn-padding-block--size:  var(--sf-btn-xs-padding-block, 0.125rem);
+    --sf-btn-padding-inline--size: var(--sf-btn-xs-padding-inline, var(--sf-space-xs));
     --sf-btn-font-size--size:      var(--sf-btn-xs-font-size, var(--sf-text-xs));
-    --sf-btn-min-height--size:     var(--sf-size-xs);
+    --sf-btn-min-height--size:     var(--sf-btn-xs-min-height, var(--sf-size-xs));
   }
   .sf-btn--s {
-    --sf-btn-padding-block--size:  var(--sf-space-2xs);
-    --sf-btn-padding-inline--size: var(--sf-space-s);
+    --sf-btn-padding-block--size:  var(--sf-btn-s-padding-block, var(--sf-space-2xs));
+    --sf-btn-padding-inline--size: var(--sf-btn-s-padding-inline, var(--sf-space-s));
     --sf-btn-font-size--size:      var(--sf-btn-s-font-size, var(--sf-text-s));
-    --sf-btn-min-height--size:     var(--sf-size-s);
+    --sf-btn-min-height--size:     var(--sf-btn-s-min-height, var(--sf-size-s));
   }
   .sf-btn--l {
-    --sf-btn-padding-block--size:  var(--sf-space-s);
-    --sf-btn-padding-inline--size: var(--sf-space-l);
+    --sf-btn-padding-block--size:  var(--sf-btn-l-padding-block, var(--sf-space-s));
+    --sf-btn-padding-inline--size: var(--sf-btn-l-padding-inline, var(--sf-space-l));
     --sf-btn-font-size--size:      var(--sf-btn-l-font-size, var(--sf-text-l));
-    --sf-btn-min-height--size:     var(--sf-size-l);
+    --sf-btn-min-height--size:     var(--sf-btn-l-min-height, var(--sf-size-l));
   }
   .sf-btn--xl {
-    --sf-btn-padding-block--size:  var(--sf-space-m);
-    --sf-btn-padding-inline--size: var(--sf-space-xl);
+    --sf-btn-padding-block--size:  var(--sf-btn-xl-padding-block, var(--sf-space-m));
+    --sf-btn-padding-inline--size: var(--sf-btn-xl-padding-inline, var(--sf-space-xl));
     --sf-btn-font-size--size:      var(--sf-btn-xl-font-size, var(--sf-text-xl));
-    --sf-btn-min-height--size:     var(--sf-size-xl);
+    --sf-btn-min-height--size:     var(--sf-btn-xl-min-height, var(--sf-size-xl));
   }
 
   /* --- States --- */
diff --git a/optional/tokens.components.css b/optional/tokens.components.css
index 0d4c80709..b767fef9c 100644
--- a/optional/tokens.components.css
+++ b/optional/tokens.components.css
@@ -88,20 +88,36 @@
     --sf-btn-min-height:     initial;
 
     /*
-     * Per-size label font-size knobs — one PUBLIC knob per size rung, the
-     * button counterpart of the per-heading --sf-hN-size knobs. Each is
-     * `initial` so, unset, that rung falls through to its scale default
-     * (--sf-text-{size}); set one on :root to pin a SINGLE rung's label size
-     * without disturbing the others — unlike the flatten-all --sf-btn-font-size
-     * above, or the proportional --sf-btn-font-scale. Consumed per
-     * .sf-btn--{size} in optional/components.css as the first arg of the
-     * --sf-btn-font-size--size tier token.
+     * Per-size knobs — one PUBLIC knob per size rung for each sizing property
+     * (label font-size, block/inline padding, min-height): the button
+     * counterpart of the per-heading typography knobs. Each is `initial` so,
+     * unset, that rung falls through to its own scale default (--sf-text-{size},
+     * --sf-space-*, --sf-size-{size}); set one on :root to retune a SINGLE
+     * rung's property without disturbing the others — unlike the flatten-all
+     * --sf-btn-{prop} overrides above, or the proportional --sf-btn-font-scale.
+     * Consumed per .sf-btn--{size} in optional/components.css as the first arg
+     * of the matching --sf-btn-{prop}--size tier token.
      */
-    --sf-btn-xs-font-size:   initial;
-    --sf-btn-s-font-size:    initial;
-    --sf-btn-m-font-size:    initial;
-    --sf-btn-l-font-size:    initial;
-    --sf-btn-xl-font-size:   initial;
+    --sf-btn-xs-font-size:      initial;
+    --sf-btn-s-font-size:       initial;
+    --sf-btn-m-font-size:       initial;
+    --sf-btn-l-font-size:       initial;
+    --sf-btn-xl-font-size:      initial;
+    --sf-btn-xs-padding-block:  initial;
+    --sf-btn-s-padding-block:   initial;
+    --sf-btn-m-padding-block:   initial;
+    --sf-btn-l-padding-block:   initial;
+    --sf-btn-xl-padding-block:  initial;
+    --sf-btn-xs-padding-inline: initial;
+    --sf-btn-s-padding-inline:  initial;
+    --sf-btn-m-padding-inline:  initial;
+    --sf-btn-l-padding-inline:  initial;
+    --sf-btn-xl-padding-inline: initial;
+    --sf-btn-xs-min-height:     initial;
+    --sf-btn-s-min-height:      initial;
+    --sf-btn-m-min-height:      initial;
+    --sf-btn-l-min-height:      initial;
+    --sf-btn-xl-min-height:     initial;
     /*
      * Size modifiers (.sf-btn--xs/--s/--l/--xl) and the colour family
      * (--sf-btn-color / --sf-btn-color--hover / --sf-btn-on-color) are
diff --git a/reports/full-api-audit/results/tokens-report.json b/reports/full-api-audit/results/tokens-report.json
index df41beae8..791103eaf 100644
--- a/reports/full-api-audit/results/tokens-report.json
+++ b/reports/full-api-audit/results/tokens-report.json
@@ -1,10 +1,10 @@
 {
   "summary": {
-    "totalTokens": 741,
-    "rendered": 741,
+    "totalTokens": 756,
+    "rendered": 756,
     "consoleErrors": 0,
     "requestFailures": 0,
-    "empties": 33,
+    "empties": 48,
     "demoShownMismatch": 0,
     "literalDefaultMismatch": 2,
     "aliasMismatch": 0,
@@ -869,6 +869,51 @@
       "darkComputed": "",
       "changedInDark": false
     },
+    {
+      "name": "--sf-btn-l-min-height",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "category": "Component tokens",
+      "declared": "initial",
+      "aliasOf": null,
+      "issues": [
+        "EMPTY_COMPUTED"
+      ],
+      "computed": "",
+      "shown": "(empty)",
+      "darkComputed": "",
+      "changedInDark": false
+    },
+    {
+      "name": "--sf-btn-l-padding-block",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "category": "Component tokens",
+      "declared": "initial",
+      "aliasOf": null,
+      "issues": [
+        "EMPTY_COMPUTED"
+      ],
+      "computed": "",
+      "shown": "(empty)",
+      "darkComputed": "",
+      "changedInDark": false
+    },
+    {
+      "name": "--sf-btn-l-padding-inline",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "category": "Component tokens",
+      "declared": "initial",
+      "aliasOf": null,
+      "issues": [
+        "EMPTY_COMPUTED"
+      ],
+      "computed": "",
+      "shown": "(empty)",
+      "darkComputed": "",
+      "changedInDark": false
+    },
     {
       "name": "--sf-btn-m-font-size",
       "tier": "PUBLIC",
@@ -884,6 +929,51 @@
       "darkComputed": "",
       "changedInDark": false
     },
+    {
+      "name": "--sf-btn-m-min-height",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "category": "Component tokens",
+      "declared": "initial",
+      "aliasOf": null,
+      "issues": [
+        "EMPTY_COMPUTED"
+      ],
+      "computed": "",
+      "shown": "(empty)",
+      "darkComputed": "",
+      "changedInDark": false
+    },
+    {
+      "name": "--sf-btn-m-padding-block",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "category": "Component tokens",
+      "declared": "initial",
+      "aliasOf": null,
+      "issues": [
+        "EMPTY_COMPUTED"
+      ],
+      "computed": "",
+      "shown": "(empty)",
+      "darkComputed": "",
+      "changedInDark": false
+    },
+    {
+      "name": "--sf-btn-m-padding-inline",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "category": "Component tokens",
+      "declared": "initial",
+      "aliasOf": null,
+      "issues": [
+        "EMPTY_COMPUTED"
+      ],
+      "computed": "",
+      "shown": "(empty)",
+      "darkComputed": "",
+      "changedInDark": false
+    },
     {
       "name": "--sf-btn-min-height",
       "tier": "PUBLIC",
@@ -959,6 +1049,51 @@
       "darkComputed": "",
       "changedInDark": false
     },
+    {
+      "name": "--sf-btn-s-min-height",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "category": "Component tokens",
+      "declared": "initial",
+      "aliasOf": null,
+      "issues": [
+        "EMPTY_COMPUTED"
+      ],
+      "computed": "",
+      "shown": "(empty)",
+      "darkComputed": "",
+      "changedInDark": false
+    },
+    {
+      "name": "--sf-btn-s-padding-block",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "category": "Component tokens",
+      "declared": "initial",
+      "aliasOf": null,
+      "issues": [
+        "EMPTY_COMPUTED"
+      ],
+      "computed": "",
+      "shown": "(empty)",
+      "darkComputed": "",
+      "changedInDark": false
+    },
+    {
+      "name": "--sf-btn-s-padding-inline",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "category": "Component tokens",
+      "declared": "initial",
+      "aliasOf": null,
+      "issues": [
+        "EMPTY_COMPUTED"
+      ],
+      "computed": "",
+      "shown": "(empty)",
+      "darkComputed": "",
+      "changedInDark": false
+    },
     {
       "name": "--sf-btn-xl-font-size",
       "tier": "PUBLIC",
@@ -974,6 +1109,51 @@
       "darkComputed": "",
       "changedInDark": false
     },
+    {
+      "name": "--sf-btn-xl-min-height",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "category": "Component tokens",
+      "declared": "initial",
+      "aliasOf": null,
+      "issues": [
+        "EMPTY_COMPUTED"
+      ],
+      "computed": "",
+      "shown": "(empty)",
+      "darkComputed": "",
+      "changedInDark": false
+    },
+    {
+      "name": "--sf-btn-xl-padding-block",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "category": "Component tokens",
+      "declared": "initial",
+      "aliasOf": null,
+      "issues": [
+        "EMPTY_COMPUTED"
+      ],
+      "computed": "",
+      "shown": "(empty)",
+      "darkComputed": "",
+      "changedInDark": false
+    },
+    {
+      "name": "--sf-btn-xl-padding-inline",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "category": "Component tokens",
+      "declared": "initial",
+      "aliasOf": null,
+      "issues": [
+        "EMPTY_COMPUTED"
+      ],
+      "computed": "",
+      "shown": "(empty)",
+      "darkComputed": "",
+      "changedInDark": false
+    },
     {
       "name": "--sf-btn-xs-font-size",
       "tier": "PUBLIC",
@@ -989,6 +1169,51 @@
       "darkComputed": "",
       "changedInDark": false
     },
+    {
+      "name": "--sf-btn-xs-min-height",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "category": "Component tokens",
+      "declared": "initial",
+      "aliasOf": null,
+      "issues": [
+        "EMPTY_COMPUTED"
+      ],
+      "computed": "",
+      "shown": "(empty)",
+      "darkComputed": "",
+      "changedInDark": false
+    },
+    {
+      "name": "--sf-btn-xs-padding-block",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "category": "Component tokens",
+      "declared": "initial",
+      "aliasOf": null,
+      "issues": [
+        "EMPTY_COMPUTED"
+      ],
+      "computed": "",
+      "shown": "(empty)",
+      "darkComputed": "",
+      "changedInDark": false
+    },
+    {
+      "name": "--sf-btn-xs-padding-inline",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "category": "Component tokens",
+      "declared": "initial",
+      "aliasOf": null,
+      "issues": [
+        "EMPTY_COMPUTED"
+      ],
+      "computed": "",
+      "shown": "(empty)",
+      "darkComputed": "",
+      "changedInDark": false
+    },
     {
       "name": "--sf-card-avatar-size",
       "tier": "PUBLIC",
diff --git a/scripts/token-tiers.js b/scripts/token-tiers.js
index 40b774480..0ff6e7971 100644
--- a/scripts/token-tiers.js
+++ b/scripts/token-tiers.js
@@ -56,6 +56,10 @@ const ADVANCED = new Set([
   '--sf-mask-scrim-start', '--sf-mask-scrim-end',
   '--sf-safe-top', '--sf-safe-bottom', '--sf-safe-left', '--sf-safe-right',
   '--sf-radius-outer',
+  // .sf-btn flatten-all overrides — niche/powerful: once set they collapse the
+  // whole --xs…xl size ladder to one value. Everyday sizing goes through the
+  // proportional --sf-btn-font-scale multiplier and the per-size knobs instead.
+  '--sf-btn-font-size', '--sf-btn-padding-block', '--sf-btn-padding-inline', '--sf-btn-min-height',
   '--sf-is-active', '--sf-is-current', '--sf-is-pressed', '--sf-is-open',
   '--sf-focus-ring-shadow',
   '--sf-print-page-margin', '--sf-print-page-size', '--sf-print-base-size',
diff --git a/tests/token-api.snapshot.json b/tests/token-api.snapshot.json
index 4766619ca..599fb8c72 100644
--- a/tests/token-api.snapshot.json
+++ b/tests/token-api.snapshot.json
@@ -64,14 +64,29 @@
   "--sf-btn-font-weight",
   "--sf-btn-gap",
   "--sf-btn-l-font-size",
+  "--sf-btn-l-min-height",
+  "--sf-btn-l-padding-block",
+  "--sf-btn-l-padding-inline",
   "--sf-btn-m-font-size",
+  "--sf-btn-m-min-height",
+  "--sf-btn-m-padding-block",
+  "--sf-btn-m-padding-inline",
   "--sf-btn-min-height",
   "--sf-btn-padding-block",
   "--sf-btn-padding-inline",
   "--sf-btn-radius",
   "--sf-btn-s-font-size",
+  "--sf-btn-s-min-height",
+  "--sf-btn-s-padding-block",
+  "--sf-btn-s-padding-inline",
   "--sf-btn-xl-font-size",
+  "--sf-btn-xl-min-height",
+  "--sf-btn-xl-padding-block",
+  "--sf-btn-xl-padding-inline",
   "--sf-btn-xs-font-size",
+  "--sf-btn-xs-min-height",
+  "--sf-btn-xs-padding-block",
+  "--sf-btn-xs-padding-inline",
   "--sf-card-avatar-size",
   "--sf-card-bg",
   "--sf-card-border-color",
diff --git a/tests/tokens.spec.js b/tests/tokens.spec.js
index fd3bed5eb..001666969 100644
--- a/tests/tokens.spec.js
+++ b/tests/tokens.spec.js
@@ -34,6 +34,21 @@ const EXPECTED_EMPTY = new Set([
   '--sf-btn-m-font-size',
   '--sf-btn-l-font-size',
   '--sf-btn-xl-font-size',
+  '--sf-btn-xs-padding-block',
+  '--sf-btn-s-padding-block',
+  '--sf-btn-m-padding-block',
+  '--sf-btn-l-padding-block',
+  '--sf-btn-xl-padding-block',
+  '--sf-btn-xs-padding-inline',
+  '--sf-btn-s-padding-inline',
+  '--sf-btn-m-padding-inline',
+  '--sf-btn-l-padding-inline',
+  '--sf-btn-xl-padding-inline',
+  '--sf-btn-xs-min-height',
+  '--sf-btn-s-min-height',
+  '--sf-btn-m-min-height',
+  '--sf-btn-l-min-height',
+  '--sf-btn-xl-min-height',
 ]);
 
 function declaredTokens() {
@@ -269,6 +284,11 @@ function measureButtonSizes() {
   const read = () => Object.fromEntries(
     Object.entries(els).map(([k, el]) => [k, parseFloat(getComputedStyle(el).fontSize)])
   );
+  // xs box metrics — padding-inline (LTR → paddingLeft) and min-block-size.
+  const xsBox = () => {
+    const cs = getComputedStyle(els.xs);
+    return { pi: parseFloat(cs.paddingLeft), mh: parseFloat(cs.minBlockSize || cs.minHeight) };
+  };
   const root = document.documentElement;
   const baseline = read();
   // Per-size knob: retune only the xs rung.
@@ -279,14 +299,21 @@ function measureButtonSizes() {
   root.style.setProperty('--sf-btn-font-scale', '2');
   const afterScale = read();
   root.style.removeProperty('--sf-btn-font-scale');
+  // Per-size padding + min-height knobs on the xs rung.
+  const boxBefore = xsBox();
+  root.style.setProperty('--sf-btn-xs-padding-inline', '5rem');
+  root.style.setProperty('--sf-btn-xs-min-height', '7rem');
+  const boxAfter = xsBox();
+  root.style.removeProperty('--sf-btn-xs-padding-inline');
+  root.style.removeProperty('--sf-btn-xs-min-height');
   for (const el of Object.values(els)) el.remove();
-  return { baseline, afterXs, afterScale };
+  return { baseline, afterXs, afterScale, boxBefore, boxAfter };
 }
 
 test('button per-size label knobs retune one rung; font-scale multiplies the ladder', async ({ browser }) => {
   const page = await browser.newPage();
   await page.goto(FIXTURE);
-  const { baseline, afterXs, afterScale } = await page.evaluate(measureButtonSizes);
+  const { baseline, afterXs, afterScale, boxBefore, boxAfter } = await page.evaluate(measureButtonSizes);
   await page.close();
 
   // Default ladder is strictly increasing: xs < s < m < l < xl.
@@ -306,4 +333,9 @@ test('button per-size label knobs retune one rung; font-scale multiplies the lad
   for (const k of ['xs', 's', 'm', 'l', 'xl']) {
     expect(afterScale[k] / baseline[k], `${k} ×scale`).toBeCloseTo(2, 2);
   }
+
+  // Per-size padding + min-height knobs retune the xs rung (5rem = 80px, 7rem = 112px).
+  expect(boxBefore.pi).not.toBeCloseTo(80, 0);
+  expect(boxAfter.pi).toBeCloseTo(80, 0);
+  expect(boxAfter.mh).toBeCloseTo(112, 0);
 });
diff --git a/token-registry.json b/token-registry.json
index 6ec88c2cf..c0f819975 100644
--- a/token-registry.json
+++ b/token-registry.json
@@ -1,7 +1,7 @@
 {
   "_meta": {
     "generatedBy": "scripts/gen-token-registry.js",
-    "nextId": 777
+    "nextId": 792
   },
   "tokens": [
     {
@@ -3147,6 +3147,66 @@
     {
       "id": 776,
       "name": "--sf-btn-xs-font-size"
+    },
+    {
+      "id": 777,
+      "name": "--sf-btn-l-min-height"
+    },
+    {
+      "id": 778,
+      "name": "--sf-btn-l-padding-block"
+    },
+    {
+      "id": 779,
+      "name": "--sf-btn-l-padding-inline"
+    },
+    {
+      "id": 780,
+      "name": "--sf-btn-m-min-height"
+    },
+    {
+      "id": 781,
+      "name": "--sf-btn-m-padding-block"
+    },
+    {
+      "id": 782,
+      "name": "--sf-btn-m-padding-inline"
+    },
+    {
+      "id": 783,
+      "name": "--sf-btn-s-min-height"
+    },
+    {
+      "id": 784,
+      "name": "--sf-btn-s-padding-block"
+    },
+    {
+      "id": 785,
+      "name": "--sf-btn-s-padding-inline"
+    },
+    {
+      "id": 786,
+      "name": "--sf-btn-xl-min-height"
+    },
+    {
+      "id": 787,
+      "name": "--sf-btn-xl-padding-block"
+    },
+    {
+      "id": 788,
+      "name": "--sf-btn-xl-padding-inline"
+    },
+    {
+      "id": 789,
+      "name": "--sf-btn-xs-min-height"
+    },
+    {
+      "id": 790,
+      "name": "--sf-btn-xs-padding-block"
+    },
+    {
+      "id": 791,
+      "name": "--sf-btn-xs-padding-inline"
     }
   ]
 }

From 830625f2dc97d04d71665775dc01a4b70a3b61ea Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 11 Jul 2026 06:19:57 +0000
Subject: [PATCH 2/2] fix(review): a11y aria-pressed, per-size llm-guide
 entries, broader button group desc, symmetric test baseline

Address CodeRabbit + Greptile review on PR #591:
- ComponentsPanel: add aria-pressed to the per-size rung tabs and label-size
  step buttons so the selected option is exposed to assistive tech.
- llm-guide: list the 15 per-size padding/min-height knobs one-per-line with
  their `initial` default + per-rung scale fallback, matching the font-size
  entries (CLAUDE.md qualitative-layer requirement).
- token-annotations: broaden the BUTTON TOKENS group description beyond
  "padding and radius" to cover the per-size font-size/min-height knobs;
  regenerated api-index/docs.
- tests: add the symmetric min-height baseline assertion (not.toBeCloseTo 112)
  mirroring the padding-inline check.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GnwqYHgHNAWPbsUJWUeY1w
---
 .../components/panels/ComponentsPanel.svelte  |  2 +
 .../src/data/api-index.generated.json         | 60 +++++++++----------
 docs/llm-guide.md                             | 18 +++++-
 docs/token-annotations.json                   |  2 +-
 tests/tokens.spec.js                          |  1 +
 5 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/configurator/src/components/panels/ComponentsPanel.svelte b/configurator/src/components/panels/ComponentsPanel.svelte
index 98cea24ab..845f750f6 100644
--- a/configurator/src/components/panels/ComponentsPanel.svelte
+++ b/configurator/src/components/panels/ComponentsPanel.svelte
@@ -341,6 +341,7 @@
               {@const touched = [`--sf-btn-${rung}-font-size`, `--sf-btn-${rung}-padding-block`, `--sf-btn-${rung}-padding-inline`, `--sf-btn-${rung}-min-height`].some((k) => k in overrides)}
               <button
                 onclick={() => { activeBtnRung = rung; btnSize = rung; }}
+                aria-pressed={activeBtnRung === rung}
                 class={`relative flex-1 py-1 rounded-md text-[10px] font-bold uppercase transition-all cursor-pointer ${
                   activeBtnRung === rung
                     ? "bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white"
@@ -361,6 +362,7 @@
                 {@const cur = currentStep(activeFontToken, "text", TEXT_STEPS, activeFontDef)}
                 <button
                   onclick={() => setStep(activeFontToken, "text", step, activeFontDef)}
+                  aria-pressed={cur === step}
                   class={`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${
                     cur === step
                       ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
diff --git a/configurator/src/data/api-index.generated.json b/configurator/src/data/api-index.generated.json
index 8ce0a5029..b15079137 100644
--- a/configurator/src/data/api-index.generated.json
+++ b/configurator/src/data/api-index.generated.json
@@ -2,7 +2,7 @@
   "_sync": {
     "generatedBy": "configurator/scripts/sync-api.mjs",
     "source": "docs/api-index.json",
-    "tokensHash": "a5ad579f55b1",
+    "tokensHash": "ed57360d56f3",
     "bundles": [
       "full",
       "optimal"
@@ -1269,7 +1269,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Border thickness for .sf-btn (used by all fill, outline, and secondary treatments).",
       "value": "var(--sf-border-width-1)",
       "aliasOf": "--sf-border-width-1",
@@ -1289,7 +1289,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Uniform label-size multiplier for .sf-btn — scales every size's font-size by one factor while keeping the xs…xl ladder intact. The everyday 'bigger/smaller button text' knob.",
       "value": "1",
       "aliasOf": null,
@@ -1309,7 +1309,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Flatten-all label font-size for .sf-btn — once set it overrides every size (--xs/--s/--l/--xl) to the same value. For proportional sizing use --sf-btn-font-scale; to retune a single rung use --sf-btn-{size}-font-size.",
       "value": "initial",
       "aliasOf": null,
@@ -1329,7 +1329,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Label font-weight for .sf-btn. Defaults to the interactive weight.",
       "value": "var(--sf-font-weight-interactive)",
       "aliasOf": "--sf-font-weight-interactive",
@@ -1349,7 +1349,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Gap between an icon and the label inside .sf-btn.",
       "value": "var(--sf-space-2xs)",
       "aliasOf": "--sf-space-2xs",
@@ -1369,7 +1369,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Label font-size for the large button (.sf-btn--l). Unset, falls through to --sf-text-l; set to retune this rung without touching the others.",
       "value": "initial",
       "aliasOf": null,
@@ -1389,7 +1389,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Minimum target height for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
@@ -1409,7 +1409,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Vertical (block) padding for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
@@ -1429,7 +1429,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Horizontal (inline) padding for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
@@ -1449,7 +1449,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Label font-size for the default (medium) button (.sf-btn). Unset, falls through to --sf-text-m; set to retune this rung without touching the others.",
       "value": "initial",
       "aliasOf": null,
@@ -1469,7 +1469,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Minimum target height for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
@@ -1489,7 +1489,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Vertical (block) padding for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
@@ -1509,7 +1509,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Horizontal (inline) padding for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
@@ -1529,7 +1529,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Flatten-all minimum target height for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-min-height.",
       "value": "initial",
       "aliasOf": null,
@@ -1549,7 +1549,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Flatten-all vertical (block) padding for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-padding-block.",
       "value": "initial",
       "aliasOf": null,
@@ -1569,7 +1569,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Flatten-all horizontal (inline) padding for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-padding-inline.",
       "value": "initial",
       "aliasOf": null,
@@ -1589,7 +1589,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Corner radius for .sf-btn. Defaults to --sf-radius-m; gives buttons a distinct radius from form fields without touching global tokens.",
       "value": "var(--sf-radius-m)",
       "aliasOf": "--sf-radius-m",
@@ -1609,7 +1609,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Label font-size for the small button (.sf-btn--s). Unset, falls through to --sf-text-s; set to retune this rung without touching the others.",
       "value": "initial",
       "aliasOf": null,
@@ -1629,7 +1629,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Minimum target height for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
@@ -1649,7 +1649,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Vertical (block) padding for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
@@ -1669,7 +1669,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Horizontal (inline) padding for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
@@ -1689,7 +1689,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Label font-size for the extra-large button (.sf-btn--xl). Unset, falls through to --sf-text-xl; set to retune this rung without touching the others.",
       "value": "initial",
       "aliasOf": null,
@@ -1709,7 +1709,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Minimum target height for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
@@ -1729,7 +1729,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Vertical (block) padding for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
@@ -1749,7 +1749,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Horizontal (inline) padding for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
@@ -1769,7 +1769,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Label font-size for the extra-small button (.sf-btn--xs). Unset, falls through to --sf-text-xs; set to retune this rung without touching the others.",
       "value": "initial",
       "aliasOf": null,
@@ -1789,7 +1789,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Minimum target height for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
@@ -1809,7 +1809,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Vertical (block) padding for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
@@ -1829,7 +1829,7 @@
       "namespace": "btn",
       "category": "Component tokens",
       "group": "BUTTON TOKENS",
-      "description": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+      "description": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
       "note": "Horizontal (inline) padding for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone.",
       "value": "initial",
       "aliasOf": null,
diff --git a/docs/llm-guide.md b/docs/llm-guide.md
index c374fb6c6..80f8e3d56 100644
--- a/docs/llm-guide.md
+++ b/docs/llm-guide.md
@@ -1115,9 +1115,21 @@ Component tokens from `optional/tokens.components.css`:
 --sf-btn-m-font-size:    var(--sf-text-m)
 --sf-btn-l-font-size:    var(--sf-text-l)
 --sf-btn-xl-font-size:   var(--sf-text-xl)
---sf-btn-xs-padding-block --sf-btn-s-padding-block --sf-btn-m-padding-block --sf-btn-l-padding-block --sf-btn-xl-padding-block
---sf-btn-xs-padding-inline --sf-btn-s-padding-inline --sf-btn-m-padding-inline --sf-btn-l-padding-inline --sf-btn-xl-padding-inline
---sf-btn-xs-min-height --sf-btn-s-min-height --sf-btn-m-min-height --sf-btn-l-min-height --sf-btn-xl-min-height
+--sf-btn-xs-padding-block:   initial  /* unset → 0.125rem (rung default) */
+--sf-btn-s-padding-block:    initial  /* unset → var(--sf-space-2xs) */
+--sf-btn-m-padding-block:    initial  /* unset → var(--sf-space-xs) */
+--sf-btn-l-padding-block:    initial  /* unset → var(--sf-space-s) */
+--sf-btn-xl-padding-block:   initial  /* unset → var(--sf-space-m) */
+--sf-btn-xs-padding-inline:  initial  /* unset → var(--sf-space-xs) */
+--sf-btn-s-padding-inline:   initial  /* unset → var(--sf-space-s) */
+--sf-btn-m-padding-inline:   initial  /* unset → var(--sf-space-m) */
+--sf-btn-l-padding-inline:   initial  /* unset → var(--sf-space-l) */
+--sf-btn-xl-padding-inline:  initial  /* unset → var(--sf-space-xl) */
+--sf-btn-xs-min-height:      initial  /* unset → var(--sf-size-xs) */
+--sf-btn-s-min-height:       initial  /* unset → var(--sf-size-s) */
+--sf-btn-m-min-height:       initial  /* unset → var(--sf-size-m) */
+--sf-btn-l-min-height:       initial  /* unset → var(--sf-size-l) */
+--sf-btn-xl-min-height:      initial  /* unset → var(--sf-size-xl) */
 /* Flatten-ALL overrides (PUBLIC-ADVANCED) — collapse the whole --xs…xl ladder to one value; prefer the --sf-btn-font-scale / per-size knobs above */
 --sf-btn-font-size:      var(--sf-text-m)   /* effective m default; unset by default */
 --sf-btn-padding-block:  var(--sf-space-xs)
diff --git a/docs/token-annotations.json b/docs/token-annotations.json
index e5909a11e..146b35984 100644
--- a/docs/token-annotations.json
+++ b/docs/token-annotations.json
@@ -88,7 +88,7 @@
     "Macro tokens | Scroll shadow / overflow fade": "Size of the scroll-shadow fade effect on overflowing containers.",
     "Macro tokens | Content visibility": "intrinsic-size hint for content-visibility: auto (lazy off-screen rendering).",
     "Macro tokens | Line clamp": "Number of lines before text truncates with an ellipsis.",
-    "Component tokens | BUTTON TOKENS": "Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.",
+    "Component tokens | BUTTON TOKENS": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.",
     "Component tokens | FIELD TOKENS": "Padding and radius tokens that control form field geometry. Override these to give inputs a distinct visual language from buttons.",
     "Core tokens | Link alpha token": "Semi-transparent underline color token used to tint the link underline independently from the link text color.",
     "Core tokens | Selection & mark": "Background and text colors for browser text selections and <mark> highlights. Adapts automatically in dark mode.",
diff --git a/tests/tokens.spec.js b/tests/tokens.spec.js
index 001666969..e781b7686 100644
--- a/tests/tokens.spec.js
+++ b/tests/tokens.spec.js
@@ -337,5 +337,6 @@ test('button per-size label knobs retune one rung; font-scale multiplies the lad
   // Per-size padding + min-height knobs retune the xs rung (5rem = 80px, 7rem = 112px).
   expect(boxBefore.pi).not.toBeCloseTo(80, 0);
   expect(boxAfter.pi).toBeCloseTo(80, 0);
+  expect(boxBefore.mh).not.toBeCloseTo(112, 0);
   expect(boxAfter.mh).toBeCloseTo(112, 0);
 });