@livenetworks/ashlar 1.6.0 → 2.0.0

package/theme/components/_toast.scss

@@ -0,0 +1,48 @@
+@use '../config/mixins' as *;
+
+[data-ln-toast] {
+	@include toast-container;
+}
+
+// The <li> IS the card: structural (item) + visual (card) styling both bind
+// here, contextually — the <li> carries no static class (no-BEM), only the
+// filled/authored type class.
+[data-ln-toast] > li {
+	@include toast-item;
+	@include toast-card;
+}
+
+[data-ln-toast] > li.ln-enter {
+	@include toast-item-enter;
+}
+
+[data-ln-toast] > li.ln-out {
+	@include toast-item-out;
+}
+
+// Type → tone. The status→tone map lives here (one place): warn maps to the
+// warning family. SSR authors the class; the dynamic path fills it verbatim.
+[data-ln-toast] > li.success             { @include semantic-color(success); }
+[data-ln-toast] > li.error               { @include semantic-color(error); }
+[data-ln-toast] > li:is(.warn, .warning) { @include semantic-color(warning); }
+[data-ln-toast] > li.info                { @include semantic-color(info); }
+
+[data-ln-toast] .icon {
+	@include toast-icon;
+}
+
+[data-ln-toast] .icon ul {
+	@include toast-icon-list;
+}
+
+[data-ln-toast] .content {
+	@include toast-content;
+}
+
+[data-ln-toast] .title {
+	@include toast-title;
+}
+
+[data-ln-toast] .body {
+	@include toast-body;
+}

package/{scss → theme}/components/_toggle.scss

@@ -91,7 +91,7 @@
 button[data-ln-toggle-for]:has(> .ln-icon:only-child) {
 	--btn-bg:           transparent;
 	--btn-border:       transparent;
-	--btn-bg-hover:     var(--bg-sunken);
+	--btn-bg-hover:     var(--bg-hover);
 	--btn-border-hover: transparent;
 	--btn-fg-hover:     var(--color-fg);
 }

package/theme/components/_upload.scss

@@ -0,0 +1,45 @@
+@use '../config/mixins' as *;
+
+[data-ln-upload] {
+	@include upload;
+}
+
+[data-ln-upload-zone] {
+	@include upload-zone;
+}
+
+[data-ln-upload-zone][data-ln-upload-state="dragover"] {
+	@include upload-zone-dragover;
+}
+
+[data-ln-upload-list] {
+	@include upload-list;
+}
+
+[data-ln-upload-item] {
+	@include upload-item;
+}
+
+[data-ln-upload-item] [data-ln-field="name"] {
+	@include upload-name;
+}
+
+[data-ln-upload-item] [data-ln-field="sizeText"] {
+	@include upload-size;
+}
+
+[data-ln-upload-item] [data-ln-upload-progress] {
+	@include upload-progress;
+
+	[data-ln-progress] {
+		@include upload-progress-bar;
+	}
+}
+
+[data-ln-upload-item][data-ln-upload-state="error"] {
+	@include upload-item-error;
+}
+
+[data-ln-upload-item][data-ln-upload-state="deleting"]::before {
+	@include upload-item-deleting-spinner;
+}

package/{scss → theme}/config/_breakpoints.scss

@@ -14,7 +14,7 @@
 // CSS custom properties are also exposed at :root so JS can read via
 // getComputedStyle(document.documentElement).getPropertyValue('--bp-md').
 //
-// See docs/css/breakpoints.md for full usage guide.
+// See docs-mcp/css/breakpoints.md for full usage guide.
 // See docs/ln-ashlar-container-queries.md for container-query doctrine.
 // ==========================================================================
 

package/theme/config/_contrast.scss

@@ -0,0 +1,128 @@
+@use 'sass:color';
+@use 'sass:math';
+
+// ==========================================================================
+// Contrast solver — ln-ashlar
+// ==========================================================================
+// Pure Sass WCAG 2.x contrast math. No consumer yet — this module is not
+// @use'd anywhere. See .claude/plans/contrast-step1-solver.md.
+//
+// luminance()  — WCAG relative luminance of a color
+// contrast()   — WCAG contrast ratio between two colors
+// solve-l()    — binary search: HSL lightness meeting a target ratio
+// on-color()   — pick white/ink foreground meeting a target on a fill
+// ==========================================================================
+
+$ln-contrast-text: 7;   // text on neutral surfaces — AAA
+$ln-contrast-fill:  7;  // text on solid brand fills — AAA
+$ln-contrast-ui:    3;  // interactive boundaries (WCAG 1.4.11)
+
+// Dark foreground pole for on-color(). Anchored to a polarity-independent
+// literal, NOT to var(--color-neutral-900) or any ramp token — that token
+// is 222 47% 11% in light mode but flips to 221 30% 97% (near-white) in
+// dark mode, so binding to it would silently invert this solve on a dark
+// island. Same precedent as the scrim tokens in _palette.scss:139-141
+// (--color-scrim / --app-scrim-bg anchored to black rather than the ramp,
+// for the identical reason). The value itself is light mode's
+// --color-neutral-900, taken as a fixed Sass literal — not pure black —
+// because it is a color ln-ashlar actually paints (--fg-default resolves
+// to it in light mode), and it reproduces the approved architecture
+// plan's Decision A island percentages within ~1 point; pure black drifts
+// 4-6 points off those numbers. Do not rebind this to the ramp token.
+$_ln-contrast-ink: hsl(222 47% 11%);
+
+@function _linearize($channel) {
+	$c: math.div($channel, 255);
+	@if $c <= 0.03928 {
+		@return math.div($c, 12.92);
+	}
+	@return math.pow(math.div($c + 0.055, 1.055), 2.4);
+}
+
+@function luminance($color) {
+	$r: _linearize(color.channel($color, "red", $space: rgb));
+	$g: _linearize(color.channel($color, "green", $space: rgb));
+	$b: _linearize(color.channel($color, "blue", $space: rgb));
+	@return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
+}
+
+@function _contrast-l($lum-a, $lum-b) {
+	$lighter: math.max($lum-a, $lum-b);
+	$darker: math.min($lum-a, $lum-b);
+	@return math.div($lighter + 0.05, $darker + 0.05);
+}
+
+@function contrast($a, $b) {
+	@return _contrast-l(luminance($a), luminance($b));
+}
+
+// Binary search over integer HSL lightness (0–100) for the given hue/sat
+// that meets $target contrast against $against. luminance(L) is monotonic
+// in L for fixed hue/sat, so contrast-vs-a-fixed-pole is monotonic on
+// each side of that pole — direction depends on whether $against is the
+// light or dark pole:
+//   - light $against (>=0.5 luminance): search for the MAX L (closest to
+//     white) that still passes — i.e. how dark the color must stay.
+//   - dark $against (<0.5 luminance): search for the MIN L (closest to
+//     black) that still passes — i.e. how light the color must become.
+// Returns null when even the best-case pole (L:0 for the light branch,
+// L:100 for the dark branch) can't reach $target.
+//
+// Domain restriction: each branch assumes "meets target" stays monotonic
+// as the search crosses lightness, which only holds while the searched
+// color's luminance stays on one side of $against's luminance. Callers
+// must keep $against comfortably away from the 0.5 boundary; every
+// surface this system actually solves against sits far from it (darkest
+// planned surface ≈0.014 luminance), so this is not runtime-guarded here.
+@function solve-l($hue, $sat, $target, $against) {
+	$against-lum: luminance($against);
+	$light-surface: $against-lum >= 0.5;
+
+	@if $light-surface {
+		@if _contrast-l(luminance(hsl($hue, $sat, 0%)), $against-lum) < $target {
+			@return null;
+		}
+		$lo: 0;
+		$hi: 100;
+		@while $lo < $hi {
+			$mid: math.ceil(math.div($lo + $hi, 2));
+			@if _contrast-l(luminance(hsl($hue, $sat, $mid * 1%)), $against-lum) >= $target {
+				$lo: $mid;
+			} @else {
+				$hi: $mid - 1;
+			}
+		}
+		@return $lo;
+	} @else {
+		@if _contrast-l(luminance(hsl($hue, $sat, 100%)), $against-lum) < $target {
+			@return null;
+		}
+		$lo: 0;
+		$hi: 100;
+		@while $lo < $hi {
+			$mid: math.floor(math.div($lo + $hi, 2));
+			@if _contrast-l(luminance(hsl($hue, $sat, $mid * 1%)), $against-lum) >= $target {
+				$hi: $mid;
+			} @else {
+				$lo: $mid + 1;
+			}
+		}
+		@return $lo;
+	}
+}
+
+// Picks whichever of the two foreground poles — white, or the fixed dark
+// ink literal above — reaches $target contrast against $fill. white is
+// tried first (most fills in this system are mid-to-dark brand tones
+// needing a light foreground). Errors loudly if neither pole reaches the
+// target — that fill has no legal foreground at this target and the
+// caller must pick a different target or a different fill upstream.
+@function on-color($fill, $target) {
+	@if _contrast-l(luminance($fill), luminance(white)) >= $target {
+		@return white;
+	}
+	@if _contrast-l(luminance($fill), luminance($_ln-contrast-ink)) >= $target {
+		@return $_ln-contrast-ink;
+	}
+	@error "on-color(): no pole (white/#{$_ln-contrast-ink}) reaches contrast #{$target} against #{$fill}.";
+}

package/{scss → theme}/config/_density.scss

@@ -1,205 +1,191 @@
-// ==========================================================================
-// Density — ln-ashlar v2.0
-// ==========================================================================
-// Inverted density system. The :root default is DENSE (DocuFlow scale:
-// 14px body, 52px header, 232px sidebar). Density goes UP via the
-// [data-density] attribute, mirroring how [data-theme] works.
-//
-// Activation:
-//   <html>                              ← default: dense (DocuFlow look)
-//   <html data-density="compact">       ← explicit dense handle (same as base)
-//   <html data-density="comfortable">   ← pre-v2 default (16px / roomier)
-//   <html data-density="spacious">      ← large type, generous padding
-//   <main data-density="compact">       ← scope dense within comfortable page
-//
-// Density is an explicit user choice (settings toggle).
-// It is NEVER auto-switched by viewport — viewport breakpoints handle
-// layout, density handles information density inside that layout.
-//
-// What reacts: everything reading --padding-y, --gap, --text-body-*,
-// --text-label-*, --text-title-*, --text-heading-*, --text-display-sm,
-// --lh-*, --app-header-height, --app-sidebar-width, --density-row-h,
-// --btn-padding-y, --input-padding-y.
-//
-// Interactive controls (buttons, inputs, pills): density-reactive UPWARD.
-// Base (~38px) = WCAG AA. Comfortable (≥46px) and Spacious (≥54px) = AAA.
-// Controls rebind --btn-padding-y and --input-padding-y in up-tier scopes.
-// See docs/css/density.md §wcag for the height math.
-//
-// No parallel --density-* token scale. Density overrides existing base
-// tokens at the scope root, exactly like theme color overrides.
-// ==========================================================================
-
-:root {
-
-	// -----------------------------------------------------------------------
-	// Density — Row height
-	// Minimum row height for table rows and data lists. Kept density-named
-	// because it has no analogue in the base token scale.
-	// -----------------------------------------------------------------------
-	--density-row-h:    2.25rem;  // 36px — dense base
-}
-
-// ---------------------------------------------------------------------------
-// [data-density="compact"] — explicit handle for the dense base.
-//
-// Identical to :root. Exists so:
-//   (a) a switcher can write a single attribute across all tiers including
-//       returning to base (rather than removing the attribute)
-//   (b) a region inside a comfortable page can be scoped dense:
-//       <table data-density="compact">
-//
-// Rebinds --density-row-h so a compact-scoped region keeps the dense row
-// floor inside a comfortable/spacious page. NOTE: only row-h is restored —
-// full dense region-scoping (type, padding) would re-declare the base
-// surface; deferred. The global switcher returns to base via :root (dense).
-// ---------------------------------------------------------------------------
-[data-density="compact"] {
-	--density-row-h:    2.25rem;  // 36px — restore dense base in scoped context
-}
-
-// ---------------------------------------------------------------------------
-// [data-density="comfortable"] — pre-v2 default, now an explicit opt-in.
-//
-// Restores the roomy 16px / lh 1.6 scale that was the :root default before
-// design-v2. WCAG 2.5.5 AAA: buttons 46px, inputs/pills ≥44px.
-//
-// <html data-density="comfortable">   ← global comfortable
-// <aside data-density="comfortable">  ← scoped comfortable sidebar
-// ---------------------------------------------------------------------------
-[data-density="comfortable"] {
-
-	// -- Logical rhythm --------------------------------------------------
-	--padding-y:          var(--size-sm);       // 8px (was dense 6px)
-	--gap:                var(--size-sm);       // 8px (was dense 6px)
-
-	// -- Body text (restore 16px / 1.6 scale) ----------------------------
-	--text-body-md:       1rem;
-	--lh-body-md:         1.6;
-
-	--text-body-sm:       0.875rem;
-	--lh-body-sm:         1.5;
-
-	// Explicit rebind — form inputs consume --font-size and don't always
-	// cascade lazy var(--text-body-md) resolutions under a scope.
-	--font-size:          var(--text-body-md);
-	--line-height:        var(--lh-body-md);
-
-	// -- Labels ----------------------------------------------------------
-	--text-label-md:      0.875rem;
-	--lh-label-md:        1.4;
-
-	--text-label-sm:      0.8125rem;   // 13px (was dense 12px) — form-label, table th
-	--lh-label-sm:        1.4;
-
-	// -- Caption ---------------------------------------------------------
-	--text-caption:       0.8125rem;   // 13px — modal subtitle, validation errors
-	--lh-caption:         1.4;
-
-	// -- Titles ----------------------------------------------------------
-	--text-title-md:      1.125rem;
-	--lh-title-md:        1.4;
-
-	--text-title-sm:      1rem;
-	--lh-title-sm:        1.4;
-
-	// -- Headings --------------------------------------------------------
-	--text-heading-sm:    1.25rem;   --lh-heading-sm:  1.3;
-	--text-heading-md:    1.5rem;    --lh-heading-md:  1.25;
-	--text-heading-lg:    1.875rem;  --lh-heading-lg:  1.2;
-
-	// -- Display ---------------------------------------------------------
-	--text-display-sm:    2.25rem;   --lh-display-sm:  1.15;
-
-	// -- App shell -------------------------------------------------------
-	--app-header-height:  3.5rem;    // 56px (was dense 3.25rem)
-	--app-sidebar-width:  16rem;     // 256px (was dense 14.5rem)
-
-	// -- Row height ------------------------------------------------------
-	--density-row-h:      2.75rem;   // 44px (was dense 2.25rem)
-
-	// -- Interactive controls — WCAG 2.5.5 AAA ≥44px --------------------
-	// btn-padding-y: 2×12px + 20px line-height + 2px borders = 46px
-	// input-padding-y: indirection token read by form-input + pill-outline
-	--btn-padding-y:      var(--size-sm-up);    // 12px → buttons 46px
-	--btn-padding-x:      var(--size-md);       // 16px — restore roomy width
-	--input-padding-y:    var(--size-sm-up);    // 12px → inputs/pills ≥44px
-
-	// -- Card and table padding — roomier at comfortable/spacious --------
-	--card-padding-y:        var(--size-md);       // 16px
-	--card-padding-x:        var(--size-lg);       // 24px
-	--table-cell-padding-y:  var(--size-sm-up);    // 12px
-	--table-cell-padding-x:  var(--size-lg);       // 24px
-}
-
-// ---------------------------------------------------------------------------
-// [data-density="spacious"] — NEW tier above comfortable.
-//
-// For low-vision, touch-primary, or presentation contexts.
-// Body 18px, generous padding, larger shell. WCAG 2.5.5 AAA:
-// buttons 54px, inputs/pills ≥48px.
-//
-// <html data-density="spacious">
-// ---------------------------------------------------------------------------
-[data-density="spacious"] {
-
-	// -- Logical rhythm --------------------------------------------------
-	--padding-y:          var(--size-md);       // 16px
-	--gap:                var(--size-md);       // 16px
-
-	// -- Body text -------------------------------------------------------
-	--text-body-md:       1.125rem;             // 18px
-	--lh-body-md:         1.75;
-
-	--text-body-sm:       1rem;
-	--lh-body-sm:         1.6;
-
-	--font-size:          var(--text-body-md);
-	--line-height:        var(--lh-body-md);
-
-	// -- Labels ----------------------------------------------------------
-	--text-label-md:      1rem;
-	--lh-label-md:        1.5;
-
-	--text-label-sm:      0.9375rem;   // 15px (was dense 12px) — form-label, table th
-	--lh-label-sm:        1.45;
-
-	// -- Caption ---------------------------------------------------------
-	--text-caption:       0.9375rem;   // 15px — modal subtitle, validation errors
-	--lh-caption:         1.45;
-
-	// -- Titles ----------------------------------------------------------
-	--text-title-md:      1.25rem;
-	--lh-title-md:        1.5;
-
-	--text-title-sm:      1.125rem;
-	--lh-title-sm:        1.45;
-
-	// -- Headings --------------------------------------------------------
-	--text-heading-sm:    1.5rem;    --lh-heading-sm:  1.35;
-	--text-heading-md:    1.875rem;  --lh-heading-md:  1.3;
-	--text-heading-lg:    2.25rem;   --lh-heading-lg:  1.25;
-
-	// -- Display ---------------------------------------------------------
-	--text-display-sm:    2.75rem;   --lh-display-sm:  1.2;
-
-	// -- App shell -------------------------------------------------------
-	--app-header-height:  4rem;      // 64px
-	--app-sidebar-width:  17.5rem;   // 280px
-
-	// -- Row height ------------------------------------------------------
-	--density-row-h:      3rem;      // 48px
-
-	// -- Interactive controls — WCAG 2.5.5 AAA ≥48px --------------------
-	// btn-padding-y: 2×16px + 20px line-height + 2px borders = 54px
-	// input-padding-y: indirection token read by form-input + pill-outline
-	--btn-padding-y:      var(--size-md);       // 16px → buttons 54px
-	--btn-padding-x:      var(--size-lg);       // 24px — spacious width
-	--input-padding-y:    var(--size-md);       // 16px → inputs/pills ≥48px
-
-	// -- Card and table padding ------------------------------------------
-	--card-padding-y:        var(--size-lg);       // 24px
-	--card-padding-x:        var(--size-xl);       // 32px
-	--table-cell-padding-y:  var(--size-md);       // 16px
-	--table-cell-padding-x:  var(--size-xl);       // 32px
-}
+// ==========================================================================
+// Density — ln-ashlar v2.0
+// ==========================================================================
+// Inverted density system. The :root default is DENSE (DocuFlow scale:
+// 14px body, 52px header, 232px sidebar). Density goes UP via the
+// [data-density] attribute, mirroring how [data-mode] / [data-theme] works.
+//
+// Activation:
+//   <html>                              ← default: dense (DocuFlow look)
+//   <html data-density="compact">       ← explicit dense handle (same as base)
+//   <html data-density="comfortable">   ← pre-v2 default (16px / roomier)
+//   <html data-density="spacious">      ← large type, generous padding
+//   <main data-density="compact">       ← scope dense within comfortable page
+//
+// Density is an explicit user choice (settings toggle).
+// It is NEVER auto-switched by viewport — viewport breakpoints handle
+// layout, density handles information density inside that layout.
+//
+// What reacts: everything reading --padding-y, --gap, --text-body-*,
+// --text-label-*, --text-title-*, --text-heading-*, --text-display-sm,
+// --lh-*, --app-header-height, --app-sidebar-width, --density-row-h,
+// --btn-padding-y, --input-padding-y.
+//
+// Interactive controls (buttons, inputs, pills): density-reactive UPWARD.
+// Base (~38px) = WCAG AA. Comfortable (≥46px) and Spacious (≥54px) = AAA.
+// Controls rebind --btn-padding-y and --input-padding-y in up-tier scopes.
+// See docs-mcp/css/density.md §wcag for the height math.
+//
+// No parallel --density-* token scale. Density overrides existing base
+// tokens at the scope root, exactly like theme color overrides.
+// ==========================================================================
+
+:root {
+
+	// -----------------------------------------------------------------------
+	// Density — Row height
+	// Minimum row height for table rows and data lists. Kept density-named
+	// because it has no analogue in the base token scale.
+	// -----------------------------------------------------------------------
+	--density-row-h:    2.25rem;  // 36px — dense base
+}
+
+// ---------------------------------------------------------------------------
+// [data-density="compact"] — explicit handle for the dense base.
+//
+// Identical to :root. Exists so:
+//   (a) a switcher can write a single attribute across all tiers including
+//       returning to base (rather than removing the attribute)
+//   (b) a region inside a comfortable page can be scoped dense:
+//       <table data-density="compact">
+//
+// Rebinds --density-row-h so a compact-scoped region keeps the dense row
+// floor inside a comfortable/spacious page. NOTE: only row-h is restored —
+// full dense region-scoping (type, padding) would re-declare the base
+// surface; deferred. The global switcher returns to base via :root (dense).
+// ---------------------------------------------------------------------------
+[data-density="compact"] {
+	--density-row-h:    2.25rem;  // 36px — restore dense base in scoped context
+}
+
+// ---------------------------------------------------------------------------
+// [data-density="comfortable"] — pre-v2 default, now an explicit opt-in.
+//
+// Restores the roomy 16px / lh 1.6 scale that was the :root default before
+// design-v2. WCAG 2.5.5 AAA: buttons 46px, inputs/pills ≥44px.
+//
+// <html data-density="comfortable">   ← global comfortable
+// <aside data-density="comfortable">  ← scoped comfortable sidebar
+// ---------------------------------------------------------------------------
+[data-density="comfortable"] {
+
+	// -- Logical rhythm --------------------------------------------------
+	--padding-y:          var(--size-sm);       // 8px (was dense 6px)
+	--gap:                var(--size-sm);       // 8px (was dense 6px)
+
+	// -- Body text (restore 16px / 1.6 scale) ----------------------------
+	--text-body-md:       1rem;
+	--lh-body-md:         1.6;
+
+	--text-body-sm:       0.875rem;
+	--lh-body-sm:         1.5;
+
+	// Explicit rebind — form inputs consume --font-size and don't always
+	// cascade lazy var(--text-body-md) resolutions under a scope.
+	--font-size:          var(--text-body-md);
+	--line-height:        var(--lh-body-md);
+
+	// -- Labels ----------------------------------------------------------
+	--text-label-md:      0.875rem;
+	--lh-label-md:        1.4;
+
+	--text-label-sm:      0.8125rem;   // 13px (was dense 12px) — form-label, table th
+	--lh-label-sm:        1.4;
+
+	// -- Caption ---------------------------------------------------------
+	--text-caption:       0.8125rem;   // 13px — modal subtitle, validation errors
+	--lh-caption:         1.4;
+
+	// -- Titles ----------------------------------------------------------
+	--text-title-md:      1.125rem;
+	--lh-title-md:        1.4;
+
+	--text-title-sm:      1rem;
+	--lh-title-sm:        1.4;
+
+	// -- Headings --------------------------------------------------------
+	--text-heading-sm:    1.25rem;   --lh-heading-sm:  1.3;
+	--text-heading-md:    1.5rem;    --lh-heading-md:  1.25;
+	--text-heading-lg:    1.875rem;  --lh-heading-lg:  1.2;
+
+	// -- Display ---------------------------------------------------------
+	--text-display-sm:    2.25rem;   --lh-display-sm:  1.15;
+
+	// -- App shell -------------------------------------------------------
+	--app-header-height:  3.5rem;    // 56px (was dense 3.25rem)
+	--app-sidebar-width:  16rem;     // 256px (was dense 14.5rem)
+
+	// -- Row height ------------------------------------------------------
+	--density-row-h:      2.75rem;   // 44px (was dense 2.25rem)
+
+	// -- Interactive controls — Tailwind / shadcn standard (38px height) ---
+	--btn-padding-y:      var(--size-sm);       // 8px → buttons 38px
+	--btn-padding-x:      var(--size-md);       // 16px
+	--input-padding-y:    var(--size-sm);       // 8px → inputs/selects 38px
+}
+
+// ---------------------------------------------------------------------------
+// [data-density="spacious"] — NEW tier above comfortable.
+//
+// For low-vision, touch-primary, or presentation contexts.
+// Body 18px, generous padding, larger shell. WCAG 2.5.5 AAA:
+// buttons 54px, inputs/pills ≥48px.
+//
+// <html data-density="spacious">
+// ---------------------------------------------------------------------------
+[data-density="spacious"] {
+
+	// -- Logical rhythm --------------------------------------------------
+	--padding-y:          var(--size-md);       // 16px
+	--gap:                var(--size-md);       // 16px
+
+	// -- Body text -------------------------------------------------------
+	--text-body-md:       1.125rem;             // 18px
+	--lh-body-md:         1.75;
+
+	--text-body-sm:       1rem;
+	--lh-body-sm:         1.6;
+
+	--font-size:          var(--text-body-md);
+	--line-height:        var(--lh-body-md);
+
+	// -- Labels ----------------------------------------------------------
+	--text-label-md:      1rem;
+	--lh-label-md:        1.5;
+
+	--text-label-sm:      0.9375rem;   // 15px (was dense 12px) — form-label, table th
+	--lh-label-sm:        1.45;
+
+	// -- Caption ---------------------------------------------------------
+	--text-caption:       0.9375rem;   // 15px — modal subtitle, validation errors
+	--lh-caption:         1.45;
+
+	// -- Titles ----------------------------------------------------------
+	--text-title-md:      1.25rem;
+	--lh-title-md:        1.5;
+
+	--text-title-sm:      1.125rem;
+	--lh-title-sm:        1.45;
+
+	// -- Headings --------------------------------------------------------
+	--text-heading-sm:    1.5rem;    --lh-heading-sm:  1.35;
+	--text-heading-md:    1.875rem;  --lh-heading-md:  1.3;
+	--text-heading-lg:    2.25rem;   --lh-heading-lg:  1.25;
+
+	// -- Display ---------------------------------------------------------
+	--text-display-sm:    2.75rem;   --lh-display-sm:  1.2;
+
+	// -- App shell -------------------------------------------------------
+	--app-header-height:  4rem;      // 64px
+	--app-sidebar-width:  17.5rem;   // 280px
+
+	// -- Row height ------------------------------------------------------
+	--density-row-h:      3rem;      // 48px
+
+	// -- Interactive controls — WCAG 2.5.5 AAA ≥48px --------------------
+	// btn-padding-y: 2×16px + 20px line-height + 2px borders = 54px
+	// input-padding-y: indirection token read by form-input + pill-outline
+	--btn-padding-y:      var(--size-md);       // 16px → buttons 54px
+	--btn-padding-x:      var(--size-lg);       // 24px — spacious width
+	--input-padding-y:    var(--size-md);       // 16px → inputs/pills ≥48px
+}