@stnd/styles 0.10.3 → 0.10.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stnd/styles
 
+## 0.10.5
+
+### Patch Changes
+
+- Auto-bumped @stnd/styles due to modified code.
+
+## 0.10.4
+
+### Patch Changes
+
+- Auto-bumped @stnd/styles due to modified code.
+
 ## 0.10.3
 
 ### Patch Changes

package/README.md

@@ -183,8 +183,8 @@ All 17 files verified via a running dev server (both `stnd.gd` and `stnd.build`)
 - **`.rhythm`'s base 1x-spacing rule has no `>` combinator; every other rule in the same block does** (`_standard-05-rhythm.scss`) — applies at any nesting depth instead of direct children only. Left alone: adding `>` risks a real regression on nested content (e.g. a paragraph inside a `.callout` inside `.rhythm`) that's impossible to fully rule out without a visual pass over every place `.rhythm` is used.
 - **`.compact`/`.relaxed` are unnamespaced and collide across `_standard-09-lists.scss` and `_standard-50-utilities.scss`** — resolving this properly means renaming part of the framework's public class API, which is an architectural decision, not a mechanical fix.
 
-**Documented, not a bug:**
-- The `generate-scale` mixin's `"trim"`/`"leading"` scale keys (feeding `.mt-trim`, `.p-leading`, etc.) use `--size-2xs`/`--size-xs` — not the real `--trim`/`--leading` rhythm tokens that happen to share the same words. `.mt-trim` does not use `--trim`. A naming collision worth knowing about, not something to change.
+**Resolved:**
+- The `generate-scale` mixin's `"trim"` and `"leading"` scale keys (feeding `.mt-trim`, `.mb-leading`, etc.) now directly connect to the real vertical rhythm tokens `var(--trim)` and `var(--leading)`, aligning spacing utilities with typographic rhythm. Invalid combinations like `padding: auto` and `gap: auto` are filtered out.
 
 **Where the mechanism is real but the hook is currently unused:**
 - `--corner` (theme override for `--radius`) — documented, no theme sets

package/TOKENS.md

@@ -80,42 +80,17 @@ Powered by `pow(var(--optical-ratio), N)`.
 | `--scale-7`  | 6        |                        |
 | `--scale-8`  | 7        | Largest                |
 
-## T-Shirt Size Aliases
-
-| Token         | Maps to      |
-| ------------- | ------------ |
-| `--size-3xs`  | `--scale-d5` |
-| `--size-2xs`  | `--scale-d4` |
-| `--size-xs`   | `--scale-d3` |
-| `--size-sm`   | `--scale-d2` |
-| `--size-base` | `--scale`    |
-| `--size-lg`   | `--scale-2`  |
-| `--size-xl`   | `--scale-3`  |
-| `--size-2xl`  | `--scale-4`  |
-| `--size-3xl`  | `--scale-5`  |
-| `--size-4xl`  | `--scale-6`  |
-| `--size-5xl`  | `--scale-7`  |
-| `--size-6xl`  | `--scale-8`  |
-
 ## Layout Widths
 
-Two independent scopes. `.prose`'s own box reads `--body-max-width`
-directly, so `.hero`/`.full` breakout elements grow all the way to the page
-shell. `.feature` and tables/`.editorial` don't reference either width
-token — they break out by a fixed rhythm increment off `--line-width`
-(`--space-2` / `--space-4` each side).
-
-| Token               | Default                           | Description                                   |
-| ------------------- | --------------------------------- | --------------------------------------------- |
-| `--body-max-width`  | `900px`                           | The whole page shell — header, footer, content, and the ceiling `.hero`/`.full` grow into |
-| `--body-max-width`  | `900px`                           | The whole page shell — header, footer, content, and the ceiling `.hero`/`.full` grow into |
-| `--line-width-xs`   | `24rem`                           | Extra small                                   |
-| `--line-width-sm`   | `32rem`                           | Small                                         |
-| `--line-width-md`   | `42rem`                           | Medium (default reading width)                |
-| `--line-width-lg`   | `50rem`                           | Large                                         |
-| `--line-width-xl`   | `60rem`                           | Extra large                                   |
-| `--line-width-full` | `calc(100vw - space*2)`           | Full viewport minus gutters                   |
-| `--line-width`      | `var(--measure, --line-width-md)` | Active line width (themeable via `--measure`) |
+The page layout uses a two-tier containment model: `--page-max-width` defines the outer
+viewport boundary for the page shell, header, and footer, while `--prose-width` defines the
+optimal reading measure for readable text elements (60–75 characters). Breakout tracks
+extend outwards from `--prose-width` in rhythm steps towards `--page-max-width`.
+
+| Token              | Default   | Description                                                           |
+| ------------------ | --------- | --------------------------------------------------------------------- |
+| `--page-max-width` | `1400px`  | The whole page shell — header, footer, content, and breakout ceiling  |
+| `--prose-width`    | `42rem`   | Active readable column measure (60–75 characters)                     |
 
 ## Line Heights
 
@@ -133,25 +108,31 @@ token — they break out by a fixed rhythm increment off `--line-width`
 | `--tracking-neutral` | `0em`     | Neutral tracking |
 | `--tracking-open`    | `0.01em`  | Open tracking    |
 
-## Stroke & Radius
+## Stroke, Radius & Interactive States
 
 | Token               | Default                         | Description                              |
 | ------------------- | ------------------------------- | ---------------------------------------- |
 | `--stroke-width`    | `max(1px, 0.06rem)`             | Hairline stroke                          |
-| `--stroke-width-lg` | `calc(stroke-width * 2)`        | Heavy stroke                             |
-| `--radius-sm`       | `min(8px, var(--radius))`       | Small radius for badges/buttons          |
-| `--radius`          | `var(--corner, var(--leading))` | Border radius (themeable via `--corner`) |
-| `--radius-lg`       | `calc(var(--radius) * 1.5)`     | Large radius for cards and dialogs       |
+| `--stroke-width-lg` | `calc(var(--stroke-width) * 2)` | Heavy stroke                             |
+| `--radius`          | `var(--leading)`                | Macro border radius (cards, panels)      |
+| `--radius-sm`       | `var(--trim)`                   | Micro border radius (buttons, tags, inputs)|
+| `--border`          | `var(--stroke-width) solid var(--color-border)` | Active border state      |
+| `--border-hover`    | `var(--stroke-width) solid var(--color-foreground)` | Hover border state   |
+| `--shadow`          | Layered elevation               | Resting shadow                           |
+| `--shadow-hover`    | Layered elevation + glow        | Active hover shadow                      |
 | `--filter-blur`     | `blur(8px)`                     | Standard blur filter                     |
 
-## Gaps
+## Layout Padding & Vertical Rhythm
 
-| Token               | Default                               | Description           |
-| ------------------- | ------------------------------------- | --------------------- |
-| `--gap-body`        | `clamp(space, 0.5vi+0.5rlh, space-3)` | Body gutter           |
-| `--gap-grid`        | `0.25lh`                              | Grid gutter           |
-| `--gap-body-mobile` | `var(--space)`                        | Body gutter on mobile |
-| `--gap-mobile`      | `1rlh`                                | General gap on mobile |
+| Token                  | Default                       | Description                                                     |
+| ---------------------- | ----------------------------- | --------------------------------------------------------------- |
+| `--page-padding`       | `clamp(1rem, 3vw, 2.5rem)`    | Fluid horizontal page gutter (desktop and mobile)               |
+| `--rhythm-block-scale` | `2`                           | Vertical rhythm multiplier for non-text block elements          |
+| `--space`              | `1rlh`                        | Fundamental vertical rhythm unit                                |
+| `--space-half`         | `calc(var(--space) / 2)`      | Half-step vertical rhythm unit                                  |
+| `--gap`                | `calc(var(--space))`          | Rhythm layout gap                                               |
+| `--gap-compact`        | `var(--trim)`                 | Compact micro-gap for inline groups and chips                   |
+| `--gap-grid`           | `0.25lh`                      | Grid gutter                                                     |
 
 ## Z-Index
 
@@ -277,25 +258,24 @@ Active tokens that resolve to light or dark palette.
 | `--color-muted`        | `foreground 60%`            | Muted text               |
 | `--color-subtle`       | `foreground 40%`            | Subtle text / decoration |
 | `--color-border`       | `foreground 10%`            | Default border           |
-| `--color-surface-low`  | `foreground 3%` opaque      | Slight surface tint      |
-| `--color-surface`      | `foreground 3%` opaque      | Secondary background     |
-| `--color-surface-high` | `foreground 5%` transparent | Hover state              |
-| `--color-darker`       | `dark 15%` transparent      | Shadow helper            |
-| `--color-light`        | light background            | Pole light               |
-| `--color-dark`         | light foreground            | Pole dark                |
-| `--color-shadow`       | `dark 5%` transparent       | Shadow color base        |
-
-## Surface Elevation
-
-Progressive foreground tinting for depth. Pairs with shadow presets.
-
-| Token                     | Tint            | Shadow        | Use case                |
-| ------------------------- | --------------- | ------------- | ----------------------- |
-| `--color-surface-lowest`  | 14% (background) | none          | Page background         |
-| `--color-surface-low`     | 7%              | `--shadow`    | Cards, inputs           |
-| `--color-surface`         | 3%              | `--shadow-lg` | Raised panels, popovers |
-| `--color-surface-high`    | 7%              | `--shadow-xl` | Overlays, drawers       |
-| `--color-surface-highest` | 14%             | `--shadow-xl` | Modals, toasts          |
+| `--color-surface`        | `var(--color-surface-light-1)` | Active base surface      |
+| `--color-surface-light-1`| `color-mix(in srgb, white 4%, bg)`  | Light step 1 (subtle lift)|
+| `--color-surface-light-2`| `color-mix(in srgb, white 9%, bg)`  | Light step 2 (cards)     |
+| `--color-surface-light-3`| `color-mix(in srgb, white 16%, bg)` | Light step 3 (popovers)  |
+| `--color-surface-dark-1` | `color-mix(in srgb, black 4%, bg)`  | Dark step 1 (subtle wells)|
+| `--color-surface-dark-2` | `color-mix(in srgb, black 9%, bg)`  | Dark step 2 (wells/inputs)|
+| `--color-surface-dark-3` | `color-mix(in srgb, black 16%, bg)` | Dark step 3 (deep wells) |
+| `--color-darker`         | `dark 15%` transparent              | Shadow helper            |
+| `--color-light`          | light background                    | Pole light               |
+| `--color-dark`           | light foreground                    | Pole dark                |
+| `--color-shadow`         | `dark 5%` transparent               | Shadow color base        |
+
+## Directional Surfaces
+
+Standard uses directional surface tokens relative to canvas background:
+- **Light steps (`--color-surface-light-1..3`)**: Blend subtle amounts of white into the background canvas, lifting elements up into elevation regardless of light/dark mode.
+- **Dark steps (`--color-surface-dark-1..3`)**: Blend subtle amounts of black into the background canvas, sinking elements into wells/recessed areas.
+- **Default surface (`--color-surface`)**: Resolves to `--color-surface-light-1` by default, customizable per theme.
 
 ## Shadows (Layered System)
 
@@ -408,13 +388,12 @@ box-shadow: var(--shadow-inset), var(--shadow-ambient);
 
 ## Layout — Prose Grid
 
-| Token                       | Default                       | Description              |
-| --------------------------- | ----------------------------- | ------------------------ |
-| `--content-width`           | `min(--line-width, 100%)`     | Content column width     |
-| `--content-width-sm`        | `max(space-2 - space, space)` | Sidebar margin inset     |
-| `--content-width-editorial` | `minmax(0, --space-2)`        | Editorial column         |
-| `--content-width-feature`   | `minmax(0, --space-4)`        | Feature column           |
-| `--content-width-hero`      | `minmax(0, 1fr)`              | Hero (full bleed) column |
+| Token                  | Default                                      | Description                 |
+| ---------------------- | -------------------------------------------- | --------------------------- |
+| `--prose-width`        | `42rem`                                      | Optimal reading line length |
+| `--prose-inset`        | `max(calc(var(--space-2) - var(--space)), var(--space))` | Narrow elements margin inset |
+| `--prose-breakout`     | `minmax(0, var(--space))`                    | Wide breakout column track  |
+| `--prose-track-full`   | `minmax(0, 1fr)`                             | Full page breakout track    |
 
 ## Analog (Noise Overlay)
 

package/_standard-00-variables.scss

@@ -45,11 +45,11 @@ $text-elements: "a, kbd, div, span, mark, callout-title::before, span, li::befor
 // Vertical rhythm system (_standard-05-rhythm.scss): consecutive "simple"
 // elements get 1x --gap margin between them; the moment either neighbor is
 // a "double" (heavier block-level: tables, cards, figures, sections...) the
-// margin becomes --gap * --gap-multiplicator (2x by default) — extra
+// margin becomes --space * --rhythm-block-scale (2x by default) — extra
 // breathing room around visually heavier blocks. $rhythm-tags is the union,
 // used for the heading-follows-anything spacing rules.
 $rhythm-simple-tags: ".alert, #comments, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, li, dl, dt, dd, p, pre, figure, hr, form, fieldset, button, aside, .callout, .card, .box, .btn, .grid";
-$rhythm-double-tags: "table,  blockquote, div:has(.video), section, article, header, footer, hr, #comments, .callout,  pre, figure, p:has(img), section, .box, .card, .small, .editorial, .feature, .hero, .full, .scroll, hr, aside, .stnd-code-block";
+$rhythm-double-tags: "table,  blockquote, div:has(.video), section, article, header, footer, hr, #comments, .callout,  pre, figure, p:has(img), section, .box, .card, .narrow, .wide, .full, .scroll, hr, aside, .stnd-code-block";
 $rhythm-tags: $rhythm-simple-tags + ", div, " + $rhythm-double-tags;
 
 // Reusable style fragments via @extend (not applied directly — SCSS
@@ -66,7 +66,7 @@ $rhythm-tags: $rhythm-simple-tags + ", div, " + $rhythm-double-tags;
 }
 
 %padding-text {
-  padding: var(--space-d4) var(--space-d2);
+  padding: var(--trim) var(--leading);
 }
 
 // Single-target on purpose (not ":root, body") — a token declared on both

package/_standard-01-token.scss

@@ -92,23 +92,20 @@
   --nl: calc(var(--leading) * var(--line-height));
 
   /**
-   * @name Rhythm & Gaps
-   * @description Spacing intervals between major layout blocks, page sections, headers, and footers.
+   * @name Rhythm & Page Padding
+   * @description Spacing intervals between major layout blocks, page sections, and screen edges.
    *
-   * @property {variable} --gap Dynamic gap between rhythm blocks (`calc(var(--space) * var(--optical-ratio))`).
-   * @property {variable} --gap-body Standard gutter for body content containers (`var(--space-2)`).
-   * @property {variable} --gap-header Top margin gutter above page headers (`var(--space-8)`).
-   * @property {variable} --gap-footer Bottom margin gutter above page footers (`calc(var(--gap-body) * 1.5)`).
-   * @property {variable} --gap-grid-img Micro-gap separating adjacent images in rhythm grids (`var(--space-d4)`).
-   * @property {variable} --gap-multiplicator Gutter multiplier factor (`2`).
+   * @property {variable} --gap Dynamic gap between rhythm blocks (`calc(var(--space))`).
+   * @property {variable} --gap-compact Compact micro-gap for inline groups, metadata, breadcrumbs (`var(--trim)`).
+   * @property {variable} --page-padding Fluid outer margin/padding preventing content from touching device bezels (`clamp(1rem, 3vw, 2.5rem)`).
+   * @property {variable} --gap-grid-img Micro-gap separating adjacent images in rhythm grids (`var(--space-half)`).
+   * @property {variable} --rhythm-block-scale Ratio multiplier factor for non-text blocks (`2`).
    */
-  /* Gap, space between blocks in rhythm, goes to --space in mobile */
   --gap: calc(var(--space));
-  --gap-body: var(--space-2);
-  --gap-header: var(--space-8);
-  --gap-footer: calc(var(--gap-body) * 1.5);
-  --gap-grid-img: var(--space-d4);
-  --gap-multiplicator: 2;
+  --gap-compact: var(--trim);
+  --page-padding: clamp(1rem, 3vw, 2.5rem);
+  --gap-grid-img: var(--space-half);
+  --rhythm-block-scale: 2;
 
   /**
    * @name Breakpoints
@@ -125,18 +122,16 @@
   --breakpoint-wide: #{$wide};
 
   /**
-   * @name Content Breakout Widths
-   * @description Grid breakout track sizes allowing editorial content, features, and media to extend past the reading measure.
+   * @name Prose Breakout Tracks & Insets
+   * @description Grid breakout track sizes allowing wide content and full-width elements to extend past the reading measure, plus narrow element insets.
    *
-   * @property {variable} --content-width-sm Small layout breakout track width (`max(calc(var(--space-2) - var(--space)), var(--space))`).
-   * @property {variable} --content-width-editorial Editorial column breakout track width (`minmax(0, var(--space-2))`).
-   * @property {variable} --content-width-feature Feature callout breakout track width (`minmax(0, var(--space-4))`).
-   * @property {variable} --content-width-hero Full-bleed hero breakout track width (`minmax(0, 1fr)`).
+   * @property {variable} --prose-inset Narrow layout inset margin (`max(calc(var(--space-2) - var(--space)), var(--space))`).
+   * @property {variable} --prose-breakout Wide column breakout track width (`minmax(0, var(--space))`).
+   * @property {variable} --prose-track-full Full-width page breakout track (`minmax(0, 1fr)`).
    */
-  --content-width-sm: max(calc(var(--space-2) - var(--space)), var(--space));
-  --content-width-editorial: minmax(0, var(--space-2));
-  --content-width-feature: minmax(0, var(--space-4));
-  --content-width-hero: minmax(0, 1fr);
+  --prose-inset: max(calc(var(--space-2) - var(--space)), var(--space));
+  --prose-breakout: minmax(0, var(--space));
+  --prose-track-full: minmax(0, 1fr);
 
   /**
    * @name Stroke, Radius & Filters
@@ -144,22 +139,17 @@
    *
    * @property {variable} --stroke-width Hairline border stroke width (`max(1px, 0.06rem)`).
    * @property {variable} --stroke-width-lg Heavy border stroke width (`calc(var(--stroke-width) * 2)`).
-   * @property {variable} --radius Border radius proportional to leading. Resolves theme hook `--corner` or derives proportionally from `--leading`.
-   * @property {variable} --radius-sm Small border radius for badges, inputs, and buttons (`min(8px, var(--radius))`).
+   * @property {variable} --radius Macro border radius for cards, dialogs, and large containers (`var(--leading)`).
+   * @property {variable} --radius-sm Micro border radius for tags, badges, buttons, and inputs (`var(--trim)`).
    * @property {variable} --filter-blur Standard blur filter (`blur(8px)`).
    * @property {variable} --filter-glass Deep glassmorphic blur filter for overlays and floating panels (`blur(20px)`).
    */
-  /* Design system tokens */
   --filter-blur: blur(8px);
   --filter-glass: blur(20px);
   --stroke-width: max(1px, 0.06rem);
   --stroke-width-lg: calc(var(--stroke-width) * 2);
-  /* --corner is a documented theme-authoring hook (TOKENS.md) — no theme
-     currently sets it, so --radius always resolves through --leading
-     (proportional to line-height/font-size) today. Not dead, just unused. */
-  --radius: var(--corner, var(--leading));
-  --radius-sm: min(8px, var(--radius));
-  --radius-lg: calc(var(--radius) * 1.5);
+  --radius: var(--leading);
+  --radius-sm: var(--trim);
 
   /**
    * @name Shadows & Elevation
@@ -217,38 +207,11 @@
    * @name Layout & Reading Widths
    * @description Column constraints for prose reading measure and outer page boundaries.
    *
-   * @property {variable} --body-max-width Maximum width of the entire page shell (`900px`). Constrains headers, prose, and footers.
-   * @property {variable} --line-width-xs Extra-small reading width (`24rem`). Ideal for cards, sidebars, and captions.
-   * @property {variable} --line-width-sm Small reading width (`32rem`).
-   * @property {variable} --line-width-md Medium reading width (`42rem`). Optimal reading line length (approx. 65-75 characters).
-   * @property {variable} --line-width-lg Large reading width (`50rem`).
-   * @property {variable} --line-width-xl Extra-large reading width (`60rem`).
-   * @property {variable} --line-width-full Full viewport width minus gutters (`calc(100vw - (var(--space) * 2))`).
-   * @property {variable} --line-width Active reading column measure. Resolves `--font-line-width`, `--measure`, or `--line-width-md`.
-   * @property {variable} --content-width Effective content width constrained to container (`min(var(--line-width), 100%)`).
+   * @property {variable} --page-max-width Maximum width of the entire page shell (`1400px`).
+   * @property {variable} --prose-width Optimal reading line length (approx. 65 characters / `42rem`).
    */
-  /* Layout width — body-max-width is the whole page shell (header, footer,
-     content); .prose's own box reads it directly, so .hero/.full breakout
-     elements grow into it too. line-width is a single line of readable
-     text — .feature and tables/.editorial break out by a fixed rhythm
-     increment off this (space-2 / space-4 each side), not off
-     body-max-width. */
-  --body-max-width: 900px;
-
-  --line-width-xs: 24rem;
-  --line-width-sm: 32rem;
-  --line-width-md: 42rem;
-  --line-width-lg: 50rem;
-  --line-width-xl: 60rem;
-  --line-width-full: calc(100vw - (var(--space) * 2));
-  /* --font-line-width is the theme-authoring hook (e.g. humanist, book,
-     2064 themes); --measure is a second, editor-specific override read by
-     apps/stnd.gd's Writer component. Same override-ladder shape as
-     --font-ratio above — a note's frontmatter can also set --line-width
-     directly, bypassing both. */
-  --line-width: var(--font-line-width, var(--measure, var(--line-width-md)));
-
-  --content-width: min(var(--line-width), 100%);
+  --page-max-width: 1400px;
+  --prose-width: 42rem;
 
   /**
    * @name Line Heights & Letter Spacing
@@ -313,10 +276,10 @@
    * @name Optical Harmony Scale & Sizes
    * @description Modular geometric scale driven by `--optical-ratio` for typography and sizing. Sub-base steps (d5..d2) use a flattened divisor and floor at 11px to protect legibility.
    *
-   * @property {variable} --scale-d5 Sub-base optical step -5 (`max(calc(var(--font-size) / (var(--optical-ratio) * var(--optical-ratio))), 11px)`).
-   * @property {variable} --scale-d4 Sub-base optical step -4 (`max(calc(var(--font-size) / (var(--optical-ratio) * 1.25)), 11px)`).
-   * @property {variable} --scale-d3 Sub-base optical step -3 (`max(calc(var(--font-size) / var(--optical-ratio)), 11px)`).
-   * @property {variable} --scale-d2 Sub-base optical step -2 (`max(calc(var(--font-size) / (1 + (var(--optical-ratio) - 1) * 0.5)), 11px)`).
+   * @property {variable} --scale-d5 Sub-base optical step -5 (`max(calc(var(--font-size) * pow(var(--optical-ratio), -2)), 9px)`).
+   * @property {variable} --scale-d4 Sub-base optical step -4 (`max(calc(var(--font-size) * pow(var(--optical-ratio), -1.5)), 9px)`).
+   * @property {variable} --scale-d3 Sub-base optical step -3 (`max(calc(var(--font-size) * pow(var(--optical-ratio), -1)), 9px)`).
+   * @property {variable} --scale-d2 Sub-base optical step -2 (`max(calc(var(--font-size) * pow(var(--optical-ratio), -0.5)), 9px)`).
    * @property {variable} --scale Base optical scale step (`var(--font-size)`).
    * @property {variable} --scale-2 Super-base optical step 2 (`calc(var(--font-size) * var(--optical-ratio))`).
    * @property {variable} --scale-3 Super-base optical step 3 (`calc(var(--scale-2) * var(--optical-ratio))`).
@@ -325,36 +288,15 @@
    * @property {variable} --scale-6 Super-base optical step 6 (`calc(var(--scale-5) * var(--optical-ratio))`).
    * @property {variable} --scale-7 Super-base optical step 7 (`calc(var(--scale-6) * var(--optical-ratio))`).
    * @property {variable} --scale-8 Super-base optical step 8 (`calc(var(--scale-7) * var(--optical-ratio))`).
-   * @property {variable} --size-3xs T-shirt size alias for `--scale-d5`. Used for micro-badges and metadata captions.
-   * @property {variable} --size-2xs T-shirt size alias for `--scale-d4`. Used for tooltips, footnotes, and tags.
-   * @property {variable} --size-xs T-shirt size alias for `--scale-d3`. Used for secondary labels and table metadata.
-   * @property {variable} --size-sm T-shirt size alias for `--scale-d2`. Used for UI controls, inputs, and captions.
-   * @property {variable} --size-base T-shirt size alias for `--scale`. Base body text size (`1rem`).
-   * @property {variable} --size-lg T-shirt size alias for `--scale-2`. Subheadings and lead paragraphs.
-   * @property {variable} --size-xl T-shirt size alias for `--scale-3`. Section headers (`h3`).
-   * @property {variable} --size-2xl T-shirt size alias for `--scale-4`. Major headings (`h2`).
-   * @property {variable} --size-3xl T-shirt size alias for `--scale-5`. Page titles (`h1`).
-   * @property {variable} --size-4xl T-shirt size alias for `--scale-6`. Hero display headings.
-   * @property {variable} --size-5xl T-shirt size alias for `--scale-7`. Large hero numbers and display text.
-   * @property {variable} --size-6xl T-shirt size alias for `--scale-8`. Maximum display typography scale.
    */
   /* Optical harmony scale. --scale-2 upward is a clean geometric progression
      (each step = previous * --optical-ratio). Below base (d5..d2) the
-     divisor is deliberately NOT the mirrored geometric inverse (ratio^-1,
-     ratio^-2...) — it's flattened (ratio*1.25, then a 0.5-blended exponent
-     for d2) so small text doesn't shrink as aggressively as a pure
-     geometric scale would, staying legible; each step also floors at 11px
-     regardless of ratio math. */
-  --scale-d5: max(
-    calc(var(--font-size) / (var(--optical-ratio) * var(--optical-ratio))),
-    11px
-  );
-  --scale-d4: max(calc(var(--font-size) / (var(--optical-ratio) * 1.25)), 11px);
-  --scale-d3: max(calc(var(--font-size) / var(--optical-ratio)), 11px);
-  --scale-d2: max(
-    calc(var(--font-size) / (1 + (var(--optical-ratio) - 1) * 0.5)),
-    11px
-  );
+     scale steps down by fractional power increments (ratio^-0.5, ratio^-1,
+     ratio^-1.5, ratio^-2) floored at 9px so micro text stays legible and distinct. */
+  --scale-d5: max(calc(var(--font-size) * pow(var(--optical-ratio), -2)), 9px);
+  --scale-d4: max(calc(var(--font-size) * pow(var(--optical-ratio), -1.5)), 9px);
+  --scale-d3: max(calc(var(--font-size) * pow(var(--optical-ratio), -1)), 9px);
+  --scale-d2: max(calc(var(--font-size) * pow(var(--optical-ratio), -0.5)), 9px);
   --scale: var(--font-size);
   --scale-2: calc(var(--font-size) * var(--optical-ratio));
   --scale-3: calc(var(--scale-2) * var(--optical-ratio));
@@ -364,34 +306,13 @@
   --scale-7: calc(var(--scale-6) * var(--optical-ratio));
   --scale-8: calc(var(--scale-7) * var(--optical-ratio));
 
-  /* Industrial Size Scale (T-Shirt Aliases) */
-  --size-3xs: var(--scale-d5);
-  --size-2xs: var(--scale-d4);
-  --size-xs: var(--scale-d3);
-  --size-sm: var(--scale-d2);
-  --size-base: var(--scale);
-  --size-lg: var(--scale-2);
-  --size-xl: var(--scale-3);
-  --size-2xl: var(--scale-4);
-  --size-3xl: var(--scale-5);
-  --size-4xl: var(--scale-6);
-  --size-5xl: var(--scale-7);
-  --size-6xl: var(--scale-8);
-
   /**
    * @name Mobile Settings
    * @description Responsive overrides applied on mobile screen sizes.
    *
    * @property {variable} --font-size-mobile Base font size override on mobile viewports (`1.125rem`).
-   * @property {variable} --gap-body-mobile Body gutter override on mobile viewports (`var(--space)`).
-   * @property {variable} --gap-mobile General layout gap override on mobile viewports (`var(--space)`).
-   * @property {variable} --gap-header-mobile Header gutter override on mobile viewports (`var(--space-4)`).
    */
-  /* Mobile settings */
   --font-size-mobile: 1.125rem;
-  --gap-body-mobile: var(--space);
-  --gap-mobile: var(--space);
-  --gap-header-mobile: var(--space-4);
 
   /**
    * @name Z-Index Scale
@@ -538,23 +459,22 @@
 #{$text-elements},
 a {
   text-box-trim: trim-both;
-  text-box-edge: cap alphabetic;
+  text-box-edge: cap text;
 }
 
-/* Table cells opt back out of text-box-trim — vertical-align/padding math
-   in table cells doesn't play well with the trimmed ascender/descender
-   box, so cells keep normal line-box sizing instead. */
+/* Table cells and site footers opt back out of text-box-trim — vertical-align/padding
+   math and compact interface metadata don't play well with trimmed line boxes,
+   so they keep normal line-box sizing instead. */
 td,
-th {
+th,
+footer,
+.stnd-footer {
   text-box-trim: none;
 }
 
 /* Responsive adjustments */
 @media only screen and (max-width: #{$small}) {
   #{$stnd-theme-scope} {
-    --gap-body: var(--gap-body-mobile) !important;
-    --gap-header: var(--gap-header-mobile) !important;
-    --gap: var(--gap-mobile) !important;
     --font-size: var(--font-size-mobile) !important;
   }
 }