diff --git a/README.md b/README.md
index c5c57705..2876ca4d 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 <p align="center">
   A cascade-layer CSS framework you never compile.<br>
-  747 design tokens, automatic dark mode, fluid type &amp; spacing — no build step, no Node, no JavaScript.
+  741 design tokens, automatic dark mode, fluid type &amp; spacing — no build step, no Node, no JavaScript.
 </p>
 
 <p align="center">
@@ -67,7 +67,7 @@ Every letter of SLASHED is a design commitment, and each one is checkable agains
 
 ## What's inside
 
-- **747 design tokens** (`--sf-*`) covering color, typography, spacing, layout, borders, shadows, motion, and z-index — catalogued in a machine-readable [API index](docs/api-index.json).
+- **741 design tokens** (`--sf-*`) covering color, typography, spacing, layout, borders, shadows, motion, and z-index — catalogued in a machine-readable [API index](docs/api-index.json).
 - **Layout primitives** — `.sf-container`, `.sf-stack`, `.sf-grid`, `.sf-cluster`, `.sf-sidebar`, `.sf-switcher`, `.sf-cover`, `.sf-center`, `.sf-frame`, `.sf-reel`, `.sf-bento`, and more ([docs/layout.md](docs/layout.md)).
 - **Macros** — recipes like `.sf-prose`, `.sf-flow`, `.sf-truncate`, `.sf-aspect`, `.sf-scroll-shadow`, `.sf-surface` ([docs/macros.md](docs/macros.md)).
 - **State classes** — `.sf-is-*` classes mapped to ARIA semantics ([docs/states.md](docs/states.md)).
diff --git a/badges/badge-optimal.json b/badges/badge-optimal.json
index 31ef54a3..99f96683 100644
--- a/badges/badge-optimal.json
+++ b/badges/badge-optimal.json
@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
   "label": "optimal",
-  "message": "19.6 kB gzip",
+  "message": "19.4 kB gzip",
   "color": "brightgreen",
   "namedLogo": "css3"
 }
diff --git a/configurator/src/components/panels/EffectsPanel.svelte b/configurator/src/components/panels/EffectsPanel.svelte
index 58d5487c..808b867d 100644
--- a/configurator/src/components/panels/EffectsPanel.svelte
+++ b/configurator/src/components/panels/EffectsPanel.svelte
@@ -28,7 +28,6 @@
   let blur            = $derived(parseNum(overrides["--sf-blur"], 12, "px"));
   let opacityMuted    = $derived(parseNum(overrides["--sf-opacity-muted"], 0.5));
   let opacityDisabled = $derived(parseNum(overrides["--sf-opacity-disabled"], 0.45));
-  let pendingOpacity  = $derived(parseNum(overrides["--sf-state-pending-opacity"], 0.7));
   let scrollbarThumb  = $derived(overrides["--sf-scrollbar-thumb"] ?? "");
   let scrollbarTrack  = $derived(overrides["--sf-scrollbar-track"] ?? "");
 
@@ -84,19 +83,11 @@
         onChange={(v) => onSet("--sf-opacity-disabled", String(v))}
         onReset={() => onReset("--sf-opacity-disabled")}
       />
-      <SliderRow
-        label="Pending opacity" value={pendingOpacity} min={0.1} max={1} step={0.05}
-        help="--sf-state-pending-opacity — opacity of elements in loading/pending state"
-        overridden={"--sf-state-pending-opacity" in overrides}
-        onChange={(v) => onSet("--sf-state-pending-opacity", String(v))}
-        onReset={() => onReset("--sf-state-pending-opacity")}
-      />
       <!-- Opacity preview -->
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-2">
         {#each [
           { label: "muted", token: "--sf-opacity-muted", val: opacityMuted },
           { label: "disabled", token: "--sf-opacity-disabled", val: opacityDisabled },
-          { label: "pending", token: "--sf-state-pending-opacity", val: pendingOpacity },
         ] as row (row.label)}
           <div class="flex items-center gap-3">
             <span class="text-[9px] text-slate-400 dark:text-slate-600 w-14">{row.label}</span>
diff --git a/configurator/src/components/panels/MiscPanel.svelte b/configurator/src/components/panels/MiscPanel.svelte
index 83db9d19..0ad67968 100644
--- a/configurator/src/components/panels/MiscPanel.svelte
+++ b/configurator/src/components/panels/MiscPanel.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import SliderRow from '../inputs/SliderRow.svelte';
   import ColorInput from '../inputs/ColorInput.svelte';
-  import Toggle from '../inputs/Toggle.svelte';
   import Section from '../inputs/Section.svelte';
   import { SIZE_SCALE } from '../../lib/variableScales';
 
@@ -60,7 +59,7 @@
   let showObjectFit = $state(false);
   let showPrint = $state(false);
   let showSafeArea = $state(false);
-  let showStateFlags = $state(false);
+  let showFieldMarker = $state(false);
 
   function getSizeValue(t: typeof SIZE_TOKENS[0]): number {
     return parseNum(overrides[t.token]?.replace("rem",""), t.default);
@@ -456,35 +455,8 @@
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
-  <!-- STATE FLAGS -->
-  <Section title="State flags" bind:open={showStateFlags}>
-      <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
-        Boolean CSS custom property flags (0 = off, 1 = on). Components toggle these to activate state-specific styles.
-        Overriding globally forces all matching elements into that state — useful for testing and demos.
-      </p>
-      <div class="space-y-1.5">
-        {#each [
-          { label: "sf-is-active",  token: "--sf-is-active",  note: "Active/selected state" },
-          { label: "sf-is-current", token: "--sf-is-current", note: "Current page/item" },
-          { label: "sf-is-open",    token: "--sf-is-open",    note: "Open/expanded state" },
-          { label: "sf-is-pressed", token: "--sf-is-pressed", note: "Pressed/depressed state" },
-        ] as f (f.token)}
-          {@const cur = overrides[f.token] ?? "0"}
-          <div class="flex items-center gap-2 py-0.5">
-            <Toggle
-              size="sm"
-              checked={cur === "1"}
-              ariaLabel={f.label}
-              onToggle={() => cur === "1" ? onReset(f.token) : onSet(f.token, "1")}
-            />
-            <span class="text-[9px] font-mono text-slate-700 dark:text-slate-300 w-24 shrink-0">{f.label}</span>
-            <span class="text-[9px] text-slate-400 dark:text-slate-600 flex-1">{f.note}</span>
-            {#if f.token in overrides}
-              <button onclick={() => onReset(f.token)} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
-            {/if}
-          </div>
-        {/each}
-      </div>
+  <!-- FIELD MARKER -->
+  <Section title="Field marker" bind:open={showFieldMarker}>
       <div class="flex items-center gap-2 pt-1">
         <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Required marker</span>
         <input
diff --git a/configurator/src/components/panels/WcagPanel.svelte b/configurator/src/components/panels/WcagPanel.svelte
index cab1ea2c..19205bb4 100644
--- a/configurator/src/components/panels/WcagPanel.svelte
+++ b/configurator/src/components/panels/WcagPanel.svelte
@@ -25,7 +25,7 @@
 
   const TEXT_OPTS: ColorOpt[] = [
     { label: "Text",            expr: "var(--sf-color-text)" },
-    { label: "Text secondary",  expr: "var(--sf-color-text--secondary)" },
+    { label: "Text secondary",  expr: "var(--sf-color-text--subtle)" },
     { label: "Text muted",      expr: "var(--sf-color-text--muted)" },
     { label: "White",           expr: "#ffffff" },
     { label: "Black",           expr: "#000000" },
diff --git a/configurator/src/data/api-index.generated.json b/configurator/src/data/api-index.generated.json
index dad4b318..04aa215d 100644
--- a/configurator/src/data/api-index.generated.json
+++ b/configurator/src/data/api-index.generated.json
@@ -2,21 +2,21 @@
   "_sync": {
     "generatedBy": "configurator/scripts/sync-api.mjs",
     "source": "docs/api-index.json",
-    "tokensHash": "2d7e174d5d83",
+    "tokensHash": "d99951a174ca",
     "bundles": [
       "full",
       "optimal"
     ],
     "counts": {
-      "tokens": 747,
+      "tokens": 741,
       "byTier": {
-        "PUBLIC": 693,
-        "PUBLIC-ADVANCED": 53,
+        "PUBLIC": 691,
+        "PUBLIC-ADVANCED": 49,
         "INTERNAL": 1
       },
       "byCategory": {
         "Layout tokens": 53,
-        "Core tokens": 616,
+        "Core tokens": 610,
         "Macro tokens": 32,
         "Component tokens": 46
       }
@@ -7331,14 +7331,14 @@
       ]
     },
     {
-      "name": "--sf-color-text--secondary",
+      "name": "--sf-color-text--subtle",
       "tier": "PUBLIC",
       "role": "consumption",
       "namespace": "color",
       "category": "Core tokens",
       "group": "Text",
       "description": "Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.",
-      "note": "De-emphasised secondary text (captions, labels, supporting copy).",
+      "note": "De-emphasised, lower-emphasis text (captions, labels, supporting copy). Second tier below --sf-color-text; sits between it and --sf-color-text--muted.",
       "value": "light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )",
       "aliasOf": null,
       "registered": false,
@@ -7792,27 +7792,6 @@
         "optimal"
       ]
     },
-    {
-      "name": "--sf-current-font-weight",
-      "tier": "PUBLIC",
-      "role": "consumption",
-      "namespace": "current",
-      "category": "Core tokens",
-      "group": "Font weights",
-      "description": "Numeric font-weight scale plus named aliases for common roles.",
-      "note": "Inherits the current font-weight from context. Useful as a reset.",
-      "value": "var(--sf-font-weight-bold)",
-      "aliasOf": "--sf-font-weight-bold",
-      "registered": false,
-      "syntax": null,
-      "fallbackOnly": false,
-      "optional": false,
-      "layer": "slashed.tokens",
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
     {
       "name": "--sf-density",
       "tier": "PUBLIC-ADVANCED",
@@ -10708,48 +10687,6 @@
         "optimal"
       ]
     },
-    {
-      "name": "--sf-is-active",
-      "tier": "PUBLIC-ADVANCED",
-      "role": "knob",
-      "namespace": "is",
-      "category": "Core tokens",
-      "group": "INTERACTION STATE FLAGS",
-      "description": "Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.",
-      "note": "Integer state flag for the active state. Set to 1 (via JS or .sf-is-active) to drive branching calc() expressions. 0 = default (inactive).",
-      "value": "0",
-      "aliasOf": null,
-      "registered": true,
-      "syntax": "<integer>",
-      "fallbackOnly": false,
-      "optional": false,
-      "layer": "slashed.tokens",
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
-    {
-      "name": "--sf-is-current",
-      "tier": "PUBLIC-ADVANCED",
-      "role": "knob",
-      "namespace": "is",
-      "category": "Core tokens",
-      "group": "INTERACTION STATE FLAGS",
-      "description": "Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.",
-      "note": "Integer state flag for the current/selected state. Set to 1 (via .sf-is-current) to drive branching calc() expressions. 0 = default.",
-      "value": "0",
-      "aliasOf": null,
-      "registered": true,
-      "syntax": "<integer>",
-      "fallbackOnly": false,
-      "optional": false,
-      "layer": "slashed.tokens",
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
     {
       "name": "--sf-is-dark",
       "tier": "INTERNAL",
@@ -10771,48 +10708,6 @@
         "optimal"
       ]
     },
-    {
-      "name": "--sf-is-open",
-      "tier": "PUBLIC-ADVANCED",
-      "role": "knob",
-      "namespace": "is",
-      "category": "Core tokens",
-      "group": "INTERACTION STATE FLAGS",
-      "description": "Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.",
-      "note": "Integer state flag for the open/expanded state. Set to 1 (via .sf-is-open) to drive branching calc() expressions. 0 = default (closed).",
-      "value": "0",
-      "aliasOf": null,
-      "registered": true,
-      "syntax": "<integer>",
-      "fallbackOnly": false,
-      "optional": false,
-      "layer": "slashed.tokens",
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
-    {
-      "name": "--sf-is-pressed",
-      "tier": "PUBLIC-ADVANCED",
-      "role": "knob",
-      "namespace": "is",
-      "category": "Core tokens",
-      "group": "INTERACTION STATE FLAGS",
-      "description": "Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.",
-      "note": "Integer state flag for the pressed state. Set to 1 (via .sf-is-pressed) to drive branching calc() expressions. 0 = default.",
-      "value": "0",
-      "aliasOf": null,
-      "registered": true,
-      "syntax": "<integer>",
-      "fallbackOnly": false,
-      "optional": false,
-      "layer": "slashed.tokens",
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
     {
       "name": "--sf-leading-normal",
       "tier": "PUBLIC",
@@ -11198,7 +11093,7 @@
       "namespace": "opacity",
       "category": "Core tokens",
       "group": "Opacity",
-      "description": "Opacity tokens for specific UI states: --sf-opacity-disabled dims non-interactive elements; --sf-state-pending-opacity dims elements in an async/loading state.",
+      "description": "Opacity tokens for specific UI states: --sf-opacity-disabled dims non-interactive elements.",
       "note": "Opacity for disabled UI elements (typically 0.4–0.5).",
       "value": "0.45",
       "aliasOf": null,
@@ -13480,27 +13375,6 @@
         "optimal"
       ]
     },
-    {
-      "name": "--sf-state-pending-opacity",
-      "tier": "PUBLIC",
-      "role": "knob",
-      "namespace": "state",
-      "category": "Core tokens",
-      "group": "Opacity",
-      "description": "Opacity tokens for specific UI states: --sf-opacity-disabled dims non-interactive elements; --sf-state-pending-opacity dims elements in an async/loading state.",
-      "note": "Opacity for pending / loading state elements.",
-      "value": "0.7",
-      "aliasOf": null,
-      "registered": false,
-      "syntax": null,
-      "fallbackOnly": false,
-      "optional": false,
-      "layer": "slashed.tokens",
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
     {
       "name": "--sf-sticky-offset",
       "tier": "PUBLIC",
diff --git a/configurator/src/data/classes.generated.json b/configurator/src/data/classes.generated.json
index 75ca9a4c..2f134350 100644
--- a/configurator/src/data/classes.generated.json
+++ b/configurator/src/data/classes.generated.json
@@ -1885,54 +1885,14 @@
       "layer": "slashed.layout"
     },
     {
-      "name": "sf-is-active",
-      "selector": ".sf-is-active",
-      "kind": "state",
-      "category": "State classes",
-      "group": "ACTIVE / SELECTED / CURRENT",
-      "description": "Active state — applied to the currently interacted-with element (e.g. pressed button, active menu item). Sets --sf-is-active to 1 for calc() branching.",
-      "optional": false,
-      "layer": "slashed.states"
-    },
-    {
-      "name": "sf-is-busy",
-      "selector": ".sf-is-busy",
-      "kind": "state",
-      "category": "State classes",
-      "group": "LOADING / ASYNC FEEDBACK",
-      "description": "Busy state — shows a progress cursor to indicate background processing. Does not mask content; use sf-is-loading when content should be hidden during loading.",
-      "optional": false,
-      "layer": "slashed.states"
-    },
-    {
-      "name": "sf-is-collapsed",
-      "selector": ".sf-is-collapsed",
-      "kind": "state",
-      "category": "State classes",
-      "group": "OPEN / CLOSED",
-      "description": "Collapsed state for disclosure widgets — hides the expandable region. Pair with sf-is-expanded or sf-is-open. Components add transitions.",
-      "optional": false,
-      "layer": "slashed.states"
-    },
-    {
-      "name": "sf-is-current",
-      "selector": ".sf-is-current",
-      "kind": "state",
-      "category": "State classes",
-      "group": "ACTIVE / SELECTED / CURRENT",
-      "description": "Current/selected state — marks the active page in navigation or the selected item in a list. Sets --sf-is-current to 1 for calc() branching.",
-      "optional": false,
-      "layer": "slashed.states"
-    },
-    {
-      "name": "sf-is-danger",
-      "selector": ".sf-is-danger",
-      "kind": "state",
-      "category": "State classes",
-      "group": "VALIDATION / FEEDBACK",
-      "description": "Danger status state — applies danger color tokens for destructive actions (e.g. a delete confirmation dialog) and form validation errors.",
-      "optional": false,
-      "layer": "slashed.states"
+      "name": "sf-invisible",
+      "selector": ".sf-invisible",
+      "kind": "utility",
+      "category": "Utilities",
+      "group": "VISIBILITY HELPERS (.sf-invisible / .sf-visible)",
+      "description": "Visibility helper (optional/utilities.css) — hides the element visually but keeps it in the layout and accessibility tree (visibility: hidden). Not a runtime state: no JS/ARIA condition of its own.",
+      "optional": true,
+      "layer": "slashed.utilities"
     },
     {
       "name": "sf-is-disabled",
@@ -1990,27 +1950,7 @@
       "kind": "state",
       "category": "State classes",
       "group": "VALIDATION / FEEDBACK",
-      "description": "Error state — alias for sf-is-danger. Applies danger color tokens to indicate a validation failure or system error. Visual styling is identical to sf-is-invalid.",
-      "optional": false,
-      "layer": "slashed.states"
-    },
-    {
-      "name": "sf-is-expanded",
-      "selector": ".sf-is-expanded",
-      "kind": "state",
-      "category": "State classes",
-      "group": "OPEN / CLOSED",
-      "description": "Expanded state for disclosure widgets — shows the expandable region. Inverse of sf-is-collapsed. Components add transitions.",
-      "optional": false,
-      "layer": "slashed.states"
-    },
-    {
-      "name": "sf-is-hidden",
-      "selector": ".sf-is-hidden",
-      "kind": "state",
-      "category": "State classes",
-      "group": "VISIBILITY",
-      "description": "Hidden state — removes the element from layout and accessibility tree (display: none !important).",
+      "description": "Error state — general (not form-field-specific) negative feedback. Applies danger color tokens to indicate a validation failure or system error. Visual styling is identical to sf-is-invalid.",
       "optional": false,
       "layer": "slashed.states"
     },
@@ -2019,7 +1959,7 @@
       "selector": ".sf-is-highlighted",
       "kind": "state",
       "category": "State classes",
-      "group": "ACTIVE / SELECTED / CURRENT",
+      "group": "SELECTED / HIGHLIGHTED",
       "description": "Highlighted state — applies a highlight background. Useful for search result highlighting and keyboard-navigated lists.",
       "optional": false,
       "layer": "slashed.states"
@@ -2044,16 +1984,6 @@
       "optional": false,
       "layer": "slashed.states"
     },
-    {
-      "name": "sf-is-invisible",
-      "selector": ".sf-is-invisible",
-      "kind": "state",
-      "category": "State classes",
-      "group": "VISIBILITY",
-      "description": "Invisible state — hides the element visually but keeps it in the layout and accessibility tree (visibility: hidden).",
-      "optional": false,
-      "layer": "slashed.states"
-    },
     {
       "name": "sf-is-loading",
       "selector": ".sf-is-loading",
@@ -2064,52 +1994,12 @@
       "optional": false,
       "layer": "slashed.states"
     },
-    {
-      "name": "sf-is-open",
-      "selector": ".sf-is-open",
-      "kind": "state",
-      "category": "State classes",
-      "group": "OPEN / CLOSED",
-      "description": "Open/shown state for modals, dropdowns, and drawers — counterpart to sf-is-collapsed/sf-is-hidden. Sets --sf-is-open to 1 for calc() branching.",
-      "optional": false,
-      "layer": "slashed.states"
-    },
-    {
-      "name": "sf-is-pending",
-      "selector": ".sf-is-pending",
-      "kind": "state",
-      "category": "State classes",
-      "group": "LOADING / ASYNC FEEDBACK",
-      "description": "Pending state for optimistic UI — content remains visible but dimmed while an async request is in flight. Differs from sf-is-loading (which hides content entirely).",
-      "optional": false,
-      "layer": "slashed.states"
-    },
-    {
-      "name": "sf-is-pressed",
-      "selector": ".sf-is-pressed",
-      "kind": "state",
-      "category": "State classes",
-      "group": "ACTIVE / SELECTED / CURRENT",
-      "description": "Pressed/toggled-on state for toggle buttons. Sets --sf-is-pressed to 1 for calc() branching and signals the selected state to components.",
-      "optional": false,
-      "layer": "slashed.states"
-    },
-    {
-      "name": "sf-is-readonly",
-      "selector": ".sf-is-readonly",
-      "kind": "state",
-      "category": "State classes",
-      "group": "INTERACTIVITY",
-      "description": "Readonly state — removes pointer events and text selection. Use for fields that display data but cannot be edited.",
-      "optional": false,
-      "layer": "slashed.states"
-    },
     {
       "name": "sf-is-selected",
       "selector": ".sf-is-selected",
       "kind": "state",
       "category": "State classes",
-      "group": "ACTIVE / SELECTED / CURRENT",
+      "group": "SELECTED / HIGHLIGHTED",
       "description": "Selected state — marks an item as selected in a list, table row, or grid cell. Visual specifics (background, border) are applied by component styles.",
       "optional": false,
       "layer": "slashed.states"
@@ -2144,16 +2034,6 @@
       "optional": false,
       "layer": "slashed.states"
     },
-    {
-      "name": "sf-is-visible",
-      "selector": ".sf-is-visible",
-      "kind": "state",
-      "category": "State classes",
-      "group": "VISIBILITY",
-      "description": "Visible state — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent.",
-      "optional": false,
-      "layer": "slashed.states"
-    },
     {
       "name": "sf-is-warning",
       "selector": ".sf-is-warning",
@@ -3204,6 +3084,16 @@
       "optional": false,
       "layer": "slashed.macros"
     },
+    {
+      "name": "sf-visible",
+      "selector": ".sf-visible",
+      "kind": "utility",
+      "category": "Utilities",
+      "group": "VISIBILITY HELPERS (.sf-invisible / .sf-visible)",
+      "description": "Visibility helper (optional/utilities.css) — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent.",
+      "optional": true,
+      "layer": "slashed.utilities"
+    },
     {
       "name": "skip-link",
       "selector": ".skip-link",
diff --git a/configurator/src/data/domain-patterns.json b/configurator/src/data/domain-patterns.json
index 8703ab22..cd3e01f2 100644
--- a/configurator/src/data/domain-patterns.json
+++ b/configurator/src/data/domain-patterns.json
@@ -16,6 +16,5 @@
   "motion":     ["motion", "duration", "easing", "ease", "scroll-timeline", "stagger", "hover-"],
   "effects":    ["filter", "blur", "backdrop", "opacity", "effect"],
   "misc":       ["z-", "cursor", "ring", "focus", "outline", "selection", "icon",
-                 "sf-is-active", "sf-is-current", "sf-is-open", "sf-is-pressed",
                  "field-required", "object-fit", "object-position", "print-", "scrollbar", "size-"]
 }
diff --git a/configurator/src/data/token-registry.generated.json b/configurator/src/data/token-registry.generated.json
index adff6376..30ee8502 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": 801
+    "nextId": 802
   },
   "tokens": [
     {
@@ -1289,7 +1289,8 @@
     },
     {
       "id": 314,
-      "name": "--sf-color-text--secondary"
+      "name": "--sf-color-text--secondary",
+      "removed": true
     },
     {
       "id": 315,
@@ -1373,7 +1374,8 @@
     },
     {
       "id": 335,
-      "name": "--sf-current-font-weight"
+      "name": "--sf-current-font-weight",
+      "removed": true
     },
     {
       "id": 336,
@@ -1901,11 +1903,13 @@
     },
     {
       "id": 466,
-      "name": "--sf-is-active"
+      "name": "--sf-is-active",
+      "removed": true
     },
     {
       "id": 467,
-      "name": "--sf-is-current"
+      "name": "--sf-is-current",
+      "removed": true
     },
     {
       "id": 468,
@@ -1913,11 +1917,13 @@
     },
     {
       "id": 469,
-      "name": "--sf-is-open"
+      "name": "--sf-is-open",
+      "removed": true
     },
     {
       "id": 470,
-      "name": "--sf-is-pressed"
+      "name": "--sf-is-pressed",
+      "removed": true
     },
     {
       "id": 471,
@@ -2443,7 +2449,8 @@
     },
     {
       "id": 599,
-      "name": "--sf-state-pending-opacity"
+      "name": "--sf-state-pending-opacity",
+      "removed": true
     },
     {
       "id": 600,
@@ -3261,6 +3268,10 @@
     {
       "id": 800,
       "name": "--sf-lumlocker-dark"
+    },
+    {
+      "id": 801,
+      "name": "--sf-color-text--subtle"
     }
   ]
 }
diff --git a/configurator/src/lib/preview/sections.ts b/configurator/src/lib/preview/sections.ts
index d332b067..799665ac 100644
--- a/configurator/src/lib/preview/sections.ts
+++ b/configurator/src/lib/preview/sections.ts
@@ -49,7 +49,7 @@ export function color(): string {
   const textRoles = well(`<div class="sf-stack sf-stack--xs">
     <span style="color:var(--sf-color-heading);font-size:var(--sf-text-l);font-weight:600">Heading — --sf-color-heading</span>
     <span style="color:var(--sf-color-text)">Body text — --sf-color-text</span>
-    <span style="color:var(--sf-color-text--secondary)">Secondary — --sf-color-text--secondary</span>
+    <span style="color:var(--sf-color-text--subtle)">Secondary — --sf-color-text--subtle</span>
     <span style="color:var(--sf-color-text--muted)">Muted — --sf-color-text--muted</span>
     <a href="#" onclick="event.preventDefault()" style="color:var(--sf-color-link)">Link — --sf-color-link</a>
   </div>`);
diff --git a/configurator/src/lib/preview/skin.ts b/configurator/src/lib/preview/skin.ts
index f451ce0f..59ffecb5 100644
--- a/configurator/src/lib/preview/skin.ts
+++ b/configurator/src/lib/preview/skin.ts
@@ -24,9 +24,9 @@ export function previewSkinCSS(): string {
   return `
     /* Text roles (framework ships no text utilities — these mirror semantic tokens) */
     .pv-eyebrow{font-size:var(--sf-text-xs);font-weight:var(--sf-font-weight-heading);text-transform:uppercase;letter-spacing:0.08em;color:var(--sf-color-text--muted);}
-    .pv-lead{font-size:var(--sf-text-l);color:var(--sf-color-text--secondary);}
+    .pv-lead{font-size:var(--sf-text-l);color:var(--sf-color-text--subtle);}
     .pv-muted{color:var(--sf-color-text--muted);}
-    .pv-secondary{color:var(--sf-color-text--secondary);}
+    .pv-secondary{color:var(--sf-color-text--subtle);}
     .pv-accent{color:var(--sf-color-primary-600);}
     .pv-on-primary{color:var(--sf-color-text--on-primary);}
     .pv-center-text{text-align:center;}
diff --git a/core/macros.css b/core/macros.css
index 5f4452fa..80b78f0b 100644
--- a/core/macros.css
+++ b/core/macros.css
@@ -276,7 +276,7 @@
       --sf-color-link:              oklch(from var(--sf-surface-contrast) l calc(c + 0.08) h);
       --sf-color-link--hover:       var(--sf-surface-contrast);
       --sf-color-link--underline:   oklch(from var(--sf-surface-contrast) l c h / 0.5);
-      --sf-color-text--secondary:   oklch(from var(--sf-surface-contrast) l c h / 0.70);
+      --sf-color-text--subtle:   oklch(from var(--sf-surface-contrast) l c h / 0.70);
       --sf-color-text--placeholder: oklch(from var(--sf-surface-contrast) l c h / 0.45);
       --sf-color-text--disabled:    oklch(from var(--sf-surface-contrast) l c h / 0.30);
       --sf-color-border:            oklch(from var(--sf-surface-contrast) l c h / 0.20);
diff --git a/core/states.css b/core/states.css
index 8b1ea755..bc073bbd 100644
--- a/core/states.css
+++ b/core/states.css
@@ -1,25 +1,32 @@
 /* SLASHED — core/states.css
    @layer slashed.states
    Generic runtime states toggled by JS or ARIA: visibility, interactivity, selection, busy/current.
-   Prefix: .sf-is-*; not utilities or component-specific variants. */
+   Prefix: .sf-is-*; not utilities or component-specific variants.
+
+   Reach for a native mechanism first — a pseudo-class (:disabled, :read-only,
+   :empty, :user-invalid), a boolean/enumerated attribute ([hidden], [disabled],
+   [readonly]), or an ARIA state ([aria-busy], [aria-current], [aria-expanded],
+   [aria-selected], [aria-pressed]) — since the browser (and assistive tech)
+   already understands it for free. Add a .sf-is-* class only for states with
+   no native equivalent, or ones this file's own tokens/consumers need as a
+   hook (see docs/states.md). See docs/states.md § "Prefer native state" for
+   the full rationale and the [hidden] precedent that got .sf-is-hidden
+   removed in favour of the attribute it duplicated. */
 
 @layer slashed.states {
 
-  /* -- VISIBILITY -- */
+  /* No visibility classes here: .sf-is-hidden duplicated [hidden] (removed —
+     core/reset.css hardens that attribute identically). .sf-invisible /
+     .sf-visible moved to optional/utilities.css as single-property helpers
+     (same call as Bulma's is-hidden/is-invisible living under "helpers",
+     not component/state docs) — still the hook docs/roadmap.md's
+     reveal-on-scroll pattern targets, just renamed and relocated. */
 
-  .sf-is-hidden {
-    display: none !important;
-  }
-
-  .sf-is-invisible {
-    visibility: hidden;
-  }
-
-  .sf-is-visible {
-    visibility: visible;
-  }
-
-  /* -- INTERACTIVITY -- */
+  /* -- INTERACTIVITY --
+     No .sf-is-readonly here: it duplicated :read-only for real form controls,
+     and its pointer-events:none blocked text selection that a genuinely
+     read-only field should still allow — reach for :read-only, or
+     [aria-readonly] on a non-native widget, instead. */
 
   /* cursor: not-allowed inherits to children with pointer-events: auto —
      intentional, part of the .sf-is-disabled API surface. */
@@ -31,11 +38,6 @@
     user-select:    none;
   }
 
-  .sf-is-readonly {
-    pointer-events: none;
-    user-select:    none;
-  }
-
   /* -- LOADING / ASYNC FEEDBACK -- */
 
   .sf-is-loading {
@@ -64,15 +66,11 @@
     animation: var(--sf-animation-spin);
   }
 
-  .sf-is-busy {
-    cursor: progress;
-  }
-
-  .sf-is-pending {
-
-    opacity: var(--sf-state-pending-opacity);
-    cursor:  progress;
-  }
+  /* No .sf-is-busy / .sf-is-pending here: both were a couple of
+     property-value declarations (cursor:progress, plus opacity for
+     pending's "optimistic UI" dimming) with no consumer and no native gap
+     they filled — [aria-busy="true"] covers the semantic, and the visual
+     is two lines to hand-roll in your own component CSS if you want it. */
 
   img.sf-is-skeleton,
   .sf-is-skeleton img {
@@ -94,48 +92,32 @@
     user-select:     none;
   }
 
-  /* -- ACTIVE / SELECTED / CURRENT -- */
-
-  .sf-is-active {
-
-    --sf-is-active: 1;
-  }
+  /* -- SELECTED / HIGHLIGHTED --
+     No .sf-is-active / .sf-is-open / .sf-is-collapsed / .sf-is-expanded /
+     .sf-is-current / .sf-is-pressed here: these only ever set an
+     inheritable --sf-is-* custom property for a hypothetical consumer
+     calc() to branch on, with zero consumer anywhere in this codebase or
+     its demo. Speculative "might be useful one day" surface, removed —
+     see docs/states.md § "Prefer native state". Reach for [aria-current],
+     [aria-expanded], [aria-pressed] as the styling hook instead; .sf-is-
+     selected / .sf-is-highlighted below cover the two cases (selection,
+     transient emphasis) that still need their own visual. */
 
   .sf-is-selected {
     background-color: var(--sf-color-bg--selected);
   }
 
-  .sf-is-current {
-
-    --sf-is-current: 1;
-    font-weight: var(--sf-current-font-weight, var(--sf-font-weight-bold));
-  }
-
   .sf-is-highlighted {
     background-color: var(--sf-color-bg--focus);
   }
 
-  .sf-is-pressed {
-
-    --sf-is-pressed: 1;
-    background-color: var(--sf-color-bg--selected);
-  }
-
-  /* -- OPEN / CLOSED -- */
-
-  .sf-is-open {
-    --sf-is-open: 1;
-  }
-
-  .sf-is-collapsed {
-    --sf-is-open: 0;
-  }
-
-  .sf-is-expanded {
-    --sf-is-open: 1;
-  }
-
-  /* -- VALIDATION / FEEDBACK -- */
+  /* -- VALIDATION / FEEDBACK --
+     No .sf-is-danger here: identical implementation to .sf-is-invalid/
+     .sf-is-error (both only ever wrote --sf-field-*, so it never worked as
+     the "destructive-action context" its own docs described outside a form
+     field) and, per docs/migration.md, visual variants belong in your own
+     component CSS anyway. Use .sf-is-invalid/.sf-is-error, or your own
+     `--danger` variant class, instead. */
 
   .sf-is-valid,
   .sf-is-success {
@@ -159,11 +141,6 @@
     --sf-field-text-color:   var(--sf-color-info-strong);
   }
 
-  .sf-is-danger {
-    --sf-field-border-color: var(--sf-color-danger);
-    --sf-field-text-color:   var(--sf-color-danger-strong);
-  }
-
   /* -- DRAG & DROP -- */
 
   .sf-is-dragging {
diff --git a/core/themes.css b/core/themes.css
index 23b15eb8..249b14ba 100644
--- a/core/themes.css
+++ b/core/themes.css
@@ -121,7 +121,7 @@
       --sf-color-danger:  var(--sf-color-danger-source-dark);
 
       --sf-color-text:              oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1)    c h);
-      --sf-color-text--secondary:   oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h);
+      --sf-color-text--subtle:   oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h);
       --sf-color-text--placeholder: oklch(from var(--sf-color-neutral) clamp(0.35, calc(l - 0.1),  0.65) c h);
       --sf-color-text--disabled:    oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.2),  0.55) c h);
       --sf-color-text--inverse:     oklch(from var(--sf-color-neutral) clamp(0.05, calc(l - 0.4),  0.35) c h);
@@ -179,7 +179,7 @@
       --sf-color-danger:  var(--sf-color-danger-source-light);
 
       --sf-color-text:              oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h);
-      --sf-color-text--secondary:   oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h);
+      --sf-color-text--subtle:   oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h);
       --sf-color-text--placeholder: oklch(from var(--sf-color-neutral-source-light) clamp(0.45, calc(l + 0.15), 0.75) c h);
       --sf-color-text--disabled:    oklch(from var(--sf-color-neutral-source-light) clamp(0.55, calc(l + 0.25), 0.82) c h);
       --sf-color-text--inverse:     oklch(from var(--sf-color-neutral-source-light) clamp(0.85, calc(l + 0.4),  0.98) c h);
diff --git a/core/tokens.css b/core/tokens.css
index 6aafd3b9..cebf0fa0 100644
--- a/core/tokens.css
+++ b/core/tokens.css
@@ -111,14 +111,13 @@
      theme. */
   @property --sf-is-dark { syntax: "<integer>"; inherits: true; initial-value: 0; }
 
-  /* @property — INTERACTION STATE FLAGS */
-  /* PUBLIC hooks for Style Queries — safe to set from consumer code, unlike
-     --sf-is-dark above. Allow components to react to states toggled on
-     ancestors via .sf-is-* classes. */
-  @property --sf-is-active  { syntax: "<integer>"; inherits: true; initial-value: 0; }
-  @property --sf-is-current { syntax: "<integer>"; inherits: true; initial-value: 0; }
-  @property --sf-is-pressed { syntax: "<integer>"; inherits: true; initial-value: 0; }
-  @property --sf-is-open    { syntax: "<integer>"; inherits: true; initial-value: 0; }
+  /* No --sf-is-active/-current/-pressed/-open here: they registered an
+     INTERACTION STATE FLAGS mechanism (inheritable custom properties set by
+     .sf-is-active/.sf-is-open/etc for a consumer's own calc() to branch on)
+     with zero consumers anywhere in this codebase, its demo, or the
+     configurator beyond its own preview toggle — speculative surface,
+     removed. Style off [aria-current]/[aria-expanded]/[aria-pressed]
+     instead; see docs/states.md § "Prefer native state". */
 
   /* ============================================================
      FLUID SCALE ENGINE — generative inputs
@@ -387,10 +386,9 @@
     --sf-shadow-glow-color: var(--sf-color-primary);
 
     /* ----------------------------------------------------------
-       Opacity — disabled and pending state effects
+       Opacity — disabled state effects
        ---------------------------------------------------------- */
     --sf-opacity-disabled:  0.45;
-    --sf-state-pending-opacity: 0.7;
 
     /* ----------------------------------------------------------
        Focus / form colors
@@ -443,7 +441,7 @@
         oklch(from var(--sf-color-neutral-source-light) clamp(0.35, calc(l - var(--sf-contrast-bias)), 0.62) c h),
         oklch(from var(--sf-color-neutral)       clamp(0.48, calc(l + var(--sf-contrast-bias)), 0.74) c h)
       );
-      --sf-color-text--secondary: light-dark(
+      --sf-color-text--subtle: light-dark(
         oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h),
         oklch(from var(--sf-color-neutral)       clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h)
       );
@@ -1023,10 +1021,6 @@
        spaces) — do not introduce a third meaning of "interactive". */
     --sf-font-weight-strong:      var(--sf-font-weight-bold);      /* <strong> / emphasis  */
 
-    /* State token — consumed by .sf-is-current in states.css.
-       Override to match your nav design (e.g. semibold for thin fonts). */
-    --sf-current-font-weight: var(--sf-font-weight-bold);
-
     /* ----------------------------------------------------------
        Font sizes — fluid
        ---------------------------------------------------------- */
@@ -1490,7 +1484,7 @@
     /* Global text-contrast knob. Nudges derived reading-text colours
        toward the extremes (darker in light mode, lighter in dark mode).
        Positive = more contrast; 0 = no change. Consumed by
-       --sf-color-text, --sf-color-text--secondary, --sf-color-heading. */
+       --sf-color-text, --sf-color-text--subtle, --sf-color-heading. */
     --sf-contrast-bias:     0;
     /* Lightness crossover for text-on-color auto-contrast. Colours with
        L above this value get dark text; below get light text.
diff --git a/demo/index.html b/demo/index.html
index 91ba7a9b..444b6af6 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -62,7 +62,7 @@
       display: block;
       padding: var(--sf-space-2xs) var(--sf-space-s);
       border-radius: var(--sf-radius-s);
-      color: var(--sf-color-text--secondary);
+      color: var(--sf-color-text--subtle);
       text-decoration: none;
       font-size: var(--sf-text-s);
       white-space: nowrap;
@@ -119,7 +119,7 @@
     .demo-section h3 {
       font-size: var(--sf-text-m);
       font-weight: var(--sf-font-weight-heading);
-      color: var(--sf-color-text--secondary);
+      color: var(--sf-color-text--subtle);
       margin-block: var(--sf-space-m) var(--sf-space-s);
     }
 
@@ -161,7 +161,7 @@
     .demo-customizer-grid label {
       font-family: var(--sf-font-mono);
       font-size: var(--sf-text-xs);
-      color: var(--sf-color-text--secondary);
+      color: var(--sf-color-text--subtle);
       white-space: nowrap;
     }
 
@@ -521,7 +521,7 @@
       z-index: calc(var(--sf-z-dropdown) - 1);
     }
 
-    #nav-overlay.sf-is-open {
+    #nav-overlay.is-open {
       display: block;
     }
 
@@ -547,7 +547,7 @@
           visibility 0s var(--sf-duration-normal);
       }
 
-      #demo-nav.sf-is-open {
+      #demo-nav.is-open {
         translate: 0;
         visibility: visible;
         transition:
@@ -855,7 +855,7 @@ <h3>Text Hierarchy</h3>
         <p style="font-size: var(--sf-text-s); color: var(--sf-color-text--muted); margin-block-end: var(--sf-space-m)">Text-color roles from primary body down to disabled — use to signal importance, never to hardcode a grey.</p>
         <div class="sf-stack sf-stack--xs" style="font-size: var(--sf-text-m)">
           <p style="color: var(--sf-color-text)">--sf-color-text (primary)</p>
-          <p style="color: var(--sf-color-text--secondary)">--sf-color-text--secondary</p>
+          <p style="color: var(--sf-color-text--subtle)">--sf-color-text--subtle</p>
           <p style="color: var(--sf-color-text--muted)">--sf-color-text--muted</p>
           <p style="color: var(--sf-color-text--placeholder)">--sf-color-text--placeholder</p>
           <p style="color: var(--sf-color-text--disabled)">--sf-color-text--disabled</p>
@@ -949,7 +949,7 @@ <h3 style="color: var(--sf-color-heading); margin-block-end: var(--sf-space-s)">
 
           <div class="sf-stack sf-stack--xs" style="font-size: var(--sf-text-s); margin-block-end: var(--sf-space-m)">
             <p style="color: var(--sf-color-text)">--sf-color-text (primary)</p>
-            <p style="color: var(--sf-color-text--secondary)">--sf-color-text--secondary</p>
+            <p style="color: var(--sf-color-text--subtle)">--sf-color-text--subtle</p>
             <p style="color: var(--sf-color-text--muted)">--sf-color-text--muted</p>
           </div>
 
@@ -975,7 +975,7 @@ <h3 style="color: var(--sf-color-heading); margin-block-end: var(--sf-space-s)">
 
             <div class="sf-stack sf-stack--xs" style="font-size: var(--sf-text-s); margin-block-end: var(--sf-space-m)">
               <p style="color: var(--sf-color-text)">--sf-color-text (primary)</p>
-              <p style="color: var(--sf-color-text--secondary)">--sf-color-text--secondary</p>
+              <p style="color: var(--sf-color-text--subtle)">--sf-color-text--subtle</p>
               <p style="color: var(--sf-color-text--muted)">--sf-color-text--muted</p>
             </div>
 
@@ -995,7 +995,7 @@ <h3 style="margin-block-start: var(--sf-space-l)">Opt-in theme cross-fade <code
         </p>
         <div class="sf-theme-transition" style="background: var(--sf-color-raised); color: var(--sf-color-text); padding: var(--sf-space-l); border-radius: var(--sf-radius-m); border: 1px solid var(--sf-color-border)">
           <strong style="color: var(--sf-color-heading)">Smooth theme transition</strong>
-          <p style="color: var(--sf-color-text--secondary); font-size: var(--sf-text-s); margin-block-start: var(--sf-space-2xs)">This card fades its background, text and border colours when the mode changes.</p>
+          <p style="color: var(--sf-color-text--subtle); font-size: var(--sf-text-s); margin-block-start: var(--sf-space-2xs)">This card fades its background, text and border colours when the mode changes.</p>
         </div>
 
         <h3 style="margin-block-start: var(--sf-space-l)">Section theme aliases <code style="font-size: var(--sf-text-xs)">.sf-theme-light</code> / <code style="font-size: var(--sf-text-xs)">.sf-theme-dark</code></h3>
@@ -1144,7 +1144,7 @@ <h3>Semantic Elements (base.css)</h3>
   --sf-color-primary-source-light: oklch(0.47 0.27 264);
   --sf-color-neutral-source-light: oklch(0.52 0.025 260);
 }</code></pre>
-        <blockquote style="border-inline-start: 3px solid var(--sf-color-primary); padding-inline-start: var(--sf-space-m); color: var(--sf-color-text--secondary); margin: 0">
+        <blockquote style="border-inline-start: 3px solid var(--sf-color-primary); padding-inline-start: var(--sf-space-m); color: var(--sf-color-text--subtle); margin: 0">
           A blockquote. Try selecting this text to see <code>--sf-color-selection-bg</code>.
         </blockquote>
 
@@ -1375,7 +1375,7 @@ <h3 style="margin-block-start: var(--sf-space-l)"><code>.sf-stagger</code> <smal
         </ul>
 
         <h3>@property Color Interpolation <small style="font-weight: normal; color: var(--sf-color-text--muted)">(motion.css — sf-color-pulse)</small></h3>
-        <p style="font-size: var(--sf-text-s); color: var(--sf-color-text--secondary); margin-block-end: var(--sf-space-s)">
+        <p style="font-size: var(--sf-text-s); color: var(--sf-color-text--subtle); margin-block-end: var(--sf-space-s)">
           Demonstrates smooth <code>oklch</code> color animation via <code>@property</code>-registered tokens.
           The box below pulses its <code>--sf-color-primary-source-light</code> lightness. Only works in browsers supporting <code>@property inherits</code>.
         </p>
@@ -1434,12 +1434,11 @@ <h3>States (states.css)</h3>
             </div>
           </div>
           <div>
-            <p style="font-size: var(--sf-text-xs); color: var(--sf-color-text--muted); margin-block-end: var(--sf-space-2xs)">.sf-is-hidden / .sf-is-invisible</p>
+            <p style="font-size: var(--sf-text-xs); color: var(--sf-color-text--muted); margin-block-end: var(--sf-space-2xs)">.sf-invisible / .sf-visible (optional/utilities.css)</p>
             <div class="sf-cluster sf-cluster--s">
               <span style="padding: var(--sf-space-xs) var(--sf-space-s); background: var(--sf-color-inset); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">visible</span>
-              <span class="sf-is-hidden" style="padding: var(--sf-space-xs) var(--sf-space-s); background: var(--sf-color-inset); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">hidden (display:none)</span>
-              <span class="sf-is-invisible" style="padding: var(--sf-space-xs) var(--sf-space-s); background: var(--sf-color-inset); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">invisible (visibility:hidden)</span>
-              <span class="sf-is-visible" style="padding: var(--sf-space-xs) var(--sf-space-s); background: var(--sf-color-inset); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">.sf-is-visible (force visibility:visible)</span>
+              <span class="sf-invisible" style="padding: var(--sf-space-xs) var(--sf-space-s); background: var(--sf-color-inset); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">invisible (visibility:hidden)</span>
+              <span class="sf-visible" style="padding: var(--sf-space-xs) var(--sf-space-s); background: var(--sf-color-inset); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">.sf-visible (force visibility:visible)</span>
             </div>
           </div>
         </div>
@@ -1453,22 +1452,12 @@ <h2>States — Full Coverage</h2>
         <p style="font-size: var(--sf-text-s); color: var(--sf-color-text--muted); margin-block-end: var(--sf-space-m)">Every <code>.sf-is-*</code> class from <code>states.css</code>. Grouped by category.</p>
 
         <h3>Navigation &amp; Toggling</h3>
-        <p style="font-size: var(--sf-text-s); color: var(--sf-color-text--muted); margin-block-end: var(--sf-space-m)">States for nav and toggles — .sf-is-active / -current / -selected mark where the user is and what they picked.</p>
+        <p style="font-size: var(--sf-text-s); color: var(--sf-color-text--muted); margin-block-end: var(--sf-space-m)">States for nav and toggles — .sf-is-selected / -highlighted mark what the user picked.</p>
         <div class="sf-cluster sf-cluster--m" style="align-items: center">
-          <span class="sf-is-active" style="padding: var(--sf-space-xs) var(--sf-space-s); background: var(--sf-color-inset); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">.sf-is-active (--sf-is-active: 1)</span>
-          <span class="sf-is-current" style="padding: var(--sf-space-xs) var(--sf-space-s); background: var(--sf-color-inset); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">.sf-is-current (bold)</span>
           <span class="sf-is-selected" style="padding: var(--sf-space-xs) var(--sf-space-s); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">.sf-is-selected</span>
           <span class="sf-is-highlighted" style="padding: var(--sf-space-xs) var(--sf-space-s); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">.sf-is-highlighted</span>
         </div>
 
-        <h3>Disclosure</h3>
-        <p style="font-size: var(--sf-text-s); color: var(--sf-color-text--muted); margin-block-end: var(--sf-space-m)">Open/closed states for accordions, menus and expandable panels — pair .sf-is-open with your reveal logic.</p>
-        <div class="sf-cluster sf-cluster--m" style="align-items: center">
-          <span class="sf-is-open" style="padding: var(--sf-space-xs) var(--sf-space-s); background: var(--sf-color-inset); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">.sf-is-open</span>
-          <span class="sf-is-expanded" style="padding: var(--sf-space-xs) var(--sf-space-s); background: var(--sf-color-inset); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">.sf-is-expanded</span>
-          <span class="sf-is-collapsed" style="padding: var(--sf-space-xs) var(--sf-space-s); background: var(--sf-color-inset); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">.sf-is-collapsed</span>
-        </div>
-
         <h3>Validation / Feedback</h3>
         <p style="font-size: var(--sf-text-s); color: var(--sf-color-text--muted); margin-block-end: var(--sf-space-m)">Form-field states — .sf-is-valid / -invalid / -required drive inline validation styling.</p>
         <div class="sf-cluster sf-cluster--m" style="align-items: center">
@@ -1478,7 +1467,6 @@ <h3>Validation / Feedback</h3>
           <span class="sf-is-success" style="padding: var(--sf-space-xs) var(--sf-space-s); border: 2px solid var(--sf-field-border-color, var(--sf-color-border)); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">.sf-is-success</span>
           <span class="sf-is-error" style="padding: var(--sf-space-xs) var(--sf-space-s); border: 2px solid var(--sf-field-border-color, var(--sf-color-border)); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">.sf-is-error</span>
           <span class="sf-is-info" style="padding: var(--sf-space-xs) var(--sf-space-s); border: 2px solid var(--sf-field-border-color, var(--sf-color-border)); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">.sf-is-info</span>
-          <span class="sf-is-danger" style="padding: var(--sf-space-xs) var(--sf-space-s); border: 2px solid var(--sf-field-border-color, var(--sf-color-border)); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">.sf-is-danger</span>
         </div>
 
         <h3>Drag &amp; Drop</h3>
@@ -1490,19 +1478,15 @@ <h3>Drag &amp; Drop</h3>
         </div>
 
         <h3>Overlay</h3>
-        <p style="font-size: var(--sf-text-s); color: var(--sf-color-text--muted); margin-block-end: var(--sf-space-m)">States for overlay UI — .sf-is-open / -dismissed for modals, drawers and popovers.</p>
+        <p style="font-size: var(--sf-text-s); color: var(--sf-color-text--muted); margin-block-end: var(--sf-space-m)">Overlay positioning for modals, drawers and popovers — pair with your own open/closed class or <code>[open]</code>/<code>aria-expanded</code> (see the mobile nav drawer in this page's header for a worked example).</p>
         <div class="sf-cluster sf-cluster--m" style="align-items: center">
           <div style="position: relative; width: 8rem; height: 4rem; background: var(--sf-color-inset); border-radius: var(--sf-radius-s)"><div class="sf-overlay" style="background: var(--sf-color-primary); opacity: 0.2; border-radius: var(--sf-radius-s)"></div><span style="position: relative; font-size: var(--sf-text-xs); padding: var(--sf-space-xs)">.sf-overlay</span></div>
         </div>
 
         <h3>Interactivity</h3>
-        <p style="font-size: var(--sf-text-s); color: var(--sf-color-text--muted); margin-block-end: var(--sf-space-m)">Busy and loading states — signal that an element is working or temporarily inert.</p>
+        <p style="font-size: var(--sf-text-s); color: var(--sf-color-text--muted); margin-block-end: var(--sf-space-m)">Signal that an element is temporarily inert.</p>
         <div class="sf-cluster sf-cluster--m" style="align-items: center">
-          <span class="sf-is-busy" style="padding: var(--sf-space-xs) var(--sf-space-s); background: var(--sf-color-inset); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">.sf-is-busy</span>
-          <span class="sf-is-readonly" style="padding: var(--sf-space-xs) var(--sf-space-s); background: var(--sf-color-inset); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">.sf-is-readonly</span>
           <span class="sf-is-disabled" style="padding: var(--sf-space-xs) var(--sf-space-s); background: var(--sf-color-primary); color: var(--sf-color-text--on-primary); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">.sf-is-disabled</span>
-          <span class="sf-is-pending" style="padding: var(--sf-space-xs) var(--sf-space-s); background: var(--sf-color-inset); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">.sf-is-pending</span>
-          <span class="sf-is-pressed" style="padding: var(--sf-space-xs) var(--sf-space-s); border-radius: var(--sf-radius-s); font-size: var(--sf-text-s)">.sf-is-pressed</span>
         </div>
         <div class="sf-focus-parent sf-cluster sf-cluster--m" style="align-items: center; margin-top: var(--sf-space-s); padding: var(--sf-space-s); border-radius: var(--sf-radius-s)">
           <code style="font-size: var(--sf-text-xs); color: var(--sf-color-text--muted)">.sf-focus-parent (focus the input → parent rings)</code>
@@ -1915,7 +1899,7 @@ <h3>.sf-section--xs / .sf-section--l / .sf-section--xl / .sf-section--2xl</h3>
         </div>
 
         <h3>.sf-header--xs / .sf-header--s / .sf-header--m / .sf-header--l / .sf-header--xl</h3>
-        <p style="font-size: var(--sf-text-s); color: var(--sf-color-text--secondary)">Block padding on the standard spacing scale — lighter than <code>.sf-section</code>. Inline gutter is left untouched.</p>
+        <p style="font-size: var(--sf-text-s); color: var(--sf-color-text--subtle)">Block padding on the standard spacing scale — lighter than <code>.sf-section</code>. Inline gutter is left untouched.</p>
         <div class="sf-stack sf-stack--s">
           <div class="sf-header--xs" style="background: var(--sf-color-action-100, color-mix(in oklch, var(--sf-color-action) 8%, var(--sf-color-bg))); border-radius: var(--sf-radius-m); text-align: center; font-size: var(--sf-text-s); outline: 1px dashed var(--sf-color-action)">.sf-header--xs</div>
           <div class="sf-header--s" style="background: var(--sf-color-primary-100, color-mix(in oklch, var(--sf-color-primary) 8%, var(--sf-color-bg))); border-radius: var(--sf-radius-m); text-align: center; font-size: var(--sf-text-s); outline: 1px dashed var(--sf-color-primary)">.sf-header--s</div>
@@ -2406,7 +2390,7 @@ <h2>Layout — Bento</h2>
           <div class="demo-box demo-box--secondary sf-bento-tall">tall<br><small>.sf-bento-tall</small></div>
           <div class="demo-box demo-box--action sf-bento-full">full width — .sf-bento-full</div>
         </div>
-        <p style="margin-top: var(--sf-space-xs); font-size: var(--sf-text-xs); color: var(--sf-color-text--secondary)">Column modifiers below use <code>.sf-bento--2</code>, <code>.sf-bento--3</code>, <code>.sf-bento--6</code></p>
+        <p style="margin-top: var(--sf-space-xs); font-size: var(--sf-text-xs); color: var(--sf-color-text--subtle)">Column modifiers below use <code>.sf-bento--2</code>, <code>.sf-bento--3</code>, <code>.sf-bento--6</code></p>
       </section>
 
       <!-- ══════════════════════════════════════════════════════
@@ -2945,7 +2929,7 @@ <h3 style="margin-block-start: var(--sf-space-l)"><code>.sf-section--collapse</c
         </div>
 
         <h3 style="margin-block-start: var(--sf-space-l)"><code>.sf-section--guttered</code> — section carries the gutter</h3>
-        <p style="color: var(--sf-color-text--secondary); font-size: var(--sf-text-s)">Adds <code>padding-inline: var(--sf-gutter)</code> to the section itself while zeroing it on any nested <code>.sf-container</code>, preventing double-guttering.</p>
+        <p style="color: var(--sf-color-text--subtle); font-size: var(--sf-text-s)">Adds <code>padding-inline: var(--sf-gutter)</code> to the section itself while zeroing it on any nested <code>.sf-container</code>, preventing double-guttering.</p>
         <div style="border: 1px dashed var(--sf-color-border); border-radius: var(--sf-radius-m); overflow: hidden">
           <div class="sf-section--guttered sf-surface--primary" style="padding-block: var(--sf-space-s)">
             <p style="margin: 0; font-size: var(--sf-text-s)"><code>.sf-section--guttered</code> — horizontal padding lives on the section, not the container</p>
@@ -2953,7 +2937,7 @@ <h3 style="margin-block-start: var(--sf-space-l)"><code>.sf-section--guttered</c
         </div>
 
         <h3 style="margin-block-start: var(--sf-space-l)"><code>.sf-entrance--*</code> — scroll-driven entrance</h3>
-        <p style="color: var(--sf-color-text--secondary); font-size: var(--sf-text-s)">Animations require <code>animation-timeline: view()</code> support (Chrome 115+, Firefox flag-gated). Refresh and scroll to see effects in supported engines.</p>
+        <p style="color: var(--sf-color-text--subtle); font-size: var(--sf-text-s)">Animations require <code>animation-timeline: view()</code> support (Chrome 115+, Firefox flag-gated). Refresh and scroll to see effects in supported engines.</p>
         <div class="sf-stack sf-stack--s">
           <div class="sf-entrance--fade"        style="padding: var(--sf-space-m); background: var(--sf-color-inset); border-radius: var(--sf-radius-m)">.sf-entrance--fade</div>
           <div class="sf-entrance--fade-up"     style="padding: var(--sf-space-m); background: var(--sf-color-inset); border-radius: var(--sf-radius-m)">.sf-entrance--fade-up</div>
@@ -2964,7 +2948,7 @@ <h3 style="margin-block-start: var(--sf-space-l)"><code>.sf-entrance--*</code> 
         </div>
 
         <h3 style="margin-block-start: var(--sf-space-l)"><code>.sf-exit--*</code> — scroll-driven exit</h3>
-        <p style="color: var(--sf-color-text--secondary); font-size: var(--sf-text-s)">Symmetric counterpart of <code>.sf-entrance--*</code>: fires as the element scrolls out of view. Requires <code>animation-timeline: view()</code> support — engines without it render these statically (no unconditional fade-to-hidden fallback).</p>
+        <p style="color: var(--sf-color-text--subtle); font-size: var(--sf-text-s)">Symmetric counterpart of <code>.sf-entrance--*</code>: fires as the element scrolls out of view. Requires <code>animation-timeline: view()</code> support — engines without it render these statically (no unconditional fade-to-hidden fallback).</p>
         <div class="sf-stack sf-stack--s">
           <div class="sf-exit--fade"        style="padding: var(--sf-space-m); background: var(--sf-color-inset); border-radius: var(--sf-radius-m)">.sf-exit--fade</div>
           <div class="sf-exit--fade-up"     style="padding: var(--sf-space-m); background: var(--sf-color-inset); border-radius: var(--sf-radius-m)">.sf-exit--fade-up</div>
@@ -4000,28 +3984,8 @@ <h3 id="cov-motion" class="cov-area-h">Motion & animation <span class="cov-count
           </figure>
         </div>
 
-        <h3 id="cov-states" class="cov-area-h">State classes (.sf-is-*) <span class="cov-count">28</span></h3>
+        <h3 id="cov-states" class="cov-area-h">State classes (.sf-is-*) <span class="cov-count">15</span></h3>
         <div class="cov-gallery">
-          <figure class="cov-card">
-            <figcaption class="cov-card__head"><code>.sf-is-active</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Active state — applied to the currently interacted-with element (e.g. pressed button, active menu item). Sets --sf-is-active to 1 for calc() branching.</p></figcaption>
-            <div class="cov-stage"><button type="button" class="sf-btn sf-btn--outline sf-is-active" aria-pressed="true">sf-is-active</button></div>
-          </figure>
-          <figure class="cov-card">
-            <figcaption class="cov-card__head"><code>.sf-is-busy</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Busy state — shows a progress cursor to indicate background processing. Does not mask content; use sf-is-loading when content should be hidden during loading.</p></figcaption>
-            <div class="cov-stage"><button type="button" class="sf-btn sf-btn--primary sf-is-busy">sf-is-busy</button></div>
-          </figure>
-          <figure class="cov-card">
-            <figcaption class="cov-card__head"><code>.sf-is-collapsed</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Collapsed state for disclosure widgets — hides the expandable region. Pair with sf-is-expanded or sf-is-open. Components add transitions.</p></figcaption>
-            <div class="cov-stage"><div class="sf-is-collapsed" style="border:1px solid var(--sf-color-border); border-radius: var(--sf-radius-s); padding: var(--sf-space-2xs)"><strong>Disclosure</strong><div style="margin-block-start: var(--sf-space-2xs)">panel body</div></div></div>
-          </figure>
-          <figure class="cov-card">
-            <figcaption class="cov-card__head"><code>.sf-is-current</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Current/selected state — marks the active page in navigation or the selected item in a list. Sets --sf-is-current to 1 for calc() branching.</p></figcaption>
-            <div class="cov-stage"><button type="button" class="sf-btn sf-btn--outline sf-is-current" aria-pressed="true">sf-is-current</button></div>
-          </figure>
-          <figure class="cov-card">
-            <figcaption class="cov-card__head"><code>.sf-is-danger</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Danger status state — applies danger color tokens for destructive actions (e.g. a delete confirmation dialog) and form validation errors.</p></figcaption>
-            <div class="cov-stage"><label style="display:grid; gap: var(--sf-space-3xs); max-inline-size: 16rem">danger field<input class="sf-is-danger" value="sample value"></label></div>
-          </figure>
           <figure class="cov-card">
             <figcaption class="cov-card__head"><code>.sf-is-disabled</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Disabled state — dims the element (--sf-opacity-disabled), removes pointer events, and sets cursor: not-allowed. Inherited by child elements that re-enable pointer events.</p></figcaption>
             <div class="cov-stage"><button type="button" class="sf-btn sf-btn--primary sf-is-disabled">sf-is-disabled</button></div>
@@ -4043,17 +4007,9 @@ <h3 id="cov-states" class="cov-area-h">State classes (.sf-is-*) <span class="cov
             <div class="cov-stage"><div style="display:flex; gap: var(--sf-space-s); align-items:center"><span class="cov-ph">reference</span><span class="sf-is-empty"></span><span class="cov-note">← empty element carries <code>.sf-is-empty</code> (hidden by :empty)</span></div></div>
           </figure>
           <figure class="cov-card">
-            <figcaption class="cov-card__head"><code>.sf-is-error</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Error state — alias for sf-is-danger. Applies danger color tokens to indicate a validation failure or system error. Visual styling is identical to sf-is-invalid.</p></figcaption>
+            <figcaption class="cov-card__head"><code>.sf-is-error</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Error state — general (not form-field-specific) negative feedback. Applies danger color tokens to indicate a validation failure or system error. Visual styling is identical to sf-is-invalid.</p></figcaption>
             <div class="cov-stage"><label style="display:grid; gap: var(--sf-space-3xs); max-inline-size: 16rem">error field<input class="sf-is-error" value="sample value"></label></div>
           </figure>
-          <figure class="cov-card">
-            <figcaption class="cov-card__head"><code>.sf-is-expanded</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Expanded state for disclosure widgets — shows the expandable region. Inverse of sf-is-collapsed. Components add transitions.</p></figcaption>
-            <div class="cov-stage"><div class="sf-is-expanded" style="border:1px solid var(--sf-color-border); border-radius: var(--sf-radius-s); padding: var(--sf-space-2xs)"><strong>Disclosure</strong><div style="margin-block-start: var(--sf-space-2xs)">panel body</div></div></div>
-          </figure>
-          <figure class="cov-card">
-            <figcaption class="cov-card__head"><code>.sf-is-hidden</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Hidden state — removes the element from layout and accessibility tree (display: none !important).</p></figcaption>
-            <div class="cov-stage"><div style="display:flex; gap: var(--sf-space-s); align-items:center"><span class="cov-ph">reference</span><span class="cov-ph sf-is-hidden">sf-is-hidden</span><span class="cov-note">← element carries <code>.sf-is-hidden</code></span></div></div>
-          </figure>
           <figure class="cov-card">
             <figcaption class="cov-card__head"><code>.sf-is-highlighted</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Highlighted state — applies a highlight background. Useful for search result highlighting and keyboard-navigated lists.</p></figcaption>
             <div class="cov-stage"><div class="cov-ph cov-ph--big sf-is-highlighted">sf-is-highlighted</div></div>
@@ -4066,30 +4022,10 @@ <h3 id="cov-states" class="cov-area-h">State classes (.sf-is-*) <span class="cov
             <figcaption class="cov-card__head"><code>.sf-is-invalid</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Invalid state — applies danger color tokens to form fields with validation failures. Identical visual output to sf-is-error; the name signals form-field context.</p></figcaption>
             <div class="cov-stage"><label style="display:grid; gap: var(--sf-space-3xs); max-inline-size: 16rem">invalid field<input class="sf-is-invalid" value="sample value"></label></div>
           </figure>
-          <figure class="cov-card">
-            <figcaption class="cov-card__head"><code>.sf-is-invisible</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Invisible state — hides the element visually but keeps it in the layout and accessibility tree (visibility: hidden).</p></figcaption>
-            <div class="cov-stage"><div style="display:flex; gap: var(--sf-space-s); align-items:center"><span class="cov-ph">reference</span><span class="cov-ph sf-is-invisible">sf-is-invisible</span><span class="cov-note">← element carries <code>.sf-is-invisible</code></span></div></div>
-          </figure>
           <figure class="cov-card">
             <figcaption class="cov-card__head"><code>.sf-is-loading</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Loading state — hides the element&#39;s text (color: transparent), removes pointer events, and renders a spinner via ::after. Use for buttons and containers awaiting async results.</p></figcaption>
             <div class="cov-stage"><button type="button" class="sf-btn sf-btn--primary sf-is-loading">sf-is-loading</button></div>
           </figure>
-          <figure class="cov-card">
-            <figcaption class="cov-card__head"><code>.sf-is-open</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Open/shown state for modals, dropdowns, and drawers — counterpart to sf-is-collapsed/sf-is-hidden. Sets --sf-is-open to 1 for calc() branching.</p></figcaption>
-            <div class="cov-stage"><div class="sf-is-open" style="border:1px solid var(--sf-color-border); border-radius: var(--sf-radius-s); padding: var(--sf-space-2xs)"><strong>Disclosure</strong><div style="margin-block-start: var(--sf-space-2xs)">panel body</div></div></div>
-          </figure>
-          <figure class="cov-card">
-            <figcaption class="cov-card__head"><code>.sf-is-pending</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Pending state for optimistic UI — content remains visible but dimmed while an async request is in flight. Differs from sf-is-loading (which hides content entirely).</p></figcaption>
-            <div class="cov-stage"><button type="button" class="sf-btn sf-btn--primary sf-is-pending">sf-is-pending</button></div>
-          </figure>
-          <figure class="cov-card">
-            <figcaption class="cov-card__head"><code>.sf-is-pressed</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Pressed/toggled-on state for toggle buttons. Sets --sf-is-pressed to 1 for calc() branching and signals the selected state to components.</p></figcaption>
-            <div class="cov-stage"><button type="button" class="sf-btn sf-btn--outline sf-is-pressed" aria-pressed="true">sf-is-pressed</button></div>
-          </figure>
-          <figure class="cov-card">
-            <figcaption class="cov-card__head"><code>.sf-is-readonly</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Readonly state — removes pointer events and text selection. Use for fields that display data but cannot be edited.</p></figcaption>
-            <div class="cov-stage"><button type="button" class="sf-btn sf-btn--primary sf-is-readonly">sf-is-readonly</button></div>
-          </figure>
           <figure class="cov-card">
             <figcaption class="cov-card__head"><code>.sf-is-selected</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Selected state — marks an item as selected in a list, table row, or grid cell. Visual specifics (background, border) are applied by component styles.</p></figcaption>
             <div class="cov-stage"><button type="button" class="sf-btn sf-btn--outline sf-is-selected" aria-pressed="true">sf-is-selected</button></div>
@@ -4106,18 +4042,22 @@ <h3 id="cov-states" class="cov-area-h">State classes (.sf-is-*) <span class="cov
             <figcaption class="cov-card__head"><code>.sf-is-valid</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Valid state — applies success color tokens to form fields that have passed validation. Visual styling is identical to sf-is-success; the name signals form-field context.</p></figcaption>
             <div class="cov-stage"><label style="display:grid; gap: var(--sf-space-3xs); max-inline-size: 16rem">valid field<input class="sf-is-valid" value="sample value"></label></div>
           </figure>
-          <figure class="cov-card">
-            <figcaption class="cov-card__head"><code>.sf-is-visible</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Visible state — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent.</p></figcaption>
-            <div class="cov-stage"><div style="display:flex; gap: var(--sf-space-s); align-items:center"><span class="cov-ph">reference</span><span class="cov-ph sf-is-visible">sf-is-visible</span><span class="cov-note">← element carries <code>.sf-is-visible</code></span></div></div>
-          </figure>
           <figure class="cov-card">
             <figcaption class="cov-card__head"><code>.sf-is-warning</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Warning status state — applies warning color tokens. Use for cautionary messages and non-critical alerts.</p></figcaption>
             <div class="cov-stage"><label style="display:grid; gap: var(--sf-space-3xs); max-inline-size: 16rem">warning field<input class="sf-is-warning" value="sample value"></label></div>
           </figure>
         </div>
 
-        <h3 id="cov-utilities" class="cov-area-h">Utilities <span class="cov-count">31</span></h3>
+        <h3 id="cov-utilities" class="cov-area-h">Utilities <span class="cov-count">33</span></h3>
         <div class="cov-gallery">
+          <figure class="cov-card">
+            <figcaption class="cov-card__head"><code>.sf-invisible</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Visibility helper — hides the element visually but keeps it in the layout and accessibility tree (visibility: hidden).</p></figcaption>
+            <div class="cov-stage"><div style="display:flex; gap: var(--sf-space-s); align-items:center"><span class="cov-ph">reference</span><span class="cov-ph sf-invisible">sf-invisible</span><span class="cov-note">← element carries <code>.sf-invisible</code></span></div></div>
+          </figure>
+          <figure class="cov-card">
+            <figcaption class="cov-card__head"><code>.sf-visible</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Visibility helper — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent.</p></figcaption>
+            <div class="cov-stage"><div style="display:flex; gap: var(--sf-space-s); align-items:center"><span class="cov-ph">reference</span><span class="cov-ph sf-visible">sf-visible</span><span class="cov-note">← element carries <code>.sf-visible</code></span></div></div>
+          </figure>
           <figure class="cov-card">
             <figcaption class="cov-card__head"><code>.sf-h1</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Applies h1-level typography (size, line-height, weight, tracking, max-width) to any element without changing its semantic level.</p></figcaption>
             <div class="cov-stage"><p class="sf-h1" style="margin:0">Heading helper SF-H1</p></div>
@@ -4324,7 +4264,7 @@ <h3 id="cov-forms" class="cov-area-h">Forms <span class="cov-count">1</span></h3
           </figure>
         </div>
 
-        <h3 id="cov-tokens-h" class="cov-area-h">Design tokens <span class="cov-count">746</span></h3>
+        <h3 id="cov-tokens-h" class="cov-area-h">Design tokens <span class="cov-count">741</span></h3>
         <p class="cov-note">Values resolve from the loaded bundle. Component-scoped tokens
         (<code>--sf-btn-*</code>, <code>--sf-card-*</code>, <code>--sf-field-*</code>) resolve against a
         hidden probe of that component; a <code>—</code> means the token has no value outside its
@@ -4684,7 +4624,7 @@ <h3 id="cov-tokens-h" class="cov-area-h">Design tokens <span class="cov-count">7
         <div class="cov-token" data-cov-token="--sf-color-text--on-tertiary" data-cov-default="oklch(from var(--sf-color-tertiary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)"><span class="cov-swatch" style="--cov-v: var(--sf-color-text--on-tertiary)"></span><code>--sf-color-text--on-tertiary</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-color-text--on-warning" data-cov-default="oklch(from var(--sf-color-warning) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)"><span class="cov-swatch" style="--cov-v: var(--sf-color-text--on-warning)"></span><code>--sf-color-text--on-warning</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-color-text--placeholder" data-cov-default="light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.45, calc(l + 0.15), 0.75) c h), oklch(from var(--sf-color-neutral) clamp(0.35, calc(l - 0.1), 0.65) c h) )"><span class="cov-swatch" style="--cov-v: var(--sf-color-text--placeholder)"></span><code>--sf-color-text--placeholder</code><span class="cov-val"></span></div>
-        <div class="cov-token" data-cov-token="--sf-color-text--secondary" data-cov-default="light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )"><span class="cov-swatch" style="--cov-v: var(--sf-color-text--secondary)"></span><code>--sf-color-text--secondary</code><span class="cov-val"></span></div>
+        <div class="cov-token" data-cov-token="--sf-color-text--subtle" data-cov-default="light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )"><span class="cov-swatch" style="--cov-v: var(--sf-color-text--subtle)"></span><code>--sf-color-text--subtle</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-color-warning" data-cov-default="light-dark(var(--sf-color-warning-source-light), var(--sf-color-warning-source-dark, oklch(from var(--sf-color-warning-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))"><span class="cov-swatch" style="--cov-v: var(--sf-color-warning)"></span><code>--sf-color-warning</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-color-warning-muted" data-cov-default="oklch(from var(--sf-color-warning) l c h / 0.3)"><span class="cov-swatch" style="--cov-v: var(--sf-color-warning-muted)"></span><code>--sf-color-warning-muted</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-color-warning-source-dark" data-cov-default="oklch(0.65 0.153 80)"><span class="cov-swatch" style="--cov-v: var(--sf-color-warning-source-dark)"></span><code>--sf-color-warning-source-dark</code><span class="cov-val"></span></div>
@@ -4706,7 +4646,6 @@ <h3 id="cov-tokens-h" class="cov-area-h">Design tokens <span class="cov-count">7
         <div class="cov-token" data-cov-token="--sf-contrast-threshold" data-cov-default="0.6"><span class="cov-swatch" style="--cov-v: var(--sf-contrast-threshold)"></span><code>--sf-contrast-threshold</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-cover-min-height" data-cov-default="100dvh"><span class="cov-swatch" style="--cov-v: var(--sf-cover-min-height)"></span><code>--sf-cover-min-height</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-cover-padding" data-cov-default="var(--sf-section-pad)"><span class="cov-swatch" style="--cov-v: var(--sf-cover-padding)"></span><code>--sf-cover-padding</code><span class="cov-val"></span></div>
-        <div class="cov-token" data-cov-token="--sf-current-font-weight" data-cov-default="var(--sf-font-weight-bold)"><span class="cov-swatch" style="--cov-v: var(--sf-current-font-weight)"></span><code>--sf-current-font-weight</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-density" data-cov-default="1"><span class="cov-swatch" style="--cov-v: var(--sf-density)"></span><code>--sf-density</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-display-l-line-height" data-cov-default="1"><span class="cov-swatch" style="--cov-v: var(--sf-display-l-line-height)"></span><code>--sf-display-l-line-height</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-display-m-line-height" data-cov-default="1.05"><span class="cov-swatch" style="--cov-v: var(--sf-display-m-line-height)"></span><code>--sf-display-m-line-height</code><span class="cov-val"></span></div>
@@ -4845,11 +4784,7 @@ <h3 id="cov-tokens-h" class="cov-area-h">Design tokens <span class="cov-count">7
         <div class="cov-token" data-cov-token="--sf-icon-xl" data-cov-default="3em"><span class="cov-swatch" style="--cov-v: var(--sf-icon-xl)"></span><code>--sf-icon-xl</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-icon-xs" data-cov-default="0.875em"><span class="cov-swatch" style="--cov-v: var(--sf-icon-xs)"></span><code>--sf-icon-xs</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-imposter-margin" data-cov-default="var(--sf-space-m)"><span class="cov-swatch" style="--cov-v: var(--sf-imposter-margin)"></span><code>--sf-imposter-margin</code><span class="cov-val"></span></div>
-        <div class="cov-token" data-cov-token="--sf-is-active" data-cov-default="0"><span class="cov-swatch" style="--cov-v: var(--sf-is-active)"></span><code>--sf-is-active</code><span class="cov-val"></span></div>
-        <div class="cov-token" data-cov-token="--sf-is-current" data-cov-default="0"><span class="cov-swatch" style="--cov-v: var(--sf-is-current)"></span><code>--sf-is-current</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-is-dark" data-cov-default="0"><span class="cov-swatch" style="--cov-v: var(--sf-is-dark)"></span><code>--sf-is-dark</code><span class="cov-val"></span></div>
-        <div class="cov-token" data-cov-token="--sf-is-open" data-cov-default="0"><span class="cov-swatch" style="--cov-v: var(--sf-is-open)"></span><code>--sf-is-open</code><span class="cov-val"></span></div>
-        <div class="cov-token" data-cov-token="--sf-is-pressed" data-cov-default="0"><span class="cov-swatch" style="--cov-v: var(--sf-is-pressed)"></span><code>--sf-is-pressed</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-leading-normal" data-cov-default="1.5"><span class="cov-swatch" style="--cov-v: var(--sf-leading-normal)"></span><code>--sf-leading-normal</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-leading-relaxed" data-cov-default="1.625"><span class="cov-swatch" style="--cov-v: var(--sf-leading-relaxed)"></span><code>--sf-leading-relaxed</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-leading-snug" data-cov-default="1.3"><span class="cov-swatch" style="--cov-v: var(--sf-leading-snug)"></span><code>--sf-leading-snug</code><span class="cov-val"></span></div>
@@ -4977,7 +4912,6 @@ <h3 id="cov-tokens-h" class="cov-area-h">Design tokens <span class="cov-count">7
         <div class="cov-token" data-cov-token="--sf-space-xs" data-cov-default="calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) * 1rem)) * var(--sf-space-scale))"><span class="cov-swatch" style="--cov-v: var(--sf-space-xs)"></span><code>--sf-space-xs</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-stack-gap" data-cov-default="var(--sf-content-gap)"><span class="cov-swatch" style="--cov-v: var(--sf-stack-gap)"></span><code>--sf-stack-gap</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-stagger-step" data-cov-default="75ms"><span class="cov-swatch" style="--cov-v: var(--sf-stagger-step)"></span><code>--sf-stagger-step</code><span class="cov-val"></span></div>
-        <div class="cov-token" data-cov-token="--sf-state-pending-opacity" data-cov-default="0.7"><span class="cov-swatch" style="--cov-v: var(--sf-state-pending-opacity)"></span><code>--sf-state-pending-opacity</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-sticky-offset" data-cov-default="clamp( var(--sf-sticky-offset-mobile), calc((var(--sf-sticky-offset-desktop) - var(--sf-sticky-offset-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-sticky-offset-mobile)), var(--sf-sticky-offset-desktop))"><span class="cov-swatch" style="--cov-v: var(--sf-sticky-offset)"></span><code>--sf-sticky-offset</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-sticky-offset-desktop" data-cov-default="var(--sf-header-height-desktop)"><span class="cov-swatch" style="--cov-v: var(--sf-sticky-offset-desktop)"></span><code>--sf-sticky-offset-desktop</code><span class="cov-val"></span></div>
         <div class="cov-token" data-cov-token="--sf-sticky-offset-mobile" data-cov-default="var(--sf-header-height-mobile)"><span class="cov-swatch" style="--cov-v: var(--sf-sticky-offset-mobile)"></span><code>--sf-sticky-offset-mobile</code><span class="cov-val"></span></div>
@@ -5083,7 +5017,7 @@ <h3 id="cov-tokens-h" class="cov-area-h">Design tokens <span class="cov-count">7
         <div class="cov-token" data-cov-token="--sf-z-tooltip" data-cov-default="1060"><span class="cov-swatch" style="--cov-v: var(--sf-z-tooltip)"></span><code>--sf-z-tooltip</code><span class="cov-val"></span></div>
         </div>
 
-        <script type="application/json" id="cov-data">{"tokens":["--sf-alternate-gap","--sf-alternate-inner-gap","--sf-animation-blink","--sf-animation-color-pulse","--sf-animation-fade-in","--sf-animation-fade-out","--sf-animation-float","--sf-animation-ping","--sf-animation-scale-down","--sf-animation-scale-up","--sf-animation-shimmer","--sf-animation-slide-in-down","--sf-animation-slide-in-left","--sf-animation-slide-in-right","--sf-animation-slide-in-up","--sf-animation-slide-out-down","--sf-animation-slide-out-left","--sf-animation-slide-out-right","--sf-animation-slide-out-up","--sf-animation-spin","--sf-aspect","--sf-bento-cols-default","--sf-bento-gap","--sf-bento-row-compact","--sf-bento-row-default","--sf-bento-row-tall","--sf-bg-layer-fit","--sf-bg-layer-inset","--sf-bg-layer-position","--sf-bg-layer-radius","--sf-bg-layer-z","--sf-blur","--sf-body-color","--sf-body-em-style","--sf-body-font-family","--sf-body-font-size","--sf-body-font-weight","--sf-body-line-height","--sf-body-strong-weight","--sf-body-text-wrap","--sf-border","--sf-border-scale","--sf-border-strong","--sf-border-style","--sf-border-subtle","--sf-border-width-1","--sf-border-width-2","--sf-border-width-3","--sf-border-width-4","--sf-border-width-hairline","--sf-box-border-color","--sf-box-border-width","--sf-box-padding","--sf-breakout-width","--sf-btn-border-width","--sf-btn-font-scale","--sf-btn-font-size","--sf-btn-font-weight","--sf-btn-gap","--sf-btn-l-font-size","--sf-btn-l-min-height","--sf-btn-l-padding-block","--sf-btn-l-padding-inline","--sf-btn-m-font-size","--sf-btn-m-min-height","--sf-btn-m-padding-block","--sf-btn-m-padding-inline","--sf-btn-min-height","--sf-btn-padding-block","--sf-btn-padding-inline","--sf-btn-radius","--sf-btn-s-font-size","--sf-btn-s-min-height","--sf-btn-s-padding-block","--sf-btn-s-padding-inline","--sf-btn-xl-font-size","--sf-btn-xl-min-height","--sf-btn-xl-padding-block","--sf-btn-xl-padding-inline","--sf-btn-xs-font-size","--sf-btn-xs-min-height","--sf-btn-xs-padding-block","--sf-btn-xs-padding-inline","--sf-card-avatar-size","--sf-card-bg","--sf-card-border-color","--sf-card-border-width","--sf-card-gap","--sf-card-heading-size","--sf-card-media-radius","--sf-card-media-ratio","--sf-card-padding","--sf-card-radius","--sf-card-radius-outer","--sf-card-shadow","--sf-card-shadow--elevated","--sf-card-shadow--hover","--sf-caret-color","--sf-center-gutter","--sf-center-max","--sf-cluster-align","--sf-cluster-gap","--sf-cluster-justify","--sf-code-font-size","--sf-color-action","--sf-color-action--active","--sf-color-action--hover","--sf-color-action-100","--sf-color-action-200","--sf-color-action-300","--sf-color-action-400","--sf-color-action-50","--sf-color-action-500","--sf-color-action-600","--sf-color-action-700","--sf-color-action-800","--sf-color-action-900","--sf-color-action-950","--sf-color-action-a10","--sf-color-action-a30","--sf-color-action-a5","--sf-color-action-a50","--sf-color-action-a80","--sf-color-action-darker","--sf-color-action-lighter","--sf-color-action-muted","--sf-color-action-source-dark","--sf-color-action-source-light","--sf-color-action-subtle","--sf-color-action-superdark","--sf-color-action-superlight","--sf-color-action-tint","--sf-color-action-xdark","--sf-color-action-xlight","--sf-color-base","--sf-color-base--active","--sf-color-base--hover","--sf-color-base-100","--sf-color-base-200","--sf-color-base-300","--sf-color-base-400","--sf-color-base-50","--sf-color-base-500","--sf-color-base-600","--sf-color-base-700","--sf-color-base-800","--sf-color-base-900","--sf-color-base-950","--sf-color-base-a10","--sf-color-base-a30","--sf-color-base-a5","--sf-color-base-a50","--sf-color-base-a80","--sf-color-base-muted","--sf-color-base-source-dark","--sf-color-base-source-light","--sf-color-base-subtle","--sf-color-base-tint","--sf-color-bg","--sf-color-bg--active","--sf-color-bg--disabled","--sf-color-bg--focus","--sf-color-bg--hover","--sf-color-bg--selected","--sf-color-black","--sf-color-border","--sf-color-border--disabled","--sf-color-border--focus","--sf-color-border--strong","--sf-color-border--subtle","--sf-color-border--translucent","--sf-color-code-bg","--sf-color-code-text","--sf-color-danger","--sf-color-danger-muted","--sf-color-danger-source-dark","--sf-color-danger-source-light","--sf-color-danger-strong","--sf-color-danger-subtle","--sf-color-danger-tint","--sf-color-dim","--sf-color-heading","--sf-color-info","--sf-color-info-muted","--sf-color-info-source-dark","--sf-color-info-source-light","--sf-color-info-strong","--sf-color-info-subtle","--sf-color-info-tint","--sf-color-inset","--sf-color-inverse","--sf-color-link","--sf-color-link--active","--sf-color-link--disabled","--sf-color-link--hover","--sf-color-link--underline","--sf-color-link--visited","--sf-color-mark-bg","--sf-color-mark-text","--sf-color-neutral","--sf-color-neutral--active","--sf-color-neutral--hover","--sf-color-neutral-100","--sf-color-neutral-200","--sf-color-neutral-300","--sf-color-neutral-400","--sf-color-neutral-50","--sf-color-neutral-500","--sf-color-neutral-600","--sf-color-neutral-700","--sf-color-neutral-800","--sf-color-neutral-900","--sf-color-neutral-950","--sf-color-neutral-a10","--sf-color-neutral-a30","--sf-color-neutral-a5","--sf-color-neutral-a50","--sf-color-neutral-a80","--sf-color-neutral-darker","--sf-color-neutral-lighter","--sf-color-neutral-muted","--sf-color-neutral-source-dark","--sf-color-neutral-source-light","--sf-color-neutral-subtle","--sf-color-neutral-superdark","--sf-color-neutral-superlight","--sf-color-neutral-tint","--sf-color-neutral-xdark","--sf-color-neutral-xlight","--sf-color-overlay","--sf-color-primary","--sf-color-primary--active","--sf-color-primary--hover","--sf-color-primary-100","--sf-color-primary-200","--sf-color-primary-300","--sf-color-primary-400","--sf-color-primary-50","--sf-color-primary-500","--sf-color-primary-600","--sf-color-primary-700","--sf-color-primary-800","--sf-color-primary-900","--sf-color-primary-950","--sf-color-primary-a10","--sf-color-primary-a30","--sf-color-primary-a5","--sf-color-primary-a50","--sf-color-primary-a80","--sf-color-primary-darker","--sf-color-primary-lighter","--sf-color-primary-muted","--sf-color-primary-source-dark","--sf-color-primary-source-light","--sf-color-primary-subtle","--sf-color-primary-superdark","--sf-color-primary-superlight","--sf-color-primary-tint","--sf-color-primary-xdark","--sf-color-primary-xlight","--sf-color-raised","--sf-color-scheme","--sf-color-secondary","--sf-color-secondary--active","--sf-color-secondary--hover","--sf-color-secondary-100","--sf-color-secondary-200","--sf-color-secondary-300","--sf-color-secondary-400","--sf-color-secondary-50","--sf-color-secondary-500","--sf-color-secondary-600","--sf-color-secondary-700","--sf-color-secondary-800","--sf-color-secondary-900","--sf-color-secondary-950","--sf-color-secondary-a10","--sf-color-secondary-a30","--sf-color-secondary-a5","--sf-color-secondary-a50","--sf-color-secondary-a80","--sf-color-secondary-darker","--sf-color-secondary-lighter","--sf-color-secondary-muted","--sf-color-secondary-source-dark","--sf-color-secondary-source-light","--sf-color-secondary-subtle","--sf-color-secondary-superdark","--sf-color-secondary-superlight","--sf-color-secondary-tint","--sf-color-secondary-xdark","--sf-color-secondary-xlight","--sf-color-selection-bg","--sf-color-selection-bg--alt","--sf-color-selection-text","--sf-color-selection-text--alt","--sf-color-success","--sf-color-success-muted","--sf-color-success-source-dark","--sf-color-success-source-light","--sf-color-success-strong","--sf-color-success-subtle","--sf-color-success-tint","--sf-color-surface","--sf-color-tertiary","--sf-color-tertiary--active","--sf-color-tertiary--hover","--sf-color-tertiary-100","--sf-color-tertiary-200","--sf-color-tertiary-300","--sf-color-tertiary-400","--sf-color-tertiary-50","--sf-color-tertiary-500","--sf-color-tertiary-600","--sf-color-tertiary-700","--sf-color-tertiary-800","--sf-color-tertiary-900","--sf-color-tertiary-950","--sf-color-tertiary-a10","--sf-color-tertiary-a30","--sf-color-tertiary-a5","--sf-color-tertiary-a50","--sf-color-tertiary-a80","--sf-color-tertiary-darker","--sf-color-tertiary-lighter","--sf-color-tertiary-muted","--sf-color-tertiary-source-dark","--sf-color-tertiary-source-light","--sf-color-tertiary-subtle","--sf-color-tertiary-superdark","--sf-color-tertiary-superlight","--sf-color-tertiary-tint","--sf-color-tertiary-xdark","--sf-color-tertiary-xlight","--sf-color-text","--sf-color-text--disabled","--sf-color-text--inverse","--sf-color-text--muted","--sf-color-text--on-action","--sf-color-text--on-base","--sf-color-text--on-danger","--sf-color-text--on-info","--sf-color-text--on-inverse","--sf-color-text--on-neutral","--sf-color-text--on-primary","--sf-color-text--on-secondary","--sf-color-text--on-success","--sf-color-text--on-tertiary","--sf-color-text--on-warning","--sf-color-text--placeholder","--sf-color-text--secondary","--sf-color-warning","--sf-color-warning-muted","--sf-color-warning-source-dark","--sf-color-warning-source-light","--sf-color-warning-strong","--sf-color-warning-subtle","--sf-color-warning-tint","--sf-color-white","--sf-component-pad","--sf-container-default","--sf-container-full","--sf-container-narrow","--sf-container-prose","--sf-container-wide","--sf-content-gap","--sf-content-intrinsic-size","--sf-content-width","--sf-contrast-bias","--sf-contrast-threshold","--sf-cover-min-height","--sf-cover-padding","--sf-current-font-weight","--sf-density","--sf-display-l-line-height","--sf-display-m-line-height","--sf-display-s-line-height","--sf-divider-color","--sf-divider-gap","--sf-divider-style","--sf-divider-width","--sf-drop-shadow-l","--sf-drop-shadow-m","--sf-drop-shadow-s","--sf-drop-shadow-xl","--sf-drop-shadow-xs","--sf-duration-fast","--sf-duration-instant","--sf-duration-none","--sf-duration-normal","--sf-duration-slow","--sf-duration-slower","--sf-ease-bounce","--sf-ease-elastic","--sf-ease-in","--sf-ease-in-out","--sf-ease-linear","--sf-ease-out","--sf-ease-overshoot","--sf-ease-spring","--sf-equal-gap","--sf-equal-min-col","--sf-equal-rule-color","--sf-equal-rule-style","--sf-equal-rule-width","--sf-field-block","--sf-field-padding-block","--sf-field-padding-inline","--sf-field-radius","--sf-field-required-marker","--sf-flow-space","--sf-fluid-max-vw","--sf-fluid-min-vw","--sf-fluid-width","--sf-focus-ring-color","--sf-focus-ring-offset","--sf-focus-ring-shadow","--sf-focus-ring-style","--sf-focus-ring-width","--sf-font-body","--sf-font-display","--sf-font-features","--sf-font-geometric","--sf-font-heading","--sf-font-humanist","--sf-font-mono","--sf-font-numeric","--sf-font-slab","--sf-font-variation","--sf-font-weight-body","--sf-font-weight-bold","--sf-font-weight-display","--sf-font-weight-heading","--sf-font-weight-interactive","--sf-font-weight-light","--sf-font-weight-medium","--sf-font-weight-normal","--sf-font-weight-semibold","--sf-font-weight-strong","--sf-frame-ratio","--sf-gap","--sf-gradient-action","--sf-gradient-brand","--sf-gradient-fade--b","--sf-gradient-fade--l","--sf-gradient-fade--r","--sf-gradient-fade--t","--sf-gradient-primary","--sf-gradient-secondary","--sf-gradient-surface","--sf-gradient-tertiary","--sf-grid-gap","--sf-grid-min","--sf-grid-min-2xl","--sf-grid-min-l","--sf-grid-min-m","--sf-grid-min-s","--sf-grid-min-xl","--sf-grid-min-xs","--sf-gutter","--sf-h1-font-weight","--sf-h1-letter-spacing","--sf-h1-line-height","--sf-h1-max-width","--sf-h1-size","--sf-h2-font-weight","--sf-h2-letter-spacing","--sf-h2-line-height","--sf-h2-max-width","--sf-h2-size","--sf-h3-font-weight","--sf-h3-letter-spacing","--sf-h3-line-height","--sf-h3-max-width","--sf-h3-size","--sf-h4-font-weight","--sf-h4-letter-spacing","--sf-h4-line-height","--sf-h4-max-width","--sf-h4-size","--sf-h5-font-weight","--sf-h5-letter-spacing","--sf-h5-line-height","--sf-h5-max-width","--sf-h5-size","--sf-h6-font-weight","--sf-h6-letter-spacing","--sf-h6-line-height","--sf-h6-max-width","--sf-h6-size","--sf-header-height","--sf-header-height-desktop","--sf-header-height-mobile","--sf-heading-color","--sf-heading-font-family","--sf-heading-text-wrap","--sf-hover-grow-scale","--sf-hover-lift","--sf-hover-shrink-scale","--sf-hover-slide","--sf-icon-2xl","--sf-icon-box-bg","--sf-icon-box-border","--sf-icon-box-pad","--sf-icon-box-radius","--sf-icon-l","--sf-icon-m","--sf-icon-s","--sf-icon-xl","--sf-icon-xs","--sf-imposter-margin","--sf-is-active","--sf-is-current","--sf-is-dark","--sf-is-open","--sf-is-pressed","--sf-leading-normal","--sf-leading-relaxed","--sf-leading-snug","--sf-leading-taper","--sf-leading-tight","--sf-line-clamp","--sf-link-external-label","--sf-link-external-marker","--sf-link-underline-offset","--sf-link-underline-thickness","--sf-lumlocker","--sf-lumlocker-dark","--sf-mask-scrim-end","--sf-mask-scrim-start","--sf-media-radius","--sf-motion-scale","--sf-object-fit","--sf-object-position","--sf-opacity-disabled","--sf-opacity-muted","--sf-optical-sizing","--sf-overlap-pull","--sf-palette-shade-l","--sf-palette-tint-l","--sf-print-base-size","--sf-print-page-margin","--sf-print-page-size","--sf-prose-block-margin","--sf-prose-blockquote-border","--sf-prose-blockquote-padding","--sf-prose-figcaption-size","--sf-prose-figure-margin","--sf-prose-heading-gap","--sf-prose-hr-margin","--sf-prose-list-gap","--sf-prose-marker-color","--sf-prose-media-margin","--sf-prose-media-radius","--sf-prose-nested-list-gap","--sf-prose-paragraph","--sf-prose-table-pad","--sf-radius-2xl","--sf-radius-2xs","--sf-radius-3xl","--sf-radius-4xl","--sf-radius-full","--sf-radius-l","--sf-radius-m","--sf-radius-none","--sf-radius-outer","--sf-radius-pill","--sf-radius-s","--sf-radius-scale","--sf-radius-xl","--sf-radius-xs","--sf-ratio-3-2","--sf-ratio-4-3","--sf-ratio-cinema","--sf-ratio-golden","--sf-ratio-portrait","--sf-ratio-square","--sf-ratio-video","--sf-reel-gap","--sf-reel-height","--sf-reel-item-width","--sf-safe-bottom","--sf-safe-left","--sf-safe-right","--sf-safe-top","--sf-scrim-color","--sf-scrim-direction","--sf-scrim-gradient","--sf-scrim-text-shadow","--sf-scroll-shadow-size","--sf-scroll-timeline-range-end","--sf-scroll-timeline-range-exit-end","--sf-scroll-timeline-range-exit-start","--sf-scroll-timeline-range-start","--sf-scrollbar-thumb","--sf-scrollbar-track","--sf-section-pad","--sf-section-pad--2xl","--sf-section-pad--l","--sf-section-pad--m","--sf-section-pad--s","--sf-section-pad--xl","--sf-section-pad--xs","--sf-section-scale","--sf-shadow-2xl","--sf-shadow-color","--sf-shadow-glow","--sf-shadow-glow-color","--sf-shadow-inner","--sf-shadow-l","--sf-shadow-lightness","--sf-shadow-m","--sf-shadow-none","--sf-shadow-s","--sf-shadow-strength","--sf-shadow-xl","--sf-shadow-xs","--sf-sidebar-gap","--sf-sidebar-min-width","--sf-sidebar-width","--sf-size-l","--sf-size-m","--sf-size-s","--sf-size-xl","--sf-size-xs","--sf-space-2xl","--sf-space-2xs","--sf-space-3xl","--sf-space-4xl","--sf-space-base-max","--sf-space-base-min","--sf-space-l","--sf-space-m","--sf-space-none","--sf-space-px","--sf-space-ratio-max","--sf-space-ratio-min","--sf-space-s","--sf-space-scale","--sf-space-xl","--sf-space-xs","--sf-stack-gap","--sf-stagger-step","--sf-state-pending-opacity","--sf-sticky-offset","--sf-sticky-offset-desktop","--sf-sticky-offset-mobile","--sf-surface-bg-animation","--sf-surface-bg-attachment","--sf-surface-bg-color","--sf-surface-bg-image","--sf-surface-bg-overlay","--sf-surface-bg-position","--sf-surface-bg-repeat","--sf-surface-bg-size","--sf-surface-color","--sf-switcher-gap","--sf-switcher-threshold","--sf-text-2xl","--sf-text-2xl-font-weight","--sf-text-2xl-letter-spacing","--sf-text-2xl-line-height","--sf-text-2xl-max-width","--sf-text-2xs","--sf-text-2xs-font-weight","--sf-text-2xs-letter-spacing","--sf-text-2xs-line-height","--sf-text-2xs-max-width","--sf-text-3xl","--sf-text-3xl-font-weight","--sf-text-3xl-letter-spacing","--sf-text-3xl-line-height","--sf-text-3xl-max-width","--sf-text-4xl","--sf-text-4xl-font-weight","--sf-text-4xl-letter-spacing","--sf-text-4xl-line-height","--sf-text-4xl-max-width","--sf-text-base-max","--sf-text-base-min","--sf-text-display-base-max","--sf-text-display-base-min","--sf-text-display-l","--sf-text-display-m","--sf-text-display-s","--sf-text-display-scale","--sf-text-l","--sf-text-l-font-weight","--sf-text-l-letter-spacing","--sf-text-l-line-height","--sf-text-l-max-width","--sf-text-m","--sf-text-m-font-weight","--sf-text-m-letter-spacing","--sf-text-m-line-height","--sf-text-m-max-width","--sf-text-ratio-max","--sf-text-ratio-min","--sf-text-s","--sf-text-s-font-weight","--sf-text-s-letter-spacing","--sf-text-s-line-height","--sf-text-s-max-width","--sf-text-scale","--sf-text-shadow-l","--sf-text-shadow-m","--sf-text-shadow-none","--sf-text-shadow-s","--sf-text-shadow-xl","--sf-text-shadow-xs","--sf-text-xl","--sf-text-xl-font-weight","--sf-text-xl-letter-spacing","--sf-text-xl-line-height","--sf-text-xl-max-width","--sf-text-xs","--sf-text-xs-font-weight","--sf-text-xs-letter-spacing","--sf-text-xs-line-height","--sf-text-xs-max-width","--sf-theme-transition-duration","--sf-touch-target","--sf-tracking-normal","--sf-tracking-tight","--sf-tracking-wide","--sf-tracking-wider","--sf-tracking-widest","--sf-transition-colors","--sf-transition-enter","--sf-transition-exit","--sf-transition-fast","--sf-transition-form-field","--sf-transition-opacity","--sf-transition-overlay","--sf-transition-shadow","--sf-transition-slow","--sf-transition-transform","--sf-z-base","--sf-z-below","--sf-z-dropdown","--sf-z-fixed","--sf-z-modal","--sf-z-overlay","--sf-z-raised","--sf-z-sticky","--sf-z-toast","--sf-z-tooltip"],"classes":["no-motion","no-print","print-color-exact","print-no-color","print-only","sf-alternate","sf-aspect","sf-bento","sf-bento--2","sf-bento--3","sf-bento--6","sf-bento--row-compact","sf-bento--row-tall","sf-bento-featured","sf-bento-full","sf-bento-tall","sf-bento-wide","sf-bg-layer","sf-box","sf-breakout","sf-btn","sf-btn--action","sf-btn--base","sf-btn--block","sf-btn--block-cq","sf-btn--danger","sf-btn--gradient","sf-btn--info","sf-btn--l","sf-btn--neutral","sf-btn--outline","sf-btn--primary","sf-btn--s","sf-btn--secondary","sf-btn--soft","sf-btn--success","sf-btn--tertiary","sf-btn--warning","sf-btn--xl","sf-btn--xs","sf-card","sf-card--bordered","sf-card--elevated","sf-card--interactive","sf-card__avatar","sf-card__body","sf-card__footer","sf-card__header","sf-card__media","sf-card__title","sf-center","sf-center--intrinsic","sf-clickable-parent","sf-clickable-parent__overlay","sf-cluster","sf-cluster--2xl","sf-cluster--between","sf-cluster--center","sf-cluster--end","sf-cluster--l","sf-cluster--m","sf-cluster--no-wrap","sf-cluster--s","sf-cluster--xl","sf-cluster--xs","sf-color-pulse","sf-container","sf-container--full","sf-container--narrow","sf-container--prose","sf-container--wide","sf-content-auto","sf-content-grid","sf-cover","sf-cover--max","sf-cover--min","sf-cover--padding-l","sf-cover--padding-s","sf-cover__center","sf-cq","sf-divide","sf-divide--vertical","sf-divider","sf-divider--dashed","sf-divider--dotted","sf-divider--gradient","sf-divider--soft","sf-divider--strong","sf-divider--vertical","sf-drop-shadow-l","sf-drop-shadow-m","sf-drop-shadow-s","sf-drop-shadow-xl","sf-drop-shadow-xs","sf-entrance--fade","sf-entrance--fade-down","sf-entrance--fade-left","sf-entrance--fade-right","sf-entrance--fade-up","sf-entrance--scale-up","sf-equal","sf-equal--2","sf-equal--3","sf-equal--4","sf-equal--6","sf-equal-height","sf-exit--fade","sf-exit--fade-down","sf-exit--fade-left","sf-exit--fade-right","sf-exit--fade-up","sf-exit--scale-down","sf-fade-in","sf-fade-out","sf-flow","sf-fluid-cq","sf-focus-parent","sf-focus-shadow","sf-frame","sf-frame--3-2","sf-frame--4-3","sf-frame--cinema","sf-frame--golden","sf-frame--portrait","sf-frame--square","sf-frame--video","sf-full-bleed","sf-gap","sf-gap--2xl","sf-gap--l","sf-gap--m","sf-gap--s","sf-gap--xl","sf-gap--xs","sf-grid","sf-grid--2xl","sf-grid--dense","sf-grid--fit","sf-grid--l","sf-grid--m","sf-grid--s","sf-grid--xl","sf-grid--xs","sf-grid-cols-1","sf-grid-cols-1-2","sf-grid-cols-1-3","sf-grid-cols-2","sf-grid-cols-2-1","sf-grid-cols-3","sf-grid-cols-3-1","sf-grid-cols-4","sf-grid-cols-6","sf-grid-flex","sf-grid-flex--2xl","sf-grid-flex--center","sf-grid-flex--l","sf-grid-flex--m","sf-grid-flex--s","sf-grid-flex--xl","sf-grid-flex--xs","sf-h1","sf-h2","sf-h3","sf-h4","sf-h5","sf-h6","sf-header--l","sf-header--m","sf-header--s","sf-header--xl","sf-header--xs","sf-hover-float","sf-hover-grow","sf-hover-shrink","sf-hover-sink","sf-hover-slide-end","sf-hover-slide-start","sf-icon","sf-icon--2xl","sf-icon--boxed","sf-icon--l","sf-icon--m","sf-icon--s","sf-icon--xl","sf-icon--xs","sf-imposter","sf-imposter--contain","sf-imposter--fixed","sf-is-active","sf-is-busy","sf-is-collapsed","sf-is-current","sf-is-danger","sf-is-disabled","sf-is-draggable","sf-is-dragging","sf-is-drop-target","sf-is-empty","sf-is-error","sf-is-expanded","sf-is-hidden","sf-is-highlighted","sf-is-info","sf-is-invalid","sf-is-invisible","sf-is-loading","sf-is-open","sf-is-pending","sf-is-pressed","sf-is-readonly","sf-is-selected","sf-is-skeleton","sf-is-success","sf-is-valid","sf-is-visible","sf-is-warning","sf-line-clamp-2","sf-line-clamp-3","sf-line-clamp-N","sf-link--reverse","sf-link--subtle","sf-link-external","sf-list-none","sf-live-validate","sf-marker--action","sf-marker--primary","sf-marker--secondary","sf-marker--tertiary","sf-no-tap-highlight","sf-not-prose","sf-overflow-fade","sf-overflow-fade--block","sf-overflow-fade--bottom","sf-overflow-fade--inline","sf-overflow-fade--left","sf-overflow-fade--right","sf-overflow-fade--top","sf-overlap","sf-overlap--down","sf-overlap-host","sf-overlay","sf-pancake","sf-prose","sf-reel","sf-scale-down","sf-scale-up","sf-scrim","sf-scrim--bottom","sf-scrim--full","sf-scrim--top","sf-scrim__content","sf-scroll-shadow","sf-scroll-snap","sf-section","sf-section--2xl","sf-section--collapse","sf-section--guttered","sf-section--l","sf-section--m","sf-section--s","sf-section--xl","sf-section--xs","sf-section-group","sf-selection--alt","sf-sidebar","sf-sidebar--narrow","sf-sidebar--right","sf-sidebar--wide","sf-slide-in-down","sf-slide-in-left","sf-slide-in-right","sf-slide-in-up","sf-stack","sf-stack--2xl","sf-stack--center","sf-stack--end","sf-stack--l","sf-stack--m","sf-stack--s","sf-stack--stretch","sf-stack--xl","sf-stack--xs","sf-stagger","sf-sticky","sf-sticky--l","sf-sticky--m","sf-sticky--s","sf-subgrid","sf-subgrid-rows","sf-surface","sf-surface--action","sf-surface--danger","sf-surface--info","sf-surface--inverse","sf-surface--neutral","sf-surface--primary","sf-surface--secondary","sf-surface--success","sf-surface--tertiary","sf-surface--warning","sf-surface-bg","sf-switcher","sf-switcher--no-wrap","sf-switcher--vertical","sf-tabular-nums","sf-text-2xl","sf-text-2xs","sf-text-3xl","sf-text-4xl","sf-text-gradient","sf-text-l","sf-text-m","sf-text-protect","sf-text-s","sf-text-xl","sf-text-xs","sf-theme-dark","sf-theme-light","sf-theme-transition","sf-truncate","skip-link","sr-only","sr-only-focusable"]}</script>
+        <script type="application/json" id="cov-data">{"tokens": ["--sf-alternate-gap", "--sf-alternate-inner-gap", "--sf-animation-blink", "--sf-animation-color-pulse", "--sf-animation-fade-in", "--sf-animation-fade-out", "--sf-animation-float", "--sf-animation-ping", "--sf-animation-scale-down", "--sf-animation-scale-up", "--sf-animation-shimmer", "--sf-animation-slide-in-down", "--sf-animation-slide-in-left", "--sf-animation-slide-in-right", "--sf-animation-slide-in-up", "--sf-animation-slide-out-down", "--sf-animation-slide-out-left", "--sf-animation-slide-out-right", "--sf-animation-slide-out-up", "--sf-animation-spin", "--sf-aspect", "--sf-bento-cols-default", "--sf-bento-gap", "--sf-bento-row-compact", "--sf-bento-row-default", "--sf-bento-row-tall", "--sf-bg-layer-fit", "--sf-bg-layer-inset", "--sf-bg-layer-position", "--sf-bg-layer-radius", "--sf-bg-layer-z", "--sf-blur", "--sf-body-color", "--sf-body-em-style", "--sf-body-font-family", "--sf-body-font-size", "--sf-body-font-weight", "--sf-body-line-height", "--sf-body-strong-weight", "--sf-body-text-wrap", "--sf-border", "--sf-border-scale", "--sf-border-strong", "--sf-border-style", "--sf-border-subtle", "--sf-border-width-1", "--sf-border-width-2", "--sf-border-width-3", "--sf-border-width-4", "--sf-border-width-hairline", "--sf-box-border-color", "--sf-box-border-width", "--sf-box-padding", "--sf-breakout-width", "--sf-btn-border-width", "--sf-btn-font-scale", "--sf-btn-font-size", "--sf-btn-font-weight", "--sf-btn-gap", "--sf-btn-l-font-size", "--sf-btn-l-min-height", "--sf-btn-l-padding-block", "--sf-btn-l-padding-inline", "--sf-btn-m-font-size", "--sf-btn-m-min-height", "--sf-btn-m-padding-block", "--sf-btn-m-padding-inline", "--sf-btn-min-height", "--sf-btn-padding-block", "--sf-btn-padding-inline", "--sf-btn-radius", "--sf-btn-s-font-size", "--sf-btn-s-min-height", "--sf-btn-s-padding-block", "--sf-btn-s-padding-inline", "--sf-btn-xl-font-size", "--sf-btn-xl-min-height", "--sf-btn-xl-padding-block", "--sf-btn-xl-padding-inline", "--sf-btn-xs-font-size", "--sf-btn-xs-min-height", "--sf-btn-xs-padding-block", "--sf-btn-xs-padding-inline", "--sf-card-avatar-size", "--sf-card-bg", "--sf-card-border-color", "--sf-card-border-width", "--sf-card-gap", "--sf-card-heading-size", "--sf-card-media-radius", "--sf-card-media-ratio", "--sf-card-padding", "--sf-card-radius", "--sf-card-radius-outer", "--sf-card-shadow", "--sf-card-shadow--elevated", "--sf-card-shadow--hover", "--sf-caret-color", "--sf-center-gutter", "--sf-center-max", "--sf-cluster-align", "--sf-cluster-gap", "--sf-cluster-justify", "--sf-code-font-size", "--sf-color-action", "--sf-color-action--active", "--sf-color-action--hover", "--sf-color-action-100", "--sf-color-action-200", "--sf-color-action-300", "--sf-color-action-400", "--sf-color-action-50", "--sf-color-action-500", "--sf-color-action-600", "--sf-color-action-700", "--sf-color-action-800", "--sf-color-action-900", "--sf-color-action-950", "--sf-color-action-a10", "--sf-color-action-a30", "--sf-color-action-a5", "--sf-color-action-a50", "--sf-color-action-a80", "--sf-color-action-darker", "--sf-color-action-lighter", "--sf-color-action-muted", "--sf-color-action-source-dark", "--sf-color-action-source-light", "--sf-color-action-subtle", "--sf-color-action-superdark", "--sf-color-action-superlight", "--sf-color-action-tint", "--sf-color-action-xdark", "--sf-color-action-xlight", "--sf-color-base", "--sf-color-base--active", "--sf-color-base--hover", "--sf-color-base-100", "--sf-color-base-200", "--sf-color-base-300", "--sf-color-base-400", "--sf-color-base-50", "--sf-color-base-500", "--sf-color-base-600", "--sf-color-base-700", "--sf-color-base-800", "--sf-color-base-900", "--sf-color-base-950", "--sf-color-base-a10", "--sf-color-base-a30", "--sf-color-base-a5", "--sf-color-base-a50", "--sf-color-base-a80", "--sf-color-base-muted", "--sf-color-base-source-dark", "--sf-color-base-source-light", "--sf-color-base-subtle", "--sf-color-base-tint", "--sf-color-bg", "--sf-color-bg--active", "--sf-color-bg--disabled", "--sf-color-bg--focus", "--sf-color-bg--hover", "--sf-color-bg--selected", "--sf-color-black", "--sf-color-border", "--sf-color-border--disabled", "--sf-color-border--focus", "--sf-color-border--strong", "--sf-color-border--subtle", "--sf-color-border--translucent", "--sf-color-code-bg", "--sf-color-code-text", "--sf-color-danger", "--sf-color-danger-muted", "--sf-color-danger-source-dark", "--sf-color-danger-source-light", "--sf-color-danger-strong", "--sf-color-danger-subtle", "--sf-color-danger-tint", "--sf-color-dim", "--sf-color-heading", "--sf-color-info", "--sf-color-info-muted", "--sf-color-info-source-dark", "--sf-color-info-source-light", "--sf-color-info-strong", "--sf-color-info-subtle", "--sf-color-info-tint", "--sf-color-inset", "--sf-color-inverse", "--sf-color-link", "--sf-color-link--active", "--sf-color-link--disabled", "--sf-color-link--hover", "--sf-color-link--underline", "--sf-color-link--visited", "--sf-color-mark-bg", "--sf-color-mark-text", "--sf-color-neutral", "--sf-color-neutral--active", "--sf-color-neutral--hover", "--sf-color-neutral-100", "--sf-color-neutral-200", "--sf-color-neutral-300", "--sf-color-neutral-400", "--sf-color-neutral-50", "--sf-color-neutral-500", "--sf-color-neutral-600", "--sf-color-neutral-700", "--sf-color-neutral-800", "--sf-color-neutral-900", "--sf-color-neutral-950", "--sf-color-neutral-a10", "--sf-color-neutral-a30", "--sf-color-neutral-a5", "--sf-color-neutral-a50", "--sf-color-neutral-a80", "--sf-color-neutral-darker", "--sf-color-neutral-lighter", "--sf-color-neutral-muted", "--sf-color-neutral-source-dark", "--sf-color-neutral-source-light", "--sf-color-neutral-subtle", "--sf-color-neutral-superdark", "--sf-color-neutral-superlight", "--sf-color-neutral-tint", "--sf-color-neutral-xdark", "--sf-color-neutral-xlight", "--sf-color-overlay", "--sf-color-primary", "--sf-color-primary--active", "--sf-color-primary--hover", "--sf-color-primary-100", "--sf-color-primary-200", "--sf-color-primary-300", "--sf-color-primary-400", "--sf-color-primary-50", "--sf-color-primary-500", "--sf-color-primary-600", "--sf-color-primary-700", "--sf-color-primary-800", "--sf-color-primary-900", "--sf-color-primary-950", "--sf-color-primary-a10", "--sf-color-primary-a30", "--sf-color-primary-a5", "--sf-color-primary-a50", "--sf-color-primary-a80", "--sf-color-primary-darker", "--sf-color-primary-lighter", "--sf-color-primary-muted", "--sf-color-primary-source-dark", "--sf-color-primary-source-light", "--sf-color-primary-subtle", "--sf-color-primary-superdark", "--sf-color-primary-superlight", "--sf-color-primary-tint", "--sf-color-primary-xdark", "--sf-color-primary-xlight", "--sf-color-raised", "--sf-color-scheme", "--sf-color-secondary", "--sf-color-secondary--active", "--sf-color-secondary--hover", "--sf-color-secondary-100", "--sf-color-secondary-200", "--sf-color-secondary-300", "--sf-color-secondary-400", "--sf-color-secondary-50", "--sf-color-secondary-500", "--sf-color-secondary-600", "--sf-color-secondary-700", "--sf-color-secondary-800", "--sf-color-secondary-900", "--sf-color-secondary-950", "--sf-color-secondary-a10", "--sf-color-secondary-a30", "--sf-color-secondary-a5", "--sf-color-secondary-a50", "--sf-color-secondary-a80", "--sf-color-secondary-darker", "--sf-color-secondary-lighter", "--sf-color-secondary-muted", "--sf-color-secondary-source-dark", "--sf-color-secondary-source-light", "--sf-color-secondary-subtle", "--sf-color-secondary-superdark", "--sf-color-secondary-superlight", "--sf-color-secondary-tint", "--sf-color-secondary-xdark", "--sf-color-secondary-xlight", "--sf-color-selection-bg", "--sf-color-selection-bg--alt", "--sf-color-selection-text", "--sf-color-selection-text--alt", "--sf-color-success", "--sf-color-success-muted", "--sf-color-success-source-dark", "--sf-color-success-source-light", "--sf-color-success-strong", "--sf-color-success-subtle", "--sf-color-success-tint", "--sf-color-surface", "--sf-color-tertiary", "--sf-color-tertiary--active", "--sf-color-tertiary--hover", "--sf-color-tertiary-100", "--sf-color-tertiary-200", "--sf-color-tertiary-300", "--sf-color-tertiary-400", "--sf-color-tertiary-50", "--sf-color-tertiary-500", "--sf-color-tertiary-600", "--sf-color-tertiary-700", "--sf-color-tertiary-800", "--sf-color-tertiary-900", "--sf-color-tertiary-950", "--sf-color-tertiary-a10", "--sf-color-tertiary-a30", "--sf-color-tertiary-a5", "--sf-color-tertiary-a50", "--sf-color-tertiary-a80", "--sf-color-tertiary-darker", "--sf-color-tertiary-lighter", "--sf-color-tertiary-muted", "--sf-color-tertiary-source-dark", "--sf-color-tertiary-source-light", "--sf-color-tertiary-subtle", "--sf-color-tertiary-superdark", "--sf-color-tertiary-superlight", "--sf-color-tertiary-tint", "--sf-color-tertiary-xdark", "--sf-color-tertiary-xlight", "--sf-color-text", "--sf-color-text--disabled", "--sf-color-text--inverse", "--sf-color-text--muted", "--sf-color-text--on-action", "--sf-color-text--on-base", "--sf-color-text--on-danger", "--sf-color-text--on-info", "--sf-color-text--on-inverse", "--sf-color-text--on-neutral", "--sf-color-text--on-primary", "--sf-color-text--on-secondary", "--sf-color-text--on-success", "--sf-color-text--on-tertiary", "--sf-color-text--on-warning", "--sf-color-text--placeholder", "--sf-color-text--subtle", "--sf-color-warning", "--sf-color-warning-muted", "--sf-color-warning-source-dark", "--sf-color-warning-source-light", "--sf-color-warning-strong", "--sf-color-warning-subtle", "--sf-color-warning-tint", "--sf-color-white", "--sf-component-pad", "--sf-container-default", "--sf-container-full", "--sf-container-narrow", "--sf-container-prose", "--sf-container-wide", "--sf-content-gap", "--sf-content-intrinsic-size", "--sf-content-width", "--sf-contrast-bias", "--sf-contrast-threshold", "--sf-cover-min-height", "--sf-cover-padding", "--sf-density", "--sf-display-l-line-height", "--sf-display-m-line-height", "--sf-display-s-line-height", "--sf-divider-color", "--sf-divider-gap", "--sf-divider-style", "--sf-divider-width", "--sf-drop-shadow-l", "--sf-drop-shadow-m", "--sf-drop-shadow-s", "--sf-drop-shadow-xl", "--sf-drop-shadow-xs", "--sf-duration-fast", "--sf-duration-instant", "--sf-duration-none", "--sf-duration-normal", "--sf-duration-slow", "--sf-duration-slower", "--sf-ease-bounce", "--sf-ease-elastic", "--sf-ease-in", "--sf-ease-in-out", "--sf-ease-linear", "--sf-ease-out", "--sf-ease-overshoot", "--sf-ease-spring", "--sf-equal-gap", "--sf-equal-min-col", "--sf-equal-rule-color", "--sf-equal-rule-style", "--sf-equal-rule-width", "--sf-field-block", "--sf-field-padding-block", "--sf-field-padding-inline", "--sf-field-radius", "--sf-field-required-marker", "--sf-flow-space", "--sf-fluid-max-vw", "--sf-fluid-min-vw", "--sf-fluid-width", "--sf-focus-ring-color", "--sf-focus-ring-offset", "--sf-focus-ring-shadow", "--sf-focus-ring-style", "--sf-focus-ring-width", "--sf-font-body", "--sf-font-display", "--sf-font-features", "--sf-font-geometric", "--sf-font-heading", "--sf-font-humanist", "--sf-font-mono", "--sf-font-numeric", "--sf-font-slab", "--sf-font-variation", "--sf-font-weight-body", "--sf-font-weight-bold", "--sf-font-weight-display", "--sf-font-weight-heading", "--sf-font-weight-interactive", "--sf-font-weight-light", "--sf-font-weight-medium", "--sf-font-weight-normal", "--sf-font-weight-semibold", "--sf-font-weight-strong", "--sf-frame-ratio", "--sf-gap", "--sf-gradient-action", "--sf-gradient-brand", "--sf-gradient-fade--b", "--sf-gradient-fade--l", "--sf-gradient-fade--r", "--sf-gradient-fade--t", "--sf-gradient-primary", "--sf-gradient-secondary", "--sf-gradient-surface", "--sf-gradient-tertiary", "--sf-grid-gap", "--sf-grid-min", "--sf-grid-min-2xl", "--sf-grid-min-l", "--sf-grid-min-m", "--sf-grid-min-s", "--sf-grid-min-xl", "--sf-grid-min-xs", "--sf-gutter", "--sf-h1-font-weight", "--sf-h1-letter-spacing", "--sf-h1-line-height", "--sf-h1-max-width", "--sf-h1-size", "--sf-h2-font-weight", "--sf-h2-letter-spacing", "--sf-h2-line-height", "--sf-h2-max-width", "--sf-h2-size", "--sf-h3-font-weight", "--sf-h3-letter-spacing", "--sf-h3-line-height", "--sf-h3-max-width", "--sf-h3-size", "--sf-h4-font-weight", "--sf-h4-letter-spacing", "--sf-h4-line-height", "--sf-h4-max-width", "--sf-h4-size", "--sf-h5-font-weight", "--sf-h5-letter-spacing", "--sf-h5-line-height", "--sf-h5-max-width", "--sf-h5-size", "--sf-h6-font-weight", "--sf-h6-letter-spacing", "--sf-h6-line-height", "--sf-h6-max-width", "--sf-h6-size", "--sf-header-height", "--sf-header-height-desktop", "--sf-header-height-mobile", "--sf-heading-color", "--sf-heading-font-family", "--sf-heading-text-wrap", "--sf-hover-grow-scale", "--sf-hover-lift", "--sf-hover-shrink-scale", "--sf-hover-slide", "--sf-icon-2xl", "--sf-icon-box-bg", "--sf-icon-box-border", "--sf-icon-box-pad", "--sf-icon-box-radius", "--sf-icon-l", "--sf-icon-m", "--sf-icon-s", "--sf-icon-xl", "--sf-icon-xs", "--sf-imposter-margin", "--sf-is-dark", "--sf-leading-normal", "--sf-leading-relaxed", "--sf-leading-snug", "--sf-leading-taper", "--sf-leading-tight", "--sf-line-clamp", "--sf-link-external-label", "--sf-link-external-marker", "--sf-link-underline-offset", "--sf-link-underline-thickness", "--sf-lumlocker", "--sf-lumlocker-dark", "--sf-mask-scrim-end", "--sf-mask-scrim-start", "--sf-media-radius", "--sf-motion-scale", "--sf-object-fit", "--sf-object-position", "--sf-opacity-disabled", "--sf-opacity-muted", "--sf-optical-sizing", "--sf-overlap-pull", "--sf-palette-shade-l", "--sf-palette-tint-l", "--sf-print-base-size", "--sf-print-page-margin", "--sf-print-page-size", "--sf-prose-block-margin", "--sf-prose-blockquote-border", "--sf-prose-blockquote-padding", "--sf-prose-figcaption-size", "--sf-prose-figure-margin", "--sf-prose-heading-gap", "--sf-prose-hr-margin", "--sf-prose-list-gap", "--sf-prose-marker-color", "--sf-prose-media-margin", "--sf-prose-media-radius", "--sf-prose-nested-list-gap", "--sf-prose-paragraph", "--sf-prose-table-pad", "--sf-radius-2xl", "--sf-radius-2xs", "--sf-radius-3xl", "--sf-radius-4xl", "--sf-radius-full", "--sf-radius-l", "--sf-radius-m", "--sf-radius-none", "--sf-radius-outer", "--sf-radius-pill", "--sf-radius-s", "--sf-radius-scale", "--sf-radius-xl", "--sf-radius-xs", "--sf-ratio-3-2", "--sf-ratio-4-3", "--sf-ratio-cinema", "--sf-ratio-golden", "--sf-ratio-portrait", "--sf-ratio-square", "--sf-ratio-video", "--sf-reel-gap", "--sf-reel-height", "--sf-reel-item-width", "--sf-safe-bottom", "--sf-safe-left", "--sf-safe-right", "--sf-safe-top", "--sf-scrim-color", "--sf-scrim-direction", "--sf-scrim-gradient", "--sf-scrim-text-shadow", "--sf-scroll-shadow-size", "--sf-scroll-timeline-range-end", "--sf-scroll-timeline-range-exit-end", "--sf-scroll-timeline-range-exit-start", "--sf-scroll-timeline-range-start", "--sf-scrollbar-thumb", "--sf-scrollbar-track", "--sf-section-pad", "--sf-section-pad--2xl", "--sf-section-pad--l", "--sf-section-pad--m", "--sf-section-pad--s", "--sf-section-pad--xl", "--sf-section-pad--xs", "--sf-section-scale", "--sf-shadow-2xl", "--sf-shadow-color", "--sf-shadow-glow", "--sf-shadow-glow-color", "--sf-shadow-inner", "--sf-shadow-l", "--sf-shadow-lightness", "--sf-shadow-m", "--sf-shadow-none", "--sf-shadow-s", "--sf-shadow-strength", "--sf-shadow-xl", "--sf-shadow-xs", "--sf-sidebar-gap", "--sf-sidebar-min-width", "--sf-sidebar-width", "--sf-size-l", "--sf-size-m", "--sf-size-s", "--sf-size-xl", "--sf-size-xs", "--sf-space-2xl", "--sf-space-2xs", "--sf-space-3xl", "--sf-space-4xl", "--sf-space-base-max", "--sf-space-base-min", "--sf-space-l", "--sf-space-m", "--sf-space-none", "--sf-space-px", "--sf-space-ratio-max", "--sf-space-ratio-min", "--sf-space-s", "--sf-space-scale", "--sf-space-xl", "--sf-space-xs", "--sf-stack-gap", "--sf-stagger-step", "--sf-sticky-offset", "--sf-sticky-offset-desktop", "--sf-sticky-offset-mobile", "--sf-surface-bg-animation", "--sf-surface-bg-attachment", "--sf-surface-bg-color", "--sf-surface-bg-image", "--sf-surface-bg-overlay", "--sf-surface-bg-position", "--sf-surface-bg-repeat", "--sf-surface-bg-size", "--sf-surface-color", "--sf-switcher-gap", "--sf-switcher-threshold", "--sf-text-2xl", "--sf-text-2xl-font-weight", "--sf-text-2xl-letter-spacing", "--sf-text-2xl-line-height", "--sf-text-2xl-max-width", "--sf-text-2xs", "--sf-text-2xs-font-weight", "--sf-text-2xs-letter-spacing", "--sf-text-2xs-line-height", "--sf-text-2xs-max-width", "--sf-text-3xl", "--sf-text-3xl-font-weight", "--sf-text-3xl-letter-spacing", "--sf-text-3xl-line-height", "--sf-text-3xl-max-width", "--sf-text-4xl", "--sf-text-4xl-font-weight", "--sf-text-4xl-letter-spacing", "--sf-text-4xl-line-height", "--sf-text-4xl-max-width", "--sf-text-base-max", "--sf-text-base-min", "--sf-text-display-base-max", "--sf-text-display-base-min", "--sf-text-display-l", "--sf-text-display-m", "--sf-text-display-s", "--sf-text-display-scale", "--sf-text-l", "--sf-text-l-font-weight", "--sf-text-l-letter-spacing", "--sf-text-l-line-height", "--sf-text-l-max-width", "--sf-text-m", "--sf-text-m-font-weight", "--sf-text-m-letter-spacing", "--sf-text-m-line-height", "--sf-text-m-max-width", "--sf-text-ratio-max", "--sf-text-ratio-min", "--sf-text-s", "--sf-text-s-font-weight", "--sf-text-s-letter-spacing", "--sf-text-s-line-height", "--sf-text-s-max-width", "--sf-text-scale", "--sf-text-shadow-l", "--sf-text-shadow-m", "--sf-text-shadow-none", "--sf-text-shadow-s", "--sf-text-shadow-xl", "--sf-text-shadow-xs", "--sf-text-xl", "--sf-text-xl-font-weight", "--sf-text-xl-letter-spacing", "--sf-text-xl-line-height", "--sf-text-xl-max-width", "--sf-text-xs", "--sf-text-xs-font-weight", "--sf-text-xs-letter-spacing", "--sf-text-xs-line-height", "--sf-text-xs-max-width", "--sf-theme-transition-duration", "--sf-touch-target", "--sf-tracking-normal", "--sf-tracking-tight", "--sf-tracking-wide", "--sf-tracking-wider", "--sf-tracking-widest", "--sf-transition-colors", "--sf-transition-enter", "--sf-transition-exit", "--sf-transition-fast", "--sf-transition-form-field", "--sf-transition-opacity", "--sf-transition-overlay", "--sf-transition-shadow", "--sf-transition-slow", "--sf-transition-transform", "--sf-z-base", "--sf-z-below", "--sf-z-dropdown", "--sf-z-fixed", "--sf-z-modal", "--sf-z-overlay", "--sf-z-raised", "--sf-z-sticky", "--sf-z-toast", "--sf-z-tooltip"], "classes": ["no-motion", "no-print", "print-color-exact", "print-no-color", "print-only", "sf-alternate", "sf-aspect", "sf-bento", "sf-bento--2", "sf-bento--3", "sf-bento--6", "sf-bento--row-compact", "sf-bento--row-tall", "sf-bento-featured", "sf-bento-full", "sf-bento-tall", "sf-bento-wide", "sf-bg-layer", "sf-box", "sf-breakout", "sf-btn", "sf-btn--action", "sf-btn--base", "sf-btn--block", "sf-btn--block-cq", "sf-btn--danger", "sf-btn--gradient", "sf-btn--info", "sf-btn--l", "sf-btn--neutral", "sf-btn--outline", "sf-btn--primary", "sf-btn--s", "sf-btn--secondary", "sf-btn--soft", "sf-btn--success", "sf-btn--tertiary", "sf-btn--warning", "sf-btn--xl", "sf-btn--xs", "sf-card", "sf-card--bordered", "sf-card--elevated", "sf-card--interactive", "sf-card__avatar", "sf-card__body", "sf-card__footer", "sf-card__header", "sf-card__media", "sf-card__title", "sf-center", "sf-center--intrinsic", "sf-clickable-parent", "sf-clickable-parent__overlay", "sf-cluster", "sf-cluster--2xl", "sf-cluster--between", "sf-cluster--center", "sf-cluster--end", "sf-cluster--l", "sf-cluster--m", "sf-cluster--no-wrap", "sf-cluster--s", "sf-cluster--xl", "sf-cluster--xs", "sf-color-pulse", "sf-container", "sf-container--full", "sf-container--narrow", "sf-container--prose", "sf-container--wide", "sf-content-auto", "sf-content-grid", "sf-cover", "sf-cover--max", "sf-cover--min", "sf-cover--padding-l", "sf-cover--padding-s", "sf-cover__center", "sf-cq", "sf-divide", "sf-divide--vertical", "sf-divider", "sf-divider--dashed", "sf-divider--dotted", "sf-divider--gradient", "sf-divider--soft", "sf-divider--strong", "sf-divider--vertical", "sf-drop-shadow-l", "sf-drop-shadow-m", "sf-drop-shadow-s", "sf-drop-shadow-xl", "sf-drop-shadow-xs", "sf-entrance--fade", "sf-entrance--fade-down", "sf-entrance--fade-left", "sf-entrance--fade-right", "sf-entrance--fade-up", "sf-entrance--scale-up", "sf-equal", "sf-equal--2", "sf-equal--3", "sf-equal--4", "sf-equal--6", "sf-equal-height", "sf-exit--fade", "sf-exit--fade-down", "sf-exit--fade-left", "sf-exit--fade-right", "sf-exit--fade-up", "sf-exit--scale-down", "sf-fade-in", "sf-fade-out", "sf-flow", "sf-fluid-cq", "sf-focus-parent", "sf-focus-shadow", "sf-frame", "sf-frame--3-2", "sf-frame--4-3", "sf-frame--cinema", "sf-frame--golden", "sf-frame--portrait", "sf-frame--square", "sf-frame--video", "sf-full-bleed", "sf-gap", "sf-gap--2xl", "sf-gap--l", "sf-gap--m", "sf-gap--s", "sf-gap--xl", "sf-gap--xs", "sf-grid", "sf-grid--2xl", "sf-grid--dense", "sf-grid--fit", "sf-grid--l", "sf-grid--m", "sf-grid--s", "sf-grid--xl", "sf-grid--xs", "sf-grid-cols-1", "sf-grid-cols-1-2", "sf-grid-cols-1-3", "sf-grid-cols-2", "sf-grid-cols-2-1", "sf-grid-cols-3", "sf-grid-cols-3-1", "sf-grid-cols-4", "sf-grid-cols-6", "sf-grid-flex", "sf-grid-flex--2xl", "sf-grid-flex--center", "sf-grid-flex--l", "sf-grid-flex--m", "sf-grid-flex--s", "sf-grid-flex--xl", "sf-grid-flex--xs", "sf-h1", "sf-h2", "sf-h3", "sf-h4", "sf-h5", "sf-h6", "sf-header--l", "sf-header--m", "sf-header--s", "sf-header--xl", "sf-header--xs", "sf-hover-float", "sf-hover-grow", "sf-hover-shrink", "sf-hover-sink", "sf-hover-slide-end", "sf-hover-slide-start", "sf-icon", "sf-icon--2xl", "sf-icon--boxed", "sf-icon--l", "sf-icon--m", "sf-icon--s", "sf-icon--xl", "sf-icon--xs", "sf-imposter", "sf-imposter--contain", "sf-imposter--fixed", "sf-invisible", "sf-is-disabled", "sf-is-draggable", "sf-is-dragging", "sf-is-drop-target", "sf-is-empty", "sf-is-error", "sf-is-highlighted", "sf-is-info", "sf-is-invalid", "sf-is-loading", "sf-is-selected", "sf-is-skeleton", "sf-is-success", "sf-is-valid", "sf-is-warning", "sf-line-clamp-2", "sf-line-clamp-3", "sf-line-clamp-N", "sf-link--reverse", "sf-link--subtle", "sf-link-external", "sf-list-none", "sf-live-validate", "sf-marker--action", "sf-marker--primary", "sf-marker--secondary", "sf-marker--tertiary", "sf-no-tap-highlight", "sf-not-prose", "sf-overflow-fade", "sf-overflow-fade--block", "sf-overflow-fade--bottom", "sf-overflow-fade--inline", "sf-overflow-fade--left", "sf-overflow-fade--right", "sf-overflow-fade--top", "sf-overlap", "sf-overlap--down", "sf-overlap-host", "sf-overlay", "sf-pancake", "sf-prose", "sf-reel", "sf-scale-down", "sf-scale-up", "sf-scrim", "sf-scrim--bottom", "sf-scrim--full", "sf-scrim--top", "sf-scrim__content", "sf-scroll-shadow", "sf-scroll-snap", "sf-section", "sf-section--2xl", "sf-section--collapse", "sf-section--guttered", "sf-section--l", "sf-section--m", "sf-section--s", "sf-section--xl", "sf-section--xs", "sf-section-group", "sf-selection--alt", "sf-sidebar", "sf-sidebar--narrow", "sf-sidebar--right", "sf-sidebar--wide", "sf-slide-in-down", "sf-slide-in-left", "sf-slide-in-right", "sf-slide-in-up", "sf-stack", "sf-stack--2xl", "sf-stack--center", "sf-stack--end", "sf-stack--l", "sf-stack--m", "sf-stack--s", "sf-stack--stretch", "sf-stack--xl", "sf-stack--xs", "sf-stagger", "sf-sticky", "sf-sticky--l", "sf-sticky--m", "sf-sticky--s", "sf-subgrid", "sf-subgrid-rows", "sf-surface", "sf-surface--action", "sf-surface--danger", "sf-surface--info", "sf-surface--inverse", "sf-surface--neutral", "sf-surface--primary", "sf-surface--secondary", "sf-surface--success", "sf-surface--tertiary", "sf-surface--warning", "sf-surface-bg", "sf-switcher", "sf-switcher--no-wrap", "sf-switcher--vertical", "sf-tabular-nums", "sf-text-2xl", "sf-text-2xs", "sf-text-3xl", "sf-text-4xl", "sf-text-gradient", "sf-text-l", "sf-text-m", "sf-text-protect", "sf-text-s", "sf-text-xl", "sf-text-xs", "sf-theme-dark", "sf-theme-light", "sf-theme-transition", "sf-truncate", "sf-visible", "skip-link", "sr-only", "sr-only-focusable"]}</script>
       </section>
     </main>
   </div>
@@ -5309,8 +5243,8 @@ <h3 id="cov-tokens-h" class="cov-area-h">Design tokens <span class="cov-count">7
     }
 
     function openNav() {
-      nav.classList.add('sf-is-open');
-      overlay.classList.add('sf-is-open');
+      nav.classList.add('is-open');
+      overlay.classList.add('is-open');
       navToggle.setAttribute('aria-expanded', 'true');
       navToggle.setAttribute('aria-label', 'Close navigation');
       document.body.style.overflow = 'hidden';
@@ -5335,8 +5269,8 @@ <h3 id="cov-tokens-h" class="cov-area-h">Design tokens <span class="cov-count">7
     }
 
     function closeNav() {
-      nav.classList.remove('sf-is-open');
-      overlay.classList.remove('sf-is-open');
+      nav.classList.remove('is-open');
+      overlay.classList.remove('is-open');
       navToggle.setAttribute('aria-expanded', 'false');
       navToggle.setAttribute('aria-label', 'Open navigation');
       document.body.style.overflow = '';
@@ -5349,7 +5283,7 @@ <h3 id="cov-tokens-h" class="cov-area-h">Design tokens <span class="cov-count">7
     }
 
     navToggle.addEventListener('click', () => {
-      nav.classList.contains('sf-is-open') ? closeNav() : openNav();
+      nav.classList.contains('is-open') ? closeNav() : openNav();
     });
 
     overlay.addEventListener('click', closeNav);
@@ -5361,7 +5295,7 @@ <h3 id="cov-tokens-h" class="cov-area-h">Design tokens <span class="cov-count">7
     });
 
     document.addEventListener('keydown', e => {
-      if (e.key === 'Escape' && nav.classList.contains('sf-is-open')) closeNav();
+      if (e.key === 'Escape' && nav.classList.contains('is-open')) closeNav();
     });
 
     // Replay an animation preset on click by re-triggering its animation.
diff --git a/dist/css-custom-data.json b/dist/css-custom-data.json
index eba9a848..33cc860a 100644
--- a/dist/css-custom-data.json
+++ b/dist/css-custom-data.json
@@ -1752,8 +1752,8 @@
       "syntax": "*"
     },
     {
-      "name": "--sf-color-text--secondary",
-      "description": "De-emphasised secondary text (captions, labels, supporting copy).\n\nDefault: `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )`",
+      "name": "--sf-color-text--subtle",
+      "description": "De-emphasised, lower-emphasis text (captions, labels, supporting copy). Second tier below --sf-color-text; sits between it and --sf-color-text--muted.\n\nDefault: `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )`",
       "syntax": "*"
     },
     {
@@ -1861,11 +1861,6 @@
       "description": "Inner padding for the cover layout.\n\nDefault: `var(--sf-section-pad)`",
       "syntax": "*"
     },
-    {
-      "name": "--sf-current-font-weight",
-      "description": "Inherits the current font-weight from context. Useful as a reset.\n\nDefault: `var(--sf-font-weight-bold)`",
-      "syntax": "*"
-    },
     {
       "name": "--sf-density",
       "description": "Compact ↔ comfortable dial for interactive control geometry (the --sf-size-* rung ladder). Default 1; below 1 packs controls tighter (dashboards, data tables), above 1 loosens them. A deliberate design/user choice, not a viewport response — orthogonal to --sf-space-scale (whitespace) and --sf-section-scale (section rhythm). The --sf-touch-target accessibility floor is independent, so a small value can't shrink native controls below the WCAG target. Like the other global multipliers it is a :root dial (the size ladder is computed at :root and inherits, so nested overrides don't retroactively rescale it).\n\nDefault: `1`\n\n(advanced token)",
@@ -2556,26 +2551,6 @@
       "description": "Margin between the imposter overlay and the viewport edges.\n\nDefault: `var(--sf-space-m)`",
       "syntax": "*"
     },
-    {
-      "name": "--sf-is-active",
-      "description": "Integer state flag for the active state. Set to 1 (via JS or .sf-is-active) to drive branching calc() expressions. 0 = default (inactive).\n\nDefault: `0`\n\n(advanced token)",
-      "syntax": "<integer>"
-    },
-    {
-      "name": "--sf-is-current",
-      "description": "Integer state flag for the current/selected state. Set to 1 (via .sf-is-current) to drive branching calc() expressions. 0 = default.\n\nDefault: `0`\n\n(advanced token)",
-      "syntax": "<integer>"
-    },
-    {
-      "name": "--sf-is-open",
-      "description": "Integer state flag for the open/expanded state. Set to 1 (via .sf-is-open) to drive branching calc() expressions. 0 = default (closed).\n\nDefault: `0`\n\n(advanced token)",
-      "syntax": "<integer>"
-    },
-    {
-      "name": "--sf-is-pressed",
-      "description": "Integer state flag for the pressed state. Set to 1 (via .sf-is-pressed) to drive branching calc() expressions. 0 = default.\n\nDefault: `0`\n\n(advanced token)",
-      "syntax": "<integer>"
-    },
     {
       "name": "--sf-leading-normal",
       "description": "Normal line height (~1.5). Default for body text.\n\nDefault: `1.5`",
@@ -3211,11 +3186,6 @@
       "description": "Per-item delay increment for the .sf-stagger utility. One knob retunes the whole staggered sequence; the class multiplies it by each child's index and by --sf-motion-scale.\n\nDefault: `75ms`",
       "syntax": "*"
     },
-    {
-      "name": "--sf-state-pending-opacity",
-      "description": "Opacity for pending / loading state elements.\n\nDefault: `0.7`",
-      "syntax": "*"
-    },
     {
       "name": "--sf-sticky-offset",
       "description": "top offset for position: sticky elements, accounting for the header height.\n\nDefault: `clamp( var(--sf-sticky-offset-mobile), calc((var(--sf-sticky-offset-desktop) - var(--sf-sticky-offset-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-sticky-offset-mobile)), var(--sf-sticky-offset-desktop))`",
diff --git a/docs/api-audit-checklist.md b/docs/api-audit-checklist.md
new file mode 100644
index 00000000..9d20d159
--- /dev/null
+++ b/docs/api-audit-checklist.md
@@ -0,0 +1,367 @@
+# SLASHED — checklista audytu API (tokeny + klasy)
+
+> Robocza checklista do ręcznego przeglądu powierzchni API frameworka.
+> Źródło: `docs/api-index.json` (1070 elementów — 747 tokenów + 323 klasy).
+> Podział na 3 grupy: **fundament** / **przydatne-opcjonalne** / **niszowe**.
+
+## Jak odznaczać
+
+Każda pozycja ma checkbox. Proponowana konwencja (dopisz kod po pozycji):
+
+- `- [x]` **bez dopisku** → **ZOSTAJE** (świadomie zatwierdzone)
+- `- [x] … — USUŃ` → kandydat do usunięcia
+- `- [x] … — OGRANICZ` → zostaje, ale okrojone (mniej wariantów / do `full` / PUBLIC-ADVANCED)
+- `- [ ]` → jeszcze nierozpatrzone
+
+Duże jednorodne rodziny (np. 27-stopniowe palety, aliasy typografii) są zgrupowane
+w jeden checkbox — nie ma sensu klikać 162 razy. Tam, gdzie decyzja jest per-element
+(klasy, komponenty, warianty), pozycje są rozpisane pojedynczo.
+
+Legenda kolumny „bundle": `opt` = jest w `slashed.optimal`, `full` = tylko w `slashed.full` (framework już traktuje jako opt-in).
+
+---
+
+# GRUPA 1 — Fundament (bezdyskusyjny)
+
+Bez tego framework nie istnieje. Domyślnie wszystko `ZOSTAJE`; checkbox = potwierdzenie.
+
+## 1A. Kolory — palety (grupowo)
+
+- [ ] `--sf-primary-*` — rampa primary (27 stopni) `opt`
+- [ ] `--sf-secondary-*` — rampa secondary (27) `opt`
+- [ ] `--sf-tertiary-*` — rampa tertiary (27) `opt`
+- [ ] `--sf-action-*` — rampa action (27) `opt`
+- [ ] `--sf-neutral-*` — rampa neutral (27) `opt`
+- [ ] `--sf-base-*` — rampa base (27) `opt`
+
+## 1B. Kolory — semantyka źródłowa (grupowo)
+
+- [ ] BRAND COLORS source (`*-source-light`, animatable) — 6 tok. `opt`
+- [ ] DARK SOURCE TOKENS (`*-dark`, animatable) — 21 tok. `opt`
+- [ ] STATUS COLORS source (`success/warning/danger/info`-source) — 4 tok. `opt`
+- [ ] Status triplets (bg/fg/border dla 4 statusów) — 16 tok. `opt`
+- [ ] Text-on-color (`--sf-on-*`) — 12 tok. `opt`
+- [ ] Resolved color tokens + Color scheme — 2 tok. `opt`
+
+## 1C. Powierzchnie, tekst, obramowania
+
+- [ ] Surfaces (`--sf-color-surface*`) — 5 tok. `opt`
+- [ ] Text (`--sf-color-text*`) — 7 tok. `opt`
+- [ ] Borders (`--sf-color-border*`) — 4 tok. `opt`
+- [ ] Border widths (`--sf-border-width-*`) — 6 tok. `opt`
+- [ ] Border shorthands — 3 tok. `opt`
+- [ ] Border alpha + Border style — 3 tok. `opt`
+- [ ] Divider (`--sf-divider-*`) — 4 tok. `opt`
+
+## 1D. Typografia (grupowo)
+
+- [ ] Font families (`--sf-font-*`) — 10 tok. (3 PUBLIC-ADVANCED) `opt`
+- [ ] Font sizes (`--sf-text-2xs … 4xl` skala) — 12 tok. `opt`
+- [ ] Font weights (`--sf-font-weight-*`) — 11 tok. `opt`
+- [ ] Line heights & letter spacing — 14 tok. `opt`
+- [ ] TYPOGRAPHY ALIASES (`--sf-text-*` role) — 36 tok. `opt`
+- [ ] Per-size typography sub-properties (`--sf-text-{size}-*`) — 36 tok. `opt`
+- [ ] Heading line-length constraints (`--sf-heading-measure-*`) — 6 tok. `opt`
+
+## 1E. Skala / silnik rozmiarów (grupowo)
+
+- [ ] FLUID SCALE ENGINE — 13 tok. (12 PUBLIC-ADVANCED) `opt`
+- [ ] Output token @property registrations (rejestracje space/radius/font/motion) — 56 tok. `opt`
+- [ ] Odstępy `--sf-space-*` (skala 2xs…4xl + none/px/base) — `opt`
+- [ ] Promienie `--sf-radius-*` (skala + full/pill/outer) — `opt`
+- [ ] Semantic gap tokens (`--sf-content-gap` itp.) — 3 tok. `opt`
+- [ ] Section padding — 1 tok. `opt`
+- [ ] UI sizes — 5 tok. `opt`
+- [ ] Icon sizes (`--sf-icon-size-*`) — 6 tok. `opt`
+- [ ] Containers (`--sf-container-*`) — 5 tok. `opt`
+
+## 1F. Stany interaktywne, focus, z-index
+
+- [ ] Interactive states (kolory hover/active) — 6 tok. `opt`
+- [ ] Focus / form colors — 3 tok. (1 PUBLIC-ADVANCED) `opt`
+- [ ] Links + Link alpha (`--sf-link-*`) — 8 tok. `opt`
+- [ ] Selection / Selection & backdrop / mark — 9 tok. `opt`
+- [ ] Z-index (`--sf-z-*`) — 10 tok. `opt`
+- [ ] Scrollbar — 2 tok. `opt`
+
+## 1G. Klasy fundamentu
+
+- [ ] `.sr-only` `opt`
+- [ ] `.sr-only-focusable` `opt`
+- [ ] `.skip-link` `opt`
+- [ ] `.no-motion` `opt`
+- [ ] `.sf-focus-parent` `opt`
+- [ ] `.sf-focus-shadow` `opt`
+- [ ] `.sf-clickable-parent` `opt`
+- [ ] `.sf-clickable-parent__overlay` `opt`
+- [ ] `.sf-theme-dark` `opt`
+- [ ] `.sf-theme-light` `opt`
+- [ ] `.sf-theme-transition` `opt`
+
+---
+
+# GRUPA 2 — Przydatne, ale opcjonalne
+
+Realna wartość; rozważ okrojenie liczby wariantów lub przeniesienie do `full`.
+
+## 2A. Tokeny layoutu i makr (grupowo)
+
+- [ ] Layout tokens (gap/kolumny prymitywów) — 53 tok. `opt`
+- [ ] Macro tokens (prose/scrim/surface presets) — 32 tok. `opt`
+
+## 2B. Tokeny ruchu i efektów (grupowo)
+
+- [ ] Motion & easing — 15 tok. `opt`
+- [ ] Transition shorthands — 10 tok. `opt`
+- [ ] Animation presets — 23 tok. `opt`
+- [ ] Gradients — 10 tok. `opt`
+- [ ] Shadow ramp / strength / glow — 4 tok. `opt`
+- [ ] Blur & opacity + Opacity — 4 tok. `opt`
+- [ ] Aspect ratios — 7 tok. `opt`
+- [ ] Object fit / position — 2 tok. `opt`
+
+## 2C. Layout primitives — klasy (per rodzina)
+
+- [ ] `.sf-stack` (10) `opt`
+- [ ] `.sf-cluster` (11) `opt`
+- [ ] `.sf-grid` (9) `opt`
+- [ ] `.sf-grid-flex` (8) `opt`
+- [ ] `.sf-grid-cols-*` (1,1-2,1-3,2,2-1,3,3-1,4,6 — 9 klas) `opt`
+- [ ] `.sf-section` (9) `opt`
+- [ ] `.sf-section-group` (1) `opt`
+- [ ] `.sf-frame` (8) `opt`
+- [ ] `.sf-icon` (8) `opt`
+- [ ] `.sf-divider` (7) `opt`
+- [ ] `.sf-divide` (2) `opt`
+- [ ] `.sf-gap` (7) `opt`
+- [ ] `.sf-cover` (6) `opt`
+- [ ] `.sf-container` (5) `opt`
+- [ ] `.sf-equal` (5) `opt`
+- [ ] `.sf-header--m` (rodzina `--xs…--xl`, 5) `opt`
+- [ ] `.sf-sidebar` (4) `opt`
+- [ ] `.sf-switcher` (3) `opt`
+- [ ] `.sf-center` (2) `opt`
+- [ ] `.sf-box` (1) `opt`
+- [ ] `.sf-cq` / `.sf-fluid-cq` (container queries — 2) `opt`
+
+## 2D. Macro classes — per element
+
+- [ ] `.sf-surface` + warianty (`--action/danger/info/inverse/neutral/primary/secondary/success/tertiary/warning`, `-bg`) — 11 `opt`
+- [ ] `.sf-prose` `opt`
+- [ ] `.sf-not-prose` `opt`
+- [ ] `.sf-flow` `opt`
+- [ ] `.sf-truncate` `opt`
+- [ ] `.sf-line-clamp-2` `opt`
+- [ ] `.sf-line-clamp-3` `opt`
+- [ ] `.sf-line-clamp-N` `opt`
+- [ ] `.sf-tabular-nums` `opt`
+- [ ] `.sf-text-protect` `opt`
+- [ ] `.sf-aspect` `opt`
+- [ ] `.sf-equal-height` `opt`
+- [ ] `.sf-content-auto` `opt`
+- [ ] `.sf-link--reverse` `opt`
+- [ ] `.sf-link--subtle` `opt`
+- [ ] `.sf-link-external` `opt`
+
+## 2E. State classes (`.sf-is-*`) — per element
+
+> **RESOLVED — ROUND 1 (2026-07-21)** — full audit against internal consumers,
+> configurator exposure (`MiscPanel.svelte`), tier classification
+> (`token-tiers.js`), and `docs/states.md`'s own "Disambiguating the overlaps"
+> section, plus a comparison against Open Props / Pico.css / Bulma /
+> Automatic.css. Result: only 3 classes had zero design defense anywhere
+> (`hidden`, `readonly`, `busy`) — removed. The rest (`active`, `open`,
+> `collapsed`, `expanded`, `danger`, `pending`) had a written, deliberate
+> rationale — kept, pending a stricter pass.
+>
+> **RESOLVED — ROUND 2 (2026-07-21)** — re-ran the survivors through a
+> stricter bar: *documented and intentional* is not the same question as
+> *needed at this stage of a pre-1.0, lean framework*. None of the six
+> cleared "most consumers need this today" — every comparable framework
+> surveyed ships nothing like the `--sf-is-*` custom-property flag
+> mechanism, `.sf-is-expanded` was pure vocabulary duplication of
+> `.sf-is-open`, `.sf-is-danger` had a live bug (only worked on form
+> fields) and contradicted the framework's own component-variant guidance,
+> and `.sf-is-pending` was two lines cheap to hand-roll. All six removed.
+> `.sf-is-pressed`/`.sf-is-current` were swept in too, for consistency —
+> once their inert `--sf-is-*` flag is gone they're either a functional
+> duplicate of `.sf-is-selected` (`pressed`) or a single trivial declaration
+> no more justified than what was just cut (`current`). `.sf-is-invisible`/
+> `.sf-is-visible` were *relocated*, not cut: single-property helpers with
+> no runtime condition of their own, moved to `optional/utilities.css` as
+> `.sf-invisible`/`.sf-visible` (Bulma precedent: visibility is a helper,
+> not a state). Cascading removal: the `--sf-current-font-weight` and
+> `--sf-state-pending-opacity` tokens lost their only consumer and were
+> removed too, along with the 4 now-orphaned `@property` flag registrations.
+
+- [x] `.sf-is-disabled` — ZOSTAJE, scope note added: for elements that can't take native `disabled` (e.g. `<a class="sf-btn">`) `opt`
+- [x] `.sf-is-loading` — ZOSTAJE (no native equivalent; validated by Bulma precedent) `opt`
+- [x] `.sf-is-hidden` — **USUNIĘTO (round 1)** — duplikat `[hidden]` (`core/reset.css` już to hartuje identycznie) ~~`opt`~~
+- [x] `.sf-invisible` — ZOSTAJE, **przeniesione do `optional/utilities.css`** (`docs/roadmap.md` broni jako zaplanowany hak dla „reveal on scroll") `utilities`
+- [x] `.sf-visible` — ZOSTAJE, **przeniesione do `optional/utilities.css`** `utilities`
+- [x] `.sf-is-invalid` — ZOSTAJE (setter tokenów, konsumowany przez `forms.css`) `opt`
+- [x] `.sf-is-valid` — ZOSTAJE `opt`
+- [x] `.sf-is-error` — ZOSTAJE `opt`
+- [x] `.sf-is-success` — ZOSTAJE `opt`
+- [x] `.sf-is-warning` — ZOSTAJE `opt`
+- [x] `.sf-is-info` — ZOSTAJE `opt`
+- [x] `.sf-is-danger` — **USUNIĘTO (round 2)** — identyczna implementacja co `-invalid`/`-error` (nigdy nie działała jako "destructive-action context" poza polem formularza); sprzeczna z `migration.md` ("visual variants belong in your own component CSS") ~~`opt`~~
+- [x] `.sf-is-pending` — **USUNIĘTO (round 2)** — dwie linie taniej do odtworzenia niż do utrzymania; `.sf-is-loading` pokrywa częstszy przypadek ~~`opt`~~
+- [x] `.sf-is-busy` — **USUNIĘTO (round 1)** — pojedyncza deklaracja `cursor: progress`, `[aria-busy]` samo wystarcza ~~`opt`~~
+- [x] `.sf-is-readonly` — **USUNIĘTO (round 1)** — duplikat `:read-only`, błędnie blokował zaznaczanie tekstu ~~`opt`~~
+- [x] `.sf-is-active` — **USUNIĘTO (round 2)** — czysta flaga `calc()`, zero konsumentów, zero odpowiednika w żadnym z 4 zbadanych frameworków ~~`opt`~~
+- [x] `.sf-is-open` — **USUNIĘTO (round 2)** — j.w. ~~`opt`~~
+- [x] `.sf-is-collapsed` — **USUNIĘTO (round 2)** — j.w. ~~`opt`~~
+- [x] `.sf-is-expanded` — **USUNIĘTO (round 2)** — czysty duplikat wygody nazewniczej nad `.sf-is-open` ~~`opt`~~
+- [x] `.sf-is-pressed` — **USUNIĘTO (round 2)** — bez flagi staje się dosłownym duplikatem `.sf-is-selected` (ten sam token tła) ~~`opt`~~
+- [x] `.sf-is-current` — **USUNIĘTO (round 2)** — dla spójności z resztą: trywialna, niepotwierdzona realnym zapotrzebowaniem ~~`opt`~~
+- [x] `.sf-is-selected` — ZOSTAJE `opt`
+- [x] `.sf-is-highlighted` — ZOSTAJE `opt`
+- [x] `.sf-is-empty` — ZOSTAJE (bez zmian tej rundy) `opt`
+- [x] `.sf-is-skeleton` — ZOSTAJE (świadoma decyzja usera — brak natywnego odpowiednika) `opt`
+
+**Bilans końcowy:** 28 → **15** w `states.css` + **2** przeniesione do `utilities.css` (17 łącznie zostaje, 11 usuniętych). Kaskadowo usunięte też: tokeny `--sf-current-font-weight`, `--sf-state-pending-opacity`, i 4 rejestracje `@property` (`--sf-is-active/-current/-pressed/-open`) — wszystkie osierocone przez usunięcie jedynego konsumenta.
+
+## 2F. Motion classes — per element
+
+- [ ] `.sf-fade-in` `opt`
+- [ ] `.sf-fade-out` `opt`
+- [ ] `.sf-scale-up` `opt`
+- [ ] `.sf-scale-down` `opt`
+- [ ] `.sf-slide-in-up` `opt`
+- [ ] `.sf-slide-in-down` `opt`
+- [ ] `.sf-slide-in-left` `opt`
+- [ ] `.sf-slide-in-right` `opt`
+- [ ] `.sf-entrance--*` (fade/fade-up/down/left/right/scale-up — 6) `opt`
+- [ ] `.sf-exit--*` (fade/fade-up/down/left/right/scale-down — 6) `opt`
+
+## 2G. Text-size utilities (klasy) — grupowo
+
+- [ ] `.sf-text-2xs … .sf-text-4xl` (9 klas) `full`
+- [ ] `.sf-h1 … .sf-h6` (heading helpers — 6) `full`
+
+---
+
+# GRUPA 3 — Niszowe / zbędne w ~90% projektów
+
+Framework już trzyma większość poza bundlem `optimal`.
+
+## 3A. Komponenty — tokeny (grupowo)
+
+- [ ] BUTTON TOKENS — 29 tok. (4 PUBLIC-ADVANCED; dużo per-rung knobów) `full`
+- [ ] CARD TOKENS — 14 tok. `full`
+- [ ] FIELD TOKENS — 3 tok. `full`
+
+## 3B. Komponenty — klasy `.sf-btn` (per wariant)
+
+- [ ] `.sf-btn` (baza) `full`
+- [ ] `.sf-btn--primary` `full`
+- [ ] `.sf-btn--secondary` `full`
+- [ ] `.sf-btn--tertiary` `full`
+- [ ] `.sf-btn--action` `full`
+- [ ] `.sf-btn--neutral` `full`
+- [ ] `.sf-btn--base` `full`
+- [ ] `.sf-btn--success` `full`
+- [ ] `.sf-btn--warning` `full`
+- [ ] `.sf-btn--danger` `full`
+- [ ] `.sf-btn--info` `full`
+- [ ] `.sf-btn--outline` `full`
+- [ ] `.sf-btn--soft` `full`
+- [ ] `.sf-btn--gradient` `full`
+- [ ] `.sf-btn--xs` `full`
+- [ ] `.sf-btn--s` `full`
+- [ ] `.sf-btn--l` `full`
+- [ ] `.sf-btn--xl` `full`
+- [ ] `.sf-btn--block` `full`
+- [ ] `.sf-btn--block-cq` `full`
+
+## 3C. Komponenty — klasy `.sf-card` (per element)
+
+- [ ] `.sf-card` (baza) `full`
+- [ ] `.sf-card--bordered` `full`
+- [ ] `.sf-card--elevated` `full`
+- [ ] `.sf-card--interactive` `full`
+- [ ] `.sf-card__header` `full`
+- [ ] `.sf-card__body` `full`
+- [ ] `.sf-card__footer` `full`
+- [ ] `.sf-card__title` `full`
+- [ ] `.sf-card__media` `full`
+- [ ] `.sf-card__avatar` `full`
+
+## 3D. Formularze
+
+- [ ] `.sf-live-validate` (forms) `opt`
+
+## 3E. Layout — prymitywy egzotyczne
+
+- [ ] `.sf-bento` + `--2/--3/--6/--row-compact` (6) `opt`
+- [ ] `.sf-bento-featured` / `-full` / `-tall` / `-wide` (4) `opt`
+- [ ] `.sf-alternate` (zigzag) `opt`
+- [ ] `.sf-imposter` (3) `opt`
+- [ ] `.sf-pancake` `opt`
+- [ ] `.sf-reel` `opt`
+- [ ] `.sf-breakout` `opt`
+- [ ] `.sf-content-grid` `opt`
+- [ ] `.sf-full-bleed` `opt`
+- [ ] `.sf-subgrid` / `.sf-subgrid-rows` (2) `opt`
+- [ ] `.sf-overlay` `opt`
+- [ ] `.sf-bg-layer` `opt`
+
+## 3F. Utilities niszowe
+
+- [ ] `.sf-hover-float` `full`
+- [ ] `.sf-hover-grow` `full`
+- [ ] `.sf-hover-shrink` `full`
+- [ ] `.sf-hover-sink` `full`
+- [ ] `.sf-hover-slide-start` `full`
+- [ ] `.sf-hover-slide-end` `full`
+- [ ] `.sf-sticky` + `--s/--m/--l` (4) `full`
+- [ ] `.sf-marker--primary/secondary/tertiary/action` (4) `full`
+- [ ] `.sf-list-none` `full`
+- [ ] `.sf-selection--alt` `full`
+
+## 3G. Makra niszowe
+
+- [ ] `.sf-scrim` + `--top/--bottom/--full/__content` (5) `opt`
+- [ ] `.sf-overflow-fade` + `--top/bottom/left/right/block/inline` (7) `opt`
+- [ ] `.sf-scroll-shadow` `opt`
+- [ ] `.sf-scroll-snap` `opt`
+- [ ] `.sf-overlap` / `--down` / `-host` (3) `opt`
+- [ ] `.sf-drop-shadow-xs/s/m/l/xl` (5) `opt`
+- [ ] `.sf-text-gradient` `opt`
+- [ ] `.sf-no-tap-highlight` `opt`
+
+## 3H. Motion niszowe
+
+- [ ] `.sf-color-pulse` `opt`
+- [ ] `.sf-stagger` `opt`
+
+## 3I. Tokeny zaawansowane / wewnętrzne (PUBLIC-ADVANCED)
+
+- [ ] LumLocker (`--sf-lumlocker`, `-dark`) — 2 tok. `opt`
+- [ ] Mask scrim (`--sf-mask-scrim-start/end`) — 2 tok. `opt`
+- [ ] Palette ramp lightness anchors (`--sf-palette-shade-l/tint-l`) — 2 tok. `opt`
+- [ ] INTERACTION STATE FLAGS (`--sf-is-active/current/open/pressed`) — 4 tok. `opt`
+- [ ] Scale multipliers (`--sf-*-scale`) — 6 tok. `opt`
+- [ ] Density (`--sf-density`) — 1 tok. `opt`
+- [ ] Shadow glow color — 1 tok. `opt`
+- [ ] Scroll-driven animation range — 4 tok. `opt`
+
+## 3J. Druk (print)
+
+- [ ] Print tokens (`--sf-print-base-size/page-margin/page-size`) — 3 tok. `opt`
+- [ ] `.no-print` `opt`
+- [ ] `.print-only` `opt`
+- [ ] `.print-color-exact` `opt`
+- [ ] `.print-no-color` `opt`
+
+---
+
+## Podsumowanie liczbowe
+
+| Grupa | Tokeny | Klasy |
+|---|---:|---:|
+| 1 — Fundament | ~455 | 11 |
+| 2 — Przydatne-opcjonalne | ~150 | ~235 |
+| 3 — Niszowe | ~140 | ~77 |
+| **Razem** | **747** | **323** |
diff --git a/docs/api-index.json b/docs/api-index.json
index 5a1c4f83..a97e1ddb 100644
--- a/docs/api-index.json
+++ b/docs/api-index.json
@@ -25,30 +25,30 @@
       "optimal"
     ],
     "counts": {
-      "total": 1070,
+      "total": 1053,
       "by_type": {
-        "class": 323,
-        "token": 747
+        "class": 312,
+        "token": 741
       },
       "by_tier": {
         "INTERNAL": 1,
-        "PUBLIC": 1016,
-        "PUBLIC-ADVANCED": 53
+        "PUBLIC": 1003,
+        "PUBLIC-ADVANCED": 49
       },
       "by_role": {
-        "consumption": 489,
-        "knob": 258
+        "consumption": 488,
+        "knob": 253
       },
-      "tokens": 747,
-      "classes": 323,
-      "sf_classes": 287,
-      "is_classes": 28,
+      "tokens": 741,
+      "classes": 312,
+      "sf_classes": 289,
+      "is_classes": 15,
       "unprefixed_classes": 8,
       "by_category": {
         "Accessibility": 8,
         "Component tokens": 46,
         "Components": 30,
-        "Core tokens": 616,
+        "Core tokens": 610,
         "Forms": 1,
         "Layout primitives": 145,
         "Layout tokens": 53,
@@ -56,9 +56,9 @@
         "Macro tokens": 32,
         "Motion / animation": 22,
         "Print": 4,
-        "State classes": 28,
+        "State classes": 15,
         "Theme utilities": 3,
-        "Utilities": 31
+        "Utilities": 33
       }
     },
     "schema": {
@@ -9147,7 +9147,7 @@
       ]
     },
     {
-      "name": "--sf-color-text--secondary",
+      "name": "--sf-color-text--subtle",
       "type": "token",
       "tier": "PUBLIC",
       "role": "consumption",
@@ -9155,7 +9155,7 @@
       "category": "Core tokens",
       "area": "core",
       "group": "Text",
-      "description": "De-emphasised secondary text (captions, labels, supporting copy).",
+      "description": "De-emphasised, lower-emphasis text (captions, labels, supporting copy). Second tier below --sf-color-text; sits between it and --sf-color-text--muted.",
       "value": "light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )",
       "aliasOf": null,
       "registered": false,
@@ -9718,32 +9718,6 @@
         "optimal"
       ]
     },
-    {
-      "name": "--sf-current-font-weight",
-      "type": "token",
-      "tier": "PUBLIC",
-      "role": "consumption",
-      "namespace": "current",
-      "category": "Core tokens",
-      "area": "core",
-      "group": "Font weights",
-      "description": "Inherits the current font-weight from context. Useful as a reset.",
-      "value": "var(--sf-font-weight-bold)",
-      "aliasOf": "--sf-font-weight-bold",
-      "registered": false,
-      "animatable": false,
-      "syntax": null,
-      "inherits": null,
-      "optional": false,
-      "layer": "slashed.tokens",
-      "sourceFiles": [
-        "core/tokens.css"
-      ],
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
     {
       "name": "--sf-density",
       "type": "token",
@@ -13329,58 +13303,6 @@
         "optimal"
       ]
     },
-    {
-      "name": "--sf-is-active",
-      "type": "token",
-      "tier": "PUBLIC-ADVANCED",
-      "role": "knob",
-      "namespace": "is",
-      "category": "Core tokens",
-      "area": "core",
-      "group": "INTERACTION STATE FLAGS",
-      "description": "Integer state flag for the active state. Set to 1 (via JS or .sf-is-active) to drive branching calc() expressions. 0 = default (inactive).",
-      "value": "0",
-      "aliasOf": null,
-      "registered": true,
-      "animatable": true,
-      "syntax": "<integer>",
-      "inherits": true,
-      "optional": false,
-      "layer": "slashed.tokens",
-      "sourceFiles": [
-        "core/tokens.css"
-      ],
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
-    {
-      "name": "--sf-is-current",
-      "type": "token",
-      "tier": "PUBLIC-ADVANCED",
-      "role": "knob",
-      "namespace": "is",
-      "category": "Core tokens",
-      "area": "core",
-      "group": "INTERACTION STATE FLAGS",
-      "description": "Integer state flag for the current/selected state. Set to 1 (via .sf-is-current) to drive branching calc() expressions. 0 = default.",
-      "value": "0",
-      "aliasOf": null,
-      "registered": true,
-      "animatable": true,
-      "syntax": "<integer>",
-      "inherits": true,
-      "optional": false,
-      "layer": "slashed.tokens",
-      "sourceFiles": [
-        "core/tokens.css"
-      ],
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
     {
       "name": "--sf-is-dark",
       "type": "token",
@@ -13407,58 +13329,6 @@
         "optimal"
       ]
     },
-    {
-      "name": "--sf-is-open",
-      "type": "token",
-      "tier": "PUBLIC-ADVANCED",
-      "role": "knob",
-      "namespace": "is",
-      "category": "Core tokens",
-      "area": "core",
-      "group": "INTERACTION STATE FLAGS",
-      "description": "Integer state flag for the open/expanded state. Set to 1 (via .sf-is-open) to drive branching calc() expressions. 0 = default (closed).",
-      "value": "0",
-      "aliasOf": null,
-      "registered": true,
-      "animatable": true,
-      "syntax": "<integer>",
-      "inherits": true,
-      "optional": false,
-      "layer": "slashed.tokens",
-      "sourceFiles": [
-        "core/tokens.css"
-      ],
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
-    {
-      "name": "--sf-is-pressed",
-      "type": "token",
-      "tier": "PUBLIC-ADVANCED",
-      "role": "knob",
-      "namespace": "is",
-      "category": "Core tokens",
-      "area": "core",
-      "group": "INTERACTION STATE FLAGS",
-      "description": "Integer state flag for the pressed state. Set to 1 (via .sf-is-pressed) to drive branching calc() expressions. 0 = default.",
-      "value": "0",
-      "aliasOf": null,
-      "registered": true,
-      "animatable": true,
-      "syntax": "<integer>",
-      "inherits": true,
-      "optional": false,
-      "layer": "slashed.tokens",
-      "sourceFiles": [
-        "core/tokens.css"
-      ],
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
     {
       "name": "--sf-leading-normal",
       "type": "token",
@@ -16761,32 +16631,6 @@
         "optimal"
       ]
     },
-    {
-      "name": "--sf-state-pending-opacity",
-      "type": "token",
-      "tier": "PUBLIC",
-      "role": "knob",
-      "namespace": "state",
-      "category": "Core tokens",
-      "area": "core",
-      "group": "Opacity",
-      "description": "Opacity for pending / loading state elements.",
-      "value": "0.7",
-      "aliasOf": null,
-      "registered": false,
-      "animatable": false,
-      "syntax": null,
-      "inherits": null,
-      "optional": false,
-      "layer": "slashed.tokens",
-      "sourceFiles": [
-        "core/tokens.css"
-      ],
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
     {
       "name": "--sf-sticky-offset",
       "type": "token",
@@ -23748,118 +23592,25 @@
       ]
     },
     {
-      "name": "sf-is-active",
-      "type": "class",
-      "tier": "PUBLIC",
-      "selector": ".sf-is-active",
-      "prefix": "sf-is",
-      "kind": "state",
-      "category": "State classes",
-      "area": "states",
-      "group": "ACTIVE / SELECTED / CURRENT",
-      "description": "Active state — applied to the currently interacted-with element (e.g. pressed button, active menu item). Sets --sf-is-active to 1 for calc() branching.",
-      "isVariant": false,
-      "baseClass": null,
-      "optional": false,
-      "layer": "slashed.states",
-      "sourceFiles": [
-        "core/states.css"
-      ],
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
-    {
-      "name": "sf-is-busy",
-      "type": "class",
-      "tier": "PUBLIC",
-      "selector": ".sf-is-busy",
-      "prefix": "sf-is",
-      "kind": "state",
-      "category": "State classes",
-      "area": "states",
-      "group": "LOADING / ASYNC FEEDBACK",
-      "description": "Busy state — shows a progress cursor to indicate background processing. Does not mask content; use sf-is-loading when content should be hidden during loading.",
-      "isVariant": false,
-      "baseClass": null,
-      "optional": false,
-      "layer": "slashed.states",
-      "sourceFiles": [
-        "core/states.css"
-      ],
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
-    {
-      "name": "sf-is-collapsed",
-      "type": "class",
-      "tier": "PUBLIC",
-      "selector": ".sf-is-collapsed",
-      "prefix": "sf-is",
-      "kind": "state",
-      "category": "State classes",
-      "area": "states",
-      "group": "OPEN / CLOSED",
-      "description": "Collapsed state for disclosure widgets — hides the expandable region. Pair with sf-is-expanded or sf-is-open. Components add transitions.",
-      "isVariant": false,
-      "baseClass": null,
-      "optional": false,
-      "layer": "slashed.states",
-      "sourceFiles": [
-        "core/states.css"
-      ],
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
-    {
-      "name": "sf-is-current",
-      "type": "class",
-      "tier": "PUBLIC",
-      "selector": ".sf-is-current",
-      "prefix": "sf-is",
-      "kind": "state",
-      "category": "State classes",
-      "area": "states",
-      "group": "ACTIVE / SELECTED / CURRENT",
-      "description": "Current/selected state — marks the active page in navigation or the selected item in a list. Sets --sf-is-current to 1 for calc() branching.",
-      "isVariant": false,
-      "baseClass": null,
-      "optional": false,
-      "layer": "slashed.states",
-      "sourceFiles": [
-        "core/states.css"
-      ],
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
-    {
-      "name": "sf-is-danger",
+      "name": "sf-invisible",
       "type": "class",
       "tier": "PUBLIC",
-      "selector": ".sf-is-danger",
-      "prefix": "sf-is",
-      "kind": "state",
-      "category": "State classes",
-      "area": "states",
-      "group": "VALIDATION / FEEDBACK",
-      "description": "Danger status state — applies danger color tokens for destructive actions (e.g. a delete confirmation dialog) and form validation errors.",
+      "selector": ".sf-invisible",
+      "prefix": "sf",
+      "kind": "utility",
+      "category": "Utilities",
+      "area": "utilities",
+      "group": "VISIBILITY HELPERS (.sf-invisible / .sf-visible)",
+      "description": "Visibility helper (optional/utilities.css) — hides the element visually but keeps it in the layout and accessibility tree (visibility: hidden). Not a runtime state: no JS/ARIA condition of its own.",
       "isVariant": false,
       "baseClass": null,
-      "optional": false,
-      "layer": "slashed.states",
+      "optional": true,
+      "layer": "slashed.utilities",
       "sourceFiles": [
-        "core/states.css"
+        "optional/utilities.css"
       ],
       "bundles": [
-        "full",
-        "optimal"
+        "full"
       ]
     },
     {
@@ -23988,53 +23739,7 @@
       "category": "State classes",
       "area": "states",
       "group": "VALIDATION / FEEDBACK",
-      "description": "Error state — alias for sf-is-danger. Applies danger color tokens to indicate a validation failure or system error. Visual styling is identical to sf-is-invalid.",
-      "isVariant": false,
-      "baseClass": null,
-      "optional": false,
-      "layer": "slashed.states",
-      "sourceFiles": [
-        "core/states.css"
-      ],
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
-    {
-      "name": "sf-is-expanded",
-      "type": "class",
-      "tier": "PUBLIC",
-      "selector": ".sf-is-expanded",
-      "prefix": "sf-is",
-      "kind": "state",
-      "category": "State classes",
-      "area": "states",
-      "group": "OPEN / CLOSED",
-      "description": "Expanded state for disclosure widgets — shows the expandable region. Inverse of sf-is-collapsed. Components add transitions.",
-      "isVariant": false,
-      "baseClass": null,
-      "optional": false,
-      "layer": "slashed.states",
-      "sourceFiles": [
-        "core/states.css"
-      ],
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
-    {
-      "name": "sf-is-hidden",
-      "type": "class",
-      "tier": "PUBLIC",
-      "selector": ".sf-is-hidden",
-      "prefix": "sf-is",
-      "kind": "state",
-      "category": "State classes",
-      "area": "states",
-      "group": "VISIBILITY",
-      "description": "Hidden state — removes the element from layout and accessibility tree (display: none !important).",
+      "description": "Error state — general (not form-field-specific) negative feedback. Applies danger color tokens to indicate a validation failure or system error. Visual styling is identical to sf-is-invalid.",
       "isVariant": false,
       "baseClass": null,
       "optional": false,
@@ -24056,7 +23761,7 @@
       "kind": "state",
       "category": "State classes",
       "area": "states",
-      "group": "ACTIVE / SELECTED / CURRENT",
+      "group": "SELECTED / HIGHLIGHTED",
       "description": "Highlighted state — applies a highlight background. Useful for search result highlighting and keyboard-navigated lists.",
       "isVariant": false,
       "baseClass": null,
@@ -24116,29 +23821,6 @@
         "optimal"
       ]
     },
-    {
-      "name": "sf-is-invisible",
-      "type": "class",
-      "tier": "PUBLIC",
-      "selector": ".sf-is-invisible",
-      "prefix": "sf-is",
-      "kind": "state",
-      "category": "State classes",
-      "area": "states",
-      "group": "VISIBILITY",
-      "description": "Invisible state — hides the element visually but keeps it in the layout and accessibility tree (visibility: hidden).",
-      "isVariant": false,
-      "baseClass": null,
-      "optional": false,
-      "layer": "slashed.states",
-      "sourceFiles": [
-        "core/states.css"
-      ],
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
     {
       "name": "sf-is-loading",
       "type": "class",
@@ -24164,98 +23846,6 @@
         "optimal"
       ]
     },
-    {
-      "name": "sf-is-open",
-      "type": "class",
-      "tier": "PUBLIC",
-      "selector": ".sf-is-open",
-      "prefix": "sf-is",
-      "kind": "state",
-      "category": "State classes",
-      "area": "states",
-      "group": "OPEN / CLOSED",
-      "description": "Open/shown state for modals, dropdowns, and drawers — counterpart to sf-is-collapsed/sf-is-hidden. Sets --sf-is-open to 1 for calc() branching.",
-      "isVariant": false,
-      "baseClass": null,
-      "optional": false,
-      "layer": "slashed.states",
-      "sourceFiles": [
-        "core/states.css"
-      ],
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
-    {
-      "name": "sf-is-pending",
-      "type": "class",
-      "tier": "PUBLIC",
-      "selector": ".sf-is-pending",
-      "prefix": "sf-is",
-      "kind": "state",
-      "category": "State classes",
-      "area": "states",
-      "group": "LOADING / ASYNC FEEDBACK",
-      "description": "Pending state for optimistic UI — content remains visible but dimmed while an async request is in flight. Differs from sf-is-loading (which hides content entirely).",
-      "isVariant": false,
-      "baseClass": null,
-      "optional": false,
-      "layer": "slashed.states",
-      "sourceFiles": [
-        "core/states.css"
-      ],
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
-    {
-      "name": "sf-is-pressed",
-      "type": "class",
-      "tier": "PUBLIC",
-      "selector": ".sf-is-pressed",
-      "prefix": "sf-is",
-      "kind": "state",
-      "category": "State classes",
-      "area": "states",
-      "group": "ACTIVE / SELECTED / CURRENT",
-      "description": "Pressed/toggled-on state for toggle buttons. Sets --sf-is-pressed to 1 for calc() branching and signals the selected state to components.",
-      "isVariant": false,
-      "baseClass": null,
-      "optional": false,
-      "layer": "slashed.states",
-      "sourceFiles": [
-        "core/states.css"
-      ],
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
-    {
-      "name": "sf-is-readonly",
-      "type": "class",
-      "tier": "PUBLIC",
-      "selector": ".sf-is-readonly",
-      "prefix": "sf-is",
-      "kind": "state",
-      "category": "State classes",
-      "area": "states",
-      "group": "INTERACTIVITY",
-      "description": "Readonly state — removes pointer events and text selection. Use for fields that display data but cannot be edited.",
-      "isVariant": false,
-      "baseClass": null,
-      "optional": false,
-      "layer": "slashed.states",
-      "sourceFiles": [
-        "core/states.css"
-      ],
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
     {
       "name": "sf-is-selected",
       "type": "class",
@@ -24265,7 +23855,7 @@
       "kind": "state",
       "category": "State classes",
       "area": "states",
-      "group": "ACTIVE / SELECTED / CURRENT",
+      "group": "SELECTED / HIGHLIGHTED",
       "description": "Selected state — marks an item as selected in a list, table row, or grid cell. Visual specifics (background, border) are applied by component styles.",
       "isVariant": false,
       "baseClass": null,
@@ -24348,29 +23938,6 @@
         "optimal"
       ]
     },
-    {
-      "name": "sf-is-visible",
-      "type": "class",
-      "tier": "PUBLIC",
-      "selector": ".sf-is-visible",
-      "prefix": "sf-is",
-      "kind": "state",
-      "category": "State classes",
-      "area": "states",
-      "group": "VISIBILITY",
-      "description": "Visible state — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent.",
-      "isVariant": false,
-      "baseClass": null,
-      "optional": false,
-      "layer": "slashed.states",
-      "sourceFiles": [
-        "core/states.css"
-      ],
-      "bundles": [
-        "full",
-        "optimal"
-      ]
-    },
     {
       "name": "sf-is-warning",
       "type": "class",
@@ -26770,6 +26337,28 @@
         "optimal"
       ]
     },
+    {
+      "name": "sf-visible",
+      "type": "class",
+      "tier": "PUBLIC",
+      "selector": ".sf-visible",
+      "prefix": "sf",
+      "kind": "utility",
+      "category": "Utilities",
+      "area": "utilities",
+      "group": "VISIBILITY HELPERS (.sf-invisible / .sf-visible)",
+      "description": "Visibility helper (optional/utilities.css) — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent.",
+      "isVariant": false,
+      "baseClass": null,
+      "optional": true,
+      "layer": "slashed.utilities",
+      "sourceFiles": [
+        "optional/utilities.css"
+      ],
+      "bundles": [
+        "full"
+      ]
+    },
     {
       "name": "skip-link",
       "type": "class",
diff --git a/docs/api-index.md b/docs/api-index.md
index d919ac74..9a9f0373 100644
--- a/docs/api-index.md
+++ b/docs/api-index.md
@@ -10,15 +10,15 @@ and a short description. The machine-readable companion (with all columns) is
 [registry.json](registry.json); for the tier contract see
 [architecture.md](architecture.md).
 
-**1070 elements** — 747 tokens, 323 classes.
+**1053 elements** — 741 tokens, 312 classes.
 
 | Tier | Count | Meaning |
 |---|---|---|
-| PUBLIC | 1016 | Everyday surface. SemVer-stable. |
-| PUBLIC-ADVANCED | 53 | Same SemVer guarantee; niche/powerful. |
+| PUBLIC | 1003 | Everyday surface. SemVer-stable. |
+| PUBLIC-ADVANCED | 49 | Same SemVer guarantee; niche/powerful. |
 | INTERNAL | 1 | Implementation detail; may change without a major bump. |
 
-## Tokens (747)
+## Tokens (741)
 
 ### Component tokens (46)
 
@@ -71,7 +71,7 @@ and a short description. The machine-readable companion (with all columns) is
 | `--sf-field-padding-inline` | PUBLIC | consumption | field | `var(--sf-space-s)` | Horizontal (inline) inner padding for form field inputs. Reserved for a future .sf-field class — declared but not yet consumed by any shipped rule. |
 | `--sf-field-radius` | 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. Reserved for a future .sf-field class — declared but not yet consumed by any shipped rule. |
 
-### Core tokens (616)
+### Core tokens (610)
 
 | Token | Tier | Role | Namespace | Default | Description |
 |---|---|---|---|---|---|
@@ -360,7 +360,7 @@ and a short description. The machine-readable companion (with all columns) is
 | `--sf-color-text--on-tertiary` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` | Accessible foreground for text placed on tertiary-colored backgrounds. |
 | `--sf-color-text--on-warning` | PUBLIC | consumption | color | `oklch(from var(--sf-color-warning) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` | Accessible foreground for text on warning-colored backgrounds. |
 | `--sf-color-text--placeholder` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.45, calc(l + 0.15), 0.75) c h), oklch(from var(--sf-color-neutral) clamp(0.35, calc(l - 0.1), 0.65) c h) )` | Placeholder text color for inputs and textareas. |
-| `--sf-color-text--secondary` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )` | De-emphasised secondary text (captions, labels, supporting copy). |
+| `--sf-color-text--subtle` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )` | De-emphasised, lower-emphasis text (captions, labels, supporting copy). Second tier below --sf-color-text; sits between it and --sf-color-text--muted. |
 | `--sf-color-warning` | PUBLIC | consumption | color | `light-dark(var(--sf-color-warning-source-light), var(--sf-color-warning-source-dark, oklch(from var(--sf-color-warning-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` | Warning / caution color for non-critical alerts and degraded-state indicators. |
 | `--sf-color-warning-muted` | PUBLIC | consumption | color | `oklch(from var(--sf-color-warning) l c h / 0.3)` | Medium warning fill for icons and caution chips. |
 | `--sf-color-warning-source-dark` | PUBLIC | knob | color | `oklch(0.65 0.153 80)` | Registered <color> dark counterpart of --sf-color-warning. |
@@ -378,7 +378,6 @@ and a short description. The machine-readable companion (with all columns) is
 | `--sf-content-gap` | PUBLIC | consumption | content | `var(--sf-space-s)` | Tight gap within related content (stack, flow, prose). Override globally to retune all tight primitives at once. |
 | `--sf-contrast-bias` | PUBLIC-ADVANCED | knob | contrast | `0` | Global text-contrast nudge. Positive values push derived reading-text colors toward the extremes (darker in light mode, lighter in dark). Default 0 (neutral). |
 | `--sf-contrast-threshold` | PUBLIC-ADVANCED | knob | contrast | `0.6` | OKLCH lightness crossover for auto-contrast on colored surfaces. Colors with L above this get dark text; below get light text. Default 0.6. |
-| `--sf-current-font-weight` | PUBLIC | consumption | current | `var(--sf-font-weight-bold)` | Inherits the current font-weight from context. Useful as a reset. |
 | `--sf-density` | PUBLIC-ADVANCED | knob | density | `1` | Compact ↔ comfortable dial for interactive control geometry (the --sf-size-* rung ladder). Default 1; below 1 packs controls tighter (dashboards, data tables), above 1 loosens them. A deliberate design/user choice, not a viewport response — orthogonal to --sf-space-scale (whitespace) and --sf-section-scale (section rhythm). The --sf-touch-target accessibility floor is independent, so a small value can't shrink native controls below the WCAG target. Like the other global multipliers it is a :root dial (the size ladder is computed at :root and inherits, so nested overrides don't retroactively rescale it). |
 | `--sf-display-l-line-height` | PUBLIC | knob | display | `1` | Line height for large display text (--sf-text-display-l). Very tight to avoid excessive gaps at oversized sizes. |
 | `--sf-display-m-line-height` | PUBLIC | knob | display | `1.05` | Line height for medium display text (--sf-text-display-m). |
@@ -494,11 +493,7 @@ and a short description. The machine-readable companion (with all columns) is
 | `--sf-icon-s` | PUBLIC | knob | icon | `1em` | Small icon size (~16px). Dense UI chrome. |
 | `--sf-icon-xl` | PUBLIC | knob | icon | `3em` | Extra-large icon size (~32px). Feature icons. |
 | `--sf-icon-xs` | PUBLIC | knob | icon | `0.875em` | Extra-small icon size (~12px). Inline indicators. |
-| `--sf-is-active` | PUBLIC-ADVANCED | knob | is | `0` | Integer state flag for the active state. Set to 1 (via JS or .sf-is-active) to drive branching calc() expressions. 0 = default (inactive). |
-| `--sf-is-current` | PUBLIC-ADVANCED | knob | is | `0` | Integer state flag for the current/selected state. Set to 1 (via .sf-is-current) to drive branching calc() expressions. 0 = default. |
 | `--sf-is-dark` | INTERNAL | knob | is | `0` | Mode flag — 0 in light mode, 1 in dark mode. Set automatically by [data-theme='dark'] and prefers-color-scheme. Drives dark-mode formula branches in calc(). |
-| `--sf-is-open` | PUBLIC-ADVANCED | knob | is | `0` | Integer state flag for the open/expanded state. Set to 1 (via .sf-is-open) to drive branching calc() expressions. 0 = default (closed). |
-| `--sf-is-pressed` | PUBLIC-ADVANCED | knob | is | `0` | Integer state flag for the pressed state. Set to 1 (via .sf-is-pressed) to drive branching calc() expressions. 0 = default. |
 | `--sf-leading-normal` | PUBLIC | knob | leading | `1.5` | Normal line height (~1.5). Default for body text. |
 | `--sf-leading-relaxed` | PUBLIC | knob | leading | `1.625` | Relaxed line height (~1.65). Long-form reading text. |
 | `--sf-leading-snug` | PUBLIC | knob | leading | `1.3` | Snug line height (~1.35). Use for sub-headings. |
@@ -598,7 +593,6 @@ and a short description. The machine-readable companion (with all columns) is
 | `--sf-space-xl` | PUBLIC | consumption | space | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) * 1rem)) * var(--sf-space-scale))` | 32px-equivalent spacing. Feature row gaps, generous section padding. |
 | `--sf-space-xs` | PUBLIC | consumption | space | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) * 1rem)) * var(--sf-space-scale))` | 8px-equivalent spacing. Compact list rows, tab padding. |
 | `--sf-stagger-step` | PUBLIC | knob | stagger | `75ms` | Per-item delay increment for the .sf-stagger utility. One knob retunes the whole staggered sequence; the class multiplies it by each child's index and by --sf-motion-scale. |
-| `--sf-state-pending-opacity` | PUBLIC | knob | state | `0.7` | Opacity for pending / loading state elements. |
 | `--sf-sticky-offset` | PUBLIC | consumption | sticky | `clamp( var(--sf-sticky-offset-mobile), calc((var(--sf-sticky-offset-desktop) - var(--sf-sticky-offset-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-sticky-offset-mobile)), var(--sf-sticky-offset-desktop))` | top offset for position: sticky elements, accounting for the header height. |
 | `--sf-sticky-offset-desktop` | PUBLIC | consumption | sticky | `var(--sf-header-height-desktop)` | Sticky offset at desktop breakpoints. |
 | `--sf-sticky-offset-mobile` | PUBLIC | consumption | sticky | `var(--sf-header-height-mobile)` | Sticky offset at mobile breakpoints. |
@@ -787,7 +781,7 @@ and a short description. The machine-readable companion (with all columns) is
 | `--sf-surface-bg-size` | PUBLIC | knob | surface | `cover` | background-size for the .sf-surface-bg image. Default: cover. |
 | `--sf-surface-color` | PUBLIC | consumption | surface | `var(--sf-color-base)` | Input for the generic .sf-surface macro. Set any color (including palette shades); the macro derives background, auto-contrast foreground, and the contextual token set from it. |
 
-## Classes (323)
+## Classes (312)
 
 ### Accessibility (8)
 
@@ -1085,37 +1079,24 @@ and a short description. The machine-readable companion (with all columns) is
 | `.print-no-color` | PUBLIC | print | — | Strips color information in print (print-color-adjust: economy). Defers to the printer's ink-saving mode for backgrounds and non-critical color fills. |
 | `.print-only` | PUBLIC | print | — | Hides the element on screen (display: none) but shows it in @media print. Use for print-only headers, footers, and supplementary content not needed on screen. |
 
-### State classes (28)
+### State classes (15)
 
 | Class | Tier | Kind | Group | Description |
 |---|---|---|---|---|
-| `.sf-is-active` | PUBLIC | state | ACTIVE / SELECTED / CURRENT | Active state — applied to the currently interacted-with element (e.g. pressed button, active menu item). Sets --sf-is-active to 1 for calc() branching. |
-| `.sf-is-busy` | PUBLIC | state | LOADING / ASYNC FEEDBACK | Busy state — shows a progress cursor to indicate background processing. Does not mask content; use sf-is-loading when content should be hidden during loading. |
-| `.sf-is-collapsed` | PUBLIC | state | OPEN / CLOSED | Collapsed state for disclosure widgets — hides the expandable region. Pair with sf-is-expanded or sf-is-open. Components add transitions. |
-| `.sf-is-current` | PUBLIC | state | ACTIVE / SELECTED / CURRENT | Current/selected state — marks the active page in navigation or the selected item in a list. Sets --sf-is-current to 1 for calc() branching. |
-| `.sf-is-danger` | PUBLIC | state | VALIDATION / FEEDBACK | Danger status state — applies danger color tokens for destructive actions (e.g. a delete confirmation dialog) and form validation errors. |
 | `.sf-is-disabled` | PUBLIC | state | INTERACTIVITY | Disabled state — dims the element (--sf-opacity-disabled), removes pointer events, and sets cursor: not-allowed. Inherited by child elements that re-enable pointer events. |
 | `.sf-is-draggable` | PUBLIC | state | DRAG & DROP | Draggable state — shows a grab cursor to indicate the element can be dragged. Apply before a drag interaction begins. |
 | `.sf-is-dragging` | PUBLIC | state | DRAG & DROP | Active drag state — shows a grabbing cursor while the element is being dragged. Apply during the drag event. |
 | `.sf-is-drop-target` | PUBLIC | state | DRAG & DROP | Drop-target state — applies a visual highlight to indicate a valid drag-and-drop destination. Toggle on drag-over events. |
 | `.sf-is-empty` | PUBLIC | state | EMPTY STATE | Empty state — hides the element when it has no child nodes (:empty). Used for dynamic lists or containers that may render empty. |
-| `.sf-is-error` | PUBLIC | state | VALIDATION / FEEDBACK | Error state — alias for sf-is-danger. Applies danger color tokens to indicate a validation failure or system error. Visual styling is identical to sf-is-invalid. |
-| `.sf-is-expanded` | PUBLIC | state | OPEN / CLOSED | Expanded state for disclosure widgets — shows the expandable region. Inverse of sf-is-collapsed. Components add transitions. |
-| `.sf-is-hidden` | PUBLIC | state | VISIBILITY | Hidden state — removes the element from layout and accessibility tree (display: none !important). |
-| `.sf-is-highlighted` | PUBLIC | state | ACTIVE / SELECTED / CURRENT | Highlighted state — applies a highlight background. Useful for search result highlighting and keyboard-navigated lists. |
+| `.sf-is-error` | PUBLIC | state | VALIDATION / FEEDBACK | Error state — general (not form-field-specific) negative feedback. Applies danger color tokens to indicate a validation failure or system error. Visual styling is identical to sf-is-invalid. |
+| `.sf-is-highlighted` | PUBLIC | state | SELECTED / HIGHLIGHTED | Highlighted state — applies a highlight background. Useful for search result highlighting and keyboard-navigated lists. |
 | `.sf-is-info` | PUBLIC | state | VALIDATION / FEEDBACK | Info status state — applies info color tokens. Use for neutral informational messages and hints. |
 | `.sf-is-invalid` | PUBLIC | state | VALIDATION / FEEDBACK | Invalid state — applies danger color tokens to form fields with validation failures. Identical visual output to sf-is-error; the name signals form-field context. |
-| `.sf-is-invisible` | PUBLIC | state | VISIBILITY | Invisible state — hides the element visually but keeps it in the layout and accessibility tree (visibility: hidden). |
 | `.sf-is-loading` | PUBLIC | state | LOADING / ASYNC FEEDBACK | Loading state — hides the element's text (color: transparent), removes pointer events, and renders a spinner via ::after. Use for buttons and containers awaiting async results. |
-| `.sf-is-open` | PUBLIC | state | OPEN / CLOSED | Open/shown state for modals, dropdowns, and drawers — counterpart to sf-is-collapsed/sf-is-hidden. Sets --sf-is-open to 1 for calc() branching. |
-| `.sf-is-pending` | PUBLIC | state | LOADING / ASYNC FEEDBACK | Pending state for optimistic UI — content remains visible but dimmed while an async request is in flight. Differs from sf-is-loading (which hides content entirely). |
-| `.sf-is-pressed` | PUBLIC | state | ACTIVE / SELECTED / CURRENT | Pressed/toggled-on state for toggle buttons. Sets --sf-is-pressed to 1 for calc() branching and signals the selected state to components. |
-| `.sf-is-readonly` | PUBLIC | state | INTERACTIVITY | Readonly state — removes pointer events and text selection. Use for fields that display data but cannot be edited. |
-| `.sf-is-selected` | PUBLIC | state | ACTIVE / SELECTED / CURRENT | Selected state — marks an item as selected in a list, table row, or grid cell. Visual specifics (background, border) are applied by component styles. |
+| `.sf-is-selected` | PUBLIC | state | SELECTED / HIGHLIGHTED | Selected state — marks an item as selected in a list, table row, or grid cell. Visual specifics (background, border) are applied by component styles. |
 | `.sf-is-skeleton` | PUBLIC | state | LOADING / ASYNC FEEDBACK | Skeleton loading placeholder state. Applies a shimmer animation over the element to indicate that content is loading. Works on both img and non-media elements. |
 | `.sf-is-success` | PUBLIC | state | VALIDATION / FEEDBACK | Success status state — applies success color tokens. Use for confirmation messages, completed form steps, and positive feedback. |
 | `.sf-is-valid` | PUBLIC | state | VALIDATION / FEEDBACK | Valid state — applies success color tokens to form fields that have passed validation. Visual styling is identical to sf-is-success; the name signals form-field context. |
-| `.sf-is-visible` | PUBLIC | state | VISIBILITY | Visible state — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent. |
 | `.sf-is-warning` | PUBLIC | state | VALIDATION / FEEDBACK | Warning status state — applies warning color tokens. Use for cautionary messages and non-critical alerts. |
 
 ### Theme utilities (3)
@@ -1126,7 +1107,7 @@ and a short description. The machine-readable companion (with all columns) is
 | `.sf-theme-light` | PUBLIC | theme | — | Forces light colour scheme on the element and its subtree (class alias of [data-theme="light"]). |
 | `.sf-theme-transition` | PUBLIC | theme | — | Opt-in animated light/dark theme crossfade. Apply to <html> (or a subtree) so color tokens transition smoothly when [data-theme] changes. Duration controlled by --sf-theme-transition-duration. |
 
-### Utilities (31)
+### Utilities (33)
 
 | Class | Tier | Kind | Group | Description |
 |---|---|---|---|---|
@@ -1142,6 +1123,7 @@ and a short description. The machine-readable companion (with all columns) is
 | `.sf-hover-sink` | PUBLIC | utility | HOVER-TRANSFORM UTILITIES (.sf-hover-*) | Hover-triggered transform: translates the element down slightly on hover. |
 | `.sf-hover-slide-end` | PUBLIC | utility | HOVER-TRANSFORM UTILITIES (.sf-hover-*) | Hover-triggered transform: translates the element toward the inline-end on hover. |
 | `.sf-hover-slide-start` | PUBLIC | utility | HOVER-TRANSFORM UTILITIES (.sf-hover-*) | Hover-triggered transform: translates the element toward the inline-start on hover. |
+| `.sf-invisible` | PUBLIC | utility | VISIBILITY HELPERS (.sf-invisible / .sf-visible) | Visibility helper (optional/utilities.css) — hides the element visually but keeps it in the layout and accessibility tree (visibility: hidden). Not a runtime state: no JS/ARIA condition of its own. |
 | `.sf-list-none` | PUBLIC | utility | LIST RESET (.sf-list-none) | Drops marker + inline start-padding in one class, on any <ul>/<ol> (or element with list-style applied). |
 | `.sf-marker--action` | PUBLIC | utility | LIST MARKER COLOUR (.sf-marker--*) | Colours list ::markers with the action colour. |
 | `.sf-marker--primary` | PUBLIC | utility | LIST MARKER COLOUR (.sf-marker--*) | Colours list ::markers with the primary brand colour. |
@@ -1161,4 +1143,5 @@ and a short description. The machine-readable companion (with all columns) is
 | `.sf-text-s` | PUBLIC | utility | TEXT-SIZE UTILITIES (.sf-text-2xs | Applies the s text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class. |
 | `.sf-text-xl` | PUBLIC | utility | TEXT-SIZE UTILITIES (.sf-text-2xs | Applies the xl text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class. |
 | `.sf-text-xs` | PUBLIC | utility | TEXT-SIZE UTILITIES (.sf-text-2xs | Applies the xs text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class. |
+| `.sf-visible` | PUBLIC | utility | VISIBILITY HELPERS (.sf-invisible / .sf-visible) | Visibility helper (optional/utilities.css) — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent. |
 
diff --git a/docs/architecture.md b/docs/architecture.md
index 6db9a1f0..b2573695 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -180,10 +180,14 @@ not carry a broad component library. Every value goes through `var()`. Requires
 `.sf-overflow-fade`, `.sf-no-tap-highlight`. Tokens for these classes
 live in `core/tokens.macros.css`.
 
-**slashed.utilities** — single-purpose helpers. SLASHED ships no
-utility classes in 0.x; the layer slot is reserved for the future.
+**slashed.utilities** — single-purpose helpers. SLASHED is BEM-first and
+ships only a curated subset in 0.x (heading, text-size, hover-transform,
+list-reset, marker-colour, alternate-selection, sticky, and visibility —
+see `optional/utilities.css`'s header comment for the current active set);
+most definitions in the file are staged (commented out) behind that same
+curation call.
 
-**slashed.states** — `.sf-is-*` markers. Exclusive prefix — utilities never use it. `.sf-is-current` exposes `--sf-current-font-weight` (defaults to `--sf-font-weight-bold`) for consumers to override without specificity battles.
+**slashed.states** — `.sf-is-*` markers. Exclusive prefix — utilities never use it (visibility helpers that don't encode a runtime condition, like `.sf-invisible`/`.sf-visible`, live in `slashed.utilities` instead — see [states.md](states.md) § "Prefer native state").
 
 **slashed.themes** — token reassignments only. Lives in `core/themes.css`. Holds `@media (prefers-color-scheme: dark)` and the `[data-theme="light|dark"]` selectors that flip `color-scheme` and `--sf-is-dark`. Sits above `slashed.{states, utilities, components}` so theme overrides cannot be beaten by an equal-specificity component or utility rule. Consumers can extend this layer with `forced-colors` swaps, brand-palette scopes, or any other token-only reassignment (see `optional/customize-example.css`).
 
@@ -202,7 +206,7 @@ utility classes in 0.x; the layer slot is reserved for the future.
 ## Tokens
 
 - Colors: `oklch()` with relative color syntax for derived values; `oklch(from …)` for semantic alpha variants (ghost/subtle/muted) in core; `color-mix(in oklab)` for numeric tints/shades in the optional palette; the optional palette's numeric alpha variants (-a5/-a10/-a30/-a50/-a80) are gated behind `@supports (color: oklch(from red l c h))`
-- `@property` registration for 20 source colours (10 `-source-light` + 10 `-source-dark`, 6 brand + 4 status) and 5 interaction-state integers (`--sf-is-dark`, `--sf-is-active`, `--sf-is-current`, `--sf-is-pressed`, `--sf-is-open`) — enables animation and typed `initial` reset
+- `@property` registration for 20 source colours (10 `-source-light` + 10 `-source-dark`, 6 brand + 4 status) and the `--sf-is-dark` mode-flag integer — enables animation and typed `initial` reset
 - Sizing: `clamp(min, preferred, max)` — no bare viewport units in tokens
 - Aliases: semantic tokens always reference palette tokens via `var()` — never literals
 - Component tokens: always `var(--sf-*)` — never literals
diff --git a/docs/classes.md b/docs/classes.md
index 67de1232..ba5e1ea9 100644
--- a/docs/classes.md
+++ b/docs/classes.md
@@ -3,7 +3,7 @@
 > **Generated** from source by `scripts/gen-class-reference.js` —
 > run `npm run docs:classes` to refresh. Do not edit by hand.
 
-**287 .sf-classes, 28 .sf-is-classes.** Every `.sf-*` layout/macro class and `.sf-is-*` state class.
+**289 .sf-classes, 15 .sf-is-classes.** Every `.sf-*` layout/macro class and `.sf-is-*` state class.
 See [architecture.md](architecture.md) for layer order and naming conventions.
 
 ## Layout primitives (`core/layout.css`)
@@ -218,37 +218,24 @@ See [architecture.md](architecture.md) for layer order and naming conventions.
 
 ## State classes (`core/states.css`)
 
-28 classes.
+15 classes.
 
 | Class |
 |---|
-| `.sf-is-active` |
-| `.sf-is-busy` |
-| `.sf-is-collapsed` |
-| `.sf-is-current` |
-| `.sf-is-danger` |
 | `.sf-is-disabled` |
 | `.sf-is-draggable` |
 | `.sf-is-dragging` |
 | `.sf-is-drop-target` |
 | `.sf-is-empty` |
 | `.sf-is-error` |
-| `.sf-is-expanded` |
-| `.sf-is-hidden` |
 | `.sf-is-highlighted` |
 | `.sf-is-info` |
 | `.sf-is-invalid` |
-| `.sf-is-invisible` |
 | `.sf-is-loading` |
-| `.sf-is-open` |
-| `.sf-is-pending` |
-| `.sf-is-pressed` |
-| `.sf-is-readonly` |
 | `.sf-is-selected` |
 | `.sf-is-skeleton` |
 | `.sf-is-success` |
 | `.sf-is-valid` |
-| `.sf-is-visible` |
 | `.sf-is-warning` |
 
 ## Accessibility (`core/accessibility.css`)
@@ -360,7 +347,7 @@ See [architecture.md](architecture.md) for layer order and naming conventions.
 
 ## Utilities (`optional/utilities.css`)
 
-32 classes.
+34 classes.
 
 | Class |
 |---|
@@ -376,6 +363,7 @@ See [architecture.md](architecture.md) for layer order and naming conventions.
 | `.sf-hover-sink` |
 | `.sf-hover-slide-end` |
 | `.sf-hover-slide-start` |
+| `.sf-invisible` |
 | `.sf-list-none` |
 | `.sf-marker--action` |
 | `.sf-marker--primary` |
@@ -396,4 +384,5 @@ See [architecture.md](architecture.md) for layer order and naming conventions.
 | `.sf-text-s` |
 | `.sf-text-xl` |
 | `.sf-text-xs` |
+| `.sf-visible` |
 
diff --git a/docs/llm-guide.md b/docs/llm-guide.md
index f3d42edd..e2409cb2 100644
--- a/docs/llm-guide.md
+++ b/docs/llm-guide.md
@@ -1,6 +1,6 @@
 # Slashed Framework — LLM Reference Guide
 
-> Version: **0.7.25** · Tokens: **747** · Prefix: `--sf-`
+> Version: **0.7.25** · Tokens: **741** · Prefix: `--sf-`
 
 ---
 
@@ -53,7 +53,7 @@ slashed/
 │   ├── base.css             # HTML typography, links, img/video
 │   ├── layout.css           # Primitive classes: stack, cluster, grid, sidebar…
 │   ├── macros.css           # Recipe classes: prose, surface, flow, scrim…
-│   ├── states.css           # State classes: .sf-is-active, .sf-is-current…
+│   ├── states.css           # State classes: .sf-is-disabled, .sf-is-loading…
 │   ├── accessibility.css    # Focus, skip links, screen-reader utilities
 │   ├── motion.css           # @keyframes for animations + view-transition
 │   └── print.css            # Print styles
@@ -218,7 +218,7 @@ Auto-switch between light and dark modes. These are the tokens you reference in
 ```css
 --sf-color-text             /* Primary body text */
 --sf-color-text--muted      /* Captions, metadata, helper labels */
---sf-color-text--secondary  /* Between muted and primary */
+--sf-color-text--subtle     /* Between muted and primary */
 --sf-color-text--placeholder /* Form field placeholders */
 --sf-color-text--disabled   /* Disabled text */
 --sf-color-text--inverse    /* Light text on dark bg, and vice versa */
@@ -469,9 +469,6 @@ Status families (success/warning/info/danger) have **no numeric scale** — use
 --sf-font-weight-display:     var(--sf-font-weight-bold)      /* hero */
 --sf-font-weight-interactive: var(--sf-font-weight-semibold)  /* buttons, nav */
 --sf-font-weight-strong:      var(--sf-font-weight-bold)      /* <strong> */
-
-/* State token */
---sf-current-font-weight: var(--sf-font-weight-bold)  /* .sf-is-current in nav */
 ```
 
 ### 6.4 Text sizes (fluid, generative)
@@ -1071,30 +1068,18 @@ Ready-made `animation` values — keyframe + duration + easing + fill-mode.
 --sf-caret-color:           var(--sf-color-action)
 --sf-touch-target:          2.75rem            /* 44px — WCAG 2.5.5, fixed independent of --sf-size-* */
 --sf-opacity-disabled:      0.45
---sf-state-pending-opacity: 0.7                  /* async operations */
 --sf-opacity-muted:         0.5
 --sf-blur:                  12px                 /* frosted glass backdrop-filter */
 ```
 
-### 9.9 State flags (PUBLIC-ADVANCED — Style Queries)
-
-Used by `.sf-is-active`, `.sf-is-current`, etc. in `core/states.css`. Allow components to react to ancestor states via CSS Style Queries.
-
-```css
---sf-is-active:  0   /* 1 = active element (.sf-is-active) */
---sf-is-current: 0   /* 1 = current page (.sf-is-current in nav) */
---sf-is-pressed: 0   /* 1 = pressed */
---sf-is-open:    0   /* 1 = open (accordion, dropdown) */
-```
-
-### 9.10 Form field tokens
+### 9.9 Form field tokens
 
 ```css
 --sf-field-required-marker: " *"               /* required field marker */
 --sf-link-external-marker:  " ↗"              /* marker for .sf-link-external */
 
 /* Scoped override hooks — set per-field/form to override global borders/text */
---sf-field-border-color     /* set by validation states (error/success/warning/info/danger); also set natively by :user-invalid/:user-valid within .sf-live-validate (opt-in — see below) */
+--sf-field-border-color     /* set by validation states (error/success/warning/info); also set natively by :user-invalid/:user-valid within .sf-live-validate (opt-in — see below) */
 --sf-field-text-color       /* set by validation states for text color feedback */
 ```
 
diff --git a/docs/macros.md b/docs/macros.md
index c4503c0b..f8874ab2 100644
--- a/docs/macros.md
+++ b/docs/macros.md
@@ -230,7 +230,7 @@ target a specific edge or axis:
 
 Suppresses the WebKit/Android grey tap-highlight overlay on
 interactive elements where it conflicts with the framework's own
-`.sf-is-active` / hover treatment.
+`:active` / hover treatment.
 
 ```html
 <a class="sf-no-tap-highlight" href="…">…</a>
@@ -379,7 +379,7 @@ contract (shown here seeded from a custom foreground/background pair):
     --sf-color-link:              oklch(from var(--my-fg) l calc(c + 0.08) h);
     --sf-color-link--hover:       var(--my-fg);
     --sf-color-link--underline:   oklch(from var(--my-fg) l c h / 0.5);
-    --sf-color-text--secondary:   oklch(from var(--my-fg) l c h / 0.70);
+    --sf-color-text--subtle:      oklch(from var(--my-fg) l c h / 0.70);
     --sf-color-text--placeholder: oklch(from var(--my-fg) l c h / 0.45);
     --sf-color-text--disabled:    oklch(from var(--my-fg) l c h / 0.30);
     --sf-color-border:            oklch(from var(--my-fg) l c h / 0.20);
diff --git a/docs/migration.md b/docs/migration.md
index 9594d29d..895ba496 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -3,6 +3,82 @@
 Mapping concepts from popular CSS frameworks to SLASHED, plus intra-project
 upgrade notes.
 
+## SLASHED 0.7.25 → Unreleased
+
+### `--sf-color-text--secondary` renamed to `--sf-color-text--subtle` (breaking)
+
+The name collided conceptually with the brand-palette `secondary` role
+(`--sf-color-secondary`) and with the token's own `--sf-color-text--on-secondary`
+sibling, reading as "text in the secondary brand colour" when it actually means
+de-emphasised, lower-emphasis body text (captions, labels, supporting copy).
+`--subtle` pairs cleanly with the existing `--muted` tier and carries no
+brand-role ambiguity. Value, derivation, and role are unchanged — only the name
+moved.
+
+**What changed for you:** replace `var(--sf-color-text--secondary)` with
+`var(--sf-color-text--subtle)` anywhere you reference it directly. No
+compatibility alias is provided — see "State-class API reduction" below for
+why: for a pre-1.0 framework, an alias here would have perpetuated the exact
+naming collision that motivated the rename.
+
+### State-class API reduction (breaking)
+
+A full audit of every `.sf-is-*` class held each one to the bar "does a native
+CSS mechanism already cover this, and is there a real consumer" instead of
+"was this class documented." Eleven classes and six tokens didn't clear it and
+are removed; two classes were relocated, not cut.
+
+**Removed — duplicated a native mechanism, no distinct behaviour of their own:**
+
+| Removed class | Native replacement |
+|---|---|
+| `.sf-is-hidden` | `[hidden]` (`core/reset.css` already hardens it to the same `display: none !important`) |
+| `.sf-is-readonly` | `:read-only` (the class also incorrectly blocked text selection a real read-only field should allow) |
+| `.sf-is-busy` | `[aria-busy="true"]` (a single `cursor: progress` with no distinct visual) |
+
+**Removed — speculative `--sf-is-*` custom-property flags with zero consumers**
+anywhere in this codebase or in any of the comparable frameworks surveyed
+(Open Props, Pico.css, Bulma, Automatic.css ship nothing equivalent):
+`.sf-is-active`, `.sf-is-open`, `.sf-is-collapsed`, `.sf-is-expanded`,
+`.sf-is-pressed`, `.sf-is-current`. Style off the ARIA state you already need
+to set for accessibility instead: `[aria-current]`, `[aria-expanded]`,
+`[aria-selected]`, `[aria-pressed]`.
+
+**Removed — for other reasons:**
+- `.sf-is-danger` — identical implementation to `.sf-is-invalid`/`.sf-is-error`
+  (both only ever wrote `--sf-field-*`), so it never actually worked as the
+  "destructive-action button" case its own docs described, and visual variants
+  belong in your own component CSS per this same guide's "component/modifier
+  framework" section below.
+- `.sf-is-pending` — two lines (`opacity`, `cursor: progress`) cheap to
+  hand-roll, with `.sf-is-loading` already covering the common "mask with a
+  spinner" case.
+
+**Relocated, not cut** — single-property helpers with no runtime condition of
+their own (unlike `.sf-is-selected`, which paints something), matching
+Bulma's precedent of treating visibility as a helper, not a state:
+
+| Old name | New name | New location |
+|---|---|---|
+| `.sf-is-invisible` | `.sf-invisible` | `optional/utilities.css` |
+| `.sf-is-visible` | `.sf-visible` | `optional/utilities.css` |
+
+**Tokens removed as a consequence** — each lost its only consumer:
+`--sf-current-font-weight` (`.sf-is-current`'s font-weight hook),
+`--sf-state-pending-opacity` (`.sf-is-pending`'s dimming), and the
+`--sf-is-active`/`--sf-is-current`/`--sf-is-pressed`/`--sf-is-open`
+`@property` registrations (the removed flag mechanism above).
+
+**What changed for you:** if you toggle any of the eleven removed classes from
+your own JS, they're now inert — no CSS reacts to them. Swap to the native
+replacement in the first table, or to the matching ARIA attribute for the
+speculative-flag group, or hand-roll the one-line effect yourself for
+`.sf-is-danger`/`.sf-is-pending`. If you use `.sf-is-invisible`/`.sf-is-visible`,
+rename the class in your markup to `.sf-invisible`/`.sf-visible` and make sure
+you're on a bundle that includes `optional/utilities.css` (the `full` bundle,
+or your own custom build — the `optimal` bundle does not include it). Full
+rationale for every class: [states.md § "Prefer native state"](states.md).
+
 ## SLASHED 0.7.8 → 0.8.0
 
 ### `.sf-btn` size scale honoured on touch; blanket 44px floor no longer applies to buttons (breaking)
diff --git a/docs/ref-allowlist.json b/docs/ref-allowlist.json
index bfbc226d..03d148c5 100644
--- a/docs/ref-allowlist.json
+++ b/docs/ref-allowlist.json
@@ -25,5 +25,38 @@
     "sf-alert": "Example of a component SLASHED deliberately does NOT ship.",
     "sf-avatar": "Example of a component SLASHED deliberately does NOT ship.",
     "sf-modal": "Example of a component SLASHED deliberately does NOT ship."
+  },
+  "docs/states.md": {
+    "sf-is-hidden": "Removed — duplicated [hidden] (core/reset.css already hardens it identically). Named in the 'Prefer native state' section as the precedent for the guidance.",
+    "sf-is-readonly": "Removed — duplicated :read-only and incorrectly blocked text selection. Named in the 'Prefer native state' section as a removed example.",
+    "sf-is-busy": "Removed — a single cursor:progress declaration with no distinct visual; [aria-busy=\"true\"] alone covers it. Named in the 'Prefer native state' section as a removed example.",
+    "sf-is-active": "Removed — speculative --sf-is-* custom-property flag with zero consumers. Named in the 'Prefer native state' section's removal rationale.",
+    "sf-is-open": "Removed — same speculative-flag rationale as sf-is-active. Named in the 'Prefer native state' section's removal rationale.",
+    "sf-is-collapsed": "Removed — same speculative-flag rationale as sf-is-active. Named in the 'Prefer native state' section's removal rationale.",
+    "sf-is-expanded": "Removed — pure vocabulary duplicate of sf-is-open. Named in the 'Prefer native state' section's removal rationale.",
+    "sf-is-pressed": "Removed — became a functional duplicate of sf-is-selected once its inert flag was cut. Named in the 'Prefer native state' section's removal rationale.",
+    "sf-is-current": "Removed — for consistency with the other speculative-flag removals. Named in the 'Prefer native state' section's removal rationale.",
+    "sf-is-danger": "Removed — identical implementation to sf-is-invalid/sf-is-error, never worked outside a form field. Named in the 'Prefer native state' section's removal rationale.",
+    "sf-is-pending": "Removed — two lines cheap to hand-roll, sf-is-loading covers the common case. Named in the 'Prefer native state' section's removal rationale.",
+    "sf-is-invisible": "Renamed and relocated to optional/utilities.css as .sf-invisible. Named in the 'Prefer native state' section's removal rationale (historical name, pre-relocation).",
+    "sf-is-visible": "Renamed and relocated to optional/utilities.css as .sf-visible. Named in the 'Prefer native state' section's removal rationale (historical name, pre-relocation)."
+  },
+  "docs/api-audit-checklist.md": {
+    "sf-is-hidden": "Removed 2026-07-21 (round 1) — recorded in the audit checklist as the resolved verdict for this class.",
+    "sf-is-readonly": "Removed 2026-07-21 (round 1) — recorded in the audit checklist as the resolved verdict for this class.",
+    "sf-is-busy": "Removed 2026-07-21 (round 1) — recorded in the audit checklist as the resolved verdict for this class.",
+    "sf-is-active": "Removed 2026-07-21 (round 2) — recorded in the audit checklist as the resolved verdict for this class.",
+    "sf-is-open": "Removed 2026-07-21 (round 2) — recorded in the audit checklist as the resolved verdict for this class.",
+    "sf-is-collapsed": "Removed 2026-07-21 (round 2) — recorded in the audit checklist as the resolved verdict for this class.",
+    "sf-is-expanded": "Removed 2026-07-21 (round 2) — recorded in the audit checklist as the resolved verdict for this class.",
+    "sf-is-pressed": "Removed 2026-07-21 (round 2) — recorded in the audit checklist as the resolved verdict for this class.",
+    "sf-is-current": "Removed 2026-07-21 (round 2) — recorded in the audit checklist as the resolved verdict for this class.",
+    "sf-is-danger": "Removed 2026-07-21 (round 2) — recorded in the audit checklist as the resolved verdict for this class.",
+    "sf-is-pending": "Removed 2026-07-21 (round 2) — recorded in the audit checklist as the resolved verdict for this class.",
+    "sf-is-invisible": "Historical name — recorded in the audit checklist before its rename/relocation to .sf-invisible.",
+    "sf-is-visible": "Historical name — recorded in the audit checklist before its rename/relocation to .sf-visible.",
+    "--sf-current-font-weight": "Removed 2026-07-21 (round 2) — orphaned when its only consumer (.sf-is-current) was removed. Recorded in the audit checklist.",
+    "--sf-state-pending-opacity": "Removed 2026-07-21 (round 2) — orphaned when its only consumer (.sf-is-pending) was removed. Recorded in the audit checklist.",
+    "--sf-is-active": "Removed 2026-07-21 (round 2) — @property registration for the removed .sf-is-active flag mechanism. Recorded in the audit checklist."
   }
 }
diff --git a/docs/registry.json b/docs/registry.json
index 001e76c0..5a5ad77c 100644
--- a/docs/registry.json
+++ b/docs/registry.json
@@ -19,9 +19,9 @@
       "optional/utilities.css"
     ],
     "counts": {
-      "tokens": 747,
-      "sf_classes": 287,
-      "is_classes": 28
+      "tokens": 741,
+      "sf_classes": 289,
+      "is_classes": 15
     }
   },
   "tokens": [
@@ -375,7 +375,7 @@
     "--sf-color-text--on-tertiary",
     "--sf-color-text--on-warning",
     "--sf-color-text--placeholder",
-    "--sf-color-text--secondary",
+    "--sf-color-text--subtle",
     "--sf-color-warning",
     "--sf-color-warning-muted",
     "--sf-color-warning-source-dark",
@@ -397,7 +397,6 @@
     "--sf-contrast-threshold",
     "--sf-cover-min-height",
     "--sf-cover-padding",
-    "--sf-current-font-weight",
     "--sf-density",
     "--sf-display-l-line-height",
     "--sf-display-m-line-height",
@@ -536,11 +535,7 @@
     "--sf-icon-xl",
     "--sf-icon-xs",
     "--sf-imposter-margin",
-    "--sf-is-active",
-    "--sf-is-current",
     "--sf-is-dark",
-    "--sf-is-open",
-    "--sf-is-pressed",
     "--sf-leading-normal",
     "--sf-leading-relaxed",
     "--sf-leading-snug",
@@ -668,7 +663,6 @@
     "--sf-space-xs",
     "--sf-stack-gap",
     "--sf-stagger-step",
-    "--sf-state-pending-opacity",
     "--sf-sticky-offset",
     "--sf-sticky-offset-desktop",
     "--sf-sticky-offset-mobile",
@@ -957,6 +951,7 @@
     "sf-imposter",
     "sf-imposter--contain",
     "sf-imposter--fixed",
+    "sf-invisible",
     "sf-line-clamp-2",
     "sf-line-clamp-3",
     "sf-line-clamp-N",
@@ -1060,36 +1055,24 @@
     "sf-theme-dark",
     "sf-theme-light",
     "sf-theme-transition",
-    "sf-truncate"
+    "sf-truncate",
+    "sf-visible"
   ],
   "is_classes": [
-    "sf-is-active",
-    "sf-is-busy",
-    "sf-is-collapsed",
-    "sf-is-current",
-    "sf-is-danger",
     "sf-is-disabled",
     "sf-is-draggable",
     "sf-is-dragging",
     "sf-is-drop-target",
     "sf-is-empty",
     "sf-is-error",
-    "sf-is-expanded",
-    "sf-is-hidden",
     "sf-is-highlighted",
     "sf-is-info",
     "sf-is-invalid",
-    "sf-is-invisible",
     "sf-is-loading",
-    "sf-is-open",
-    "sf-is-pending",
-    "sf-is-pressed",
-    "sf-is-readonly",
     "sf-is-selected",
     "sf-is-skeleton",
     "sf-is-success",
     "sf-is-valid",
-    "sf-is-visible",
     "sf-is-warning"
   ],
   "unprefixed_classes": [
diff --git a/docs/roadmap.md b/docs/roadmap.md
index b855b8b7..e1837ef0 100644
--- a/docs/roadmap.md
+++ b/docs/roadmap.md
@@ -224,7 +224,7 @@ not backlog. They should not be re-proposed or picked up by accident:
 - **Runtime JavaScript in the framework core** — the core ships zero runtime JS and
   will keep doing so. Viewport-triggered "reveal on scroll / on-visible" behaviour
   that depends on an `IntersectionObserver` is out of scope for `core/`; the supported
-  surfaces are the CSS-only `.sf-is-visible` state hook and scroll-timeline `view()`
+  surfaces are the CSS-only `.sf-visible` utility hook (optional/utilities.css) and scroll-timeline `view()`
   entrance animations. Any observer-driven JS belongs to host/integration layers,
   never to the framework bundle.
 - **A consumer-facing preprocessor layer (mixins / functions)** — SLASHED is authored
diff --git a/docs/states.md b/docs/states.md
index 3ab4ede1..3c96c5f5 100644
--- a/docs/states.md
+++ b/docs/states.md
@@ -8,6 +8,72 @@ visuals on top.
 
 All states are exercised live in the [demo](/demo/).
 
+## Prefer native state
+
+A `.sf-is-*` class is a fallback for when the platform has no state mechanism
+of its own — not the default reach. Before reaching for one, check whether a
+native pseudo-class, attribute, or ARIA state already gets you there:
+
+| Instead of | Reach for | Why |
+|---|---|---|
+| a hidden-state class | `[hidden]` | native, and already hardened to `display: none !important` in `core/reset.css` |
+| a disabled-state class | `:disabled` / `[disabled]` | native on every real form control and `<button>` |
+| a readonly-state class | `:read-only` | native on real inputs/textareas; doesn't block text selection the way a hand-rolled `pointer-events: none` does |
+| an empty-state class | `:empty` | native, zero JS, reacts to DOM content automatically |
+| a validation-state class | `:user-invalid` / `:invalid` / `[aria-invalid]` | native for client-side constraint validation (see [forms.css](/optional/forms.css) and `.sf-live-validate`) |
+| a busy-cursor-only class | `[aria-busy="true"]` | you set this for assistive tech anyway, so it's sufficient as the sole hook — no parallel class needed |
+| a selected class | `[aria-selected]` (custom widgets) | required for accessible custom widgets regardless of framework, so styling off the attribute you must already set avoids toggling two things for one state |
+
+`.sf-is-*` earns its place only when **no native mechanism reaches the same
+condition** (`.sf-is-loading`'s spinner, `.sf-is-skeleton`'s shimmer, the
+drag-and-drop trio — CSS has no native drag state at all) or when the class
+is a **token setter** consumed elsewhere in the framework (the validation
+family writing `--sf-field-*`, read by `optional/forms.css`). Where a class
+and a native attribute can coexist for different purposes — e.g. an element
+carrying both `.sf-is-invalid` (a manual/server-side override) and
+`:user-invalid` (the browser's own opinion) — cascade layer order lets the
+manual class win regardless of specificity; see "Wiring validation text
+colour" below.
+
+Two rounds of removals came out of holding every class to this bar:
+
+- `.sf-is-hidden`, `.sf-is-readonly`, and `.sf-is-busy` duplicated a native
+  mechanism outright: `.sf-is-hidden` duplicated `[hidden]` byte-for-byte
+  (both this framework's own `core/reset.css` and the browser already give
+  you that), `.sf-is-readonly` duplicated `:read-only` while also blocking
+  text selection a real read-only field should allow, and `.sf-is-busy` was
+  a single `cursor: progress` with no distinct visual — `[aria-busy="true"]`
+  alone covers the same ground.
+- `.sf-is-active`, `.sf-is-open`, `.sf-is-collapsed`, `.sf-is-expanded`,
+  `.sf-is-pressed`, and `.sf-is-current` only ever set an inheritable
+  `--sf-is-*` custom property for a hypothetical consumer's own `calc()` to
+  branch on — a speculative "might be useful one day" mechanism with zero
+  consumers anywhere in this codebase, its demo, or in any comparable
+  framework surveyed (Open Props, Pico.css, Bulma, Automatic.css ship
+  nothing like it). `.sf-is-danger` was dropped alongside them: identical
+  CSS to `.sf-is-invalid`/`.sf-is-error`, so it never actually worked as the
+  "destructive-action context" its own docs described outside a form field,
+  and `docs/migration.md` already tells you visual variants belong in your
+  own component CSS. `.sf-is-pending` went too — two lines
+  (`opacity`, `cursor: progress`) cheap enough to hand-roll, with
+  `.sf-is-loading` already covering the more common "mask with a spinner"
+  case. `.sf-is-invisible`/`.sf-is-visible` weren't dropped, but *relocated*:
+  they're single-property helpers with no runtime behaviour of their own
+  (unlike `.sf-is-selected`, which paints something), so they moved to
+  `optional/utilities.css` as `.sf-invisible`/`.sf-visible`.
+
+None of this was "these are accidental duplicates" — several had a written,
+deliberate rationale (see the git history of this file for the "shown vs
+hidden surface" vs "disclosure trigger" distinction `.sf-is-open` vs
+`.sf-is-expanded` used to carry, or the optimistic-UI case for
+`.sf-is-pending`). But *intentional* and *needed at this stage* are
+different bars. A pre-1.0, lean CSS framework should carry what most
+consumers need today, not infrastructure justified only by "someone might
+want to build X on top of it" — that's cheap to add back once a real
+consumer pattern actually asks for it, and expensive to carry speculatively
+in the meantime (tests, docs, configurator preview panels, and the
+"why does this exist" question every future contributor has to re-answer).
+
 ## Reference
 
 > **Layer note:** Most state classes live in `core/states.css` (layer
@@ -17,27 +83,17 @@ All states are exercised live in the [demo](/demo/).
 
 | Class | Use when | ARIA / pairing | Layer |
 |---|---|---|---|
-| `.sf-is-hidden` | element removed from layout | `hidden` attr equivalent | states |
-| `.sf-is-invisible` / `.sf-is-visible` | hidden but keeps its box | `visibility` | states |
-| `.sf-is-disabled` | non-interactive, dimmed | `aria-disabled="true"` | states |
-| `.sf-is-readonly` | viewable, not editable | `aria-readonly` | states |
+| `.sf-is-disabled` | non-interactive, dimmed — for elements that can't take the native `disabled` attribute (e.g. `<a class="sf-btn">`) | `aria-disabled="true"` | states |
 | `.sf-is-loading` | content replaced by a spinner | `aria-busy="true"` | states |
-| `.sf-is-pending` | request in flight, content still usable (optimistic UI) | `aria-busy="true"` | states |
-| `.sf-is-busy` | cursor-only busy hint | `aria-busy` | states |
 | `.sf-is-skeleton` | placeholder shimmer | — | states |
-| `.sf-is-active` | generic active item (sets `--sf-is-active`) | — | states |
 | `.sf-is-selected` | selected in a set | `aria-selected` | states |
-| `.sf-is-current` | current page/step in navigation | `aria-current` | states |
-| `.sf-is-pressed` | toggle button in the on state | `aria-pressed="true"` | states |
 | `.sf-is-highlighted` | transient emphasis | — | states |
-| `.sf-is-open` / `.sf-is-collapsed` | a thing is shown vs hidden (modal, drawer) | — | states |
-| `.sf-is-expanded` | disclosure/accordion trigger expanded | `aria-expanded="true"` | states |
 | `.sf-is-valid` / `.sf-is-invalid` | **form-field** validation result | `aria-invalid` | states |
 | `.sf-is-success` / `.sf-is-error` | **general** positive/negative feedback (a save, a step) | `role="status"` / `role="alert"` | states |
 | `.sf-is-warning` / `.sf-is-info` | cautionary / informational feedback | — | states |
-| `.sf-is-danger` | destructive-action context (a delete button) | — | states |
 | `.sf-is-dragging` / `.sf-is-drop-target` / `.sf-is-draggable` | drag & drop | — | states |
 | `.sf-is-empty:empty` | hide when empty | — | states |
+| `.sf-invisible` / `.sf-visible` | hidden but keeps its box | `visibility` | utilities |
 | `.sr-only-focusable` | hidden until focused (skip-link pattern) | — | accessibility |
 | `.no-motion` | kill all animation/transition on this subtree | `prefers-reduced-motion` equivalent | accessibility |
 
@@ -59,22 +115,16 @@ These pairs look similar but signal different intent — pick by **context**:
   widget).
 - **`.sf-is-valid` vs `.sf-is-success`** — same split on the positive side: field
   validation passed vs a general positive outcome.
-- **`.sf-is-danger` vs `.sf-is-error`** — `.sf-is-danger` marks a **destructive-action
-  context** (a delete button, a "this cannot be undone" zone). It is *not* a
-  validation/error result. An error message uses `.sf-is-error`; the delete button
-  that triggered the risky flow uses `.sf-is-danger`.
-- **`.sf-is-open` vs `.sf-is-expanded`** — both set `--sf-is-open: 1`. Use
-  `.sf-is-open`/`.sf-is-collapsed` for *shown vs hidden* surfaces (modal, dropdown,
-  drawer); use `.sf-is-expanded` for a *disclosure trigger* (maps to
-  `aria-expanded` on the button that toggles a panel).
-- **`.sf-is-loading` vs `.sf-is-pending`** — `.sf-is-loading` masks content with a
-  spinner (content not yet available); `.sf-is-pending` keeps content visible and
-  usable while a background request settles (optimistic UI).
+
+For a destructive-action button (delete, "this cannot be undone"), or a
+disclosure trigger's expanded/collapsed state, use your own component
+modifier (`.c-button--danger`) and/or the matching ARIA attribute
+(`aria-expanded`) — see "Prefer native state" above.
 
 ## Consumer responsibility (CSS can't do it for you)
 
 State classes are visual. Always pair them with the matching ARIA attribute so
-assistive tech is informed — e.g. `class="sf-is-expanded" aria-expanded="true"`.
+assistive tech is informed — e.g. `class="sf-is-selected" aria-selected="true"`.
 Live updates (a toast appearing, a validation message) need an ARIA live region
 (`aria-live`, `role="status"`/`"alert"`); CSS cannot announce changes.
 
diff --git a/docs/theming.md b/docs/theming.md
index 0b275a17..a9c46a16 100644
--- a/docs/theming.md
+++ b/docs/theming.md
@@ -30,7 +30,7 @@ dark mode) stay consistent across hues. Hex/hsl inputs are converted internally.
 | You set | Framework derives |
 |---|---|
 | `--sf-color-*-source-light` (6) | dark equivalents, hover/active variants, ghost/subtle/muted alpha variants (core), numeric tints/shades (optional palette), status mixes |
-| `--sf-color-neutral-source-light` | `--sf-color-text`, `--sf-color-text--secondary`, `--sf-color-heading`, borders |
+| `--sf-color-neutral-source-light` | `--sf-color-text`, `--sf-color-text--subtle`, `--sf-color-heading`, borders |
 | `--sf-color-base-source-light` | `--sf-color-bg`, `--sf-color-inset`, `--sf-color-raised`, `--sf-color-overlay`, `--sf-color-inverse` |
 | any brand colour | `--sf-color-text--on-*` (auto black/white for WCAG AA) |
 
diff --git a/docs/token-annotations.json b/docs/token-annotations.json
index 42f3f2ca..c40feac3 100644
--- a/docs/token-annotations.json
+++ b/docs/token-annotations.json
@@ -33,8 +33,7 @@
     "Core tokens | Stroke widths": "SVG stroke-width scale for icons and illustrations.",
     "Core tokens | Shadow": "Base shadow opacity and glow tint. --sf-shadow-strength auto-increases in dark mode to compensate for dark surfaces; --sf-shadow-glow-color sets the glow tint (defaults to primary).",
     "Core tokens | Shadow ramp": "Elevation box-shadow ramp (none, xs–2xl, inner) plus text-shadow and drop-shadow presets. All opacity values scale with --sf-shadow-strength so dark-mode boost is automatic.",
-    "Core tokens | Opacity": "Opacity tokens for specific UI states: --sf-opacity-disabled dims non-interactive elements; --sf-state-pending-opacity dims elements in an async/loading state.",
-    "Core tokens | INTERACTION STATE FLAGS": "Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.",
+    "Core tokens | Opacity": "Opacity tokens for specific UI states: --sf-opacity-disabled dims non-interactive elements.",
     "Core tokens | Text shadows": "Text-shadow and drop-shadow (filter) presets. Drop-shadows respect alpha edges — prefer them over box-shadow for SVGs and cut-out images.",
     "Core tokens | Gradients": "Pre-built gradient shorthands for brand fills and directional fade effects.",
     "Core tokens | Blur & opacity": "Backdrop-filter blur scale and background-opacity tokens.",
@@ -127,7 +126,7 @@
     "--sf-color-surface": "Default component surface color. Alias of --sf-color-base; use --sf-color-raised for an elevated card/background level.",
     "--sf-color-text": "Primary text color. Contrasts against --sf-color-bg for body copy.",
     "--sf-color-heading": "Heading text color. Slightly stronger contrast than body text for visual hierarchy.",
-    "--sf-color-text--secondary": "De-emphasised secondary text (captions, labels, supporting copy).",
+    "--sf-color-text--subtle": "De-emphasised, lower-emphasis text (captions, labels, supporting copy). Second tier below --sf-color-text; sits between it and --sf-color-text--muted.",
     "--sf-color-text--muted": "Muted text for metadata, timestamps, and low-priority annotations.",
     "--sf-color-text--disabled": "Text color for disabled UI elements. Intentionally low contrast.",
     "--sf-color-text--placeholder": "Placeholder text color for inputs and textareas.",
@@ -248,7 +247,6 @@
     "--sf-font-weight-medium": "Medium weight (500). Subtle emphasis without full bold.",
     "--sf-font-weight-normal": "Normal / regular weight (400).",
     "--sf-font-weight-light": "Light weight (300). Use sparingly — check contrast at small sizes.",
-    "--sf-current-font-weight": "Inherits the current font-weight from context. Useful as a reset.",
     "--sf-text-2xs": "Extra-extra-small font size (~11px). Fine print, badges.",
     "--sf-text-xs": "Extra-small font size (~12px). Labels, captions, metadata.",
     "--sf-text-s": "Small font size (~14px). Secondary content, UI annotations.",
@@ -347,7 +345,6 @@
     "--sf-ratio-golden": "1.618:1 golden ratio. Harmonious proportions.",
     "--sf-ratio-portrait": "2:3 portrait aspect ratio.",
     "--sf-opacity-disabled": "Opacity for disabled UI elements (typically 0.4–0.5).",
-    "--sf-state-pending-opacity": "Opacity for pending / loading state elements.",
     "--sf-stack-gap": "Vertical gap between stacked block-level elements in the stack layout.",
     "--sf-cluster-gap": "Gap between wrapped inline items in the cluster layout.",
     "--sf-cluster-align": "Vertical alignment of cluster items (align-items value).",
@@ -790,11 +787,7 @@
     "--sf-optical-sizing": "CSS font-optical-sizing value. 'auto' lets the browser optimize letterforms for the rendered size. Set 'none' to disable optical sizing.",
     "--sf-font-weight-interactive": "Font weight for interactive role text — buttons, badges, and navigation labels. Defaults to semibold.",
     "--sf-font-weight-strong": "Font weight for strong/emphasis inline role. Defaults to bold.",
-    "--sf-is-active": "Integer state flag for the active state. Set to 1 (via JS or .sf-is-active) to drive branching calc() expressions. 0 = default (inactive).",
-    "--sf-is-current": "Integer state flag for the current/selected state. Set to 1 (via .sf-is-current) to drive branching calc() expressions. 0 = default.",
     "--sf-is-dark": "Mode flag — 0 in light mode, 1 in dark mode. Set automatically by [data-theme='dark'] and prefers-color-scheme. Drives dark-mode formula branches in calc().",
-    "--sf-is-open": "Integer state flag for the open/expanded state. Set to 1 (via .sf-is-open) to drive branching calc() expressions. 0 = default (closed).",
-    "--sf-is-pressed": "Integer state flag for the pressed state. Set to 1 (via .sf-is-pressed) to drive branching calc() expressions. 0 = default.",
     "--sf-lumlocker": "OKLCH lightness lock value for light mode. When :root has [data-lumlocker], the 4 brand colors (primary, secondary, tertiary, action) are remapped to this L so their contrast remains constant as hues shift. Dark mode uses --sf-lumlocker-dark.",
     "--sf-lumlocker-dark": "OKLCH lightness lock value for dark mode under [data-lumlocker]. Defaults to clamp(0.5, calc(1.18 - var(--sf-lumlocker)), 0.92) — the mirror of the light L around the light/dark background midpoint — so the lock keeps equivalent contrast against the surface in both themes. Set explicitly to break the mirror.",
     "--sf-mask-scrim-start": "Start stop for edge-fade mask gradients on scroll reels / overflow containers. Use in mask-image: linear-gradient(..., transparent var(--sf-mask-scrim-start)) to fade content near the leading edge.",
@@ -1097,32 +1090,21 @@
     "sf-text-4xl": "Applies the 4xl text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.",
     "sf-text-protect": "Wraps text in a translucent dark gradient overlay to ensure legibility when placed over a light or variable background image.",
     "sf-truncate": "Single-line text overflow with ellipsis. Equivalent to the classic text-overflow: ellipsis trio (white-space nowrap, overflow hidden, text-overflow ellipsis).",
-    "sf-is-active": "Active state — applied to the currently interacted-with element (e.g. pressed button, active menu item). Sets --sf-is-active to 1 for calc() branching.",
-    "sf-is-busy": "Busy state — shows a progress cursor to indicate background processing. Does not mask content; use sf-is-loading when content should be hidden during loading.",
-    "sf-is-collapsed": "Collapsed state for disclosure widgets — hides the expandable region. Pair with sf-is-expanded or sf-is-open. Components add transitions.",
-    "sf-is-current": "Current/selected state — marks the active page in navigation or the selected item in a list. Sets --sf-is-current to 1 for calc() branching.",
-    "sf-is-danger": "Danger status state — applies danger color tokens for destructive actions (e.g. a delete confirmation dialog) and form validation errors.",
     "sf-is-disabled": "Disabled state — dims the element (--sf-opacity-disabled), removes pointer events, and sets cursor: not-allowed. Inherited by child elements that re-enable pointer events.",
     "sf-is-draggable": "Draggable state — shows a grab cursor to indicate the element can be dragged. Apply before a drag interaction begins.",
     "sf-is-dragging": "Active drag state — shows a grabbing cursor while the element is being dragged. Apply during the drag event.",
     "sf-is-drop-target": "Drop-target state — applies a visual highlight to indicate a valid drag-and-drop destination. Toggle on drag-over events.",
     "sf-is-empty": "Empty state — hides the element when it has no child nodes (:empty). Used for dynamic lists or containers that may render empty.",
-    "sf-is-error": "Error state — alias for sf-is-danger. Applies danger color tokens to indicate a validation failure or system error. Visual styling is identical to sf-is-invalid.",
-    "sf-is-expanded": "Expanded state for disclosure widgets — shows the expandable region. Inverse of sf-is-collapsed. Components add transitions.",
-    "sf-is-hidden": "Hidden state — removes the element from layout and accessibility tree (display: none !important).",
+    "sf-is-error": "Error state — general (not form-field-specific) negative feedback. Applies danger color tokens to indicate a validation failure or system error. Visual styling is identical to sf-is-invalid.",
     "sf-is-highlighted": "Highlighted state — applies a highlight background. Useful for search result highlighting and keyboard-navigated lists.",
     "sf-is-info": "Info status state — applies info color tokens. Use for neutral informational messages and hints.",
     "sf-is-invalid": "Invalid state — applies danger color tokens to form fields with validation failures. Identical visual output to sf-is-error; the name signals form-field context.",
-    "sf-is-invisible": "Invisible state — hides the element visually but keeps it in the layout and accessibility tree (visibility: hidden).",
+    "sf-invisible": "Visibility helper (optional/utilities.css) — hides the element visually but keeps it in the layout and accessibility tree (visibility: hidden). Not a runtime state: no JS/ARIA condition of its own.",
     "sf-is-loading": "Loading state — hides the element's text (color: transparent), removes pointer events, and renders a spinner via ::after. Use for buttons and containers awaiting async results.",
-    "sf-is-open": "Open/shown state for modals, dropdowns, and drawers — counterpart to sf-is-collapsed/sf-is-hidden. Sets --sf-is-open to 1 for calc() branching.",
     "sf-overlay": "Overlay layout helper — absolutely fills its positioned parent (`position: absolute; inset: 0`) for overlays, backdrops, and media scrims.",
-    "sf-is-pending": "Pending state for optimistic UI — content remains visible but dimmed while an async request is in flight. Differs from sf-is-loading (which hides content entirely).",
-    "sf-is-pressed": "Pressed/toggled-on state for toggle buttons. Sets --sf-is-pressed to 1 for calc() branching and signals the selected state to components.",
-    "sf-is-readonly": "Readonly state — removes pointer events and text selection. Use for fields that display data but cannot be edited.",
     "sf-is-selected": "Selected state — marks an item as selected in a list, table row, or grid cell. Visual specifics (background, border) are applied by component styles.",
     "sf-is-success": "Success status state — applies success color tokens. Use for confirmation messages, completed form steps, and positive feedback.",
-    "sf-is-visible": "Visible state — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent.",
+    "sf-visible": "Visibility helper (optional/utilities.css) — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent.",
     "sf-is-warning": "Warning status state — applies warning color tokens. Use for cautionary messages and non-critical alerts.",
     "sf-color-pulse": "Applies a gentle color-pulse animation to draw attention to a dynamic value change (e.g. a counter updating). Scoped to users who have not requested reduced motion.",
     "sf-entrance--fade": "Scroll-driven entrance: element fades in as it enters the viewport. Animation tied to scroll progress via animation-timeline.",
diff --git a/docs/token-index.json b/docs/token-index.json
index 158ea12e..408dc158 100644
--- a/docs/token-index.json
+++ b/docs/token-index.json
@@ -8,15 +8,15 @@
       "optional/tokens.components.css"
     ],
     "counts": {
-      "tokens": 747,
+      "tokens": 741,
       "by_tier": {
-        "PUBLIC": 693,
-        "PUBLIC-ADVANCED": 53,
+        "PUBLIC": 691,
+        "PUBLIC-ADVANCED": 49,
         "INTERNAL": 1
       },
       "by_role": {
-        "knob": 258,
-        "consumption": 489
+        "knob": 253,
+        "consumption": 488
       }
     }
   },
@@ -2821,7 +2821,7 @@
       ],
       "value": "light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.45, calc(l + 0.15), 0.75) c h), oklch(from var(--sf-color-neutral) clamp(0.35, calc(l - 0.1), 0.65) c h) )"
     },
-    "--sf-color-text--secondary": {
+    "--sf-color-text--subtle": {
       "tier": "PUBLIC",
       "role": "consumption",
       "files": [
@@ -2997,14 +2997,6 @@
       ],
       "value": "var(--sf-section-pad)"
     },
-    "--sf-current-font-weight": {
-      "tier": "PUBLIC",
-      "role": "consumption",
-      "files": [
-        "core/tokens.css"
-      ],
-      "value": "var(--sf-font-weight-bold)"
-    },
     "--sf-density": {
       "tier": "PUBLIC-ADVANCED",
       "role": "knob",
@@ -4109,22 +4101,6 @@
       ],
       "value": "var(--sf-space-m)"
     },
-    "--sf-is-active": {
-      "tier": "PUBLIC-ADVANCED",
-      "role": "knob",
-      "files": [
-        "core/tokens.css"
-      ],
-      "value": "0 (registered)"
-    },
-    "--sf-is-current": {
-      "tier": "PUBLIC-ADVANCED",
-      "role": "knob",
-      "files": [
-        "core/tokens.css"
-      ],
-      "value": "0 (registered)"
-    },
     "--sf-is-dark": {
       "tier": "INTERNAL",
       "role": "knob",
@@ -4133,22 +4109,6 @@
       ],
       "value": "0 (registered)"
     },
-    "--sf-is-open": {
-      "tier": "PUBLIC-ADVANCED",
-      "role": "knob",
-      "files": [
-        "core/tokens.css"
-      ],
-      "value": "0 (registered)"
-    },
-    "--sf-is-pressed": {
-      "tier": "PUBLIC-ADVANCED",
-      "role": "knob",
-      "files": [
-        "core/tokens.css"
-      ],
-      "value": "0 (registered)"
-    },
     "--sf-leading-normal": {
       "tier": "PUBLIC",
       "role": "knob",
@@ -5165,14 +5125,6 @@
       ],
       "value": "75ms"
     },
-    "--sf-state-pending-opacity": {
-      "tier": "PUBLIC",
-      "role": "knob",
-      "files": [
-        "core/tokens.css"
-      ],
-      "value": "0.7"
-    },
     "--sf-sticky-offset": {
       "tier": "PUBLIC",
       "role": "consumption",
diff --git a/docs/token-index.md b/docs/token-index.md
index 41fd919f..d1cb0b18 100644
--- a/docs/token-index.md
+++ b/docs/token-index.md
@@ -8,12 +8,12 @@ A cross-reference of every `--sf-*` custom property by **source file** and
 for the flat name list see [registry.json](registry.json); for the tier
 contract and naming rules see [architecture.md](architecture.md).
 
-**747 tokens** (deduplicated by name across the 4 token source files).
+**741 tokens** (deduplicated by name across the 4 token source files).
 
 | Tier | Count | Meaning |
 |---|---|---|
-| PUBLIC | 693 | Everyday knobs. SemVer-stable. |
-| PUBLIC-ADVANCED | 53 | Same SemVer guarantee; niche/powerful. |
+| PUBLIC | 691 | Everyday knobs. SemVer-stable. |
+| PUBLIC-ADVANCED | 49 | Same SemVer guarantee; niche/powerful. |
 | INTERNAL | 1 | Implementation detail; may change without a major bump. |
 
 Every token also carries a **role** — an orthogonal, SemVer-neutral hint about
@@ -22,8 +22,8 @@ declared value (a value that references `var(--sf-…)` is a derived output):
 
 | Role | Count | Meaning |
 |---|---|---|
-| knob | 258 | Input you **set** to configure the system (a literal primitive: length, number, colour literal, keyword, font stack, easing curve …). |
-| consumption | 489 | Ready-to-use output you **read**; derived from other tokens via `var(--sf-…)` (incl. `light-dark()`/`oklch(from …)`/`color-mix()`). |
+| knob | 253 | Input you **set** to configure the system (a literal primitive: length, number, colour literal, keyword, font stack, easing curve …). |
+| consumption | 488 | Ready-to-use output you **read**; derived from other tokens via `var(--sf-…)` (incl. `light-dark()`/`oklch(from …)`/`color-mix()`). |
 
 ## INTERNAL tokens
 
@@ -43,10 +43,6 @@ declared value (a value that references `var(--sf-…)` is a derived output):
 - `--sf-focus-ring-shadow`
 - `--sf-font-features`
 - `--sf-font-variation`
-- `--sf-is-active`
-- `--sf-is-current`
-- `--sf-is-open`
-- `--sf-is-pressed`
 - `--sf-leading-taper`
 - `--sf-lumlocker`
 - `--sf-lumlocker-dark`
@@ -439,7 +435,7 @@ declared value (a value that references `var(--sf-…)` is a derived output):
 | `--sf-color-text--on-tertiary` | PUBLIC | consumption | Core | `oklch(from var(--sf-color-tertiary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` |
 | `--sf-color-text--on-warning` | PUBLIC | consumption | Core | `oklch(from var(--sf-color-warning) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` |
 | `--sf-color-text--placeholder` | PUBLIC | consumption | Core | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.45, calc(l + 0.15), 0.75) c h), oklch(from var(--sf-color-neutral) clamp(0.35, calc(l - 0.1), 0.65) c h) )` |
-| `--sf-color-text--secondary` | PUBLIC | consumption | Core | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )` |
+| `--sf-color-text--subtle` | PUBLIC | consumption | Core | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )` |
 | `--sf-color-warning` | PUBLIC | consumption | Core | `light-dark(var(--sf-color-warning-source-light), var(--sf-color-warning-source-dark, oklch(from var(--sf-color-warning-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` |
 | `--sf-color-warning-muted` | PUBLIC | consumption | Core | `oklch(from var(--sf-color-warning) l c h / 0.3)` |
 | `--sf-color-warning-source-dark` | PUBLIC | knob | Core | `oklch(0.65 0.153 80) (registered)` |
@@ -461,7 +457,6 @@ declared value (a value that references `var(--sf-…)` is a derived output):
 | `--sf-contrast-threshold` | PUBLIC-ADVANCED | knob | Core | `0.6` |
 | `--sf-cover-min-height` | PUBLIC | knob | Layout | `100dvh` |
 | `--sf-cover-padding` | PUBLIC | consumption | Layout | `var(--sf-section-pad)` |
-| `--sf-current-font-weight` | PUBLIC | consumption | Core | `var(--sf-font-weight-bold)` |
 | `--sf-density` | PUBLIC-ADVANCED | knob | Core | `1` |
 | `--sf-display-l-line-height` | PUBLIC | knob | Core | `1` |
 | `--sf-display-m-line-height` | PUBLIC | knob | Core | `1.05` |
@@ -600,11 +595,7 @@ declared value (a value that references `var(--sf-…)` is a derived output):
 | `--sf-icon-xl` | PUBLIC | knob | Core | `3em` |
 | `--sf-icon-xs` | PUBLIC | knob | Core | `0.875em` |
 | `--sf-imposter-margin` | PUBLIC | consumption | Layout | `var(--sf-space-m)` |
-| `--sf-is-active` | PUBLIC-ADVANCED | knob | Core | `0 (registered)` |
-| `--sf-is-current` | PUBLIC-ADVANCED | knob | Core | `0 (registered)` |
 | `--sf-is-dark` | INTERNAL | knob | Core | `0 (registered)` |
-| `--sf-is-open` | PUBLIC-ADVANCED | knob | Core | `0 (registered)` |
-| `--sf-is-pressed` | PUBLIC-ADVANCED | knob | Core | `0 (registered)` |
 | `--sf-leading-normal` | PUBLIC | knob | Core | `1.5` |
 | `--sf-leading-relaxed` | PUBLIC | knob | Core | `1.625` |
 | `--sf-leading-snug` | PUBLIC | knob | Core | `1.3` |
@@ -732,7 +723,6 @@ declared value (a value that references `var(--sf-…)` is a derived output):
 | `--sf-space-xs` | PUBLIC | consumption | Core | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) * 1rem)) * var(--sf-space-scale))` |
 | `--sf-stack-gap` | PUBLIC | consumption | Layout | `var(--sf-content-gap)` |
 | `--sf-stagger-step` | PUBLIC | knob | Core | `75ms` |
-| `--sf-state-pending-opacity` | PUBLIC | knob | Core | `0.7` |
 | `--sf-sticky-offset` | PUBLIC | consumption | Core | `clamp( var(--sf-sticky-offset-mobile), calc((var(--sf-sticky-offset-desktop) - var(--sf-sticky-offset-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-sticky-offset-mobile)), var(--sf-sticky-offset-desktop))` |
 | `--sf-sticky-offset-desktop` | PUBLIC | consumption | Core | `var(--sf-header-height-desktop)` |
 | `--sf-sticky-offset-mobile` | PUBLIC | consumption | Core | `var(--sf-header-height-mobile)` |
diff --git a/docs/tokens.md b/docs/tokens.md
index 98195c72..2db4cb13 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.
 
-**747 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.
 If a token is defined in multiple files, it is listed once per section — so this
 count can be higher than `docs/registry.json` (which deduplicates by name). See
 [architecture.md](architecture.md) for the PUBLIC / PUBLIC-ADVANCED / INTERNAL
@@ -13,7 +13,7 @@ rebrand workflow.
 
 ## Core tokens (`core/tokens.css`)
 
-616 tokens.
+610 tokens.
 
 | Token | Default |
 |---|---|
@@ -302,7 +302,7 @@ rebrand workflow.
 | `--sf-color-text--on-tertiary` | `oklch(from var(--sf-color-tertiary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` |
 | `--sf-color-text--on-warning` | `oklch(from var(--sf-color-warning) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` |
 | `--sf-color-text--placeholder` | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.45, calc(l + 0.15), 0.75) c h), oklch(from var(--sf-color-neutral) clamp(0.35, calc(l - 0.1), 0.65) c h) )` |
-| `--sf-color-text--secondary` | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )` |
+| `--sf-color-text--subtle` | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )` |
 | `--sf-color-warning` | `light-dark(var(--sf-color-warning-source-light), var(--sf-color-warning-source-dark, oklch(from var(--sf-color-warning-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` |
 | `--sf-color-warning-muted` | `oklch(from var(--sf-color-warning) l c h / 0.3)` |
 | `--sf-color-warning-source-dark` | `oklch(0.65 0.153 80) *(registered)*` |
@@ -320,7 +320,6 @@ rebrand workflow.
 | `--sf-content-gap` | `var(--sf-space-s)` |
 | `--sf-contrast-bias` | `0` |
 | `--sf-contrast-threshold` | `0.6` |
-| `--sf-current-font-weight` | `var(--sf-font-weight-bold)` |
 | `--sf-density` | `1` |
 | `--sf-display-l-line-height` | `1` |
 | `--sf-display-m-line-height` | `1.05` |
@@ -436,11 +435,7 @@ rebrand workflow.
 | `--sf-icon-s` | `1em` |
 | `--sf-icon-xl` | `3em` |
 | `--sf-icon-xs` | `0.875em` |
-| `--sf-is-active` | `0 *(registered)*` |
-| `--sf-is-current` | `0 *(registered)*` |
 | `--sf-is-dark` | `0 *(registered)*` |
-| `--sf-is-open` | `0 *(registered)*` |
-| `--sf-is-pressed` | `0 *(registered)*` |
 | `--sf-leading-normal` | `1.5` |
 | `--sf-leading-relaxed` | `1.625` |
 | `--sf-leading-snug` | `1.3` |
@@ -540,7 +535,6 @@ rebrand workflow.
 | `--sf-space-xl` | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) * 1rem)) * var(--sf-space-scale))` |
 | `--sf-space-xs` | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) * 1rem)) * var(--sf-space-scale))` |
 | `--sf-stagger-step` | `75ms` |
-| `--sf-state-pending-opacity` | `0.7` |
 | `--sf-sticky-offset` | `clamp( var(--sf-sticky-offset-mobile), calc((var(--sf-sticky-offset-desktop) - var(--sf-sticky-offset-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-sticky-offset-mobile)), var(--sf-sticky-offset-desktop))` |
 | `--sf-sticky-offset-desktop` | `var(--sf-header-height-desktop)` |
 | `--sf-sticky-offset-mobile` | `var(--sf-header-height-mobile)` |
diff --git a/index.html b/index.html
index 4ba2a681..1ee84fc3 100644
--- a/index.html
+++ b/index.html
@@ -57,7 +57,7 @@
          text the same color as its gradient background. */
       .site-nav a:not(.btn) {
         text-decoration: none;
-        color:           var(--sf-color-text--secondary);
+        color:           var(--sf-color-text--subtle);
         font-size:       var(--sf-text-s);
         font-weight:     var(--sf-font-weight-medium);
       }
@@ -215,7 +215,7 @@
           padding:            var(--sf-space-2xs) var(--sf-space-s);
           border-radius:      var(--sf-radius-s);
           background:         var(--sf-color-surface);
-          color:              var(--sf-color-text--secondary);
+          color:              var(--sf-color-text--subtle);
           border:             1px solid var(--sf-color-border--subtle);
           box-shadow:         var(--sf-shadow-m);
           font-size:          var(--sf-text-xs);
@@ -245,7 +245,7 @@
       }
       .lede {
         font-size: var(--sf-text-m);
-        color:     var(--sf-color-text--secondary);
+        color:     var(--sf-color-text--subtle);
         max-width: 56ch;
       }
       .pill {
@@ -254,7 +254,7 @@
         border:          1px solid var(--sf-color-border--subtle);
         border-radius:   var(--sf-radius-pill);
         background:      var(--sf-color-surface);
-        color:           var(--sf-color-text--secondary);
+        color:           var(--sf-color-text--subtle);
         font-size:       var(--sf-text-xs);
         font-weight:     var(--sf-font-weight-semibold);
         text-decoration: none;
@@ -308,7 +308,7 @@
         background-image:  var(--sf-gradient-brand);
       }
       .card h3 { font-size: var(--sf-text-m); }
-      .card p  { font-size: var(--sf-text-s); color: var(--sf-color-text--secondary); }
+      .card p  { font-size: var(--sf-text-s); color: var(--sf-color-text--subtle); }
       .card .demo { margin-block-start: auto; }
 
       /* The featured tile spans two rows — center its content as a group
@@ -378,7 +378,7 @@
       .acronym dd {
         margin:    0;
         font-size: var(--sf-text-s);
-        color:     var(--sf-color-text--secondary);
+        color:     var(--sf-color-text--subtle);
       }
 
       /* A quiet tinted band for visual rhythm between the plain-bg
diff --git a/optional/utilities.css b/optional/utilities.css
index e80830f0..81ead818 100644
--- a/optional/utilities.css
+++ b/optional/utilities.css
@@ -5,9 +5,9 @@
 
    Most definitions below are STAGED (commented out) — SLASHED is BEM-first
    by design and ships only a curated subset of utility classes; uncomment
-   a block to activate it. The heading, text-size, hover-transform,
-   list-reset, marker-colour, alternate-selection, and sticky blocks
-   are active. */
+   a block to activate it. The visibility, heading, text-size,
+   hover-transform, list-reset, marker-colour, alternate-selection, and
+   sticky blocks are active. */
 
 @layer slashed.utilities {
 
@@ -25,6 +25,18 @@
   /* .sf-object-center { object-position: center; } */
   /* .sf-object-bottom { object-position: bottom; } */
 
+  /* ============================================================
+   * VISIBILITY HELPERS (.sf-invisible / .sf-visible)
+   * Single-property visibility overrides — not a "state" (core/states.css)
+   * since neither reacts to anything on its own; toggle from JS to hide
+   * something without pulling it out of layout (.sf-invisible), or to
+   * force-show an element that inherited visibility:hidden from a parent
+   * (.sf-visible). This is the hook docs/roadmap.md's "reveal on scroll"
+   * pattern targets — pair with an IntersectionObserver in your own code.
+   * ============================================================ */
+  .sf-invisible { visibility: hidden; }
+  .sf-visible   { visibility: visible; }
+
   /* ============================================================
    * HEADING HELPER CLASSES (.sf-h1 – .sf-h6)
    * Heading-level typography on any element without changing
diff --git a/package-lock.json b/package-lock.json
index aff3cbae..15ebe870 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3171,9 +3171,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.2.0.tgz",
-      "integrity": "sha512-ePWsvanv0DWuDRsW8dnt+R4jQ31SCRCQ7hhNcPXZPsoBZiemuZNYGf7adZdqX2D86j6rvKp3RpCxVTSb8WQlOw==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.0.tgz",
+      "integrity": "sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==",
       "dev": true,
       "funding": [
         {
diff --git a/scripts/check-macro-catalog.js b/scripts/check-macro-catalog.js
index a5c089ba..2699eb7d 100644
--- a/scripts/check-macro-catalog.js
+++ b/scripts/check-macro-catalog.js
@@ -45,9 +45,6 @@ const SKIP_IN_CSS = new Set([
 // defined in the macro CSS sources (they live in layout CSS, documented elsewhere).
 const SKIP_IN_DOCS = new Set([
   '.sf-frame', '.sf-reel', '.sf-bg-layer',
-  // Defined in core/states.css (outside the macro sources above); macros.md
-  // only cross-references it from .sf-no-tap-highlight.
-  '.sf-is-active',
 ]);
 
 // ── 1. Collect classes from CSS ───────────────────────────────────────────────
diff --git a/scripts/token-tiers.js b/scripts/token-tiers.js
index 5bb0beb7..e8b0a289 100644
--- a/scripts/token-tiers.js
+++ b/scripts/token-tiers.js
@@ -61,7 +61,6 @@ const ADVANCED = new Set([
   // whole --xs…xl size ladder to one value. Everyday sizing goes through the
   // proportional --sf-btn-font-scale multiplier and the per-size knobs instead.
   '--sf-btn-font-size', '--sf-btn-padding-block', '--sf-btn-padding-inline', '--sf-btn-min-height',
-  '--sf-is-active', '--sf-is-current', '--sf-is-pressed', '--sf-is-open',
   '--sf-focus-ring-shadow',
   '--sf-print-page-margin', '--sf-print-page-size', '--sf-print-base-size',
 ]);
diff --git a/tests/a11y-fixture.html b/tests/a11y-fixture.html
index db27e7a7..29d00db3 100644
--- a/tests/a11y-fixture.html
+++ b/tests/a11y-fixture.html
@@ -12,7 +12,7 @@
   <header>
     <nav aria-label="Primary">
       <a href="#main">Home</a>
-      <a href="#forms" class="sf-is-current" aria-current="page">Forms</a>
+      <a href="#forms" aria-current="page">Forms</a>
     </nav>
   </header>
 
diff --git a/tests/baseline-modern.json b/tests/baseline-modern.json
index 684e3a37..df092f18 100644
--- a/tests/baseline-modern.json
+++ b/tests/baseline-modern.json
@@ -14,7 +14,7 @@
     "--sf-color-inset": "oklch(from oklch(0.96 0.006 250) calc(l - 0.02) c h)",
     "--sf-color-raised": "oklch(from oklch(0.96 0.006 250) calc(l + 0.04) c h)",
     "--sf-color-text": "light-dark(\n        oklch(from oklch(0.52 0.025 260) clamp(0.05, calc(l - 0.4 - 0), 0.35) c h),\n        oklch(from oklch(0.52 0.025 260)       clamp(0.70, calc(l + 0.25 + 0), 1)    c h)\n      )",
-    "--sf-color-text--secondary": "light-dark(\n        oklch(from oklch(0.52 0.025 260) clamp(0.15, calc(l - 0.25 - 0), 0.45) c h),\n        oklch(from oklch(0.52 0.025 260)       clamp(0.55, calc(l + 0.1 + 0), 0.90) c h)\n      )",
+    "--sf-color-text--subtle": "light-dark(\n        oklch(from oklch(0.52 0.025 260) clamp(0.15, calc(l - 0.25 - 0), 0.45) c h),\n        oklch(from oklch(0.52 0.025 260)       clamp(0.55, calc(l + 0.1 + 0), 0.90) c h)\n      )",
     "--sf-color-heading": "light-dark(\n        oklch(from oklch(0.52 0.025 260) clamp(0.05, calc(l - 0.4 - 0), 0.35) c h),\n        oklch(from oklch(0.52 0.025 260)       clamp(0.70, calc(l + 0.25 + 0), 1)    c h)\n      )",
     "--sf-color-border": "light-dark(\n        oklch(from oklch(0.52 0.025 260) clamp(0.70, calc(l + 0.35), 0.95) 0.005 h),\n        oklch(from oklch(0.52 0.025 260)       clamp(0.25, calc(l - 0.3),  0.55) 0.005 h)\n      )",
     "--sf-color-border--subtle": "light-dark(\n        oklch(from oklch(0.52 0.025 260) clamp(0.75, calc(l + 0.4),  0.97) 0.005 h),\n        oklch(from oklch(0.52 0.025 260)       clamp(0.20, calc(l - 0.38), 0.45) 0.005 h)\n      )",
@@ -45,7 +45,7 @@
     "--sf-color-inset": "oklch(from oklch(0.22 0.003 250) calc(l - 0.02) c h)",
     "--sf-color-raised": "oklch(from oklch(0.22 0.003 250) calc(l + 0.04) c h)",
     "--sf-color-text": "oklch(from oklch(0.69 0.0225 260) clamp(0.70, calc(l + 0.25 + 0), 1)    c h)",
-    "--sf-color-text--secondary": "oklch(from oklch(0.69 0.0225 260) clamp(0.55, calc(l + 0.1 + 0), 0.90) c h)",
+    "--sf-color-text--subtle": "oklch(from oklch(0.69 0.0225 260) clamp(0.55, calc(l + 0.1 + 0), 0.90) c h)",
     "--sf-color-heading": "oklch(from oklch(0.69 0.0225 260) clamp(0.70, calc(l + 0.25 + 0), 1)    c h)",
     "--sf-color-border": "oklch(from oklch(0.69 0.0225 260) clamp(0.25, calc(l - 0.3),  0.55) 0.005 h)",
     "--sf-color-border--subtle": "oklch(from oklch(0.69 0.0225 260) clamp(0.20, calc(l - 0.38), 0.45) 0.005 h)",
diff --git a/tests/behavior.spec.js b/tests/behavior.spec.js
index eb7ad1fc..7ddae1cb 100644
--- a/tests/behavior.spec.js
+++ b/tests/behavior.spec.js
@@ -75,7 +75,7 @@ test.describe('Container queries', () => {
 });
 
 test.describe('State classes', () => {
-  test('.sf-is-hidden / .sf-is-disabled apply their effects', async ({ page }) => {
+  test('.sf-is-disabled applies its effects', async ({ page }) => {
     await page.goto(DEMO_URL);
     const probe = await page.evaluate(() => {
       const mk = (cls, css = '') => {
@@ -87,11 +87,9 @@ test.describe('State classes', () => {
         return getComputedStyle(el);
       };
       return {
-        hidden: mk('sf-is-hidden').display,
         disabledPE: mk('sf-is-disabled').pointerEvents,
       };
     });
-    expect(probe.hidden).toBe('none');
     expect(probe.disabledPE).toBe('none');
   });
 });
diff --git a/tests/demo-visual.spec.js b/tests/demo-visual.spec.js
index f2ae4f92..6960449a 100644
--- a/tests/demo-visual.spec.js
+++ b/tests/demo-visual.spec.js
@@ -291,14 +291,6 @@ test.describe('Motion & States', () => {
     const pe = await getStyle(disabled, 'pointerEvents');
     expect(pe).toBe('none');
   });
-
-
-  test('.sf-is-hidden removes element from layout', async ({ page }) => {
-    await page.goto(DEMO_URL);
-    const hidden = page.locator('#motion .sf-is-hidden').first();
-    const display = await getStyle(hidden, 'display');
-    expect(display).toBe('none');
-  });
 });
 
 
diff --git a/tests/states-full.spec.js b/tests/states-full.spec.js
index 7bdd55ab..ad726a7e 100644
--- a/tests/states-full.spec.js
+++ b/tests/states-full.spec.js
@@ -1,22 +1,26 @@
 // @ts-check
-// Full coverage of every .sf-is-* class in core/states.css.
+// Full coverage of every .sf-is-* class in core/states.css, plus the two
+// visibility helpers (.sf-invisible/.sf-visible, optional/utilities.css)
+// that used to live here before docs/states.md's "Prefer native state" pass.
+import path from 'node:path';
 import { test, expect } from '@playwright/test';
 import { renderWithBundle, NO_TRANSITIONS_STYLE } from './render-helpers.js';
 
-async function setup(page, html) {
+// optional/utilities.css isn't in the optimal bundle (see bundle.config.json),
+// so the two visibility helpers below need the full bundle — same pattern as
+// button.spec.js/card.spec.js's COMPONENTS_BUNDLE.
+const FULL_BUNDLE = path.join(process.cwd(), 'dist', 'slashed.full.css');
+
+async function setup(page, html, options = {}) {
   // Disable transitions so computed property reads are stable (no mid-animation values).
-  await renderWithBundle(page, html, { width: 800, height: 600, extraStyle: NO_TRANSITIONS_STYLE });
+  await renderWithBundle(page, html, { width: 800, height: 600, extraStyle: NO_TRANSITIONS_STYLE, ...options });
 }
 
-// ── Visibility ──────────────────────────────────────────────────
-test('.sf-is-hidden: display:none (important)', async ({ page }) => {
-  await setup(page, `<div id="t" class="sf-is-hidden">x</div>`);
-  const d = await page.locator('#t').evaluate(el => getComputedStyle(el).display);
-  expect(d).toBe('none');
-});
+// ── Visibility (optional/utilities.css) ──────────────────────────
+// No .sf-is-hidden test: the class was removed (duplicated [hidden]).
 
-test('.sf-is-invisible: visibility:hidden (stays in flow)', async ({ page }) => {
-  await setup(page, `<div id="t" class="sf-is-invisible">x</div>`);
+test('.sf-invisible: visibility:hidden (stays in flow)', async ({ page }) => {
+  await setup(page, `<div id="t" class="sf-invisible">x</div>`, { bundle: FULL_BUNDLE });
   const cs = await page.locator('#t').evaluate(el => ({
     vis: getComputedStyle(el).visibility,
     dis: getComputedStyle(el).display,
@@ -25,12 +29,12 @@ test('.sf-is-invisible: visibility:hidden (stays in flow)', async ({ page }) =>
   expect(cs.dis).not.toBe('none');
 });
 
-test('.sf-is-visible: overrides inherited visibility:hidden', async ({ page }) => {
+test('.sf-visible: overrides inherited visibility:hidden', async ({ page }) => {
   await setup(page, `
     <div style="visibility:hidden">
-      <div id="t" class="sf-is-visible">x</div>
+      <div id="t" class="sf-visible">x</div>
     </div>
-  `);
+  `, { bundle: FULL_BUNDLE });
   const vis = await page.locator('#t').evaluate(el => getComputedStyle(el).visibility);
   expect(vis).toBe('visible');
 });
@@ -51,16 +55,7 @@ test('.sf-is-disabled: opacity 0.45, pointer-events none, cursor not-allowed', a
   if (browserName !== 'webkit') expect(cs.us).toBe('none');
 });
 
-test('.sf-is-readonly: pointer-events none, user-select none', async ({ page, browserName }) => {
-  await setup(page, `<div id="t" class="sf-is-readonly">Read only</div>`);
-  const cs = await page.locator('#t').evaluate(el => ({
-    pe: getComputedStyle(el).pointerEvents,
-    us: getComputedStyle(el).userSelect ?? getComputedStyle(el).webkitUserSelect,
-  }));
-  expect(cs.pe).toBe('none');
-  // WebKit requires -webkit-user-select; the framework only sets user-select (no prefix).
-  if (browserName !== 'webkit') expect(cs.us).toBe('none');
-});
+// No .sf-is-readonly test: the class was removed (duplicated :read-only).
 
 // ── Loading / async ─────────────────────────────────────────────
 test('.sf-is-loading: colour transparent, position relative, pointer-events none', async ({ page }) => {
@@ -75,21 +70,8 @@ test('.sf-is-loading: colour transparent, position relative, pointer-events none
   expect(cs.pos).toBe('relative');
 });
 
-test('.sf-is-busy: cursor progress', async ({ page }) => {
-  await setup(page, `<div id="t" class="sf-is-busy">Loading…</div>`);
-  const cursor = await page.locator('#t').evaluate(el => getComputedStyle(el).cursor);
-  expect(cursor).toBe('progress');
-});
-
-test('.sf-is-pending: opacity < 1, cursor progress', async ({ page }) => {
-  await setup(page, `<button id="t" class="sf-is-pending">Save</button>`);
-  const cs = await page.locator('#t').evaluate(el => ({
-    opacity: parseFloat(getComputedStyle(el).opacity),
-    cursor:  getComputedStyle(el).cursor,
-  }));
-  expect(cs.opacity).toBeLessThan(1);
-  expect(cs.cursor).toBe('progress');
-});
+// No .sf-is-busy / .sf-is-pending tests: both classes were removed
+// (no distinct consumer, trivial to hand-roll — see core/states.css).
 
 test('.sf-is-skeleton: transparent text, shimmer gradient, no pointer-events', async ({ page }) => {
   await setup(page, `<div id="t" class="sf-is-skeleton">Placeholder text</div>`);
@@ -103,14 +85,10 @@ test('.sf-is-skeleton: transparent text, shimmer gradient, no pointer-events', a
   expect(cs.pe).toBe('none');
 });
 
-// ── Active / selected ───────────────────────────────────────────
-test('.sf-is-active: sets --sf-is-active CSS variable to 1', async ({ page }) => {
-  await setup(page, `<div id="t" class="sf-is-active">Active</div>`);
-  const v = await page.locator('#t').evaluate(el =>
-    getComputedStyle(el).getPropertyValue('--sf-is-active').trim()
-  );
-  expect(v).toBe('1');
-});
+// ── Selected / highlighted ────────────────────────────────────────
+// No .sf-is-active / .sf-is-current / .sf-is-pressed / .sf-is-open /
+// .sf-is-collapsed tests: all five were removed (speculative --sf-is-*
+// custom-property flags with zero consumers — see core/states.css).
 
 test('.sf-is-selected: has a non-transparent background', async ({ page }) => {
   await setup(page, `<li id="t" class="sf-is-selected">Selected</li>`);
@@ -119,48 +97,15 @@ test('.sf-is-selected: has a non-transparent background', async ({ page }) => {
   expect(bg).not.toBe('transparent');
 });
 
-test('.sf-is-current: bold font-weight (≥ 700)', async ({ page }) => {
-  await setup(page, `<a id="t" href="#" class="sf-is-current">Current</a>`);
-  const fw = await page.locator('#t').evaluate(el =>
-    parseInt(getComputedStyle(el).fontWeight, 10)
-  );
-  expect(fw).toBeGreaterThanOrEqual(700);
-});
-
 test('.sf-is-highlighted: has a non-transparent background', async ({ page }) => {
   await setup(page, `<div id="t" class="sf-is-highlighted">Highlighted</div>`);
   const bg = await page.locator('#t').evaluate(el => getComputedStyle(el).backgroundColor);
   expect(bg).not.toBe('rgba(0, 0, 0, 0)');
 });
 
-test('.sf-is-pressed: sets --sf-is-pressed to 1 and non-transparent background', async ({ page }) => {
-  await setup(page, `<button id="t" class="sf-is-pressed">Toggle</button>`);
-  const cs = await page.locator('#t').evaluate(el => ({
-    flag: getComputedStyle(el).getPropertyValue('--sf-is-pressed').trim(),
-    bg:   getComputedStyle(el).backgroundColor,
-  }));
-  expect(cs.flag).toBe('1');
-  expect(cs.bg).not.toBe('rgba(0, 0, 0, 0)');
-});
-
-// ── Open / collapsed ────────────────────────────────────────────
-test('.sf-is-open: sets --sf-is-open to 1', async ({ page }) => {
-  await setup(page, `<div id="t" class="sf-is-open">open</div>`);
-  const v = await page.locator('#t').evaluate(el =>
-    getComputedStyle(el).getPropertyValue('--sf-is-open').trim()
-  );
-  expect(v).toBe('1');
-});
-
-test('.sf-is-collapsed: sets --sf-is-open to 0', async ({ page }) => {
-  await setup(page, `<div id="t" class="sf-is-collapsed">closed</div>`);
-  const v = await page.locator('#t').evaluate(el =>
-    getComputedStyle(el).getPropertyValue('--sf-is-open').trim()
-  );
-  expect(v).toBe('0');
-});
-
 // ── Validation ──────────────────────────────────────────────────
+// No .sf-is-danger case: removed (identical implementation to
+// .sf-is-invalid/.sf-is-error — see core/states.css).
 for (const [cls, status] of [
   ['sf-is-valid',   'success'],
   ['sf-is-invalid', 'error'],
@@ -168,7 +113,6 @@ for (const [cls, status] of [
   ['sf-is-success', 'success'],
   ['sf-is-error',   'error'],
   ['sf-is-info',    'info'],
-  ['sf-is-danger',  'danger'],
 ]) {
   test(`.${cls}: sets --sf-field-border-color token`, async ({ page }) => {
     await setup(page, `<input id="t" class="${cls}" type="text">`);
diff --git a/tests/tier1-p8-modern.spec.js b/tests/tier1-p8-modern.spec.js
index 705dd90e..7826ca5f 100644
--- a/tests/tier1-p8-modern.spec.js
+++ b/tests/tier1-p8-modern.spec.js
@@ -26,7 +26,7 @@ const TIER1_TOKENS = [
   '--sf-color-success', '--sf-color-warning',
   '--sf-color-info', '--sf-color-danger',
   '--sf-color-bg', '--sf-color-inset', '--sf-color-raised',
-  '--sf-color-text', '--sf-color-text--secondary', '--sf-color-heading',
+  '--sf-color-text', '--sf-color-text--subtle', '--sf-color-heading',
   '--sf-color-border', '--sf-color-border--subtle', '--sf-color-border--strong',
   '--sf-color-link', '--sf-color-selection-bg',
   '--sf-color-success-strong', '--sf-color-warning-strong',
diff --git a/tests/token-api.snapshot.json b/tests/token-api.snapshot.json
index 2bd7a381..e31a60a5 100644
--- a/tests/token-api.snapshot.json
+++ b/tests/token-api.snapshot.json
@@ -349,7 +349,7 @@
   "--sf-color-text--on-tertiary",
   "--sf-color-text--on-warning",
   "--sf-color-text--placeholder",
-  "--sf-color-text--secondary",
+  "--sf-color-text--subtle",
   "--sf-color-warning",
   "--sf-color-warning-muted",
   "--sf-color-warning-source-dark",
@@ -371,7 +371,6 @@
   "--sf-contrast-threshold",
   "--sf-cover-min-height",
   "--sf-cover-padding",
-  "--sf-current-font-weight",
   "--sf-density",
   "--sf-display-l-line-height",
   "--sf-display-m-line-height",
@@ -510,11 +509,7 @@
   "--sf-icon-xl",
   "--sf-icon-xs",
   "--sf-imposter-margin",
-  "--sf-is-active",
-  "--sf-is-current",
   "--sf-is-dark",
-  "--sf-is-open",
-  "--sf-is-pressed",
   "--sf-leading-normal",
   "--sf-leading-relaxed",
   "--sf-leading-snug",
@@ -642,7 +637,6 @@
   "--sf-space-xs",
   "--sf-stack-gap",
   "--sf-stagger-step",
-  "--sf-state-pending-opacity",
   "--sf-sticky-offset",
   "--sf-sticky-offset-desktop",
   "--sf-sticky-offset-mobile",
diff --git a/token-registry.json b/token-registry.json
index adff6376..30ee8502 100644
--- a/token-registry.json
+++ b/token-registry.json
@@ -1,7 +1,7 @@
 {
   "_meta": {
     "generatedBy": "scripts/gen-token-registry.js",
-    "nextId": 801
+    "nextId": 802
   },
   "tokens": [
     {
@@ -1289,7 +1289,8 @@
     },
     {
       "id": 314,
-      "name": "--sf-color-text--secondary"
+      "name": "--sf-color-text--secondary",
+      "removed": true
     },
     {
       "id": 315,
@@ -1373,7 +1374,8 @@
     },
     {
       "id": 335,
-      "name": "--sf-current-font-weight"
+      "name": "--sf-current-font-weight",
+      "removed": true
     },
     {
       "id": 336,
@@ -1901,11 +1903,13 @@
     },
     {
       "id": 466,
-      "name": "--sf-is-active"
+      "name": "--sf-is-active",
+      "removed": true
     },
     {
       "id": 467,
-      "name": "--sf-is-current"
+      "name": "--sf-is-current",
+      "removed": true
     },
     {
       "id": 468,
@@ -1913,11 +1917,13 @@
     },
     {
       "id": 469,
-      "name": "--sf-is-open"
+      "name": "--sf-is-open",
+      "removed": true
     },
     {
       "id": 470,
-      "name": "--sf-is-pressed"
+      "name": "--sf-is-pressed",
+      "removed": true
     },
     {
       "id": 471,
@@ -2443,7 +2449,8 @@
     },
     {
       "id": 599,
-      "name": "--sf-state-pending-opacity"
+      "name": "--sf-state-pending-opacity",
+      "removed": true
     },
     {
       "id": 600,
@@ -3261,6 +3268,10 @@
     {
       "id": 800,
       "name": "--sf-lumlocker-dark"
+    },
+    {
+      "id": 801,
+      "name": "--sf-color-text--subtle"
     }
   ]
 }
diff --git a/user-manual/system-kolorow.md b/user-manual/system-kolorow.md
index 40c7ee84..7eaa6415 100644
--- a/user-manual/system-kolorow.md
+++ b/user-manual/system-kolorow.md
@@ -139,8 +139,8 @@ Co się dzieje z kolorami:
   automatycznie z reguł bazowych. Nie pisz `color:` ręcznie.
 - Pomarańczowy akcent w nagłówku: `.sf-text-gradient` (gradient marki na tekście)
   albo, jeśli chcesz płaski kolor, `<span style="color: var(--sf-color-primary)">`.
-- Podtytuł „ściszony”: klasa rozmiaru + token `--sf-color-text--secondary`
-  (np. własna klasa: `.lead { color: var(--sf-color-text--secondary); }`).
+- Podtytuł „ściszony”: klasa rozmiaru + token `--sf-color-text--subtle`
+  (np. własna klasa: `.lead { color: var(--sf-color-text--subtle); }`).
 - Przycisk CTA: `.sf-btn .sf-btn--action`. Tło, kolor napisu (`--on-action`),
   hover i focus-ring — wszystko gotowe.
 - Pływająca karta/widget po prawej: `.sf-card` — dostaje `--sf-color-surface` jako
@@ -202,21 +202,24 @@ Wracamy na neutralne tło. Wszystko na tokenach semantycznych:
 
 Znów `data-theme="dark"` na sekcji + `.sf-card` na cytatach. Gwiazdki oceny mogą
 użyć `--sf-color-warning` (klasyczny „złoty” akcent ocen), logotypy klientów —
-`--sf-color-text--secondary`, żeby były obecne, ale nie krzyczały.
+`--sf-color-text--subtle`, żeby były obecne, ale nie krzyczały.
 
 ### 4.5. Jasny pas — proces „A 5-phase process” (stepper)
 
-Aktywny krok = interakcja/stan → `--sf-color-action` i stan `.sf-is-active`:
+Aktywny krok = interakcja/stan → `--sf-color-action` i własny modyfikator BEM
+(SLASHED dostarcza tokeny, nie generyczną klasę "aktywności" — zobacz
+[`docs/states.md`](../docs/states.md) § „Prefer native state"):
 
 ```css
-.step                { color: var(--sf-color-text--secondary); }  /* krok nieaktywny */
-.step.sf-is-active   { color: var(--sf-color-action); }           /* krok bieżący    */
+.step                { color: var(--sf-color-text--subtle); }  /* krok nieaktywny */
+.step.is-active      { color: var(--sf-color-action); }           /* krok bieżący    */
 .step__dot           { background: var(--sf-color-border); }
-.step.sf-is-active .step__dot { background: var(--sf-color-action); }
+.step.is-active .step__dot { background: var(--sf-color-action); }
 ```
 
-`.sf-is-*` to klasy stanu (patrz [`docs/states.md`](../docs/states.md)) — sygnalizują
-stan JS-em, a kolory zostają w tokenach.
+`.is-active` to Twoja własna klasa komponentu (albo `aria-current="step"`,
+jeśli stepper jest nawigacyjny) — kolory zostają w tokenach SLASHED, stan
+zarządzasz sam.
 
 ### 4.6. Ciemny pas CTA — „Ready to build something that actually performs”
 
@@ -292,7 +295,7 @@ To są role, których używasz na neutralnym tle strony (poza kolorowymi płytam
 | Token | Na czym |
 |---|---|
 | `--sf-color-text` | tekst akapitów, treść |
-| `--sf-color-text--secondary` | podtytuły, metadane, „ściszony” tekst |
+| `--sf-color-text--subtle` | podtytuły, metadane, „ściszony” tekst |
 | `--sf-color-heading` | nagłówki (h1–h6 biorą go automatycznie) |
 | `--sf-color-link` | linki (śledzi hue `action`, ale z bezpiecznym kontrastem) |
 | `--sf-color-border` | obramowania, dividery |