@attrus-ds/core 1.0.6 → 1.0.11

package/dist/css/components/action-bar.css

@@ -0,0 +1,93 @@
+/* ============================================================
+   ACTION BAR — components/action-bar.css
+   Persistent action strip for wizards, drawers and editors: primary
+   action on the right, secondary/back on the left, optional context
+   (progress, count, hint) in the middle.
+
+   IMPORTANT: right-align with `.action-bar-actions { margin-left:auto }`.
+   Never use a flex:1 spacer — a spacer competing with a stepper in the
+   same row collapses it (that is exactly how the stepper label overlap
+   bug happened).
+
+   Structure:
+     .action-bar
+       .action-bar-lead     back / secondary (optional)
+       .action-bar-context  progress text, count, hint (optional)
+       .action-bar-actions  primary cluster — margin-left:auto
+   Variants: .is-fixed (viewport-pinned) · .action-bar-sm · .on-inverse
+   ============================================================ */
+
+.action-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-6);
+  background: var(--glass-chrome);
+  color: var(--glass-chrome-fg);
+  -webkit-backdrop-filter: var(--glass-blur);
+  backdrop-filter: var(--glass-blur);
+  border-top: 1px solid var(--color-border-subtle);
+  box-sizing: border-box;
+  font-family: var(--font-sans);
+  width: 100%;
+}
+
+/* Pinned to the viewport bottom — for full-page wizards */
+.action-bar.is-fixed {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 900;
+  box-shadow: var(--shadow-lg);
+}
+
+.action-bar-lead {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex-shrink: 0;
+}
+.action-bar-context {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+  font-size: var(--fs-sm);
+  color: var(--color-foreground-secondary);
+}
+.action-bar-context .strong {
+  font-weight: var(--w-regular);
+  color: var(--color-foreground-default);
+}
+/* Right cluster — margin-left:auto, NOT a flex spacer */
+.action-bar-actions {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex-shrink: 0;
+}
+
+/* ---------- Dense ---------- */
+.action-bar-sm {
+  padding: var(--space-3) var(--space-5);
+  gap: var(--space-3);
+}
+.action-bar-sm .action-bar-context { font-size: var(--fs-xs); }
+
+/* ---------- On inverse ---------- */
+.action-bar.on-inverse {
+  background: var(--glass-hero);
+  color: var(--glass-hero-fg);
+  border-top-color: var(--color-border-inverse);
+}
+.action-bar.on-inverse .action-bar-context { color: var(--color-foreground-inverse-secondary); }
+.action-bar.on-inverse .action-bar-context .strong { color: var(--color-foreground-inverse-default); }
+
+/* ---------- Responsive ---------- */
+@media (max-width: 640px) {
+  .action-bar { flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4); }
+  .action-bar-context { order: 3; width: 100%; }
+  .action-bar-actions { margin-left: auto; }
+}

package/dist/css/components/ambient.css

@@ -0,0 +1,97 @@
+/* ============================================================
+   AMBIENT BACKDROP — components/ambient.css
+   The official decorative layer: soft radial brand blobs behind hero
+   and marketing content. Exists so the effect stops being re-invented
+   (with raw hex and random blur) on every landing page.
+
+   Structure:
+     .ambient                 the positioned container (position:relative host)
+       .ambient-blob          1–3 radial blobs (.is-1 / .is-2 / .is-3)
+       .ambient-scrim         MANDATORY readability veil over the blobs
+       .ambient-content       your content, above the layers
+
+   Blobs derive from --color-brand-solid / --color-accent-solid, so they
+   follow the active product. Motion respects prefers-reduced-motion.
+   ============================================================ */
+
+.ambient {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+}
+
+.ambient-blob {
+  position: absolute;
+  z-index: 0;
+  border-radius: var(--radius-pill);
+  filter: blur(80px);
+  pointer-events: none;
+  opacity: 0.55;
+  will-change: transform;
+}
+.ambient-blob.is-1 {
+  width: 46%;
+  aspect-ratio: 1;
+  top: -12%;
+  left: -8%;
+  background: radial-gradient(circle at 50% 50%, var(--color-brand-solid) 0%, transparent 70%);
+  animation: ambient-drift-a 22s var(--ease-linear) infinite alternate;
+}
+.ambient-blob.is-2 {
+  width: 38%;
+  aspect-ratio: 1;
+  bottom: -16%;
+  right: -6%;
+  background: radial-gradient(circle at 50% 50%, var(--color-accent-solid) 0%, transparent 70%);
+  animation: ambient-drift-b 28s var(--ease-linear) infinite alternate;
+}
+.ambient-blob.is-3 {
+  width: 30%;
+  aspect-ratio: 1;
+  top: 30%;
+  left: 42%;
+  background: radial-gradient(circle at 50% 50%, var(--color-brand-solid) 0%, transparent 72%);
+  opacity: 0.35;
+  animation: ambient-drift-a 34s var(--ease-linear) infinite alternate-reverse;
+}
+
+@keyframes ambient-drift-a {
+  from { transform: translate3d(0, 0, 0) scale(1); }
+  to   { transform: translate3d(6%, 8%, 0) scale(1.12); }
+}
+@keyframes ambient-drift-b {
+  from { transform: translate3d(0, 0, 0) scale(1.06); }
+  to   { transform: translate3d(-7%, -6%, 0) scale(1); }
+}
+
+/* Readability veil — REQUIRED. Without it, body copy over the blobs
+   drops below AA at the blob centres. */
+.ambient-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  background: linear-gradient(180deg,
+    color-mix(in srgb, var(--color-background-canvas) 62%, transparent) 0%,
+    color-mix(in srgb, var(--color-background-canvas) 86%, transparent) 100%);
+}
+/* On a permanently-dark hero, veil with ink instead of the ambient canvas */
+.ambient.on-inverse .ambient-scrim {
+  background: linear-gradient(180deg,
+    color-mix(in srgb, var(--color-background-inverse) 58%, transparent) 0%,
+    color-mix(in srgb, var(--color-background-inverse) 84%, transparent) 100%);
+}
+.ambient.on-inverse { background: var(--color-background-inverse); color: var(--color-foreground-inverse-default); }
+
+.ambient-content {
+  position: relative;
+  z-index: 2;
+}
+
+/* Intensity modifiers */
+.ambient.is-subtle .ambient-blob { opacity: 0.3; }
+.ambient.is-strong .ambient-blob { opacity: 0.75; filter: blur(64px); }
+
+@media (prefers-reduced-motion: reduce) {
+  .ambient-blob { animation: none; }
+}

package/dist/css/components/animated-bg.css

@@ -0,0 +1,261 @@
+/* ============================================================
+   ANIMATED BACKDROP — components/animated-bg.css
+   Nine full-bleed animated backgrounds for hero, onboarding and
+   marketing surfaces. Companion to `.ambient` (which is the plain
+   blob layer): these carry motion vocabulary — aurora drift, cursor
+   mesh, scanning grid, ripples, beams, orbits, apex bloom, triangles.
+
+   Structure (mirrors .ambient so the two are interchangeable):
+     .abg[.abg-<variant>]        positioned host
+       .abg-layer                one or more decorative layers (aria-hidden)
+       .abg-scrim                MANDATORY readability veil when text sits on top
+       .abg-content              your content, above every layer
+
+   Every tint derives from --color-brand-solid / --color-accent-solid and the
+   Sky/Royal accent stops, so a backdrop follows the active product theme.
+   The ambient ink base uses --abg-ink, which flips with the theme.
+
+   Variants: aurora · mesh · grid · ripple · beams · orbits · apex · triangles
+   Modifiers: .is-subtle / .is-strong (layer opacity) · .on-inverse (dark hero)
+   Motion is disabled under prefers-reduced-motion.
+   ============================================================ */
+
+.abg {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  /* Ink base — the deep field every variant paints on. Theme-aware. */
+  --abg-ink: var(--color-background-canvas);
+  --abg-base: var(--color-background-subtle);
+  --abg-glint: var(--color-brand-accent-700);
+  background: var(--abg-ink);
+}
+[data-theme="dark"] .abg,
+.abg.on-inverse {
+  --abg-ink: var(--color-ink-deep);
+  --abg-base: var(--color-ink-base);
+  --abg-glint: var(--color-brand-accent-200);
+}
+.abg.on-inverse {
+  background: var(--abg-ink);
+  color: var(--color-foreground-inverse-default);
+}
+
+.abg-layer {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+/* On a light ambient surface a translucent layer over white turns grey;
+   multiply keeps the hue and only darkens what is actually painted. */
+.abg:not(.on-inverse) .abg-layer.is-tinted { mix-blend-mode: multiply; }
+[data-theme="dark"] .abg:not(.on-inverse) .abg-layer.is-tinted { mix-blend-mode: normal; }
+
+/* Readability veil — REQUIRED whenever content sits on the backdrop. */
+.abg-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  background: linear-gradient(100deg,
+    var(--abg-ink) 24%,
+    color-mix(in srgb, var(--abg-ink) 76%, transparent) 48%,
+    transparent 74%);
+}
+/* Vertical veil — for centred hero copy instead of a left-anchored block */
+.abg-scrim.is-vertical {
+  background: linear-gradient(180deg,
+    color-mix(in srgb, var(--abg-ink) 58%, transparent) 0%,
+    color-mix(in srgb, var(--abg-ink) 86%, transparent) 100%);
+}
+
+.abg-content { position: relative; z-index: 2; }
+
+/* Intensity — subtle dims the layers; strong cannot use opacity > 1 (it clamps
+   to 1 and does nothing), so it lifts saturation and brightness instead. */
+.abg.is-subtle .abg-layer { opacity: .55; }
+.abg.is-strong .abg-layer { filter: saturate(1.3) brightness(1.18); }
+.abg.is-strong .abg-blob { filter: blur(64px) saturate(1.3) brightness(1.18); }
+
+/* Shared vignette — pulls focus to the centre, mutes the edges */
+.abg-vignette {
+  background: radial-gradient(125% 100% at 50% 45%, transparent 40%,
+    color-mix(in srgb, var(--abg-ink) 92%, transparent) 100%);
+}
+
+/* ============================================================
+   01 · AURORA — four drifting radial blobs, heavy blur
+   ============================================================ */
+.abg-aurora .abg-blob {
+  position: absolute;
+  border-radius: var(--radius-pill);
+  filter: blur(64px);
+  will-change: transform;
+}
+.abg-aurora .abg-blob.is-1 {
+  top: -30%; right: -20%; width: 70%; aspect-ratio: 1; opacity: .38;
+  background: radial-gradient(circle, color-mix(in srgb, var(--color-brand-accent-500) 52%, transparent), transparent 66%);
+  animation: abg-drift-a 26s var(--ease-standard) infinite;
+}
+.abg-aurora .abg-blob.is-2 {
+  bottom: -40%; left: -18%; width: 82%; aspect-ratio: 1; opacity: .35;
+  background: radial-gradient(circle, color-mix(in srgb, var(--color-brand-secondary-400) 60%, transparent), transparent 68%);
+  animation: abg-drift-b 32s var(--ease-standard) infinite;
+}
+.abg-aurora .abg-blob.is-3 {
+  top: 8%; left: 24%; width: 46%; aspect-ratio: 1; opacity: .29;
+  background: radial-gradient(circle, color-mix(in srgb, var(--dataviz-cat-5) 48%, transparent), transparent 66%);
+  animation: abg-drift-c 38s var(--ease-standard) infinite;
+}
+.abg-aurora .abg-blob.is-4 {
+  bottom: -14%; right: 6%; width: 52%; aspect-ratio: 1; opacity: .26;
+  background: radial-gradient(circle, color-mix(in srgb, var(--dataviz-cat-3) 44%, transparent), transparent 66%);
+  animation: abg-drift-d 44s var(--ease-standard) infinite;
+}
+@keyframes abg-drift-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(18%,-14%,0) scale(1.3); } }
+@keyframes abg-drift-b { 0%,100% { transform: translate3d(0,0,0) scale(1.12); } 50% { transform: translate3d(-22%,16%,0) scale(.82); } }
+@keyframes abg-drift-c { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(16%,20%,0) scale(1.18); } }
+@keyframes abg-drift-d { 0%,100% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(-24%,14%,0) scale(1.26); } 66% { transform: translate3d(20%,-18%,0) scale(.86); } }
+
+/* ============================================================
+   02 · MESH — static dot mesh; dots brighten around the cursor.
+   The bright layer is revealed through a radial mask at --mx/--my,
+   updated by a pointermove listener on the host.
+   ============================================================ */
+.abg-mesh .abg-dotglow {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transition: opacity var(--duration-slower) var(--ease-standard);
+  -webkit-mask-image: radial-gradient(210px 210px at var(--mx, -999px) var(--my, -999px), rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 46%, rgba(0,0,0,.12) 68%, transparent 84%);
+  mask-image: radial-gradient(210px 210px at var(--mx, -999px) var(--my, -999px), rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 46%, rgba(0,0,0,.12) 68%, transparent 84%);
+}
+.abg-mesh:hover .abg-dotglow { animation: abg-dotpulse 4.2s var(--ease-standard) infinite; }
+@keyframes abg-dotpulse { 0%,100% { opacity: .18; } 50% { opacity: .5; } }
+
+/* ============================================================
+   03 · GRID — flat relative grid with glints running the lines
+   ============================================================ */
+.abg-grid .abg-gridlines {
+  -webkit-mask-image: radial-gradient(115% 95% at 58% 46%, #000 26%, transparent 78%);
+  mask-image: radial-gradient(115% 95% at 58% 46%, #000 26%, transparent 78%);
+  background-image:
+    linear-gradient(color-mix(in srgb, var(--color-brand-accent-500) 11%, transparent) 1px, transparent 1px),
+    linear-gradient(90deg, color-mix(in srgb, var(--color-brand-accent-500) 11%, transparent) 1px, transparent 1px);
+  background-size: 3.846% 6.25%;
+}
+.abg-grid .abg-glint-x,
+.abg-grid .abg-glint-y { position: absolute; }
+.abg-grid .abg-glint-x {
+  left: 0; height: 1px;
+  background: linear-gradient(90deg, transparent, var(--abg-glint), transparent);
+  animation: abg-glint-x 12s var(--ease-standard) infinite;
+}
+.abg-grid .abg-glint-y {
+  top: 0; width: 1px;
+  background: linear-gradient(180deg, transparent, var(--abg-glint), transparent);
+  animation: abg-glint-y 14s var(--ease-standard) infinite;
+}
+/* Travel the whole line: animate left/top in % of the host, not translate in %
+   of the element's own width (which only moved it ~25% across). */
+@keyframes abg-glint-x {
+  0% { left: -26%; opacity: 0; } 10% { opacity: .34; }
+  46% { opacity: .34; } 56%, 100% { left: 100%; opacity: 0; }
+}
+@keyframes abg-glint-y {
+  0% { top: -26%; opacity: 0; } 10% { opacity: .3; }
+  46% { opacity: .3; } 56%, 100% { top: 100%; opacity: 0; }
+}
+
+/* ============================================================
+   04 · RIPPLE — concentric waves emanating from one point
+   ============================================================ */
+@keyframes abg-ripple { 0% { transform: scale(.06); opacity: .6; } 100% { transform: scale(1); opacity: 0; } }
+@keyframes abg-ripple-soft { 0% { transform: scale(.06); opacity: .2; } 100% { transform: scale(1); opacity: 0; } }
+
+/* ============================================================
+   05 · BEAMS — horizontal light trails at mixed speeds
+   ============================================================ */
+.abg-beams .abg-tracks {
+  inset: 6% 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.abg-beams .abg-track {
+  position: relative;
+  height: 1px;
+  width: 100%;
+  overflow: hidden;
+  background: linear-gradient(90deg, transparent,
+    color-mix(in srgb, var(--color-brand-accent-500) 7%, transparent) 45%,
+    color-mix(in srgb, var(--color-brand-accent-500) 4%, transparent));
+}
+.abg-beams .abg-beam {
+  position: absolute;
+  top: 0; height: 1px;
+  border-radius: var(--radius-pill);
+  background: linear-gradient(90deg, transparent, var(--color-brand-accent-300), transparent);
+  animation: abg-beam-h 9s linear infinite;
+}
+.abg-beams .abg-beam.is-strong {
+  top: -1px; height: 3px;
+  background: linear-gradient(90deg, transparent, var(--color-brand-accent-200), transparent);
+}
+@keyframes abg-beam-h { 0% { transform: translateX(-110%); } 100% { transform: translateX(240%); } }
+
+/* ============================================================
+   06 · ORBITS — concentric rings with satellites, alternating spin
+   ============================================================ */
+.abg-orbits .abg-hub {
+  position: absolute;
+  top: 50%; left: 62%;
+  width: 0; height: 0;
+}
+.abg-orbits .abg-ring {
+  position: absolute;
+  border-radius: var(--radius-pill);
+  border: 1px solid color-mix(in srgb, var(--color-brand-accent-500) 14%, transparent);
+  animation: abg-orbit 32s linear infinite;
+}
+.abg-orbits .abg-sat {
+  position: absolute;
+  top: -1.5px; left: 50%;
+  width: 3px; height: 3px;
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-accent-300);
+  box-shadow: 0 0 6px var(--color-brand-accent-500);
+}
+.abg-orbits .abg-core {
+  position: absolute;
+  left: -4px; top: -4px;
+  width: 8px; height: 8px;
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-accent-300);
+  box-shadow: 0 0 16px var(--color-brand-accent-500);
+}
+@keyframes abg-orbit { to { transform: rotate(360deg); } }
+
+/* ============================================================
+   07 · APEX — the brand mark outlined, with a light beam tracing it.
+   The dash period equals the path length, so exactly one beam rides
+   the contour and its tail re-enters at the start.
+   ============================================================ */
+@keyframes abg-apex-glint { from { stroke-dashoffset: 628; } to { stroke-dashoffset: 0; } }
+
+/* ============================================================
+   08 · TRIANGLES — oversized translucent planes in slow drift
+   ============================================================ */
+@keyframes abg-tri-a { 0% { transform: translate3d(-6%, 4%, 0) rotate(0deg); } 100% { transform: translate3d(8%, -6%, 0) rotate(14deg); } }
+@keyframes abg-tri-b { 0% { transform: translate3d(6%, -5%, 0) rotate(0deg); } 100% { transform: translate3d(-9%, 7%, 0) rotate(-18deg); } }
+@keyframes abg-tri-c { 0% { transform: translate3d(0, 8%, 0) rotate(-8deg); } 100% { transform: translate3d(-7%, -9%, 0) rotate(10deg); } }
+@keyframes abg-tri-d { 0% { transform: translate3d(-8%, -7%, 0) rotate(6deg); } 100% { transform: translate3d(10%, 8%, 0) rotate(-12deg); } }
+
+@media (prefers-reduced-motion: reduce) {
+  .abg-layer, .abg-blob, .abg-glint-x, .abg-glint-y, .abg-beam,
+  .abg-ring, .abg-dotglow, .abg [style*="animation"] {
+    animation: none !important;
+  }
+  .abg-dotglow { transition: none; }
+}

package/dist/css/components/buttons.css

@@ -47,7 +47,7 @@
   /* Type */
   font-family: var(--font-sans);
   font-size: var(--fs-md);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   line-height: 1;
   letter-spacing: var(--ls-body);
 
@@ -184,8 +184,8 @@
   border-radius: var(--radius-2xs);
   text-decoration: none;
 }
-.btn-link:hover  { color: var(--color-brand-text); text-decoration: underline; text-underline-offset: 2px; }
-.btn-link:active { color: var(--color-brand-text-strong); }
+.btn-link:hover  { color: var(--color-foreground-brand); text-decoration: underline; text-underline-offset: 2px; }
+.btn-link:active { color: var(--color-foreground-brand); filter: brightness(.9); }
 .btn-link:focus-visible { box-shadow: var(--shadow-focus); }
 
 
@@ -223,7 +223,7 @@
 /* INVERSE — white pill on dark/brand surfaces */
 .btn-inverse {
   background: var(--color-pure-white);
-  color: var(--color-brand-text);
+  color: var(--color-brand-text-on-light);
 }
 .btn-inverse:hover  { background: var(--color-neutral-100); color: var(--color-brand-text-strong); }
 .btn-inverse:active { background: var(--color-neutral-150); }

package/dist/css/components/callout.css

@@ -70,7 +70,7 @@
 
 .callout-title {
   font-size: var(--fs-md);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   letter-spacing: var(--ls-title);
   color: var(--color-foreground-default);
   line-height: var(--lh-tight);
@@ -81,13 +81,14 @@
   color: var(--color-foreground-secondary);
   line-height: var(--lh-snug);
 }
-.callout-body strong { color: var(--color-foreground-default); font-weight: var(--w-semibold); }
+.callout-body strong { color: var(--color-foreground-default); font-weight: var(--w-regular); }
 .callout-body code {
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xs);
   color: var(--color-foreground-accent);
 }
-.callout-body a { color: var(--color-foreground-accent); text-decoration: none; font-weight: var(--w-semibold); }
+.callout-body a { color: var(--color-foreground-accent); text-decoration: none; font-weight: var(--w-regular); }
 .callout-body p { margin: 0 0 var(--space-2); }
 .callout-body p:last-child { margin-bottom: 0; }
 .callout-body ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }

package/dist/css/components/cards.css

@@ -144,7 +144,7 @@
 .card-header h4 {
   margin: 0;
   font-size: var(--fs-md);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   letter-spacing: var(--ls-title);
   color: var(--color-foreground-default);
 }
@@ -206,8 +206,9 @@
 }
 .card-stat .stat-label {
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xxs);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   color: var(--color-foreground-muted);
   text-transform: uppercase;
   letter-spacing: var(--ls-caps);
@@ -226,7 +227,7 @@
   align-items: center;
   gap: var(--space-1);
   font-size: var(--fs-xs);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   font-variant-numeric: tabular-nums;
 }
 .card-stat .stat-delta.up   { color: var(--color-feedback-success-foreground); }

package/dist/css/components/combobox.css

@@ -24,7 +24,7 @@
   border-radius: var(--radius-sm);
   font-family: var(--font-sans);
   font-size: var(--fs-sm);
-  font-weight: var(--w-medium);
+  font-weight: var(--w-regular);
   color: var(--color-foreground-default);
   cursor: pointer;
   text-align: left;
@@ -74,10 +74,10 @@
   width: 24px; height: 24px;
   border-radius: var(--radius-pill);
   background: var(--color-brand-subtle-solid);
-  color: var(--color-brand-text);
+  color: var(--color-brand-text-on-light);
   display: inline-flex; align-items: center; justify-content: center;
   font-size: var(--fs-xxs);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   flex-shrink: 0;
   margin-left: calc(var(--space-1) * -1);
 }
@@ -148,8 +148,9 @@
 .combobox-group-label {
   padding: var(--space-2) var(--space-3) var(--space-1);
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xxs);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   letter-spacing: var(--ls-caps);
   text-transform: uppercase;
   color: var(--color-foreground-muted);
@@ -173,7 +174,7 @@
 .combobox-option.is-selected {
   background: var(--color-background-selected);
   color: var(--color-foreground-accent);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
 }
 .combobox-option.is-disabled {
   opacity: 0.5;
@@ -198,7 +199,7 @@
   margin-top: 1px;
 }
 .combobox-option.is-selected .combobox-option-meta {
-  color: var(--color-brand-text);
+  color: var(--color-foreground-brand);
 }
 
 .combobox-option-check {
@@ -212,6 +213,7 @@
 
 .combobox-option-trailing {
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xxs);
   color: var(--color-foreground-muted);
   flex-shrink: 0;
@@ -227,7 +229,7 @@
 .combobox-empty strong {
   display: block;
   color: var(--color-foreground-default);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   margin-bottom: var(--space-1);
 }
 
@@ -251,7 +253,7 @@
   border-radius: var(--radius-sm);
   font-family: var(--font-sans);
   font-size: var(--fs-sm);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   color: var(--color-foreground-default);
   cursor: pointer;
   text-align: center;
@@ -304,12 +306,13 @@
    `filters` / `meta` / `footMeta`.
    ---------------------------------------------------------------- */
 .combobox-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--color-border-subtle); }
-.combobox-filter-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-3); background: var(--color-background-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--w-medium); color: var(--color-foreground-secondary); cursor: pointer; transition: var(--transition-fast); }
+.combobox-filter-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-3); background: var(--color-background-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--w-regular); color: var(--color-foreground-secondary); cursor: pointer; transition: var(--transition-fast); }
 .combobox-filter-chip:hover { background: var(--color-background-hover); border-color: var(--color-border-strong); color: var(--color-foreground-default); }
-.combobox-filter-chip.is-active { background: var(--color-background-selected); border-color: var(--color-brand-border); color: var(--color-foreground-brand); font-weight: var(--w-semibold); }
-.combobox-filter-chip .count { font-family: var(--font-mono); font-size: var(--fs-xxs); color: var(--color-foreground-muted); }
-.combobox-filter-chip.is-active .count { color: var(--color-brand-text); }
-.combobox-meta { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--fs-xxs); font-weight: var(--w-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); border-bottom: 1px solid var(--color-border-subtle); }
+.combobox-filter-chip.is-active { background: var(--color-background-selected); border-color: var(--color-brand-border); color: var(--color-foreground-brand); font-weight: var(--w-regular); }
+.combobox-filter-chip .count { font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust); font-size: var(--fs-xxs); color: var(--color-foreground-muted); }
+.combobox-filter-chip.is-active .count { color: var(--color-foreground-brand); }
+.combobox-meta { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--fs-xxs); font-weight: var(--w-regular); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); border-bottom: 1px solid var(--color-border-subtle); }
 .combobox-foot-meta { padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); color: var(--color-foreground-muted); border-top: 1px solid var(--color-border-subtle); }
 
 /* Reduced motion */