diff --git a/configurator/src/components/DomainPanel.svelte b/configurator/src/components/DomainPanel.svelte
index 13680aaf..e12d8039 100644
--- a/configurator/src/components/DomainPanel.svelte
+++ b/configurator/src/components/DomainPanel.svelte
@@ -34,6 +34,7 @@
   import QuickKnobs from './QuickKnobs.svelte';
   import StylePresetRow from './StylePresetRow.svelte';
   import ColorAssignments from './ColorAssignments.svelte';
+  import ShadeRamp from './ShadeRamp.svelte';
   import DomainPreview from './DomainPreview.svelte';
   import Icon from './Icon.svelte';
   import { DOMAIN_PREVIEWS } from '../lib/domainPreviews.js';
@@ -113,6 +114,7 @@
   let showStatus = $state(false);
   // Semantic-roles preview leads the Colors panel — open by default.
   let showColorRoles = $state(true);
+  let showShadeRamp = $state(false);
 
   // Other token domains: an inline live preview that LEADS the panel (the
   // generalisation of the Colors "Semantic roles" section). Present only for
@@ -333,6 +335,16 @@
             {/each}
           </div>
         </details>
+
+        <!-- Shade ramp (superlight → superdark for each brand color) -->
+        <details class="cfg-card panel__card" bind:open={showShadeRamp}>
+          <summary class="panel__card-head panel__expand-summary">
+            <span class="panel__expand-chev" aria-hidden="true">›</span>
+            <span class="panel__card-title">Shade ramp</span>
+            <span class="panel__expand-count">7-step scale per brand color</span>
+          </summary>
+          <ShadeRamp />
+        </details>
       {:else if basicGroups.length}
         {#each basicGroups as group (group.title)}
           <section class="cfg-card panel__card">
diff --git a/configurator/src/components/DomainPreview.svelte b/configurator/src/components/DomainPreview.svelte
index bd1840e9..376898c9 100644
--- a/configurator/src/components/DomainPreview.svelte
+++ b/configurator/src/components/DomainPreview.svelte
@@ -70,7 +70,16 @@
         {#if group.section}<p class="dp__section">{group.section}</p>{/if}
 
         <!-- ── Type specimen ──────────────────────────────────────────── -->
-        {#if spec.kind === 'type' && group.section === 'Font stacks'}
+        {#if spec.kind === 'type' && group.section === 'Specimen'}
+          <div class="dp__specimen-box">
+            <p class="dp__specimen-heading">The quick brown fox jumps over the lazy dog.</p>
+            <p class="dp__specimen-body">Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief.</p>
+            <p class="dp__specimen-meta">
+              <span class="dp__specimen-tag">Heading: <code>--sf-font-heading</code></span>
+              <span class="dp__specimen-tag">Body: <code>--sf-font-body</code></span>
+            </p>
+          </div>
+        {:else if spec.kind === 'type' && group.section === 'Font stacks'}
           <div class="dp__fonts">
             {#each group.items as it (it.token)}
               <div class="dp__font-row" style="font-family: var({it.token})">
@@ -290,6 +299,47 @@
   .dp__font-label { font-size: 10px; color: var(--cfg-text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
   .dp__font-sample { font-size: 15px; }
 
+  /* Font pairing specimen */
+  .dp__specimen-box {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 14px;
+    border: 1px solid var(--sf-color-border, var(--cfg-border));
+    border-radius: var(--sf-radius-m, 8px);
+    background: var(--sf-color-bg, var(--cfg-bg));
+  }
+  .dp__specimen-heading {
+    margin: 0;
+    font-family: var(--sf-font-heading);
+    font-size: var(--sf-h2-size, 1.75rem);
+    font-weight: var(--sf-h2-font-weight, 700);
+    line-height: var(--sf-h2-line-height, 1.2);
+    color: var(--sf-color-heading, var(--sf-color-text, var(--cfg-text)));
+  }
+  .dp__specimen-body {
+    margin: 0;
+    font-family: var(--sf-font-body);
+    font-size: var(--sf-text-m, 1rem);
+    line-height: var(--sf-leading-normal, 1.6);
+    color: var(--sf-color-text--secondary, var(--cfg-text-muted));
+  }
+  .dp__specimen-meta {
+    margin: 4px 0 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .dp__specimen-tag {
+    font-size: 10px;
+    color: var(--cfg-text-faint);
+  }
+  .dp__specimen-tag code {
+    font-family: var(--cfg-mono);
+    font-size: 9.5px;
+    color: var(--cfg-accent, var(--cfg-text-faint));
+  }
+
   /* Spacing + container bars */
   .dp__bars { display: flex; flex-direction: column; gap: 6px; }
   .dp__bar-row { display: flex; align-items: center; gap: 10px; }
diff --git a/configurator/src/components/ShadeRamp.svelte b/configurator/src/components/ShadeRamp.svelte
new file mode 100644
index 00000000..b99377db
--- /dev/null
+++ b/configurator/src/components/ShadeRamp.svelte
@@ -0,0 +1,199 @@
+<script>
+  /**
+   * Brand-color shade ramp.
+   *
+   * Resolves and displays the full 7-step shade ramp for each brand color
+   * (superlight → superdark) using the framework's derived consumption tokens.
+   * Updates reactively whenever overrides or the preview theme changes.
+   *
+   * Brand families only: primary, secondary, tertiary, action, neutral, base.
+   * Status families (success/warning/error/info/danger) intentionally omit the
+   * shade ramp — they expose only the subtle/muted/strong triplet.
+   */
+  import { overrides, ui } from '../lib/store.svelte.js';
+  import { measureBackground } from '../lib/probeHost.js';
+
+  const BRAND_KEYS = [
+    { key: 'primary',   label: 'Primary'   },
+    { key: 'secondary', label: 'Secondary' },
+    { key: 'tertiary',  label: 'Tertiary'  },
+    { key: 'action',    label: 'Action'    },
+    { key: 'neutral',   label: 'Neutral'   },
+    { key: 'base',      label: 'Base'      },
+  ];
+
+  const SHADE_STEPS = [
+    { suffix: '-superlight', label: 'superlight' },
+    { suffix: '-xlight',     label: 'xlight'     },
+    { suffix: '-lighter',    label: 'lighter'     },
+    { suffix: '',            label: 'base'        },
+    { suffix: '-darker',     label: 'darker'      },
+    { suffix: '-xdark',      label: 'xdark'       },
+    { suffix: '-superdark',  label: 'superdark'   },
+  ];
+
+  const ALL_SHADE_TOKENS = BRAND_KEYS.flatMap(({ key }) =>
+    SHADE_STEPS.map(({ suffix }) => `--sf-color-${key}${suffix}`)
+  );
+
+  /** @type {Record<string, string>} token → resolved rgb() string */
+  let resolved = $state({});
+
+  $effect(() => {
+    for (const k in overrides) void overrides[k];
+    void ui.previewTheme;
+    queueMicrotask(() => {
+      const next = {};
+      for (const token of ALL_SHADE_TOKENS) {
+        const rgb = measureBackground(`var(${token})`);
+        if (rgb && rgb !== 'rgba(0, 0, 0, 0)') next[token] = rgb;
+      }
+      resolved = next;
+    });
+  });
+
+  /** Perceived lightness (0–255) — decides whether to use dark or light text on a swatch. */
+  function perceived(rgb) {
+    if (!rgb) return 128;
+    const m = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(rgb);
+    if (!m) return 128;
+    return 0.299 * +m[1] + 0.587 * +m[2] + 0.114 * +m[3];
+  }
+</script>
+
+<div class="sr">
+  <p class="sr__intro">
+    7-step ramp for each brand color, resolved against the <strong>{ui.previewTheme}</strong> theme.
+  </p>
+
+  {#each BRAND_KEYS as { key, label } (key)}
+    <div class="sr__row">
+      <span class="sr__name">{label}</span>
+      <div class="sr__swatches">
+        {#each SHADE_STEPS as { suffix, label: stepLabel } (`${key}${suffix}`)}
+          {@const token = `--sf-color-${key}${suffix}`}
+          {@const bg = resolved[token]}
+          {@const isLight = bg ? perceived(bg) > 128 : true}
+          <div class="sr__swatch-wrap">
+            <div
+              class="sr__swatch"
+              class:sr__swatch--empty={!bg}
+              style:background-color={bg ?? 'transparent'}
+              title="{token}: {bg ?? 'resolving…'}"
+            >
+              {#if !bg}
+                <span class="sr__dots" aria-hidden="true">···</span>
+              {:else if suffix === ''}
+                <!-- Mark the base step -->
+                <span class="sr__base-dot" class:sr__base-dot--dark={!isLight} aria-hidden="true">●</span>
+              {/if}
+            </div>
+            <span class="sr__step-label">{stepLabel}</span>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/each}
+
+  <p class="sr__note">
+    Theme: <strong>{ui.previewTheme}</strong> · toggle in the preview pane to compare modes.
+  </p>
+</div>
+
+<style>
+  .sr {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 14px 16px;
+  }
+
+  .sr__intro {
+    margin: 0;
+    font-size: 11.5px;
+    color: var(--cfg-text-muted);
+  }
+
+  .sr__row {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .sr__name {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    color: var(--cfg-text-faint);
+  }
+
+  .sr__swatches {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 3px;
+  }
+
+  .sr__swatch-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 3px;
+  }
+
+  .sr__swatch {
+    width: 100%;
+    height: 36px;
+    border-radius: var(--cfg-radius-s, 4px);
+    border: 1px solid rgba(0, 0, 0, 0.07);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s ease;
+    background-image:
+      conic-gradient(#444 25%, #2a2a2a 0 50%, #444 0 75%, #2a2a2a 0);
+    background-size: 8px 8px;
+  }
+  .sr__swatch:not(.sr__swatch--empty) {
+    background-image: none;
+  }
+
+  .sr__dots {
+    font-size: 10px;
+    color: var(--cfg-text-faint);
+    letter-spacing: 1px;
+  }
+
+  .sr__base-dot {
+    font-size: 8px;
+    color: rgba(0, 0, 0, 0.35);
+  }
+  .sr__base-dot--dark {
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  .sr__step-label {
+    font-size: 8.5px;
+    color: var(--cfg-text-faint);
+    text-align: center;
+    line-height: 1.2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+
+  .sr__note {
+    margin: 4px 0 0;
+    font-size: 11px;
+    color: var(--cfg-text-faint);
+    border-top: 1px solid var(--cfg-border);
+    padding-top: 10px;
+  }
+
+  @media (max-width: 600px) {
+    .sr { padding: 10px 12px; }
+    .sr__swatch { height: 28px; }
+    .sr__step-label { font-size: 7.5px; }
+  }
+</style>
diff --git a/configurator/src/data/api-index.generated.json b/configurator/src/data/api-index.generated.json
index 63c22cac..ffaa2c49 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": "d247f2bc7e25",
+    "tokensHash": "95f5918f0b94",
     "bundles": [
       "essential",
       "full",
@@ -11,9 +11,9 @@
       "optimal-utilities"
     ],
     "counts": {
-      "tokens": 693,
+      "tokens": 705,
       "byTier": {
-        "PUBLIC": 637,
+        "PUBLIC": 649,
         "PUBLIC-ADVANCED": 55,
         "INTERNAL": 1
       },
@@ -21,7 +21,7 @@
         "Layout tokens": 49,
         "Core tokens": 509,
         "Macro tokens": 23,
-        "Component tokens": 6,
+        "Component tokens": 18,
         "Palette tokens": 106
       }
     }
@@ -1227,6 +1227,90 @@
         "optimal-utilities"
       ]
     },
+    {
+      "name": "--sf-button-border-width",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "button",
+      "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": "",
+      "value": "var(--sf-border-width-1)",
+      "aliasOf": "--sf-border-width-1",
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "--sf-button-font-weight",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "button",
+      "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": "",
+      "value": "var(--sf-font-weight-interactive)",
+      "aliasOf": "--sf-font-weight-interactive",
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "--sf-button-gap",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "button",
+      "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": "",
+      "value": "var(--sf-space-2xs)",
+      "aliasOf": "--sf-space-2xs",
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "--sf-button-min-height",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "button",
+      "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": "",
+      "value": "var(--sf-touch-target)",
+      "aliasOf": "--sf-touch-target",
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
     {
       "name": "--sf-button-padding-block",
       "tier": "PUBLIC",
@@ -1290,6 +1374,174 @@
         "optimal-components"
       ]
     },
+    {
+      "name": "--sf-card-bg",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "card",
+      "category": "Component tokens",
+      "group": "CARD TOKENS",
+      "description": "Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card.",
+      "note": "",
+      "value": "var(--sf-color-surface)",
+      "aliasOf": "--sf-color-surface",
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "--sf-card-border-color",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "card",
+      "category": "Component tokens",
+      "group": "CARD TOKENS",
+      "description": "Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card.",
+      "note": "",
+      "value": "var(--sf-color-border)",
+      "aliasOf": "--sf-color-border",
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "--sf-card-border-width",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "card",
+      "category": "Component tokens",
+      "group": "CARD TOKENS",
+      "description": "Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card.",
+      "note": "",
+      "value": "var(--sf-border-width-1)",
+      "aliasOf": "--sf-border-width-1",
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "--sf-card-gap",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "card",
+      "category": "Component tokens",
+      "group": "CARD TOKENS",
+      "description": "Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card.",
+      "note": "",
+      "value": "var(--sf-space-m)",
+      "aliasOf": "--sf-space-m",
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "--sf-card-padding",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "card",
+      "category": "Component tokens",
+      "group": "CARD TOKENS",
+      "description": "Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card.",
+      "note": "",
+      "value": "var(--sf-space-l)",
+      "aliasOf": "--sf-space-l",
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "--sf-card-radius",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "card",
+      "category": "Component tokens",
+      "group": "CARD TOKENS",
+      "description": "Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card.",
+      "note": "",
+      "value": "var(--sf-radius-m)",
+      "aliasOf": "--sf-radius-m",
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "--sf-card-radius-outer",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "card",
+      "category": "Component tokens",
+      "group": "CARD TOKENS",
+      "description": "Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card.",
+      "note": "",
+      "value": "calc(var(--sf-card-radius) + var(--sf-card-padding))",
+      "aliasOf": null,
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "--sf-card-shadow",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "card",
+      "category": "Component tokens",
+      "group": "CARD TOKENS",
+      "description": "Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card.",
+      "note": "",
+      "value": "var(--sf-shadow-s)",
+      "aliasOf": "--sf-shadow-s",
+      "registered": false,
+      "syntax": null,
+      "fallbackOnly": false,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
     {
       "name": "--sf-caret-color",
       "tier": "PUBLIC",
diff --git a/configurator/src/data/token-registry.generated.json b/configurator/src/data/token-registry.generated.json
index 849c14cf..d84998ce 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": 693
+    "nextId": 705
   },
   "tokens": [
     {
@@ -2775,6 +2775,54 @@
     {
       "id": 692,
       "name": "--sf-z-tooltip"
+    },
+    {
+      "id": 693,
+      "name": "--sf-button-border-width"
+    },
+    {
+      "id": 694,
+      "name": "--sf-button-font-weight"
+    },
+    {
+      "id": 695,
+      "name": "--sf-button-gap"
+    },
+    {
+      "id": 696,
+      "name": "--sf-button-min-height"
+    },
+    {
+      "id": 697,
+      "name": "--sf-card-bg"
+    },
+    {
+      "id": 698,
+      "name": "--sf-card-border-color"
+    },
+    {
+      "id": 699,
+      "name": "--sf-card-border-width"
+    },
+    {
+      "id": 700,
+      "name": "--sf-card-gap"
+    },
+    {
+      "id": 701,
+      "name": "--sf-card-padding"
+    },
+    {
+      "id": 702,
+      "name": "--sf-card-radius"
+    },
+    {
+      "id": 703,
+      "name": "--sf-card-radius-outer"
+    },
+    {
+      "id": 704,
+      "name": "--sf-card-shadow"
     }
   ]
 }
diff --git a/configurator/src/lib/domainPreviews.js b/configurator/src/lib/domainPreviews.js
index 023774ce..a1e52a2a 100644
--- a/configurator/src/lib/domainPreviews.js
+++ b/configurator/src/lib/domainPreviews.js
@@ -49,6 +49,13 @@ export const DOMAIN_PREVIEWS = {
           { token: '--sf-font-mono', label: 'Mono' },
         ],
       },
+      {
+        section: 'Specimen',
+        items: [
+          { token: '--sf-h2-size', label: 'Heading size' },
+          { token: '--sf-leading-normal', label: 'Body leading' },
+        ],
+      },
     ],
   },
 
diff --git a/core/layout.css b/core/layout.css
index 5a4188bf..7c677c33 100644
--- a/core/layout.css
+++ b/core/layout.css
@@ -43,6 +43,23 @@
     padding-block-start: calc(var(--sf-section-pad) / 2);
   }
 
+  /* Offset-header modifier — extends padding-block-start by --sf-sticky-offset
+     so the section's top content clears a sticky/fixed header on first load
+     and after hash navigation. Pairs with .sf-scroll-target below.
+     Override the offset per-section: style="--sf-sticky-offset: 4rem" */
+  .sf-section--offset-header {
+    padding-block-start: calc(var(--sf-section-pad) + var(--sf-sticky-offset, 0px));
+  }
+
+  /* Scroll margin target — anchor elements (#id links) stay visible when
+     a sticky header is present. Browsers scroll the element to the viewport
+     top; this pushes the effective snap point down by the header height.
+     Use on any element with an id= that serves as a scroll destination:
+       <section id="features" class="sf-section sf-scroll-target"> */
+  .sf-scroll-target {
+    scroll-margin-block-start: var(--sf-sticky-offset, 0px);
+  }
+
   /* -- Divider -------------------------------------------------
      Standalone separator primitive. Token-driven; pairs with the
      `--sf-divider-*` tokens and mirrors the `hr` element default.
diff --git a/dist/badge-essential.json b/dist/badge-essential.json
index bf542d11..d6727ee4 100644
--- a/dist/badge-essential.json
+++ b/dist/badge-essential.json
@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
   "label": "essential",
-  "message": "16.1 kB gzip",
+  "message": "16.3 kB gzip",
   "color": "brightgreen",
   "namedLogo": "css3"
 }
diff --git a/docs/api-index.json b/docs/api-index.json
index 633b358f..983d3e5a 100644
--- a/docs/api-index.json
+++ b/docs/api-index.json
@@ -29,30 +29,31 @@
       "optimal-utilities"
     ],
     "counts": {
-      "total": 925,
+      "total": 962,
       "by_type": {
-        "class": 232,
-        "token": 693
+        "class": 257,
+        "token": 705
       },
       "by_tier": {
         "INTERNAL": 1,
-        "PUBLIC": 869,
+        "PUBLIC": 906,
         "PUBLIC-ADVANCED": 55
       },
       "by_role": {
-        "consumption": 471,
+        "consumption": 483,
         "knob": 222
       },
-      "tokens": 693,
-      "classes": 232,
-      "sf_classes": 183,
+      "tokens": 705,
+      "classes": 257,
+      "sf_classes": 208,
       "is_classes": 40,
       "unprefixed_classes": 9,
       "by_category": {
         "Accessibility": 8,
-        "Component tokens": 6,
+        "Component tokens": 18,
+        "Components": 23,
         "Core tokens": 509,
-        "Layout primitives": 126,
+        "Layout primitives": 128,
         "Layout tokens": 49,
         "Macro classes": 37,
         "Macro tokens": 23,
@@ -1543,7 +1544,7 @@
       ]
     },
     {
-      "name": "--sf-button-padding-block",
+      "name": "--sf-button-border-width",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -1551,9 +1552,9 @@
       "category": "Component tokens",
       "area": "components",
       "group": "BUTTON TOKENS",
-      "description": "Vertical (block) inner padding for buttons.",
-      "value": "var(--sf-space-xs)",
-      "aliasOf": "--sf-space-xs",
+      "description": "Override to give buttons a distinct visual language from form fields without touching global radius/spacing tokens.",
+      "value": "var(--sf-border-width-1)",
+      "aliasOf": "--sf-border-width-1",
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -1569,7 +1570,7 @@
       ]
     },
     {
-      "name": "--sf-button-padding-inline",
+      "name": "--sf-button-font-weight",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -1577,9 +1578,9 @@
       "category": "Component tokens",
       "area": "components",
       "group": "BUTTON TOKENS",
-      "description": "Horizontal (inline) inner padding for buttons.",
-      "value": "var(--sf-space-m)",
-      "aliasOf": "--sf-space-m",
+      "description": "Override to give buttons a distinct visual language from form fields without touching global radius/spacing tokens.",
+      "value": "var(--sf-font-weight-interactive)",
+      "aliasOf": "--sf-font-weight-interactive",
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -1595,7 +1596,7 @@
       ]
     },
     {
-      "name": "--sf-button-radius",
+      "name": "--sf-button-gap",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -1603,9 +1604,9 @@
       "category": "Component tokens",
       "area": "components",
       "group": "BUTTON TOKENS",
-      "description": "Border radius for buttons. Defaults to --sf-radius-m; override to fully pill-round or square all buttons at once.",
-      "value": "var(--sf-radius-m)",
-      "aliasOf": "--sf-radius-m",
+      "description": "Override to give buttons a distinct visual language from form fields without touching global radius/spacing tokens.",
+      "value": "var(--sf-space-2xs)",
+      "aliasOf": "--sf-space-2xs",
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -1621,306 +1622,276 @@
       ]
     },
     {
-      "name": "--sf-caret-color",
+      "name": "--sf-button-min-height",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
-      "namespace": "caret",
-      "category": "Core tokens",
-      "area": "core",
-      "group": "Focus / form colors",
-      "description": "Cursor caret color inside text inputs and contenteditable elements.",
-      "value": "var(--sf-color-action)",
-      "aliasOf": "--sf-color-action",
+      "namespace": "button",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Override to give buttons a distinct visual language from form fields without touching global radius/spacing tokens.",
+      "value": "var(--sf-touch-target)",
+      "aliasOf": "--sf-touch-target",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "optional/tokens.components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "--sf-center-gutter",
+      "name": "--sf-button-padding-block",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
-      "namespace": "center",
-      "category": "Layout tokens",
-      "area": "layout",
-      "group": "Center",
-      "description": "Minimum side gutter for the center layout.",
-      "value": "var(--sf-gutter)",
-      "aliasOf": "--sf-gutter",
+      "namespace": "button",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Vertical (block) inner padding for buttons.",
+      "value": "var(--sf-space-xs)",
+      "aliasOf": "--sf-space-xs",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.layout.css"
+        "optional/tokens.components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "--sf-center-max",
+      "name": "--sf-button-padding-inline",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
-      "namespace": "center",
-      "category": "Layout tokens",
-      "area": "layout",
-      "group": "Center",
-      "description": "Maximum width for the center layout.",
-      "value": "var(--sf-container-default)",
-      "aliasOf": "--sf-container-default",
+      "namespace": "button",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Horizontal (inline) inner padding for buttons.",
+      "value": "var(--sf-space-m)",
+      "aliasOf": "--sf-space-m",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.layout.css"
+        "optional/tokens.components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "--sf-cluster-align",
+      "name": "--sf-button-radius",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "knob",
-      "namespace": "cluster",
-      "category": "Layout tokens",
-      "area": "layout",
-      "group": "Cluster",
-      "description": "Vertical alignment of cluster items (align-items value).",
-      "value": "center",
-      "aliasOf": null,
+      "role": "consumption",
+      "namespace": "button",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "BUTTON TOKENS",
+      "description": "Border radius for buttons. Defaults to --sf-radius-m; override to fully pill-round or square all buttons at once.",
+      "value": "var(--sf-radius-m)",
+      "aliasOf": "--sf-radius-m",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.layout.css"
+        "optional/tokens.components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "--sf-cluster-gap",
+      "name": "--sf-card-bg",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
-      "namespace": "cluster",
-      "category": "Layout tokens",
-      "area": "layout",
-      "group": "Cluster",
-      "description": "Gap between wrapped inline items in the cluster layout.",
-      "value": "var(--sf-gap)",
-      "aliasOf": "--sf-gap",
+      "namespace": "card",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "CARD TOKENS",
+      "description": "Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card.",
+      "value": "var(--sf-color-surface)",
+      "aliasOf": "--sf-color-surface",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.layout.css"
+        "optional/tokens.components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "--sf-cluster-justify",
+      "name": "--sf-card-border-color",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "knob",
-      "namespace": "cluster",
-      "category": "Layout tokens",
-      "area": "layout",
-      "group": "Cluster",
-      "description": "Horizontal justification of the cluster (justify-content value).",
-      "value": "flex-start",
-      "aliasOf": null,
+      "role": "consumption",
+      "namespace": "card",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "CARD TOKENS",
+      "description": "Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card.",
+      "value": "var(--sf-color-border)",
+      "aliasOf": "--sf-color-border",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.layout.css"
+        "optional/tokens.components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "--sf-code-font-size",
+      "name": "--sf-card-border-width",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "knob",
-      "namespace": "code",
-      "category": "Core tokens",
-      "area": "core",
-      "group": "TYPOGRAPHY ALIASES",
-      "description": "Font size for inline <code> and <pre>. Usually slightly smaller than body text so monospace doesn't feel oversized.",
-      "value": "0.875em",
-      "aliasOf": null,
+      "role": "consumption",
+      "namespace": "card",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "CARD TOKENS",
+      "description": "Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card.",
+      "value": "var(--sf-border-width-1)",
+      "aliasOf": "--sf-border-width-1",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "optional/tokens.components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "--sf-color-action",
+      "name": "--sf-card-gap",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
-      "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
-      "group": "DARK SOURCE TOKENS (-dark, animatable)",
-      "description": "Primary interactive color. Applied to filled buttons, active indicators, and brand accent surfaces.",
-      "value": "light-dark(var(--sf-color-action-light), var(--sf-color-action-dark, oklch(from var(--sf-color-action-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))",
-      "aliasOf": null,
-      "registered": true,
-      "animatable": true,
-      "syntax": "<color>",
-      "inherits": true,
-      "optional": false,
+      "namespace": "card",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "CARD TOKENS",
+      "description": "Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card.",
+      "value": "var(--sf-space-m)",
+      "aliasOf": "--sf-space-m",
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "optional/tokens.components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "--sf-color-action--active",
+      "name": "--sf-card-padding",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
-      "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
-      "group": "action",
-      "description": "Action color at pressed/active brightness.",
-      "value": "var(--sf-color-action-xdark)",
-      "aliasOf": "--sf-color-action-xdark",
+      "namespace": "card",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "CARD TOKENS",
+      "description": "Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card.",
+      "value": "var(--sf-space-l)",
+      "aliasOf": "--sf-space-l",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "optional/tokens.components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "--sf-color-action--hover",
+      "name": "--sf-card-radius",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
-      "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
-      "group": "action",
-      "description": "Action color at hover brightness.",
-      "value": "var(--sf-color-action-darker)",
-      "aliasOf": "--sf-color-action-darker",
+      "namespace": "card",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "CARD TOKENS",
+      "description": "Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card.",
+      "value": "var(--sf-radius-m)",
+      "aliasOf": "--sf-radius-m",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "optional/tokens.components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "--sf-color-action-100",
+      "name": "--sf-card-radius-outer",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
-      "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
-      "group": "action",
-      "description": "Very light action shade. Hover fills on white surfaces, badge backgrounds.",
-      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-100), var(--sf-color-surface))",
+      "namespace": "card",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "CARD TOKENS",
+      "description": "Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card.",
+      "value": "calc(var(--sf-card-radius) + var(--sf-card-padding))",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -1929,27 +1900,25 @@
       "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "optional/tokens.palette.css"
+        "optional/tokens.components.css"
       ],
       "bundles": [
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "--sf-color-action-200",
+      "name": "--sf-card-shadow",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
-      "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
-      "group": "action",
-      "description": "Light action shade. Subtle fills and outlined badge backgrounds.",
-      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-200), var(--sf-color-surface))",
-      "aliasOf": null,
+      "namespace": "card",
+      "category": "Component tokens",
+      "area": "components",
+      "group": "CARD TOKENS",
+      "description": "Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card.",
+      "value": "var(--sf-shadow-s)",
+      "aliasOf": "--sf-shadow-s",
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -1957,37 +1926,36 @@
       "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "optional/tokens.palette.css"
+        "optional/tokens.components.css"
       ],
       "bundles": [
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "--sf-color-action-300",
+      "name": "--sf-caret-color",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
-      "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
-      "group": "action",
-      "description": "Light-mid action shade. Borders on light backgrounds, low-emphasis fills.",
-      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-300), var(--sf-color-surface))",
-      "aliasOf": null,
+      "namespace": "caret",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "Focus / form colors",
+      "description": "Cursor caret color inside text inputs and contenteditable elements.",
+      "value": "var(--sf-color-action)",
+      "aliasOf": "--sf-color-action",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "optional/tokens.palette.css"
+        "core/tokens.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -1995,27 +1963,28 @@
       ]
     },
     {
-      "name": "--sf-color-action-400",
+      "name": "--sf-center-gutter",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
-      "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
-      "group": "action",
-      "description": "Mid-light action shade. Disabled state fills, decorative accents.",
-      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-400), var(--sf-color-surface))",
-      "aliasOf": null,
+      "namespace": "center",
+      "category": "Layout tokens",
+      "area": "layout",
+      "group": "Center",
+      "description": "Minimum side gutter for the center layout.",
+      "value": "var(--sf-gutter)",
+      "aliasOf": "--sf-gutter",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "optional/tokens.palette.css"
+        "core/tokens.layout.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2023,27 +1992,28 @@
       ]
     },
     {
-      "name": "--sf-color-action-50",
+      "name": "--sf-center-max",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
-      "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
-      "group": "action",
-      "description": "Lightest action tint. Background fill for subtle action-tinted surfaces.",
-      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-50), var(--sf-color-surface))",
-      "aliasOf": null,
+      "namespace": "center",
+      "category": "Layout tokens",
+      "area": "layout",
+      "group": "Center",
+      "description": "Maximum width for the center layout.",
+      "value": "var(--sf-container-default)",
+      "aliasOf": "--sf-container-default",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "optional/tokens.palette.css"
+        "core/tokens.layout.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2051,27 +2021,28 @@
       ]
     },
     {
-      "name": "--sf-color-action-500",
+      "name": "--sf-cluster-align",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "consumption",
-      "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
-      "group": "action",
-      "description": "Mid action shade — the 'pure' hue. Accessible on both light and dark backgrounds.",
-      "value": "var(--sf-color-action)",
-      "aliasOf": "--sf-color-action",
+      "role": "knob",
+      "namespace": "cluster",
+      "category": "Layout tokens",
+      "area": "layout",
+      "group": "Cluster",
+      "description": "Vertical alignment of cluster items (align-items value).",
+      "value": "center",
+      "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "optional/tokens.palette.css"
+        "core/tokens.layout.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2079,27 +2050,28 @@
       ]
     },
     {
-      "name": "--sf-color-action-600",
+      "name": "--sf-cluster-gap",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
-      "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
-      "group": "action",
-      "description": "Mid-dark action shade. Text on light surfaces, icon fills.",
-      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-600), var(--sf-color-text))",
-      "aliasOf": null,
+      "namespace": "cluster",
+      "category": "Layout tokens",
+      "area": "layout",
+      "group": "Cluster",
+      "description": "Gap between wrapped inline items in the cluster layout.",
+      "value": "var(--sf-gap)",
+      "aliasOf": "--sf-gap",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "optional/tokens.palette.css"
+        "core/tokens.layout.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2107,27 +2079,28 @@
       ]
     },
     {
-      "name": "--sf-color-action-700",
+      "name": "--sf-cluster-justify",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "consumption",
-      "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
-      "group": "action",
-      "description": "Dark action shade. Strong text and icon fills on light backgrounds.",
-      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-700), var(--sf-color-text))",
+      "role": "knob",
+      "namespace": "cluster",
+      "category": "Layout tokens",
+      "area": "layout",
+      "group": "Cluster",
+      "description": "Horizontal justification of the cluster (justify-content value).",
+      "value": "flex-start",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "optional/tokens.palette.css"
+        "core/tokens.layout.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2135,27 +2108,28 @@
       ]
     },
     {
-      "name": "--sf-color-action-800",
+      "name": "--sf-code-font-size",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "consumption",
-      "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
-      "group": "action",
-      "description": "Very dark action shade. High-contrast text on white.",
-      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-800), var(--sf-color-text))",
+      "role": "knob",
+      "namespace": "code",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "TYPOGRAPHY ALIASES",
+      "description": "Font size for inline <code> and <pre>. Usually slightly smaller than body text so monospace doesn't feel oversized.",
+      "value": "0.875em",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "optional/tokens.palette.css"
+        "core/tokens.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2163,27 +2137,28 @@
       ]
     },
     {
-      "name": "--sf-color-action-900",
+      "name": "--sf-color-action",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
-      "group": "action",
-      "description": "Near-black action shade. Extreme contrast on white surfaces.",
-      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-900), var(--sf-color-text))",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "DARK SOURCE TOKENS (-dark, animatable)",
+      "description": "Primary interactive color. Applied to filled buttons, active indicators, and brand accent surfaces.",
+      "value": "light-dark(var(--sf-color-action-light), var(--sf-color-action-dark, oklch(from var(--sf-color-action-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))",
       "aliasOf": null,
-      "registered": false,
-      "animatable": false,
-      "syntax": null,
-      "inherits": null,
-      "optional": true,
+      "registered": true,
+      "animatable": true,
+      "syntax": "<color>",
+      "inherits": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "optional/tokens.palette.css"
+        "core/tokens.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2191,27 +2166,28 @@
       ]
     },
     {
-      "name": "--sf-color-action-950",
+      "name": "--sf-color-action--active",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
+      "category": "Core tokens",
+      "area": "core",
       "group": "action",
-      "description": "Darkest action tint. Near-black for dark-theme surface accents.",
-      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-950), var(--sf-color-text))",
-      "aliasOf": null,
+      "description": "Action color at pressed/active brightness.",
+      "value": "var(--sf-color-action-xdark)",
+      "aliasOf": "--sf-color-action-xdark",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "optional/tokens.palette.css"
+        "core/tokens.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2219,27 +2195,28 @@
       ]
     },
     {
-      "name": "--sf-color-action-a10",
+      "name": "--sf-color-action--hover",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
+      "category": "Core tokens",
+      "area": "core",
       "group": "action",
-      "description": "10% opacity action tint. Subtle hover or selected-row background.",
-      "value": "oklch(from var(--sf-color-action) l c h / 0.10)",
-      "aliasOf": null,
+      "description": "Action color at hover brightness.",
+      "value": "var(--sf-color-action-darker)",
+      "aliasOf": "--sf-color-action-darker",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "optional/tokens.palette.css"
+        "core/tokens.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2247,7 +2224,7 @@
       ]
     },
     {
-      "name": "--sf-color-action-a30",
+      "name": "--sf-color-action-100",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -2255,8 +2232,8 @@
       "category": "Palette tokens",
       "area": "palette",
       "group": "action",
-      "description": "30% opacity action tint.",
-      "value": "oklch(from var(--sf-color-action) l c h / 0.30)",
+      "description": "Very light action shade. Hover fills on white surfaces, badge backgrounds.",
+      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-100), var(--sf-color-surface))",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -2275,7 +2252,7 @@
       ]
     },
     {
-      "name": "--sf-color-action-a5",
+      "name": "--sf-color-action-200",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -2283,8 +2260,8 @@
       "category": "Palette tokens",
       "area": "palette",
       "group": "action",
-      "description": "5% opacity action tint. Barely-there hover highlight.",
-      "value": "oklch(from var(--sf-color-action) l c h / 0.05)",
+      "description": "Light action shade. Subtle fills and outlined badge backgrounds.",
+      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-200), var(--sf-color-surface))",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -2303,7 +2280,7 @@
       ]
     },
     {
-      "name": "--sf-color-action-a50",
+      "name": "--sf-color-action-300",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -2311,8 +2288,8 @@
       "category": "Palette tokens",
       "area": "palette",
       "group": "action",
-      "description": "50% opacity action tint. Mid-transparency badge or overlay.",
-      "value": "oklch(from var(--sf-color-action) l c h / 0.50)",
+      "description": "Light-mid action shade. Borders on light backgrounds, low-emphasis fills.",
+      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-300), var(--sf-color-surface))",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -2331,7 +2308,7 @@
       ]
     },
     {
-      "name": "--sf-color-action-a80",
+      "name": "--sf-color-action-400",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -2339,9 +2316,9 @@
       "category": "Palette tokens",
       "area": "palette",
       "group": "action",
-      "description": "80% opacity action tint.",
-      "value": "oklch(from var(--sf-color-action) l c h / 0.80)",
-      "aliasOf": null,
+      "description": "Mid-light action shade. Disabled state fills, decorative accents.",
+      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-400), var(--sf-color-surface))",
+      "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -2359,28 +2336,27 @@
       ]
     },
     {
-      "name": "--sf-color-action-dark",
+      "name": "--sf-color-action-50",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "knob",
+      "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
-      "group": "DARK SOURCE TOKENS (-dark, animatable)",
-      "description": "Registered <color> dark counterpart of --sf-color-action. Enables smooth CSS transitions when toggling between light and dark mode; without <color> registration the browser cannot interpolate and transitions snap at 50%.",
-      "value": "oklch(0.70 0.198 235)",
+      "category": "Palette tokens",
+      "area": "palette",
+      "group": "action",
+      "description": "Lightest action tint. Background fill for subtle action-tinted surfaces.",
+      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-50), var(--sf-color-surface))",
       "aliasOf": null,
-      "registered": true,
-      "animatable": true,
-      "syntax": "<color>",
-      "inherits": true,
-      "optional": false,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2388,29 +2364,27 @@
       ]
     },
     {
-      "name": "--sf-color-action-darker",
+      "name": "--sf-color-action-500",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
+      "category": "Palette tokens",
+      "area": "palette",
       "group": "action",
-      "description": "Deep action shade for high-contrast contexts.",
-      "value": "var(--sf-color-action-600)",
-      "aliasOf": "--sf-color-action-600",
+      "description": "Mid action shade — the 'pure' hue. Accessible on both light and dark backgrounds.",
+      "value": "var(--sf-color-action)",
+      "aliasOf": "--sf-color-action",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css",
         "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2418,28 +2392,27 @@
       ]
     },
     {
-      "name": "--sf-color-action-ghost",
+      "name": "--sf-color-action-600",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
+      "category": "Palette tokens",
+      "area": "palette",
       "group": "action",
-      "description": "Near-transparent action tint for ghost-button hover backgrounds.",
-      "value": "oklch(from var(--sf-color-action) l c h / 0.05)",
+      "description": "Mid-dark action shade. Text on light surfaces, icon fills.",
+      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-600), var(--sf-color-text))",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2447,28 +2420,27 @@
       ]
     },
     {
-      "name": "--sf-color-action-light",
+      "name": "--sf-color-action-700",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "knob",
+      "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
-      "group": "BRAND COLORS (-light source tokens, animatable)",
-      "description": "OKLCH lightness source for the action color. Animate this to smoothly transition between light and dark brand themes.",
-      "value": "oklch(0.50 0.22 235)",
+      "category": "Palette tokens",
+      "area": "palette",
+      "group": "action",
+      "description": "Dark action shade. Strong text and icon fills on light backgrounds.",
+      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-700), var(--sf-color-text))",
       "aliasOf": null,
-      "registered": true,
-      "animatable": true,
-      "syntax": "<color>",
-      "inherits": true,
-      "optional": false,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2476,29 +2448,27 @@
       ]
     },
     {
-      "name": "--sf-color-action-lighter",
+      "name": "--sf-color-action-800",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
+      "category": "Palette tokens",
+      "area": "palette",
       "group": "action",
-      "description": "Light action shade for soft accents.",
-      "value": "var(--sf-color-action-400)",
-      "aliasOf": "--sf-color-action-400",
+      "description": "Very dark action shade. High-contrast text on white.",
+      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-800), var(--sf-color-text))",
+      "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css",
         "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2506,28 +2476,27 @@
       ]
     },
     {
-      "name": "--sf-color-action-muted",
+      "name": "--sf-color-action-900",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
+      "category": "Palette tokens",
+      "area": "palette",
       "group": "action",
-      "description": "Medium action fill — outlined button hover backgrounds.",
-      "value": "oklch(from var(--sf-color-action) l c h / 0.30)",
+      "description": "Near-black action shade. Extreme contrast on white surfaces.",
+      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-900), var(--sf-color-text))",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2535,28 +2504,27 @@
       ]
     },
     {
-      "name": "--sf-color-action-subtle",
+      "name": "--sf-color-action-950",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
+      "category": "Palette tokens",
+      "area": "palette",
       "group": "action",
-      "description": "Lightest action tint — selected rows, active nav, chips.",
-      "value": "oklch(from var(--sf-color-action) l c h / 0.10)",
+      "description": "Darkest action tint. Near-black for dark-theme surface accents.",
+      "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-950), var(--sf-color-text))",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2564,29 +2532,27 @@
       ]
     },
     {
-      "name": "--sf-color-action-superdark",
+      "name": "--sf-color-action-a10",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
+      "category": "Palette tokens",
+      "area": "palette",
       "group": "action",
-      "description": "Near-black action shade for maximum contrast on light surfaces.",
-      "value": "var(--sf-color-action-950)",
-      "aliasOf": "--sf-color-action-950",
+      "description": "10% opacity action tint. Subtle hover or selected-row background.",
+      "value": "oklch(from var(--sf-color-action) l c h / 0.10)",
+      "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css",
         "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2594,29 +2560,27 @@
       ]
     },
     {
-      "name": "--sf-color-action-superlight",
+      "name": "--sf-color-action-a30",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
+      "category": "Palette tokens",
+      "area": "palette",
       "group": "action",
-      "description": "Near-white action shade for maximum contrast on dark surfaces.",
-      "value": "var(--sf-color-action-50)",
-      "aliasOf": "--sf-color-action-50",
+      "description": "30% opacity action tint.",
+      "value": "oklch(from var(--sf-color-action) l c h / 0.30)",
+      "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css",
         "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2624,29 +2588,27 @@
       ]
     },
     {
-      "name": "--sf-color-action-xdark",
+      "name": "--sf-color-action-a5",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
+      "category": "Palette tokens",
+      "area": "palette",
       "group": "action",
-      "description": "Extra-dark action shade.",
-      "value": "var(--sf-color-action-800)",
-      "aliasOf": "--sf-color-action-800",
+      "description": "5% opacity action tint. Barely-there hover highlight.",
+      "value": "oklch(from var(--sf-color-action) l c h / 0.05)",
+      "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css",
         "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2654,29 +2616,27 @@
       ]
     },
     {
-      "name": "--sf-color-action-xlight",
+      "name": "--sf-color-action-a50",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
+      "category": "Palette tokens",
+      "area": "palette",
       "group": "action",
-      "description": "Extra-light action shade.",
-      "value": "var(--sf-color-action-200)",
-      "aliasOf": "--sf-color-action-200",
+      "description": "50% opacity action tint. Mid-transparency badge or overlay.",
+      "value": "oklch(from var(--sf-color-action) l c h / 0.50)",
+      "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css",
         "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2684,16 +2644,44 @@
       ]
     },
     {
-      "name": "--sf-color-base",
+      "name": "--sf-color-action-a80",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
+      "category": "Palette tokens",
+      "area": "palette",
+      "group": "action",
+      "description": "80% opacity action tint.",
+      "value": "oklch(from var(--sf-color-action) l c h / 0.80)",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "optional/tokens.palette.css"
+      ],
+      "bundles": [
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "--sf-color-action-dark",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "color",
       "category": "Core tokens",
       "area": "core",
       "group": "DARK SOURCE TOKENS (-dark, animatable)",
-      "description": "Secondary interactive color for supporting actions and secondary buttons.",
-      "value": "light-dark(var(--sf-color-base-light), var(--sf-color-base-dark, oklch(from var(--sf-color-base-light) clamp(0.16, calc(1.18 - l), 0.24) calc(c * 0.5) h)))",
+      "description": "Registered <color> dark counterpart of --sf-color-action. Enables smooth CSS transitions when toggling between light and dark mode; without <color> registration the browser cannot interpolate and transitions snap at 50%.",
+      "value": "oklch(0.70 0.198 235)",
       "aliasOf": null,
       "registered": true,
       "animatable": true,
@@ -2713,17 +2701,17 @@
       ]
     },
     {
-      "name": "--sf-color-base--active",
+      "name": "--sf-color-action-darker",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "base",
-      "description": "Base color at pressed/active brightness.",
-      "value": "var(--sf-color-base-xdark)",
-      "aliasOf": "--sf-color-base-xdark",
+      "group": "action",
+      "description": "Deep action shade for high-contrast contexts.",
+      "value": "var(--sf-color-action-600)",
+      "aliasOf": "--sf-color-action-600",
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -2731,7 +2719,8 @@
       "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "core/tokens.css",
+        "optional/tokens.palette.css"
       ],
       "bundles": [
         "essential",
@@ -2742,17 +2731,17 @@
       ]
     },
     {
-      "name": "--sf-color-base--hover",
+      "name": "--sf-color-action-ghost",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "base",
-      "description": "Base color at hover brightness.",
-      "value": "var(--sf-color-base-darker)",
-      "aliasOf": "--sf-color-base-darker",
+      "group": "action",
+      "description": "Near-transparent action tint for ghost-button hover backgrounds.",
+      "value": "oklch(from var(--sf-color-action) l c h / 0.05)",
+      "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -2771,27 +2760,58 @@
       ]
     },
     {
-      "name": "--sf-color-base-100",
+      "name": "--sf-color-action-light",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "consumption",
+      "role": "knob",
       "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
-      "group": "base",
-      "description": "Very light base shade. Hover fills, badge backgrounds.",
-      "value": "color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-100), var(--sf-color-base))",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "BRAND COLORS (-light source tokens, animatable)",
+      "description": "OKLCH lightness source for the action color. Animate this to smoothly transition between light and dark brand themes.",
+      "value": "oklch(0.50 0.22 235)",
       "aliasOf": null,
+      "registered": true,
+      "animatable": true,
+      "syntax": "<color>",
+      "inherits": true,
+      "optional": false,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "core/tokens.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "--sf-color-action-lighter",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "color",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "action",
+      "description": "Light action shade for soft accents.",
+      "value": "var(--sf-color-action-400)",
+      "aliasOf": "--sf-color-action-400",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
+        "core/tokens.css",
         "optional/tokens.palette.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2799,27 +2819,28 @@
       ]
     },
     {
-      "name": "--sf-color-base-200",
+      "name": "--sf-color-action-muted",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
-      "group": "base",
-      "description": "Light base shade.",
-      "value": "color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-200), var(--sf-color-base))",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "action",
+      "description": "Medium action fill — outlined button hover backgrounds.",
+      "value": "oklch(from var(--sf-color-action) l c h / 0.30)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "optional/tokens.palette.css"
+        "core/tokens.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2827,27 +2848,28 @@
       ]
     },
     {
-      "name": "--sf-color-base-300",
+      "name": "--sf-color-action-subtle",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
-      "group": "base",
-      "description": "Light-mid base shade. Borders on light backgrounds.",
-      "value": "color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-300), var(--sf-color-base))",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "action",
+      "description": "Lightest action tint — selected rows, active nav, chips.",
+      "value": "oklch(from var(--sf-color-action) l c h / 0.10)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "optional/tokens.palette.css"
+        "core/tokens.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2855,27 +2877,29 @@
       ]
     },
     {
-      "name": "--sf-color-base-400",
+      "name": "--sf-color-action-superdark",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
-      "group": "base",
-      "description": "Mid-light base shade. Disabled fills.",
-      "value": "color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-400), var(--sf-color-base))",
-      "aliasOf": null,
+      "category": "Core tokens",
+      "area": "core",
+      "group": "action",
+      "description": "Near-black action shade for maximum contrast on light surfaces.",
+      "value": "var(--sf-color-action-950)",
+      "aliasOf": "--sf-color-action-950",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
+        "core/tokens.css",
         "optional/tokens.palette.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2883,27 +2907,29 @@
       ]
     },
     {
-      "name": "--sf-color-base-50",
+      "name": "--sf-color-action-superlight",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
-      "group": "base",
-      "description": "Lightest base tint.",
-      "value": "color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-50), var(--sf-color-base))",
-      "aliasOf": null,
+      "category": "Core tokens",
+      "area": "core",
+      "group": "action",
+      "description": "Near-white action shade for maximum contrast on dark surfaces.",
+      "value": "var(--sf-color-action-50)",
+      "aliasOf": "--sf-color-action-50",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
+        "core/tokens.css",
         "optional/tokens.palette.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2911,27 +2937,29 @@
       ]
     },
     {
-      "name": "--sf-color-base-500",
+      "name": "--sf-color-action-xdark",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
-      "group": "base",
-      "description": "Mid base shade — the 'pure' hue.",
-      "value": "var(--sf-color-base)",
-      "aliasOf": "--sf-color-base",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "action",
+      "description": "Extra-dark action shade.",
+      "value": "var(--sf-color-action-800)",
+      "aliasOf": "--sf-color-action-800",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
+        "core/tokens.css",
         "optional/tokens.palette.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2939,27 +2967,29 @@
       ]
     },
     {
-      "name": "--sf-color-base-600",
+      "name": "--sf-color-action-xlight",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
-      "group": "base",
-      "description": "Mid-dark base shade. Text on light surfaces.",
-      "value": "color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-600), var(--sf-color-text))",
-      "aliasOf": null,
+      "category": "Core tokens",
+      "area": "core",
+      "group": "action",
+      "description": "Extra-light action shade.",
+      "value": "var(--sf-color-action-200)",
+      "aliasOf": "--sf-color-action-200",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
+        "core/tokens.css",
         "optional/tokens.palette.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2967,27 +2997,28 @@
       ]
     },
     {
-      "name": "--sf-color-base-700",
+      "name": "--sf-color-base",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
-      "group": "base",
-      "description": "Dark base shade.",
-      "value": "color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-700), var(--sf-color-text))",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "DARK SOURCE TOKENS (-dark, animatable)",
+      "description": "Secondary interactive color for supporting actions and secondary buttons.",
+      "value": "light-dark(var(--sf-color-base-light), var(--sf-color-base-dark, oklch(from var(--sf-color-base-light) clamp(0.16, calc(1.18 - l), 0.24) calc(c * 0.5) h)))",
       "aliasOf": null,
-      "registered": false,
-      "animatable": false,
-      "syntax": null,
-      "inherits": null,
-      "optional": true,
+      "registered": true,
+      "animatable": true,
+      "syntax": "<color>",
+      "inherits": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "optional/tokens.palette.css"
+        "core/tokens.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -2995,27 +3026,28 @@
       ]
     },
     {
-      "name": "--sf-color-base-800",
+      "name": "--sf-color-base--active",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
+      "category": "Core tokens",
+      "area": "core",
       "group": "base",
-      "description": "Very dark base shade.",
-      "value": "color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-800), var(--sf-color-text))",
-      "aliasOf": null,
+      "description": "Base color at pressed/active brightness.",
+      "value": "var(--sf-color-base-xdark)",
+      "aliasOf": "--sf-color-base-xdark",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "optional/tokens.palette.css"
+        "core/tokens.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -3023,27 +3055,28 @@
       ]
     },
     {
-      "name": "--sf-color-base-900",
+      "name": "--sf-color-base--hover",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Palette tokens",
-      "area": "palette",
+      "category": "Core tokens",
+      "area": "core",
       "group": "base",
-      "description": "Near-black base shade.",
-      "value": "color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-900), var(--sf-color-text))",
-      "aliasOf": null,
+      "description": "Base color at hover brightness.",
+      "value": "var(--sf-color-base-darker)",
+      "aliasOf": "--sf-color-base-darker",
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": true,
+      "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "optional/tokens.palette.css"
+        "core/tokens.css"
       ],
       "bundles": [
+        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -3051,7 +3084,7 @@
       ]
     },
     {
-      "name": "--sf-color-base-950",
+      "name": "--sf-color-base-100",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -3059,8 +3092,8 @@
       "category": "Palette tokens",
       "area": "palette",
       "group": "base",
-      "description": "Darkest base tint.",
-      "value": "color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-950), var(--sf-color-text))",
+      "description": "Very light base shade. Hover fills, badge backgrounds.",
+      "value": "color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-100), var(--sf-color-base))",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -3079,7 +3112,7 @@
       ]
     },
     {
-      "name": "--sf-color-base-a10",
+      "name": "--sf-color-base-200",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -3087,8 +3120,8 @@
       "category": "Palette tokens",
       "area": "palette",
       "group": "base",
-      "description": "10% opacity base tint.",
-      "value": "oklch(from var(--sf-color-base) l c h / 0.10)",
+      "description": "Light base shade.",
+      "value": "color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-200), var(--sf-color-base))",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -3107,7 +3140,7 @@
       ]
     },
     {
-      "name": "--sf-color-base-a30",
+      "name": "--sf-color-base-300",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -3115,8 +3148,8 @@
       "category": "Palette tokens",
       "area": "palette",
       "group": "base",
-      "description": "30% opacity base tint.",
-      "value": "oklch(from var(--sf-color-base) l c h / 0.30)",
+      "description": "Light-mid base shade. Borders on light backgrounds.",
+      "value": "color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-300), var(--sf-color-base))",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -3135,7 +3168,7 @@
       ]
     },
     {
-      "name": "--sf-color-base-a5",
+      "name": "--sf-color-base-400",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -3143,8 +3176,8 @@
       "category": "Palette tokens",
       "area": "palette",
       "group": "base",
-      "description": "5% opacity base tint.",
-      "value": "oklch(from var(--sf-color-base) l c h / 0.05)",
+      "description": "Mid-light base shade. Disabled fills.",
+      "value": "color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-400), var(--sf-color-base))",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -3163,7 +3196,7 @@
       ]
     },
     {
-      "name": "--sf-color-base-a50",
+      "name": "--sf-color-base-50",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -3171,8 +3204,8 @@
       "category": "Palette tokens",
       "area": "palette",
       "group": "base",
-      "description": "50% opacity base tint.",
-      "value": "oklch(from var(--sf-color-base) l c h / 0.50)",
+      "description": "Lightest base tint.",
+      "value": "color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-50), var(--sf-color-base))",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -3191,7 +3224,7 @@
       ]
     },
     {
-      "name": "--sf-color-base-a80",
+      "name": "--sf-color-base-500",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -3199,9 +3232,9 @@
       "category": "Palette tokens",
       "area": "palette",
       "group": "base",
-      "description": "80% opacity base tint.",
-      "value": "oklch(from var(--sf-color-base) l c h / 0.80)",
-      "aliasOf": null,
+      "description": "Mid base shade — the 'pure' hue.",
+      "value": "var(--sf-color-base)",
+      "aliasOf": "--sf-color-base",
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -3219,28 +3252,27 @@
       ]
     },
     {
-      "name": "--sf-color-base-dark",
+      "name": "--sf-color-base-600",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "knob",
+      "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
-      "group": "DARK SOURCE TOKENS (-dark, animatable)",
-      "description": "Registered <color> dark counterpart of --sf-color-base.",
-      "value": "oklch(0.22 0.003 250)",
+      "category": "Palette tokens",
+      "area": "palette",
+      "group": "base",
+      "description": "Mid-dark base shade. Text on light surfaces.",
+      "value": "color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-600), var(--sf-color-text))",
       "aliasOf": null,
-      "registered": true,
-      "animatable": true,
-      "syntax": "<color>",
-      "inherits": true,
-      "optional": false,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -3248,29 +3280,27 @@
       ]
     },
     {
-      "name": "--sf-color-base-darker",
+      "name": "--sf-color-base-700",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
+      "category": "Palette tokens",
+      "area": "palette",
       "group": "base",
-      "description": "Deep base shade.",
-      "value": "var(--sf-color-base-600)",
-      "aliasOf": "--sf-color-base-600",
+      "description": "Dark base shade.",
+      "value": "color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-700), var(--sf-color-text))",
+      "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css",
         "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -3278,28 +3308,27 @@
       ]
     },
     {
-      "name": "--sf-color-base-ghost",
+      "name": "--sf-color-base-800",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
+      "category": "Palette tokens",
+      "area": "palette",
       "group": "base",
-      "description": "Near-transparent base tint for ghost-button hover backgrounds.",
-      "value": "oklch(from var(--sf-color-base) l c h / 0.05)",
+      "description": "Very dark base shade.",
+      "value": "color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-800), var(--sf-color-text))",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -3307,28 +3336,27 @@
       ]
     },
     {
-      "name": "--sf-color-base-light",
+      "name": "--sf-color-base-900",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "knob",
+      "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
-      "group": "BRAND COLORS (-light source tokens, animatable)",
-      "description": "OKLCH lightness source for the base color.",
-      "value": "oklch(0.96 0.006 250)",
+      "category": "Palette tokens",
+      "area": "palette",
+      "group": "base",
+      "description": "Near-black base shade.",
+      "value": "color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-900), var(--sf-color-text))",
       "aliasOf": null,
-      "registered": true,
-      "animatable": true,
-      "syntax": "<color>",
-      "inherits": true,
-      "optional": false,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -3336,29 +3364,27 @@
       ]
     },
     {
-      "name": "--sf-color-base-lighter",
+      "name": "--sf-color-base-950",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
+      "category": "Palette tokens",
+      "area": "palette",
       "group": "base",
-      "description": "Light base shade.",
-      "value": "var(--sf-color-base-400)",
-      "aliasOf": "--sf-color-base-400",
+      "description": "Darkest base tint.",
+      "value": "color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-950), var(--sf-color-text))",
+      "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css",
         "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -3366,28 +3392,27 @@
       ]
     },
     {
-      "name": "--sf-color-base-muted",
+      "name": "--sf-color-base-a10",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
+      "category": "Palette tokens",
+      "area": "palette",
       "group": "base",
-      "description": "Medium base fill.",
-      "value": "oklch(from var(--sf-color-base) l c h / 0.30)",
+      "description": "10% opacity base tint.",
+      "value": "oklch(from var(--sf-color-base) l c h / 0.10)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -3395,28 +3420,27 @@
       ]
     },
     {
-      "name": "--sf-color-base-subtle",
+      "name": "--sf-color-base-a30",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
+      "category": "Palette tokens",
+      "area": "palette",
       "group": "base",
-      "description": "Lightest base tint.",
-      "value": "oklch(from var(--sf-color-base) l c h / 0.10)",
+      "description": "30% opacity base tint.",
+      "value": "oklch(from var(--sf-color-base) l c h / 0.30)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -3424,29 +3448,27 @@
       ]
     },
     {
-      "name": "--sf-color-base-superdark",
+      "name": "--sf-color-base-a5",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
+      "category": "Palette tokens",
+      "area": "palette",
       "group": "base",
-      "description": "Near-black base shade.",
-      "value": "var(--sf-color-base-950)",
-      "aliasOf": "--sf-color-base-950",
+      "description": "5% opacity base tint.",
+      "value": "oklch(from var(--sf-color-base) l c h / 0.05)",
+      "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css",
         "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -3454,29 +3476,27 @@
       ]
     },
     {
-      "name": "--sf-color-base-superlight",
+      "name": "--sf-color-base-a50",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
+      "category": "Palette tokens",
+      "area": "palette",
       "group": "base",
-      "description": "Near-white base shade.",
-      "value": "var(--sf-color-base-50)",
-      "aliasOf": "--sf-color-base-50",
+      "description": "50% opacity base tint.",
+      "value": "oklch(from var(--sf-color-base) l c h / 0.50)",
+      "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css",
         "optional/tokens.palette.css"
       ],
       "bundles": [
-        "essential",
         "full",
         "optimal",
         "optimal-components",
@@ -3484,27 +3504,54 @@
       ]
     },
     {
-      "name": "--sf-color-base-xdark",
+      "name": "--sf-color-base-a80",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
-      "category": "Core tokens",
-      "area": "core",
+      "category": "Palette tokens",
+      "area": "palette",
       "group": "base",
-      "description": "Extra-dark base shade.",
-      "value": "var(--sf-color-base-800)",
-      "aliasOf": "--sf-color-base-800",
+      "description": "80% opacity base tint.",
+      "value": "oklch(from var(--sf-color-base) l c h / 0.80)",
+      "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
       "inherits": null,
-      "optional": false,
+      "optional": true,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css",
         "optional/tokens.palette.css"
       ],
+      "bundles": [
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "--sf-color-base-dark",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "color",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "DARK SOURCE TOKENS (-dark, animatable)",
+      "description": "Registered <color> dark counterpart of --sf-color-base.",
+      "value": "oklch(0.22 0.003 250)",
+      "aliasOf": null,
+      "registered": true,
+      "animatable": true,
+      "syntax": "<color>",
+      "inherits": true,
+      "optional": false,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "core/tokens.css"
+      ],
       "bundles": [
         "essential",
         "full",
@@ -3514,7 +3561,7 @@
       ]
     },
     {
-      "name": "--sf-color-base-xlight",
+      "name": "--sf-color-base-darker",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -3522,9 +3569,9 @@
       "category": "Core tokens",
       "area": "core",
       "group": "base",
-      "description": "Extra-light base shade.",
-      "value": "var(--sf-color-base-200)",
-      "aliasOf": "--sf-color-base-200",
+      "description": "Deep base shade.",
+      "value": "var(--sf-color-base-600)",
+      "aliasOf": "--sf-color-base-600",
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -3544,16 +3591,16 @@
       ]
     },
     {
-      "name": "--sf-color-bg",
+      "name": "--sf-color-base-ghost",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Surfaces",
-      "description": "Base page / component background. The canvas all other surfaces layer on top of.",
-      "value": "oklch(from var(--sf-color-base) calc(l + 0.02) c h)",
+      "group": "base",
+      "description": "Near-transparent base tint for ghost-button hover backgrounds.",
+      "value": "oklch(from var(--sf-color-base) l c h / 0.05)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -3573,21 +3620,21 @@
       ]
     },
     {
-      "name": "--sf-color-bg--active",
+      "name": "--sf-color-base-light",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "consumption",
+      "role": "knob",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Interactive states",
-      "description": "Background tint for pressed/active interactive elements.",
-      "value": "oklch(from var(--sf-color-neutral) l c h / 0.12)",
+      "group": "BRAND COLORS (-light source tokens, animatable)",
+      "description": "OKLCH lightness source for the base color.",
+      "value": "oklch(0.96 0.006 250)",
       "aliasOf": null,
-      "registered": false,
-      "animatable": false,
-      "syntax": null,
-      "inherits": null,
+      "registered": true,
+      "animatable": true,
+      "syntax": "<color>",
+      "inherits": true,
       "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
@@ -3602,17 +3649,17 @@
       ]
     },
     {
-      "name": "--sf-color-bg--disabled",
+      "name": "--sf-color-base-lighter",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Interactive states",
-      "description": "Background for disabled interactive elements.",
-      "value": "var(--sf-color-inset)",
-      "aliasOf": "--sf-color-inset",
+      "group": "base",
+      "description": "Light base shade.",
+      "value": "var(--sf-color-base-400)",
+      "aliasOf": "--sf-color-base-400",
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -3620,7 +3667,8 @@
       "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "core/tokens.css",
+        "optional/tokens.palette.css"
       ],
       "bundles": [
         "essential",
@@ -3631,16 +3679,16 @@
       ]
     },
     {
-      "name": "--sf-color-bg--focus",
+      "name": "--sf-color-base-muted",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Interactive states",
-      "description": "Background tint for focused interactive elements.",
-      "value": "oklch(from var(--sf-color-action) l c h / 0.06)",
+      "group": "base",
+      "description": "Medium base fill.",
+      "value": "oklch(from var(--sf-color-base) l c h / 0.30)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -3660,16 +3708,16 @@
       ]
     },
     {
-      "name": "--sf-color-bg--hover",
+      "name": "--sf-color-base-subtle",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Interactive states",
-      "description": "Background tint for hovered interactive elements (rows, list items, etc.).",
-      "value": "oklch(from var(--sf-color-neutral) l c h / 0.08)",
+      "group": "base",
+      "description": "Lightest base tint.",
+      "value": "oklch(from var(--sf-color-base) l c h / 0.10)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -3689,17 +3737,17 @@
       ]
     },
     {
-      "name": "--sf-color-bg--selected",
+      "name": "--sf-color-base-superdark",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Interactive states",
-      "description": "Background for selected items (checked rows, active nav links).",
-      "value": "oklch(from var(--sf-color-action) l c h / 0.1)",
-      "aliasOf": null,
+      "group": "base",
+      "description": "Near-black base shade.",
+      "value": "var(--sf-color-base-950)",
+      "aliasOf": "--sf-color-base-950",
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -3707,7 +3755,8 @@
       "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "core/tokens.css",
+        "optional/tokens.palette.css"
       ],
       "bundles": [
         "essential",
@@ -3718,17 +3767,17 @@
       ]
     },
     {
-      "name": "--sf-color-black",
+      "name": "--sf-color-base-superlight",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "knob",
+      "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Selection & backdrop",
-      "description": "Absolute black reference value.",
-      "value": "oklch(0% 0 0)",
-      "aliasOf": null,
+      "group": "base",
+      "description": "Near-white base shade.",
+      "value": "var(--sf-color-base-50)",
+      "aliasOf": "--sf-color-base-50",
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -3736,7 +3785,8 @@
       "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "core/tokens.css",
+        "optional/tokens.palette.css"
       ],
       "bundles": [
         "essential",
@@ -3747,17 +3797,17 @@
       ]
     },
     {
-      "name": "--sf-color-border",
+      "name": "--sf-color-base-xdark",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Borders",
-      "description": "Default border for dividers and component edges.",
-      "value": "light-dark( oklch(from var(--sf-color-neutral-light) clamp(0.70, calc(l + 0.35), 0.95) 0.005 h), oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.3), 0.55) 0.005 h) )",
-      "aliasOf": null,
+      "group": "base",
+      "description": "Extra-dark base shade.",
+      "value": "var(--sf-color-base-800)",
+      "aliasOf": "--sf-color-base-800",
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -3765,7 +3815,8 @@
       "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "core/tokens.css",
+        "optional/tokens.palette.css"
       ],
       "bundles": [
         "essential",
@@ -3776,17 +3827,17 @@
       ]
     },
     {
-      "name": "--sf-color-border--disabled",
+      "name": "--sf-color-base-xlight",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Border alpha tokens",
-      "description": "Semi-transparent border for disabled element edges.",
-      "value": "oklch(from var(--sf-color-border--subtle) l 0 h / 0.5)",
-      "aliasOf": null,
+      "group": "base",
+      "description": "Extra-light base shade.",
+      "value": "var(--sf-color-base-200)",
+      "aliasOf": "--sf-color-base-200",
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -3794,7 +3845,8 @@
       "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
-        "core/tokens.css"
+        "core/tokens.css",
+        "optional/tokens.palette.css"
       ],
       "bundles": [
         "essential",
@@ -3805,17 +3857,17 @@
       ]
     },
     {
-      "name": "--sf-color-border--focus",
+      "name": "--sf-color-bg",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Borders",
-      "description": "Focus indicator border, used alongside --sf-focus-ring-color.",
-      "value": "var(--sf-color-action)",
-      "aliasOf": "--sf-color-action",
+      "group": "Surfaces",
+      "description": "Base page / component background. The canvas all other surfaces layer on top of.",
+      "value": "oklch(from var(--sf-color-base) calc(l + 0.02) c h)",
+      "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -3834,16 +3886,16 @@
       ]
     },
     {
-      "name": "--sf-color-border--strong",
+      "name": "--sf-color-bg--active",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Borders",
-      "description": "Stronger border for visually prominent edges and active outlines.",
-      "value": "light-dark( oklch(from var(--sf-color-neutral-light) clamp(0.55, calc(l + 0.1), 0.85) 0.02 h), oklch(from var(--sf-color-neutral) clamp(0.38, calc(l - 0.1), 0.65) 0.02 h) )",
+      "group": "Interactive states",
+      "description": "Background tint for pressed/active interactive elements.",
+      "value": "oklch(from var(--sf-color-neutral) l c h / 0.12)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -3863,17 +3915,17 @@
       ]
     },
     {
-      "name": "--sf-color-border--subtle",
+      "name": "--sf-color-bg--disabled",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Borders",
-      "description": "Low-contrast border for subtle separation without strong visual weight.",
-      "value": "light-dark( oklch(from var(--sf-color-neutral-light) clamp(0.75, calc(l + 0.4), 0.97) 0.005 h), oklch(from var(--sf-color-neutral) clamp(0.20, calc(l - 0.38), 0.45) 0.005 h) )",
-      "aliasOf": null,
+      "group": "Interactive states",
+      "description": "Background for disabled interactive elements.",
+      "value": "var(--sf-color-inset)",
+      "aliasOf": "--sf-color-inset",
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -3892,16 +3944,16 @@
       ]
     },
     {
-      "name": "--sf-color-border--translucent",
+      "name": "--sf-color-bg--focus",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Border alpha tokens",
-      "description": "Translucent border for glass-morphism and frosted surfaces.",
-      "value": "oklch(from var(--sf-color-neutral) l c h / 0.15)",
+      "group": "Interactive states",
+      "description": "Background tint for focused interactive elements.",
+      "value": "oklch(from var(--sf-color-action) l c h / 0.06)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -3921,7 +3973,7 @@
       ]
     },
     {
-      "name": "--sf-color-code-bg",
+      "name": "--sf-color-bg--hover",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -3929,9 +3981,9 @@
       "category": "Core tokens",
       "area": "core",
       "group": "Interactive states",
-      "description": "Background for inline <code> elements. Usually a subtle tint of the inset surface.",
-      "value": "var(--sf-color-inset)",
-      "aliasOf": "--sf-color-inset",
+      "description": "Background tint for hovered interactive elements (rows, list items, etc.).",
+      "value": "oklch(from var(--sf-color-neutral) l c h / 0.08)",
+      "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -3950,16 +4002,16 @@
       ]
     },
     {
-      "name": "--sf-color-code-text",
+      "name": "--sf-color-bg--selected",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Text-on-color",
-      "description": "Text color for inline code and monospace preformatted text.",
-      "value": "oklch(from var(--sf-color-code-bg) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)",
+      "group": "Interactive states",
+      "description": "Background for selected items (checked rows, active nav links).",
+      "value": "oklch(from var(--sf-color-action) l c h / 0.1)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -3979,21 +4031,21 @@
       ]
     },
     {
-      "name": "--sf-color-danger",
+      "name": "--sf-color-black",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "consumption",
+      "role": "knob",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "DARK SOURCE TOKENS (-dark, animatable)",
-      "description": "Destructive / danger state color. Used for delete actions, error alerts, and critical warnings.",
-      "value": "light-dark(var(--sf-color-danger-light), var(--sf-color-danger-dark, oklch(from var(--sf-color-danger-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))",
+      "group": "Selection & backdrop",
+      "description": "Absolute black reference value.",
+      "value": "oklch(0% 0 0)",
       "aliasOf": null,
-      "registered": true,
-      "animatable": true,
-      "syntax": "<color>",
-      "inherits": true,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
       "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
@@ -4008,21 +4060,21 @@
       ]
     },
     {
-      "name": "--sf-color-danger-dark",
+      "name": "--sf-color-border",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "knob",
+      "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "DARK SOURCE TOKENS (-dark, animatable)",
-      "description": "Registered <color> dark counterpart of --sf-color-danger.",
-      "value": "oklch(0.71 0.198 12)",
+      "group": "Borders",
+      "description": "Default border for dividers and component edges.",
+      "value": "light-dark( oklch(from var(--sf-color-neutral-light) clamp(0.70, calc(l + 0.35), 0.95) 0.005 h), oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.3), 0.55) 0.005 h) )",
       "aliasOf": null,
-      "registered": true,
-      "animatable": true,
-      "syntax": "<color>",
-      "inherits": true,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
       "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
@@ -4037,21 +4089,21 @@
       ]
     },
     {
-      "name": "--sf-color-danger-light",
+      "name": "--sf-color-border--disabled",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "knob",
+      "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "STATUS COLORS (-light source tokens)",
-      "description": "OKLCH lightness source for the danger status color.",
-      "value": "oklch(0.48 0.22 12)",
+      "group": "Border alpha tokens",
+      "description": "Semi-transparent border for disabled element edges.",
+      "value": "oklch(from var(--sf-color-border--subtle) l 0 h / 0.5)",
       "aliasOf": null,
-      "registered": true,
-      "animatable": true,
-      "syntax": "<color>",
-      "inherits": true,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
       "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
@@ -4066,17 +4118,17 @@
       ]
     },
     {
-      "name": "--sf-color-danger-muted",
+      "name": "--sf-color-border--focus",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Status triplets",
-      "description": "Medium danger fill for icon backgrounds and badge fills.",
-      "value": "oklch(from var(--sf-color-danger) l c h / 0.3)",
-      "aliasOf": null,
+      "group": "Borders",
+      "description": "Focus indicator border, used alongside --sf-focus-ring-color.",
+      "value": "var(--sf-color-action)",
+      "aliasOf": "--sf-color-action",
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -4095,16 +4147,16 @@
       ]
     },
     {
-      "name": "--sf-color-danger-strong",
+      "name": "--sf-color-border--strong",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Status triplets",
-      "description": "High-contrast danger color for alert body text and icons.",
-      "value": "light-dark( oklch(from var(--sf-color-danger-light) calc(l - 0.1) c h), oklch(from var(--sf-color-danger) clamp(0.70, calc(l + 0.15), 1) c h) )",
+      "group": "Borders",
+      "description": "Stronger border for visually prominent edges and active outlines.",
+      "value": "light-dark( oklch(from var(--sf-color-neutral-light) clamp(0.55, calc(l + 0.1), 0.85) 0.02 h), oklch(from var(--sf-color-neutral) clamp(0.38, calc(l - 0.1), 0.65) 0.02 h) )",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -4124,16 +4176,16 @@
       ]
     },
     {
-      "name": "--sf-color-danger-subtle",
+      "name": "--sf-color-border--subtle",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Status triplets",
-      "description": "Light danger tint for error row backgrounds and alert container fills.",
-      "value": "oklch(from var(--sf-color-danger) l c h / 0.1)",
+      "group": "Borders",
+      "description": "Low-contrast border for subtle separation without strong visual weight.",
+      "value": "light-dark( oklch(from var(--sf-color-neutral-light) clamp(0.75, calc(l + 0.4), 0.97) 0.005 h), oklch(from var(--sf-color-neutral) clamp(0.20, calc(l - 0.38), 0.45) 0.005 h) )",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -4153,16 +4205,16 @@
       ]
     },
     {
-      "name": "--sf-color-dim",
+      "name": "--sf-color-border--translucent",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "knob",
+      "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Selection & backdrop",
-      "description": "Backdrop overlay color for modals, drawers, and lightboxes.",
-      "value": "oklch(0 0 0 / 0.5)",
+      "group": "Border alpha tokens",
+      "description": "Translucent border for glass-morphism and frosted surfaces.",
+      "value": "oklch(from var(--sf-color-neutral) l c h / 0.15)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -4182,21 +4234,21 @@
       ]
     },
     {
-      "name": "--sf-color-error",
+      "name": "--sf-color-code-bg",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "DARK SOURCE TOKENS (-dark, animatable)",
-      "description": "Form validation error color. Typically same hue as danger but can be tuned independently.",
-      "value": "light-dark(var(--sf-color-error-light), var(--sf-color-error-dark, oklch(from var(--sf-color-error-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))",
-      "aliasOf": null,
-      "registered": true,
-      "animatable": true,
-      "syntax": "<color>",
-      "inherits": true,
+      "group": "Interactive states",
+      "description": "Background for inline <code> elements. Usually a subtle tint of the inset surface.",
+      "value": "var(--sf-color-inset)",
+      "aliasOf": "--sf-color-inset",
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
       "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
@@ -4211,21 +4263,21 @@
       ]
     },
     {
-      "name": "--sf-color-error-dark",
+      "name": "--sf-color-code-text",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "knob",
+      "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "DARK SOURCE TOKENS (-dark, animatable)",
-      "description": "Registered <color> dark counterpart of --sf-color-error.",
-      "value": "oklch(0.70 0.18 25)",
+      "group": "Text-on-color",
+      "description": "Text color for inline code and monospace preformatted text.",
+      "value": "oklch(from var(--sf-color-code-bg) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)",
       "aliasOf": null,
-      "registered": true,
-      "animatable": true,
-      "syntax": "<color>",
-      "inherits": true,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
       "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
@@ -4240,16 +4292,16 @@
       ]
     },
     {
-      "name": "--sf-color-error-light",
+      "name": "--sf-color-danger",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "knob",
+      "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "STATUS COLORS (-light source tokens)",
-      "description": "OKLCH lightness source for the error status color.",
-      "value": "oklch(0.50 0.20 25)",
+      "group": "DARK SOURCE TOKENS (-dark, animatable)",
+      "description": "Destructive / danger state color. Used for delete actions, error alerts, and critical warnings.",
+      "value": "light-dark(var(--sf-color-danger-light), var(--sf-color-danger-dark, oklch(from var(--sf-color-danger-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))",
       "aliasOf": null,
       "registered": true,
       "animatable": true,
@@ -4269,17 +4321,75 @@
       ]
     },
     {
-      "name": "--sf-color-error-muted",
+      "name": "--sf-color-danger-dark",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "consumption",
+      "role": "knob",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Status triplets",
-      "description": "Medium error fill for icons and inline badges.",
-      "value": "oklch(from var(--sf-color-error) l c h / 0.3)",
-      "aliasOf": null,
+      "group": "DARK SOURCE TOKENS (-dark, animatable)",
+      "description": "Registered <color> dark counterpart of --sf-color-danger.",
+      "value": "oklch(0.71 0.198 12)",
+      "aliasOf": null,
+      "registered": true,
+      "animatable": true,
+      "syntax": "<color>",
+      "inherits": true,
+      "optional": false,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "core/tokens.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "--sf-color-danger-light",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "color",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "STATUS COLORS (-light source tokens)",
+      "description": "OKLCH lightness source for the danger status color.",
+      "value": "oklch(0.48 0.22 12)",
+      "aliasOf": null,
+      "registered": true,
+      "animatable": true,
+      "syntax": "<color>",
+      "inherits": true,
+      "optional": false,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "core/tokens.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "--sf-color-danger-muted",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "color",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "Status triplets",
+      "description": "Medium danger fill for icon backgrounds and badge fills.",
+      "value": "oklch(from var(--sf-color-danger) l c h / 0.3)",
+      "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -4298,7 +4408,7 @@
       ]
     },
     {
-      "name": "--sf-color-error-strong",
+      "name": "--sf-color-danger-strong",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -4306,8 +4416,8 @@
       "category": "Core tokens",
       "area": "core",
       "group": "Status triplets",
-      "description": "High-contrast error color for validation message text.",
-      "value": "light-dark( oklch(from var(--sf-color-error-light) calc(l - 0.1) c h), oklch(from var(--sf-color-error) clamp(0.70, calc(l + 0.15), 1) c h) )",
+      "description": "High-contrast danger color for alert body text and icons.",
+      "value": "light-dark( oklch(from var(--sf-color-danger-light) calc(l - 0.1) c h), oklch(from var(--sf-color-danger) clamp(0.70, calc(l + 0.15), 1) c h) )",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -4327,7 +4437,7 @@
       ]
     },
     {
-      "name": "--sf-color-error-subtle",
+      "name": "--sf-color-danger-subtle",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -4335,8 +4445,8 @@
       "category": "Core tokens",
       "area": "core",
       "group": "Status triplets",
-      "description": "Light error tint for validation field backgrounds.",
-      "value": "oklch(from var(--sf-color-error) l c h / 0.1)",
+      "description": "Light danger tint for error row backgrounds and alert container fills.",
+      "value": "oklch(from var(--sf-color-danger) l c h / 0.1)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -4356,16 +4466,16 @@
       ]
     },
     {
-      "name": "--sf-color-heading",
+      "name": "--sf-color-dim",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "consumption",
+      "role": "knob",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Text",
-      "description": "Heading text color. Slightly stronger contrast than body text for visual hierarchy.",
-      "value": "light-dark( oklch(from var(--sf-color-neutral-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )",
+      "group": "Selection & backdrop",
+      "description": "Backdrop overlay color for modals, drawers, and lightboxes.",
+      "value": "oklch(0 0 0 / 0.5)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -4385,7 +4495,7 @@
       ]
     },
     {
-      "name": "--sf-color-info",
+      "name": "--sf-color-error",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -4393,8 +4503,8 @@
       "category": "Core tokens",
       "area": "core",
       "group": "DARK SOURCE TOKENS (-dark, animatable)",
-      "description": "Informational color for neutral tips, hints, and non-urgent notices.",
-      "value": "light-dark(var(--sf-color-info-light), var(--sf-color-info-dark, oklch(from var(--sf-color-info-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))",
+      "description": "Form validation error color. Typically same hue as danger but can be tuned independently.",
+      "value": "light-dark(var(--sf-color-error-light), var(--sf-color-error-dark, oklch(from var(--sf-color-error-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))",
       "aliasOf": null,
       "registered": true,
       "animatable": true,
@@ -4414,7 +4524,7 @@
       ]
     },
     {
-      "name": "--sf-color-info-dark",
+      "name": "--sf-color-error-dark",
       "type": "token",
       "tier": "PUBLIC",
       "role": "knob",
@@ -4422,8 +4532,8 @@
       "category": "Core tokens",
       "area": "core",
       "group": "DARK SOURCE TOKENS (-dark, animatable)",
-      "description": "Registered <color> dark counterpart of --sf-color-info.",
-      "value": "oklch(0.71 0.162 235)",
+      "description": "Registered <color> dark counterpart of --sf-color-error.",
+      "value": "oklch(0.70 0.18 25)",
       "aliasOf": null,
       "registered": true,
       "animatable": true,
@@ -4443,7 +4553,7 @@
       ]
     },
     {
-      "name": "--sf-color-info-light",
+      "name": "--sf-color-error-light",
       "type": "token",
       "tier": "PUBLIC",
       "role": "knob",
@@ -4451,8 +4561,8 @@
       "category": "Core tokens",
       "area": "core",
       "group": "STATUS COLORS (-light source tokens)",
-      "description": "OKLCH lightness source for the info status color.",
-      "value": "oklch(0.48 0.18 235)",
+      "description": "OKLCH lightness source for the error status color.",
+      "value": "oklch(0.50 0.20 25)",
       "aliasOf": null,
       "registered": true,
       "animatable": true,
@@ -4472,7 +4582,7 @@
       ]
     },
     {
-      "name": "--sf-color-info-muted",
+      "name": "--sf-color-error-muted",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -4480,8 +4590,8 @@
       "category": "Core tokens",
       "area": "core",
       "group": "Status triplets",
-      "description": "Medium info fill for info icons and hint chips.",
-      "value": "oklch(from var(--sf-color-info) l c h / 0.3)",
+      "description": "Medium error fill for icons and inline badges.",
+      "value": "oklch(from var(--sf-color-error) l c h / 0.3)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -4501,7 +4611,7 @@
       ]
     },
     {
-      "name": "--sf-color-info-strong",
+      "name": "--sf-color-error-strong",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -4509,8 +4619,8 @@
       "category": "Core tokens",
       "area": "core",
       "group": "Status triplets",
-      "description": "High-contrast info color for hint body text.",
-      "value": "light-dark( oklch(from var(--sf-color-info-light) calc(l - 0.1) c h), oklch(from var(--sf-color-info) clamp(0.70, calc(l + 0.15), 1) c h) )",
+      "description": "High-contrast error color for validation message text.",
+      "value": "light-dark( oklch(from var(--sf-color-error-light) calc(l - 0.1) c h), oklch(from var(--sf-color-error) clamp(0.70, calc(l + 0.15), 1) c h) )",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -4530,7 +4640,7 @@
       ]
     },
     {
-      "name": "--sf-color-info-subtle",
+      "name": "--sf-color-error-subtle",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -4538,8 +4648,8 @@
       "category": "Core tokens",
       "area": "core",
       "group": "Status triplets",
-      "description": "Light info tint for informational note backgrounds.",
-      "value": "oklch(from var(--sf-color-info) l c h / 0.1)",
+      "description": "Light error tint for validation field backgrounds.",
+      "value": "oklch(from var(--sf-color-error) l c h / 0.1)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -4559,16 +4669,16 @@
       ]
     },
     {
-      "name": "--sf-color-inset",
+      "name": "--sf-color-heading",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Surfaces",
-      "description": "Slightly inset surface for nested areas — inputs, code blocks, sidebar panels.",
-      "value": "oklch(from var(--sf-color-base) calc(l - 0.02) c h)",
+      "group": "Text",
+      "description": "Heading text color. Slightly stronger contrast than body text for visual hierarchy.",
+      "value": "light-dark( oklch(from var(--sf-color-neutral-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -4588,21 +4698,21 @@
       ]
     },
     {
-      "name": "--sf-color-inverse",
+      "name": "--sf-color-info",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Surfaces",
-      "description": "Inverted (dark-on-light / light-on-dark) surface for high-contrast banners or tooltips.",
-      "value": "oklch(from var(--sf-color-base) calc(1 - l) c h)",
+      "group": "DARK SOURCE TOKENS (-dark, animatable)",
+      "description": "Informational color for neutral tips, hints, and non-urgent notices.",
+      "value": "light-dark(var(--sf-color-info-light), var(--sf-color-info-dark, oklch(from var(--sf-color-info-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))",
       "aliasOf": null,
-      "registered": false,
-      "animatable": false,
-      "syntax": null,
-      "inherits": null,
+      "registered": true,
+      "animatable": true,
+      "syntax": "<color>",
+      "inherits": true,
       "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
@@ -4617,21 +4727,21 @@
       ]
     },
     {
-      "name": "--sf-color-link",
+      "name": "--sf-color-info-dark",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "consumption",
+      "role": "knob",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Links",
-      "description": "Default hyperlink color.",
-      "value": "light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c h), oklch(from var(--sf-color-action) clamp(0.68, l, 1) c h) )",
+      "group": "DARK SOURCE TOKENS (-dark, animatable)",
+      "description": "Registered <color> dark counterpart of --sf-color-info.",
+      "value": "oklch(0.71 0.162 235)",
       "aliasOf": null,
-      "registered": false,
-      "animatable": false,
-      "syntax": null,
-      "inherits": null,
+      "registered": true,
+      "animatable": true,
+      "syntax": "<color>",
+      "inherits": true,
       "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
@@ -4646,21 +4756,21 @@
       ]
     },
     {
-      "name": "--sf-color-link--active",
+      "name": "--sf-color-info-light",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "consumption",
+      "role": "knob",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Links",
-      "description": "Link color when actively pressed.",
-      "value": "light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.21, 0.34), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + 0.15, 0.74), 1) c h) )",
+      "group": "STATUS COLORS (-light source tokens)",
+      "description": "OKLCH lightness source for the info status color.",
+      "value": "oklch(0.48 0.18 235)",
       "aliasOf": null,
-      "registered": false,
-      "animatable": false,
-      "syntax": null,
-      "inherits": null,
+      "registered": true,
+      "animatable": true,
+      "syntax": "<color>",
+      "inherits": true,
       "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
@@ -4675,17 +4785,17 @@
       ]
     },
     {
-      "name": "--sf-color-link--disabled",
+      "name": "--sf-color-info-muted",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Links",
-      "description": "Disabled link color (low contrast, no interaction).",
-      "value": "var(--sf-color-text--disabled)",
-      "aliasOf": "--sf-color-text--disabled",
+      "group": "Status triplets",
+      "description": "Medium info fill for info icons and hint chips.",
+      "value": "oklch(from var(--sf-color-info) l c h / 0.3)",
+      "aliasOf": null,
       "registered": false,
       "animatable": false,
       "syntax": null,
@@ -4704,16 +4814,16 @@
       ]
     },
     {
-      "name": "--sf-color-link--hover",
+      "name": "--sf-color-info-strong",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Links",
-      "description": "Link color on hover.",
-      "value": "light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.15, 0.40), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + 0.10, 0.68), 1) c h) )",
+      "group": "Status triplets",
+      "description": "High-contrast info color for hint body text.",
+      "value": "light-dark( oklch(from var(--sf-color-info-light) calc(l - 0.1) c h), oklch(from var(--sf-color-info) clamp(0.70, calc(l + 0.15), 1) c h) )",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -4733,16 +4843,16 @@
       ]
     },
     {
-      "name": "--sf-color-link--underline",
+      "name": "--sf-color-info-subtle",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Link alpha token",
-      "description": "Color of the link underline decoration. Defaults to a semi-transparent variant of the link color.",
-      "value": "oklch(from var(--sf-color-action) l c h / 0.3)",
+      "group": "Status triplets",
+      "description": "Light info tint for informational note backgrounds.",
+      "value": "oklch(from var(--sf-color-info) l c h / 0.1)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -4762,16 +4872,16 @@
       ]
     },
     {
-      "name": "--sf-color-link--visited",
+      "name": "--sf-color-inset",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Links",
-      "description": "Visited link color.",
-      "value": "light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c calc(h + 60)), oklch(from var(--sf-color-action) clamp(0.68, l, 1) c calc(h + 60)) )",
+      "group": "Surfaces",
+      "description": "Slightly inset surface for nested areas — inputs, code blocks, sidebar panels.",
+      "value": "oklch(from var(--sf-color-base) calc(l - 0.02) c h)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -4791,16 +4901,16 @@
       ]
     },
     {
-      "name": "--sf-color-mark-bg",
+      "name": "--sf-color-inverse",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Selection & mark",
-      "description": "Background color for highlighted <mark> elements.",
-      "value": "oklch(from var(--sf-color-warning) l c h / 0.25)",
+      "group": "Surfaces",
+      "description": "Inverted (dark-on-light / light-on-dark) surface for high-contrast banners or tooltips.",
+      "value": "oklch(from var(--sf-color-base) calc(1 - l) c h)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -4820,16 +4930,16 @@
       ]
     },
     {
-      "name": "--sf-color-mark-text",
+      "name": "--sf-color-link",
       "type": "token",
       "tier": "PUBLIC",
-      "role": "knob",
+      "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "Selection & backdrop",
-      "description": "Text color inside highlighted <mark> elements.",
-      "value": "inherit",
+      "group": "Links",
+      "description": "Default hyperlink color.",
+      "value": "light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c h), oklch(from var(--sf-color-action) clamp(0.68, l, 1) c h) )",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -4849,21 +4959,21 @@
       ]
     },
     {
-      "name": "--sf-color-neutral",
+      "name": "--sf-color-link--active",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "DARK SOURCE TOKENS (-dark, animatable)",
-      "description": "Neutral interactive color for low-emphasis actions and tertiary buttons.",
-      "value": "light-dark(var(--sf-color-neutral-light), var(--sf-color-neutral-dark, oklch(from var(--sf-color-neutral-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))",
+      "group": "Links",
+      "description": "Link color when actively pressed.",
+      "value": "light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.21, 0.34), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + 0.15, 0.74), 1) c h) )",
       "aliasOf": null,
-      "registered": true,
-      "animatable": true,
-      "syntax": "<color>",
-      "inherits": true,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
       "optional": false,
       "layer": "slashed.tokens",
       "sourceFiles": [
@@ -4878,19 +4988,222 @@
       ]
     },
     {
-      "name": "--sf-color-neutral--active",
+      "name": "--sf-color-link--disabled",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "area": "core",
-      "group": "neutral",
-      "description": "Neutral color at pressed/active brightness.",
-      "value": "var(--sf-color-neutral-xdark)",
-      "aliasOf": "--sf-color-neutral-xdark",
-      "registered": false,
-      "animatable": false,
+      "group": "Links",
+      "description": "Disabled link color (low contrast, no interaction).",
+      "value": "var(--sf-color-text--disabled)",
+      "aliasOf": "--sf-color-text--disabled",
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": false,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "core/tokens.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "--sf-color-link--hover",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "color",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "Links",
+      "description": "Link color on hover.",
+      "value": "light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.15, 0.40), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + 0.10, 0.68), 1) c h) )",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": false,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "core/tokens.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "--sf-color-link--underline",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "color",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "Link alpha token",
+      "description": "Color of the link underline decoration. Defaults to a semi-transparent variant of the link color.",
+      "value": "oklch(from var(--sf-color-action) l c h / 0.3)",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": false,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "core/tokens.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "--sf-color-link--visited",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "color",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "Links",
+      "description": "Visited link color.",
+      "value": "light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c calc(h + 60)), oklch(from var(--sf-color-action) clamp(0.68, l, 1) c calc(h + 60)) )",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": false,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "core/tokens.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "--sf-color-mark-bg",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "color",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "Selection & mark",
+      "description": "Background color for highlighted <mark> elements.",
+      "value": "oklch(from var(--sf-color-warning) l c h / 0.25)",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": false,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "core/tokens.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "--sf-color-mark-text",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "knob",
+      "namespace": "color",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "Selection & backdrop",
+      "description": "Text color inside highlighted <mark> elements.",
+      "value": "inherit",
+      "aliasOf": null,
+      "registered": false,
+      "animatable": false,
+      "syntax": null,
+      "inherits": null,
+      "optional": false,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "core/tokens.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "--sf-color-neutral",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "color",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "DARK SOURCE TOKENS (-dark, animatable)",
+      "description": "Neutral interactive color for low-emphasis actions and tertiary buttons.",
+      "value": "light-dark(var(--sf-color-neutral-light), var(--sf-color-neutral-dark, oklch(from var(--sf-color-neutral-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))",
+      "aliasOf": null,
+      "registered": true,
+      "animatable": true,
+      "syntax": "<color>",
+      "inherits": true,
+      "optional": false,
+      "layer": "slashed.tokens",
+      "sourceFiles": [
+        "core/tokens.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "--sf-color-neutral--active",
+      "type": "token",
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "namespace": "color",
+      "category": "Core tokens",
+      "area": "core",
+      "group": "neutral",
+      "description": "Neutral color at pressed/active brightness.",
+      "value": "var(--sf-color-neutral-xdark)",
+      "aliasOf": "--sf-color-neutral-xdark",
+      "registered": false,
+      "animatable": false,
       "syntax": null,
       "inherits": null,
       "optional": false,
@@ -21366,274 +21679,803 @@
       "optional": false,
       "layer": "slashed.layout",
       "sourceFiles": [
-        "core/layout.css"
+        "core/layout.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "sf-bento--3",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-bento--3",
+      "prefix": "sf",
+      "kind": "layout",
+      "category": "Layout primitives",
+      "area": "layout",
+      "group": "Bento grid",
+      "description": "Bento grid variant with a 3-column base layout.",
+      "isVariant": true,
+      "baseClass": "sf-bento",
+      "optional": false,
+      "layer": "slashed.layout",
+      "sourceFiles": [
+        "core/layout.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "sf-bento--6",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-bento--6",
+      "prefix": "sf",
+      "kind": "layout",
+      "category": "Layout primitives",
+      "area": "layout",
+      "group": "Bento grid",
+      "description": "Bento grid variant with a 6-column base layout.",
+      "isVariant": true,
+      "baseClass": "sf-bento",
+      "optional": false,
+      "layer": "slashed.layout",
+      "sourceFiles": [
+        "core/layout.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "sf-bento--compact",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-bento--compact",
+      "prefix": "sf",
+      "kind": "layout",
+      "category": "Layout primitives",
+      "area": "layout",
+      "group": "Bento grid",
+      "description": "Bento grid variant with shorter default row height.",
+      "isVariant": true,
+      "baseClass": "sf-bento",
+      "optional": false,
+      "layer": "slashed.layout",
+      "sourceFiles": [
+        "core/layout.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "sf-bento--tall",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-bento--tall",
+      "prefix": "sf",
+      "kind": "layout",
+      "category": "Layout primitives",
+      "area": "layout",
+      "group": "Bento grid",
+      "description": "Bento grid variant with taller default row height.",
+      "isVariant": true,
+      "baseClass": "sf-bento",
+      "optional": false,
+      "layer": "slashed.layout",
+      "sourceFiles": [
+        "core/layout.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "sf-bento-featured",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-bento-featured",
+      "prefix": "sf",
+      "kind": "layout",
+      "category": "Layout primitives",
+      "area": "layout",
+      "group": "Bento grid",
+      "description": "Span modifier for a bento item: takes up 2×2 cells (featured hero placement).",
+      "isVariant": false,
+      "baseClass": null,
+      "optional": false,
+      "layer": "slashed.layout",
+      "sourceFiles": [
+        "core/layout.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "sf-bento-full",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-bento-full",
+      "prefix": "sf",
+      "kind": "layout",
+      "category": "Layout primitives",
+      "area": "layout",
+      "group": "Bento grid",
+      "description": "Span modifier for a bento item: stretches across all columns (full-width banner).",
+      "isVariant": false,
+      "baseClass": null,
+      "optional": false,
+      "layer": "slashed.layout",
+      "sourceFiles": [
+        "core/layout.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "sf-bento-tall",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-bento-tall",
+      "prefix": "sf",
+      "kind": "layout",
+      "category": "Layout primitives",
+      "area": "layout",
+      "group": "Bento grid",
+      "description": "Span modifier for a bento item: doubles the row height (tall card).",
+      "isVariant": false,
+      "baseClass": null,
+      "optional": false,
+      "layer": "slashed.layout",
+      "sourceFiles": [
+        "core/layout.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "sf-bento-wide",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-bento-wide",
+      "prefix": "sf",
+      "kind": "layout",
+      "category": "Layout primitives",
+      "area": "layout",
+      "group": "Bento grid",
+      "description": "Span modifier for a bento item: spans 2 columns (wide card).",
+      "isVariant": false,
+      "baseClass": null,
+      "optional": false,
+      "layer": "slashed.layout",
+      "sourceFiles": [
+        "core/layout.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "sf-box",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-box",
+      "prefix": "sf",
+      "kind": "layout",
+      "category": "Layout primitives",
+      "area": "layout",
+      "group": "Box",
+      "description": "Minimal padding container that applies --sf-component-pad on all sides. The simplest layout primitive for adding breathing room.",
+      "isVariant": false,
+      "baseClass": null,
+      "optional": false,
+      "layer": "slashed.layout",
+      "sourceFiles": [
+        "core/layout.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "sf-breakout",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-breakout",
+      "prefix": "sf",
+      "kind": "layout",
+      "category": "Layout primitives",
+      "area": "layout",
+      "group": "Content grid (breakout pattern)",
+      "description": "Breaks a child element out of a parent sf-content-grid, spanning full bleed (or a named grid area) regardless of the parent column. Useful for full-width sections inside constrained prose.",
+      "isVariant": false,
+      "baseClass": null,
+      "optional": false,
+      "layer": "slashed.layout",
+      "sourceFiles": [
+        "core/layout.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
+    {
+      "name": "sf-button",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-button",
+      "prefix": "sf",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-button",
+      "description": "primary action component Works on <button>, <a>, <input type=\"submit\">, <label>. Focus rings are inherited from core/base.css. Transitions are inherited from core/motion.css (interactive elements). Disabled visual is provided by .is-disabled (states.css) or :disabled. Loading…",
+      "isVariant": false,
+      "baseClass": null,
+      "optional": true,
+      "layer": "slashed.components",
+      "sourceFiles": [
+        "optional/components.css"
+      ],
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "sf-button--danger",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-button--danger",
+      "prefix": "sf",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-button",
+      "description": "── Colour variants ───",
+      "isVariant": true,
+      "baseClass": "sf-button",
+      "optional": true,
+      "layer": "slashed.components",
+      "sourceFiles": [
+        "optional/components.css"
+      ],
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "sf-button--full",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-button--full",
+      "prefix": "sf",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-button",
+      "description": "── Full-width ───",
+      "isVariant": true,
+      "baseClass": "sf-button",
+      "optional": true,
+      "layer": "slashed.components",
+      "sourceFiles": [
+        "optional/components.css"
+      ],
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "sf-button--ghost",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-button--ghost",
+      "prefix": "sf",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-button",
+      "description": "── Colour variants ───",
+      "isVariant": true,
+      "baseClass": "sf-button",
+      "optional": true,
+      "layer": "slashed.components",
+      "sourceFiles": [
+        "optional/components.css"
+      ],
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "sf-button--icon",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-button--icon",
+      "prefix": "sf",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-button",
+      "description": "Icon-only: square aspect. Keep padding-block so touch target stays ≥ var(--sf-touch-target).",
+      "isVariant": true,
+      "baseClass": "sf-button",
+      "optional": true,
+      "layer": "slashed.components",
+      "sourceFiles": [
+        "optional/components.css"
+      ],
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "sf-button--l",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-button--l",
+      "prefix": "sf",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-button",
+      "description": "── Size variants ───",
+      "isVariant": true,
+      "baseClass": "sf-button",
+      "optional": true,
+      "layer": "slashed.components",
+      "sourceFiles": [
+        "optional/components.css"
+      ],
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "sf-button--neutral",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-button--neutral",
+      "prefix": "sf",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-button",
+      "description": "── Colour variants ───",
+      "isVariant": true,
+      "baseClass": "sf-button",
+      "optional": true,
+      "layer": "slashed.components",
+      "sourceFiles": [
+        "optional/components.css"
+      ],
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "sf-button--pill",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-button--pill",
+      "prefix": "sf",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-button",
+      "description": "Icon-only: square aspect. Keep padding-block so touch target stays ≥ var(--sf-touch-target).",
+      "isVariant": true,
+      "baseClass": "sf-button",
+      "optional": true,
+      "layer": "slashed.components",
+      "sourceFiles": [
+        "optional/components.css"
+      ],
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "sf-button--primary",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-button--primary",
+      "prefix": "sf",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-button",
+      "description": "── Colour variants ───",
+      "isVariant": true,
+      "baseClass": "sf-button",
+      "optional": true,
+      "layer": "slashed.components",
+      "sourceFiles": [
+        "optional/components.css"
+      ],
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "sf-button--s",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-button--s",
+      "prefix": "sf",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-button",
+      "description": "── Size variants ───",
+      "isVariant": true,
+      "baseClass": "sf-button",
+      "optional": true,
+      "layer": "slashed.components",
+      "sourceFiles": [
+        "optional/components.css"
+      ],
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "sf-button--secondary",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-button--secondary",
+      "prefix": "sf",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-button",
+      "description": "── Colour variants ───",
+      "isVariant": true,
+      "baseClass": "sf-button",
+      "optional": true,
+      "layer": "slashed.components",
+      "sourceFiles": [
+        "optional/components.css"
+      ],
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "sf-card",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-card",
+      "prefix": "sf",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-card",
+      "description": "content container with concentric radius Concentric radius: --sf-card-radius-outer = radius + padding, so inner elements using the global --sf-radius-m stay visually proportional. Sections (__header, __body, __footer) are transparent layout wrappers (display: contents). The…",
+      "isVariant": false,
+      "baseClass": null,
+      "optional": true,
+      "layer": "slashed.components",
+      "sourceFiles": [
+        "optional/components.css"
+      ],
+      "bundles": [
+        "full",
+        "optimal-components"
+      ]
+    },
+    {
+      "name": "sf-card__body",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-card__body",
+      "prefix": "sf",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-card",
+      "description": "Semantic section wrappers — transparent to layout by default. Children flow directly into the card's flex column.",
+      "isVariant": false,
+      "baseClass": null,
+      "optional": true,
+      "layer": "slashed.components",
+      "sourceFiles": [
+        "optional/components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "sf-bento--3",
+      "name": "sf-card__footer",
       "type": "class",
       "tier": "PUBLIC",
-      "selector": ".sf-bento--3",
+      "selector": ".sf-card__footer",
       "prefix": "sf",
-      "kind": "layout",
-      "category": "Layout primitives",
-      "area": "layout",
-      "group": "Bento grid",
-      "description": "Bento grid variant with a 3-column base layout.",
-      "isVariant": true,
-      "baseClass": "sf-bento",
-      "optional": false,
-      "layer": "slashed.layout",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-card",
+      "description": "Semantic section wrappers — transparent to layout by default. Children flow directly into the card's flex column.",
+      "isVariant": false,
+      "baseClass": null,
+      "optional": true,
+      "layer": "slashed.components",
       "sourceFiles": [
-        "core/layout.css"
+        "optional/components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "sf-bento--6",
+      "name": "sf-card__header",
       "type": "class",
       "tier": "PUBLIC",
-      "selector": ".sf-bento--6",
+      "selector": ".sf-card__header",
       "prefix": "sf",
-      "kind": "layout",
-      "category": "Layout primitives",
-      "area": "layout",
-      "group": "Bento grid",
-      "description": "Bento grid variant with a 6-column base layout.",
-      "isVariant": true,
-      "baseClass": "sf-bento",
-      "optional": false,
-      "layer": "slashed.layout",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-card",
+      "description": "Semantic section wrappers — transparent to layout by default. Children flow directly into the card's flex column.",
+      "isVariant": false,
+      "baseClass": null,
+      "optional": true,
+      "layer": "slashed.components",
       "sourceFiles": [
-        "core/layout.css"
+        "optional/components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "sf-bento--compact",
+      "name": "sf-card--bordered",
       "type": "class",
       "tier": "PUBLIC",
-      "selector": ".sf-bento--compact",
+      "selector": ".sf-card--bordered",
       "prefix": "sf",
-      "kind": "layout",
-      "category": "Layout primitives",
-      "area": "layout",
-      "group": "Bento grid",
-      "description": "Bento grid variant with shorter default row height.",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-card",
+      "description": "── Style variants ───",
       "isVariant": true,
-      "baseClass": "sf-bento",
-      "optional": false,
-      "layer": "slashed.layout",
+      "baseClass": "sf-card",
+      "optional": true,
+      "layer": "slashed.components",
       "sourceFiles": [
-        "core/layout.css"
+        "optional/components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "sf-bento--tall",
+      "name": "sf-card--divided",
       "type": "class",
       "tier": "PUBLIC",
-      "selector": ".sf-bento--tall",
+      "selector": ".sf-card--divided",
       "prefix": "sf",
-      "kind": "layout",
-      "category": "Layout primitives",
-      "area": "layout",
-      "group": "Bento grid",
-      "description": "Bento grid variant with taller default row height.",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-card",
+      "description": "── Divided variant ─── Adds visible top/bottom separators on header/footer. Restores sections to block elements so they can carry their own padding and borders.",
       "isVariant": true,
-      "baseClass": "sf-bento",
-      "optional": false,
-      "layer": "slashed.layout",
+      "baseClass": "sf-card",
+      "optional": true,
+      "layer": "slashed.components",
       "sourceFiles": [
-        "core/layout.css"
+        "optional/components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "sf-bento-featured",
+      "name": "sf-card--elevated",
       "type": "class",
       "tier": "PUBLIC",
-      "selector": ".sf-bento-featured",
+      "selector": ".sf-card--elevated",
       "prefix": "sf",
-      "kind": "layout",
-      "category": "Layout primitives",
-      "area": "layout",
-      "group": "Bento grid",
-      "description": "Span modifier for a bento item: takes up 2×2 cells (featured hero placement).",
-      "isVariant": false,
-      "baseClass": null,
-      "optional": false,
-      "layer": "slashed.layout",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-card",
+      "description": "── Style variants ───",
+      "isVariant": true,
+      "baseClass": "sf-card",
+      "optional": true,
+      "layer": "slashed.components",
       "sourceFiles": [
-        "core/layout.css"
+        "optional/components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "sf-bento-full",
+      "name": "sf-card--flat",
       "type": "class",
       "tier": "PUBLIC",
-      "selector": ".sf-bento-full",
+      "selector": ".sf-card--flat",
       "prefix": "sf",
-      "kind": "layout",
-      "category": "Layout primitives",
-      "area": "layout",
-      "group": "Bento grid",
-      "description": "Span modifier for a bento item: stretches across all columns (full-width banner).",
-      "isVariant": false,
-      "baseClass": null,
-      "optional": false,
-      "layer": "slashed.layout",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-card",
+      "description": "Flat — no shadow, no border. Relies on background for separation.",
+      "isVariant": true,
+      "baseClass": "sf-card",
+      "optional": true,
+      "layer": "slashed.components",
       "sourceFiles": [
-        "core/layout.css"
+        "optional/components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "sf-bento-tall",
+      "name": "sf-card--glow",
       "type": "class",
       "tier": "PUBLIC",
-      "selector": ".sf-bento-tall",
+      "selector": ".sf-card--glow",
       "prefix": "sf",
-      "kind": "layout",
-      "category": "Layout primitives",
-      "area": "layout",
-      "group": "Bento grid",
-      "description": "Span modifier for a bento item: doubles the row height (tall card).",
-      "isVariant": false,
-      "baseClass": null,
-      "optional": false,
-      "layer": "slashed.layout",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-card",
+      "description": "Glow — a coloured ambient shadow using the primary brand colour.",
+      "isVariant": true,
+      "baseClass": "sf-card",
+      "optional": true,
+      "layer": "slashed.components",
       "sourceFiles": [
-        "core/layout.css"
+        "optional/components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "sf-bento-wide",
+      "name": "sf-card--horizontal",
       "type": "class",
       "tier": "PUBLIC",
-      "selector": ".sf-bento-wide",
+      "selector": ".sf-card--horizontal",
       "prefix": "sf",
-      "kind": "layout",
-      "category": "Layout primitives",
-      "area": "layout",
-      "group": "Bento grid",
-      "description": "Span modifier for a bento item: spans 2 columns (wide card).",
-      "isVariant": false,
-      "baseClass": null,
-      "optional": false,
-      "layer": "slashed.layout",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-card",
+      "description": "Horizontal (media-object style): image left, content right.",
+      "isVariant": true,
+      "baseClass": "sf-card",
+      "optional": true,
+      "layer": "slashed.components",
       "sourceFiles": [
-        "core/layout.css"
+        "optional/components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "sf-box",
+      "name": "sf-card--interactive",
       "type": "class",
       "tier": "PUBLIC",
-      "selector": ".sf-box",
+      "selector": ".sf-card--interactive",
       "prefix": "sf",
-      "kind": "layout",
-      "category": "Layout primitives",
-      "area": "layout",
-      "group": "Box",
-      "description": "Minimal padding container that applies --sf-component-pad on all sides. The simplest layout primitive for adding breathing room.",
-      "isVariant": false,
-      "baseClass": null,
-      "optional": false,
-      "layer": "slashed.layout",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-card",
+      "description": "Interactive / hover-lift — applies transition; hover lifts the card. Reduced motion: motion.css gates animation on prefers-reduced-motion; the translate still fires but accessibility.css zeroes animation-duration on *, so the card snaps rather than animates.",
+      "isVariant": true,
+      "baseClass": "sf-card",
+      "optional": true,
+      "layer": "slashed.components",
       "sourceFiles": [
-        "core/layout.css"
+        "optional/components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
-      "name": "sf-breakout",
+      "name": "sf-card--no-pad",
       "type": "class",
       "tier": "PUBLIC",
-      "selector": ".sf-breakout",
+      "selector": ".sf-card--no-pad",
       "prefix": "sf",
-      "kind": "layout",
-      "category": "Layout primitives",
-      "area": "layout",
-      "group": "Content grid (breakout pattern)",
-      "description": "Breaks a child element out of a parent sf-content-grid, spanning full bleed (or a named grid area) regardless of the parent column. Useful for full-width sections inside constrained prose.",
-      "isVariant": false,
-      "baseClass": null,
-      "optional": false,
-      "layer": "slashed.layout",
+      "kind": "component",
+      "category": "Components",
+      "area": "components",
+      "group": ".sf-card",
+      "description": "No padding — for edge-to-edge content (images, full-bleed headers). The consumer must pad child __body / __header / __footer elements directly using the --sf-card-padding token or inline style.",
+      "isVariant": true,
+      "baseClass": "sf-card",
+      "optional": true,
+      "layer": "slashed.components",
       "sourceFiles": [
-        "core/layout.css"
+        "optional/components.css"
       ],
       "bundles": [
-        "essential",
         "full",
-        "optimal",
-        "optimal-components",
-        "optimal-utilities"
+        "optimal-components"
       ]
     },
     {
@@ -24757,6 +25599,32 @@
         "optimal-utilities"
       ]
     },
+    {
+      "name": "sf-scroll-target",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-scroll-target",
+      "prefix": "sf",
+      "kind": "layout",
+      "category": "Layout primitives",
+      "area": "layout",
+      "group": "Collapse modifier",
+      "description": "Scroll margin target — anchor elements (#id links) stay visible when a sticky header is present. Browsers scroll the element to the viewport top; this pushes the effective snap point down by the header height. Use on any element with an id= that serves as a scroll destination:…",
+      "isVariant": false,
+      "baseClass": null,
+      "optional": false,
+      "layer": "slashed.layout",
+      "sourceFiles": [
+        "core/layout.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
     {
       "name": "sf-section",
       "type": "class",
@@ -24887,6 +25755,32 @@
         "optimal-utilities"
       ]
     },
+    {
+      "name": "sf-section--offset-header",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-section--offset-header",
+      "prefix": "sf",
+      "kind": "layout",
+      "category": "Layout primitives",
+      "area": "layout",
+      "group": "Collapse modifier",
+      "description": "Offset-header modifier — extends padding-block-start by --sf-sticky-offset so the section's top content clears a sticky/fixed header on first load and after hash navigation. Pairs with .sf-scroll-target below. Override the offset per-section: style=\"--sf-sticky-offset: 4rem\"",
+      "isVariant": true,
+      "baseClass": "sf-section",
+      "optional": false,
+      "layer": "slashed.layout",
+      "sourceFiles": [
+        "core/layout.css"
+      ],
+      "bundles": [
+        "essential",
+        "full",
+        "optimal",
+        "optimal-components",
+        "optimal-utilities"
+      ]
+    },
     {
       "name": "sf-section--s",
       "type": "class",
diff --git a/docs/api-index.md b/docs/api-index.md
index 31c49647..f97bcc8f 100644
--- a/docs/api-index.md
+++ b/docs/api-index.md
@@ -10,23 +10,35 @@ 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).
 
-**925 elements** — 693 tokens, 232 classes.
+**962 elements** — 705 tokens, 257 classes.
 
 | Tier | Count | Meaning |
 |---|---|---|
-| PUBLIC | 869 | Everyday surface. SemVer-stable. |
+| PUBLIC | 906 | Everyday surface. SemVer-stable. |
 | PUBLIC-ADVANCED | 55 | Same SemVer guarantee; niche/powerful. |
 | INTERNAL | 1 | Implementation detail; may change without a major bump. |
 
-## Tokens (693)
+## Tokens (705)
 
-### Component tokens (6)
+### Component tokens (18)
 
 | Token | Tier | Role | Namespace | Default | Description |
 |---|---|---|---|---|---|
+| `--sf-button-border-width` | PUBLIC | consumption | button | `var(--sf-border-width-1)` | Override to give buttons a distinct visual language from form fields without touching global radius/spacing tokens. |
+| `--sf-button-font-weight` | PUBLIC | consumption | button | `var(--sf-font-weight-interactive)` | Override to give buttons a distinct visual language from form fields without touching global radius/spacing tokens. |
+| `--sf-button-gap` | PUBLIC | consumption | button | `var(--sf-space-2xs)` | Override to give buttons a distinct visual language from form fields without touching global radius/spacing tokens. |
+| `--sf-button-min-height` | PUBLIC | consumption | button | `var(--sf-touch-target)` | Override to give buttons a distinct visual language from form fields without touching global radius/spacing tokens. |
 | `--sf-button-padding-block` | PUBLIC | consumption | button | `var(--sf-space-xs)` | Vertical (block) inner padding for buttons. |
 | `--sf-button-padding-inline` | PUBLIC | consumption | button | `var(--sf-space-m)` | Horizontal (inline) inner padding for buttons. |
 | `--sf-button-radius` | PUBLIC | consumption | button | `var(--sf-radius-m)` | Border radius for buttons. Defaults to --sf-radius-m; override to fully pill-round or square all buttons at once. |
+| `--sf-card-bg` | PUBLIC | consumption | card | `var(--sf-color-surface)` | Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card. |
+| `--sf-card-border-color` | PUBLIC | consumption | card | `var(--sf-color-border)` | Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card. |
+| `--sf-card-border-width` | PUBLIC | consumption | card | `var(--sf-border-width-1)` | Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card. |
+| `--sf-card-gap` | PUBLIC | consumption | card | `var(--sf-space-m)` | Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card. |
+| `--sf-card-padding` | PUBLIC | consumption | card | `var(--sf-space-l)` | Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card. |
+| `--sf-card-radius` | PUBLIC | consumption | card | `var(--sf-radius-m)` | Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card. |
+| `--sf-card-radius-outer` | PUBLIC | consumption | card | `calc(var(--sf-card-radius) + var(--sf-card-padding))` | Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card. |
+| `--sf-card-shadow` | PUBLIC | consumption | card | `var(--sf-shadow-s)` | Concentric radius math: outer = inner + padding. Keeps inner elements that use the global --sf-radius-m visually proportional inside a padded card. |
 | `--sf-field-padding-block` | PUBLIC | consumption | field | `var(--sf-space-xs)` | Vertical (block) inner padding for form field inputs. |
 | `--sf-field-padding-inline` | PUBLIC | consumption | field | `var(--sf-space-s)` | Horizontal (inline) inner padding for form field inputs. |
 | `--sf-field-radius` | PUBLIC | consumption | field | `var(--sf-radius-m)` | Border radius for form field inputs. Defaults to --sf-radius-m; override to reshape all inputs at once. |
@@ -738,7 +750,7 @@ and a short description. The machine-readable companion (with all columns) is
 | `--sf-palette-mix-900` | PUBLIC-ADVANCED | knob | palette | `18%` | Color-mix percentage for palette step 900 (very dark shade). Controls blend depth toward text. Default 18%. |
 | `--sf-palette-mix-950` | PUBLIC-ADVANCED | knob | palette | `8%` | Color-mix percentage for the darkest palette step (950). Controls how far step 950 blends toward the text color. Default 8%. |
 
-## Classes (232)
+## Classes (257)
 
 ### Accessibility (8)
 
@@ -753,7 +765,35 @@ and a short description. The machine-readable companion (with all columns) is
 | `.sr-only` | PUBLIC | accessibility | Screen-reader-only. Atomic contract: a partial override | Visually hides content while keeping it accessible to screen readers. Use for labels, descriptions, and off-screen text that assistive technology needs. |
 | `.sr-only-focusable` | PUBLIC | accessibility | Screen-reader-only. Atomic contract: a partial override | Extends sr-only — also reveals the element when it receives keyboard focus. Typical use: skip links and visually-hidden focus targets. |
 
-### Layout primitives (126)
+### Components (23)
+
+| Class | Tier | Kind | Group | Description |
+|---|---|---|---|---|
+| `.sf-button` | PUBLIC | component | .sf-button | primary action component Works on <button>, <a>, <input type="submit">, <label>. Focus rings are inherited from core/base.css. Transitions are inherited from core/motion.css (interactive elements). Disabled visual is provided by .is-disabled (states.css) or :disabled. Loading… |
+| `.sf-button--danger` | PUBLIC | component | .sf-button | ── Colour variants ─── |
+| `.sf-button--full` | PUBLIC | component | .sf-button | ── Full-width ─── |
+| `.sf-button--ghost` | PUBLIC | component | .sf-button | ── Colour variants ─── |
+| `.sf-button--icon` | PUBLIC | component | .sf-button | Icon-only: square aspect. Keep padding-block so touch target stays ≥ var(--sf-touch-target). |
+| `.sf-button--l` | PUBLIC | component | .sf-button | ── Size variants ─── |
+| `.sf-button--neutral` | PUBLIC | component | .sf-button | ── Colour variants ─── |
+| `.sf-button--pill` | PUBLIC | component | .sf-button | Icon-only: square aspect. Keep padding-block so touch target stays ≥ var(--sf-touch-target). |
+| `.sf-button--primary` | PUBLIC | component | .sf-button | ── Colour variants ─── |
+| `.sf-button--s` | PUBLIC | component | .sf-button | ── Size variants ─── |
+| `.sf-button--secondary` | PUBLIC | component | .sf-button | ── Colour variants ─── |
+| `.sf-card` | PUBLIC | component | .sf-card | content container with concentric radius Concentric radius: --sf-card-radius-outer = radius + padding, so inner elements using the global --sf-radius-m stay visually proportional. Sections (__header, __body, __footer) are transparent layout wrappers (display: contents). The… |
+| `.sf-card__body` | PUBLIC | component | .sf-card | Semantic section wrappers — transparent to layout by default. Children flow directly into the card's flex column. |
+| `.sf-card__footer` | PUBLIC | component | .sf-card | Semantic section wrappers — transparent to layout by default. Children flow directly into the card's flex column. |
+| `.sf-card__header` | PUBLIC | component | .sf-card | Semantic section wrappers — transparent to layout by default. Children flow directly into the card's flex column. |
+| `.sf-card--bordered` | PUBLIC | component | .sf-card | ── Style variants ─── |
+| `.sf-card--divided` | PUBLIC | component | .sf-card | ── Divided variant ─── Adds visible top/bottom separators on header/footer. Restores sections to block elements so they can carry their own padding and borders. |
+| `.sf-card--elevated` | PUBLIC | component | .sf-card | ── Style variants ─── |
+| `.sf-card--flat` | PUBLIC | component | .sf-card | Flat — no shadow, no border. Relies on background for separation. |
+| `.sf-card--glow` | PUBLIC | component | .sf-card | Glow — a coloured ambient shadow using the primary brand colour. |
+| `.sf-card--horizontal` | PUBLIC | component | .sf-card | Horizontal (media-object style): image left, content right. |
+| `.sf-card--interactive` | PUBLIC | component | .sf-card | Interactive / hover-lift — applies transition; hover lifts the card. Reduced motion: motion.css gates animation on prefers-reduced-motion; the translate still fires but accessibility.css zeroes animation-duration on *, so the card snaps rather than animates. |
+| `.sf-card--no-pad` | PUBLIC | component | .sf-card | No padding — for edge-to-edge content (images, full-bleed headers). The consumer must pad child __body / __header / __footer elements directly using the --sf-card-padding token or inline style. |
+
+### Layout primitives (128)
 
 | Class | Tier | Kind | Group | Description |
 |---|---|---|---|---|
@@ -855,11 +895,13 @@ and a short description. The machine-readable companion (with all columns) is
 | `.sf-imposter--fixed` | PUBLIC | layout | Imposter | Imposter variant that uses position:fixed instead of absolute. Use for viewport-level overlays and modals. |
 | `.sf-pancake` | PUBLIC | layout | Pancake (sticky footer) | Three-row layout (header, main, footer) where main takes all remaining vertical space via flex-grow. The footer always sticks to the bottom on tall viewports. |
 | `.sf-reel` | PUBLIC | layout | Reel | Horizontally scrollable row of fixed-height items with snap scrolling. Children don't shrink below their intrinsic width, creating a card carousel effect. |
+| `.sf-scroll-target` | PUBLIC | layout | Collapse modifier | Scroll margin target — anchor elements (#id links) stay visible when a sticky header is present. Browsers scroll the element to the viewport top; this pushes the effective snap point down by the header height. Use on any element with an id= that serves as a scroll destination:… |
 | `.sf-section` | PUBLIC | layout | Section | Full-width page section with vertical padding (--sf-section-pad-default). Use to create visually distinct content bands. |
 | `.sf-section--2xl` | PUBLIC | layout | Section | Section variant with 2xl vertical padding. |
 | `.sf-section--collapse` | PUBLIC | layout | Collapse modifier | Section variant that removes vertical padding (zero-padding section for adjacent same-color blocks). |
 | `.sf-section--l` | PUBLIC | layout | Section | Section variant with large (l) vertical padding. |
 | `.sf-section--m` | PUBLIC | layout | Section | Section variant with medium (m) vertical padding. |
+| `.sf-section--offset-header` | PUBLIC | layout | Collapse modifier | Offset-header modifier — extends padding-block-start by --sf-sticky-offset so the section's top content clears a sticky/fixed header on first load and after hash navigation. Pairs with .sf-scroll-target below. Override the offset per-section: style="--sf-sticky-offset: 4rem" |
 | `.sf-section--s` | PUBLIC | layout | Section | Section variant with small (s) vertical padding. |
 | `.sf-section--xl` | PUBLIC | layout | Section | Section variant with xl vertical padding. |
 | `.sf-section--xs` | PUBLIC | layout | Section | Section variant with xs vertical padding. |
diff --git a/docs/classes.md b/docs/classes.md
index 44828934..522cc4cd 100644
--- a/docs/classes.md
+++ b/docs/classes.md
@@ -3,12 +3,12 @@
 > **Generated** from source by `scripts/gen-class-reference.js` —
 > run `npm run docs:classes` to refresh. Do not edit by hand.
 
-**183 .sf-classes, 40 .is-classes.** Every `.sf-*` layout/macro class and `.is-*` state class.
+**208 .sf-classes, 40 .is-classes.** Every `.sf-*` layout/macro class and `.is-*` state class.
 See [architecture.md](architecture.md) for layer order and naming conventions.
 
 ## Layout primitives (`core/layout.css`)
 
-126 classes.
+128 classes.
 
 | Class |
 |---|
@@ -110,11 +110,13 @@ See [architecture.md](architecture.md) for layer order and naming conventions.
 | `.sf-imposter--fixed` |
 | `.sf-pancake` |
 | `.sf-reel` |
+| `.sf-scroll-target` |
 | `.sf-section` |
 | `.sf-section--2xl` |
 | `.sf-section--collapse` |
 | `.sf-section--l` |
 | `.sf-section--m` |
+| `.sf-section--offset-header` |
 | `.sf-section--s` |
 | `.sf-section--xl` |
 | `.sf-section--xs` |
@@ -281,3 +283,33 @@ See [architecture.md](architecture.md) for layer order and naming conventions.
 |---|
 | `.sf-theme-transition` |
 
+## Components (`optional/components.css`)
+
+23 classes.
+
+| Class |
+|---|
+| `.sf-button` |
+| `.sf-button--danger` |
+| `.sf-button--full` |
+| `.sf-button--ghost` |
+| `.sf-button--icon` |
+| `.sf-button--l` |
+| `.sf-button--neutral` |
+| `.sf-button--pill` |
+| `.sf-button--primary` |
+| `.sf-button--s` |
+| `.sf-button--secondary` |
+| `.sf-card` |
+| `.sf-card--bordered` |
+| `.sf-card--divided` |
+| `.sf-card--elevated` |
+| `.sf-card--flat` |
+| `.sf-card--glow` |
+| `.sf-card--horizontal` |
+| `.sf-card--interactive` |
+| `.sf-card--no-pad` |
+| `.sf-card__body` |
+| `.sf-card__footer` |
+| `.sf-card__header` |
+
diff --git a/docs/registry.json b/docs/registry.json
index e188564c..e428cc55 100644
--- a/docs/registry.json
+++ b/docs/registry.json
@@ -20,8 +20,8 @@
       "optional/theme-example.css"
     ],
     "counts": {
-      "tokens": 693,
-      "sf_classes": 183,
+      "tokens": 705,
+      "sf_classes": 208,
       "is_classes": 40
     }
   },
@@ -76,9 +76,21 @@
     "--sf-box-border-width",
     "--sf-box-padding",
     "--sf-breakout-width",
+    "--sf-button-border-width",
+    "--sf-button-font-weight",
+    "--sf-button-gap",
+    "--sf-button-min-height",
     "--sf-button-padding-block",
     "--sf-button-padding-inline",
     "--sf-button-radius",
+    "--sf-card-bg",
+    "--sf-card-border-color",
+    "--sf-card-border-width",
+    "--sf-card-gap",
+    "--sf-card-padding",
+    "--sf-card-radius",
+    "--sf-card-radius-outer",
+    "--sf-card-shadow",
     "--sf-caret-color",
     "--sf-center-gutter",
     "--sf-center-max",
@@ -735,6 +747,29 @@
     "sf-bento-wide",
     "sf-box",
     "sf-breakout",
+    "sf-button",
+    "sf-button--danger",
+    "sf-button--full",
+    "sf-button--ghost",
+    "sf-button--icon",
+    "sf-button--l",
+    "sf-button--neutral",
+    "sf-button--pill",
+    "sf-button--primary",
+    "sf-button--s",
+    "sf-button--secondary",
+    "sf-card",
+    "sf-card--bordered",
+    "sf-card--divided",
+    "sf-card--elevated",
+    "sf-card--flat",
+    "sf-card--glow",
+    "sf-card--horizontal",
+    "sf-card--interactive",
+    "sf-card--no-pad",
+    "sf-card__body",
+    "sf-card__footer",
+    "sf-card__header",
     "sf-center",
     "sf-center--intrinsic",
     "sf-clickable-parent",
@@ -855,11 +890,13 @@
     "sf-scrim__content",
     "sf-scroll-shadow",
     "sf-scroll-snap",
+    "sf-scroll-target",
     "sf-section",
     "sf-section--2xl",
     "sf-section--collapse",
     "sf-section--l",
     "sf-section--m",
+    "sf-section--offset-header",
     "sf-section--s",
     "sf-section--xl",
     "sf-section--xs",
diff --git a/docs/token-index.json b/docs/token-index.json
index 9a2d75ec..31e00fa1 100644
--- a/docs/token-index.json
+++ b/docs/token-index.json
@@ -9,15 +9,15 @@
       "optional/tokens.components.css"
     ],
     "counts": {
-      "tokens": 693,
+      "tokens": 705,
       "by_tier": {
-        "PUBLIC": 637,
+        "PUBLIC": 649,
         "PUBLIC-ADVANCED": 55,
         "INTERNAL": 1
       },
       "by_role": {
         "knob": 222,
-        "consumption": 471
+        "consumption": 483
       }
     }
   },
@@ -422,6 +422,38 @@
       ],
       "value": "var(--sf-container-wide)"
     },
+    "--sf-button-border-width": {
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "var(--sf-border-width-1)"
+    },
+    "--sf-button-font-weight": {
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "var(--sf-font-weight-interactive)"
+    },
+    "--sf-button-gap": {
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "var(--sf-space-2xs)"
+    },
+    "--sf-button-min-height": {
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "var(--sf-touch-target)"
+    },
     "--sf-button-padding-block": {
       "tier": "PUBLIC",
       "role": "consumption",
@@ -446,6 +478,70 @@
       ],
       "value": "var(--sf-radius-m)"
     },
+    "--sf-card-bg": {
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "var(--sf-color-surface)"
+    },
+    "--sf-card-border-color": {
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "var(--sf-color-border)"
+    },
+    "--sf-card-border-width": {
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "var(--sf-border-width-1)"
+    },
+    "--sf-card-gap": {
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "var(--sf-space-m)"
+    },
+    "--sf-card-padding": {
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "var(--sf-space-l)"
+    },
+    "--sf-card-radius": {
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "var(--sf-radius-m)"
+    },
+    "--sf-card-radius-outer": {
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "calc(var(--sf-card-radius) + var(--sf-card-padding))"
+    },
+    "--sf-card-shadow": {
+      "tier": "PUBLIC",
+      "role": "consumption",
+      "files": [
+        "optional/tokens.components.css"
+      ],
+      "value": "var(--sf-shadow-s)"
+    },
     "--sf-caret-color": {
       "tier": "PUBLIC",
       "role": "consumption",
diff --git a/docs/token-index.md b/docs/token-index.md
index 076982d9..abb0230e 100644
--- a/docs/token-index.md
+++ b/docs/token-index.md
@@ -8,11 +8,11 @@ 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).
 
-**693 tokens** (deduplicated by name across the 5 token source files).
+**705 tokens** (deduplicated by name across the 5 token source files).
 
 | Tier | Count | Meaning |
 |---|---|---|
-| PUBLIC | 637 | Everyday knobs. SemVer-stable. |
+| PUBLIC | 649 | Everyday knobs. SemVer-stable. |
 | PUBLIC-ADVANCED | 55 | Same SemVer guarantee; niche/powerful. |
 | INTERNAL | 1 | Implementation detail; may change without a major bump. |
 
@@ -23,7 +23,7 @@ declared value (a value that references `var(--sf-…)` is a derived output):
 | Role | Count | Meaning |
 |---|---|---|
 | knob | 222 | Input you **set** to configure the system (a literal primitive: length, number, colour literal, keyword, font stack, easing curve …). |
-| consumption | 471 | Ready-to-use output you **read**; derived from other tokens via `var(--sf-…)` (incl. `light-dark()`/`oklch(from …)`/`color-mix()`). |
+| consumption | 483 | Ready-to-use output you **read**; derived from other tokens via `var(--sf-…)` (incl. `light-dark()`/`oklch(from …)`/`color-mix()`). |
 
 ## INTERNAL tokens
 
@@ -141,9 +141,21 @@ declared value (a value that references `var(--sf-…)` is a derived output):
 | `--sf-box-border-width` | PUBLIC | knob | Layout | `0` |
 | `--sf-box-padding` | PUBLIC | consumption | Layout | `var(--sf-space-m)` |
 | `--sf-breakout-width` | PUBLIC | consumption | Layout | `var(--sf-container-wide)` |
+| `--sf-button-border-width` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-border-width-1)` |
+| `--sf-button-font-weight` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-font-weight-interactive)` |
+| `--sf-button-gap` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-space-2xs)` |
+| `--sf-button-min-height` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-touch-target)` |
 | `--sf-button-padding-block` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-space-xs)` |
 | `--sf-button-padding-inline` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-space-m)` |
 | `--sf-button-radius` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-radius-m)` |
+| `--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)` |
+| `--sf-card-border-width` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-border-width-1)` |
+| `--sf-card-gap` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-space-m)` |
+| `--sf-card-padding` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-space-l)` |
+| `--sf-card-radius` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-radius-m)` |
+| `--sf-card-radius-outer` | PUBLIC | consumption | Components (optional, incomplete) | `calc(var(--sf-card-radius) + var(--sf-card-padding))` |
+| `--sf-card-shadow` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-shadow-s)` |
 | `--sf-caret-color` | PUBLIC | consumption | Core | `var(--sf-color-action)` |
 | `--sf-center-gutter` | PUBLIC | consumption | Layout | `var(--sf-gutter)` |
 | `--sf-center-max` | PUBLIC | consumption | Layout | `var(--sf-container-default)` |
diff --git a/docs/tokens.md b/docs/tokens.md
index 01665429..662c91d3 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.
 
-**729 tokens.** Every `--sf-*` custom property and its default value, grouped by source file.
+**741 tokens.** Every `--sf-*` custom property and its default value, grouped by source file.
 Tokens defined in multiple files (e.g. shade aliases overridden in
 `optional/tokens.palette.css`) are listed once per section — so this count is
 higher than `docs/registry.json` (which deduplicates by name). See
@@ -765,13 +765,25 @@ rebrand workflow.
 
 ## Component tokens (`optional/tokens.components.css`)
 
-6 tokens.
+18 tokens.
 
 | Token | Default |
 |---|---|
+| `--sf-button-border-width` | `var(--sf-border-width-1)` |
+| `--sf-button-font-weight` | `var(--sf-font-weight-interactive)` |
+| `--sf-button-gap` | `var(--sf-space-2xs)` |
+| `--sf-button-min-height` | `var(--sf-touch-target)` |
 | `--sf-button-padding-block` | `var(--sf-space-xs)` |
 | `--sf-button-padding-inline` | `var(--sf-space-m)` |
 | `--sf-button-radius` | `var(--sf-radius-m)` |
+| `--sf-card-bg` | `var(--sf-color-surface)` |
+| `--sf-card-border-color` | `var(--sf-color-border)` |
+| `--sf-card-border-width` | `var(--sf-border-width-1)` |
+| `--sf-card-gap` | `var(--sf-space-m)` |
+| `--sf-card-padding` | `var(--sf-space-l)` |
+| `--sf-card-radius` | `var(--sf-radius-m)` |
+| `--sf-card-radius-outer` | `calc(var(--sf-card-radius) + var(--sf-card-padding))` |
+| `--sf-card-shadow` | `var(--sf-shadow-s)` |
 | `--sf-field-padding-block` | `var(--sf-space-xs)` |
 | `--sf-field-padding-inline` | `var(--sf-space-s)` |
 | `--sf-field-radius` | `var(--sf-radius-m)` |
diff --git a/optional/components.css b/optional/components.css
index 36651666..5b0b297d 100644
--- a/optional/components.css
+++ b/optional/components.css
@@ -21,78 +21,251 @@
 
   /* ============================================================
    * .sf-button — primary action component
-   * ============================================================
    *
-   * .sf-button {
-   *   display:          inline-flex;
-   *   align-items:      center;
-   *   justify-content:  center;
-   *   gap:              var(--sf-button-gap);
-   *   padding:          var(--sf-button-pad-y) var(--sf-button-pad-x);
-   *   min-block-size:   var(--sf-button-min-height);
-   *   border:           var(--sf-button-border-width) var(--sf-border-style) transparent;
-   *   border-radius:    var(--sf-button-radius);
-   *   font:             inherit;
-   *   font-weight:      var(--sf-button-font-weight);
-   *   cursor:           pointer;
-   *   user-select:      none;
-   * }
-   * .sf-button--primary {
-   *   background:       var(--sf-color-primary);
-   *   color:            var(--sf-color-text--on-primary);
-   * }
-   * .sf-button--secondary {
-   *   background:       transparent;
-   *   color:            var(--sf-color-text);
-   *   border-color:     var(--sf-color-border);
-   * }
-   * .sf-button--ghost {
-   *   background:       transparent;
-   *   color:            var(--sf-color-link);
-   * }
-   * .sf-button--danger {
-   *   background:       var(--sf-color-danger);
-   *   color:            var(--sf-color-text--on-danger);
-   * }
-   * .sf-button--s   { --sf-button-pad-x: var(--sf-space-s); --sf-button-pad-y: var(--sf-space-2xs); }
-   * .sf-button--m   { --sf-button-pad-x: var(--sf-space-m); --sf-button-pad-y: var(--sf-space-s);   }
-   * .sf-button--l   { --sf-button-pad-x: var(--sf-space-l); --sf-button-pad-y: var(--sf-space-m);   }
-   */
+   * Works on <button>, <a>, <input type="submit">, <label>.
+   * Focus rings are inherited from core/base.css.
+   * Transitions are inherited from core/motion.css (interactive elements).
+   * Disabled visual is provided by .is-disabled (states.css) or :disabled.
+   * Loading spinner is provided by .is-loading (states.css).
+   * ============================================================ */
+
+  .sf-button {
+    display:          inline-flex;
+    align-items:      center;
+    justify-content:  center;
+    gap:              var(--sf-button-gap);
+    padding:          var(--sf-button-padding-block) var(--sf-button-padding-inline);
+    min-block-size:   var(--sf-button-min-height);
+    border:           var(--sf-button-border-width) solid transparent;
+    border-radius:    var(--sf-button-radius);
+    font:             inherit;
+    font-size:        inherit;
+    font-weight:      var(--sf-button-font-weight);
+    line-height:      1;
+    text-decoration:  none;
+    white-space:      nowrap;
+    cursor:           pointer;
+    user-select:      none;
+    appearance:       none;
+    position:         relative;
+  }
+
+  /* Native <button> reset — avoids default OS chrome interfering with our styles. */
+  .sf-button:where(button) { background: none; }
+
+  /* ── Colour variants ─── */
+
+  .sf-button--primary {
+    background: var(--sf-color-primary);
+    color:      var(--sf-color-text--on-primary);
+  }
+  .sf-button--primary:hover:not(:disabled, [aria-disabled="true"]) {
+    background: var(--sf-color-primary--hover);
+  }
+  .sf-button--primary:active:not(:disabled, [aria-disabled="true"]) {
+    background: var(--sf-color-primary--active);
+  }
+
+  .sf-button--secondary {
+    background:   transparent;
+    color:        var(--sf-color-text);
+    border-color: var(--sf-color-border--strong);
+  }
+  .sf-button--secondary:hover:not(:disabled, [aria-disabled="true"]) {
+    background:   var(--sf-color-bg--hover);
+    border-color: var(--sf-color-border--strong);
+  }
+  .sf-button--secondary:active:not(:disabled, [aria-disabled="true"]) {
+    background: var(--sf-color-bg--selected);
+  }
+
+  .sf-button--ghost {
+    background: transparent;
+    color:      var(--sf-color-link);
+  }
+  .sf-button--ghost:hover:not(:disabled, [aria-disabled="true"]) {
+    background: var(--sf-color-primary-subtle);
+  }
+  .sf-button--ghost:active:not(:disabled, [aria-disabled="true"]) {
+    background: var(--sf-color-primary-muted);
+  }
+
+  .sf-button--danger {
+    background:   var(--sf-color-danger);
+    color:        var(--sf-color-text--on-danger);
+    border-color: transparent;
+  }
+  .sf-button--danger:hover:not(:disabled, [aria-disabled="true"]) {
+    background: var(--sf-color-danger-darker, color-mix(in oklab, var(--sf-color-danger) 82%, var(--sf-color-text)));
+  }
+  .sf-button--danger:active:not(:disabled, [aria-disabled="true"]) {
+    background: var(--sf-color-danger-xdark, color-mix(in oklab, var(--sf-color-danger) 60%, var(--sf-color-text)));
+  }
+
+  .sf-button--neutral {
+    background:   var(--sf-color-inset);
+    color:        var(--sf-color-text);
+    border-color: var(--sf-color-border);
+  }
+  .sf-button--neutral:hover:not(:disabled, [aria-disabled="true"]) {
+    background: var(--sf-color-bg--hover);
+  }
+
+  /* ── Size variants ─── */
+
+  .sf-button--s {
+    --sf-button-padding-block:  var(--sf-space-2xs);
+    --sf-button-padding-inline: var(--sf-space-s);
+    font-size: var(--sf-text-s);
+  }
+  .sf-button--l {
+    --sf-button-padding-block:  var(--sf-space-s);
+    --sf-button-padding-inline: var(--sf-space-l);
+    font-size: var(--sf-text-l);
+  }
+
+  /* ── Shape variants ─── */
+
+  /* Icon-only: square aspect. Keep padding-block so touch target stays ≥ var(--sf-touch-target). */
+  .sf-button--icon {
+    --sf-button-padding-inline: var(--sf-button-padding-block);
+    aspect-ratio: 1;
+  }
+
+  .sf-button--pill { border-radius: var(--sf-radius-pill, 9999px); }
+
+  /* ── Full-width ─── */
+  .sf-button--full {
+    display: flex;
+    inline-size: 100%;
+  }
+
+  /* ── Disabled state ───
+     Covers both native :disabled (button/input) and aria-disabled="true"
+     (<a> buttons and custom elements). See states.css .is-disabled for the
+     same treatment applied via a class. */
+  .sf-button:disabled,
+  .sf-button[aria-disabled="true"] {
+    opacity:        var(--sf-opacity-disabled);
+    cursor:         not-allowed;
+    pointer-events: none;
+  }
+
+  /* ── Loading state ───
+     .is-loading (states.css) hides content and shows a centred spinner.
+     Append it alongside the variant class — no additional CSS needed here. */
 
   /* ============================================================
    * .sf-card — content container with concentric radius
-   * ============================================================
    *
-   * .sf-card {
-   *   display:          flex;
-   *   flex-direction:   column;
-   *   gap:              var(--sf-card-gap);
-   *   padding:          var(--sf-card-padding);
-   *   background:       var(--sf-card-bg);
-   *   border-radius:    var(--sf-card-radius-outer);
-   *   box-shadow:       var(--sf-card-shadow);
-   * }
-   * .sf-card--bordered {
-   *   border:           var(--sf-card-border-width) var(--sf-border-style) var(--sf-card-border-color);
-   *   box-shadow:       none;
-   * }
-   * .sf-card--elevated {
-   *   box-shadow:       var(--sf-shadow-l);
-   * }
-   * .sf-card--interactive {
-   *   transition:       transform var(--sf-duration-fast) var(--sf-ease-out),
-   *                     box-shadow var(--sf-duration-fast) var(--sf-ease-out);
-   * }
-   * .sf-card--interactive:hover {
-   *   transform:        translateY(-2px);
-   *   box-shadow:       var(--sf-shadow-l);
-   * }
-   * .sf-card__header,
-   * .sf-card__body,
-   * .sf-card__footer {
-   *   display: contents;
-   * }
-   */
+   * Concentric radius: --sf-card-radius-outer = radius + padding, so inner
+   * elements using the global --sf-radius-m stay visually proportional.
+   *
+   * Sections (__header, __body, __footer) are transparent layout wrappers
+   * (display: contents). The card's own flex + gap controls vertical rhythm.
+   * For edge-to-edge images (product card, hero card):
+   *   set --sf-card-padding: 0 and manage padding on __body directly.
+   * ============================================================ */
+
+  .sf-card {
+    display:        flex;
+    flex-direction: column;
+    gap:            var(--sf-card-gap);
+    padding:        var(--sf-card-padding);
+    background:     var(--sf-card-bg);
+    border-radius:  var(--sf-card-radius-outer);
+    box-shadow:     var(--sf-card-shadow);
+    overflow:       hidden; /* clips children to radius (e.g. edge-to-edge images) */
+  }
+
+  /* Semantic section wrappers — transparent to layout by default.
+     Children flow directly into the card's flex column. */
+  .sf-card__header,
+  .sf-card__body,
+  .sf-card__footer { display: contents; }
+
+  /* ── Style variants ─── */
+
+  .sf-card--bordered {
+    border:     var(--sf-card-border-width) solid var(--sf-card-border-color);
+    box-shadow: none;
+  }
+
+  .sf-card--elevated {
+    box-shadow: var(--sf-shadow-l);
+  }
+
+  /* Interactive / hover-lift — applies transition; hover lifts the card.
+     Reduced motion: motion.css gates animation on prefers-reduced-motion;
+     the translate still fires but accessibility.css zeroes animation-duration
+     on *, so the card snaps rather than animates. */
+  .sf-card--interactive {
+    cursor:     pointer;
+    transition: transform var(--sf-duration-fast) var(--sf-ease-out),
+                box-shadow var(--sf-duration-fast) var(--sf-ease-out);
+  }
+  .sf-card--interactive:hover {
+    transform:  translateY(-2px);
+    box-shadow: var(--sf-shadow-l);
+  }
+  .sf-card--interactive:active {
+    transform:  translateY(0);
+    box-shadow: var(--sf-card-shadow);
+  }
+
+  /* Glow — a coloured ambient shadow using the primary brand colour. */
+  .sf-card--glow {
+    box-shadow: var(--sf-shadow-glow);
+  }
+  .sf-card--glow.sf-card--interactive:hover {
+    box-shadow: var(--sf-shadow-glow), var(--sf-shadow-l);
+  }
+
+  /* Flat — no shadow, no border. Relies on background for separation. */
+  .sf-card--flat {
+    box-shadow: none;
+  }
+
+  /* ── Layout variants ─── */
+
+  /* Horizontal (media-object style): image left, content right. */
+  .sf-card--horizontal {
+    flex-direction: row;
+    align-items:    stretch;
+  }
+  .sf-card--horizontal .sf-card__header,
+  .sf-card--horizontal .sf-card__body,
+  .sf-card--horizontal .sf-card__footer {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* No padding — for edge-to-edge content (images, full-bleed headers).
+     The consumer must pad child __body / __header / __footer elements
+     directly using the --sf-card-padding token or inline style. */
+  .sf-card--no-pad {
+    --sf-card-padding: 0;
+    gap: 0;
+  }
+
+  /* ── Divided variant ───
+     Adds visible top/bottom separators on header/footer. Restores sections
+     to block elements so they can carry their own padding and borders. */
+  .sf-card--divided .sf-card__header,
+  .sf-card--divided .sf-card__body,
+  .sf-card--divided .sf-card__footer {
+    display: block;
+  }
+  .sf-card--divided .sf-card__header {
+    padding-block-end: var(--sf-card-gap);
+    border-block-end:  var(--sf-card-border-width) solid var(--sf-card-border-color);
+    margin-block-end:  var(--sf-card-gap);
+  }
+  .sf-card--divided .sf-card__footer {
+    padding-block-start: var(--sf-card-gap);
+    border-block-start:  var(--sf-card-border-width) solid var(--sf-card-border-color);
+    margin-block-start:  var(--sf-card-gap);
+  }
 
   /* ============================================================
    * .sf-badge — small status / count
diff --git a/optional/tokens.components.css b/optional/tokens.components.css
index 2b214665..9dc36da6 100644
--- a/optional/tokens.components.css
+++ b/optional/tokens.components.css
@@ -29,16 +29,15 @@
      * Concentric radius math: outer = inner + padding. Keeps inner
      * elements that use the global --sf-radius-m visually
      * proportional inside a padded card.
-     *
-     * --sf-card-padding:        var(--sf-space-l);
-     * --sf-card-gap:            var(--sf-space-m);
-     * --sf-card-radius:         var(--sf-radius-m);
-     * --sf-card-radius-outer:   calc(var(--sf-card-radius) + var(--sf-card-padding));
-     * --sf-card-bg:             var(--sf-color-surface);
-     * --sf-card-border-width:   var(--sf-border-width-1);
-     * --sf-card-border-color:   var(--sf-color-border);
-     * --sf-card-shadow:         var(--sf-shadow-s);
      */
+    --sf-card-padding:        var(--sf-space-l);
+    --sf-card-gap:            var(--sf-space-m);
+    --sf-card-radius:         var(--sf-radius-m);
+    --sf-card-radius-outer:   calc(var(--sf-card-radius) + var(--sf-card-padding));
+    --sf-card-bg:             var(--sf-color-surface);
+    --sf-card-border-width:   var(--sf-border-width-1);
+    --sf-card-border-color:   var(--sf-color-border);
+    --sf-card-shadow:         var(--sf-shadow-s);
 
     /* ============================================================
      * FIELD TOKENS
@@ -57,12 +56,10 @@
     --sf-button-radius:         var(--sf-radius-m);
     --sf-button-padding-block:  var(--sf-space-xs);
     --sf-button-padding-inline: var(--sf-space-m);
-    /*
-     * --sf-button-gap:          var(--sf-space-2xs);
-     * --sf-button-font-weight:  var(--sf-font-weight-interactive);
-     * --sf-button-min-height:   var(--sf-touch-target);
-     * --sf-button-border-width: var(--sf-border-width-1);
-     */
+    --sf-button-gap:            var(--sf-space-2xs);
+    --sf-button-font-weight:    var(--sf-font-weight-interactive);
+    --sf-button-min-height:     var(--sf-touch-target);
+    --sf-button-border-width:   var(--sf-border-width-1);
 
     /* ============================================================
      * BADGE TOKENS
diff --git a/token-registry.json b/token-registry.json
index 849c14cf..d84998ce 100644
--- a/token-registry.json
+++ b/token-registry.json
@@ -1,7 +1,7 @@
 {
   "_meta": {
     "generatedBy": "scripts/gen-token-registry.js",
-    "nextId": 693
+    "nextId": 705
   },
   "tokens": [
     {
@@ -2775,6 +2775,54 @@
     {
       "id": 692,
       "name": "--sf-z-tooltip"
+    },
+    {
+      "id": 693,
+      "name": "--sf-button-border-width"
+    },
+    {
+      "id": 694,
+      "name": "--sf-button-font-weight"
+    },
+    {
+      "id": 695,
+      "name": "--sf-button-gap"
+    },
+    {
+      "id": 696,
+      "name": "--sf-button-min-height"
+    },
+    {
+      "id": 697,
+      "name": "--sf-card-bg"
+    },
+    {
+      "id": 698,
+      "name": "--sf-card-border-color"
+    },
+    {
+      "id": 699,
+      "name": "--sf-card-border-width"
+    },
+    {
+      "id": 700,
+      "name": "--sf-card-gap"
+    },
+    {
+      "id": 701,
+      "name": "--sf-card-padding"
+    },
+    {
+      "id": 702,
+      "name": "--sf-card-radius"
+    },
+    {
+      "id": 703,
+      "name": "--sf-card-radius-outer"
+    },
+    {
+      "id": 704,
+      "name": "--sf-card-shadow"
     }
   ]
 }