docs: sync landing/README/demos with latest main (720 → 729 tokens)

README.md

@@ -4,7 +4,7 @@
 
 <p align="center">
   A cascade-layer CSS framework you never compile.<br>
-  720 design tokens, automatic dark mode, fluid type &amp; spacing — no build step, no Node, no JavaScript.
+  729 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
 
-- **720 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).
+- **729 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)).

demos/generate.mjs

@@ -53,6 +53,7 @@ const SKIP = {
   '--sf-is-dark': 'runtime theme flag — driven by color-scheme; a global flip would desync from the actual scheme',
   '--sf-shadow-none': 'sentinel "none" — the API guarantees no shadow; overriding would add one where none is promised',
   '--sf-text-shadow-none': 'sentinel "none" — the API guarantees no text-shadow',
+  '--sf-surface-bg-animation': 'background animation shorthand on .sf-surface — a global value would force motion on every surface and fight reduced-motion; no safe single-element visual perturbation',
 };
 
 // Curated overrides for keyword / numeric / zero-valued knobs that no generic
@@ -73,6 +74,14 @@ const CURATED = {
   '--sf-object-fit': 'contain',
   '--sf-bg-layer-position': '25% 75%',
   '--sf-object-position': '25% 75%',
+  // .sf-surface background knobs → real background-* properties on .sf-surface
+  '--sf-surface-bg-color': 'oklch(0.85 0.05 300)',
+  '--sf-surface-bg-image': 'linear-gradient(135deg, oklch(0.9 0.08 300 / 0.6), oklch(0.8 0.12 200 / 0.6))',
+  '--sf-surface-bg-overlay': 'linear-gradient(oklch(0 0 0 / 0.15), oklch(0 0 0 / 0.15))',
+  '--sf-surface-bg-size': 'contain',
+  '--sf-surface-bg-position': '25% 75%',
+  '--sf-surface-bg-repeat': 'repeat',
+  '--sf-surface-bg-attachment': 'fixed',
   '--sf-border-style': 'dashed',
   '--sf-divider-style': 'dashed',
   '--sf-equal-rule-style': 'dashed',

demos/ultimate-override.css

@@ -5,8 +5,8 @@
    Perturbs every CONFIGURABLE (role: "knob") token to a valid, visibly-distinct
    value so full-api-demo.html can prove each one is wired end to end.
 
-   Coverage: 206 of 229 knob tokens overridden.
-   23 knobs are intentionally NOT perturbed (structural /
+   Coverage: 214 of 238 knob tokens overridden.
+   24 knobs are intentionally NOT perturbed (structural /
    meta / sentinel) — listed with reasons at the bottom of this file.
    ============================================================================ */
 
@@ -128,6 +128,7 @@
   /* fluid */
   --sf-fluid-max-vw: 70; /* was: 90 */
   --sf-fluid-min-vw: 30; /* was: 22.5 */
+  --sf-fluid-width: 160vw; /* was: 100vw */
 
   /* focus */
   --sf-focus-ring-offset: 3.2px; /* was: 2px */
@@ -311,6 +312,15 @@
   /* state */
   --sf-state-pending-opacity: 0.4; /* was: 0.7 */
 
+  /* surface */
+  --sf-surface-bg-attachment: fixed; /* was: scroll */
+  --sf-surface-bg-color: oklch(0.85 0.05 300); /* was: transparent */
+  --sf-surface-bg-image: linear-gradient(135deg, oklch(0.9 0.08 300 / 0.6), oklch(0.8 0.12 200 / 0.6)); /* was: none */
+  --sf-surface-bg-overlay: linear-gradient(oklch(0 0 0 / 0.15), oklch(0 0 0 / 0.15)); /* was: none */
+  --sf-surface-bg-position: 25% 75%; /* was: center */
+  --sf-surface-bg-repeat: repeat; /* was: no-repeat */
+  --sf-surface-bg-size: contain; /* was: cover */
+
   /* switcher */
   --sf-switcher-threshold: 48rem; /* was: 30rem */
 
@@ -342,7 +352,7 @@
 }
 
 /* ----------------------------------------------------------------------------
-   Intentionally NOT overridden (23):
+   Intentionally NOT overridden (24):
    --sf-bg-layer-z — stacking order — lowering it would push the background layer over content
    --sf-color-scheme — meta control — forcing a scheme would override the page light/dark behaviour rather than test a visual token
    --sf-is-active — runtime state flag — exercised via the .sf-is-active class; a global :root flip would force every element active
@@ -355,6 +365,7 @@
    --sf-safe-right — env() device inset — zero on desktop, no visual surface
    --sf-safe-top — env() device inset — zero on desktop, no visual surface
    --sf-shadow-none — sentinel "none" — the API guarantees no shadow; overriding would add one where none is promised
+   --sf-surface-bg-animation — background animation shorthand on .sf-surface — a global value would force motion on every surface and fight reduced-motion; no safe single-element visual perturbation
    --sf-text-shadow-none — sentinel "none" — the API guarantees no text-shadow
    --sf-z-base — stacking order — no single-element visual surface
    --sf-z-below — stacking order — no single-element visual surface; global change risks hiding content

docs/architecture.md

@@ -51,7 +51,7 @@ optional/
   theme-example.css       slashed.themes  (copy-and-customise rebrand example; not bundled)
   forms.css               slashed.forms  (classless native form-control styling)
   components.css          slashed.components  (btn + card — the only two components)
-  utilities.css           slashed.utilities  (curated subset active — heading/text-size/hover; rest commented)
+  utilities.css           slashed.utilities  (curated subset active — heading/text-size/hover/list-reset/marker-colour/alternate-selection/sticky)
   legacy.css              slashed.legacy
 ```
 

index.html

@@ -8,7 +8,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>SLASHED — a cascade-layer CSS framework</title>
   <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Ctext y=%27.9em%27 font-size=%2790%27 font-family=%27system-ui%27 font-weight=%27800%27%3E/%3C/text%3E%3C/svg%3E">
-  <meta name="description" content="A cascade-layer CSS framework: 720 design tokens, automatic dark mode, fluid type & spacing — zero JavaScript, zero build step.">
+  <meta name="description" content="A cascade-layer CSS framework: 729 design tokens, automatic dark mode, fluid type & spacing — zero JavaScript, zero build step.">
 
   <!-- The page is styled by the framework it advertises — served from the
        jsDelivr CDN off the dist branch (updated on every release). -->
@@ -417,7 +417,7 @@ <h1 class="acronym-hero" aria-label="SLASHED — Standalone, Lean, Agnostic, Str
           </span>
         </h1>
         <p class="tagline">The name is the manifesto. Seven promises, one stylesheet.</p>
-        <p class="lede">A cascade-layer CSS framework: 720 design tokens, automatic dark mode, fluid type &amp; spacing — zero JavaScript, zero build step. Override six tokens and the whole site rebrands.</p>
+        <p class="lede">A cascade-layer CSS framework: 729 design tokens, automatic dark mode, fluid type &amp; spacing — zero JavaScript, zero build step. Override six tokens and the whole site rebrands.</p>
         <div class="sf-cluster sf-cluster--center sf-cluster--s">
           <a class="btn btn--primary" href="/configurator/">Open Configurator →</a>
           <a class="btn btn--quiet" href="/docs/demo.html">View Demo</a>
@@ -431,7 +431,7 @@ <h1 class="acronym-hero" aria-label="SLASHED — Standalone, Lean, Agnostic, Str
     <!-- Stats strip -->
     <section class="sf-section sf-section--s sf-section--guttered">
       <dl class="stats sf-container sf-container--wide sf-grid sf-grid--fit sf-grid--s sf-gap--m" style="text-align: center; margin: 0;">
-        <div class="stat sf-tabular-nums"><dt>720</dt><dd>design tokens</dd></div>
+        <div class="stat sf-tabular-nums"><dt>729</dt><dd>design tokens</dd></div>
         <div class="stat sf-tabular-nums"><dt>15</dt><dd>cascade layers</dd></div>
         <div class="stat sf-tabular-nums"><dt>0</dt><dd>lines of frontend JS</dd></div>
         <div class="stat sf-tabular-nums"><dt>0</dt><dd>build steps</dd></div>