@teamblind-chorus/ui 1.1.0 → 2.0.0

package/dist/styles.css

@@ -160,10 +160,9 @@ textarea {
    `box-shadow` on the button itself. Because the pseudo-element is
    `position: absolute`, the ring is out of flow: it contributes nothing
    to layout, so neither the button, a button group's gap, nor any
-   sibling shifts when focus arrives. The two-layer composition is
-   DESIGN.md's canonical recipe, painted *outward* via stacked box-shadows
-   (1px `focusInset` counter-ring at 0→1px, then the 2px `focus` stroke
-   visible at 1→3px). Sits at `z-index: 2`, above the state-overlay
+   sibling shifts when focus arrives. The single-ring composition is
+   DESIGN.md's canonical recipe, painted *outward* as a 1px
+   `border.focused` box-shadow. Sits at `z-index: 2`, above the state-overlay
    `::before` (z-index 0) and the label / icon (z-index 1). */
 .chorus-button--standard::after {
   content: '';
@@ -178,9 +177,7 @@ textarea {
 
 .chorus-button--standard:focus-visible::after,
 .chorus-button--standard[data-force-state="focused"]::after {
-  box-shadow:
-    0 0 0 var(--button-standard-focus-inset-width) var(--button-standard-focus-inset-color),
-    0 0 0 calc(var(--button-standard-focus-outer-width) + var(--button-standard-focus-inset-width)) var(--button-standard-focus-outer-color);
+  box-shadow: 0 0 0 var(--sys-borderWidth-hairline) var(--button-standard-focus-outer-color);
 }
 
 .chorus-button--standard:disabled::after { box-shadow: none; }
@@ -252,7 +249,7 @@ textarea {
 .chorus-button-group__label {
   text-align: center;
   margin-bottom: var(--sys-layout-stack-md);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
   font-size: var(--sys-typo-body-md-size);
   font-weight: var(--sys-typo-body-md-weight);
   line-height: var(--sys-typo-body-md-line);
@@ -260,7 +257,7 @@ textarea {
 }
 
 .chorus-button-group__label strong {
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
 }
 
 /* Docked footer bar — full-bleed surface pinned to the bottom of the app.
@@ -269,7 +266,7 @@ textarea {
    passing behind reads as a separate region. Renders in flow — PageShell
    owns the pin, so the bar must NOT set position: sticky/fixed itself. */
 .chorus-button-group--docked {
-  background: var(--sys-color-surface);
+  background: var(--sys-color-surface-default);
   padding: var(--sys-layout-container-md);
   box-shadow: var(--sys-elevation-sheet);
 }
@@ -329,7 +326,7 @@ textarea {
 /* Focus ring — dedicated overlay layer (`::after`), so it never affects
    layout (the FAB's footprint is fixed; nothing reflows on focus) and
    never collides with the FAB's own `box-shadow` (the floating
-   elevation, which stays untouched underneath). Canonical two-layer
+   elevation, which stays untouched underneath). Canonical single-ring
    composition, painted outward; `z-index: 2`, above the overlay
    `::before` (z-index 0) and the label / icon (z-index 1). */
 .chorus-button--fab::after {
@@ -345,9 +342,7 @@ textarea {
 
 .chorus-button--fab:focus-visible::after,
 .chorus-button--fab[data-force-state="focused"]::after {
-  box-shadow:
-    0 0 0 var(--button-fab-focus-inset-width) var(--button-fab-focus-inset-color),
-    0 0 0 calc(var(--button-fab-focus-outer-width) + var(--button-fab-focus-inset-width)) var(--button-fab-focus-outer-color);
+  box-shadow: 0 0 0 var(--sys-borderWidth-hairline) var(--button-fab-focus-outer-color);
 }
 
 .chorus-button--fab__icon,
@@ -393,11 +388,7 @@ textarea {
   --chip-overlay-hover: var(--sys-state-hover);
   --chip-overlay-pressed: var(--sys-state-pressed);
   --chip-overlay-focus: var(--sys-state-focus);
-  --chip-disabled-opacity: var(--sys-state-disabled);
-  --chip-focus-outer-width: var(--sys-borderWidth-thin);
-  --chip-focus-outer-color: var(--sys-color-focus);
-  --chip-focus-inset-width: var(--sys-borderWidth-hairline);
-  --chip-focus-inset-color: var(--sys-color-focusInset);
+  --chip-focus-outer-color: var(--sys-color-border-focused);
   font-size: var(--sys-typo-label-sm-size);
   font-weight: var(--sys-typo-label-sm-weight);
   line-height: var(--sys-typo-label-sm-line);
@@ -431,8 +422,8 @@ textarea {
 
 .chorus-chip--filter {
   --chip-bg: transparent;
-  --chip-label: var(--sys-color-onSurface);
-  --chip-border-color: var(--sys-color-outlineVariant);
+  --chip-label: var(--sys-color-text-default);
+  --chip-border-color: var(--sys-color-border-default);
   /* 32 capsule — anatomy rung, resolved via ref.space. */
   --chip-min-height: var(--ref-space-400);
   --chip-padding-block: var(--sys-layout-container-2xs);
@@ -441,8 +432,8 @@ textarea {
 }
 
 .chorus-chip--filter.is-selected {
-  --chip-bg: var(--sys-color-inverseSurface);
-  --chip-label: var(--sys-color-inverseOnSurface);
+  --chip-bg: var(--sys-color-background-inverse);
+  --chip-label: var(--sys-color-text-inverse);
   --chip-border-color: transparent;
 }
 
@@ -455,8 +446,8 @@ textarea {
    so the recipe falls out of the same chip CSS without a per-state
    override. */
 .chorus-chip--filter.chorus-button--toolbar--accent {
-  --chip-bg: var(--sys-color-primary);
-  --chip-label: var(--sys-color-onPrimary);
+  --chip-bg: var(--sys-color-background-primary);
+  --chip-label: var(--sys-color-text-onFill);
   --chip-border-color: transparent;
 }
 
@@ -466,8 +457,8 @@ textarea {
    cluster so the button reads against `inverseSurface` containers
    without a per-host tweak. */
 .chorus-chip--filter.chorus-button--toolbar--inverse {
-  --chip-bg: var(--sys-color-inverseSurface);
-  --chip-label: var(--sys-color-inverseOnSurface);
+  --chip-bg: var(--sys-color-background-inverse);
+  --chip-label: var(--sys-color-text-inverse);
   --chip-border-color: transparent;
 }
 
@@ -477,8 +468,8 @@ textarea {
    (transparent while inactive), so the chip never changes width when it
    toggles. */
 .chorus-chip--toggle {
-  --chip-bg: var(--sys-color-primary);
-  --chip-label: var(--sys-color-onPrimary);
+  --chip-bg: var(--sys-color-background-primary);
+  --chip-label: var(--sys-color-text-onFill);
   --chip-border-color: transparent;
   /* 32 capsule — same geometry as Filter, anatomy rung. */
   --chip-min-height: var(--ref-space-400);
@@ -488,21 +479,18 @@ textarea {
 }
 
 .chorus-chip--toggle.is-selected {
-  --chip-bg: var(--sys-color-surfaceContainerHigh);
-  --chip-label: var(--sys-color-onSurface);
-  --chip-border-color: var(--sys-color-outlineVariant);
+  --chip-bg: var(--sys-color-background-neutral);
+  --chip-label: var(--sys-color-text-default);
+  --chip-border-color: var(--sys-color-border-default);
 }
 
 .chorus-chip--tag {
-  /* Translucent overlay (`sys.color.scrimSubtle` — black 8% in light,
-     white 8% in dark) rather than a tonal container role, so the tag
-     adopts whatever surface sits behind it — body, raised card, sheet —
-     by tinting one step darker (light mode) or lighter (dark mode)
-     instead of pinning to a fixed neutral step that can collide with
-     the surface ladder. Same Banner-style scrim used by Progress
-     track, StatusTag neutral, and Skeleton. */
-  --chip-bg: var(--sys-color-scrimSubtle);
-  --chip-label: var(--sys-color-onSurface);
+  /* Solid `background.neutral` fill (the role that replaced the old ~8%
+     scrim) — a fixed light-gray pill in light, a mid-gray in dark. Same
+     neutral fill as Banner default, Progress track, StatusTag neutral,
+     and Skeleton, so the quiet-neutral family reads as one. */
+  --chip-bg: var(--sys-color-background-neutral);
+  --chip-label: var(--sys-color-text-default);
   --chip-border-color: transparent;
   /* 24 capsule — Tag rung, anatomy via ref.space. */
   --chip-min-height: var(--ref-space-300);
@@ -516,8 +504,8 @@ textarea {
    block. Inline `--chip-bg` is also skipped by the JSX (the appearance
    has no `backgroundDark` field) so this class wins cleanly. */
 .chorus-chip--tag.chorus-chip--tag--accent {
-  --chip-bg: var(--sys-color-primaryContainer);
-  --chip-label: var(--sys-color-primary);
+  --chip-bg: var(--sys-color-background-selected);
+  --chip-label: var(--sys-color-text-accent-blue);
 }
 
 /* Icon-only Compact — when the chip carries no label slot, shrink the
@@ -559,7 +547,7 @@ span.chorus-chip {
 
 /* Focus ring — dedicated overlay layer (`::after`), `position: absolute`
    so it's out of flow: a focused chip never widens, and a chip group's
-   4px gap never shifts. Canonical two-layer composition, painted outward;
+   4px gap never shifts. Canonical single-ring composition, painted outward;
    `z-index: 2`, above the overlay `::before` (z-index 0) and the label /
    icon (z-index 1). Inside a Tabs row the ring is re-anchored *inward*
    (the row is a scroller — see the Segmented override below). */
@@ -576,9 +564,7 @@ span.chorus-chip {
 
 .chorus-chip:focus-visible::after,
 .chorus-chip[data-force-state="focused"]::after {
-  box-shadow:
-    0 0 0 var(--chip-focus-inset-width) var(--chip-focus-inset-color),
-    0 0 0 calc(var(--chip-focus-outer-width) + var(--chip-focus-inset-width)) var(--chip-focus-outer-color);
+  box-shadow: 0 0 0 var(--sys-borderWidth-hairline) var(--chip-focus-outer-color);
 }
 
 .chorus-chip:disabled::after { box-shadow: none; }
@@ -607,7 +593,12 @@ span.chorus-chip {
 }
 
 .chorus-chip:disabled {
-  opacity: var(--chip-disabled-opacity);
+  /* Explicit disabled (no opacity): neutral disabled pill — overrides the
+     variant's --chip-bg / --chip-label / --chip-border-color on source
+     order (this rule sits after every appearance block above). */
+  --chip-bg: var(--sys-color-background-disabled);
+  --chip-label: var(--sys-color-text-disabled);
+  --chip-border-color: var(--sys-color-border-bold);
   cursor: not-allowed;
 }
 
@@ -649,7 +640,7 @@ span.chorus-chip {
   width: var(--badge-min-width);
   height: var(--badge-min-height);
   padding: 0;
-  box-shadow: 0 0 0 var(--sys-borderWidth-thin) var(--sys-color-surface);
+  box-shadow: 0 0 0 var(--sys-borderWidth-thin) var(--sys-color-surface-default);
 }
 
 /* ============================================================
@@ -749,7 +740,11 @@ span.chorus-chip {
 }
 
 .chorus-tab:disabled {
-  opacity: var(--tabs-disabled-opacity);
+  /* Explicit disabled (no opacity): label + icon re-tone to text.disabled
+     (icon rides currentColor); overrides the selected/unselected label
+     color on specificity. A disabled tab is never selected, so no
+     indicator paints. */
+  color: var(--sys-color-text-disabled);
   cursor: not-allowed;
   outline: none;
   box-shadow: none;
@@ -889,10 +884,9 @@ span.chorus-chip {
      • Clip-safe — the Tabs row is a horizontal scroller (`overflow-x:
        auto`, which coerces `overflow-y: auto`), so an *outward* ring is
        sliced off at the row's top / bottom edge. The ring is drawn
-       *inside* the tab via stacked inset box-shadows, so nothing clips it.
-     • Layer-safe — an `outline` painted over the tab box covers the inset
-       counter-ring; here the two layers (2px `focus` stroke over a 1px
-       `focusInset` counter-ring) are explicit and both visible.
+       *inside* the tab via an inset box-shadow, so nothing clips it.
+     • Layer-safe — the ring is a single 1px `border.focused` inset
+       box-shadow on the `::after`, explicit and always visible.
    Sits at `z-index: 2`, above the state-overlay `::before` (z-index 0)
    and the label / icon (z-index 1). The tab's own `::before` already
    owns the focus *overlay* tint; this `::after` owns the *ring*. */
@@ -909,9 +903,7 @@ span.chorus-chip {
 
 .chorus-tab--underline:focus-visible::after,
 .chorus-tab--underline[data-force-state="focused"]::after {
-  box-shadow:
-    inset 0 0 0 var(--tabs-focus-outer-width) var(--tabs-focus-outer-color),
-    inset 0 0 0 calc(var(--tabs-focus-outer-width) + var(--tabs-focus-inset-width)) var(--tabs-focus-inset-color);
+  box-shadow: inset 0 0 0 var(--sys-borderWidth-hairline) var(--tabs-focus-outer-color);
 }
 
 /* ----- Segmented ----- */
@@ -951,9 +943,7 @@ span.chorus-chip {
    from outward to inset here.) */
 .chorus-tabs--segmented .chorus-chip:focus-visible::after,
 .chorus-tabs--segmented .chorus-chip[data-force-state="focused"]::after {
-  box-shadow:
-    inset 0 0 0 var(--chip-focus-outer-width) var(--chip-focus-outer-color),
-    inset 0 0 0 calc(var(--chip-focus-outer-width) + var(--chip-focus-inset-width)) var(--chip-focus-inset-color);
+  box-shadow: inset 0 0 0 var(--sys-borderWidth-hairline) var(--chip-focus-outer-color);
 }
 
 /* ----- Rounded (chip-delegated) -----
@@ -998,7 +988,7 @@ span.chorus-chip {
   font-size: var(--sys-typo-label-sm-size);
   font-weight: var(--sys-typo-label-sm-weight);
   line-height: var(--sys-typo-label-sm-line);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
   text-decoration: none;
   white-space: nowrap;
   overflow: hidden;
@@ -1007,7 +997,7 @@ span.chorus-chip {
 }
 a.chorus-metadata__name:hover { text-decoration: underline; }
 a.chorus-metadata__name:focus-visible {
-  outline: var(--sys-borderWidth-hairline) solid var(--sys-color-focus);
+  outline: var(--sys-borderWidth-hairline) solid var(--sys-color-border-focused);
   outline-offset: var(--sys-layout-inline-xs);
   border-radius: var(--sys-radius-xs);
 }
@@ -1017,7 +1007,7 @@ a.chorus-metadata__name:focus-visible {
   font-weight: var(--sys-typo-label-sm-weight);
   line-height: var(--sys-typo-label-sm-line);
   /* One tonal step further than name — timestamp recedes. */
-  color: var(--sys-color-outline);
+  color: var(--sys-color-border-boldest);
 }
 
 /* Middot separator. The bullet glyph (U+00B7) is naturally tall — its
@@ -1029,7 +1019,7 @@ a.chorus-metadata__name:focus-visible {
    the line-box to that font-size so the dot's vertical extent never
    exceeds the text height. */
 .chorus-metadata__dot {
-  color: var(--sys-color-outline);
+  color: var(--sys-color-border-boldest);
   font-size: var(--sys-typo-label-sm-size);
   line-height: 1;
 }
@@ -1044,15 +1034,15 @@ a.chorus-metadata__name:focus-visible {
   font-size: var(--sys-typo-label-sm-size);
   font-weight: var(--sys-typo-label-sm-weight);
   line-height: var(--sys-typo-label-sm-line);
-  color: var(--sys-color-primary);
+  color: var(--sys-color-text-link);
 }
 
 .chorus-metadata__follow[aria-pressed="true"] {
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
 }
 
 .chorus-metadata__follow:focus-visible {
-  outline: var(--sys-borderWidth-hairline) solid var(--sys-color-focus);
+  outline: var(--sys-borderWidth-hairline) solid var(--sys-color-border-focused);
   outline-offset: var(--sys-layout-inline-xs);
   border-radius: var(--sys-radius-xs);
 }
@@ -1061,7 +1051,7 @@ a.chorus-metadata__name:focus-visible {
   font-size: var(--sys-typo-label-sm-size);
   font-weight: var(--sys-typo-label-sm-weight);
   line-height: var(--sys-typo-label-sm-line);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1074,7 +1064,7 @@ a.chorus-metadata__name:focus-visible {
   font-size: var(--sys-typo-label-sm-size);
   font-weight: var(--sys-typo-label-sm-weight);
   line-height: var(--sys-typo-label-sm-line);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
   min-width: 0;
 }
 
@@ -1088,7 +1078,7 @@ a.chorus-metadata__name:focus-visible {
 }
 .chorus-metadata__meta-link:hover { text-decoration: underline; }
 .chorus-metadata__meta-link:focus-visible {
-  outline: var(--sys-borderWidth-hairline) solid var(--sys-color-focus);
+  outline: var(--sys-borderWidth-hairline) solid var(--sys-color-border-focused);
   outline-offset: var(--sys-layout-inline-xs);
   border-radius: var(--sys-radius-xs);
 }
@@ -1148,8 +1138,8 @@ a.chorus-metadata__name:focus-visible {
   flex-direction: column;
   gap: var(--sys-layout-stack-md);
   padding: var(--sys-layout-container-lg) var(--sys-layout-container-md);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-onSurface);
+  background: var(--sys-color-surface-default);
+  color: var(--sys-color-text-default);
   width: 100%;
   /* Max-width is a layout-contract literal (matches the Feed family's
      "single column, mobile-first card" rule). Anatomy contract, not a
@@ -1157,9 +1147,9 @@ a.chorus-metadata__name:focus-visible {
   max-width: 480px;
   box-sizing: border-box;
   /* Hairline bottom divider — every Post / Ad card ends with a 1px
-     outlineVariant seam so consecutive cards in a stream read as one
+     border.default seam so consecutive cards in a stream read as one
      rhythm. border-bottom is layout-safe under box-sizing: border-box. */
-  border-bottom: var(--sys-borderWidth-hairline) solid var(--sys-color-outlineVariant);
+  border-bottom: var(--sys-borderWidth-hairline) solid var(--sys-color-border-default);
 }
 
 /* Clickable Post — whole-card navigation target (opt-in via `onClick`).
@@ -1172,7 +1162,7 @@ a.chorus-metadata__name:focus-visible {
 }
 
 .chorus-feed--clickable:focus-visible {
-  outline: var(--sys-borderWidth-hairline) solid var(--sys-color-focus);
+  outline: var(--sys-borderWidth-hairline) solid var(--sys-color-border-focused);
   outline-offset: calc(-1 * var(--sys-layout-inline-xs));
 }
 
@@ -1196,7 +1186,7 @@ a.chorus-metadata__name:focus-visible {
   font-weight: var(--sys-typo-label-sm-weight);
   line-height: var(--sys-typo-label-sm-line);
   letter-spacing: var(--sys-typo-label-sm-tracking);
-  color: var(--sys-color-brand);
+  color: var(--sys-color-text-brand);
   text-transform: uppercase;
 }
 
@@ -1227,7 +1217,7 @@ a.chorus-metadata__name:focus-visible {
   font-weight: var(--sys-typo-heading-sm-weight);
   line-height: var(--sys-typo-heading-sm-line);
   letter-spacing: var(--sys-typo-heading-sm-tracking);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1238,7 +1228,7 @@ a.chorus-metadata__name:focus-visible {
   font-size: var(--sys-typo-body-sm-size);
   font-weight: var(--sys-typo-body-sm-weight);
   line-height: var(--sys-typo-body-sm-line);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -1254,7 +1244,7 @@ a.chorus-metadata__name:focus-visible {
   width: var(--ref-space-1000);
   height: var(--ref-space-1000);
   border-radius: var(--sys-radius-md);
-  background: var(--sys-color-surfaceContainerHigh);
+  background: var(--sys-color-surface-sunken);
   position: relative;
   overflow: hidden;
 }
@@ -1262,7 +1252,6 @@ a.chorus-metadata__name:focus-visible {
 .chorus-feed__thumbnail img,
 .chorus-feed__thumbnail-fallback {
   width: 100%; height: 100%; display: block;
-  background: linear-gradient(135deg, var(--sys-color-placeholderImage-start) 0%, var(--sys-color-placeholderImage-end) 100%);
   object-fit: cover;
 }
 
@@ -1300,7 +1289,7 @@ a.chorus-metadata__name:focus-visible {
   /* Touch-target floor — same 48 rung used by List rows, kept as an
      intrinsic anatomy dimension (not a layout token). */
   min-height: var(--ref-space-600);
-  background: var(--sys-color-surfaceVariant);
+  background: var(--sys-color-surface-sunken);
   border-radius: var(--sys-radius-md);
   font-size: var(--sys-typo-body-sm-size);
   line-height: var(--sys-typo-body-sm-line);
@@ -1311,25 +1300,25 @@ a.chorus-metadata__name:focus-visible {
   align-items: center;
   gap: var(--sys-layout-inline-sm);
 }
-.chorus-feed__poll-glyph { color: var(--sys-color-brand); display: inline-flex; }
-.chorus-feed__poll-label { color: var(--sys-color-brand); font-weight: var(--ref-fontWeight-bold); }
+.chorus-feed__poll-glyph { color: var(--sys-color-text-brand); display: inline-flex; }
+.chorus-feed__poll-label { color: var(--sys-color-text-brand); font-weight: var(--ref-fontWeight-bold); }
 
 /* Offer-evaluation tone — same chrome as the poll banner, but the
-   leading glyph and label paint in `sys.color.success` (resolves to
+   leading glyph and label paint in `sys.color.text.success` (resolves to
    `ref.palette.green.500` in light, the same step in dark), so the
    editorial category reads as "compensation / decision support"
    rather than "community vote". The icon is `CompensationFillIcon`;
    the label is constrained to the literal "Offer" by the spec. */
 .chorus-feed__poll--offer .chorus-feed__poll-glyph,
 .chorus-feed__poll--offer .chorus-feed__poll-label {
-  color: var(--sys-color-success);
+  color: var(--sys-color-text-success);
 }
 .chorus-feed__poll-divider {
   width: var(--sys-borderWidth-hairline);
   align-self: stretch;
-  background: var(--sys-color-outlineVariant);
+  background: var(--sys-color-border-default);
 }
-.chorus-feed__poll-participants { color: var(--sys-color-onSurface); }
+.chorus-feed__poll-participants { color: var(--sys-color-text-default); }
 .chorus-feed__poll-participants strong { font-weight: var(--ref-fontWeight-bold); }
 
 .chorus-feed__citation {
@@ -1342,7 +1331,7 @@ a.chorus-metadata__name:focus-visible {
   gap: 0;
   align-items: stretch;
   padding: 0;
-  background: var(--sys-color-surfaceContainer);
+  background: var(--sys-color-surface-default);
   border-radius: var(--sys-radius-md);
   overflow: hidden;
   text-decoration: none;
@@ -1359,7 +1348,6 @@ a.chorus-metadata__name:focus-visible {
   flex: 0 0 120px;
   width: 120px;
   align-self: stretch;
-  background: linear-gradient(135deg, var(--sys-color-placeholderImage-start) 0%, var(--sys-color-placeholderImage-end) 100%);
   overflow: hidden;
   position: relative;
 }
@@ -1380,7 +1368,7 @@ a.chorus-metadata__name:focus-visible {
   padding: var(--sys-layout-container-sm);
   min-width: 0;
   flex: 1 1 auto;
-  background: var(--sys-color-surfaceVariant);
+  background: var(--sys-color-surface-sunken);
 }
 
 /* All text inside the citation surface sits at the label.sm rung —
@@ -1394,7 +1382,7 @@ a.chorus-metadata__name:focus-visible {
 .chorus-feed__citation-title {
   font-weight: var(--sys-typo-label-sm-weight);
   line-height: var(--sys-typo-label-sm-line);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -1405,7 +1393,7 @@ a.chorus-metadata__name:focus-visible {
   display: inline-flex;
   align-items: center;
   gap: var(--sys-layout-inline-sm);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
 }
 /* Source mark is a 16×16 brand badge — `icon.sm` anatomy rung with
    `radius.sm` (4px) so it reads as a chip-adjacent badge, not a tag. */
@@ -1413,8 +1401,8 @@ a.chorus-metadata__name:focus-visible {
   width: var(--sys-icon-md); height: var(--sys-icon-md);
   flex: 0 0 var(--sys-icon-md);
   border-radius: var(--sys-radius-sm);
-  background: var(--sys-color-onSurface);
-  color: var(--sys-color-surface);
+  background: var(--sys-color-icon-default);
+  color: var(--sys-color-surface-default);
   display: inline-flex; align-items: center; justify-content: center;
   overflow: hidden;
 }
@@ -1424,7 +1412,7 @@ a.chorus-metadata__name:focus-visible {
 .chorus-feed__mention {
   font-style: italic;
   font-size: var(--sys-typo-body-sm-size);
-  color: var(--sys-color-primary);
+  color: var(--sys-color-text-mention);
   text-decoration: none;
 }
 
@@ -1439,14 +1427,14 @@ a.chorus-metadata__name:focus-visible {
   display: flex;
   align-items: center;
   gap: var(--sys-layout-inline-lg);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
 }
 
 /* Active toggle — the brand-tone variant of the Like counter. We
    override `--button-text-label` directly rather than reaching for
    Text Button's `primary` appearance because Feed's active-like
-   colour is `sys.color.brand` (the same role the editorial `flag`
-   slot rides), not the interactive `sys.color.primary`. Selector
+   colour is `sys.color.text.brand` (the same role the editorial `flag`
+   slot rides), not the interactive `sys.color.background.primary`. Selector
    doubles the class (specificity 0,2,0) so it wins against the
    `.chorus-button--text--appearance-default` rule that declares
    `--button-text-label` later in the cascade. The Heart glyph re-
@@ -1454,7 +1442,7 @@ a.chorus-metadata__name:focus-visible {
    and the hover / pressed / focus overlays inherit from
    `--button-text-label` so the state feedback stays in lockstep. */
 .chorus-button--text.chorus-feed__like--active {
-  --button-text-label: var(--sys-color-brand);
+  --button-text-label: var(--sys-color-text-brand);
 }
 
 
@@ -1478,7 +1466,7 @@ a.chorus-metadata__name:focus-visible {
   font-size: var(--sys-typo-label-sm-size);
   font-weight: var(--sys-typo-label-sm-weight);
   line-height: var(--sys-typo-label-sm-line);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
 }
 .chorus-feed__views-icon {
   display: inline-flex;
@@ -1496,8 +1484,8 @@ a.chorus-metadata__name:focus-visible {
   flex-direction: column;
   gap: var(--sys-layout-stack-md);
   padding: var(--sys-layout-container-lg) var(--sys-layout-container-md);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-onSurface);
+  background: var(--sys-color-surface-default);
+  color: var(--sys-color-text-default);
   width: 100%;
   /* Same column cap as Feed — FeedAd rides in the same scrolling
      column, so the literal mirrors Feed's anatomy contract. */
@@ -1506,7 +1494,7 @@ a.chorus-metadata__name:focus-visible {
   box-sizing: border-box;
   /* Hairline bottom divider — mirrors the Feed Post seam so an Ad
      drops into a Post stream without breaking the inter-card rhythm. */
-  border-bottom: var(--sys-borderWidth-hairline) solid var(--sys-color-outlineVariant);
+  border-bottom: var(--sys-borderWidth-hairline) solid var(--sys-color-border-default);
 }
 
 /* FeedAd brand row is now rendered via the shared Metadata component —
@@ -1528,7 +1516,7 @@ a.chorus-metadata__name:focus-visible {
   justify-content: center;
   width: var(--ref-space-300);
   height: var(--ref-space-300);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
   flex: 0 0 auto;
 }
 .chorus-feed-ad__dismiss svg {
@@ -1537,7 +1525,7 @@ a.chorus-metadata__name:focus-visible {
   display: block;
 }
 .chorus-feed-ad__dismiss:focus-visible {
-  outline: var(--sys-borderWidth-hairline) solid var(--sys-color-focus);
+  outline: var(--sys-borderWidth-hairline) solid var(--sys-color-border-focused);
   outline-offset: var(--sys-layout-inline-xs);
   border-radius: var(--sys-radius-xs);
 }
@@ -1555,7 +1543,7 @@ a.chorus-metadata__name:focus-visible {
   font-weight: var(--sys-typo-heading-sm-weight);
   line-height: var(--sys-typo-heading-sm-line);
   letter-spacing: var(--sys-typo-heading-sm-tracking);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1566,7 +1554,7 @@ a.chorus-metadata__name:focus-visible {
   font-size: var(--sys-typo-body-sm-size);
   font-weight: var(--sys-typo-body-sm-weight);
   line-height: var(--sys-typo-body-sm-line);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -1592,7 +1580,7 @@ a.chorus-metadata__name:focus-visible {
 .chorus-feed-ad__media {
   width: 100%;
   aspect-ratio: 16 / 10;
-  background-color: var(--sys-color-surfaceContainerHigh);
+  background-color: var(--sys-color-surface-sunken);
   background-image: var(--chorus-placeholder-image);
   background-size: cover;
   background-position: center;
@@ -1624,7 +1612,7 @@ a.chorus-metadata__name:focus-visible {
    schema/components/carousel/carousel.md for the contract.
 ============================================================ */
 .chorus-carousel {
-  background: var(--sys-color-surface);
+  background: var(--sys-color-surface-default);
   width: 100%;
   box-sizing: border-box;
   /* Full-bleed inline (matches DirectoryList): the host pays NO inline
@@ -1676,7 +1664,7 @@ a.chorus-metadata__name:focus-visible {
 
 .chorus-header .chorus-header__label {
   margin: 0;
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
   font-size: var(--sys-typo-heading-md-size);
   line-height: var(--sys-typo-heading-md-line);
   font-weight: var(--sys-typo-heading-md-weight);
@@ -1699,7 +1687,7 @@ a.chorus-metadata__name:focus-visible {
    later in this file. The IconButton is its own tap target; the
    surrounding `<header>` stays non-interactive. */
 .chorus-button--icon.chorus-header__icon {
-  --button-icon-glyph-color: var(--sys-color-onSurfaceVariant);
+  --button-icon-glyph-color: var(--sys-color-text-subtle);
 }
 
 .chorus-header__icon--chevron svg {
@@ -1801,10 +1789,10 @@ a.chorus-metadata__name:focus-visible {
   gap: var(--sys-layout-stack-sm);
   padding: var(--sys-layout-container-md);
   border-radius: var(--sys-radius-md);
-  background: var(--sys-color-surface);
+  background: var(--sys-color-surface-default);
   /* No-layout outline — an inset hairline ring rather than a border so
      the card's box geometry is stable across states. */
-  box-shadow: inset 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-outlineVariant);
+  box-shadow: inset 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-border-default);
   text-align: left;
   font: inherit;
   color: inherit;
@@ -1842,7 +1830,7 @@ a.chorus-metadata__name:focus-visible {
   font-size: var(--sys-typo-label-md-size);
   line-height: var(--sys-typo-label-md-line);
   font-weight: var(--sys-typo-label-md-weight);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1853,7 +1841,7 @@ a.chorus-metadata__name:focus-visible {
   font-size: var(--sys-typo-body-sm-size);
   line-height: var(--sys-typo-body-sm-line);
   font-weight: var(--sys-typo-body-sm-weight);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -1863,7 +1851,7 @@ a.chorus-metadata__name:focus-visible {
 .chorus-post-carousel__card-mention {
   font-size: var(--sys-typo-body-sm-size);
   line-height: var(--sys-typo-body-sm-line);
-  color: var(--sys-color-primary);
+  color: var(--sys-color-text-mention);
 }
 
 .chorus-post-carousel__card-footer {
@@ -1877,7 +1865,7 @@ a.chorus-metadata__name:focus-visible {
   font-size: var(--sys-typo-label-sm-size);
   line-height: var(--sys-typo-label-sm-line);
   font-weight: var(--sys-typo-label-sm-weight);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
 }
 
 .chorus-post-carousel__card-views {
@@ -1886,7 +1874,7 @@ a.chorus-metadata__name:focus-visible {
   gap: var(--sys-layout-inline-sm);
   font-size: var(--sys-typo-label-sm-size);
   line-height: var(--sys-typo-label-sm-line);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
 }
 
 .chorus-post-carousel__card-views svg {
@@ -1949,7 +1937,7 @@ a.chorus-metadata__name:focus-visible {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: var(--sys-color-surface);
+  background: var(--sys-color-surface-default);
   border-radius: var(--sys-radius-md);
   overflow: hidden;
   padding-bottom: var(--sys-layout-container-md);
@@ -1973,7 +1961,7 @@ a.chorus-metadata__name:focus-visible {
   border-radius: inherit;
   pointer-events: none;
   z-index: 2;
-  box-shadow: inset 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-outlineVariant);
+  box-shadow: inset 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-border-default);
 }
 
 .chorus-profile-carousel__card--clickable {
@@ -1988,7 +1976,7 @@ a.chorus-metadata__name:focus-visible {
      paints opaquely over the background. */
   width: 100%;
   height: 88px;
-  background-color: var(--sys-color-surfaceContainerHigh);
+  background-color: var(--sys-color-surface-sunken);
   background-image: var(--chorus-placeholder-image);
   background-size: cover;
   background-position: center;
@@ -2012,7 +2000,7 @@ a.chorus-metadata__name:focus-visible {
   /* The Thumbnail's surface halo (a 2px ring) sits on the cover band's
      edge so the circular avatar reads as a separate plane from the
      cover. */
-  box-shadow: 0 0 0 2px var(--sys-color-surface);
+  box-shadow: 0 0 0 2px var(--sys-color-surface-default);
   border-radius: var(--sys-radius-full);
 }
 
@@ -2031,7 +2019,7 @@ a.chorus-metadata__name:focus-visible {
   font-size: var(--sys-typo-label-md-size);
   line-height: var(--sys-typo-label-md-line);
   font-weight: var(--sys-typo-label-md-weight);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
@@ -2041,7 +2029,7 @@ a.chorus-metadata__name:focus-visible {
 .chorus-profile-carousel__followers {
   font-size: var(--sys-typo-label-sm-size);
   line-height: var(--sys-typo-label-sm-line);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
 }
 
 /* Slot below the identity stack. Either a row of icon-value metrics or a
@@ -2083,7 +2071,7 @@ a.chorus-metadata__name:focus-visible {
   margin: 0;
   font-size: var(--sys-typo-label-sm-size);
   line-height: var(--sys-typo-label-sm-line);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
   text-align: center;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -2098,7 +2086,7 @@ a.chorus-metadata__name:focus-visible {
   gap: var(--sys-layout-inline-sm);
   font-size: var(--sys-typo-label-sm-size);
   line-height: var(--sys-typo-label-sm-line);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
 }
 
 .chorus-profile-carousel__metric-icon {
@@ -2145,7 +2133,7 @@ a.chorus-metadata__name:focus-visible {
 .chorus-profile-header {
   display: flex;
   flex-direction: column;
-  background: var(--sys-color-surface);
+  background: var(--sys-color-surface-default);
   width: 100%;
 }
 
@@ -2164,7 +2152,7 @@ a.chorus-metadata__name:focus-visible {
      widens / narrows, so the cover keeps the same visual mass relative
      to the column instead of locking to a hard pixel height. */
   aspect-ratio: 375 / 120;
-  background-color: var(--sys-color-surfaceContainerHigh);
+  background-color: var(--sys-color-surface-sunken);
   background-image: var(--chorus-placeholder-image);
   background-size: cover;
   background-position: center;
@@ -2295,7 +2283,7 @@ a.chorus-metadata__name:focus-visible {
   line-height: var(--sys-typo-heading-lg-line);
   font-weight: var(--sys-typo-heading-lg-weight);
   letter-spacing: var(--sys-typo-heading-lg-tracking);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2309,17 +2297,17 @@ a.chorus-metadata__name:focus-visible {
   gap: var(--sys-layout-inline-sm);
   font-size: var(--sys-typo-body-sm-size);
   line-height: var(--sys-typo-body-sm-line);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
   min-width: 0;
 }
 
 .chorus-profile-header__meta-icon {
   flex: 0 0 auto;
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
 }
 
 .chorus-profile-header__meta-sep {
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
 }
 
 .chorus-profile-header__meta-visibility,
@@ -2357,7 +2345,7 @@ a.chorus-metadata__name:focus-visible {
    Canonical hosts: ProfileHeader's avatar (the 56-rung that half-
    overlaps the cover) and any avatar Thumbnail that lives over imagery. */
 .chorus-thumbnail--outlined {
-  box-shadow: 0 0 0 var(--sys-borderWidth-thin) var(--sys-color-surface);
+  box-shadow: 0 0 0 var(--sys-borderWidth-thin) var(--sys-color-surface-default);
 }
 
 /* Same image-area fallback contract as `.chorus-feed-ad__media` — the
@@ -2369,7 +2357,7 @@ a.chorus-metadata__name:focus-visible {
   width: 100%;
   height: 100%;
   border-radius: var(--sys-radius-full);
-  background-color: var(--sys-color-surfaceContainerHigh);
+  background-color: var(--sys-color-surface-sunken);
   background-image: var(--chorus-placeholder-image);
   background-size: cover;
   background-position: center;
@@ -2402,11 +2390,11 @@ a.chorus-metadata__name:focus-visible {
   width: var(--sys-icon-md);
   height: var(--sys-icon-md);
   border-radius: var(--sys-radius-full);
-  background: var(--sys-color-surface);
+  background: var(--sys-color-surface-default);
   /* Hairline halo via box-shadow so the badge does not enlarge the
      bounding box — the halo paints over the host image's edge without
      shifting the badge's `icon.sm` footprint. */
-  box-shadow: 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-surface);
+  box-shadow: 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-surface-default);
   overflow: hidden;
   display: inline-flex;
   align-items: center;
@@ -2422,12 +2410,12 @@ a.chorus-metadata__name:focus-visible {
 }
 
 .chorus-thumbnail__badge:empty {
-  background: var(--sys-color-surfaceContainerHigh);
+  background: var(--sys-color-surface-sunken);
 }
 
 /* List — vertical row stack. The row is the interactive surface;
    leading and trailing slots are decorative. Inter-row divider is a
-   hairline `outlineVariant`, not a layout gap — the contract is
+   hairline `border.default`, not a layout gap — the contract is
    "flush rows separated by a rule", not "rows with breathing room". */
 .chorus-list {
   display: flex;
@@ -2456,7 +2444,7 @@ a.chorus-metadata__name:focus-visible {
   min-height: var(--ref-space-600);
   box-sizing: border-box;
   cursor: pointer;
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
   position: relative;
   isolation: isolate;
 }
@@ -2475,7 +2463,7 @@ a.chorus-metadata__name:focus-visible {
   right: var(--sys-layout-container-md);
   bottom: 0;
   height: var(--sys-borderWidth-hairline);
-  background: var(--sys-color-outlineVariant);
+  background: var(--sys-color-border-default);
   pointer-events: none;
 }
 
@@ -2489,11 +2477,11 @@ a.chorus-metadata__name:focus-visible {
    nav chevron carries no `data-nested-action`, so hovering it still lights
    the row (it IS the row's drill-in affordance). */
 .chorus-list__row:hover:not(:has([data-nested-action]:hover)) {
-  background: color-mix(in srgb, var(--sys-color-onSurface) calc(var(--sys-state-hover) * 100%), transparent);
+  background: color-mix(in srgb, var(--sys-color-text-default) calc(var(--sys-state-hover) * 100%), transparent);
 }
 
 .chorus-list__row:active:not(:has([data-nested-action]:active)) {
-  background: color-mix(in srgb, var(--sys-color-onSurface) calc(var(--sys-state-pressed) * 100%), transparent);
+  background: color-mix(in srgb, var(--sys-color-text-default) calc(var(--sys-state-pressed) * 100%), transparent);
 }
 
 /* Focus indicator — inward composition per DESIGN.md → Focus ring
@@ -2514,9 +2502,7 @@ a.chorus-metadata__name:focus-visible {
 
 .chorus-list__row:focus-visible::before,
 .chorus-list__row[data-force-state="focused"]::before {
-  box-shadow:
-    inset 0 0 0 var(--sys-borderWidth-thin) var(--sys-color-focus),
-    inset 0 0 0 calc(var(--sys-borderWidth-thin) + var(--sys-borderWidth-hairline)) var(--sys-color-focusInset);
+  box-shadow: inset 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-border-focused);
 }
 
 .chorus-list__row:focus-visible {
@@ -2527,13 +2513,21 @@ a.chorus-metadata__name:focus-visible {
   cursor: not-allowed;
 }
 
-/* Disabled dims the row *content* only — applied to the row's direct
-   children so the inter-row divider (`::after`) and focus overlay
-   (`::before`) keep full opacity. Fading the whole row box would dim the
-   hairline divider too, which reads as an awkward gap in the otherwise
-   crisp rule between rows. */
-.chorus-list__row.is-disabled > * {
-  opacity: var(--sys-state-disabled);
+/* Disabled re-tones the row *content* to the neutral disabled tokens —
+   text → `text.disabled`, icon glyph → `icon.disabled` — instead of an
+   opacity dim, so the inter-row divider (`::after`) and focus overlay
+   (`::before`) keep full strength. Scoping the colors to the content
+   leaves the hairline rule crisp, the same reason the old opacity was
+   applied to the row's children rather than the whole box. */
+.chorus-list__row.is-disabled .chorus-list__label,
+.chorus-list__row.is-disabled .chorus-list__supporting,
+.chorus-list__row.is-disabled .chorus-list__trailing {
+  color: var(--sys-color-text-disabled);
+}
+
+.chorus-list__row.is-disabled .chorus-list__leading--icon,
+.chorus-list__row.is-disabled .chorus-list__radio {
+  color: var(--sys-color-icon-disabled);
 }
 
 .chorus-list__leading {
@@ -2577,7 +2571,7 @@ a.chorus-metadata__name:focus-visible {
 .chorus-list__label {
   font-size: var(--sys-typo-body-md-size);
   line-height: var(--sys-typo-body-md-line);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2599,7 +2593,7 @@ a.chorus-metadata__name:focus-visible {
 .chorus-list__supporting {
   font-size: var(--sys-typo-body-sm-size);
   line-height: var(--sys-typo-body-sm-line);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2609,12 +2603,37 @@ a.chorus-metadata__name:focus-visible {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
   flex: 0 0 auto;
   /* Text group ↔ trailing action: fixed `inline.md` (8) in every variant. */
   margin-left: var(--sys-layout-inline-md);
 }
 
+/* Embedded-Banner row — a Standard row whose text group stacks over a
+   Banner that spans the row's full content width. The row flips from a
+   single horizontal line to a vertical stack: the normal leading + label
+   + trailing line (`__row-main`) sits on top, the Banner `stack.xs` (8)
+   below it. The stack fills the row's content box so the Banner aligns to
+   the same 16px inline inset as the text group above it. The Banner owns
+   its own tinted fill / radius / padding; the slot only spaces it and
+   marks it a nested-action region (its controls never commit the row). */
+.chorus-list__stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sys-layout-stack-xs);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.chorus-list__row-main {
+  display: flex;
+  align-items: center;
+}
+
+.chorus-list__banner {
+  display: block;
+}
+
 /* Entry variant — directory-entry row with selectable leading Thumbnail
    (32 / 40 / 48 / 56 via `data-size="small|medium|large|xlarge"`), an
    identity group (label + optional inline count Badge + optional stacked
@@ -2649,7 +2668,7 @@ a.chorus-metadata__name:focus-visible {
    carries the meaning; the slot enforces the 24 rung regardless of the glyph's
    own size attribute. */
 .chorus-list__leading--icon {
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
 }
 
 .chorus-list__leading--icon svg {
@@ -2719,7 +2738,7 @@ a.chorus-metadata__name:focus-visible {
   min-width: 0;
 }
 
-/* Inline verified mark — paints in `sys.color.primary` (resolves to
+/* Inline verified mark — paints in `sys.color.background.primary` (resolves to
    `ref.palette.blue.500`). Sits to the LEFT of the label so the trust
    signal reads first. Centred against the label (the primary row is
    baseline-aligned for the label + count pairing). */
@@ -2728,7 +2747,7 @@ a.chorus-metadata__name:focus-visible {
   align-self: center;
   width: var(--sys-icon-md);
   height: var(--sys-icon-md);
-  color: var(--sys-color-primary);
+  color: var(--sys-color-icon-accent-blue-default);
   flex: 0 0 auto;
 }
 
@@ -2741,7 +2760,7 @@ a.chorus-metadata__name:focus-visible {
   font-size: var(--sys-typo-label-md-size);
   line-height: var(--sys-typo-label-md-line);
   font-weight: var(--sys-typo-label-md-weight);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2758,7 +2777,7 @@ a.chorus-metadata__name:focus-visible {
 .chorus-entry-row__secondary {
   font-size: var(--sys-typo-label-sm-size);
   line-height: var(--sys-typo-label-sm-line);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2767,7 +2786,7 @@ a.chorus-metadata__name:focus-visible {
 .chorus-entry-row__description {
   font-size: var(--sys-typo-label-sm-size);
   line-height: var(--sys-typo-label-sm-line);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
   /* Identity-group ↔ description separator: 2px (ref.space.25). The
      description reads as a tight supporting layer below the identity
      block rather than a co-equal line. */
@@ -2784,7 +2803,7 @@ a.chorus-metadata__name:focus-visible {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
   flex: 0 0 auto;
   margin-left: var(--sys-layout-inline-md);
 }
@@ -2825,7 +2844,7 @@ a.chorus-metadata__name:focus-visible {
      modifier when the card needs its own opaque tier (sitting on a
      transparent host or between bare-surface sections). */
   background: transparent;
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
   border: 0;
   border-radius: var(--sys-radius-md);
   text-align: left;
@@ -2833,7 +2852,7 @@ a.chorus-metadata__name:focus-visible {
   cursor: pointer;
   position: relative;
   isolation: isolate;
-  box-shadow: inset 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-outlineVariant);
+  box-shadow: inset 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-border-default);
   transition: background 120ms ease;
 }
 
@@ -2854,12 +2873,12 @@ a.chorus-metadata__name:focus-visible {
 /* Default hover/pressed — overlay mixes on a transparent base, so the
    host surface tone keeps reading through underneath the state paint. */
 .chorus-nav-card:hover {
-  background: color-mix(in srgb, var(--sys-color-onSurface) calc(var(--sys-state-hover) * 100%), transparent);
+  background: color-mix(in srgb, var(--sys-color-text-default) calc(var(--sys-state-hover) * 100%), transparent);
 }
 
 .chorus-nav-card:active,
 .chorus-nav-card[data-force-state="pressed"] {
-  background: color-mix(in srgb, var(--sys-color-onSurface) calc(var(--sys-state-pressed) * 100%), transparent);
+  background: color-mix(in srgb, var(--sys-color-text-default) calc(var(--sys-state-pressed) * 100%), transparent);
 }
 
 /* Surface appearance — paints the card with its own `surface` fill.
@@ -2869,16 +2888,16 @@ a.chorus-metadata__name:focus-visible {
    hairline outline + chevron + hover overlay all stay; only the
    container fill changes. */
 .chorus-nav-card--surface {
-  background: var(--sys-color-surface);
+  background: var(--sys-color-surface-default);
 }
 
 .chorus-nav-card--surface:hover {
-  background: color-mix(in srgb, var(--sys-color-onSurface) calc(var(--sys-state-hover) * 100%), var(--sys-color-surface));
+  background: color-mix(in srgb, var(--sys-color-text-default) calc(var(--sys-state-hover) * 100%), var(--sys-color-surface-default));
 }
 
 .chorus-nav-card--surface:active,
 .chorus-nav-card--surface[data-force-state="pressed"] {
-  background: color-mix(in srgb, var(--sys-color-onSurface) calc(var(--sys-state-pressed) * 100%), var(--sys-color-surface));
+  background: color-mix(in srgb, var(--sys-color-text-default) calc(var(--sys-state-pressed) * 100%), var(--sys-color-surface-default));
 }
 
 /* Outward focus ring — paints OUTSIDE the card's outline so it never
@@ -2901,14 +2920,15 @@ a.chorus-metadata__name:focus-visible {
 
 .chorus-nav-card:focus-visible::after,
 .chorus-nav-card[data-force-state="focused"]::after {
-  box-shadow:
-    0 0 0 var(--sys-borderWidth-thin) var(--sys-color-focus),
-    0 0 0 calc(var(--sys-borderWidth-thin) + var(--sys-borderWidth-hairline)) var(--sys-color-focusInset);
+  box-shadow: 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-border-focused);
 }
 
 .chorus-nav-card[data-disabled="true"],
 .chorus-nav-card:disabled {
-  opacity: var(--sys-state-disabled);
+  /* Explicit disabled (no opacity): content re-tones to text.disabled via
+     the card's inherited color (label / supporting / leading glyph all
+     ride it). */
+  color: var(--sys-color-text-disabled);
   cursor: not-allowed;
 }
 
@@ -2934,7 +2954,7 @@ a.chorus-metadata__name:focus-visible {
   font-size: var(--sys-typo-body-sm-size);
   line-height: var(--sys-typo-body-sm-line);
   font-weight: var(--sys-typo-body-sm-weight);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2943,7 +2963,7 @@ a.chorus-metadata__name:focus-visible {
 .chorus-nav-card__supporting {
   font-size: var(--sys-typo-label-sm-size);
   line-height: var(--sys-typo-label-sm-line);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2953,7 +2973,7 @@ a.chorus-metadata__name:focus-visible {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
   flex: 0 0 auto;
 }
 
@@ -2976,7 +2996,7 @@ a.chorus-metadata__name:focus-visible {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-icon-default);
   transition: color 120ms ease;
 }
 
@@ -2993,7 +3013,7 @@ a.chorus-metadata__name:focus-visible {
    anchored to the rail's right edge regardless of how far the user
    scrolls the avatars. */
 .chorus-avatar-rail {
-  background: var(--sys-color-surface);
+  background: var(--sys-color-surface-default);
   width: 100%;
   box-sizing: border-box;
   padding: var(--sys-layout-container-sm) var(--sys-layout-container-md);
@@ -3068,7 +3088,7 @@ a.chorus-metadata__name:focus-visible {
 }
 
 .chorus-avatar-rail__item:focus-visible {
-  outline: var(--sys-borderWidth-hairline) solid var(--sys-color-focus);
+  outline: var(--sys-borderWidth-hairline) solid var(--sys-color-border-focused);
   outline-offset: var(--sys-layout-inline-xs);
 }
 
@@ -3086,7 +3106,7 @@ a.chorus-metadata__name:focus-visible {
   width: calc(48px + 2 * var(--sys-layout-inline-sm));
   font-size: var(--sys-typo-label-sm-size);
   line-height: var(--sys-typo-label-sm-line);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3119,7 +3139,7 @@ a.chorus-metadata__name:focus-visible {
    label), toggle at one inline.xl (16) before the next page's leading avatar,
    and that next avatar peeks 8 (inline.md) past the surface's right edge. */
 .chorus-suggestion-list {
-  background: var(--sys-color-surface);
+  background: var(--sys-color-surface-default);
   width: 100%;
   box-sizing: border-box;
   padding-block: var(--sys-layout-container-lg);
@@ -3257,7 +3277,7 @@ a.chorus-metadata__name:focus-visible {
 ============================================================ */
 .chorus-directory-list,
 .chorus-nav-list {
-  background: var(--sys-color-surface);
+  background: var(--sys-color-surface-default);
   width: 100%;
   box-sizing: border-box;
   /* Full-bleed column — the host pays NO inline padding. Its Header and
@@ -3278,6 +3298,65 @@ a.chorus-metadata__name:focus-visible {
    rule already excludes `[data-divider="false"]`, so no extra CSS
    is needed to hide it here. */
 
+/* ============================================================
+   EmptyState — centered no-data composition. Painted inside the
+   surface that would otherwise hold the data: an optional monochrome
+   illustration, a required headline, optional body copy, and an
+   optional primary-Button CTA. Ships no surface fill of its own —
+   the host supplies the surface tier and the bounding box; EmptyState
+   only centers its column inside it. Inter-slot rhythm follows the
+   stack tokens (illustration→headline 12, headline→body 4, body→CTA
+   16). Distinct from Skeleton (an in-flight loading placeholder).
+============================================================ */
+.chorus-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+/* Optional illustration — a glyph / illustration sized to a 48-box
+   (larger than `sys.icon.lg`, realizing the 'icon.xl or larger' intent
+   since no `sys.icon.xl` rung exists), painted monochrome in
+   `onSurfaceVariant` via `currentColor` so it reads as quiet chrome,
+   not a brand moment. 12 below it to the headline. */
+.chorus-empty-state__illustration {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--empty-state-illustration-size);
+  height: var(--empty-state-illustration-size);
+  margin-bottom: var(--empty-state-illustration-gap);
+  color: var(--empty-state-illustration-color);
+}
+
+.chorus-empty-state__illustration img,
+.chorus-empty-state__illustration svg {
+  width: var(--empty-state-illustration-size);
+  height: var(--empty-state-illustration-size);
+  display: block;
+  color: currentColor;
+}
+
+/* Required headline — heading.sm in `onSurface`. Typography vars are
+   emitted inline by the React file (typoStyles). */
+.chorus-empty-state__headline {
+  margin: 0;
+  color: var(--empty-state-headline-color);
+}
+
+/* Optional body — body.sm in `onSurfaceVariant`, 4 below the headline. */
+.chorus-empty-state__body {
+  margin: 0;
+  margin-top: var(--empty-state-body-gap);
+  color: var(--empty-state-body-color);
+}
+
+/* Optional CTA — a default-size primary Button, 16 below the body. */
+.chorus-empty-state__action {
+  margin-top: var(--empty-state-action-gap);
+}
+
 /* ============================================================
    Banner — in-body explanation block (info / neutral)
 ============================================================ */
@@ -3290,9 +3369,9 @@ a.chorus-metadata__name:focus-visible {
 }
 
 .chorus-banner--accent {
-  background: var(--sys-color-primaryContainer);
-  color: var(--sys-color-onPrimaryContainer);
-  --banner-outline-color: color-mix(in srgb, var(--sys-color-primary) 40%, transparent);
+  background: var(--sys-color-background-selected);
+  color: var(--sys-color-text-link);
+  --banner-outline-color: color-mix(in srgb, var(--sys-color-border-primary) 40%, transparent);
 }
 
 /* Destructive — error-tinted banner. Reach for it when the aside is a
@@ -3301,30 +3380,26 @@ a.chorus-metadata__name:focus-visible {
    shadcn `<Alert variant="destructive">` shape for Lovable-generated
    screens. */
 .chorus-banner--destructive {
-  background: var(--sys-color-errorContainer);
-  color: var(--sys-color-onErrorContainer);
-  --banner-outline-color: color-mix(in srgb, var(--sys-color-error) 40%, transparent);
-}
-
-/* Default uses `sys.color.scrimSubtle` (~8% inverse-tone overlay —
-   black in light, white in dark) rather than a tonal container role,
-   so the banner stays harmonious on any underlying surface — body,
-   raised card, BottomSheet, Dialog — by tinting one step darker
-   (light mode) or lighter (dark mode) instead of pinning to a fixed
-   neutral step that can collide with the surface ladder. Same scrim
-   used by Chip / Tag default, Progress track, StatusTag neutral, and
-   Skeleton. */
+  background: var(--sys-color-background-danger);
+  color: var(--sys-color-text-danger);
+  --banner-outline-color: color-mix(in srgb, var(--sys-color-border-danger) 40%, transparent);
+}
+
+/* Default uses the solid `background.neutral` fill (the role that
+   replaced the old ~8% scrim) — a fixed light-gray step in light, a
+   mid-gray in dark. Same neutral fill as Chip / Tag default, Progress
+   track, StatusTag neutral, and Skeleton, so they read as one family. */
 .chorus-banner--default {
-  background: var(--sys-color-scrimSubtle);
-  color: var(--sys-color-onSurface);
-  --banner-outline-color: var(--sys-color-outlineVariant);
+  background: var(--sys-color-background-neutral);
+  color: var(--sys-color-text-default);
+  --banner-outline-color: var(--sys-color-border-default);
 }
 
 /* Optional outline — a hairline inset stroke toned to the appearance's
    color family (each appearance block above sets
    `--banner-outline-color`), kept deliberately faint so the edge reads
    as a soft boundary of the same tint, not a frame: the subtle gray
-   hairline (`sys.color.outlineVariant`) on default's gray-tinted
+   hairline (`sys.color.border.default`) on default's gray-tinted
    scrim; `primary` / `error` at 40% over transparent (the Skeleton
    fill recipe) on accent / destructive. Painted as an inset
    box-shadow, never a `border`, so toggling it can't change the
@@ -3414,7 +3489,22 @@ a.chorus-metadata__name:focus-visible {
 }
 
 .chorus-banner--default .chorus-banner__action {
-  color: var(--sys-color-primary);
+  color: var(--sys-color-text-link);
+}
+
+/* neutral-body — keeps the `accent` fill but lays the Default
+   appearance's neutral foreground over it: title + body re-tone to
+   `onSurface` (quiet, high-legibility body copy) while the action
+   steps to `primary`, exactly as on `default`. The accent tint still
+   pulls the eye; the text just stops shouting in the primary family.
+   Only meaningful combined with `--accent` (default is already
+   `onSurface`; destructive must carry the warning tone through copy). */
+.chorus-banner--accent.chorus-banner--neutral-body {
+  color: var(--sys-color-text-default);
+}
+
+.chorus-banner--accent.chorus-banner--neutral-body .chorus-banner__action {
+  color: var(--sys-color-text-link);
 }
 
 /* Trailing icon slot — a 16 × 16 glyph (`sys.icon.md`) at the trailing
@@ -3439,19 +3529,34 @@ a.chorus-metadata__name:focus-visible {
   color: currentColor;
 }
 
+/* Trailing action slot — hosts an inline Text Button (`<Button
+   variant="text">`) at the trailing edge, vertically centered against
+   the whole block (`align-self: center` overrides the container's
+   flex-start) and footprint-preserving (`flex: 0 0 auto`). The Button
+   owns its own size + appearance per the button/text spec; by default
+   pick the appearance whose color family matches the banner fill
+   (accent → accent, default → default, destructive → destructive
+   flavor) so the commit reads as part of the tinted block. Unlike the
+   trailing icon it is a real interactive control, so it is not
+   aria-hidden. The Text Button's optical-alignment margin lets its
+   visible label sit flush against the container's trailing padding. */
+.chorus-banner__trailing-action {
+  flex: 0 0 auto;
+  align-self: center;
+  display: inline-flex;
+}
+
 /* ============================================================
    Divider — section-break band between adjacent regions that
    don't share an enclosing container. Single full-bleed block
-   painted with `sys.color.scrimSubtle` (~8% inverse-tone
-   overlay — black in light mode, white in dark) at a fixed
-   `sys.layout.stack.xs` (8) block thickness — the 1× rung of
-   the base-unit ladder. The translucent fill stays visible on
-   every host surface tier (surface, surfaceContainerHigh,
-   hero, …) without colliding with a fixed neutral step —
-   same scrim tier as Banner default, Chip / Tag default,
-   Progress track, StatusTag neutral, and Skeleton. Resets
-   every browser `<hr>` default (margin, border, background-
-   image) so only the scrimSubtle band paints.
+   painted with `sys.color.border.default` (the hairline
+   separator role — a faint gray in light, a subtle dark step in
+   dark) at a fixed `sys.layout.stack.xs` (8) block thickness —
+   the 1× rung of the base-unit ladder. Reads as a separator
+   tier rather than a fill (unlike Banner / Chip / Tag default,
+   which take the solid `background.neutral`). Resets every
+   browser `<hr>` default (margin, border, background-image) so
+   only the divider band paints.
 ============================================================ */
 .chorus-divider {
   display: block;
@@ -3461,7 +3566,7 @@ a.chorus-metadata__name:focus-visible {
   padding: 0;
   border: none;
   border-radius: 0;
-  background: var(--sys-color-scrimSubtle);
+  background: var(--sys-color-border-default);
   background-image: none;
   flex-shrink: 0;
 }
@@ -3504,8 +3609,8 @@ a.chorus-metadata__name:focus-visible {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  background: var(--sys-color-surface);
-  color: var(--sys-color-onSurface);
+  background: var(--sys-color-surface-default);
+  color: var(--sys-color-text-default);
   box-shadow: var(--sys-elevation-sheet);
 }
 
@@ -3557,7 +3662,7 @@ a.chorus-metadata__name:focus-visible {
 .chorus-side-sheet__footer {
   flex: 0 0 auto;
   padding: var(--sys-layout-container-md);
-  border-top: var(--sys-borderWidth-hairline) solid var(--sys-color-outlineVariant);
+  border-top: var(--sys-borderWidth-hairline) solid var(--sys-color-border-default);
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -3603,8 +3708,8 @@ a.chorus-metadata__name:focus-visible {
   max-height: 90vh;
   display: flex;
   flex-direction: column;
-  background: var(--sys-color-surfaceContainerHigh);
-  color: var(--sys-color-onSurface);
+  background: var(--sys-color-surface-default);
+  color: var(--sys-color-text-default);
   border-top-left-radius: var(--sys-radius-xl);
   border-top-right-radius: var(--sys-radius-xl);
   box-shadow: var(--sys-elevation-sheet);
@@ -3622,7 +3727,7 @@ a.chorus-metadata__name:focus-visible {
   height: var(--ref-space-50);
   margin: var(--sys-layout-container-xs) auto;
   border-radius: var(--sys-radius-full);
-  background: color-mix(in srgb, var(--sys-color-onSurfaceVariant) 40%, transparent);
+  background: color-mix(in srgb, var(--sys-color-text-subtle) 40%, transparent);
 }
 
 .chorus-bottom-sheet__content {
@@ -3640,7 +3745,7 @@ a.chorus-metadata__name:focus-visible {
   line-height: var(--sys-typo-heading-lg-line);
   font-weight: var(--sys-typo-heading-lg-weight);
   letter-spacing: var(--sys-typo-heading-lg-tracking);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
 }
 
 /* Nested-step title row — when the sheet drives a drill-in, an Icon
@@ -3659,7 +3764,7 @@ a.chorus-metadata__name:focus-visible {
   font-size: var(--sys-typo-body-md-size);
   line-height: var(--sys-typo-body-md-line);
   font-weight: var(--sys-typo-body-md-weight);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
 }
 
 .chorus-bottom-sheet__actions {
@@ -3668,7 +3773,7 @@ a.chorus-metadata__name:focus-visible {
   flex-direction: column;
   gap: var(--sys-layout-stack-xs);
   padding: var(--sys-layout-container-md);
-  background: var(--sys-color-surfaceContainerHigh);
+  background: var(--sys-color-surface-default);
   transition: box-shadow 120ms ease-out;
 }
 
@@ -3713,8 +3818,8 @@ a.chorus-metadata__name:focus-visible {
   align-items: stretch;
   text-align: start;
   padding: var(--sys-layout-container-lg);
-  background: var(--sys-color-surfaceContainerHigh);
-  color: var(--sys-color-onSurface);
+  background: var(--sys-color-surface-default);
+  color: var(--sys-color-text-default);
   border-radius: var(--sys-radius-xl);
   box-shadow: var(--sys-elevation-overlay);
 }
@@ -3730,7 +3835,7 @@ a.chorus-metadata__name:focus-visible {
   line-height: var(--sys-typo-heading-sm-line);
   font-weight: var(--sys-typo-heading-sm-weight);
   letter-spacing: var(--sys-typo-heading-sm-tracking);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
 }
 
 .chorus-dialog__image {
@@ -3746,7 +3851,7 @@ a.chorus-metadata__name:focus-visible {
   font-size: var(--sys-typo-body-sm-size);
   line-height: var(--sys-typo-body-sm-line);
   font-weight: var(--sys-typo-body-sm-weight);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
 }
 
 .chorus-dialog__actions {
@@ -3854,7 +3959,7 @@ a.chorus-metadata__name:focus-visible {
 
 /* Accessibility focus ring — a dedicated overlay layer (`::after`),
    `position: absolute` so it never affects layout: a focused field never
-   widens and never nudges a sibling. Canonical two-layer composition,
+   widens and never nudges a sibling. Canonical single-ring composition,
    painted outward from the field's edge; sits at `z-index: 2`, above the
    state-overlay `::before` (z-index 0) and the input / clear slots
    (z-index 1). `inset: 0` because the field has no `border` — the padding
@@ -3872,14 +3977,15 @@ a.chorus-metadata__name:focus-visible {
 }
 
 .chorus-field[data-force-state="focused"]::after {
-  box-shadow:
-    0 0 0 var(--field-focus-inset-width) var(--field-focus-inset-color),
-    0 0 0 calc(var(--field-focus-outer-width) + var(--field-focus-inset-width)) var(--field-focus-outer-color);
+  box-shadow: 0 0 0 var(--sys-borderWidth-hairline) var(--field-focus-outer-color);
 }
 
 .chorus-field.is-disabled {
+  /* Explicit disabled (no opacity): neutral disabled fill + bold border
+     + disabled text. The component swaps `--field-text` / `--field-border`
+     to the disabled tokens when disabled (see FormField.jsx), so the held
+     rest stroke and typed text re-tone without a dim. */
   background: var(--field-bg-disabled);
-  opacity: var(--field-disabled-opacity);
   cursor: not-allowed;
   /* Hold the rest stroke even if the disabled field is hovered. */
   box-shadow: inset 0 0 0 var(--field-border-width) var(--field-border);
@@ -4005,7 +4111,7 @@ a.chorus-metadata__name:focus-visible {
   padding: 0;
   border: none;
   background: transparent;
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
   border-radius: var(--sys-radius-full);
   cursor: pointer;
 }
@@ -4027,7 +4133,7 @@ a.chorus-metadata__name:focus-visible {
 }
 
 /* Focus ring — dedicated overlay layer (`::after`), `position: absolute`
-   so it never affects the field's layout. Canonical two-layer ring,
+   so it never affects the field's layout. Canonical single-ring,
    outward; `z-index: 2`, above the 16px glyph. */
 .chorus-field__clear::after {
   content: '';
@@ -4041,9 +4147,7 @@ a.chorus-metadata__name:focus-visible {
 }
 
 .chorus-field__clear:focus-visible::after {
-  box-shadow:
-    0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-focusInset),
-    0 0 0 calc(var(--sys-borderWidth-thin) + var(--sys-borderWidth-hairline)) var(--sys-color-focus);
+  box-shadow: 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-border-focused);
 }
 
 /* ============================================================
@@ -4074,7 +4178,7 @@ a.chorus-metadata__name:focus-visible {
   font-weight: var(--sys-typo-label-md-weight);
   line-height: var(--sys-typo-label-md-line);
   letter-spacing: var(--sys-typo-label-md-tracking);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
 }
 
 .chorus-field-group__helper {
@@ -4082,7 +4186,7 @@ a.chorus-metadata__name:focus-visible {
   font-weight: var(--sys-typo-body-sm-weight);
   line-height: var(--sys-typo-body-sm-line);
   letter-spacing: var(--sys-typo-body-sm-tracking);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
 }
 
 .chorus-field-group__count {
@@ -4091,14 +4195,14 @@ a.chorus-metadata__name:focus-visible {
   font-weight: var(--sys-typo-body-sm-weight);
   line-height: var(--sys-typo-body-sm-line);
   letter-spacing: var(--sys-typo-body-sm-tracking);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
 }
 
 /* Current-count number — same body.sm size, label.md weight so the
    live count reads bolder than the `/max` suffix. */
 .chorus-field-group__count-current {
   font-weight: var(--sys-typo-label-md-weight);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
 }
 
 /* Error appearance — re-tone the helper / count so the bottom rung
@@ -4106,16 +4210,15 @@ a.chorus-metadata__name:focus-visible {
 .chorus-field-group--error .chorus-field-group__helper,
 .chorus-field-group--error .chorus-field-group__count,
 .chorus-field-group--error .chorus-field-group__count-current {
-  color: var(--sys-color-error);
+  color: var(--sys-color-text-danger);
 }
 
-/* Disabled — dim the label / helper / count to match the 40% the box
-   already applies to itself. Box and group bits use the same
-   `--field-disabled-opacity` independently (no compounding). */
+/* Disabled — re-tone the label / helper / count to `text.disabled` to
+   match the field box's explicit disabled treatment (no opacity). */
 .chorus-field-group.is-disabled .chorus-field-group__label,
 .chorus-field-group.is-disabled .chorus-field-group__helper,
 .chorus-field-group.is-disabled .chorus-field-group__count {
-  opacity: var(--field-disabled-opacity);
+  color: var(--sys-color-text-disabled);
 }
 
 /* Trailing slot — symmetric to `.chorus-field__leading`. Hosts the
@@ -4130,7 +4233,7 @@ a.chorus-metadata__name:focus-visible {
   justify-content: center;
   width: var(--field-icon-size);
   height: var(--field-icon-size);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
 }
 
 .chorus-field--error .chorus-field__trailing {
@@ -4273,8 +4376,8 @@ a.chorus-metadata__name:focus-visible {
     calc(env(safe-area-inset-top, 0px) + var(--sys-layout-container-xs))
     var(--sys-layout-container-md)
     var(--sys-layout-container-xs);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-onSurface);
+  background: var(--sys-color-surface-default);
+  color: var(--sys-color-text-default);
 }
 
 /* Main row layout (leading slot + flex-grown left title + trailing action
@@ -4295,7 +4398,7 @@ a.chorus-metadata__name:focus-visible {
   line-height: var(--sys-typo-heading-lg-line);
   font-weight: var(--sys-typo-heading-lg-weight);
   letter-spacing: var(--sys-typo-heading-lg-tracking);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -4329,7 +4432,7 @@ a.chorus-metadata__name:focus-visible {
   line-height: var(--sys-typo-heading-sm-line);
   font-weight: var(--sys-typo-heading-sm-weight);
   letter-spacing: var(--sys-typo-heading-sm-tracking);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -4407,7 +4510,7 @@ a.chorus-metadata__name:focus-visible {
      the row or shifts the input's caret position. Unique to Search; the
      bare input has no chrome of its own and the divider terminates the
      bar against the results list below. */
-  box-shadow: inset 0 -1px 0 var(--sys-color-outlineVariant);
+  box-shadow: inset 0 -1px 0 var(--sys-color-border-default);
 }
 
 .chorus-navigation-bar--search .chorus-navigation-bar__slot--leading {
@@ -4419,9 +4522,9 @@ a.chorus-metadata__name:focus-visible {
 }
 
 /* Bare input — no border / background / inset stroke. Type rung body.md
-   (16/Regular). Caret picks up `sys.color.primary` so the active state
+   (16/Regular). Caret picks up `sys.color.background.primary` so the active state
    reads against the surface fill. Placeholder picks up `sys.color.outline`;
-   value text picks up `sys.color.onSurface`. */
+   value text picks up `sys.color.text.default`. */
 .chorus-navigation-bar__search-input {
   box-sizing: border-box;
   width: 100%;
@@ -4430,8 +4533,8 @@ a.chorus-metadata__name:focus-visible {
   padding: 0;
   border: 0;
   background: transparent;
-  color: var(--sys-color-onSurface);
-  caret-color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
+  caret-color: var(--sys-color-text-default);
   font-family: inherit;
   font-size: var(--sys-typo-body-md-size);
   line-height: var(--sys-typo-body-md-line);
@@ -4443,7 +4546,7 @@ a.chorus-metadata__name:focus-visible {
 }
 
 .chorus-navigation-bar__search-input::placeholder {
-  color: var(--sys-color-outline);
+  color: var(--sys-color-border-boldest);
   opacity: 1;
 }
 
@@ -4469,8 +4572,8 @@ a.chorus-metadata__name:focus-visible {
    40 × 40 footprint falls out of `8 (padding) + 24 (glyph) + 8` and
    re-flows automatically if the icon token changes. Transparent at
    rest; hover / pressed paint `sys.state.*` overlays of `onSurface`;
-   focus composes the standard three-layer ring (`sys.color.focus`
-   outside `sys.color.focusInset`). */
+   focus composes the standard three-layer ring (`sys.color.border.focused`
+   outside `sys.color.border.focused`). */
 .chorus-button--icon {
   box-sizing: border-box;
   display: inline-flex;
@@ -4492,7 +4595,7 @@ a.chorus-metadata__name:focus-visible {
   /* Per-appearance plumbing — the glyph colour drives the hover /
      pressed / focus overlays (they `color-mix` from this var), so
      each appearance only declares one token. */
-  --button-icon-glyph-color: var(--sys-color-onSurface);
+  --button-icon-glyph-color: var(--sys-color-icon-default);
   color: var(--button-icon-glyph-color);
   border-radius: var(--sys-radius-full);
   cursor: pointer;
@@ -4509,8 +4612,8 @@ a.chorus-metadata__name:focus-visible {
 /* Appearance modifiers — only the glyph colour token changes. Hover /
    pressed / focus overlays mix from `--button-icon-glyph-color`, so
    the recipe falls out without per-appearance overlay rules. */
-.chorus-button--icon--appearance-default { --button-icon-glyph-color: var(--sys-color-onSurface); }
-.chorus-button--icon--appearance-inverse { --button-icon-glyph-color: var(--sys-color-inverseOnSurface); }
+.chorus-button--icon--appearance-default { --button-icon-glyph-color: var(--sys-color-icon-default); }
+.chorus-button--icon--appearance-inverse { --button-icon-glyph-color: var(--sys-color-text-inverse); }
 
 .chorus-button--icon:hover,
 .chorus-button--icon[data-force-state="hovered"] {
@@ -4524,9 +4627,8 @@ a.chorus-metadata__name:focus-visible {
 
 .chorus-button--icon:focus-visible,
 .chorus-button--icon[data-force-state="focused"] {
-  outline: var(--sys-borderWidth-thin) solid var(--sys-color-focus);
-  outline-offset: calc(-1 * var(--sys-borderWidth-thin));
-  box-shadow: inset 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-focusInset);
+  outline: var(--sys-borderWidth-hairline) solid var(--sys-color-border-focused);
+  outline-offset: calc(-1 * var(--sys-borderWidth-hairline));
 }
 
 .chorus-button--icon[data-force-state="focused"] {
@@ -4568,7 +4670,7 @@ a.chorus-metadata__name:focus-visible {
    density. Renders as <a> when `href` is given, <button> otherwise. */
 .chorus-button--text {
   /* Per-size plumbing — appearance + size modifiers override these. */
-  --button-text-label: var(--sys-color-onSurfaceVariant);
+  --button-text-label: var(--sys-color-text-subtle);
   --button-text-min-height: var(--ref-space-500);
   --button-text-padding-block: var(--sys-layout-container-xs);
   --button-text-padding-inline: var(--sys-layout-container-xs);
@@ -4620,10 +4722,10 @@ a.chorus-metadata__name:focus-visible {
    `inverse` swaps the label to the inverse cluster so a Text Button
    inside a Toast / coach-mark / snackbar reads against the host's
    `inverseSurface` fill without a per-host tweak. */
-.chorus-button--text--appearance-default   { --button-text-label: var(--sys-color-onSurfaceVariant); }
-.chorus-button--text--appearance-accent    { --button-text-label: var(--sys-color-primary); }
-.chorus-button--text--appearance-onPrimary { --button-text-label: var(--sys-color-onPrimary); }
-.chorus-button--text--appearance-inverse   { --button-text-label: var(--sys-color-inverseOnSurface); }
+.chorus-button--text--appearance-default   { --button-text-label: var(--sys-color-text-subtle); }
+.chorus-button--text--appearance-accent    { --button-text-label: var(--sys-color-text-accent-blue); }
+.chorus-button--text--appearance-onPrimary { --button-text-label: var(--sys-color-text-onFill); }
+.chorus-button--text--appearance-inverse   { --button-text-label: var(--sys-color-text-inverse); }
 
 /* Size modifiers — pair min-height + padding + typo + icon footprint. */
 .chorus-button--text--size-medium {
@@ -4693,9 +4795,8 @@ a.chorus-metadata__name:focus-visible {
 
 .chorus-button--text:focus-visible,
 .chorus-button--text[data-force-state="focused"] {
-  outline: var(--sys-borderWidth-thin) solid var(--sys-color-focus);
-  outline-offset: calc(-1 * var(--sys-borderWidth-thin));
-  box-shadow: inset 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-focusInset);
+  outline: var(--sys-borderWidth-hairline) solid var(--sys-color-border-focused);
+  outline-offset: calc(-1 * var(--sys-borderWidth-hairline));
 }
 
 .chorus-button--text[data-force-state="focused"] {
@@ -4719,7 +4820,7 @@ a.chorus-metadata__name:focus-visible {
    layout edges. */
 .chorus-button--check {
   /* Per-size plumbing. */
-  --button-check-label: var(--sys-color-onSurfaceVariant);
+  --button-check-label: var(--sys-color-text-subtle);
   --button-check-min-height: var(--ref-space-500);
   --button-check-padding-block: var(--sys-layout-container-xs);
   --button-check-padding-inline: var(--sys-layout-container-xs);
@@ -4756,9 +4857,18 @@ a.chorus-metadata__name:focus-visible {
   transition: background 120ms ease;
 }
 
-.chorus-button--check--appearance-default { --button-check-label: var(--sys-color-onSurfaceVariant); }
-.chorus-button--check--appearance-accent  { --button-check-label: var(--sys-color-primary); }
-.chorus-button--check--appearance-inverse { --button-check-label: var(--sys-color-inverseOnSurface); }
+.chorus-button--check--appearance-default { --button-check-label: var(--sys-color-text-subtle); }
+.chorus-button--check--appearance-accent  { --button-check-label: var(--sys-color-text-accent-blue); }
+.chorus-button--check--appearance-inverse { --button-check-label: var(--sys-color-text-inverse); }
+
+/* Standard checkbox glyph paints in `icon.default` — the selection-control
+   family's neutral glyph tone (selection is shown by the outline↔fill glyph
+   swap, not color), while the label keeps its quieter `text.subtle`. The
+   accent / inverse appearances intentionally tint the glyph with their label
+   color via `currentColor`, so this only re-tones the default appearance. */
+.chorus-button--check--appearance-default .chorus-button--check__checkbox {
+  color: var(--sys-color-icon-default);
+}
 
 /* Two sizes — the checkbox footprint is the size differentiator, not the
    label. Both rungs share `sys.typo.label.sm` (12-rank); medium pairs it
@@ -4830,9 +4940,8 @@ a.chorus-metadata__name:focus-visible {
 
 .chorus-button--check:focus-visible,
 .chorus-button--check[data-force-state="focused"] {
-  outline: var(--sys-borderWidth-thin) solid var(--sys-color-focus);
-  outline-offset: calc(-1 * var(--sys-borderWidth-thin));
-  box-shadow: inset 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-focusInset);
+  outline: var(--sys-borderWidth-hairline) solid var(--sys-color-border-focused);
+  outline-offset: calc(-1 * var(--sys-borderWidth-hairline));
 }
 
 .chorus-button--check[data-force-state="focused"] {
@@ -4874,13 +4983,13 @@ a.chorus-metadata__name:focus-visible {
      its original 56-tall footprint. Inline padding stays 0 — tab
      items are equal-width and span the full row. */
   padding: 0 0 env(safe-area-inset-bottom, 0px);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-onSurface);
+  background: var(--sys-color-surface-default);
+  color: var(--sys-color-text-default);
   /* Top hairline divider — separates the bar from the scrolling content
      above it without introducing a layout border that could nudge the
      56-tall row off-pixel. Painted as an inset shadow so the bar's flex
      geometry is untouched. */
-  box-shadow: inset 0 var(--sys-borderWidth-hairline) 0 0 var(--sys-color-outlineVariant);
+  box-shadow: inset 0 var(--sys-borderWidth-hairline) 0 0 var(--sys-color-border-default);
 }
 
 .chorus-tab-bar__item {
@@ -4908,14 +5017,14 @@ a.chorus-metadata__name:focus-visible {
   margin: 0;
   font: inherit;
   text-decoration: none;
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 }
 
 .chorus-tab-bar__item[aria-current="page"].is-active,
 .chorus-tab-bar__item.is-active {
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
 }
 
 .chorus-tab-bar__icon {
@@ -4954,27 +5063,25 @@ a.chorus-metadata__name:focus-visible {
 
 .chorus-tab-bar__item:hover::before,
 .chorus-tab-bar__item[data-force-state="hovered"]::before {
-  background: color-mix(in srgb, var(--sys-color-onSurface) calc(var(--sys-state-hover) * 100%), transparent);
+  background: color-mix(in srgb, var(--sys-color-text-default) calc(var(--sys-state-hover) * 100%), transparent);
 }
 
 .chorus-tab-bar__item:active::before,
 .chorus-tab-bar__item[data-force-state="pressed"]::before {
-  background: color-mix(in srgb, var(--sys-color-onSurface) calc(var(--sys-state-pressed) * 100%), transparent);
+  background: color-mix(in srgb, var(--sys-color-text-default) calc(var(--sys-state-pressed) * 100%), transparent);
 }
 
 .chorus-tab-bar__item[data-force-state="focused"]::before {
-  background: color-mix(in srgb, var(--sys-color-onSurface) calc(var(--sys-state-focus) * 100%), transparent);
+  background: color-mix(in srgb, var(--sys-color-text-default) calc(var(--sys-state-focus) * 100%), transparent);
 }
 
 /* Focus ring — three-layer composition rings the item flush at the
    slot edge. We can't ring outward (adjacent items are flush under
    `flex: 1 1 0`, so an outward stroke would overlap its neighbour),
-   so the standard composition is painted as `inset` shadows on the
-   ::after that covers the slot exactly. Layering reads from the slot
-   edge inward: `focus` (the 2px outer stroke) sits at the edge, then
-   `focusInset` (the 1px counter-ring) sits just inside — **focus
-   outer, inset inner**, never reversed. The ring is constrained
-   strictly inside the slot's bounding box. */
+   so the standard composition is painted as an `inset` shadow on the
+   ::after that covers the slot exactly: a single 1px `border.focused`
+   ring at the slot edge, constrained strictly inside the slot's
+   bounding box. */
 .chorus-tab-bar__item::after {
   content: '';
   position: absolute;
@@ -4988,9 +5095,7 @@ a.chorus-metadata__name:focus-visible {
 
 .chorus-tab-bar__item:focus-visible::after,
 .chorus-tab-bar__item[data-force-state="focused"]::after {
-  box-shadow:
-    inset 0 0 0 var(--sys-borderWidth-thin) var(--sys-color-focus),
-    inset 0 0 0 calc(var(--sys-borderWidth-thin) + var(--sys-borderWidth-hairline)) var(--sys-color-focusInset);
+  box-shadow: inset 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-border-focused);
 }
 
 /* Label fills the item's slot up to its natural text width and
@@ -5002,10 +5107,10 @@ a.chorus-metadata__name:focus-visible {
 .chorus-tab-bar__label {
   max-width: 100%;
   font-family: var(--sys-typo-fontFamily-sans);
-  font-size: var(--sys-typo-caption-size);
-  line-height: var(--sys-typo-caption-line);
-  font-weight: var(--sys-typo-caption-weight);
-  letter-spacing: var(--sys-typo-caption-tracking);
+  font-size: var(--sys-typo-label-xs-size);
+  line-height: var(--sys-typo-label-xs-line);
+  font-weight: var(--sys-typo-label-xs-weight);
+  letter-spacing: var(--sys-typo-label-xs-tracking);
   color: currentColor;
   text-align: center;
   white-space: nowrap;
@@ -5016,7 +5121,7 @@ a.chorus-metadata__name:focus-visible {
 }
 
 /* Primary appearance — the "Create" / "Compose" commit affordance.
-   Paints the glyph in `sys.color.brand` (the editorial/brand accent
+   Paints the glyph in `sys.color.text.brand` (the editorial/brand accent
    the system reserves for commit affordances that should read as the
    product's voice, not a generic call-to-action). Pair with a
    filled-tile icon (AddSquareFillIcon / ComposeFillIcon) so the
@@ -5027,11 +5132,11 @@ a.chorus-metadata__name:focus-visible {
    standard icon footprint so the row's optical alignment is
    unaffected. */
 .chorus-tab-bar__item--primary {
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
 }
 
 .chorus-tab-bar__item--primary .chorus-tab-bar__icon {
-  color: var(--sys-color-brand);
+  color: var(--sys-color-text-brand);
 }
 
 .chorus-tab-bar__item:focus-visible {
@@ -5040,7 +5145,9 @@ a.chorus-metadata__name:focus-visible {
 
 .chorus-tab-bar__item:disabled,
 .chorus-tab-bar__item[aria-disabled="true"] {
-  opacity: var(--sys-state-disabled);
+  /* Explicit disabled (no opacity): item re-tones to text.disabled; icon
+     and label ride currentColor so both follow. */
+  color: var(--sys-color-text-disabled);
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -5066,8 +5173,8 @@ a.chorus-metadata__name:focus-visible {
   max-width: min(400px, calc(100vw - 2 * var(--sys-layout-container-xs)));
   padding: var(--sys-layout-container-xs) var(--sys-layout-container-md);
   border-radius: var(--sys-radius-md);
-  background: var(--sys-color-inverseSurface);
-  color: var(--sys-color-inverseOnSurface);
+  background: var(--sys-color-background-inverse);
+  color: var(--sys-color-text-inverse);
   box-shadow: var(--sys-elevation-overlay);
 }
 
@@ -5149,16 +5256,16 @@ a.chorus-metadata__name:focus-visible {
    Pair the action button with `appearance="onPrimary"` (also
    theme-stable). */
 .chorus-tooltip--appearance-default {
-  background: var(--sys-color-primary);
-  color: var(--sys-color-onPrimary);
+  background: var(--sys-color-background-primary);
+  color: var(--sys-color-text-onFill);
 }
 
 /* Inverse — dark-cluster bubble for primary-heavy screens. Pair the
    action button with `appearance="inverse"` so the label flips with
    the host fill. */
 .chorus-tooltip--appearance-inverse {
-  background: var(--sys-color-inverseSurface);
-  color: var(--sys-color-inverseOnSurface);
+  background: var(--sys-color-background-inverse);
+  color: var(--sys-color-text-inverse);
 }
 
 .chorus-tooltip__body {
@@ -5256,8 +5363,8 @@ a.chorus-metadata__name:focus-visible {
 }
 
 .chorus-bubble {
-  --bubble-fill: var(--sys-color-primary);
-  --bubble-ink: var(--sys-color-onPrimary);
+  --bubble-fill: var(--sys-color-background-primary);
+  --bubble-ink: var(--sys-color-text-onFill);
 
   position: relative;
   display: inline-flex;
@@ -5277,10 +5384,10 @@ a.chorus-metadata__name:focus-visible {
   border-radius: var(--sys-radius-full);
   background: var(--bubble-fill);
   color: var(--bubble-ink);
-  font-size: var(--sys-typo-caption-size);
-  font-weight: var(--sys-typo-caption-weight);
-  line-height: var(--sys-typo-caption-line);
-  letter-spacing: var(--sys-typo-caption-tracking);
+  font-size: var(--sys-typo-label-xs-size);
+  font-weight: var(--sys-typo-label-xs-weight);
+  line-height: var(--sys-typo-label-xs-line);
+  letter-spacing: var(--sys-typo-label-xs-tracking);
 }
 
 /* Single-line body. `min-width: 0` is the standard flex-truncation
@@ -5345,7 +5452,7 @@ a.chorus-metadata__name:focus-visible {
 /* One 6px dot per page in an inline.sm row. An inline element —
    inline-flex, intrinsic width (no stretch, no self-centering); the
    host owns horizontal placement. Active dot paints `onSurface`, the
-   rest `outlineVariant`. Non-interactive (`aria-hidden` on the root) —
+   rest `border.default`. Non-interactive (`aria-hidden` on the root) —
    the host pager owns the active index and keyboard reach.
    See schema/components/pagination/pagination.md. */
 
@@ -5359,23 +5466,22 @@ a.chorus-metadata__name:focus-visible {
   width: var(--ref-space-75);
   height: var(--ref-space-75);
   border-radius: var(--sys-radius-full);
-  background: var(--sys-color-outlineVariant);
+  background: var(--sys-color-border-default);
   display: block;
 }
 
 .chorus-pagination__dot--active {
-  background: var(--sys-color-onSurface);
+  background: var(--sys-color-text-default);
 }
 
 /* ============================================================
    Progress — linear progress bar (determinate)
 ============================================================ */
-/* Single visual rung — 8px tall, radius.full. Track paints with
-   `sys.color.scrimSubtle` (the Banner-style inverse-tone scrim — black
-   8% in light, white 8% in dark) so the bar reads cleanly on any host
-   surface tier rather than colliding with a fixed surface-container
-   step. Indicator paints in `inverseSurface` so the filled segment
-   always contrasts against the bare-track scrim regardless of theme.
+/* Single visual rung — 8px tall, radius.full. Track paints with the
+   solid `background.neutral` fill (the role that replaced the old
+   Banner-style ~8% scrim) — a light-gray track in light, a mid-gray in
+   dark. Indicator paints in `inverseSurface` so the filled segment
+   always contrasts against the bare track regardless of theme.
    The indicator's `translateX` parks at `-100 + percent`% so the
    trailing edge sits at the value's ratio; transitions over 200ms so
    jumps animate. */
@@ -5386,7 +5492,7 @@ a.chorus-metadata__name:focus-visible {
   width: 100%;
   height: var(--sys-layout-container-xs);
   overflow: hidden;
-  background: var(--sys-color-scrimSubtle);
+  background: var(--sys-color-background-neutral);
   border-radius: var(--sys-radius-full);
   flex: 1 1 auto;
 }
@@ -5396,7 +5502,7 @@ a.chorus-metadata__name:focus-visible {
   position: absolute;
   inset: 0;
   width: 100%;
-  background: var(--sys-color-inverseSurface);
+  background: var(--sys-color-background-inverse);
   border-radius: inherit;
   transform: translateX(-100%);
   transition: transform 200ms ease-out;
@@ -5433,32 +5539,30 @@ a.chorus-metadata__name:focus-visible {
 }
 
 /* Neutral — the quiet informational default. Background paints with
-   `sys.color.scrimSubtle` — a translucent inverse-tone scrim (~8%
-   black light, ~8% white dark) so the pill stays a faint overlay on
-   the host surface rather than picking up the same tone as a
-   surface-* container. Same Banner-style fill used by Chip / Tag
-   default, Progress track, and Skeleton. Foreground stays bound to
-   `onSurfaceVariant` so legibility tracks the active palette
-   automatically. */
+   the solid `background.neutral` fill (the role that replaced the old
+   ~8% scrim) — a light-gray pill in light, a mid-gray in dark. Same
+   neutral fill used by Banner / Chip / Tag default, Progress track,
+   and Skeleton. Foreground stays bound to `text.subtle` so legibility
+   tracks the active palette automatically. */
 .chorus-status-tag--neutral {
-  background: var(--sys-color-scrimSubtle);
-  color: var(--sys-color-onSurfaceVariant);
+  background: var(--sys-color-background-neutral);
+  color: var(--sys-color-text-subtle);
 }
 
 .chorus-status-tag--error {
-  background: var(--sys-color-errorContainer);
-  color: var(--sys-color-onErrorContainer);
+  background: var(--sys-color-background-danger);
+  color: var(--sys-color-text-danger);
 }
 
 /* ============================================================
    Skeleton — tonal loading placeholder with opacity pulse
 ============================================================ */
-/* Translucent inverse-tone scrim (`sys.color.scrimSubtle` — black 8%
-   in light mode, white 8% in dark) painted with a slow opacity pulse
-   (0.5 → 1 → 0.5, 1.6s `ease-in-out`). The same Banner-style fill used
-   by Chip / Tag default, Progress track, and StatusTag neutral — stays
-   visible on every host surface tier without colliding with a fixed
-   neutral step. Three shapes select the default footprint and corner
+/* Solid `background.neutral` fill (the role that replaced the old ~8%
+   scrim) — a light-gray placeholder in light, a mid-gray in dark —
+   painted with a slow opacity pulse (0.5 → 1 → 0.5, 1.6s
+   `ease-in-out`). The same neutral fill used by Banner / Chip / Tag
+   default, Progress track, and StatusTag neutral. Three shapes select
+   the default footprint and corner
    radius. The pulse animates `opacity` only — no gradient sweep — so
    the placeholder reads as anonymous chrome and degrades cleanly under
    `prefers-reduced-motion: reduce`. */
@@ -5469,7 +5573,7 @@ a.chorus-metadata__name:focus-visible {
 
 .chorus-skeleton {
   display: block;
-  background: var(--sys-color-scrimSubtle);
+  background: var(--sys-color-background-neutral);
   animation: chorus-skeleton-pulse 1.6s ease-in-out infinite;
 }
 
@@ -5505,24 +5609,90 @@ a.chorus-metadata__name:focus-visible {
   }
 }
 
+/* ============================================================
+   Spinner — indeterminate rotating-arc loading indicator
+============================================================ */
+/* A rotating ring for short, progress-unknown waits (< ~1s) on a
+   neutral host surface. The arc paints `background.primary` as the
+   foreground motion over a solid `background.neutral` track ring (the
+   role that replaced the old ~8% scrim) so the rotation reads clearly.
+   The ring is drawn with a conic gradient masked to an annulus — no
+   `border:` (per the no-layout-strokes rule). Diameter rides the
+   icon.* ladder via the `--spinner-diameter` plumbing var (sys.icon.lg
+   medium / sys.icon.md small). Rotation modulates position, not
+   luminance, and is suppressed under `prefers-reduced-motion: reduce`,
+   leaving the full ring static as a quiet loading mark. */
+@keyframes chorus-spinner-rotate {
+  to { transform: rotate(360deg); }
+}
+
+.chorus-spinner {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spinner-gap);
+}
+
+.chorus-spinner__arc {
+  display: block;
+  flex: none;
+  width: var(--spinner-diameter);
+  height: var(--spinner-diameter);
+  border-radius: var(--sys-radius-full);
+  /* Foreground arc sweeps from primary to transparent over the track. */
+  background:
+    conic-gradient(var(--sys-color-background-primary), color-mix(in srgb, var(--sys-color-background-primary) 0%, transparent) 75%, color-mix(in srgb, var(--sys-color-background-primary) 0%, transparent));
+  /* Annulus mask: punch out the centre so it reads as a ring, 2px thick.
+     The mask fill is alpha-only — the opaque keep-region of the mask is
+     not a design color, so it is not a token binding. */
+  /* chorus-token-exempt */
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
+  /* chorus-token-exempt */
+  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
+  animation: chorus-spinner-rotate 0.8s linear infinite;
+}
+
+/* Faint full track ring under the rotating arc, painted via box-shadow
+   inset so the bare ring stays visible on any surface tier. */
+.chorus-spinner__arc::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 2px var(--sys-color-background-neutral);
+}
+
+.chorus-spinner__arc {
+  position: relative;
+}
+
+.chorus-spinner__label {
+  color: var(--sys-color-text-subtle);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chorus-spinner__arc {
+    animation: none;
+  }
+}
+
 /* ============================================================
    Switch — binary active/inactive pill with translating thumb
 ============================================================ */
-/* 52 × 32 pill track + 28 × 28 thumb. Inactive paints a `scrimSubtle`
-   track (inverse-tone ~8% tint) with a hairline outline and a fixed-white
+/* 52 × 32 pill track + 28 × 28 thumb. Inactive paints a solid
+   `background.neutral` track with a hairline outline and a fixed-white
    thumb; active paints `primary` track with no outline. Thumb translates 20px between
    the two ends. Whole track is the click target — the thumb is
    decorative. Outward focus ring matches Switch's "stands inline with
    whitespace around it" placement; the rest stroke stays a no-layout
    inset box-shadow. */
 .chorus-switch {
-  /* Inactive (resting) — `scrimSubtle` track (inverse-tone ~8% tint:
-     black in light, white in dark) so the track stays distinct on any
-     host surface tier, reinforced by the hairline outline, with a
-     fixed-white thumb that reads the same in light and dark. The active
-     selector below overrides for the on-state. */
-  --switch-track-bg: var(--sys-color-scrimSubtle);
-  --switch-track-outline: var(--sys-color-outlineVariant);
+  /* Inactive (resting) — `icon.subtlest` track: the off state of the
+     selection-control family, a mid-neutral that reads clearly on any host
+     surface, reinforced by the hairline outline, with a fixed-white thumb
+     that reads the same in light and dark. The active selector below
+     overrides for the on-state. */
+  --switch-track-bg: var(--sys-color-icon-subtlest);
+  --switch-track-outline: var(--sys-color-border-default);
   --switch-thumb-bg: var(--ref-palette-white-1000);
   --switch-thumb-offset: 0px;
 
@@ -5561,20 +5731,20 @@ a.chorus-metadata__name:focus-visible {
     transform 120ms ease-out;
 }
 
-/* Active — `primary` track, `onPrimary` thumb, outline disappears so the
-   filled track reads as one solid block. Thumb translates to the
+/* Active — `icon.accent.blue` track, `onFill` thumb, outline disappears so
+   the filled track reads as one solid block. Thumb translates to the
    trailing end (52 - 28 - 2*2 = 20). */
 .chorus-switch[data-state='active'] {
-  --switch-track-bg: var(--sys-color-primary);
+  --switch-track-bg: var(--sys-color-icon-accent-blue-default);
   --switch-track-outline: transparent;
-  --switch-thumb-bg: var(--sys-color-onPrimary);
+  --switch-thumb-bg: var(--sys-color-text-onFill);
   --switch-thumb-offset: 20px;
 }
 
 .chorus-switch:hover {
   background: color-mix(
     in srgb,
-    var(--sys-color-onSurface) calc(var(--sys-state-hover) * 100%),
+    var(--sys-color-text-default) calc(var(--sys-state-hover) * 100%),
     var(--switch-track-bg)
   );
 }
@@ -5583,7 +5753,7 @@ a.chorus-metadata__name:focus-visible {
 .chorus-switch[data-force-state='pressed'] {
   background: color-mix(
     in srgb,
-    var(--sys-color-onSurface) calc(var(--sys-state-pressed) * 100%),
+    var(--sys-color-text-default) calc(var(--sys-state-pressed) * 100%),
     var(--switch-track-bg)
   );
 }
@@ -5608,14 +5778,16 @@ a.chorus-metadata__name:focus-visible {
 
 .chorus-switch:focus-visible::after,
 .chorus-switch[data-force-state='focused']::after {
-  box-shadow:
-    0 0 0 var(--sys-borderWidth-thin) var(--sys-color-focus),
-    0 0 0 calc(var(--sys-borderWidth-thin) + var(--sys-borderWidth-hairline)) var(--sys-color-focusInset);
+  box-shadow: 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-border-focused);
 }
 
 .chorus-switch:disabled,
 .chorus-switch[data-disabled='true'] {
-  opacity: var(--sys-state-disabled);
+  /* Explicit disabled (no opacity): the track re-tones to the neutral
+     disabled fill with a bold edge, overriding the active/inactive track
+     set above — this rule wins on source order. Thumb stays put. */
+  --switch-track-bg: var(--sys-color-icon-disabled);
+  --switch-track-outline: var(--sys-color-border-bold);
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -5624,7 +5796,7 @@ a.chorus-metadata__name:focus-visible {
    Accordion — stack of expandable rows with rotating chevron
 ============================================================ */
 /* Edge-to-edge (`full-bleed`) family. Rows tile flush with a hairline
-   `outlineVariant` divider inset 16px (`layout.container.md`) on BOTH
+   `border.default` divider inset 16px (`layout.container.md`) on BOTH
    the leading and trailing edges so the rule reads as separating row
    *content*, not the container. Composes the divider on a dedicated
    `::after` overlay rather than a `border:` / full-bleed box-shadow so
@@ -5649,7 +5821,7 @@ a.chorus-metadata__name:focus-visible {
   right: var(--sys-layout-container-md);
   bottom: 0;
   height: var(--sys-borderWidth-hairline);
-  background: var(--sys-color-outlineVariant);
+  background: var(--sys-color-border-default);
   pointer-events: none;
 }
 
@@ -5663,7 +5835,7 @@ a.chorus-metadata__name:focus-visible {
   padding: var(--sys-layout-container-xs) var(--sys-layout-container-md);
   border: 0;
   background: transparent;
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
   text-align: left;
   cursor: pointer;
   position: relative;
@@ -5681,7 +5853,7 @@ a.chorus-metadata__name:focus-visible {
   line-height: var(--sys-typo-body-md-line);
   font-weight: var(--sys-typo-body-md-weight);
   letter-spacing: var(--sys-typo-body-md-tracking);
-  color: var(--sys-color-onSurface);
+  color: var(--sys-color-text-default);
 }
 
 .chorus-accordion__chevron {
@@ -5691,7 +5863,7 @@ a.chorus-metadata__name:focus-visible {
   justify-content: center;
   width: var(--sys-icon-md);
   height: var(--sys-icon-md);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
   transition: transform 120ms ease-out;
 }
 
@@ -5702,7 +5874,7 @@ a.chorus-metadata__name:focus-visible {
 .chorus-accordion__trigger:hover {
   background: color-mix(
     in srgb,
-    var(--sys-color-onSurface) calc(var(--sys-state-hover) * 100%),
+    var(--sys-color-text-default) calc(var(--sys-state-hover) * 100%),
     transparent
   );
 }
@@ -5711,7 +5883,7 @@ a.chorus-metadata__name:focus-visible {
 .chorus-accordion__trigger[data-force-state='pressed'] {
   background: color-mix(
     in srgb,
-    var(--sys-color-onSurface) calc(var(--sys-state-pressed) * 100%),
+    var(--sys-color-text-default) calc(var(--sys-state-pressed) * 100%),
     transparent
   );
 }
@@ -5735,17 +5907,26 @@ a.chorus-metadata__name:focus-visible {
 
 .chorus-accordion__trigger:focus-visible::before,
 .chorus-accordion__trigger[data-force-state='focused']::before {
-  box-shadow:
-    inset 0 0 0 var(--sys-borderWidth-thin) var(--sys-color-focus),
-    inset 0 0 0 calc(var(--sys-borderWidth-thin) + var(--sys-borderWidth-hairline)) var(--sys-color-focusInset);
+  box-shadow: inset 0 0 0 var(--sys-borderWidth-hairline) var(--sys-color-border-focused);
 }
 
 .chorus-accordion__trigger:disabled,
 .chorus-accordion__item[data-disabled='true'] {
-  opacity: var(--sys-state-disabled);
   cursor: not-allowed;
 }
 
+/* Explicit disabled (no opacity): trigger label re-tones to text.disabled,
+   chevron glyph to icon.disabled. */
+.chorus-accordion__trigger:disabled,
+.chorus-accordion__item[data-disabled='true'] .chorus-accordion__trigger,
+.chorus-accordion__item[data-disabled='true'] .chorus-accordion__label {
+  color: var(--sys-color-text-disabled);
+}
+
+.chorus-accordion__item[data-disabled='true'] .chorus-accordion__chevron {
+  color: var(--sys-color-icon-disabled);
+}
+
 .chorus-accordion__item[data-disabled='true'] .chorus-accordion__trigger {
   pointer-events: none;
 }
@@ -5766,7 +5947,7 @@ a.chorus-metadata__name:focus-visible {
        sub-list stretches flush to the accordion's right edge without
        a double-paid gutter.
 
-   Mode (b) also paints a hairline `outlineVariant` top group-divider
+   Mode (b) also paints a hairline `border.default` top group-divider
    via a `::before` overlay (no-layout stroke — a `border-top:` on the
    child container would reflow the first row's box and break its
    inward focus ring). The 16px inline inset mirrors the inter-item
@@ -5803,7 +5984,7 @@ a.chorus-metadata__name:focus-visible {
   right: var(--sys-layout-container-md);
   top: 0;
   height: var(--sys-borderWidth-hairline);
-  background: var(--sys-color-outlineVariant);
+  background: var(--sys-color-border-default);
   pointer-events: none;
 }
 
@@ -5845,7 +6026,7 @@ a.chorus-metadata__name:focus-visible {
   line-height: var(--sys-typo-body-sm-line);
   font-weight: var(--sys-typo-body-sm-weight);
   letter-spacing: var(--sys-typo-body-sm-tracking);
-  color: var(--sys-color-onSurfaceVariant);
+  color: var(--sys-color-text-subtle);
 }
 
 @media (prefers-reduced-motion: reduce) {