@livenetworks/ashlar 2.1.13 → 2.2.1

package/theme/config/_density.scss

@@ -1,104 +1,236 @@
-// ==========================================================================
-// Density — ln-ashlar
-// ==========================================================================
-// Information density scaling via spatial compression.
-//
-// The :root default is dense base (DocuFlow scale: 36px row height floor,
-// 6px padding-y, 52px header, 232px sidebar). Density scales spacing upward
-// via the [data-density] attribute, mirroring how [data-mode] / [data-theme] works.
-//
-// Activation:
-//   <html>                              ← default: compact base
-//   <html data-density="compact">       ← explicit compact handle (same as base)
-//   <html data-density="comfortable">   ← roomy default (44px row floor, 8px padding)
-//   <html data-density="spacious">      ← generous touch/kiosk density (48px row floor, 16px 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: spatial rhythm and layout geometry:
-// --padding-y, --gap, --app-header-height, --app-sidebar-width,
-// --density-row-h, --btn-padding-y, --btn-padding-x, --input-padding-y.
-//
-// Typography (font-size, line-height) remains stable across density modes:
-//   (1) Prevents text disappearing/reappearing (glyph cache drop on variable fonts)
-//   (2) Eliminates layout thrashing during CSS transitions
-//   (3) Enables smooth, gentle CSS transitions on padding and row height
-// ==========================================================================
-
-: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">
-// ---------------------------------------------------------------------------
-[data-density="compact"] {
-	--density-row-h:      2.25rem;            // 36px — restore dense base in scoped context
-	--input-padding-y:    var(--size-xs-up);  // 6px — compact input padding
-}
-
-// ---------------------------------------------------------------------------
-// [data-density="comfortable"] — roomy spacing opt-in.
-//
-// WCAG 2.5.5 AAA: buttons 38-44px, inputs/pills ≥44px, table rows 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)
-
-	// -- 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 — roomy 44px inputs ------------------------
-	--input-padding-y:    var(--size-sm-up);    // 12px → inputs/selects roomy
-}
-
-// ---------------------------------------------------------------------------
-// [data-density="spacious"] — generous spacing tier above comfortable.
-//
-// For low-vision, touch-primary, or presentation contexts.
-// Generous padding, larger shell. WCAG 2.5.5 AAA:
-// inputs/pills ≥48px, table rows 48px.
-//
-// <html data-density="spacious">
-// ---------------------------------------------------------------------------
-[data-density="spacious"] {
-
-	// -- Logical rhythm --------------------------------------------------
-	--padding-y:          var(--size-md);       // 16px
-	--gap:                var(--size-md);       // 16px
-
-	// -- App shell -------------------------------------------------------
-	--app-header-height:  4rem;                 // 64px
-	--app-sidebar-width:  17.5rem;              // 280px
-
-	// -- Row height ------------------------------------------------------
-	--density-row-h:      3rem;                 // 48px
-
-	// -- Interactive controls — generous touch targets -------------------
-	--input-padding-y:    var(--size-md);       // 16px → inputs/pills ≥48px
-}
+@use 'mixins/breakpoints' as *;
+
+// ==========================================================================
+// Density — ln-ashlar
+// ==========================================================================
+// The :root default is COMFORTABLE (16px body, 44px controls, 56px header,
+// 256px sidebar). Density goes down or up via [data-density]:
+//
+//   <html>                              ← default: comfortable
+//   <html data-density="compact">       ← dense DocuFlow scale (14px / 36px)
+//   <html data-density="comfortable">   ← explicit handle (same as default)
+//   <html data-density="spacious">      ← large type, generous padding
+//   <table data-density="compact">      ← scope dense within a page
+//
+// _tokens.scss declares the dense values as the raw base; the comfortable
+// block re-binds them at :root, so they surface through
+// [data-density="compact"].
+//
+// Density is an explicit user choice (settings toggle). It is NEVER
+// auto-switched by viewport; the mobile rhythm block at the end of this
+// file tightens padding/gap at narrow widths independently.
+//
+// What reacts: the type roles, spatial rhythm, shell geometry, control
+// sizing, and card/table padding. Each tier owns its own type scale.
+//
+// Interactive controls: compact 36px = WCAG AA; comfortable 44px and
+// spacious 54px = AAA. All controls share --control-line-height.
+// ==========================================================================
+
+: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
+}
+
+// ---------------------------------------------------------------------------
+// :root / [data-density="comfortable"] — the default.
+//
+// WCAG 2.5.5 AAA: buttons, inputs and pills 44px.
+// ---------------------------------------------------------------------------
+:root,
+[data-density="comfortable"] {
+
+	// -- Logical rhythm --------------------------------------------------
+	--padding-y:          var(--size-sm);       // 8px
+	--gap:                var(--size-sm);       // 8px
+
+	// -- Body text -------------------------------------------------------
+	--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 — 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
+	--app-sidebar-width:  16rem;     // 256px
+
+	// -- Row height ------------------------------------------------------
+	--density-row-h:      2.75rem;   // 44px
+
+	// -- Interactive controls — WCAG 2.5.5 AAA ≥44px --------------------
+	// Shared control contract: 26px line box + 2×8px + 2px borders = 44px
+	// for buttons, inputs, selects and pills alike.
+	--control-line-height: 1.625rem;            // 26px
+	--btn-padding-y:      var(--size-sm);       // 8px → buttons 44px
+	--btn-padding-x:      var(--size-md);       // 16px
+	--input-padding-y:    var(--size-sm);       // 8px → inputs/pills 44px
+
+	// -- Card and table padding ------------------------------------------
+	--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="compact"] — the dense DocuFlow scale.
+//
+// Declared after the :root default so it wins on <html>; also scopes a
+// dense region inside a comfortable/spacious page.
+// ---------------------------------------------------------------------------
+[data-density="compact"] {
+	--padding-y:          var(--size-xs-up);    // 6px
+	--gap:                var(--size-xs-up);    // 6px
+
+	--text-body-md:       0.875rem;  --lh-body-md:    1.5;
+	--text-body-sm:       0.8125rem; --lh-body-sm:    1.45;
+	--font-size:          var(--text-body-md);
+	--line-height:        var(--lh-body-md);
+
+	--text-label-md:      0.8125rem; --lh-label-md:   1.4;
+	--text-label-sm:      0.75rem;   --lh-label-sm:   1.4;
+	--text-caption:       0.75rem;   --lh-caption:    1.4;
+
+	--text-title-md:      1rem;      --lh-title-md:   1.3;
+	--text-title-sm:      0.875rem;  --lh-title-sm:   1.3;
+
+	--text-heading-sm:    1.125rem;  --lh-heading-sm: 1.25;
+	--text-heading-md:    1.25rem;   --lh-heading-md: 1.2;
+	--text-heading-lg:    1.75rem;   --lh-heading-lg: 1.15;
+	--text-display-sm:    1.875rem;  --lh-display-sm: 1.1;
+
+	--app-header-height:  3.25rem;   // 52px
+	--app-sidebar-width:  14.5rem;   // 232px
+	--density-row-h:      2.25rem;   // 36px
+
+	// Control contract — 22px line box + 2×6px + 2px = 36px
+	--control-line-height: 1.375rem;
+	--btn-padding-y:       var(--size-xs-up);
+	--btn-padding-x:       var(--size-sm-up);
+	--input-padding-y:     var(--size-xs-up);
+
+	--card-padding-y:        var(--size-sm-up);   // 12px
+	--card-padding-x:        var(--size-md);      // 16px
+	--table-cell-padding-y:  var(--size-sm);      // 8px
+	--table-cell-padding-x:  var(--size-md);      // 16px
+}
+
+// ---------------------------------------------------------------------------
+// [data-density="spacious"] — the 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 54px.
+//
+// <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 — 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 --------------------------------------------
+	// Shared control contract: 28px line box + 2×12px + 2px borders = 54px
+	--control-line-height: 1.75rem;             // 28px
+	--btn-padding-y:      var(--size-sm-up);    // 12px → buttons 54px
+	--btn-padding-x:      var(--size-lg);       // 24px
+	--input-padding-y:    var(--size-sm-up);    // 12px → inputs/pills 54px
+
+	// -- 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
+}
+
+// ---------------------------------------------------------------------------
+// Mobile rhythm — logical tokens tighten at ≤ md viewport, whatever the
+// density tier (declared last so it stacks on top of every tier).
+// ---------------------------------------------------------------------------
+@include mq-down(md) {
+	:root {
+		--padding-y: var(--size-xs);
+		--gap:       var(--size-xs-up);
+	}
+}

package/theme/config/_palette.scss

@@ -11,64 +11,51 @@
 	--color-secondary-light:   160 84% 94%;
 	--color-secondary-lighter: 160 84% 97%;
 
-	// Status colors
-	--color-success:         142 76% 36%;
+	// Status colors — solid tones sit below the 7:1 text/fill target;
+	// ratios are against white (D2: design values kept exact).
+	--color-success:         142 72% 29%;   // 5.07:1
 	--color-success-light:   142 71% 94%;
 	--color-success-lighter: 142 71% 97%;
 
-	--color-error:           0 84% 48%;
+	--color-error:           0 72% 51%;     // 4.80:1
 	--color-error-light:     0 84% 94%;
 	--color-error-lighter:   0 84% 97%;
 
-	--color-warning:         32 95% 38%;
+	--color-warning:         26 90% 37%;    // 5.04:1
 	--color-warning-light:   38 92% 94%;
 	--color-warning-lighter: 38 92% 97%;
 
-	--color-info:            200 95% 38%;
+	--color-info:            221 83% 53%;   // 5.20:1
 	--color-info-light:      199 89% 94%;
 	--color-info-lighter:    199 89% 97%;
 
-	// Neutral scale (canonical greys)
-	--color-neutral-50:  210 20% 98%;
-	--color-neutral-100: 220 14% 96%;
-	--color-neutral-150: 220 13% 93%;
-	--color-neutral-175: 220 13% 91%;
-	--color-neutral-200: 220 13% 90%;
-	--color-neutral-300: 216 12% 84%;
-	--color-neutral-400: 218 11% 58%;
-	--color-neutral-500: 220 10% 40%;
-	--color-neutral-600: 215 14% 34%;
-	--color-neutral-700: 217 19% 27%;
-	--color-neutral-800: 215 28% 17%;
+	// Neutral scale — cool slate greys
+	--color-neutral-50:  210 40% 98%;
+	--color-neutral-100: 210 40% 96%;
+	--color-neutral-150: 214 35% 93%;
+	--color-neutral-175: 214 33% 92%;
+	--color-neutral-200: 214 32% 91%;
+	--color-neutral-300: 213 27% 84%;
+	--color-neutral-400: 215 20% 65%;
+	--color-neutral-500: 215 16% 47%;
+	--color-neutral-600: 215 19% 35%;
+	--color-neutral-700: 215 25% 27%;
+	--color-neutral-800: 217 33% 17%;
 	--color-neutral-900: 222 47% 11%;
 
 	// Base canvas background
 	--color-white: 0 0% 100%;
 
-	// Shadows — cool-tinted, dual-layer (ambient + key light)
+	// Shadows — soft, diffuse, single layer. Resting surfaces are defined by
+	// their border; depth is reserved for floating layers.
 	--shadow-none: none;
 
-	--shadow-xs:
-		0 1px 2px 0 hsl(220 40% 10% / 0.05);
-
-	--shadow-sm:
-		0 1px 3px 0 hsl(220 40% 10% / 0.07),
-		0 1px 2px -1px hsl(220 40% 10% / 0.05);
-
-	--shadow-md:
-		0 4px 6px -1px hsl(220 40% 10% / 0.08),
-		0 2px 4px -2px hsl(220 40% 10% / 0.05);
-
-	--shadow-lg:
-		0 10px 15px -3px hsl(220 40% 10% / 0.08),
-		0 4px 6px -4px hsl(220 40% 10% / 0.04);
-
-	--shadow-xl:
-		0 20px 25px -5px hsl(220 40% 10% / 0.09),
-		0 8px 10px -6px hsl(220 40% 10% / 0.04);
-
-	--shadow-2xl:
-		0 25px 50px -12px hsl(220 40% 10% / 0.18);
+	--shadow-xs:  0 1px 2px hsl(215 40% 20% / 0.04);
+	--shadow-sm:  0 2px 6px hsl(215 40% 20% / 0.05);
+	--shadow-md:  0 4px 16px -4px hsl(215 40% 20% / 0.10);
+	--shadow-lg:  0 12px 32px -8px hsl(215 40% 20% / 0.14);
+	--shadow-xl:  0 24px 48px -12px hsl(215 40% 20% / 0.18);
+	--shadow-2xl: 0 32px 64px -16px hsl(215 40% 20% / 0.22);
 
 	--shadow-inner:
 		inset 0 2px 4px 0 hsl(220 40% 15% / 0.06);
@@ -79,24 +66,29 @@
 	// Value vocabulary — what bg/fg/border/shadow values exist
 	--bg-base:     hsl(var(--color-white));
 	--bg-elevated: var(--bg-base);
-	--bg-sunken:   hsl(var(--color-neutral-100));
-	--bg-recessed: hsl(var(--color-neutral-50));
+	--bg-sunken:   hsl(var(--color-neutral-50));    // quiet chrome (thead, tracks)
+	--bg-recessed: hsl(var(--color-neutral-100));   // page canvas
 
 	--bg-hover:  hsl(var(--color-neutral-100));
 	--bg-active: hsl(var(--color-neutral-150));
 
-	// Bound low on the ramp so every tier clears 7:1 against --bg-active,
-	// the lightest surface any of them lands on (8.02 / 11.52 / 14.11).
-	--fg-default: hsl(var(--color-neutral-900));
-	--fg-muted:   hsl(var(--color-neutral-800));
-	--fg-subtle:  hsl(var(--color-neutral-700));
+	// fg-muted and fg-subtle are below the 7:1 target (D2: design values kept).
+	--fg-default: hsl(var(--color-neutral-800));
+	--fg-muted:   hsl(213 20% 40%);                 // 6.07:1 on white
+	--fg-subtle:  hsl(var(--color-neutral-500));    // 4.72:1 on white, 4.30:1 on the canvas
 
 	--border-subtle:       hsl(var(--color-neutral-200));
 	--border-strong:       hsl(var(--color-neutral-300));
+	--border-strong-hover: hsl(var(--color-neutral-500));   // 4.72:1 on white; one ramp step darker than --border-ui
 
 	// Interactive boundaries only (input/select/checkbox). 1.4.11 wants 3:1
 	// for these; --border-subtle/-strong stay decorative and exempt.
-	--border-ui:           hsl(var(--color-neutral-400));
+	// Solved literal: slate-300 is 1.48:1, slate-400 is 2.57:1.
+	--border-ui:           hsl(215 20% 58%);        // 3.24:1 on white
+
+	// Lightness step for accent hover/active (relative colour syntax,
+	// unitless). Light surfaces darken; dark values flip the sign.
+	--accent-hover-shift: -8;
 
 	--color-scrim:  hsl(var(--color-neutral-900) / 0.5);
 
@@ -143,14 +135,23 @@
 
 	--border-subtle:       hsl(var(--color-neutral-175));
 	--border-strong:       hsl(var(--color-neutral-300));
+	--border-strong-hover: hsl(var(--color-neutral-400));
 
 	--border-ui:           hsl(var(--color-neutral-400));
 
+	// Dark surfaces lighten on hover.
+	--accent-hover-shift: 8;
+
 	// Scrims — anchored to black, not the ramp: dark --color-neutral-900 is
 	// near-white, so binding either to it would need an index flip.
 	--color-scrim:  hsl(0 0% 0% / 0.6);
 	--app-scrim-bg: hsl(0 0% 0% / 0.4);
 
+	// Status tones — brighter on dark surfaces
+	--color-success:         142 69% 48%;
+	--color-warning:         38 92% 55%;
+	--color-info:            213 94% 68%;
+
 	// Status tint layers — re-tuned for dark surfaces
 	--color-success-light:   142 50% 18%;
 	--color-success-lighter: 142 40% 13%;
@@ -159,7 +160,7 @@
 	--color-info-light:      217 55% 22%;
 	--color-info-lighter:    217 45% 15%;
 	
-	--color-error:           0 84% 65%; // Lighter red for text contrast in dark mode
+	--color-error:           0 91% 71%; // Lighter red for text contrast in dark mode
 	--color-error-light:     0 50% 20%;
 	--color-error-lighter:   0 40% 14%;
 
@@ -215,7 +216,7 @@
 // stylesheet load order, which is brand.css's whole guarantee.
 // ---------------------------------------------------------------------------
 :where(:root) {
-	--brand-primary:   221 83% 43%;
+	--brand-primary:   201 96% 32%;   // 5.94:1 on white (D2: design value kept)
 	--brand-secondary: 160 84% 36%;
 }
 
@@ -239,6 +240,8 @@
 	--color-border: var(--border-subtle);
 	--shadow:       var(--shadow-resting);
 	--radius:       var(--radius-md);
+	// Indirection so a skin that zeroes --radius-lg (glass) reaches panels.
+	--panel-radius: var(--radius-lg);
 
 	// accent — tints computed against the LOCAL --bg-base, so one
 	// formula serves both themes. The two override slots are
@@ -272,3 +275,22 @@
 	--btn-fg-hover:     var(--color-fg);
 	--btn-border-hover: var(--border-strong);
 }
+
+// ---------------------------------------------------------------------------
+// Default dark lift — brighter accent with an ink label on dark surfaces.
+// Zero specificity; [data-theme] subtrees are excluded so an ancestor theme's
+// declaration is not clobbered (Declaration-Site Invariant).
+// ---------------------------------------------------------------------------
+:where([data-mode="dark"]:not([data-theme], [data-theme] *)) {
+	--brand-primary:   199 89% 64%;   // 8.79:1 vs ink
+	--color-accent-fg: hsl(var(--color-ink));
+	--check-mark:      var(--check-mark-on-dark);
+}
+
+@media (prefers-color-scheme: dark) {
+	:where(:root:not([data-mode="light"]):not([data-theme])) {
+		--brand-primary:   199 89% 64%;
+		--color-accent-fg: hsl(var(--color-ink));
+		--check-mark:      var(--check-mark-on-dark);
+	}
+}

package/theme/config/_theme.scss

@@ -16,6 +16,7 @@
 //   :root:not([data-mode="light"])          ← opt-out of auto
 //   <html data-skin="glass">                ← structural preset (flat, borderless)
 //   <html data-theme="ocean">               ← brand palette preset
+//   <aside data-mode="dark" data-theme="navy"> ← dark navy brand region
 //
 // See docs-mcp/css/theming.md for the full guide.
 // ==========================================================================
@@ -153,6 +154,28 @@
 	}
 }
 
+// Brand region — a dark-navy surface island, e.g. a sidebar. Always paired
+// with data-mode="dark": the ramp re-seats the dark vocabulary on navy.
+//   <aside data-mode="dark" data-theme="navy">
+[data-theme="navy"] {
+	&[data-mode="dark"],
+	:where([data-mode="dark"]) & {
+		--color-neutral-50:  213 74% 8%;
+		--color-neutral-100: 213 74% 11%;
+		--color-neutral-150: 213 55% 15%;
+		--color-neutral-175: 213 50% 17%;
+		--color-neutral-200: 213 45% 20%;
+		--color-neutral-300: 213 35% 28%;
+		--color-neutral-400: 213 30% 40%;   // 2.82:1 on navy-100, under the 3:1 ui target
+		--color-neutral-600: 215 20% 65%;   // 6.80:1 on navy-100 (fg-subtle)
+		--color-neutral-700: 213 27% 84%;   // 11.79:1
+		--color-neutral-900: 210 40% 98%;   // 16.70:1
+		--brand-primary: 199 89% 64%;       // 8.59:1 on navy-100
+		--color-accent-fg: hsl(var(--color-ink));
+		--check-mark: var(--check-mark-on-dark);
+	}
+}
+
 // ---------------------------------------------------------------------------
 // Named skins — structural/physics presets. Polarity-agnostic. Activation:
 //   <html data-skin="glass">
@@ -185,9 +208,10 @@
 	--btn-bg-hover: var(--bg-hover);
 	--btn-border: var(--color-accent);
 	// --color-accent-hover is declared only below <html> (a, mixin bodies);
-	// invalid at computed-value time here — derive locally. l - 6 matches
-	// @mixin btn's own accent-hover so neutral and accent buttons agree.
-	--btn-border-hover: hsl(from var(--color-accent) h s calc(l - 6));
+	// invalid at computed-value time here — derive locally. Follows
+	// --accent-hover-shift like @mixin btn's own accent-hover, so neutral
+	// and accent buttons agree.
+	--btn-border-hover: hsl(from var(--color-accent) h s calc(l + var(--accent-hover-shift)));
 
 	// ── Accent buttons — translucent fill via consumer-scope rebind
 	// Rebind --btn-* on the button itself (not at skin :root) so
@@ -263,31 +287,3 @@
 		--btn-border-hover: hsl(var(--color-primary));
 	}
 }
-
-[data-skin="soft"] {
-	// Soft — playful, maximum radius, heavily shadow-based, no borders.
-	--radius-xs: 0.5rem;
-	--radius-sm: 0.75rem;
-	--radius-md: 1rem;
-	--radius-lg: 1.5rem;
-	--radius-xl: 2rem;
-	--radius-2xl: 2.5rem;
-
-	// Override shadows to be much larger and softer (volumetric look)
-	--shadow-sm: 0 8px 16px -2px rgba(0, 0, 0, 0.08);
-	--shadow-md: 0 12px 24px -4px rgba(0, 0, 0, 0.12);
-	--shadow-lg: 0 24px 48px -4px rgba(0, 0, 0, 0.16);
-
-	// Floating elements are more pronounced
-	--shadow-resting: var(--shadow-sm);
-	--shadow-floating: var(--shadow-lg);
-
-	// Remove default subtle borders (cards, panels) so they rely solely on shadows
-	--border-subtle: transparent;
-
-	// ── Buttons — pill shapes, floating, no borders
-	--btn-border: transparent;
-	--btn-border-hover: transparent;
-	--btn-bg: var(--bg-elevated);
-	--btn-bg-hover: var(--bg-hover);
-}