Docs/API sync cleanup: fix phantom refs + retire unused border-style tokens

core/tokens.css

@@ -75,7 +75,7 @@
      · containers (--sf-container-{narrow,prose,default,wide,full})
      · ratios (--sf-ratio-{square,video,cinema,portrait,golden,4-3,3-2})
      · border widths (--sf-border-width-{hairline,1,2,3,4})
-     · border styles (--sf-border-style, --strong, --soft, --dotted)
+     · border style (--sf-border-style)
      · border shorthands (--sf-border, --sf-border-subtle, --sf-border-strong)
      · divider (--sf-divider-{width,style,color,gap})
      · radius (--sf-radius-{none,xs,s,m,l,xl,2xl,3xl,4xl,full,pill})
@@ -842,15 +842,14 @@
     --sf-border-width-4:        4px;
 
     /* ----------------------------------------------------------
-       Border styles — paired with --sf-border-width-* and
+       Border style — global knob paired with --sf-border-width-* and
        --sf-color-border*. Consumer BEM:
          .my-card { border: var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border); }
-       Override per element to switch decorative styles without
-       rewriting the rule.
+       Set once on :root to restyle every framework border, or override
+       per element. For one-off decorative styles use the CSS keyword
+       directly (e.g. `border-style: dashed`).
        ---------------------------------------------------------- */
-    --sf-border-style:        solid;     /* default */
-    --sf-border-style-soft:   dashed;
-    --sf-border-style-dotted: dotted;
+    --sf-border-style: solid;     /* default */
 
     /* ----------------------------------------------------------
        Border shorthands — convenience tokens composing width, style,

docs/demo.html

@@ -1599,7 +1599,7 @@ <h3>.sf-grid-1 / Ratio grids</h3>
 
         <h3>.sf-equal — fixed N-column grid</h3>
         <p style="font-size: var(--sf-text-s); color: var(--sf-color-text--muted); margin-block-end: var(--sf-space-s)">
-          Column count never collapses — unlike <code>.sf-grid-N</code> which uses container queries.
+          Column count never collapses — unlike <code>.sf-grid-*</code> which uses container queries.
         </p>
         <div class="sf-stack sf-stack--xs">
           <div>
@@ -2164,7 +2164,7 @@ <h3>Lists Are Restored</h3>
           <ul>
             <li>List items get <code>list-style: disc</code> back (reset removes it)</li>
             <li>Nested list indentation is preserved</li>
-            <li>Marker color follows <code>--sf-brand</code> → <code>--sf-color-primary</code></li>
+            <li>Marker color follows <code>--sf-prose-marker-color</code> (defaults to <code>--sf-color-primary</code>)</li>
           </ul>
           <ol>
             <li>Ordered lists work too</li>
@@ -2297,7 +2297,7 @@ <h2 style="padding-inline: var(--sf-space-l)">Layout — Content Grid</h2>
         <h2>Layout — Pancake</h2>
         <p style="font-size: var(--sf-text-s); color: var(--sf-color-text--muted); margin-block-end: var(--sf-space-m)"><code>.sf-pancake</code> — 3-row grid (<code>auto 1fr auto</code>) for sticky-footer layouts. Default <code>min-height: 100dvh</code>.</p>
 
-        <div class="sf-pancake" style="--sf-pancake-min-height: 18rem; min-height: 18rem; background: var(--sf-color-inset); border-radius: var(--sf-radius-m); overflow: hidden; border: 1px solid var(--sf-color-border)">
+        <div class="sf-pancake" style="min-height: 18rem; background: var(--sf-color-inset); border-radius: var(--sf-radius-m); overflow: hidden; border: 1px solid var(--sf-color-border)">
           <header class="demo-box demo-box--alt" style="border-radius: 0; justify-content: flex-start; padding-inline: var(--sf-space-l)">
             Header (auto height)
           </header>
@@ -2713,7 +2713,7 @@ <h3 style="margin-block-start: var(--sf-space-l)"><code>.sf-entrance--*</code> 
 
       // Hidden probes pinned to each mode so light-dark() resolves
       // deterministically regardless of OS/page theme. Reading the *resolved*
-      // --sf-color-X on a probe shows exactly what the framework renders —
+      // --sf-color-* on a probe shows exactly what the framework renders —
       // including the auto-derived dark value when no -dark override is set.
       function makeProbe(theme) {
         const el = document.createElement('span');
@@ -2737,7 +2737,7 @@ <h3 style="margin-block-start: var(--sf-space-l)"><code>.sf-entrance--*</code> 
       };
 
       // data-token is the SOURCE token an input writes to (…-light / …-dark);
-      // the swatch shows the RESOLVED base token (--sf-color-X) in that mode,
+      // the swatch shows the RESOLVED base token (--sf-color-*) in that mode,
       // so dark always reflects the live auto-derived (or overridden) value.
       function resolvedHex(token) {
         const mode  = token.endsWith('-dark') ? 'dark' : 'light';

docs/registry.json

@@ -20,7 +20,7 @@
       "optional/theme-example.css"
     ],
     "counts": {
-      "tokens": 771,
+      "tokens": 769,
       "sf_classes": 173,
       "is_classes": 40
     }
@@ -69,8 +69,6 @@
     "--sf-border",
     "--sf-border-strong",
     "--sf-border-style",
-    "--sf-border-style-dotted",
-    "--sf-border-style-soft",
     "--sf-border-subtle",
     "--sf-border-width-1",
     "--sf-border-width-2",

docs/test-coverage-2-typography.html

@@ -299,9 +299,9 @@ <h2>Border widths &amp; styles, strokes</h2>
       </div>
       <h3>Border styles &amp; composed border tokens</h3>
       <div class="sf-stack sf-stack--xs">
-        <div style="border-bottom: 2px var(--sf-border-style) var(--sf-color-text); padding: var(--sf-space-2xs)">style (solid)</div>
-        <div style="border-bottom: 2px var(--sf-border-style-dotted) var(--sf-color-text); padding: var(--sf-space-2xs)">style-dotted</div>
-        <div style="border-bottom: 2px var(--sf-border-style-soft) var(--sf-color-text); padding: var(--sf-space-2xs)">style-soft (dashed)</div>
+        <div style="border-bottom: 2px var(--sf-border-style) var(--sf-color-text); padding: var(--sf-space-2xs)">--sf-border-style (solid)</div>
+        <div style="border-bottom: 2px dotted var(--sf-color-text); padding: var(--sf-space-2xs)">dotted (keyword)</div>
+        <div style="border-bottom: 2px dashed var(--sf-color-text); padding: var(--sf-space-2xs)">dashed (keyword)</div>
         <div style="border: var(--sf-border); padding: var(--sf-space-2xs)">--sf-border</div>
         <div style="border: var(--sf-border-strong); padding: var(--sf-space-2xs)">--sf-border-strong</div>
         <div style="border: var(--sf-border-subtle); padding: var(--sf-space-2xs)">--sf-border-subtle</div>

docs/test-coverage.html

@@ -31,7 +31,7 @@
   </style>
 </head>
 <body>
-  <main id="main" style="max-width: var(--sf-measure, 70ch); margin-inline: auto">
+  <main id="main" style="max-width: var(--sf-container-prose); margin-inline: auto">
     <header>
       <strong style="font-size: var(--sf-text-xl)">SLASHED <span style="color: var(--sf-color-text--muted)">/</span> coverage suite</strong>
       <p>

docs/token-index.json

@@ -11,9 +11,9 @@
     ],
     "fallback_source": "core/tokens.color-fallbacks.css",
     "counts": {
-      "tokens": 771,
+      "tokens": 769,
       "by_tier": {
-        "PUBLIC": 735,
+        "PUBLIC": 733,
         "PUBLIC-ADVANCED": 35,
         "INTERNAL": 1
       },
@@ -366,22 +366,6 @@
       "fallback": false,
       "value": "solid"
     },
-    "--sf-border-style-dotted": {
-      "tier": "PUBLIC",
-      "files": [
-        "core/tokens.css"
-      ],
-      "fallback": false,
-      "value": "dotted"
-    },
-    "--sf-border-style-soft": {
-      "tier": "PUBLIC",
-      "files": [
-        "core/tokens.css"
-      ],
-      "fallback": false,
-      "value": "dashed"
-    },
     "--sf-border-subtle": {
       "tier": "PUBLIC",
       "files": [

docs/token-index.md

@@ -9,11 +9,11 @@ values see [tokens.md](tokens.md); for the flat name list see
 [registry.json](registry.json); for the tier contract and naming rules see
 [architecture.md](architecture.md).
 
-**771 tokens** (deduplicated by name across the 6 token source files).
+**769 tokens** (deduplicated by name across the 6 token source files).
 
 | Tier | Count | Meaning |
 |---|---|---|
-| PUBLIC | 735 | Everyday knobs. SemVer-stable. |
+| PUBLIC | 733 | Everyday knobs. SemVer-stable. |
 | PUBLIC-ADVANCED | 35 | Same SemVer guarantee; niche/powerful. |
 | INTERNAL | 1 | Implementation detail; may change without a major bump. |
 
@@ -110,8 +110,6 @@ values see [tokens.md](tokens.md); for the flat name list see
 | `--sf-border` | PUBLIC | Core | — | `var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border)` |
 | `--sf-border-strong` | PUBLIC | Core | — | `var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--strong)` |
 | `--sf-border-style` | PUBLIC | Core | — | `solid` |
-| `--sf-border-style-dotted` | PUBLIC | Core | — | `dotted` |
-| `--sf-border-style-soft` | PUBLIC | Core | — | `dashed` |
 | `--sf-border-subtle` | PUBLIC | Core | — | `var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--subtle)` |
 | `--sf-border-width-1` | PUBLIC | Core | — | `1px` |
 | `--sf-border-width-2` | PUBLIC | Core | — | `2px` |

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.
 
-**837 tokens.** Every `--sf-*` custom property and its default value, grouped by source file.
+**835 tokens.** Every `--sf-*` custom property and its default value, grouped by source file.
 Tokens defined in multiple files (e.g. shade aliases overridden in
 `optional/tokens.palette.css`) are listed once per section — so this count is
 higher than `docs/registry.json` (which deduplicates by name). See
@@ -14,7 +14,7 @@ rebrand workflow.
 
 ## Core tokens (`core/tokens.css`)
 
-465 tokens.
+463 tokens.
 
 | Token | Default |
 |---|---|
@@ -53,8 +53,6 @@ rebrand workflow.
 | `--sf-border` | `var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border)` |
 | `--sf-border-strong` | `var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--strong)` |
 | `--sf-border-style` | `solid` |
-| `--sf-border-style-dotted` | `dotted` |
-| `--sf-border-style-soft` | `dashed` |
 | `--sf-border-subtle` | `var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--subtle)` |
 | `--sf-border-width-1` | `1px` |
 | `--sf-border-width-2` | `2px` |

optional/theme-example.css

@@ -231,8 +231,6 @@
     --sf-border-width-3: 3px;
     --sf-border-width-4: 4px;
     --sf-border-style: solid;
-    --sf-border-style-soft: dashed;
-    --sf-border-style-dotted: dotted;
     */
 
     /* --- Motion ---

tests/token-api.snapshot.json

@@ -42,8 +42,6 @@
   "--sf-border",
   "--sf-border-strong",
   "--sf-border-style",
-  "--sf-border-style-dotted",
-  "--sf-border-style-soft",
   "--sf-border-subtle",
   "--sf-border-width-1",
   "--sf-border-width-2",