From 2501f658b208db5b35691bc627703c1a022be9a8 Mon Sep 17 00:00:00 2001
From: Andrew Lovseth <andy.lovseth@gmail.com>
Date: Sun, 16 Aug 2026 12:31:51 -0700
Subject: [PATCH 1/6] Homepage demo dialog: single hero CTA opens a shared
 modal; new hero copy

The hero's two links collapse to one button; any [data-bcn-demo-open]
opens bcn-demo-dialog, a lego-composed form with no endpoint yet.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LV6S3jtPh8cJw8fD6B6EtH
---
 src/components/bcn/BcnDemoDialog.astro    | 183 ++++++++++++++++++++++
 src/components/bcn/BcnMarketingHero.astro |  34 ++--
 src/data/homepage.ts                      |  11 +-
 src/pages/prototypes/homepage.astro       |   3 +
 4 files changed, 203 insertions(+), 28 deletions(-)
 create mode 100644 src/components/bcn/BcnDemoDialog.astro

diff --git a/src/components/bcn/BcnDemoDialog.astro b/src/components/bcn/BcnDemoDialog.astro
new file mode 100644
index 00000000..2df979c9
--- /dev/null
+++ b/src/components/bcn/BcnDemoDialog.astro
@@ -0,0 +1,183 @@
+---
+// <BcnDemoDialog> — the marketing demo-request dialog. Any element carrying
+// data-bcn-demo-open anywhere on the page opens it, so the hero CTA and the
+// Get Started card share one dialog instance.
+//
+// PROTOTYPE: there is no endpoint. Submit validates, renders the confirmation
+// state, and console.logs the payload. Wire a real POST before this ships.
+//
+// bcn-lego-checked: composed entirely from esa-* legos — esa-dialog is the shell
+// (backdrop, focus trap, Esc), esa-text-field / esa-checkbox-group / esa-textarea
+// are the fields, esa-button is the footer pair, .stack and .cluster are the
+// layout. bcn-demo-dialog exists only to hold the composition and the open/submit
+// wiring, which no lego provides.
+import EsaButton from '@esa/ecology/esa-button.astro';
+
+/** Interest picker options — the four platform functions, plus an out. */
+const INTERESTS = [
+  { label: 'Planning and commitment libraries', value: 'plan' },
+  { label: 'Tracking permits, tasks, and deadlines', value: 'track' },
+  { label: 'Monitoring and field data', value: 'monitor' },
+  { label: 'Agency reporting', value: 'report' },
+  { label: "Not sure yet — show me everything", value: 'unsure' },
+];
+---
+
+<esa-dialog id="bcn-demo-dialog" heading="Schedule a demo" size="md">
+  <form class="stack" data-gap="md" id="bcn-demo-form" novalidate>
+    <p class="type-body bcn-demo__lede">
+      Tell us about your project and we'll set up a walkthrough with the Beacon team.
+    </p>
+
+    <esa-text-field id="bcn-demo-name" label="Name" required></esa-text-field>
+    <esa-text-field id="bcn-demo-email" label="Work email" type="email" required></esa-text-field>
+    <esa-text-field id="bcn-demo-org" label="Organization" required></esa-text-field>
+
+    <esa-checkbox-group
+      id="bcn-demo-interests"
+      name="interests"
+      label="What would you like to see?"
+      options={JSON.stringify(INTERESTS)}></esa-checkbox-group>
+
+    <esa-textarea
+      id="bcn-demo-message"
+      label="Anything we should know about your project?"
+      rows="4"></esa-textarea>
+  </form>
+
+  <div class="stack" data-gap="sm" id="bcn-demo-done" hidden>
+    <p class="type-card-title">Thanks — we'll be in touch.</p>
+    <p class="type-body">
+      Someone from the Beacon team will reach out within two business days to schedule your
+      walkthrough.
+    </p>
+  </div>
+
+  <span slot="footer" class="cluster" data-gap="sm">
+    <!-- Wrapper spans, not the buttons themselves: `hidden` on an <EsaButton> reaches
+         only the native control, leaving the styled .esa-button wrapper on screen. -->
+    <span class="cluster" data-gap="sm" id="bcn-demo-actions">
+      <EsaButton color="ghost" appearance="soft" type="button" id="bcn-demo-cancel">Cancel</EsaButton>
+      <EsaButton color="primary" type="button" id="bcn-demo-submit">Send request</EsaButton>
+    </span>
+    <span id="bcn-demo-close-wrap" hidden>
+      <EsaButton color="primary" type="button" id="bcn-demo-close">Close</EsaButton>
+    </span>
+  </span>
+</esa-dialog>
+
+<script>
+  import '@esa/ecology/esa-dialog';
+  import '@esa/ecology/esa-text-field';
+  import '@esa/ecology/esa-textarea';
+  import '@esa/ecology/esa-checkbox-group';
+
+  interface ValueEl extends HTMLElement {
+    value: string | string[];
+    errorText?: string;
+  }
+
+  const byId = <T extends HTMLElement>(id: string) => document.getElementById(id) as T | null;
+
+  const dialog = byId<HTMLElement & { show(): void; close(): void }>('bcn-demo-dialog');
+  const form = byId<HTMLFormElement>('bcn-demo-form');
+  const done = byId<HTMLElement>('bcn-demo-done');
+  const actions = byId<HTMLElement>('bcn-demo-actions');
+  const closeWrap = byId<HTMLElement>('bcn-demo-close-wrap');
+  const cancelBtn = byId<HTMLButtonElement>('bcn-demo-cancel');
+  const submitBtn = byId<HTMLButtonElement>('bcn-demo-submit');
+  const closeBtn = byId<HTMLButtonElement>('bcn-demo-close');
+
+  if (dialog && form && done && actions && closeWrap && cancelBtn && submitBtn && closeBtn) {
+    /** The three required text fields, in the order they should be flagged. */
+    const REQUIRED = [
+      { id: 'bcn-demo-name', message: 'Enter your name' },
+      { id: 'bcn-demo-email', message: 'Enter your work email' },
+      { id: 'bcn-demo-org', message: 'Enter your organization' },
+    ];
+    const ALL_FIELDS = [...REQUIRED.map((f) => f.id), 'bcn-demo-interests', 'bcn-demo-message'];
+
+    const field = (id: string) => byId<ValueEl>(id);
+
+    function showForm() {
+      form!.hidden = false;
+      done!.hidden = true;
+      actions!.hidden = false;
+      closeWrap!.hidden = true;
+    }
+
+    function showDone() {
+      form!.hidden = true;
+      done!.hidden = false;
+      actions!.hidden = true;
+      closeWrap!.hidden = false;
+    }
+
+    function reset() {
+      for (const id of ALL_FIELDS) {
+        const el = field(id);
+        if (!el) continue;
+        el.value = id === 'bcn-demo-interests' ? [] : '';
+        if ('errorText' in el) el.errorText = '';
+      }
+      showForm();
+    }
+
+    /** Flags every empty required field; returns true when all are filled. */
+    function validate(): boolean {
+      let firstInvalid: ValueEl | null = null;
+      for (const { id, message } of REQUIRED) {
+        const el = field(id);
+        if (!el) continue;
+        const empty = String(el.value ?? '').trim() === '';
+        el.errorText = empty ? message : '';
+        if (empty && !firstInvalid) firstInvalid = el;
+      }
+      firstInvalid?.focus();
+      return !firstInvalid;
+    }
+
+    document.addEventListener('click', (event) => {
+      const trigger = (event.target as HTMLElement | null)?.closest('[data-bcn-demo-open]');
+      if (!trigger) return;
+      event.preventDefault();
+      reset();
+      dialog.show();
+    });
+
+    cancelBtn.addEventListener('click', () => dialog.close());
+    closeBtn.addEventListener('click', () => dialog.close());
+
+    submitBtn.addEventListener('click', () => {
+      if (!validate()) return;
+      // PROTOTYPE: no endpoint yet — this is where the POST goes.
+      console.log('[bcn-demo-dialog] request', {
+        name: field('bcn-demo-name')?.value,
+        email: field('bcn-demo-email')?.value,
+        organization: field('bcn-demo-org')?.value,
+        interests: field('bcn-demo-interests')?.value,
+        message: field('bcn-demo-message')?.value,
+      });
+      showDone();
+    });
+  }
+</script>
+
+<style>
+  /* .stack and .cluster set `display: flex`, which outranks the UA `[hidden]`
+     rule — without this, toggling `hidden` on the form/confirmation panels does
+     nothing and both render at once. */
+  [hidden] {
+    display: none !important;
+  }
+
+  .bcn-demo__lede {
+    margin: 0;
+    color: var(--color-text-secondary);
+  }
+
+  #bcn-demo-done .type-card-title,
+  #bcn-demo-done .type-body {
+    margin: 0;
+  }
+</style>
diff --git a/src/components/bcn/BcnMarketingHero.astro b/src/components/bcn/BcnMarketingHero.astro
index 2be06a33..130bb0ce 100644
--- a/src/components/bcn/BcnMarketingHero.astro
+++ b/src/components/bcn/BcnMarketingHero.astro
@@ -1,12 +1,12 @@
 ---
 // <BcnMarketingHero> — the homepage hero: the aerial construction photo under a
 // deep-teal gradient, a two-line serif display headline, the positioning
-// paragraph, the two CTAs (inverse white + on-photo ghost), and the ESA
-// provenance badge. Content comes from HERO in src/data/homepage.ts.
+// paragraph, the single demo CTA (inverse white), and the ESA provenance badge.
+// Content comes from HERO in src/data/homepage.ts.
 //
 // bcn-lego-checked: no esa-* lego is a photo marketing hero (esa-page-header is
-// app chrome), and esa-button has no inverse white / on-photo ghost marketing
-// variants at this display scale; checked Beacon (no marketing site). The badge
+// app chrome), and esa-button has no inverse white marketing variant at this
+// display scale; checked Beacon (no marketing site). The badge
 // glyph is the esa-icon lego with a paths fallback. bcn-marketing-hero is the
 // reusable home; the CTA styles are the one-off marketing voice.
 import EsaIcon from '@esa/ecology/esa-icon.astro';
@@ -24,12 +24,9 @@ const heroImage = withBase('/images/marketing/hero-aerial.jpg');
       </h1>
       <p class="bcn-mkt-hero__sub">{HERO.sub}</p>
       <div class="bcn-mkt-hero__ctas">
-        <a href={HERO.primaryCta.href} class="bcn-mkt-hero__btn bcn-mkt-hero__btn--white">
+        <button type="button" data-bcn-demo-open class="bcn-mkt-hero__btn bcn-mkt-hero__btn--white">
           {HERO.primaryCta.label}
-        </a>
-        <a href={HERO.secondaryCta.href} class="bcn-mkt-hero__btn bcn-mkt-hero__btn--ghost">
-          {HERO.secondaryCta.label}
-        </a>
+        </button>
       </div>
     </div>
     <div class="bcn-mkt-hero__badge" data-reveal>
@@ -73,7 +70,7 @@ const heroImage = withBase('/images/marketing/hero-aerial.jpg');
   .bcn-mkt-hero__headline {
     margin: 0 0 var(--spacing-500);
     font-family: var(--font-decorative, var(--font-sans));
-    font-size: var(--type-size-1000);
+    font-size: var(--type-size-800);
     font-weight: var(--font-weight-bold);
     line-height: 1.15;
     color: #ffffff;
@@ -85,7 +82,7 @@ const heroImage = withBase('/images/marketing/hero-aerial.jpg');
     font-size: var(--type-size-400);
     font-weight: var(--font-weight-medium);
     color: rgba(255, 255, 255, 0.85);
-    line-height: var(--line-height-relaxed, 1.75);
+    line-height: normal;
     text-wrap: pretty;
   }
 
@@ -96,17 +93,20 @@ const heroImage = withBase('/images/marketing/hero-aerial.jpg');
     flex-wrap: wrap;
   }
 
-  /* On-photo marketing CTA voices (lg scale). */
+  /* On-photo marketing CTA voice (lg scale). Renders as a <button> — it opens the
+     demo dialog rather than navigating — so the font/cursor resets are load-bearing. */
   .bcn-mkt-hero__btn {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-200);
     padding: var(--spacing-400) var(--spacing-600);
+    font-family: inherit;
     font-size: var(--type-size-300);
     font-weight: var(--font-weight-semibold);
     border-radius: var(--radius-200);
     border: 1px solid transparent;
     text-decoration: none;
+    cursor: pointer;
     transition: background 150ms ease, border-color 150ms ease;
   }
   .bcn-mkt-hero__btn--white {
@@ -117,16 +117,6 @@ const heroImage = withBase('/images/marketing/hero-aerial.jpg');
   .bcn-mkt-hero__btn--white:hover {
     background: var(--color-surface-sunken, #fafafa);
   }
-  .bcn-mkt-hero__btn--ghost {
-    background: transparent;
-    color: #ffffff;
-    border-color: rgba(255, 255, 255, 0.4);
-  }
-  .bcn-mkt-hero__btn--ghost:hover {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: #ffffff;
-  }
-
   .bcn-mkt-hero__badge {
     display: inline-flex;
     align-items: center;
diff --git a/src/data/homepage.ts b/src/data/homepage.ts
index 47cab511..1efa6c88 100644
--- a/src/data/homepage.ts
+++ b/src/data/homepage.ts
@@ -43,16 +43,15 @@ export const MARKETING_ICON_PATHS: Record<string, string> = {
 export interface HeroContent {
   headlineLines: string[];
   sub: string;
-  primaryCta: { label: string; href: string };
-  secondaryCta: { label: string; href: string };
+  /** Opens the demo dialog (bcn-demo-dialog) — a button, not a link. */
+  primaryCta: { label: string };
   badge: string;
 }
 
 export const HERO: HeroContent = {
-  headlineLines: ['Construction compliance is complex.', 'Beacon makes it clear.'],
-  sub: 'Dozens of permits. Hundreds of commitments. Thousands of actions across years, phases, species, and locations. Beacon brings structure to the compliance work that keeps infrastructure projects on track.',
-  primaryCta: { label: 'Schedule a Demo', href: '#contact' },
-  secondaryCta: { label: 'See How It Works', href: '#solution' },
+  headlineLines: ['Environmental compliance can be a knot.', 'Beacon untangles it.'],
+  sub: "Nobody should need a day and three spreadsheets to answer what's due next month. Beacon keeps every requirement, the work behind it, and the evidence together — for as long as the project runs.",
+  primaryCta: { label: 'Schedule a Demo' },
   badge: 'Built by ESA — 50+ years of environmental science',
 };
 
diff --git a/src/pages/prototypes/homepage.astro b/src/pages/prototypes/homepage.astro
index 0df9f986..4a0301ea 100644
--- a/src/pages/prototypes/homepage.astro
+++ b/src/pages/prototypes/homepage.astro
@@ -16,6 +16,7 @@ import BcnMarketGrid from '../../components/bcn/BcnMarketGrid.astro';
 import BcnCaDotMap from '../../components/bcn/BcnCaDotMap.astro';
 import BcnCtaPaths from '../../components/bcn/BcnCtaPaths.astro';
 import BcnMarketingFooter from '../../components/bcn/BcnMarketingFooter.astro';
+import BcnDemoDialog from '../../components/bcn/BcnDemoDialog.astro';
 ---
 
 <!-- manifest:
@@ -31,6 +32,7 @@ import BcnMarketingFooter from '../../components/bcn/BcnMarketingFooter.astro';
     - active projects -> bcn-ca-dot-map          # interactive CA dot map + glass project cards
     - get started     -> bcn-cta-paths           # three doors, demo featured
     - footer          -> bcn-marketing-footer    # dark utility footer
+    - demo dialog     -> bcn-demo-dialog         # shared modal; any [data-bcn-demo-open] opens it
 -->
 
 <BaseLayout title="Beacon — Environmental Compliance Platform">
@@ -103,4 +105,5 @@ import BcnMarketingFooter from '../../components/bcn/BcnMarketingFooter.astro';
   </BcnMarketingSection>
 
   <BcnMarketingFooter />
+  <BcnDemoDialog />
 </BaseLayout>

From 37a0300b2c014d57d53b5b6e94d3a2ca080ab0ef Mon Sep 17 00:00:00 2001
From: Andrew Lovseth <andy.lovseth@gmail.com>
Date: Sun, 16 Aug 2026 12:37:44 -0700
Subject: [PATCH 2/6] Strip session vocabulary from the view stubs; drop the
 removed hint demo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

requirement-tracker: the Kanban and Timeline empty states carried
"Not part of this prototype pass — Grid is the wired view." typeset where
a user reads it. That is process narration about how the work was made,
not about the product. Removed; the plain description of what each view
shows is kept, since a user who clicks Kanban is owed an answer about
what Kanban would be.

esa-button-toggle spec page: esa-button-toggle.hint was removed from the
hub on 2026-08-16 (its only fill anywhere was "Pick a layout", restating a
control that already shows its own options). Drops the demo, the API row,
the aria-describedby note, and the now-unused --form-help-color from the
theming list.

Build clean: 191 pages.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LV6S3jtPh8cJw8fD6B6EtH
---
 src/pages/design-system/components/esa-button-toggle.astro | 7 ++-----
 src/pages/prototypes/requirement-tracker.astro             | 4 ++--
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/pages/design-system/components/esa-button-toggle.astro b/src/pages/design-system/components/esa-button-toggle.astro
index de457e25..eff308ce 100644
--- a/src/pages/design-system/components/esa-button-toggle.astro
+++ b/src/pages/design-system/components/esa-button-toggle.astro
@@ -8,7 +8,6 @@ const props = [
   { name: 'options', type: '{ value: string, label: string }[]', default: '[]', description: 'The segments. Set as a property (it is an array, not an attribute).' },
   { name: 'value', type: 'string', default: "''", description: "Selected option's value. Single-select; bound to the form value." },
   { name: 'label', type: 'string', default: "''", description: 'Optional visible label above the group; becomes the radiogroup name.' },
-  { name: 'hint', type: 'string', default: "''", description: 'Optional helper text below the group.' },
   { name: 'size', type: "'xs' | 'sm' | 'md' | 'lg'", default: "'md'", description: 'Control size (shared form scale).' },
   { name: 'required', type: 'boolean', default: 'false', description: 'Marks the field required (adds an asterisk and aria-required).' },
   { name: 'disabled', type: 'boolean', default: 'false', description: 'Disables every segment.' },
@@ -53,11 +52,9 @@ const events = [
 
   <Section id="states" title="States">
     <Preview align="start" code={`<esa-button-toggle label="Default"></esa-button-toggle>
-<esa-button-toggle label="With hint" hint="Pick a layout"></esa-button-toggle>
 <esa-button-toggle label="Disabled" disabled></esa-button-toggle>`}>
       <div class="col">
         <esa-button-toggle label="Default" data-demo="sizes"></esa-button-toggle>
-        <esa-button-toggle label="With hint" hint="Pick a layout" data-demo="sizes"></esa-button-toggle>
         <esa-button-toggle label="Disabled" disabled data-demo="sizes"></esa-button-toggle>
       </div>
     </Preview>
@@ -86,7 +83,7 @@ const events = [
       <li>Renders <code>role="radiogroup"</code> wrapping <code>role="radio"</code> buttons with <code>aria-checked</code> reflecting selection.</li>
       <li>Roving tabindex: only the selected (or first) segment is tab-reachable; Arrow keys move selection through the group, wrapping at the ends.</li>
       <li><code>Home</code> and <code>End</code> jump to the first and last segments; Enter and Space select the focused segment.</li>
-      <li>The <code>label</code> becomes the group's accessible name via <code>aria-labelledby</code>; <code>hint</code> is wired with <code>aria-describedby</code>.</li>
+      <li>The <code>label</code> becomes the group's accessible name via <code>aria-labelledby</code>.</li>
       <li>Visible focus ring on the active segment via <code>--focus-ring-*</code> tokens; the focused segment is raised so its ring sits above neighbors.</li>
       <li>Best for small fixed option sets — past about six options, prefer a select.</li>
     </ul>
@@ -100,7 +97,7 @@ const events = [
       <li><code>--form-bg</code> · <code>--form-border-color</code> · <code>--form-text-color</code> — unselected segments</li>
       <li><code>--color-surface-sunken</code> — hover tint · <code>--color-disabled-text</code> — disabled state</li>
       <li><code>--focus-ring-width</code> / <code>--focus-ring-color</code> — focus ring</li>
-      <li><code>--form-label-color</code> · <code>--form-help-color</code> — label and hint</li>
+      <li><code>--form-label-color</code> — label</li>
     </ul>
   </Section>
 </ComponentDoc>
diff --git a/src/pages/prototypes/requirement-tracker.astro b/src/pages/prototypes/requirement-tracker.astro
index f305e09c..1a4bcd35 100644
--- a/src/pages/prototypes/requirement-tracker.astro
+++ b/src/pages/prototypes/requirement-tracker.astro
@@ -230,14 +230,14 @@ const prologisNav = [
 
     <!-- ═══ KANBAN view (stub) ═══ -->
     <div class="bcn-view-pane" id="view-kanban" hidden>
-      <EsaEmptyState title="Kanban view" description="Status board of actions by tracking state. Not part of this prototype pass — Grid is the wired view.">
+      <EsaEmptyState title="Kanban view" description="Status board of actions by tracking state.">
         <EsaIcon slot="icon" name="columns-3" size="xl" paths="<path d='M3 3h18v18H3z'/><path d='M9 3v18'/><path d='M15 3v18'/>" />
       </EsaEmptyState>
     </div>
 
     <!-- ═══ TIMELINE view (stub) ═══ -->
     <div class="bcn-view-pane" id="view-timeline" hidden>
-      <EsaEmptyState title="Timeline view" description="Gantt-style schedule of actions by due date and phase. Not part of this prototype pass — Grid is the wired view.">
+      <EsaEmptyState title="Timeline view" description="Gantt-style schedule of actions by due date and phase.">
         <EsaIcon slot="icon" name="calendar" size="xl" paths="<path d='M8 2v4'/><path d='M16 2v4'/><rect width='18' height='18' x='3' y='4' rx='2'/><path d='M3 10h18'/>" />
       </EsaEmptyState>
     </div>

From 488787da392a2aec666e324b8cf6284718f5b674 Mon Sep 17 00:00:00 2001
From: Andrew Lovseth <andy.lovseth@gmail.com>
Date: Sun, 16 Aug 2026 15:27:54 -0700
Subject: [PATCH 3/6] Migrate esa-card.subtitle: three restatements out, two
 descriptions to the body
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

esa-card.subtitle is deprecated in the hub as of today, replaced by a typed
meta prop that takes {label, value} pairs. This repo held five fills, and they
split cleanly in two.

Three were text about the surface, and each was already said by something
beside it. The oversight donut's caption restated its own <h4> and then told
the reader to click a segment that is already a link. "Route-miles by status"
sits above rows that each read "4.2 mi cleared of 9.8 mi"; "Miles cleared to
date, with the projected path…" sits above a legend naming all three series.
Deleted.

Two are stored fields, not captions: a settings section's description and a
flag group's. The registry mandates them ("the real app ships almost no help
text next to its settings; this schema makes the absence impossible"), so they
are content. A sentence has no field name to give and cannot be a meta pair, so
they read as the first line of the card body instead of squeezed into 13px
under the title.

Needs @esa/ecology at the meta commit — node_modules/@esa/ecology symlinks into
the hub working tree, so merge that branch first.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LV6S3jtPh8cJw8fD6B6EtH
---
 src/components/bcn/BcnFlagList.astro        | 12 +++++++++++-
 src/components/bcn/BcnOversightHero.astro   | 14 ++++++--------
 src/components/bcn/BcnSettingsSection.astro | 13 ++++++++++++-
 src/pages/prototypes/permit-tracking.astro  |  4 ++--
 4 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/components/bcn/BcnFlagList.astro b/src/components/bcn/BcnFlagList.astro
index 602c92d4..4704078d 100644
--- a/src/components/bcn/BcnFlagList.astro
+++ b/src/components/bcn/BcnFlagList.astro
@@ -34,7 +34,8 @@ interface Props {
 const { title, description, flags } = Astro.props;
 ---
 
-<EsaCard variant="outlined" title={title} subtitle={description}>
+<EsaCard variant="outlined" title={title}>
+  <p class="bcn-flag-list__desc type-body">{description}</p>
   <ul class="bcn-flag-list">
     {
       flags.map((flag) => (
@@ -47,6 +48,15 @@ const { title, description, flags } = Astro.props;
 </EsaCard>
 
 <style>
+  /* The group's description is body copy, not header chrome: it is a stored field of
+     the flag group, and it moved out of esa-card's subtitle when that prop was
+     deprecated (2026-08-16). A sentence has no field name to give, so it cannot be a
+     meta pair — it reads as the first thing in the body instead. */
+  .bcn-flag-list__desc {
+    margin: 0 0 var(--spacing-400, 1rem);
+    color: var(--color-text-secondary, #525252);
+  }
+
   /* Each BcnFlagRow owns its own block padding; the <li> only carries the hairline
      between siblings. Same divider glue as BcnSettingsSection's `rows` stack. */
   .bcn-flag-list {
diff --git a/src/components/bcn/BcnOversightHero.astro b/src/components/bcn/BcnOversightHero.astro
index a3465545..8fcb851a 100644
--- a/src/components/bcn/BcnOversightHero.astro
+++ b/src/components/bcn/BcnOversightHero.astro
@@ -83,17 +83,15 @@ const segments = severityBreakdown.map((slice) => {
 
 ---
 
-<EsaCard
-  title={title}
-  subtitle="Active observations by compliance severity — select a segment to open that filtered list"
->
+<EsaCard title={title}>
   <div class="bcn-ohero cluster" data-gap="xl" data-align="start" data-justify="between">
     <!-- ── Clickable severity donut + legend ── -->
     <section class="stack" data-gap="xs">
-      <!-- Names the set the donut plots. Must agree with the card subtitle above and
-           with asOfLabel in the donut hole: this read "Yesterday's Observations" after
-           the donut moved from a prior-day sweep to the current active backlog, so the
-           heading contradicted both the caption beneath it and the data. -->
+      <!-- Names the set the donut plots. Must agree with asOfLabel in the donut hole:
+           this read "Yesterday's Observations" after the donut moved from a prior-day
+           sweep to the current active backlog, so the heading contradicted the data.
+           It is now the only thing naming the set — the card's caption, which restated
+           it and told the reader to click, came out with `subtitle` on 2026-08-16. -->
       <h4 class="bcn-ohero__section-title type-card-title">Active Observations</h4>
       <div class="cluster" data-gap="lg" data-align="center">
         <div class="bcn-ohero__donut">
diff --git a/src/components/bcn/BcnSettingsSection.astro b/src/components/bcn/BcnSettingsSection.astro
index e6c31708..d7e9809b 100644
--- a/src/components/bcn/BcnSettingsSection.astro
+++ b/src/components/bcn/BcnSettingsSection.astro
@@ -70,7 +70,8 @@ const isSample =
 ---
 
 <section id={anchorId} class="bcn-set">
-  <EsaCard variant="outlined" title={section.title} subtitle={section.description}>
+  <EsaCard variant="outlined" title={section.title}>
+    {section.description && <p class="bcn-set__desc type-body">{section.description}</p>}
     {
       /* EVERY collection's add action sits in the card HEADER, right-aligned by
          esa-card's own actions slot (grids first, then the table sections joined them —
@@ -267,6 +268,16 @@ const isSample =
     white-space: nowrap;
   }
 
+  /* The section's own description — a stored registry field, and the reason this
+     schema exists ("the real app ships almost no help text next to its settings").
+     It moved out of esa-card's subtitle when that prop was deprecated (2026-08-16):
+     a sentence has no field name, so it cannot be a meta pair, and it reads as the
+     first thing in the body instead. */
+  .bcn-set__desc {
+    margin: 0 0 var(--spacing-400);
+    color: var(--color-text-secondary);
+  }
+
   /* How much of the list is on screen — a caption for the list above it, so it sits
      quiet: the 14px step, tertiary ink, no rule of its own. */
   .bcn-set__count {
diff --git a/src/pages/prototypes/permit-tracking.astro b/src/pages/prototypes/permit-tracking.astro
index 47dce578..fe24a41b 100644
--- a/src/pages/prototypes/permit-tracking.astro
+++ b/src/pages/prototypes/permit-tracking.astro
@@ -378,12 +378,12 @@ const payload = {
         </EsaCard>
 
         <!-- Per-path breakdown — one stacked status bar per path, comparable top-to-bottom -->
-        <EsaCard title="Clearance by path" subtitle="Route-miles by status — each path is a separately-scoped build crew">
+        <EsaCard title="Clearance by path">
           <ul class="exec__paths" id="exec-paths"></ul>
         </EsaCard>
 
         <!-- Momentum — cumulative miles cleared (burn-up) against the pace needed to finish -->
-        <EsaCard title="Route cleared over time" subtitle="Miles cleared to date, with the projected path to full clearance from current agency estimates">
+        <EsaCard title="Route cleared over time">
           <div class="exec__burnup">
             <div class="exec__burnup-chart" id="exec-burnup"></div>
             <ul class="exec__burnup-legend">

From 55e6d25bacf9c1dc15b7e83f295029a127194c51 Mon Sep 17 00:00:00 2001
From: Andrew Lovseth <andy.lovseth@gmail.com>
Date: Mon, 24 Aug 2026 15:29:32 -0700
Subject: [PATCH 4/6] =?UTF-8?q?Bump=20Astro=205=20=E2=86=92=207.2.6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Rd8hgM9z8vV2kHXScSDe8B
---
 package-lock.json | 5706 +++++++++++++++++----------------------------
 package.json      |    2 +-
 2 files changed, 2180 insertions(+), 3528 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 26894469..de255ada 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@esa/tokens": "file:../ecology/packages/tokens",
         "@types/leaflet": "^1.9.21",
         "ag-grid-community": "^35.3.1",
-        "astro": "^5.0.0",
+        "astro": "^7.2.6",
         "leaflet": "^1.9.4"
       },
       "devDependencies": {
@@ -59,72 +59,232 @@
         "style-dictionary": "^4.0.0"
       }
     },
-    "node_modules/@astrojs/compiler": {
-      "version": "2.13.1",
-      "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.13.1.tgz",
-      "integrity": "sha512-f3FN83d2G/v32ipNClRKgYv30onQlMZX1vCeZMjPsMMPl1mDpmbl0+N5BYo4S/ofzqJyS5hvwacEo0CCVDn/Qg==",
-      "license": "MIT"
+    "node_modules/@astrojs/compiler-binding": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/compiler-binding/-/compiler-binding-0.4.0.tgz",
+      "integrity": "sha512-x2RjDUuWfwLNtc3mjAdSRInwqh/rqbLar9cm/5FOMbHvmYZB7yfKewzSclAxWjIZsypJDXv1lhaP2WG+P8TK3g==",
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@astrojs/compiler-binding-darwin-arm64": "0.4.0",
+        "@astrojs/compiler-binding-darwin-x64": "0.4.0",
+        "@astrojs/compiler-binding-linux-arm64-gnu": "0.4.0",
+        "@astrojs/compiler-binding-linux-arm64-musl": "0.4.0",
+        "@astrojs/compiler-binding-linux-x64-gnu": "0.4.0",
+        "@astrojs/compiler-binding-linux-x64-musl": "0.4.0",
+        "@astrojs/compiler-binding-wasm32-wasi": "0.4.0",
+        "@astrojs/compiler-binding-win32-arm64-msvc": "0.4.0",
+        "@astrojs/compiler-binding-win32-x64-msvc": "0.4.0"
+      }
+    },
+    "node_modules/@astrojs/compiler-binding-darwin-arm64": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/compiler-binding-darwin-arm64/-/compiler-binding-darwin-arm64-0.4.0.tgz",
+      "integrity": "sha512-ZVUwHundaQyFNjE6uoa0usaC0WOCitDCLS/4mdb4rOiJXwVUuKJBMxI5WMzXLWmamsXtK/Z//ifLXvV5Yeh4Hw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@astrojs/compiler-binding-darwin-x64": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/compiler-binding-darwin-x64/-/compiler-binding-darwin-x64-0.4.0.tgz",
+      "integrity": "sha512-FI6G8AY8u6fR1SI/QRR5yGMwtvZwP34CDmZpZ5HwJGa50UM1VISTLhqkhV4a476pmgd25X1Aur2dqw6hUnrlKA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@astrojs/compiler-binding-linux-arm64-gnu": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/compiler-binding-linux-arm64-gnu/-/compiler-binding-linux-arm64-gnu-0.4.0.tgz",
+      "integrity": "sha512-lB9gLFJK7m82EnjaU8nlRBEfcwGNeHidW3sSjODTUjMNaoewVuUz9fwwdY5M4jiSXIqWLH3yl6TX8FTDKA74Sw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@astrojs/compiler-binding-linux-arm64-musl": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/compiler-binding-linux-arm64-musl/-/compiler-binding-linux-arm64-musl-0.4.0.tgz",
+      "integrity": "sha512-HPbvWqbxFxyaoQJhLxCaSjtYBx9KBo7JGVzEFZCmMl968a2PsSH0UfiODYgYPXofTOIsIH2aoCcrHXML0IA3ig==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@astrojs/compiler-binding-linux-x64-gnu": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/compiler-binding-linux-x64-gnu/-/compiler-binding-linux-x64-gnu-0.4.0.tgz",
+      "integrity": "sha512-tQKolMxoJ/+0AmLWm1PmJ/i+z3i10ZU1bNuVjEDulCf48azEMtUNjTZgHJ5MPtpYRNc7dlETr8QujUfduzoC7Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@astrojs/compiler-binding-linux-x64-musl": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/compiler-binding-linux-x64-musl/-/compiler-binding-linux-x64-musl-0.4.0.tgz",
+      "integrity": "sha512-5v5YymudsxMHp3NBLCS8BUlu5CRqeLtWD9cKS/4nIhIEHCbpz9okmVV6I0HWqmBAPhWYcDa3vw/vltYPrOQCTA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@astrojs/compiler-binding-wasm32-wasi": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/compiler-binding-wasm32-wasi/-/compiler-binding-wasm32-wasi-0.4.0.tgz",
+      "integrity": "sha512-m/phuH3x3PREvv1OnkM44NoPh4MatUadix1fB1u5SvMLCyDTUZykDJbKnWf1cjnYmHdlB8HcjTjl6JrCqAIXcw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@astrojs/compiler-binding-win32-arm64-msvc": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/compiler-binding-win32-arm64-msvc/-/compiler-binding-win32-arm64-msvc-0.4.0.tgz",
+      "integrity": "sha512-B9zYf3okEY83kM8gydlpH2BHP00w4ifxPqlYlWrgTwuD6wnkrJDCwBlgy1q31cERjCJRXN1lrE2VmkLvFjv/6g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@astrojs/compiler-binding-win32-x64-msvc": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/compiler-binding-win32-x64-msvc/-/compiler-binding-win32-x64-msvc-0.4.0.tgz",
+      "integrity": "sha512-zB0Nrv0dGc0zZWPGDRmmETTPhDRqyZjAjk+gWMlVrJX5U89obpB3VUUE1ZiHxOCN5LQojeLK6O8L/dnoHolvNQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@astrojs/compiler-rs": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/compiler-rs/-/compiler-rs-0.4.0.tgz",
+      "integrity": "sha512-koVikeon1kreEy+/JzLQRy3vzHHQVOjycs4degg4vFufKApZOwMZvSSAEztYNhmcQVfNVsVZZI4cEge3cexAbQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@astrojs/compiler-binding": "0.4.0"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      }
     },
     "node_modules/@astrojs/internal-helpers": {
-      "version": "0.7.6",
-      "resolved": "https://registry.npmjs.org/@astrojs/internal-helpers/-/internal-helpers-0.7.6.tgz",
-      "integrity": "sha512-GOle7smBWKfMSP8osUIGOlB5kaHdQLV3foCsf+5Q9Wsuu+C6Fs3Ez/ttXmhjZ1HkSgsogcM1RXSjjOVieHq16Q==",
-      "license": "MIT"
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/@astrojs/internal-helpers/-/internal-helpers-0.10.4.tgz",
+      "integrity": "sha512-nozZSy/mKYLqe4YrqbKtdOszedAfXYCtw3wZ0d+CAjz4GqQ4L9rl1ltIL5BlgwmYVinJg/RZ0MgGuWOdlyRZlA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.4",
+        "@types/mdast": "^4.0.4",
+        "js-yaml": "^4.3.0",
+        "picomatch": "^4.0.4",
+        "retext-smartypants": "^6.2.0",
+        "shiki": "^4.0.2",
+        "smol-toml": "^1.6.0",
+        "unified": "^11.0.5"
+      }
     },
-    "node_modules/@astrojs/markdown-remark": {
-      "version": "6.3.11",
-      "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-6.3.11.tgz",
-      "integrity": "sha512-hcaxX/5aC6lQgHeGh1i+aauvSwIT6cfyFjKWvExYSxUhZZBBdvCliOtu06gbQyhbe0pGJNoNmqNlQZ5zYUuIyQ==",
+    "node_modules/@astrojs/markdown-satteri": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@astrojs/markdown-satteri/-/markdown-satteri-0.3.8.tgz",
+      "integrity": "sha512-n8ItpFTCmlDsVR5+rwDmehSf+jFCYLWmZiisZNGuF7xILqYhsVeBfcha4qgS2Seq3fAc9Tm58ZVrvqFQ6RQgRQ==",
       "license": "MIT",
       "dependencies": {
-        "@astrojs/internal-helpers": "0.7.6",
-        "@astrojs/prism": "3.3.0",
+        "@astrojs/internal-helpers": "0.10.4",
+        "@astrojs/prism": "4.0.2",
         "github-slugger": "^2.0.0",
-        "hast-util-from-html": "^2.0.3",
-        "hast-util-to-text": "^4.0.2",
-        "import-meta-resolve": "^4.2.0",
-        "js-yaml": "^4.1.1",
-        "mdast-util-definitions": "^6.0.0",
-        "rehype-raw": "^7.0.0",
-        "rehype-stringify": "^10.0.1",
-        "remark-gfm": "^4.0.1",
-        "remark-parse": "^11.0.0",
-        "remark-rehype": "^11.1.2",
-        "remark-smartypants": "^3.0.2",
-        "shiki": "^3.21.0",
-        "smol-toml": "^1.6.0",
-        "unified": "^11.0.5",
-        "unist-util-remove-position": "^5.0.0",
-        "unist-util-visit": "^5.0.0",
-        "unist-util-visit-parents": "^6.0.2",
-        "vfile": "^6.0.3"
+        "satteri": "^0.10.3"
       }
     },
     "node_modules/@astrojs/prism": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/@astrojs/prism/-/prism-3.3.0.tgz",
-      "integrity": "sha512-q8VwfU/fDZNoDOf+r7jUnMC2//H2l0TuQ6FkGJL8vD8nw/q5KiL3DS1KKBI3QhI9UQhpJ5dc7AtqfbXWuOgLCQ==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@astrojs/prism/-/prism-4.0.2.tgz",
+      "integrity": "sha512-KTivpmnz6lDsC6o9H4+DNm2SrE/GHzw8cNAvEJwAvUT+eoaEnn/4NtbDNfRRaxaJHdp15gf+tfHAWiXR4wB3BA==",
       "license": "MIT",
       "dependencies": {
         "prismjs": "^1.30.0"
       },
       "engines": {
-        "node": "18.20.8 || ^20.3.0 || >=22.0.0"
+        "node": ">=22.12.0"
       }
     },
     "node_modules/@astrojs/telemetry": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/@astrojs/telemetry/-/telemetry-3.3.0.tgz",
-      "integrity": "sha512-UFBgfeldP06qu6khs/yY+q1cDAaArM2/7AEIqQ9Cuvf7B1hNLq0xDrZkct+QoIGyjq56y8IaE2I3CTvG99mlhQ==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@astrojs/telemetry/-/telemetry-3.3.3.tgz",
+      "integrity": "sha512-C1TLn5sPJr0x4vk56piHWKbnqlEB8BKyte5Y45V02U+D7BGO5eMqZDH5aPjnkXQWJggvmsTXxH03QMZ9NgWLzQ==",
       "license": "MIT",
       "dependencies": {
-        "ci-info": "^4.2.0",
-        "debug": "^4.4.0",
-        "dlv": "^1.1.3",
+        "ci-info": "^4.4.0",
         "dset": "^3.1.4",
-        "is-docker": "^3.0.0",
-        "is-wsl": "^3.1.0",
-        "which-pm-runs": "^1.1.0"
+        "is-docker": "^4.0.0",
+        "package-manager-detector": "^1.6.0"
       },
       "engines": {
         "node": "18.20.8 || ^20.3.0 || >=22.0.0"
@@ -176,6 +336,149 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bruits/satteri-darwin-arm64": {
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/@bruits/satteri-darwin-arm64/-/satteri-darwin-arm64-0.10.5.tgz",
+      "integrity": "sha512-27KTVl4TJkVahMy/ohyA7qd4938G5UNneFUz/PsScYfpIhj0IVAS23mpcJXdPF44sa6nva198lmV/cKIb2YPyA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@bruits/satteri-darwin-x64": {
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/@bruits/satteri-darwin-x64/-/satteri-darwin-x64-0.10.5.tgz",
+      "integrity": "sha512-IjnLe3nKspq6qaeqGgjT7MT8VrTV74yWRlaag7ZdNsI8TDAYZ0iPxMCo+9KQZHUk5EyVB+reBI/PFWL5KuFw9Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@bruits/satteri-linux-arm64-gnu": {
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/@bruits/satteri-linux-arm64-gnu/-/satteri-linux-arm64-gnu-0.10.5.tgz",
+      "integrity": "sha512-glkYXZCJywjP13v67eAyAMSJdF+ncvEbYvgi/wOtffL9tQ27lr/zsyzUfgs+ovjJ9d8JNQKiXeiArJcX8PJL9w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@bruits/satteri-linux-arm64-musl": {
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/@bruits/satteri-linux-arm64-musl/-/satteri-linux-arm64-musl-0.10.5.tgz",
+      "integrity": "sha512-yWdgG1g17Nh2QyGVlFUxGRa3FEFwiMcpZEyMNWkbM3deC94cmVc+/i9OuyFpdKuWo3GkgoCtYVOoxk1uCnCZIA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@bruits/satteri-linux-x64-gnu": {
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/@bruits/satteri-linux-x64-gnu/-/satteri-linux-x64-gnu-0.10.5.tgz",
+      "integrity": "sha512-FVaLoPT1fBgGl0J+AYebyyXJYBachGl8Oyyrf1lye4RTqCB4S0Gwkj1uM9RJyThUOvx5VUmAT1CnNh1SFHA+kw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@bruits/satteri-linux-x64-musl": {
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/@bruits/satteri-linux-x64-musl/-/satteri-linux-x64-musl-0.10.5.tgz",
+      "integrity": "sha512-EHpVAx2bqW3GINHTKkljtxVfQmVDGWIuwOYOP5YghTj+0PkBa2o8oKPRtQ9Kbsr1Fye8jtUcDjhwj2jMNugZKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@bruits/satteri-wasm32-wasi": {
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/@bruits/satteri-wasm32-wasi/-/satteri-wasm32-wasi-0.10.5.tgz",
+      "integrity": "sha512-ypz8c/Zmipxp4IoeDa228Gstv6TLzVmNs3yC6wKCoNSOjx1iwpgzu87Y3hTkXFdwChVGU85qeUDuOIarGUZQLw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.11.1",
+        "@emnapi/runtime": "1.11.1",
+        "@napi-rs/wasm-runtime": "^1.2.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@bruits/satteri-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz",
+      "integrity": "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@bruits/satteri-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
+      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@bruits/satteri-win32-arm64-msvc": {
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/@bruits/satteri-win32-arm64-msvc/-/satteri-win32-arm64-msvc-0.10.5.tgz",
+      "integrity": "sha512-siTV88nb0LRqNpkL2gXboqCwVdq95sLtzMHS1/3eONV2gLbB3NAK46wmSMvCO/yquBvI2lvaFIfd8P12ecsxBw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@bruits/satteri-win32-x64-msvc": {
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/@bruits/satteri-win32-x64-msvc/-/satteri-win32-x64-msvc-0.10.5.tgz",
+      "integrity": "sha512-C3IfPvfvMXmlzBxaMPKFS1XiuV9pu2mC7YqkPk7PSvTgPZ8gbdASIpHpztDLvTTQjqZ0z1Ol8tK5X+V6XXC0wQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@capsizecss/unpack": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@capsizecss/unpack/-/unpack-4.0.0.tgz",
@@ -188,10 +491,38 @@
         "node": ">=18"
       }
     },
+    "node_modules/@clack/core": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@clack/core/-/core-1.4.3.tgz",
+      "integrity": "sha512-/kr3UWNtdJfxZtPgDqUOmG2pvwlmcLGheex5yiZKdwbzZJxhV+HMNR9QNmyY5cGwTNV6LrR7Jtp+KjhUAP1qBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-wrap-ansi": "^0.2.0",
+        "sisteransi": "^1.0.5"
+      },
+      "engines": {
+        "node": ">= 20.12.0"
+      }
+    },
+    "node_modules/@clack/prompts": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-1.7.0.tgz",
+      "integrity": "sha512-y7/yvZ2TPAnR9+jnc00klvNNLkJiXFFrQA/hlLCcxA9a2A4zQIOimyFQ9XfwYKiGD1fb5GY8vbKIIgO8d5Tb2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@clack/core": "1.4.3",
+        "fast-string-width": "^3.0.2",
+        "fast-wrap-ansi": "^0.2.0",
+        "sisteransi": "^1.0.5"
+      },
+      "engines": {
+        "node": ">= 20.12.0"
+      }
+    },
     "node_modules/@emnapi/runtime": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
-      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz",
+      "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -215,9 +546,9 @@
       "link": true
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.7.tgz",
-      "integrity": "sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.2.tgz",
+      "integrity": "sha512-XExcO+dvLKvVtNTibSTBej1NCAbaGhWn9Ww1ZPx80qsahhPFe/8jgWP0IchNe0F3HwkU7n8ejhH8bjonqht8mQ==",
       "cpu": [
         "ppc64"
       ],
@@ -231,9 +562,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.7.tgz",
-      "integrity": "sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.2.tgz",
+      "integrity": "sha512-kXXoiPVVGQcnIYGOeaovwOURpniDBpSq4A03qkQ+BMQqtGG6HYap3xne9C1O1yo4TR3qxlCX5IqqmX6fFo2Lqg==",
       "cpu": [
         "arm"
       ],
@@ -247,9 +578,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.7.tgz",
-      "integrity": "sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.2.tgz",
+      "integrity": "sha512-5YfKeeI8qWfBZIX+u2xZC3Zlb3Os/gLS2sbEKM+I4ZOcsWmHS2WLysCcQZDAFRslDUU5Oiq44gf6PYN1vGwG5A==",
       "cpu": [
         "arm64"
       ],
@@ -263,9 +594,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.7.tgz",
-      "integrity": "sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.2.tgz",
+      "integrity": "sha512-O387ite7SzUyCcy3JQX4P4bLtEA7bLLkx+esve5JHnyYfNTxcVpXZo9jhdB0lTKN44gztELTdU7nS8Nr16Fs1Q==",
       "cpu": [
         "x64"
       ],
@@ -279,9 +610,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.7.tgz",
-      "integrity": "sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.2.tgz",
+      "integrity": "sha512-n4KqkOQrraxHJcgjM1RvwbigfQKIKJVpM7xp+KsxiyUSrRdIXnt73VhrPAx0fV44hgfmIVKjxMN9J1t5jySVkw==",
       "cpu": [
         "arm64"
       ],
@@ -295,9 +626,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.7.tgz",
-      "integrity": "sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.2.tgz",
+      "integrity": "sha512-uq6suIWYP37qzGddBKPw5QEQPi6HiLGsO7UmkpfyaYNQ3D+rN6w6WfwH+nuqcGXWvawGwxOEroO4YGnFh95azw==",
       "cpu": [
         "x64"
       ],
@@ -311,9 +642,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.7.tgz",
-      "integrity": "sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-n+I0BTSRIoy+d6RPKnEVwql5UwBJolytvY4mAOIEJorKlqgPII8ix6slVVrfZ5Tnj7glIZvloylbB/EJPMWEXw==",
       "cpu": [
         "arm64"
       ],
@@ -327,9 +658,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.7.tgz",
-      "integrity": "sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.2.tgz",
+      "integrity": "sha512-78XJTJkvPs0kz2w61301PJjXl4g7q3JqiYMZ/M/yVI73EHBrCRTgkhu9oqG7vPqq+a/yadEW8aD+agKlk5xrmg==",
       "cpu": [
         "x64"
       ],
@@ -343,9 +674,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.7.tgz",
-      "integrity": "sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.2.tgz",
+      "integrity": "sha512-XlDnu2q5yoqems+xay6wSAcg9DDD7K9RLKZEBOMZm3ckNpJBvOX20tSfby8KfrrhINDyv9V2YVZKY/SpoGJI8w==",
       "cpu": [
         "arm"
       ],
@@ -359,9 +690,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.7.tgz",
-      "integrity": "sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.2.tgz",
+      "integrity": "sha512-pW4AC0P3it8c7do9MVM4p51FzHzdM/TZrerurgRcHJ2WTa1VQ1CIq18xncfpBJw4ojkiZZrKW2yIBWBP92j6Ug==",
       "cpu": [
         "arm64"
       ],
@@ -375,9 +706,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.7.tgz",
-      "integrity": "sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.2.tgz",
+      "integrity": "sha512-CYbnj78HsIeA+DhgUKgFCfvNsTHFhMMrinUrMZpDXJXKN8T3XViTZ/+wtHeVxEWY8ewSzTFN+nRmSwO2tZaLUQ==",
       "cpu": [
         "ia32"
       ],
@@ -391,9 +722,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.7.tgz",
-      "integrity": "sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.2.tgz",
+      "integrity": "sha512-buwkd8nsph4R+ajRvw0qM5Hja/TXQow3ptzWO2EbG/cqcIkHloRrdlBtQlshyYGTNFvfkfJ5tpPLVkY4DtsPfQ==",
       "cpu": [
         "loong64"
       ],
@@ -407,9 +738,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.7.tgz",
-      "integrity": "sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.2.tgz",
+      "integrity": "sha512-ZVykbDyk7519VwiNb9Lcj9m8XM6v5V9uKPvrEMkkEedVewf+0itkhahp4HDpgERXhwLRpWFypsGbG/J8s0QjJA==",
       "cpu": [
         "mips64el"
       ],
@@ -423,9 +754,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.7.tgz",
-      "integrity": "sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.2.tgz",
+      "integrity": "sha512-CAXl+Dtd9UUuJd8pKKdwh6MLm3MUMiqMPmhZ3tTSXPqfyQ3vDl6R5hZdZ/kYojK4ofXtdfSv1tFq8XzWx3heNQ==",
       "cpu": [
         "ppc64"
       ],
@@ -439,9 +770,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.7.tgz",
-      "integrity": "sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.2.tgz",
+      "integrity": "sha512-GeXCej4IQtU1B+QlDV8W/RRvbzI3O/Stss+/bCXv4lZls5WGRtu2a+3JkA3i4qIUlMXpcHebWpF8AkJhATowuA==",
       "cpu": [
         "riscv64"
       ],
@@ -455,9 +786,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.7.tgz",
-      "integrity": "sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.2.tgz",
+      "integrity": "sha512-3H1weTYZPxt/WOhByszQZybS9w5lKzUn1FDMsgEChbHWQwHYQQRfBxgCcZvPhjHfKyJjIievvMmEUawJrdY9Dg==",
       "cpu": [
         "s390x"
       ],
@@ -471,9 +802,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.7.tgz",
-      "integrity": "sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.2.tgz",
+      "integrity": "sha512-4xTZr1FUmSoQW4XIWmit3tzQrUTZM+N3P0XV8xROKYF50XfI7xeO90+1bZvNwxIufQ9hDQVRJH5YhgPVF8A/HQ==",
       "cpu": [
         "x64"
       ],
@@ -487,9 +818,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.7.tgz",
-      "integrity": "sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-sSATRjPeDBg3pdgHoQfoYBob11Kk1FGa9lui5RIHZCoCkJa9QKlvl3/vKz2usCmYYjs7ymJR/2Nnsqe+Hjt5nw==",
       "cpu": [
         "arm64"
       ],
@@ -503,9 +834,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.7.tgz",
-      "integrity": "sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.2.tgz",
+      "integrity": "sha512-lqnzCV+mM0gIADaKihiCg6ifgfU2L3h5E33rNQBN1Y4MaVGnzryzmvvf7UHxprpQdE8hpqLolJ9Rl+SkIRDpyw==",
       "cpu": [
         "x64"
       ],
@@ -519,9 +850,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.7.tgz",
-      "integrity": "sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-AL2qJILH7lNjrDmCQDvdxMfAUIv8KMNZOvrwAQ8i8//ntL9FflhOyMJ8OZSMBb8/AWXe3/5v5S20y3zCoZWKoQ==",
       "cpu": [
         "arm64"
       ],
@@ -535,9 +866,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.7.tgz",
-      "integrity": "sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.2.tgz",
+      "integrity": "sha512-QtiuPytchRyC4rwUKhexJdQKvDuZ6hWloi3igqPQNUJCS1/v9EiO3UTOXR6A3FoMo4fnAKbWJdqaIwhOzh8qEw==",
       "cpu": [
         "x64"
       ],
@@ -551,9 +882,9 @@
       }
     },
     "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.7.tgz",
-      "integrity": "sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.2.tgz",
+      "integrity": "sha512-WkhYDmpTjLvGlScA1rwjRUmhl4k8oXR3cIbtqWmELgU/dFeHHlEllxDvdWcNJV9rbzCexB5vz8gtNewWLgCT7Q==",
       "cpu": [
         "arm64"
       ],
@@ -567,9 +898,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.7.tgz",
-      "integrity": "sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.2.tgz",
+      "integrity": "sha512-GPMSkTOtMnv2U2F8gxe4Io6qmVs+YKyp832Etqqxr0hFngmXQ3rzwytelm3GIn7T4VviRUlf3sOgBOiTdvaf7g==",
       "cpu": [
         "x64"
       ],
@@ -583,9 +914,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.7.tgz",
-      "integrity": "sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.2.tgz",
+      "integrity": "sha512-PIhhEkE9uPBleRBrQEJpUn7MBnibZzbGzYWPmY3x+YoVg/95zbjB4CxPPOQ8l5tYYM4mMaCthF8/1DIfBQQyWQ==",
       "cpu": [
         "arm64"
       ],
@@ -599,9 +930,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.7.tgz",
-      "integrity": "sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.2.tgz",
+      "integrity": "sha512-YmJbfTlvU7Sdn9BB+4PRES4oB6pxgS37MAONj+hBr/cpXS1aBPKXxNnDbu+QCWPj0o9dgyxeq79g6c5P8KeuYA==",
       "cpu": [
         "ia32"
       ],
@@ -615,9 +946,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.7.tgz",
-      "integrity": "sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.2.tgz",
+      "integrity": "sha512-5ebpxr3nWMzrL/rnUI755Jkuee0bHL/Gq0WTF9lvcpv73wAp5eu8MfBUgWK9bhWvZjj7yX8etf/8tI8Ney695g==",
       "cpu": [
         "x64"
       ],
@@ -1102,6 +1433,27 @@
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "license": "MIT"
     },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.2.3.tgz",
+      "integrity": "sha512-UMduMbqO5s5zF2NkNacMT/yK5Y5QiKvWr2+50bzIIxFDwVJ2h49b+oyjaCGPhJxd2/gC2x39EHv/gHVuu36x2Q==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.3"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=23.5.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1 || ^2.0.0-alpha.4",
+        "@emnapi/runtime": "^1.7.1 || ^2.0.0-alpha.4"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1146,38 +1498,19 @@
       "integrity": "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==",
       "license": "MIT"
     },
-    "node_modules/@rollup/pluginutils": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.4.0.tgz",
-      "integrity": "sha512-MfPp06CjRLfXQ3wY0R8vJDYBy/MvVcc9OulEfR0B8Iv9ko+GCNaRZ+EpJYFl27LhKsZK0o420sYCRHCjfCgeUg==",
+    "node_modules/@oxc-project/types": {
+      "version": "0.146.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.146.0.tgz",
+      "integrity": "sha512-XC0QsnnhVe7sLIWmYmdPw7x5P0h4W8vUU3Nv1ySgWXtvCz8NizoAEpGXA0sOYoJQV2Rl13LgURAHQ5cI5ILCSA==",
       "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "estree-walker": "^2.0.2",
-        "picomatch": "^4.0.2"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "rollup": {
-          "optional": true
-        }
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
       }
     },
-    "node_modules/@rollup/pluginutils/node_modules/estree-walker": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "license": "MIT"
-    },
-    "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.61.1.tgz",
-      "integrity": "sha512-JnBB8MdXj45cajvTuO5FmPlvFVJRQgvrz1uSEl3NwqFnReAPGwb8EanbGi4z2nRaqLzjJSv5/JmycoTKlRZxHA==",
+    "node_modules/@rolldown/binding-android-arm-eabi": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.5.tgz",
+      "integrity": "sha512-DLe/i+l8ynIBY7XEQ191TeZvCoowIGa18R+dIV30GW7DiOtp74i/xX8hs8GUjW5ARV7VZuie3d6AumSmCwbeRA==",
       "cpu": [
         "arm"
       ],
@@ -1185,12 +1518,15 @@
       "optional": true,
       "os": [
         "android"
-      ]
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
     },
-    "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.61.1.tgz",
-      "integrity": "sha512-Jx2g7iSjw4AOT0HDPHM9RV3GNjRXwybWtSFZiZAYUTjUwjVrYIwq3kBf+LnhqJlzXFAqTAh2F7IGI+O568exPw==",
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.5.tgz",
+      "integrity": "sha512-zXcwKlQApYAOELHd8PwKDFkagYF9Wy4e0RJ+0qnzl9Pjnpj75TEG8ufv40p2J7kCEfwZAsNiuzRIyNNMWT38ig==",
       "cpu": [
         "arm64"
       ],
@@ -1198,12 +1534,15 @@
       "optional": true,
       "os": [
         "android"
-      ]
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
     },
-    "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.61.1.tgz",
-      "integrity": "sha512-0F1L/Z3Eqv8mT2n3dCpeO8GcTvHvVqkP5/t6DMsn0KzhYVcg+s7Ncl5DS8qjKYEeio6Az0Gt6nyBORay5qIlCA==",
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.5.tgz",
+      "integrity": "sha512-dK4QakI42nzWgJT5sm4y4y/O//D4OxM75/cH28RLV+nzIN9AY+YsbuUVrUTjlLjXR6vpyxFbSsbmNuJ6BP9sww==",
       "cpu": [
         "arm64"
       ],
@@ -1211,12 +1550,15 @@
       "optional": true,
       "os": [
         "darwin"
-      ]
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
     },
-    "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.61.1.tgz",
-      "integrity": "sha512-qLttcH871ujY4YcVfUSShhOw+CsoTatYz8gRbHO7Bb92QH059/P0y5do1KMs41fY0BpD2x4AJH/gID0zFiqVKQ==",
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.5.tgz",
+      "integrity": "sha512-fqSALaUu1Wjd1nK2uW2kJDWdLCc8lx1IcY+MTY26Aurfdx19anlzhqXOgCFbBFQnlFDTn4TC1/7Nz4Bl2mLP3A==",
       "cpu": [
         "x64"
       ],
@@ -1224,25 +1566,15 @@
       "optional": true,
       "os": [
         "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.61.1.tgz",
-      "integrity": "sha512-fUI4RapGE0Oh3mb8mgfvC1O2nU1RpDZUKnDQm3xB1Ipg7C2wTs5Kstz7G2uWK99a8S2yTMq8/P4uycwNa0nJyw==",
-      "cpu": [
-        "arm64"
       ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ]
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
     },
-    "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.61.1.tgz",
-      "integrity": "sha512-H5YrdvJaDtI/U9/emrD4b++xkvp3y/JvOe4rizHbxvkyMfRS/CiRYdji+Pl8D0brEaNFWUh1drQxgAGIl6Xudw==",
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.5.tgz",
+      "integrity": "sha512-/vCnNxlkxs9tKxNDcyWUePpJ/PgTzxIaVhoM5SmG8UV+GR/IcPam4VYxi7GIMo7PSDuNqlJqvprqii9NqqVCMw==",
       "cpu": [
         "x64"
       ],
@@ -1250,25 +1582,15 @@
       "optional": true,
       "os": [
         "freebsd"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.61.1.tgz",
-      "integrity": "sha512-Q8CBCCQtDFrYtXoeUXSrnFXKOnyUhx6bz+SkL6A0E7V8kAiCJ5pamq1WtbfpVGhR5TSpXY6ak3avmDc5fHTyJA==",
-      "cpu": [
-        "arm"
       ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
     },
-    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.61.1.tgz",
-      "integrity": "sha512-nwnhk1581l0FBVellGcVCAT0Oi06onEA3WB53sf01VO3I0UPBkMH9sXONYME2K0ovXcNayJfNtHfm6mpJElatQ==",
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.5.tgz",
+      "integrity": "sha512-abk0NLA519LxRCszmbE0jYKuQ9YPocOXTiOXOo6Yr+YAT95VH+PtqYAjOJvGKt3viEd/x4qzabAlwd5bHOOARg==",
       "cpu": [
         "arm"
       ],
@@ -1276,25 +1598,15 @@
       "optional": true,
       "os": [
         "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.61.1.tgz",
-      "integrity": "sha512-x5Xr49hwt3hdW75UOZm3395YwwzPyauktslv29KpWL/T+vVAzoT3azLcTWv0eMciBNrx+DYjH4paehHoLpPvpg==",
-      "cpu": [
-        "arm64"
       ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
     },
-    "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.61.1.tgz",
-      "integrity": "sha512-unMS3H73DpaoPyyEVPjGKleM/s0mkmsauTENpw4INQY8y4+IuLNjkueQ5QCtC0D3N38Y38yhAU8OoZ20S2Tm6w==",
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.5.tgz",
+      "integrity": "sha512-Y7eALiJ8lr0M2HH103Js+g7V34wf6snlpZLAsHI90uLhr3PVlNsbFVAXJC9d/V6BnPyKtpSwI+NcB/RLxsQxuA==",
       "cpu": [
         "arm64"
       ],
@@ -1302,51 +1614,31 @@
       "optional": true,
       "os": [
         "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.61.1.tgz",
-      "integrity": "sha512-zNZzGRnAhwjFEYmvphJRV5XaQGjs62cCmeYYHUT//NbvEnHauw+I85nGG+SiVg5ld4GX8D1IbKIX+ozITQnhMQ==",
-      "cpu": [
-        "loong64"
       ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
     },
-    "node_modules/@rollup/rollup-linux-loong64-musl": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.61.1.tgz",
-      "integrity": "sha512-LdpWGL8X209B2SIvWjqlc8VZgM6PKfontSerGepuldQmHYrAOtnMCXeJkxXGbC+PPZVOuu5czJo7fNV6aeW8rQ==",
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.5.tgz",
+      "integrity": "sha512-xMvZgnbZg4YVnR/AX2b3oOPDTFYJvUVaJg5FedA/LuvexAtXibZQej4cnTkw3rjsJ/ggUROB64TdtETiim+FYA==",
       "cpu": [
-        "loong64"
+        "arm64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.61.1.tgz",
-      "integrity": "sha512-EC5kTtNaNGOmbMGqar8dvJy6y/hg99GAwjfBz++pxZhQATXGcRjd6c5en5wcbru0vkRmiMGsQKdMJOOf6sza4g==",
-      "cpu": [
-        "ppc64"
       ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
     },
-    "node_modules/@rollup/rollup-linux-ppc64-musl": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.61.1.tgz",
-      "integrity": "sha512-8hiwp6D4acEcNK78I4rP0/XtS1sknWIAMJBPdR4l6zUtyTm5KiTDr5bXmWt4foY7nAN7AThDHgkLIEZOWKbzWw==",
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.5.tgz",
+      "integrity": "sha512-GRjeqTUDHTo5GwntsLaAMcBahG3nlpjftXWZLN73HiYQlhwEowvarFgQnRnQZtIp4keXX7quXFbG38uPZBa2EA==",
       "cpu": [
         "ppc64"
       ],
@@ -1354,38 +1646,15 @@
       "optional": true,
       "os": [
         "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.61.1.tgz",
-      "integrity": "sha512-10dh/h/BqA7DuMPWSxkR8uks18FRwnwOEqr5zOTEl+NOwP/OMzKX8OFR/Of9xxDA7D5qef1Nzar5WDD2kCCr1g==",
-      "cpu": [
-        "riscv64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.61.1.tgz",
-      "integrity": "sha512-YKJ5lg35DP17gcAOggnihe+APw9HLyj1Xn7gsmGumBJAUDa6NGXNixJzmkWLhcK9TOuuyQjdamzvJefkO7qHZQ==",
-      "cpu": [
-        "riscv64"
       ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
     },
-    "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.61.1.tgz",
-      "integrity": "sha512-Mlil5G2Jj6a7B3LWGctg+XPL9vdXYuzCtNXfxOQ0nPjc2m6ueUktocPGH9bnAM0bNRKb/bAWTujUU7IJQdQA+g==",
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.5.tgz",
+      "integrity": "sha512-vLNTR45F2Uwc8AufkNXPmB4VliaXs+FvcheEogIzOXzO4l+LzieXF5A/TWxLy5HtqpsRCHUfd0lPVrrdgXdLHQ==",
       "cpu": [
         "s390x"
       ],
@@ -1393,12 +1662,15 @@
       "optional": true,
       "os": [
         "linux"
-      ]
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
     },
-    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.61.1.tgz",
-      "integrity": "sha512-bVWIOIk6pV01p4CdUbPP7CJ/434z+OooYjDuFcR+44N35YvKUC66G8MGnvcWx5mWKW3g61J+t74l3Kj15Kwn2Q==",
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.5.tgz",
+      "integrity": "sha512-Mgj59/HTuYeK9Gz2MA+mBWKnHsAgkBSec15ZMb1st3oIfFbX7gCjOae7GydHhzcyQi9Z/7M1QuN9bR3oFqF0jQ==",
       "cpu": [
         "x64"
       ],
@@ -1406,12 +1678,15 @@
       "optional": true,
       "os": [
         "linux"
-      ]
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
     },
-    "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.61.1.tgz",
-      "integrity": "sha512-qy5pBvZbqNFheBz61R1rzsezjm0J7O2oNGoWtGoY89SZYLUfxAJTBAqDChqAIdB4rCiIbi9nF7yZ83GnNiLwSw==",
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.5.tgz",
+      "integrity": "sha512-mY8AP0/ichsbhAxGnLa3d3+MwV0EfgrPND2bplI3Ym8T6R2pJ0N87bvrKVwNXmdy3jnr6eQBecdqx/HMknBmpA==",
       "cpu": [
         "x64"
       ],
@@ -1419,25 +1694,15 @@
       "optional": true,
       "os": [
         "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-openbsd-x64": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.61.1.tgz",
-      "integrity": "sha512-E83TXjI4zm0+5f2qO+UOudaCYIhYwpJ5jq6YCZNIZ+6CbfhKrkAGezeiASBL9ElxAxFsRS9ZhESv8mfnj6TKeg==",
-      "cpu": [
-        "x64"
       ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ]
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
     },
-    "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.61.1.tgz",
-      "integrity": "sha512-fbWnKqVkjrJN38vNe3ahkbk6iejS/3b0Nt7EEtPpE6RBacZcGXNKbzfHN3GUUlXOPghUg0j6XUGrtjX9z1sIvA==",
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.5.tgz",
+      "integrity": "sha512-8SLssA2oweAxyRgDp789ACfRb/3P+zNRJpzZxSizxF9m8NUDQ4+3xjo8ttjhVGGw6Qxb70oZiEtIjaKikCO7Yw==",
       "cpu": [
         "arm64"
       ],
@@ -1445,12 +1710,15 @@
       "optional": true,
       "os": [
         "openharmony"
-      ]
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
     },
-    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.61.1.tgz",
-      "integrity": "sha512-ArMl38iVAbk0New1ogihQNY6iphLi4ZaRsa037gUzv5yeKPY8TD3Dmy4x2RNC1VztU/uqm+G+/RwFrSka3Oy2g==",
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.5.tgz",
+      "integrity": "sha512-vGbruD5zquhoc8D9SViXgN2FBJtNdTyQ4DtG+SWiEGlJiAzoKcZ2xp+xuXCffhubVdt0NJlTZqkeRuERy7g8Cw==",
       "cpu": [
         "arm64"
       ],
@@ -1458,25 +1726,15 @@
       "optional": true,
       "os": [
         "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.61.1.tgz",
-      "integrity": "sha512-0mYtjHS9ucAbcATycCNK9IGBk/cCe/ma7EmSLGZdsxnOA8cjRIyU04wDpVAD9NiOfLUR9KTxdiO53uOkherqjQ==",
-      "cpu": [
-        "ia32"
       ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
     },
-    "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.61.1.tgz",
-      "integrity": "sha512-gK1iCEPfpoSG9wfBihXxvBMi8ZfcWffYkEsC/Eih+iFENTaewvNcrEQ69lIOWYO5pePHKLHHO7nq5AILGO/HQQ==",
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.5.tgz",
+      "integrity": "sha512-e/SXpgISz+IoqVcSSI0rx/d/he8zqLex+/rCWpnHpmVfmPIUjag9H6P7zotf0gJHwPUhQxZ/mF8tr6acebT9yw==",
       "cpu": [
         "x64"
       ],
@@ -1484,80 +1742,109 @@
       "optional": true,
       "os": [
         "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.61.1.tgz",
-      "integrity": "sha512-X+zaP2x+j4RXGfbp/seSoRHWnPxzApilDszisZxbYH5C/jTxFhCtDNdPGZb9lJyYPs24wGxruPF7Y+sIXt9Gzw==",
-      "cpu": [
-        "x64"
       ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "license": "MIT"
     },
     "node_modules/@shikijs/core": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.23.0.tgz",
-      "integrity": "sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-4.4.3.tgz",
+      "integrity": "sha512-QCR4q2ZO/ILJEuwiBMel4wdcTDb1JGwfjKTxPDF6x8ixOaluPrVqIn06C99AcRPhmYlBR56d/Fb+GN58GzExpg==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "3.23.0",
+        "@shikijs/primitive": "4.4.3",
+        "@shikijs/types": "4.4.3",
         "@shikijs/vscode-textmate": "^10.0.2",
-        "@types/hast": "^3.0.4",
+        "@types/hast": "^3.0.5",
         "hast-util-to-html": "^9.0.5"
+      },
+      "engines": {
+        "node": ">=20"
       }
     },
     "node_modules/@shikijs/engine-javascript": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.23.0.tgz",
-      "integrity": "sha512-aHt9eiGFobmWR5uqJUViySI1bHMqrAgamWE1TYSUoftkAeCCAiGawPMwM+VCadylQtF4V3VNOZ5LmfItH5f3yA==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-4.4.3.tgz",
+      "integrity": "sha512-FbOjFJp9VLdo1Wevs10BBtVxiTWwNLqZh5Gkhjgda/ioL15YOgeSl9n+6XMa3qRlPQzfhFNe641SrynFHYG0nQ==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "3.23.0",
+        "@shikijs/types": "4.4.3",
         "@shikijs/vscode-textmate": "^10.0.2",
-        "oniguruma-to-es": "^4.3.4"
+        "oniguruma-to-es": "^4.3.6"
+      },
+      "engines": {
+        "node": ">=20"
       }
     },
     "node_modules/@shikijs/engine-oniguruma": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.23.0.tgz",
-      "integrity": "sha512-1nWINwKXxKKLqPibT5f4pAFLej9oZzQTsby8942OTlsJzOBZ0MWKiwzMsd+jhzu8YPCHAswGnnN1YtQfirL35g==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-4.4.3.tgz",
+      "integrity": "sha512-EcOQkxdxGQrc1Row/cC2c96/v1dbZqGnEVu1qTuT/MJmp6+cXCvQussowVmCv5Tqr3KuY3c7IbM6HTW3LJ1k9w==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "3.23.0",
+        "@shikijs/types": "4.4.3",
         "@shikijs/vscode-textmate": "^10.0.2"
+      },
+      "engines": {
+        "node": ">=20"
       }
     },
     "node_modules/@shikijs/langs": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.23.0.tgz",
-      "integrity": "sha512-2Ep4W3Re5aB1/62RSYQInK9mM3HsLeB91cHqznAJMuylqjzNVAVCMnNWRHFtcNHXsoNRayP9z1qj4Sq3nMqYXg==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-4.4.3.tgz",
+      "integrity": "sha512-ePic0yfAJGOF83D5wBHK/00EjK65oahBYxFk5epgq33WRv7X9UuxLEV8PtR0szC0z8dl7INIpIodB99JRFlR+A==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "4.4.3"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@shikijs/primitive": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@shikijs/primitive/-/primitive-4.4.3.tgz",
+      "integrity": "sha512-m0wBeLDQDeIxRdUmrCPdQqfuUamDwRL5isCfYbguKD6NiaKpVbsv+3J81DyIKgNW5h4WAIIr8T4EkgQrBBxvaQ==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "3.23.0"
+        "@shikijs/types": "4.4.3",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=20"
       }
     },
     "node_modules/@shikijs/themes": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.23.0.tgz",
-      "integrity": "sha512-5qySYa1ZgAT18HR/ypENL9cUSGOeI2x+4IvYJu4JgVJdizn6kG4ia5Q1jDEOi7gTbN4RbuYtmHh0W3eccOrjMA==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-4.4.3.tgz",
+      "integrity": "sha512-w8UHjeUnIR965KMWJHUPXOc2mNJUnK3vpVLYLvw5IYU2mnTTJ89E24OrJDBNiJDQ0qzb0tc4l7mrIXx5cFeIyw==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "3.23.0"
+        "@shikijs/types": "4.4.3"
+      },
+      "engines": {
+        "node": ">=20"
       }
     },
     "node_modules/@shikijs/types": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.23.0.tgz",
-      "integrity": "sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-4.4.3.tgz",
+      "integrity": "sha512-UEJxmRR++MAGR6hugn0vgVS2W/6lWAts84FFSrnlH9sP0LNol7E5+NQ792pH8liWUhyMyjhTgSUH3k7iD7tc5g==",
       "license": "MIT",
       "dependencies": {
         "@shikijs/vscode-textmate": "^10.0.2",
-        "@types/hast": "^3.0.4"
+        "@types/hast": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=20"
       }
     },
     "node_modules/@shikijs/vscode-textmate": {
@@ -1566,13 +1853,14 @@
       "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
       "license": "MIT"
     },
-    "node_modules/@types/debug": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
-      "integrity": "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==",
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
+      "integrity": "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==",
       "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "@types/ms": "*"
+        "tslib": "^2.4.0"
       }
     },
     "node_modules/@types/estree": {
@@ -1581,6 +1869,15 @@
       "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
       "license": "MIT"
     },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
     "node_modules/@types/geojson": {
       "version": "7946.0.16",
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
@@ -1588,9 +1885,9 @@
       "license": "MIT"
     },
     "node_modules/@types/hast": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
-      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.5.tgz",
+      "integrity": "sha512-rp/ezSWaD1m44dPKICGhiskI13nVr7qTloFwDa/IYkhhf5nzwP+zIQcIJh3WIFSBOy/H1PzB40jPjMDksN4F+g==",
       "license": "MIT",
       "dependencies": {
         "@types/unist": "*"
@@ -1614,12 +1911,6 @@
         "@types/unist": "*"
       }
     },
-    "node_modules/@types/ms": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
-      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
-      "license": "MIT"
-    },
     "node_modules/@types/nlcst": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/nlcst/-/nlcst-2.0.3.tgz",
@@ -1636,23 +1927,11 @@
       "license": "MIT"
     },
     "node_modules/@ungap/structured-clone": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.1.tgz",
-      "integrity": "sha512-mUFwbeTqrVgDQxFveS+df2yfap6iuP20NAKAsBt5jDEoOTDew+zwLAOilHCeQJOVSvmgCX4ogqIrA0mnyr08yQ==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.3.tgz",
+      "integrity": "sha512-60YRaenCQcVjYEKOcG824+DRGGIQ3VKErcBoAEDJZz5bKIs2ZG+X/H9Nk+Q6EVkwJk5QNApxbrc5QtBSwtrXAg==",
       "license": "ISC"
     },
-    "node_modules/acorn": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
-      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
-      "license": "MIT",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/ag-charts-types": {
       "version": "13.3.1",
       "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-13.3.1.tgz",
@@ -1668,75 +1947,28 @@
         "ag-charts-types": "13.3.1"
       }
     },
-    "node_modules/ansi-align": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
-      "integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==",
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^4.1.0"
-      }
-    },
-    "node_modules/ansi-align/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/ansi-align/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "license": "MIT"
-    },
-    "node_modules/ansi-align/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+    "node_modules/am-i-vibing": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/am-i-vibing/-/am-i-vibing-0.4.0.tgz",
+      "integrity": "sha512-MxT4XZL7pzLHpuvhDKdMaQHMGGkJDLluKBLsbstn+8wv9sWcFT6h+0ve9qkml95amVTZtZV83gQe2hY+ojgHLg==",
       "license": "MIT",
       "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
+        "process-ancestry": "^0.1.0"
       },
-      "engines": {
-        "node": ">=8"
+      "bin": {
+        "am-i-vibing": "dist/cli.mjs"
       }
     },
-    "node_modules/ansi-align/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "license": "MIT",
       "dependencies": {
-        "ansi-regex": "^5.0.1"
+        "color-convert": "^2.0.1"
       },
       "engines": {
         "node": ">=8"
-      }
-    },
-    "node_modules/ansi-regex": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
-      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/ansi-styles": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
-      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
@@ -1782,16 +2014,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/array-iterate": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/array-iterate/-/array-iterate-2.0.1.tgz",
-      "integrity": "sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -1803,80 +2025,70 @@
       }
     },
     "node_modules/astro": {
-      "version": "5.18.2",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-5.18.2.tgz",
-      "integrity": "sha512-TnFwLnAXty5MXKPDGuKXqK4AMBXG+FH6RUdK7Oyc3gyfNoFIthT+4eRbzOK43bdRlLaZuxgciDSjgtggZ3OtGQ==",
+      "version": "7.2.6",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-7.2.6.tgz",
+      "integrity": "sha512-qzT4tAhgHYX/6/MUGslAkF0PVkM4WNsMw2A1GrbfA9cXp68hmdqF3f7MuF5rRFvwQbjowqjOf90ao9whfgV5mw==",
       "license": "MIT",
       "dependencies": {
-        "@astrojs/compiler": "^2.13.0",
-        "@astrojs/internal-helpers": "0.7.6",
-        "@astrojs/markdown-remark": "6.3.11",
-        "@astrojs/telemetry": "3.3.0",
+        "@astrojs/compiler-rs": "^0.4.0",
+        "@astrojs/internal-helpers": "0.10.4",
+        "@astrojs/markdown-satteri": "0.3.8",
+        "@astrojs/telemetry": "3.3.3",
         "@capsizecss/unpack": "^4.0.0",
+        "@clack/prompts": "^1.1.0",
         "@oslojs/encoding": "^1.1.0",
-        "@rollup/pluginutils": "^5.3.0",
-        "acorn": "^8.15.0",
+        "am-i-vibing": "^0.4.0",
         "aria-query": "^5.3.2",
         "axobject-query": "^4.1.0",
-        "boxen": "8.0.1",
-        "ci-info": "^4.3.1",
+        "ci-info": "^4.4.0",
         "clsx": "^2.1.1",
-        "common-ancestor-path": "^1.0.1",
-        "cookie": "^1.1.1",
-        "cssesc": "^3.0.0",
-        "debug": "^4.4.3",
-        "deterministic-object-hash": "^2.0.2",
-        "devalue": "^5.6.2",
-        "diff": "^8.0.3",
-        "dlv": "^1.1.3",
+        "common-ancestor-path": "^2.0.0",
+        "cookie": "^2.0.1",
+        "devalue": "^5.8.1",
+        "diff": "^9.0.0",
         "dset": "^3.1.4",
-        "es-module-lexer": "^1.7.0",
-        "esbuild": "^0.27.3",
-        "estree-walker": "^3.0.3",
+        "es-module-lexer": "^2.0.0",
+        "esbuild": "^0.28.0",
+        "find-process": "^2.1.1",
         "flattie": "^1.1.1",
-        "fontace": "~0.4.0",
+        "fontace": "~0.4.1",
+        "get-tsconfig": "5.0.0-beta.4",
         "github-slugger": "^2.0.0",
         "html-escaper": "3.0.3",
         "http-cache-semantics": "^4.2.0",
-        "import-meta-resolve": "^4.2.0",
-        "js-yaml": "^4.1.1",
-        "magic-string": "^0.30.21",
-        "magicast": "^0.5.1",
+        "js-yaml": "^4.3.0",
+        "jsonc-parser": "^3.3.1",
+        "magic-string": "^1.0.0",
+        "magicast": "^0.5.2",
         "mrmime": "^2.0.1",
-        "neotraverse": "^0.6.18",
-        "p-limit": "^6.2.0",
-        "p-queue": "^8.1.1",
+        "neotraverse": "^1.0.1",
+        "obug": "^2.1.1",
+        "p-limit": "^7.3.0",
+        "p-queue": "^9.1.0",
         "package-manager-detector": "^1.6.0",
         "piccolore": "^0.1.3",
-        "picomatch": "^4.0.3",
-        "prompts": "^2.4.2",
-        "rehype": "^13.0.2",
-        "semver": "^7.7.3",
-        "shiki": "^3.21.0",
+        "picomatch": "^4.0.4",
+        "semver": "^7.7.4",
+        "shiki": "^4.0.2",
         "smol-toml": "^1.6.0",
-        "svgo": "^4.0.0",
-        "tinyexec": "^1.0.2",
+        "svgo": "^4.0.1",
+        "tinyclip": "^0.1.12",
+        "tinyexec": "^1.0.4",
         "tinyglobby": "^0.2.15",
-        "tsconfck": "^3.1.6",
         "ultrahtml": "^1.6.0",
-        "unifont": "~0.7.3",
-        "unist-util-visit": "^5.0.0",
-        "unstorage": "^1.17.4",
-        "vfile": "^6.0.3",
-        "vite": "^6.4.1",
-        "vitefu": "^1.1.1",
+        "unifont": "~0.7.5",
+        "unstorage": "^1.17.5",
+        "vite": "^8.0.13",
+        "vitefu": "^1.1.2",
         "xxhash-wasm": "^1.1.0",
-        "yargs-parser": "^21.1.1",
-        "yocto-spinner": "^0.2.3",
-        "zod": "^3.25.76",
-        "zod-to-json-schema": "^3.25.1",
-        "zod-to-ts": "^1.2.0"
+        "yargs-parser": "^22.0.0",
+        "zod": "^4.3.6"
       },
       "bin": {
-        "astro": "astro.js"
+        "astro": "bin/astro.mjs"
       },
       "engines": {
-        "node": "18.20.8 || ^20.3.0 || >=22.0.0",
+        "node": ">=22.12.0",
         "npm": ">=9.6.5",
         "pnpm": ">=7.1.0"
       },
@@ -1885,7 +2097,15 @@
         "url": "https://opencollective.com/astrodotbuild"
       },
       "optionalDependencies": {
-        "sharp": "^0.34.0"
+        "sharp": "^0.34.0 || ^0.35.0"
+      },
+      "peerDependencies": {
+        "@astrojs/markdown-remark": "7.2.4"
+      },
+      "peerDependenciesMeta": {
+        "@astrojs/markdown-remark": {
+          "optional": true
+        }
       }
     },
     "node_modules/async": {
@@ -1914,40 +2134,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/base-64": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/base-64/-/base-64-1.0.0.tgz",
-      "integrity": "sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==",
-      "license": "MIT"
-    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "license": "ISC"
     },
-    "node_modules/boxen": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/boxen/-/boxen-8.0.1.tgz",
-      "integrity": "sha512-F3PH5k5juxom4xktynS7MoFY+NUWH5LC4CnH11YB8NPew+HLpmBLCybSAEyb2F+4pRXhuhWqFesoQd6DAyc2hw==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-align": "^3.0.1",
-        "camelcase": "^8.0.0",
-        "chalk": "^5.3.0",
-        "cli-boxes": "^3.0.0",
-        "string-width": "^7.2.0",
-        "type-fest": "^4.21.0",
-        "widest-line": "^5.0.0",
-        "wrap-ansi": "^9.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/braces": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
@@ -1961,22 +2153,10 @@
         "node": ">=8"
       }
     },
-    "node_modules/camelcase": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-8.0.0.tgz",
-      "integrity": "sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/ccount": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
-      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -1984,27 +2164,21 @@
       }
     },
     "node_modules/chalk": {
-      "version": "5.6.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
-      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
       "engines": {
-        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+        "node": ">=10"
       },
       "funding": {
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/character-entities": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
-      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/character-entities-html4": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
@@ -2055,18 +2229,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/cli-boxes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
-      "integrity": "sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2076,6 +2238,24 @@
         "node": ">=6"
       }
     },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
     "node_modules/comma-separated-tokens": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@@ -2096,10 +2276,13 @@
       }
     },
     "node_modules/common-ancestor-path": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/common-ancestor-path/-/common-ancestor-path-1.0.1.tgz",
-      "integrity": "sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==",
-      "license": "ISC"
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/common-ancestor-path/-/common-ancestor-path-2.0.0.tgz",
+      "integrity": "sha512-dnN3ibLeoRf2HNC+OlCiNc5d2zxbLJXOtiZUudNFSXZrNSydxcCsSpRzXwfu7BBWCIfHPw+xTayeBvJCP/D8Ng==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">= 18"
+      }
     },
     "node_modules/commondir": {
       "version": "1.0.1",
@@ -2109,12 +2292,12 @@
       "license": "MIT"
     },
     "node_modules/cookie": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
-      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-2.0.1.tgz",
+      "integrity": "sha512-yuToqVvRrj6pfDXREyQAAv8SkAEk/8GS3jQRTiUMm66TVtBYmqQeoEjL2Lmq8Rpo6271vH76InTChTitEAm65w==",
       "license": "MIT",
       "engines": {
-        "node": ">=18"
+        "node": ">=22"
       },
       "funding": {
         "type": "opencollective",
@@ -2177,18 +2360,6 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "license": "MIT",
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/csso": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
@@ -2222,36 +2393,6 @@
       "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
       "license": "CC0-1.0"
     },
-    "node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/decode-named-character-reference": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz",
-      "integrity": "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==",
-      "license": "MIT",
-      "dependencies": {
-        "character-entities": "^2.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/defu": {
       "version": "6.1.7",
       "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.7.tgz",
@@ -2278,23 +2419,10 @@
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
       "license": "Apache-2.0",
-      "optional": true,
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/deterministic-object-hash": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/deterministic-object-hash/-/deterministic-object-hash-2.0.2.tgz",
-      "integrity": "sha512-KxektNH63SrbfUyDiwXqRb1rLwKt33AmMv+5Nhsw1kqZ13SJBRTgZHtGbE+hH3a1mVW1cz+4pqSWVPAtLVXTzQ==",
-      "license": "MIT",
-      "dependencies": {
-        "base-64": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/devalue": {
       "version": "5.8.1",
       "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.8.1.tgz",
@@ -2315,9 +2443,9 @@
       }
     },
     "node_modules/diff": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.4.tgz",
-      "integrity": "sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-9.0.0.tgz",
+      "integrity": "sha512-svtcdpS8CgJyqAjEQIXdb3OjhFVVYjzGAPO8WGCmRbrml64SPw/jJD4GoE98aR7r25A0XcgrK3F02yw9R/vhQw==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.3.1"
@@ -2336,12 +2464,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "license": "MIT"
-    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -2425,34 +2547,16 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/emoji-regex": {
-      "version": "10.6.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
-      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
-      "license": "MIT"
-    },
-    "node_modules/entities": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
-      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
     "node_modules/es-module-lexer": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
-      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.2.tgz",
+      "integrity": "sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==",
       "license": "MIT"
     },
     "node_modules/esbuild": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.7.tgz",
-      "integrity": "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.2.tgz",
+      "integrity": "sha512-HKVLS8dvII+xoKW9kmqxbRKrnWEXfJJr/FZhhJmiqIB0e053QNYFqOBouTMO/k5sID4MvCiUCvv8b9M4h32wIA==",
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -2462,53 +2566,32 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.27.7",
-        "@esbuild/android-arm": "0.27.7",
-        "@esbuild/android-arm64": "0.27.7",
-        "@esbuild/android-x64": "0.27.7",
-        "@esbuild/darwin-arm64": "0.27.7",
-        "@esbuild/darwin-x64": "0.27.7",
-        "@esbuild/freebsd-arm64": "0.27.7",
-        "@esbuild/freebsd-x64": "0.27.7",
-        "@esbuild/linux-arm": "0.27.7",
-        "@esbuild/linux-arm64": "0.27.7",
-        "@esbuild/linux-ia32": "0.27.7",
-        "@esbuild/linux-loong64": "0.27.7",
-        "@esbuild/linux-mips64el": "0.27.7",
-        "@esbuild/linux-ppc64": "0.27.7",
-        "@esbuild/linux-riscv64": "0.27.7",
-        "@esbuild/linux-s390x": "0.27.7",
-        "@esbuild/linux-x64": "0.27.7",
-        "@esbuild/netbsd-arm64": "0.27.7",
-        "@esbuild/netbsd-x64": "0.27.7",
-        "@esbuild/openbsd-arm64": "0.27.7",
-        "@esbuild/openbsd-x64": "0.27.7",
-        "@esbuild/openharmony-arm64": "0.27.7",
-        "@esbuild/sunos-x64": "0.27.7",
-        "@esbuild/win32-arm64": "0.27.7",
-        "@esbuild/win32-ia32": "0.27.7",
-        "@esbuild/win32-x64": "0.27.7"
-      }
-    },
-    "node_modules/escape-string-regexp": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
-      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/estree-walker": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0"
+        "@esbuild/aix-ppc64": "0.28.2",
+        "@esbuild/android-arm": "0.28.2",
+        "@esbuild/android-arm64": "0.28.2",
+        "@esbuild/android-x64": "0.28.2",
+        "@esbuild/darwin-arm64": "0.28.2",
+        "@esbuild/darwin-x64": "0.28.2",
+        "@esbuild/freebsd-arm64": "0.28.2",
+        "@esbuild/freebsd-x64": "0.28.2",
+        "@esbuild/linux-arm": "0.28.2",
+        "@esbuild/linux-arm64": "0.28.2",
+        "@esbuild/linux-ia32": "0.28.2",
+        "@esbuild/linux-loong64": "0.28.2",
+        "@esbuild/linux-mips64el": "0.28.2",
+        "@esbuild/linux-ppc64": "0.28.2",
+        "@esbuild/linux-riscv64": "0.28.2",
+        "@esbuild/linux-s390x": "0.28.2",
+        "@esbuild/linux-x64": "0.28.2",
+        "@esbuild/netbsd-arm64": "0.28.2",
+        "@esbuild/netbsd-x64": "0.28.2",
+        "@esbuild/openbsd-arm64": "0.28.2",
+        "@esbuild/openbsd-x64": "0.28.2",
+        "@esbuild/openharmony-arm64": "0.28.2",
+        "@esbuild/sunos-x64": "0.28.2",
+        "@esbuild/win32-arm64": "0.28.2",
+        "@esbuild/win32-ia32": "0.28.2",
+        "@esbuild/win32-x64": "0.28.2"
       }
     },
     "node_modules/eventemitter3": {
@@ -2540,6 +2623,30 @@
         "node": ">=8.6.0"
       }
     },
+    "node_modules/fast-string-truncated-width": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/fast-string-truncated-width/-/fast-string-truncated-width-3.0.3.tgz",
+      "integrity": "sha512-0jjjIEL6+0jag3l2XWWizO64/aZVtpiGE3t0Zgqxv0DPuxiMjvB3M24fCyhZUO4KomJQPj3LTSUnDP3GpdwC0g==",
+      "license": "MIT"
+    },
+    "node_modules/fast-string-width": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/fast-string-width/-/fast-string-width-3.0.2.tgz",
+      "integrity": "sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-string-truncated-width": "^3.0.2"
+      }
+    },
+    "node_modules/fast-wrap-ansi": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/fast-wrap-ansi/-/fast-wrap-ansi-0.2.2.tgz",
+      "integrity": "sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-string-width": "^3.0.2"
+      }
+    },
     "node_modules/fastq": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
@@ -2626,6 +2733,29 @@
         "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
       }
     },
+    "node_modules/find-process": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/find-process/-/find-process-2.1.1.tgz",
+      "integrity": "sha512-SrQDx3QhlmHM90iqn9rdjCQcw/T+WlpOkHFsjoRgB+zTpDfltNA1VSNYeYELwhUTJy12UFxqjWhmhOrJc+o4sA==",
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "~4.1.2",
+        "commander": "^14.0.3",
+        "loglevel": "^1.9.2"
+      },
+      "bin": {
+        "find-process": "dist/cjs/bin/find-process.js"
+      }
+    },
+    "node_modules/find-process/node_modules/commander": {
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.3.tgz",
+      "integrity": "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -2699,16 +2829,19 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "node_modules/get-east-asian-width": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.6.0.tgz",
-      "integrity": "sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==",
+    "node_modules/get-tsconfig": {
+      "version": "5.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-5.0.0-beta.4.tgz",
+      "integrity": "sha512-7nF7C9fIPFEMHgEMEfgIlO9wDdZ8CyHw27rWciFZfHvHDReIiPhsYuzPRXsfvBCqFy1l8RRyyWV7QLM+ZhUJsQ==",
       "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=20.20.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
     },
     "node_modules/gh-pages": {
@@ -2808,93 +2941,13 @@
         "uncrypto": "^0.1.3"
       }
     },
-    "node_modules/hast-util-from-html": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/hast-util-from-html/-/hast-util-from-html-2.0.3.tgz",
-      "integrity": "sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "devlop": "^1.1.0",
-        "hast-util-from-parse5": "^8.0.0",
-        "parse5": "^7.0.0",
-        "vfile": "^6.0.0",
-        "vfile-message": "^4.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/hast-util-from-parse5": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.3.tgz",
-      "integrity": "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "@types/unist": "^3.0.0",
-        "devlop": "^1.0.0",
-        "hastscript": "^9.0.0",
-        "property-information": "^7.0.0",
-        "vfile": "^6.0.0",
-        "vfile-location": "^5.0.0",
-        "web-namespaces": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/hast-util-is-element": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
-      "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/hast-util-parse-selector": {
+    "node_modules/has-flag": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
-      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/hast-util-raw": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.1.0.tgz",
-      "integrity": "sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "@types/unist": "^3.0.0",
-        "@ungap/structured-clone": "^1.0.0",
-        "hast-util-from-parse5": "^8.0.0",
-        "hast-util-to-parse5": "^8.0.0",
-        "html-void-elements": "^3.0.0",
-        "mdast-util-to-hast": "^13.0.0",
-        "parse5": "^7.0.0",
-        "unist-util-position": "^5.0.0",
-        "unist-util-visit": "^5.0.0",
-        "vfile": "^6.0.0",
-        "web-namespaces": "^2.0.0",
-        "zwitch": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+      "engines": {
+        "node": ">=8"
       }
     },
     "node_modules/hast-util-to-html": {
@@ -2920,41 +2973,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/hast-util-to-parse5": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.1.tgz",
-      "integrity": "sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "comma-separated-tokens": "^2.0.0",
-        "devlop": "^1.0.0",
-        "property-information": "^7.0.0",
-        "space-separated-tokens": "^2.0.0",
-        "web-namespaces": "^2.0.0",
-        "zwitch": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/hast-util-to-text": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
-      "integrity": "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "@types/unist": "^3.0.0",
-        "hast-util-is-element": "^3.0.0",
-        "unist-util-find-after": "^5.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/hast-util-whitespace": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
@@ -2968,23 +2986,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/hastscript": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.1.tgz",
-      "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "comma-separated-tokens": "^2.0.0",
-        "hast-util-parse-selector": "^4.0.0",
-        "property-information": "^7.0.0",
-        "space-separated-tokens": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/html-escaper": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz",
@@ -3017,16 +3018,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/import-meta-resolve": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz",
-      "integrity": "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/iron-webcrypto": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/iron-webcrypto/-/iron-webcrypto-1.2.1.tgz",
@@ -3037,15 +3028,15 @@
       }
     },
     "node_modules/is-docker": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
-      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-4.0.0.tgz",
+      "integrity": "sha512-LHE+wROyG/Y/0ZnbktRCoTix2c1RhgWaZraMZ8o1Q7zCh0VSrICJQO5oqIIISrcSBtrXv0o233w1IYwsWCjTzA==",
       "license": "MIT",
       "bin": {
         "is-docker": "cli.js"
       },
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+        "node": ">=20"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -3061,15 +3052,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -3083,29 +3065,11 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-inside-container": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
-      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
-      "license": "MIT",
-      "dependencies": {
-        "is-docker": "^3.0.0"
-      },
-      "bin": {
-        "is-inside-container": "cli.js"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -3123,25 +3087,10 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/is-wsl": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.1.tgz",
-      "integrity": "sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==",
-      "license": "MIT",
-      "dependencies": {
-        "is-inside-container": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/js-yaml": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.2.0.tgz",
-      "integrity": "sha512-ePWsvanv0DWuDRsW8dnt+R4jQ31SCRCQ7hhNcPXZPsoBZiemuZNYGf7adZdqX2D86j6rvKp3RpCxVTSb8WQlOw==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.1.tgz",
+      "integrity": "sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==",
       "funding": [
         {
           "type": "github",
@@ -3160,6 +3109,12 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsonc-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz",
+      "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==",
+      "license": "MIT"
+    },
     "node_modules/jsonfile": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.1.tgz",
@@ -3173,21 +3128,261 @@
         "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/kleur": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
-      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/leaflet": {
       "version": "1.9.4",
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
       "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
       "license": "BSD-2-Clause"
     },
+    "node_modules/lightningcss": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz",
+      "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.33.0",
+        "lightningcss-darwin-arm64": "1.33.0",
+        "lightningcss-darwin-x64": "1.33.0",
+        "lightningcss-freebsd-x64": "1.33.0",
+        "lightningcss-linux-arm-gnueabihf": "1.33.0",
+        "lightningcss-linux-arm64-gnu": "1.33.0",
+        "lightningcss-linux-arm64-musl": "1.33.0",
+        "lightningcss-linux-x64-gnu": "1.33.0",
+        "lightningcss-linux-x64-musl": "1.33.0",
+        "lightningcss-win32-arm64-msvc": "1.33.0",
+        "lightningcss-win32-x64-msvc": "1.33.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz",
+      "integrity": "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz",
+      "integrity": "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz",
+      "integrity": "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz",
+      "integrity": "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz",
+      "integrity": "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz",
+      "integrity": "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz",
+      "integrity": "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz",
+      "integrity": "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz",
+      "integrity": "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz",
+      "integrity": "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz",
+      "integrity": "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -3201,14 +3396,17 @@
         "node": ">=8"
       }
     },
-    "node_modules/longest-streak": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
-      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+    "node_modules/loglevel": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.2.tgz",
+      "integrity": "sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==",
       "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      },
       "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
+        "type": "tidelift",
+        "url": "https://tidelift.com/funding/github/npm/loglevel"
       }
     },
     "node_modules/lru-cache": {
@@ -3221,9 +3419,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.21",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
-      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-1.2.2.tgz",
+      "integrity": "sha512-veT/+7iXrXzT39XnEN4lOxtNl72dMgJ8Lp+5Bd6YcMSWpb0n0MjBM8Uuooi6jgJr8dhUW2swQgBmoZVMni5SVg==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -3266,2761 +3464,1311 @@
         "semver": "bin/semver.js"
       }
     },
-    "node_modules/markdown-table": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
-      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/mdast-util-definitions": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-6.0.0.tgz",
-      "integrity": "sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==",
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
       "license": "MIT",
       "dependencies": {
+        "@types/hast": "^3.0.0",
         "@types/mdast": "^4.0.0",
-        "@types/unist": "^3.0.0",
-        "unist-util-visit": "^5.0.0"
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/mdast-util-find-and-replace": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
-      "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "license": "CC0-1.0"
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "escape-string-regexp": "^5.0.0",
-        "unist-util-is": "^6.0.0",
-        "unist-util-visit-parents": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+      "engines": {
+        "node": ">= 8"
       }
     },
-    "node_modules/mdast-util-from-markdown": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.3.tgz",
-      "integrity": "sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==",
+    "node_modules/micromark-util-character": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "@types/unist": "^3.0.0",
-        "decode-named-character-reference": "^1.0.0",
-        "devlop": "^1.0.0",
-        "mdast-util-to-string": "^4.0.0",
-        "micromark": "^4.0.0",
-        "micromark-util-decode-numeric-character-reference": "^2.0.0",
-        "micromark-util-decode-string": "^2.0.0",
-        "micromark-util-normalize-identifier": "^2.0.0",
         "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0",
-        "unist-util-stringify-position": "^4.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/mdast-util-gfm": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
-      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
-        "mdast-util-from-markdown": "^2.0.0",
-        "mdast-util-gfm-autolink-literal": "^2.0.0",
-        "mdast-util-gfm-footnote": "^2.0.0",
-        "mdast-util-gfm-strikethrough": "^2.0.0",
-        "mdast-util-gfm-table": "^2.0.0",
-        "mdast-util-gfm-task-list-item": "^2.0.0",
-        "mdast-util-to-markdown": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
       }
     },
-    "node_modules/mdast-util-gfm-autolink-literal": {
+    "node_modules/micromark-util-symbol": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
-      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "ccount": "^2.0.0",
-        "devlop": "^1.0.0",
-        "mdast-util-find-and-replace": "^3.0.0",
-        "micromark-util-character": "^2.0.0"
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+      "engines": {
+        "node": ">=8.6"
       }
     },
-    "node_modules/mdast-util-gfm-footnote": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
-      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "devlop": "^1.1.0",
-        "mdast-util-from-markdown": "^2.0.0",
-        "mdast-util-to-markdown": "^2.0.0",
-        "micromark-util-normalize-identifier": "^2.0.0"
+      "engines": {
+        "node": ">=8.6"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/mdast-util-gfm-strikethrough": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
-      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
       "license": "MIT",
-      "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "mdast-util-from-markdown": "^2.0.0",
-        "mdast-util-to-markdown": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+      "engines": {
+        "node": ">=10"
       }
     },
-    "node_modules/mdast-util-gfm-table": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
-      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+    "node_modules/nanoid": {
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "license": "MIT",
-      "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "devlop": "^1.0.0",
-        "markdown-table": "^3.0.0",
-        "mdast-util-from-markdown": "^2.0.0",
-        "mdast-util-to-markdown": "^2.0.0"
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/mdast-util-gfm-task-list-item": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
-      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+    "node_modules/neotraverse": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/neotraverse/-/neotraverse-1.0.1.tgz",
+      "integrity": "sha512-WmmLty1YWwJl9yZi77v2dVIV6X2kuYV8YYBI/G3LWGKdGHmHUvL1z7FW0iDvEvGAwNEoc5x1tOOOyDnf5jJw/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/nlcst-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/nlcst-to-string/-/nlcst-to-string-4.0.0.tgz",
+      "integrity": "sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==",
       "license": "MIT",
       "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "devlop": "^1.0.0",
-        "mdast-util-from-markdown": "^2.0.0",
-        "mdast-util-to-markdown": "^2.0.0"
+        "@types/nlcst": "^2.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/mdast-util-phrasing": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
-      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+    "node_modules/node-fetch-native": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.7.tgz",
+      "integrity": "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==",
+      "license": "MIT"
+    },
+    "node_modules/node-mock-http": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/node-mock-http/-/node-mock-http-1.0.4.tgz",
+      "integrity": "sha512-8DY+kFsDkNXy1sJglUfuODx1/opAGJGyrTuFqEoN90oRc2Vk0ZbD4K2qmKXBBEhZQzdKHIVfEJpDU8Ak2NJEvQ==",
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "unist-util-is": "^6.0.0"
+        "boolbase": "^1.0.0"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
-    "node_modules/mdast-util-to-hast": {
-      "version": "13.2.1",
-      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
-      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+    "node_modules/obug": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.4.tgz",
+      "integrity": "sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==",
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/ofetch": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/ofetch/-/ofetch-1.5.1.tgz",
+      "integrity": "sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==",
       "license": "MIT",
       "dependencies": {
-        "@types/hast": "^3.0.0",
-        "@types/mdast": "^4.0.0",
-        "@ungap/structured-clone": "^1.0.0",
-        "devlop": "^1.0.0",
-        "micromark-util-sanitize-uri": "^2.0.0",
-        "trim-lines": "^3.0.0",
-        "unist-util-position": "^5.0.0",
-        "unist-util-visit": "^5.0.0",
-        "vfile": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "destr": "^2.0.5",
+        "node-fetch-native": "^1.6.7",
+        "ufo": "^1.6.1"
       }
     },
-    "node_modules/mdast-util-to-markdown": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
-      "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+    "node_modules/ohash": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.12.tgz",
+      "integrity": "sha512-65S/5gk9YSsaRjcyf7Nfa6h/d3E8/1gslpXfI4W7Dxn/oap8IKRuNT5VXkLQ1YFKIEg4apRY4Pj6aiwFzrDdmw==",
+      "license": "MIT"
+    },
+    "node_modules/oniguruma-parser": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.2.tgz",
+      "integrity": "sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==",
+      "license": "MIT"
+    },
+    "node_modules/oniguruma-to-es": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.6.tgz",
+      "integrity": "sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==",
       "license": "MIT",
       "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "@types/unist": "^3.0.0",
-        "longest-streak": "^3.0.0",
-        "mdast-util-phrasing": "^4.0.0",
-        "mdast-util-to-string": "^4.0.0",
-        "micromark-util-classify-character": "^2.0.0",
-        "micromark-util-decode-string": "^2.0.0",
-        "unist-util-visit": "^5.0.0",
-        "zwitch": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "oniguruma-parser": "^0.12.2",
+        "regex": "^6.1.0",
+        "regex-recursion": "^6.0.2"
       }
     },
-    "node_modules/mdast-util-to-string": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
-      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+    "node_modules/p-limit": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-7.3.1.tgz",
+      "integrity": "sha512-0trZaiG7Y7kN/Egy9a8j47t9osC0Tch4PaIWd9yGF6bvmlk7muExRvGNYb8sXBwEKMoNKsbNN9P8EefuQekE4Q==",
       "license": "MIT",
       "dependencies": {
-        "@types/mdast": "^4.0.0"
+        "yocto-queue": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=20"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/mdn-data": {
-      "version": "2.27.1",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
-      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
-      "license": "CC0-1.0"
-    },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
       "engines": {
-        "node": ">= 8"
+        "node": ">=8"
       }
     },
-    "node_modules/micromark": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
-      "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@types/debug": "^4.0.0",
-        "debug": "^4.0.0",
-        "decode-named-character-reference": "^1.0.0",
-        "devlop": "^1.0.0",
-        "micromark-core-commonmark": "^2.0.0",
-        "micromark-factory-space": "^2.0.0",
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-chunked": "^2.0.0",
-        "micromark-util-combine-extensions": "^2.0.0",
-        "micromark-util-decode-numeric-character-reference": "^2.0.0",
-        "micromark-util-encode": "^2.0.0",
-        "micromark-util-normalize-identifier": "^2.0.0",
-        "micromark-util-resolve-all": "^2.0.0",
-        "micromark-util-sanitize-uri": "^2.0.0",
-        "micromark-util-subtokenize": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
-      }
-    },
-    "node_modules/micromark-core-commonmark": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz",
-      "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
+    "node_modules/p-locate/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "decode-named-character-reference": "^1.0.0",
-        "devlop": "^1.0.0",
-        "micromark-factory-destination": "^2.0.0",
-        "micromark-factory-label": "^2.0.0",
-        "micromark-factory-space": "^2.0.0",
-        "micromark-factory-title": "^2.0.0",
-        "micromark-factory-whitespace": "^2.0.0",
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-chunked": "^2.0.0",
-        "micromark-util-classify-character": "^2.0.0",
-        "micromark-util-html-tag-name": "^2.0.0",
-        "micromark-util-normalize-identifier": "^2.0.0",
-        "micromark-util-resolve-all": "^2.0.0",
-        "micromark-util-subtokenize": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/micromark-extension-gfm": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
-      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+    "node_modules/p-queue": {
+      "version": "9.3.3",
+      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-9.3.3.tgz",
+      "integrity": "sha512-NXAOdnEe5FsZJfT4oK84lE1Y5cFFdWlRuOo5tww8DyNMxyRXwn39fIkUtNLKppcPC+UYU/bXujNCUGDv01y7CA==",
       "license": "MIT",
       "dependencies": {
-        "micromark-extension-gfm-autolink-literal": "^2.0.0",
-        "micromark-extension-gfm-footnote": "^2.0.0",
-        "micromark-extension-gfm-strikethrough": "^2.0.0",
-        "micromark-extension-gfm-table": "^2.0.0",
-        "micromark-extension-gfm-tagfilter": "^2.0.0",
-        "micromark-extension-gfm-task-list-item": "^2.0.0",
-        "micromark-util-combine-extensions": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
+        "eventemitter3": "^5.0.4",
+        "p-timeout": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=20"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/micromark-extension-gfm-autolink-literal": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
-      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+    "node_modules/p-timeout": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-7.0.1.tgz",
+      "integrity": "sha512-AxTM2wDGORHGEkPCt8yqxOTMgpfbEHqF51f/5fJCmwFC3C/zNcGT63SymH2ttOAaiIws2zVg4+izQCjrakcwHg==",
       "license": "MIT",
-      "dependencies": {
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-sanitize-uri": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
+      "engines": {
+        "node": ">=20"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/micromark-extension-gfm-footnote": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
-      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "devlop": "^1.0.0",
-        "micromark-core-commonmark": "^2.0.0",
-        "micromark-factory-space": "^2.0.0",
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-normalize-identifier": "^2.0.0",
-        "micromark-util-sanitize-uri": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/micromark-extension-gfm-strikethrough": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
-      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+    "node_modules/package-manager-detector": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.6.0.tgz",
+      "integrity": "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==",
+      "license": "MIT"
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "devlop": "^1.0.0",
-        "micromark-util-chunked": "^2.0.0",
-        "micromark-util-classify-character": "^2.0.0",
-        "micromark-util-resolve-all": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/micromark-extension-gfm-table": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
-      "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "devlop": "^1.0.0",
-        "micromark-factory-space": "^2.0.0",
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/micromark-extension-gfm-tagfilter": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
-      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+    "node_modules/piccolore": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/piccolore/-/piccolore-0.1.3.tgz",
+      "integrity": "sha512-o8bTeDWjE086iwKrROaDf31K0qC/BENdm15/uH9usSC/uZjJOKb2YGiVHfLY4GhwsERiPI1jmwI2XrA7ACOxVw==",
+      "license": "ISC"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz",
+      "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==",
       "license": "MIT",
-      "dependencies": {
-        "micromark-util-types": "^2.0.0"
+      "engines": {
+        "node": ">=12"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/micromark-extension-gfm-task-list-item": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
-      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "devlop": "^1.0.0",
-        "micromark-factory-space": "^2.0.0",
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
+        "find-up": "^4.0.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/micromark-factory-destination": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
-      "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==",
+    "node_modules/postcss": {
+      "version": "8.5.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
+      "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==",
       "funding": [
         {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
         },
         {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "license": "MIT",
       "dependencies": {
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
+        "nanoid": "^3.3.17",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/micromark-factory-label": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz",
-      "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
       "license": "MIT",
-      "dependencies": {
-        "devlop": "^1.0.0",
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/micromark-factory-space": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
-      "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
+    "node_modules/process-ancestry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/process-ancestry/-/process-ancestry-0.1.0.tgz",
+      "integrity": "sha512-tGqJW/UnclpYASFcM6Xh8D8l/BMtaQ9+CSG0vlJSJTcdMM4lDRv4c6H0Pdcsfted+bVczdYSfk2fdukg2gQkZg==",
       "license": "MIT",
-      "dependencies": {
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
+      "engines": {
+        "node": ">=18.0.0"
       }
     },
-    "node_modules/micromark-factory-title": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz",
-      "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
+    "node_modules/property-information": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.2.0.tgz",
+      "integrity": "sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==",
       "license": "MIT",
-      "dependencies": {
-        "micromark-factory-space": "^2.0.0",
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/micromark-factory-whitespace": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz",
-      "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==",
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
       "funding": [
         {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
         },
         {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "micromark-factory-space": "^2.0.0",
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
-      }
-    },
-    "node_modules/micromark-util-character": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
-      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
-      }
-    },
-    "node_modules/micromark-util-chunked": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz",
-      "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "micromark-util-symbol": "^2.0.0"
-      }
-    },
-    "node_modules/micromark-util-classify-character": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz",
-      "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
-      }
-    },
-    "node_modules/micromark-util-combine-extensions": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz",
-      "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "micromark-util-chunked": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
-      }
-    },
-    "node_modules/micromark-util-decode-numeric-character-reference": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz",
-      "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "micromark-util-symbol": "^2.0.0"
-      }
-    },
-    "node_modules/micromark-util-decode-string": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz",
-      "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "decode-named-character-reference": "^1.0.0",
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-decode-numeric-character-reference": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0"
-      }
-    },
-    "node_modules/micromark-util-encode": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
-      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/micromark-util-html-tag-name": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
-      "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/micromark-util-normalize-identifier": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz",
-      "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "micromark-util-symbol": "^2.0.0"
-      }
-    },
-    "node_modules/micromark-util-resolve-all": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz",
-      "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "micromark-util-types": "^2.0.0"
-      }
-    },
-    "node_modules/micromark-util-sanitize-uri": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
-      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-encode": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0"
-      }
-    },
-    "node_modules/micromark-util-subtokenize": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz",
-      "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "devlop": "^1.0.0",
-        "micromark-util-chunked": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
-      }
-    },
-    "node_modules/micromark-util-symbol": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
-      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
         },
         {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
+          "type": "consulting",
+          "url": "https://feross.org/support"
         }
       ],
       "license": "MIT"
     },
-    "node_modules/micromark-util-types": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
-      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
+    "node_modules/radix3": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
+      "integrity": "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==",
       "license": "MIT"
     },
-    "node_modules/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
+    "node_modules/readdirp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
       "license": "MIT",
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/micromatch/node_modules/picomatch": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
-      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/mrmime": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
-      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/nanoid": {
-      "version": "3.3.12",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
-      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
-    "node_modules/neotraverse": {
-      "version": "0.6.18",
-      "resolved": "https://registry.npmjs.org/neotraverse/-/neotraverse-0.6.18.tgz",
-      "integrity": "sha512-Z4SmBUweYa09+o6pG+eASabEpP6QkQ70yHj351pQoEXIs8uHbaU2DWVmzBANKgflPa47A50PtB2+NgRpQvr7vA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/nlcst-to-string": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/nlcst-to-string/-/nlcst-to-string-4.0.0.tgz",
-      "integrity": "sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/nlcst": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/node-fetch-native": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.7.tgz",
-      "integrity": "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==",
-      "license": "MIT"
-    },
-    "node_modules/node-mock-http": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/node-mock-http/-/node-mock-http-1.0.4.tgz",
-      "integrity": "sha512-8DY+kFsDkNXy1sJglUfuODx1/opAGJGyrTuFqEoN90oRc2Vk0ZbD4K2qmKXBBEhZQzdKHIVfEJpDU8Ak2NJEvQ==",
-      "license": "MIT"
-    },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/nth-check": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
-      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "boolbase": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/nth-check?sponsor=1"
-      }
-    },
-    "node_modules/ofetch": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/ofetch/-/ofetch-1.5.1.tgz",
-      "integrity": "sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==",
-      "license": "MIT",
-      "dependencies": {
-        "destr": "^2.0.5",
-        "node-fetch-native": "^1.6.7",
-        "ufo": "^1.6.1"
-      }
-    },
-    "node_modules/ohash": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
-      "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
-      "license": "MIT"
-    },
-    "node_modules/oniguruma-parser": {
-      "version": "0.12.2",
-      "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.2.tgz",
-      "integrity": "sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==",
-      "license": "MIT"
-    },
-    "node_modules/oniguruma-to-es": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.6.tgz",
-      "integrity": "sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==",
-      "license": "MIT",
-      "dependencies": {
-        "oniguruma-parser": "^0.12.2",
-        "regex": "^6.1.0",
-        "regex-recursion": "^6.0.2"
-      }
-    },
-    "node_modules/p-limit": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-6.2.0.tgz",
-      "integrity": "sha512-kuUqqHNUqoIWp/c467RI4X6mmyuojY5jGutNU0wVTmEOOfcuwLqyMVoAi9MKi2Ak+5i9+nhmrK4ufZE8069kHA==",
-      "license": "MIT",
-      "dependencies": {
-        "yocto-queue": "^1.1.1"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/p-locate/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-queue": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-8.1.1.tgz",
-      "integrity": "sha512-aNZ+VfjobsWryoiPnEApGGmf5WmNsCo9xu8dfaYamG5qaLP7ClhLN6NgsFe6SwJ2UbLEBK5dv9x8Mn5+RVhMWQ==",
-      "license": "MIT",
-      "dependencies": {
-        "eventemitter3": "^5.0.1",
-        "p-timeout": "^6.1.2"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-timeout": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-6.1.4.tgz",
-      "integrity": "sha512-MyIV3ZA/PmyBN/ud8vV9XzwTrNtR4jFrObymZYnZqMmW0zA8Z17vnT0rBgFE/TlohB+YCHqXMgZzb3Csp49vqg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/package-manager-detector": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.6.0.tgz",
-      "integrity": "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==",
-      "license": "MIT"
-    },
-    "node_modules/parse-latin": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/parse-latin/-/parse-latin-7.0.0.tgz",
-      "integrity": "sha512-mhHgobPPua5kZ98EF4HWiH167JWBfl4pvAIXXdbaVohtK7a6YBOy56kvhCqduqyo/f3yrHFWmqmiMg/BkBkYYQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/nlcst": "^2.0.0",
-        "@types/unist": "^3.0.0",
-        "nlcst-to-string": "^4.0.0",
-        "unist-util-modify-children": "^4.0.0",
-        "unist-util-visit-children": "^3.0.0",
-        "vfile": "^6.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/parse5": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
-      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
-      "license": "MIT",
-      "dependencies": {
-        "entities": "^6.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
-      }
-    },
-    "node_modules/path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/piccolore": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/piccolore/-/piccolore-0.1.3.tgz",
-      "integrity": "sha512-o8bTeDWjE086iwKrROaDf31K0qC/BENdm15/uH9usSC/uZjJOKb2YGiVHfLY4GhwsERiPI1jmwI2XrA7ACOxVw==",
-      "license": "ISC"
-    },
-    "node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "license": "ISC"
-    },
-    "node_modules/picomatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
-      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/pkg-dir": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "find-up": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/postcss": {
-      "version": "8.5.15",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
-      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "nanoid": "^3.3.12",
-        "picocolors": "^1.1.1",
-        "source-map-js": "^1.2.1"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/prismjs": {
-      "version": "1.30.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
-      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/prompts": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
-      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
-      "license": "MIT",
-      "dependencies": {
-        "kleur": "^3.0.3",
-        "sisteransi": "^1.0.5"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/property-information": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.2.0.tgz",
-      "integrity": "sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/radix3": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
-      "integrity": "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==",
-      "license": "MIT"
-    },
-    "node_modules/readdirp": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
-      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 20.19.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/regex/-/regex-6.1.0.tgz",
-      "integrity": "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==",
-      "license": "MIT",
-      "dependencies": {
-        "regex-utilities": "^2.3.0"
-      }
-    },
-    "node_modules/regex-recursion": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz",
-      "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==",
-      "license": "MIT",
-      "dependencies": {
-        "regex-utilities": "^2.3.0"
-      }
-    },
-    "node_modules/regex-utilities": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz",
-      "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==",
-      "license": "MIT"
-    },
-    "node_modules/rehype": {
-      "version": "13.0.2",
-      "resolved": "https://registry.npmjs.org/rehype/-/rehype-13.0.2.tgz",
-      "integrity": "sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "rehype-parse": "^9.0.0",
-        "rehype-stringify": "^10.0.0",
-        "unified": "^11.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/rehype-parse": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/rehype-parse/-/rehype-parse-9.0.1.tgz",
-      "integrity": "sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "hast-util-from-html": "^2.0.0",
-        "unified": "^11.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/rehype-raw": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
-      "integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "hast-util-raw": "^9.0.0",
-        "vfile": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/rehype-stringify": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-10.0.1.tgz",
-      "integrity": "sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "hast-util-to-html": "^9.0.0",
-        "unified": "^11.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/remark-gfm": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
-      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "mdast-util-gfm": "^3.0.0",
-        "micromark-extension-gfm": "^3.0.0",
-        "remark-parse": "^11.0.0",
-        "remark-stringify": "^11.0.0",
-        "unified": "^11.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/remark-parse": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
-      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "mdast-util-from-markdown": "^2.0.0",
-        "micromark-util-types": "^2.0.0",
-        "unified": "^11.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/remark-rehype": {
-      "version": "11.1.2",
-      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
-      "integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "@types/mdast": "^4.0.0",
-        "mdast-util-to-hast": "^13.0.0",
-        "unified": "^11.0.0",
-        "vfile": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/remark-smartypants": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/remark-smartypants/-/remark-smartypants-3.0.2.tgz",
-      "integrity": "sha512-ILTWeOriIluwEvPjv67v7Blgrcx+LZOkAUVtKI3putuhlZm84FnqDORNXPPm+HY3NdZOMhyDwZ1E+eZB/Df5dA==",
-      "license": "MIT",
-      "dependencies": {
-        "retext": "^9.0.0",
-        "retext-smartypants": "^6.0.0",
-        "unified": "^11.0.4",
-        "unist-util-visit": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=16.0.0"
-      }
-    },
-    "node_modules/remark-stringify": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
-      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "mdast-util-to-markdown": "^2.0.0",
-        "unified": "^11.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/retext": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/retext/-/retext-9.0.0.tgz",
-      "integrity": "sha512-sbMDcpHCNjvlheSgMfEcVrZko3cDzdbe1x/e7G66dFp0Ff7Mldvi2uv6JkJQzdRcvLYE8CA8Oe8siQx8ZOgTcA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/nlcst": "^2.0.0",
-        "retext-latin": "^4.0.0",
-        "retext-stringify": "^4.0.0",
-        "unified": "^11.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/retext-latin": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/retext-latin/-/retext-latin-4.0.0.tgz",
-      "integrity": "sha512-hv9woG7Fy0M9IlRQloq/N6atV82NxLGveq+3H2WOi79dtIYWN8OaxogDm77f8YnVXJL2VD3bbqowu5E3EMhBYA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/nlcst": "^2.0.0",
-        "parse-latin": "^7.0.0",
-        "unified": "^11.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/retext-smartypants": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/retext-smartypants/-/retext-smartypants-6.2.0.tgz",
-      "integrity": "sha512-kk0jOU7+zGv//kfjXEBjdIryL1Acl4i9XNkHxtM7Tm5lFiCog576fjNC9hjoR7LTKQ0DsPWy09JummSsH1uqfQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/nlcst": "^2.0.0",
-        "nlcst-to-string": "^4.0.0",
-        "unist-util-visit": "^5.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/retext-stringify": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/retext-stringify/-/retext-stringify-4.0.0.tgz",
-      "integrity": "sha512-rtfN/0o8kL1e+78+uxPTqu1Klt0yPzKuQ2BfWwwfgIUSayyzxpM1PJzkKt4V8803uB9qSy32MvI7Xep9khTpiA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/nlcst": "^2.0.0",
-        "nlcst-to-string": "^4.0.0",
-        "unified": "^11.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/reusify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
-      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/rollup": {
-      "version": "4.61.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.61.1.tgz",
-      "integrity": "sha512-I4KW6iuRpuu2uHBLraZ1wNZe0DP7lnRha+VJ9tNaYVaVgKhW0aI3h4RYnoRPeql0flHm/Co55b7snEDcOfOJrA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "1.0.9"
-      },
-      "bin": {
-        "rollup": "dist/bin/rollup"
-      },
-      "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=8.0.0"
-      },
-      "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.61.1",
-        "@rollup/rollup-android-arm64": "4.61.1",
-        "@rollup/rollup-darwin-arm64": "4.61.1",
-        "@rollup/rollup-darwin-x64": "4.61.1",
-        "@rollup/rollup-freebsd-arm64": "4.61.1",
-        "@rollup/rollup-freebsd-x64": "4.61.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.61.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.61.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.61.1",
-        "@rollup/rollup-linux-arm64-musl": "4.61.1",
-        "@rollup/rollup-linux-loong64-gnu": "4.61.1",
-        "@rollup/rollup-linux-loong64-musl": "4.61.1",
-        "@rollup/rollup-linux-ppc64-gnu": "4.61.1",
-        "@rollup/rollup-linux-ppc64-musl": "4.61.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.61.1",
-        "@rollup/rollup-linux-riscv64-musl": "4.61.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.61.1",
-        "@rollup/rollup-linux-x64-gnu": "4.61.1",
-        "@rollup/rollup-linux-x64-musl": "4.61.1",
-        "@rollup/rollup-openbsd-x64": "4.61.1",
-        "@rollup/rollup-openharmony-arm64": "4.61.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.61.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.61.1",
-        "@rollup/rollup-win32-x64-gnu": "4.61.1",
-        "@rollup/rollup-win32-x64-msvc": "4.61.1",
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
-    "node_modules/sax": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
-      "integrity": "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==",
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=11.0.0"
-      }
-    },
-    "node_modules/semver": {
-      "version": "7.8.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.2.tgz",
-      "integrity": "sha512-c8jsqUZm3omBOI66G90z1Dyw5z622G8oLG+omfsHBJf3CWQTlOcwOjvOG6wtiNfW6anKm/eA39LMwMtMez2TiQ==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/sharp": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
-      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
-      "hasInstallScript": true,
-      "license": "Apache-2.0",
-      "optional": true,
-      "dependencies": {
-        "@img/colour": "^1.0.0",
-        "detect-libc": "^2.1.2",
-        "semver": "^7.7.3"
-      },
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.34.5",
-        "@img/sharp-darwin-x64": "0.34.5",
-        "@img/sharp-libvips-darwin-arm64": "1.2.4",
-        "@img/sharp-libvips-darwin-x64": "1.2.4",
-        "@img/sharp-libvips-linux-arm": "1.2.4",
-        "@img/sharp-libvips-linux-arm64": "1.2.4",
-        "@img/sharp-libvips-linux-ppc64": "1.2.4",
-        "@img/sharp-libvips-linux-riscv64": "1.2.4",
-        "@img/sharp-libvips-linux-s390x": "1.2.4",
-        "@img/sharp-libvips-linux-x64": "1.2.4",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
-        "@img/sharp-linux-arm": "0.34.5",
-        "@img/sharp-linux-arm64": "0.34.5",
-        "@img/sharp-linux-ppc64": "0.34.5",
-        "@img/sharp-linux-riscv64": "0.34.5",
-        "@img/sharp-linux-s390x": "0.34.5",
-        "@img/sharp-linux-x64": "0.34.5",
-        "@img/sharp-linuxmusl-arm64": "0.34.5",
-        "@img/sharp-linuxmusl-x64": "0.34.5",
-        "@img/sharp-wasm32": "0.34.5",
-        "@img/sharp-win32-arm64": "0.34.5",
-        "@img/sharp-win32-ia32": "0.34.5",
-        "@img/sharp-win32-x64": "0.34.5"
-      }
-    },
-    "node_modules/shiki": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.23.0.tgz",
-      "integrity": "sha512-55Dj73uq9ZXL5zyeRPzHQsK7Nbyt6Y10k5s7OjuFZGMhpp4r/rsLBH0o/0fstIzX1Lep9VxefWljK/SKCzygIA==",
-      "license": "MIT",
-      "dependencies": {
-        "@shikijs/core": "3.23.0",
-        "@shikijs/engine-javascript": "3.23.0",
-        "@shikijs/engine-oniguruma": "3.23.0",
-        "@shikijs/langs": "3.23.0",
-        "@shikijs/themes": "3.23.0",
-        "@shikijs/types": "3.23.0",
-        "@shikijs/vscode-textmate": "^10.0.2",
-        "@types/hast": "^3.0.4"
-      }
-    },
-    "node_modules/sisteransi": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
-      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
-      "license": "MIT"
-    },
-    "node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/smol-toml": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.6.1.tgz",
-      "integrity": "sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">= 18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/cyyynthia"
-      }
-    },
-    "node_modules/source-map-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/space-separated-tokens": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
-      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/string-width": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
-      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^10.3.0",
-        "get-east-asian-width": "^1.0.0",
-        "strip-ansi": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/stringify-entities": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
-      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
-      "license": "MIT",
-      "dependencies": {
-        "character-entities-html4": "^2.0.0",
-        "character-entities-legacy": "^3.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/strip-ansi": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
-      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.2.2"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/strip-outer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
-      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "escape-string-regexp": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/strip-outer/node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/svgo": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-4.0.1.tgz",
-      "integrity": "sha512-XDpWUOPC6FEibaLzjfe0ucaV0YrOjYotGJO1WpF0Zd+n6ZGEQUsSugaoLq9QkEZtAfQIxT42UChcssDVPP3+/w==",
-      "license": "MIT",
-      "dependencies": {
-        "commander": "^11.1.0",
-        "css-select": "^5.1.0",
-        "css-tree": "^3.0.1",
-        "css-what": "^6.1.0",
-        "csso": "^5.0.5",
-        "picocolors": "^1.1.1",
-        "sax": "^1.5.0"
-      },
-      "bin": {
-        "svgo": "bin/svgo.js"
-      },
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/svgo"
-      }
-    },
-    "node_modules/tiny-inflate": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
-      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
-      "license": "MIT"
-    },
-    "node_modules/tinyexec": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.2.4.tgz",
-      "integrity": "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/tinyglobby": {
-      "version": "0.2.17",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
-      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
-      "license": "MIT",
-      "dependencies": {
-        "fdir": "^6.5.0",
-        "picomatch": "^4.0.4"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/SuperchupuDev"
-      }
-    },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/trim-lines": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
-      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/trim-repeated": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
-      "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "escape-string-regexp": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/trim-repeated/node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/trough": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
-      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/tsconfck": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.6.tgz",
-      "integrity": "sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==",
-      "license": "MIT",
-      "bin": {
-        "tsconfck": "bin/tsconfck.js"
-      },
-      "engines": {
-        "node": "^18 || >=20"
-      },
-      "peerDependencies": {
-        "typescript": "^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/tslib": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD",
-      "optional": true
-    },
-    "node_modules/type-fest": {
-      "version": "4.41.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
-      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
-      "license": "(MIT OR CC0-1.0)",
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/typescript": {
-      "version": "5.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
-      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "license": "Apache-2.0",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
       "engines": {
-        "node": ">=14.17"
-      }
-    },
-    "node_modules/ufo": {
-      "version": "1.6.4",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz",
-      "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
-      "license": "MIT"
-    },
-    "node_modules/ultrahtml": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/ultrahtml/-/ultrahtml-1.6.0.tgz",
-      "integrity": "sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==",
-      "license": "MIT"
-    },
-    "node_modules/uncrypto": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/uncrypto/-/uncrypto-0.1.3.tgz",
-      "integrity": "sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==",
-      "license": "MIT"
-    },
-    "node_modules/unified": {
-      "version": "11.0.5",
-      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
-      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^3.0.0",
-        "bail": "^2.0.0",
-        "devlop": "^1.0.0",
-        "extend": "^3.0.0",
-        "is-plain-obj": "^4.0.0",
-        "trough": "^2.0.0",
-        "vfile": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/unifont": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/unifont/-/unifont-0.7.4.tgz",
-      "integrity": "sha512-oHeis4/xl42HUIeHuNZRGEvxj5AaIKR+bHPNegRq5LV1gdc3jundpONbjglKpihmJf+dswygdMJn3eftGIMemg==",
-      "license": "MIT",
-      "dependencies": {
-        "css-tree": "^3.1.0",
-        "ofetch": "^1.5.1",
-        "ohash": "^2.0.11"
-      }
-    },
-    "node_modules/unist-util-find-after": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-5.0.0.tgz",
-      "integrity": "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^3.0.0",
-        "unist-util-is": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/unist-util-is": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
-      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/unist-util-modify-children": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-modify-children/-/unist-util-modify-children-4.0.0.tgz",
-      "integrity": "sha512-+tdN5fGNddvsQdIzUF3Xx82CU9sMM+fA0dLgR9vOmT0oPT2jH+P1nd5lSqfCfXAw+93NhcXNY2qqvTUtE4cQkw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^3.0.0",
-        "array-iterate": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/unist-util-position": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
-      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/unist-util-remove-position": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-5.0.0.tgz",
-      "integrity": "sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^3.0.0",
-        "unist-util-visit": "^5.0.0"
+        "node": ">= 20.19.0"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/unist-util-stringify-position": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
-      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+    "node_modules/regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/regex/-/regex-6.1.0.tgz",
+      "integrity": "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==",
       "license": "MIT",
       "dependencies": {
-        "@types/unist": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "regex-utilities": "^2.3.0"
       }
     },
-    "node_modules/unist-util-visit": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
-      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
+    "node_modules/regex-recursion": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz",
+      "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==",
       "license": "MIT",
       "dependencies": {
-        "@types/unist": "^3.0.0",
-        "unist-util-is": "^6.0.0",
-        "unist-util-visit-parents": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "regex-utilities": "^2.3.0"
       }
     },
-    "node_modules/unist-util-visit-children": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-visit-children/-/unist-util-visit-children-3.0.0.tgz",
-      "integrity": "sha512-RgmdTfSBOg04sdPcpTSD1jzoNBjt9a80/ZCzp5cI9n1qPzLZWF9YdvWGN2zmTumP1HWhXKdUWexjy/Wy/lJ7tA==",
+    "node_modules/regex-utilities": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz",
+      "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==",
+      "license": "MIT"
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
       "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^3.0.0"
-      },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
-    "node_modules/unist-util-visit-parents": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
-      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+    "node_modules/retext-smartypants": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/retext-smartypants/-/retext-smartypants-6.2.0.tgz",
+      "integrity": "sha512-kk0jOU7+zGv//kfjXEBjdIryL1Acl4i9XNkHxtM7Tm5lFiCog576fjNC9hjoR7LTKQ0DsPWy09JummSsH1uqfQ==",
       "license": "MIT",
       "dependencies": {
-        "@types/unist": "^3.0.0",
-        "unist-util-is": "^6.0.0"
+        "@types/nlcst": "^2.0.0",
+        "nlcst-to-string": "^4.0.0",
+        "unist-util-visit": "^5.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">= 10.0.0"
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/unstorage": {
-      "version": "1.17.5",
-      "resolved": "https://registry.npmjs.org/unstorage/-/unstorage-1.17.5.tgz",
-      "integrity": "sha512-0i3iqvRfx29hkNntHyQvJTpf5W9dQ9ZadSoRU8+xVlhVtT7jAX57fazYO9EHvcRCfBCyi5YRya7XCDOsbTgkPg==",
+    "node_modules/rolldown": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.5.tgz",
+      "integrity": "sha512-VD2IE5PUG4Oj8zz2VGykiYd5wbnjdIiSsNQb8Qu5B+noEp+A78mu2iVvpp27g8es14Tk9rofNs5Tku9iQCS4fA==",
       "license": "MIT",
       "dependencies": {
-        "anymatch": "^3.1.3",
-        "chokidar": "^5.0.0",
-        "destr": "^2.0.5",
-        "h3": "^1.15.10",
-        "lru-cache": "^11.2.7",
-        "node-fetch-native": "^1.6.7",
-        "ofetch": "^1.5.1",
-        "ufo": "^1.6.3"
+        "@oxc-project/types": "=0.146.0",
+        "@rolldown/pluginutils": "^1.0.0"
       },
-      "peerDependencies": {
-        "@azure/app-configuration": "^1.8.0",
-        "@azure/cosmos": "^4.2.0",
-        "@azure/data-tables": "^13.3.0",
-        "@azure/identity": "^4.6.0",
-        "@azure/keyvault-secrets": "^4.9.0",
-        "@azure/storage-blob": "^12.26.0",
-        "@capacitor/preferences": "^6 || ^7 || ^8",
-        "@deno/kv": ">=0.9.0",
-        "@netlify/blobs": "^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0",
-        "@planetscale/database": "^1.19.0",
-        "@upstash/redis": "^1.34.3",
-        "@vercel/blob": ">=0.27.1",
-        "@vercel/functions": "^2.2.12 || ^3.0.0",
-        "@vercel/kv": "^1 || ^2 || ^3",
-        "aws4fetch": "^1.0.20",
-        "db0": ">=0.2.1",
-        "idb-keyval": "^6.2.1",
-        "ioredis": "^5.4.2",
-        "uploadthing": "^7.4.4"
+      "bin": {
+        "rolldown": "bin/cli.mjs"
       },
-      "peerDependenciesMeta": {
-        "@azure/app-configuration": {
-          "optional": true
-        },
-        "@azure/cosmos": {
-          "optional": true
-        },
-        "@azure/data-tables": {
-          "optional": true
-        },
-        "@azure/identity": {
-          "optional": true
-        },
-        "@azure/keyvault-secrets": {
-          "optional": true
-        },
-        "@azure/storage-blob": {
-          "optional": true
-        },
-        "@capacitor/preferences": {
-          "optional": true
-        },
-        "@deno/kv": {
-          "optional": true
-        },
-        "@netlify/blobs": {
-          "optional": true
-        },
-        "@planetscale/database": {
-          "optional": true
-        },
-        "@upstash/redis": {
-          "optional": true
-        },
-        "@vercel/blob": {
-          "optional": true
-        },
-        "@vercel/functions": {
-          "optional": true
-        },
-        "@vercel/kv": {
-          "optional": true
-        },
-        "aws4fetch": {
-          "optional": true
-        },
-        "db0": {
-          "optional": true
-        },
-        "idb-keyval": {
-          "optional": true
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm-eabi": "1.2.5",
+        "@rolldown/binding-android-arm64": "1.2.5",
+        "@rolldown/binding-darwin-arm64": "1.2.5",
+        "@rolldown/binding-darwin-x64": "1.2.5",
+        "@rolldown/binding-freebsd-x64": "1.2.5",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.2.5",
+        "@rolldown/binding-linux-arm64-gnu": "1.2.5",
+        "@rolldown/binding-linux-arm64-musl": "1.2.5",
+        "@rolldown/binding-linux-ppc64-gnu": "1.2.5",
+        "@rolldown/binding-linux-s390x-gnu": "1.2.5",
+        "@rolldown/binding-linux-x64-gnu": "1.2.5",
+        "@rolldown/binding-linux-x64-musl": "1.2.5",
+        "@rolldown/binding-openharmony-arm64": "1.2.5",
+        "@rolldown/binding-win32-arm64-msvc": "1.2.5",
+        "@rolldown/binding-win32-x64-msvc": "1.2.5"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
         },
-        "ioredis": {
-          "optional": true
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
         },
-        "uploadthing": {
-          "optional": true
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
         }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/vfile": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
-      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+    "node_modules/satteri": {
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/satteri/-/satteri-0.10.5.tgz",
+      "integrity": "sha512-Ao1LKpAEa9Wdg0otgbVKViZHEq9ebdXe4DMrp3s9vQAU0HNIuHnFEuMuOcm0ZIXyV0Yzxj91NvhLpvXZJO/5ZQ==",
       "license": "MIT",
       "dependencies": {
-        "@types/unist": "^3.0.0",
-        "vfile-message": "^4.0.0"
+        "@types/estree-jsx": "^1.0.5",
+        "@types/hast": "^3.0.5",
+        "@types/mdast": "^4.0.4",
+        "@types/unist": "^3.0.3"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+      "optionalDependencies": {
+        "@bruits/satteri-darwin-arm64": "0.10.5",
+        "@bruits/satteri-darwin-x64": "0.10.5",
+        "@bruits/satteri-linux-arm64-gnu": "0.10.5",
+        "@bruits/satteri-linux-arm64-musl": "0.10.5",
+        "@bruits/satteri-linux-x64-gnu": "0.10.5",
+        "@bruits/satteri-linux-x64-musl": "0.10.5",
+        "@bruits/satteri-wasm32-wasi": "0.10.5",
+        "@bruits/satteri-win32-arm64-msvc": "0.10.5",
+        "@bruits/satteri-win32-x64-msvc": "0.10.5"
       }
     },
-    "node_modules/vfile-location": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
-      "integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
-      "license": "MIT",
+    "node_modules/sax": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
+      "integrity": "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=11.0.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.2.tgz",
+      "integrity": "sha512-c8jsqUZm3omBOI66G90z1Dyw5z622G8oLG+omfsHBJf3CWQTlOcwOjvOG6wtiNfW6anKm/eA39LMwMtMez2TiQ==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "optional": true,
       "dependencies": {
-        "@types/unist": "^3.0.0",
-        "vfile": "^6.0.0"
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
       }
     },
-    "node_modules/vfile-message": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
-      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+    "node_modules/shiki": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-4.4.3.tgz",
+      "integrity": "sha512-Mb/GvXPHBAXdgGIcnfU5L3ldpn1XcxrGkPHwqgRx17/I2XRfqlFKk2vGkHWINn1kdXvzJZeuO3is6I9KLPFm0g==",
       "license": "MIT",
       "dependencies": {
-        "@types/unist": "^3.0.0",
-        "unist-util-stringify-position": "^4.0.0"
+        "@shikijs/core": "4.4.3",
+        "@shikijs/engine-javascript": "4.4.3",
+        "@shikijs/engine-oniguruma": "4.4.3",
+        "@shikijs/langs": "4.4.3",
+        "@shikijs/themes": "4.4.3",
+        "@shikijs/types": "4.4.3",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.5"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+      "engines": {
+        "node": ">=20"
       }
     },
-    "node_modules/vite": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.3.tgz",
-      "integrity": "sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==",
+    "node_modules/sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+      "license": "MIT"
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "esbuild": "^0.25.0",
-        "fdir": "^6.4.4",
-        "picomatch": "^4.0.2",
-        "postcss": "^8.5.3",
-        "rollup": "^4.34.9",
-        "tinyglobby": "^0.2.13"
-      },
-      "bin": {
-        "vite": "bin/vite.js"
-      },
       "engines": {
-        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+        "node": ">=8"
+      }
+    },
+    "node_modules/smol-toml": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.8.0.tgz",
+      "integrity": "sha512-kCZr2V3ch9i00x8zXRhjUNVcjG9ijES5dDudkXvUVCT5QlJNQWElSJdZqyPemffHoLNUYwOcou0Fy+ojN0uHSQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 18"
       },
       "funding": {
-        "url": "https://github.com/vitejs/vite?sponsor=1"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.3"
-      },
-      "peerDependencies": {
-        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
-        "jiti": ">=1.21.0",
-        "less": "*",
-        "lightningcss": "^1.21.0",
-        "sass": "*",
-        "sass-embedded": "*",
-        "stylus": "*",
-        "sugarss": "*",
-        "terser": "^5.16.0",
-        "tsx": "^4.8.1",
-        "yaml": "^2.4.2"
-      },
-      "peerDependenciesMeta": {
-        "@types/node": {
-          "optional": true
-        },
-        "jiti": {
-          "optional": true
-        },
-        "less": {
-          "optional": true
-        },
-        "lightningcss": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        },
-        "sass-embedded": {
-          "optional": true
-        },
-        "stylus": {
-          "optional": true
-        },
-        "sugarss": {
-          "optional": true
-        },
-        "terser": {
-          "optional": true
-        },
-        "tsx": {
-          "optional": true
-        },
-        "yaml": {
-          "optional": true
-        }
+        "url": "https://github.com/sponsors/cyyynthia"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/aix-ppc64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
-      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": ">=18"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/android-arm": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
-      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
-      "cpu": [
-        "arm"
-      ],
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/android-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
-      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/android-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
-      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/strip-outer/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
       "engines": {
-        "node": ">=18"
+        "node": ">=0.8.0"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/darwin-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
-      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=8"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/darwin-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
-      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/svgo": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-4.0.1.tgz",
+      "integrity": "sha512-XDpWUOPC6FEibaLzjfe0ucaV0YrOjYotGJO1WpF0Zd+n6ZGEQUsSugaoLq9QkEZtAfQIxT42UChcssDVPP3+/w==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "dependencies": {
+        "commander": "^11.1.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^3.0.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.1.1",
+        "sax": "^1.5.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo.js"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
-      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
+    "node_modules/tinyclip": {
+      "version": "0.1.15",
+      "resolved": "https://registry.npmjs.org/tinyclip/-/tinyclip-0.1.15.tgz",
+      "integrity": "sha512-uo33abH+Ays0xYaDysoBt494Hb3hsEczMpcC0MwFl773pazORx4fmvKhclhR1wonUbB6vvpRsvVMwnhfqeMc+A==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
       "engines": {
-        "node": ">=18"
+        "node": "^16.14.0 || >= 17.3.0"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/freebsd-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
-      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/tinyexec": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.2.4.tgz",
+      "integrity": "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
       "engines": {
         "node": ">=18"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-arm": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
-      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
-      "cpu": [
-        "arm"
-      ],
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
-      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=8.0"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-ia32": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
-      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
-      "cpu": [
-        "ia32"
-      ],
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-loong64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
-      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
-      "cpu": [
-        "loong64"
-      ],
+    "node_modules/trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
+      "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-mips64el": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
-      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
-      "cpu": [
-        "mips64el"
-      ],
+    "node_modules/trim-repeated/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
       "engines": {
-        "node": ">=18"
+        "node": ">=0.8.0"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-ppc64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
-      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
-      "cpu": [
-        "ppc64"
-      ],
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-riscv64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
-      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
-      "cpu": [
-        "riscv64"
-      ],
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/ufo": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz",
+      "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
+      "license": "MIT"
+    },
+    "node_modules/ultrahtml": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/ultrahtml/-/ultrahtml-1.6.0.tgz",
+      "integrity": "sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==",
+      "license": "MIT"
+    },
+    "node_modules/uncrypto": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/uncrypto/-/uncrypto-0.1.3.tgz",
+      "integrity": "sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==",
+      "license": "MIT"
+    },
+    "node_modules/undici": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-8.10.0.tgz",
+      "integrity": "sha512-HvltHd7avK13QIw/oLe4qoOLyoVSoafqJ2jYOrtMRBkbYT31eiBQ8O0ehRKZiEZCMEyLFQNIADpgCWC5fALvYQ==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
       "engines": {
-        "node": ">=18"
+        "node": ">=22.19.0"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-s390x": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
-      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
-      "cpu": [
-        "s390x"
-      ],
+    "node_modules/unified": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
-      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/unifont": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/unifont/-/unifont-0.7.5.tgz",
+      "integrity": "sha512-ULe/Cs+ZIsq+dcFofNkhqielCrUJnb5mr+Yc4EBM2VlL+6OZR6+cjtI2mT1bJvRBrVncqHAbLURxmPLcCXzWMg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "css-tree": "^3.1.0",
+        "ohash": "^2.0.11",
+        "undici": "^8.0.0"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
-      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/unist-util-is": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/netbsd-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
-      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
-      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/openbsd-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
-      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/unist-util-visit": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
-      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "openharmony"
-      ],
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/sunos-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
-      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
       "engines": {
-        "node": ">=18"
+        "node": ">= 10.0.0"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/win32-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
-      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/unstorage": {
+      "version": "1.17.5",
+      "resolved": "https://registry.npmjs.org/unstorage/-/unstorage-1.17.5.tgz",
+      "integrity": "sha512-0i3iqvRfx29hkNntHyQvJTpf5W9dQ9ZadSoRU8+xVlhVtT7jAX57fazYO9EHvcRCfBCyi5YRya7XCDOsbTgkPg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "anymatch": "^3.1.3",
+        "chokidar": "^5.0.0",
+        "destr": "^2.0.5",
+        "h3": "^1.15.10",
+        "lru-cache": "^11.2.7",
+        "node-fetch-native": "^1.6.7",
+        "ofetch": "^1.5.1",
+        "ufo": "^1.6.3"
+      },
+      "peerDependencies": {
+        "@azure/app-configuration": "^1.8.0",
+        "@azure/cosmos": "^4.2.0",
+        "@azure/data-tables": "^13.3.0",
+        "@azure/identity": "^4.6.0",
+        "@azure/keyvault-secrets": "^4.9.0",
+        "@azure/storage-blob": "^12.26.0",
+        "@capacitor/preferences": "^6 || ^7 || ^8",
+        "@deno/kv": ">=0.9.0",
+        "@netlify/blobs": "^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0",
+        "@planetscale/database": "^1.19.0",
+        "@upstash/redis": "^1.34.3",
+        "@vercel/blob": ">=0.27.1",
+        "@vercel/functions": "^2.2.12 || ^3.0.0",
+        "@vercel/kv": "^1 || ^2 || ^3",
+        "aws4fetch": "^1.0.20",
+        "db0": ">=0.2.1",
+        "idb-keyval": "^6.2.1",
+        "ioredis": "^5.4.2",
+        "uploadthing": "^7.4.4"
+      },
+      "peerDependenciesMeta": {
+        "@azure/app-configuration": {
+          "optional": true
+        },
+        "@azure/cosmos": {
+          "optional": true
+        },
+        "@azure/data-tables": {
+          "optional": true
+        },
+        "@azure/identity": {
+          "optional": true
+        },
+        "@azure/keyvault-secrets": {
+          "optional": true
+        },
+        "@azure/storage-blob": {
+          "optional": true
+        },
+        "@capacitor/preferences": {
+          "optional": true
+        },
+        "@deno/kv": {
+          "optional": true
+        },
+        "@netlify/blobs": {
+          "optional": true
+        },
+        "@planetscale/database": {
+          "optional": true
+        },
+        "@upstash/redis": {
+          "optional": true
+        },
+        "@vercel/blob": {
+          "optional": true
+        },
+        "@vercel/functions": {
+          "optional": true
+        },
+        "@vercel/kv": {
+          "optional": true
+        },
+        "aws4fetch": {
+          "optional": true
+        },
+        "db0": {
+          "optional": true
+        },
+        "idb-keyval": {
+          "optional": true
+        },
+        "ioredis": {
+          "optional": true
+        },
+        "uploadthing": {
+          "optional": true
+        }
       }
     },
-    "node_modules/vite/node_modules/@esbuild/win32-ia32": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
-      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
-      "cpu": [
-        "ia32"
-      ],
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/win32-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
-      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/vfile-message": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/vite/node_modules/esbuild": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
-      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
-      "hasInstallScript": true,
+    "node_modules/vite": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.2.2.tgz",
+      "integrity": "sha512-cFKLV/PRgAUlIRm5WjMjJ86jrftzpqcgH+Us+DS8mI3CDNiH30Whrz8uHL3+MOLPAgqbMBAqWdAHAphOAM+z/Q==",
       "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.33.0",
+        "picomatch": "^4.0.5",
+        "postcss": "^8.5.26",
+        "rolldown": "~1.2.4",
+        "tinyglobby": "^0.2.17"
+      },
       "bin": {
-        "esbuild": "bin/esbuild"
+        "vite": "bin/vite.js"
       },
       "engines": {
-        "node": ">=18"
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.25.12",
-        "@esbuild/android-arm": "0.25.12",
-        "@esbuild/android-arm64": "0.25.12",
-        "@esbuild/android-x64": "0.25.12",
-        "@esbuild/darwin-arm64": "0.25.12",
-        "@esbuild/darwin-x64": "0.25.12",
-        "@esbuild/freebsd-arm64": "0.25.12",
-        "@esbuild/freebsd-x64": "0.25.12",
-        "@esbuild/linux-arm": "0.25.12",
-        "@esbuild/linux-arm64": "0.25.12",
-        "@esbuild/linux-ia32": "0.25.12",
-        "@esbuild/linux-loong64": "0.25.12",
-        "@esbuild/linux-mips64el": "0.25.12",
-        "@esbuild/linux-ppc64": "0.25.12",
-        "@esbuild/linux-riscv64": "0.25.12",
-        "@esbuild/linux-s390x": "0.25.12",
-        "@esbuild/linux-x64": "0.25.12",
-        "@esbuild/netbsd-arm64": "0.25.12",
-        "@esbuild/netbsd-x64": "0.25.12",
-        "@esbuild/openbsd-arm64": "0.25.12",
-        "@esbuild/openbsd-x64": "0.25.12",
-        "@esbuild/openharmony-arm64": "0.25.12",
-        "@esbuild/sunos-x64": "0.25.12",
-        "@esbuild/win32-arm64": "0.25.12",
-        "@esbuild/win32-ia32": "0.25.12",
-        "@esbuild/win32-x64": "0.25.12"
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.4.0 || ^0.5.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
       }
     },
     "node_modules/vitefu": {
@@ -6042,57 +4790,6 @@
         }
       }
     },
-    "node_modules/web-namespaces": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
-      "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/which-pm-runs": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.1.0.tgz",
-      "integrity": "sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/widest-line": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-5.0.0.tgz",
-      "integrity": "sha512-c9bZp7b5YtRj2wOe6dlj32MK+Bx/M/d+9VB2SHM1OtsUHR0aV0tdP6DWh/iMt0kWi1t5g1Iudu6hQRNd1A4PVA==",
-      "license": "MIT",
-      "dependencies": {
-        "string-width": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/wrap-ansi": {
-      "version": "9.0.2",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
-      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^6.2.1",
-        "string-width": "^7.0.0",
-        "strip-ansi": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
     "node_modules/xxhash-wasm": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/xxhash-wasm/-/xxhash-wasm-1.1.0.tgz",
@@ -6100,12 +4797,12 @@
       "license": "MIT"
     },
     "node_modules/yargs-parser": {
-      "version": "21.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
-      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-22.0.0.tgz",
+      "integrity": "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==",
       "license": "ISC",
       "engines": {
-        "node": ">=12"
+        "node": "^20.19.0 || ^22.12.0 || >=23"
       }
     },
     "node_modules/yocto-queue": {
@@ -6120,60 +4817,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/yocto-spinner": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/yocto-spinner/-/yocto-spinner-0.2.3.tgz",
-      "integrity": "sha512-sqBChb33loEnkoXte1bLg45bEBsOP9N1kzQh5JZNKj/0rik4zAPTNSAVPj3uQAdc6slYJ0Ksc403G2XgxsJQFQ==",
-      "license": "MIT",
-      "dependencies": {
-        "yoctocolors": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=18.19"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/yoctocolors": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yoctocolors/-/yoctocolors-2.1.2.tgz",
-      "integrity": "sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/zod": {
-      "version": "3.25.76",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
-      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
+      "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
     },
-    "node_modules/zod-to-json-schema": {
-      "version": "3.25.2",
-      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.25.2.tgz",
-      "integrity": "sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA==",
-      "license": "ISC",
-      "peerDependencies": {
-        "zod": "^3.25.28 || ^4"
-      }
-    },
-    "node_modules/zod-to-ts": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/zod-to-ts/-/zod-to-ts-1.2.0.tgz",
-      "integrity": "sha512-x30XE43V+InwGpvTySRNz9kB7qFU8DlyEy7BsSTCHPH1R0QasMmHWZDCzYm6bVXtj/9NNJAZF3jW8rzFvH5OFA==",
-      "peerDependencies": {
-        "typescript": "^4.9.4 || ^5.0.2",
-        "zod": "^3"
-      }
-    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/package.json b/package.json
index 94116165..6745c20d 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "@esa/tokens": "file:../ecology/packages/tokens",
     "@types/leaflet": "^1.9.21",
     "ag-grid-community": "^35.3.1",
-    "astro": "^5.0.0",
+    "astro": "^7.2.6",
     "leaflet": "^1.9.4"
   },
   "devDependencies": {

From 301b3522a8753fb01791e62a5f5da45c05b9323d Mon Sep 17 00:00:00 2001
From: Andrew Lovseth <andy.lovseth@gmail.com>
Date: Mon, 24 Aug 2026 15:45:15 -0700
Subject: [PATCH 5/6] Adapt to the hub's token collapse: migrate-tokens run +
 the four judgment calls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The script rewrote 180+ files (color-text-* to content-*, type-size to
font-size, esa-button color= to variant=). Hand adaptations where the hub
merged names this spoke distinguished, or deleted hooks it leaned on:

- text-muted survives as spoke-owned --bcn-content-muted (gray-500); the hub
  folded it into content-default-secondary, which Beacon keeps at gray-700.
- The three glyph-overlay fields (BcnEvidenceSearch, BcnSettingsSearch,
  BcnKbHero) re-point the field legos' private --_field-* hooks — the public
  --form-padding/height/radius surface is gone with no successor. Documented
  reach-in; a leading-icon slot on the hub is the real fix.
- Inert --form-height re-points deleted: the theme's Beacon scale (24/28/36/44,
  intent recorded in the comment), two 24px remove buttons, two 32px filter-bar
  comboboxes (the mismatch they corrected died with the theme token).
- weight= stripped from 8 EsaIconLink sites (dropped upstream; label
  composites own type now); stale doc/handoff prose updated to match.

Build green, zero deprecation warnings; KB hero verified rendering (52px
gutter, font cascade through font:inherit).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Rd8hgM9z8vV2kHXScSDe8B
---
 src/components/bcn/BcnAldoMark.astro          |   4 +-
 src/components/bcn/BcnAttentionPanel.astro    |  36 +-
 src/components/bcn/BcnBottomDrawer.astro      |  18 +-
 src/components/bcn/BcnBoundaryDrawMap.astro   |  26 +-
 src/components/bcn/BcnCaDotMap.astro          |   6 +-
 src/components/bcn/BcnChallengeGrid.astro     |  20 +-
 src/components/bcn/BcnChangeLog.astro         |  12 +-
 src/components/bcn/BcnCiaReport.astro         | 196 ++++-----
 src/components/bcn/BcnCommitmentBadge.astro   |   8 +-
 src/components/bcn/BcnCommitmentRow.astro     |  24 +-
 .../bcn/BcnComponentDataPanel.astro           |  80 ++--
 src/components/bcn/BcnComponentGrid.astro     |  20 +-
 src/components/bcn/BcnComponentHeader.astro   |  38 +-
 .../bcn/BcnComponentSetupCard.astro           |   2 +-
 src/components/bcn/BcnComponentSummary.astro  |  42 +-
 src/components/bcn/BcnConsultationLog.astro   |  16 +-
 src/components/bcn/BcnContrastPanels.astro    |  30 +-
 src/components/bcn/BcnCount.astro             |   8 +-
 src/components/bcn/BcnCountChip.astro         |  12 +-
 src/components/bcn/BcnCtaPaths.astro          |  24 +-
 src/components/bcn/BcnDangerZone.astro        |  10 +-
 src/components/bcn/BcnDemoDialog.astro        |  18 +-
 src/components/bcn/BcnDetailAssignments.astro |  32 +-
 src/components/bcn/BcnDetailChildren.astro    |  36 +-
 src/components/bcn/BcnDetailLineage.astro     |  24 +-
 src/components/bcn/BcnDisclosureToggle.astro  |   6 +-
 src/components/bcn/BcnDiscussion.astro        |  28 +-
 src/components/bcn/BcnDueDiligenceSteps.astro |  42 +-
 src/components/bcn/BcnEntityLogo.astro        |   6 +-
 src/components/bcn/BcnEvidenceDrawer.astro    |  34 +-
 .../bcn/BcnEvidenceEntryPoints.astro          |  66 +--
 src/components/bcn/BcnEvidenceList.astro      |  26 +-
 .../bcn/BcnEvidencePatternNotes.astro         |  36 +-
 src/components/bcn/BcnEvidenceSearch.astro    |  28 +-
 src/components/bcn/BcnEvidenceStaging.astro   |  93 ++---
 src/components/bcn/BcnEvidenceTargets.astro   | 128 +++---
 src/components/bcn/BcnFilterBar.astro         |  12 +-
 src/components/bcn/BcnFindingList.astro       |  22 +-
 src/components/bcn/BcnFlagList.astro          |   6 +-
 src/components/bcn/BcnFlagRow.astro           |  16 +-
 src/components/bcn/BcnFledgingCountdown.astro |  52 +--
 src/components/bcn/BcnFootprintMap.astro      |  42 +-
 src/components/bcn/BcnFundingPlan.astro       |  18 +-
 src/components/bcn/BcnGisLayerPanel.astro     |  26 +-
 src/components/bcn/BcnGridChrome.astro        |   6 +-
 src/components/bcn/BcnGridFooter.astro        |   8 +-
 src/components/bcn/BcnGuidanceDrawer.astro    |  98 ++---
 src/components/bcn/BcnHelpArticle.astro       |  58 +--
 src/components/bcn/BcnHelpBar.astro           |  46 +--
 src/components/bcn/BcnKbArticleList.astro     |  14 +-
 src/components/bcn/BcnKbBrowser.astro         |   2 +-
 src/components/bcn/BcnKbCategories.astro      |  34 +-
 src/components/bcn/BcnKbGlossary.astro        |  12 +-
 src/components/bcn/BcnKbHero.astro            |  70 ++--
 src/components/bcn/BcnKeyValue.astro          |  12 +-
 src/components/bcn/BcnLinkRowCard.astro       |  28 +-
 src/components/bcn/BcnLogoPicker.astro        |  42 +-
 src/components/bcn/BcnMarketGrid.astro        |  18 +-
 src/components/bcn/BcnMarketingFooter.astro   |   2 +-
 src/components/bcn/BcnMarketingHero.astro     |  20 +-
 src/components/bcn/BcnMarketingNav.astro      |   6 +-
 src/components/bcn/BcnMarketingSection.astro  |   4 +-
 src/components/bcn/BcnModelDiagram.astro      |  68 ++--
 src/components/bcn/BcnModules.astro           |  68 ++--
 src/components/bcn/BcnMonitoringStats.astro   |  40 +-
 src/components/bcn/BcnNodeDetail.astro        |  10 +-
 src/components/bcn/BcnNodeEdit.astro          |  10 +-
 src/components/bcn/BcnNotifications.astro     |  22 +-
 src/components/bcn/BcnObservationCard.astro   |  66 +--
 src/components/bcn/BcnObservationMap.astro    |  18 +-
 src/components/bcn/BcnOmniSearch.astro        |  94 ++---
 src/components/bcn/BcnOpCard.astro            |  24 +-
 src/components/bcn/BcnOversightHero.astro     |  56 +--
 src/components/bcn/BcnPlanReader.astro        | 106 ++---
 src/components/bcn/BcnPre2030Memo.astro       | 112 ++---
 src/components/bcn/BcnProjectDataPanel.astro  | 106 ++---
 src/components/bcn/BcnProjectFacts.astro      |  24 +-
 src/components/bcn/BcnProjectHeader.astro     |  34 +-
 src/components/bcn/BcnProjectTimeline.astro   |  94 ++---
 src/components/bcn/BcnPrototypeIndex.astro    |  56 +--
 src/components/bcn/BcnReadiness.astro         | 216 +++++-----
 src/components/bcn/BcnRecordRows.astro        |  46 +--
 src/components/bcn/BcnReleaseNav.astro        |  26 +-
 src/components/bcn/BcnReleaseStream.astro     |  74 ++--
 .../bcn/BcnRequirementReference.astro         |  22 +-
 src/components/bcn/BcnReviewThread.astro      |  34 +-
 src/components/bcn/BcnRolesMatrix.astro       |  38 +-
 src/components/bcn/BcnRolesRepeater.astro     |  12 +-
 src/components/bcn/BcnRollupSummary.astro     |  10 +-
 src/components/bcn/BcnScaleStats.astro        |  14 +-
 src/components/bcn/BcnScheduleTimeline.astro  |  58 +--
 src/components/bcn/BcnSearchResults.astro     |  84 ++--
 src/components/bcn/BcnSearchTrigger.astro     |  24 +-
 src/components/bcn/BcnSeasonCard.astro        |  28 +-
 src/components/bcn/BcnSectionIntro.astro      |  18 +-
 src/components/bcn/BcnSettingRow.astro        |  40 +-
 src/components/bcn/BcnSettingsGrid.astro      |  10 +-
 src/components/bcn/BcnSettingsNav.astro       |  46 +--
 src/components/bcn/BcnSettingsSearch.astro    |  59 +--
 src/components/bcn/BcnSettingsSection.astro   |  30 +-
 src/components/bcn/BcnSettingsShell.astro     |   8 +-
 src/components/bcn/BcnSetupWizardCard.astro   |  46 +--
 src/components/bcn/BcnSetupWorkspace.astro    | 150 +++----
 src/components/bcn/BcnSiblingNav.astro        |  14 +-
 src/components/bcn/BcnSolutionPhases.astro    |  14 +-
 src/components/bcn/BcnStarredComponents.astro |  60 +--
 src/components/bcn/BcnStatusChip.astro        |   4 +-
 src/components/bcn/BcnStatusSelect.astro      |  26 +-
 src/components/bcn/BcnStudySketch.astro       |  32 +-
 src/components/bcn/BcnTimelineExplorer.astro  |  34 +-
 src/components/bcn/BcnTriageCounts.astro      |   8 +-
 src/components/bcn/BcnTriageQueue.astro       |  44 +-
 src/components/bcn/BcnTriageReview.astro      | 108 ++---
 src/components/bcn/BcnWorkAreaBoard.astro     |  48 +--
 src/components/bcn/BcnWorkBreakdown.astro     | 150 +++----
 src/components/bcn/evidence-drawer.ts         |   2 +-
 src/data/component-dashboard.ts               |   6 +-
 src/data/component-detail.ts                  |   4 +-
 src/data/due-diligence-fixture.ts             |   6 +-
 .../data-catalog-requirement-streamlined.mjs  |   4 +-
 .../handoff/data-catalog-source-document.mjs  |   2 +-
 src/data/handoff/global-search.mjs            |   2 +-
 src/data/handoff/help.mjs                     |  10 +-
 src/data/handoff/project-dashboard.mjs        |   2 +-
 src/data/handoff/requirement-tracker.mjs      |   2 +-
 src/data/monitoring-oversight-fixture.ts      |  14 +-
 src/data/project-dashboard.ts                 |   8 +-
 src/layouts/AppShell.astro                    |  56 +--
 src/layouts/BaseLayout.astro                  |  10 +-
 src/layouts/PageLayout.astro                  |   6 +-
 .../components/esa-alert-box.astro            |   6 +-
 .../components/esa-button-toggle.astro        |  12 +-
 .../design-system/components/esa-button.astro |  20 +-
 .../components/esa-checkbox.astro             |   2 +-
 .../components/esa-collapsible.astro          |  12 +-
 .../components/esa-combobox.astro             |   8 +-
 .../components/esa-date-picker.astro          |   6 +-
 .../design-system/components/esa-dialog.astro |  16 +-
 .../components/esa-dropdown-menu.astro        |  16 +-
 .../components/esa-icon-button.astro          |  34 +-
 .../components/esa-input-tag.astro            |  18 +-
 .../components/esa-popover.astro              |  14 +-
 .../design-system/components/esa-select.astro |   2 +-
 .../components/esa-switch-toggle.astro        |   2 +-
 .../components/esa-tab-layout.astro           |   6 +-
 .../components/esa-text-field.astro           |   2 +-
 .../components/scope-selector.astro           |  66 +--
 .../foundations/iconography.astro             |  16 +-
 src/pages/design-system/index.astro           |  18 +-
 src/pages/index.astro                         |  58 +--
 src/pages/patterns/index.astro                |   6 +-
 src/pages/prototypes/components.astro         |   2 +-
 .../prototypes/data-catalog-action.astro      | 108 ++---
 .../prototypes/data-catalog-actions.astro     |  24 +-
 .../prototypes/data-catalog-commitment.astro  | 110 ++---
 ...data-catalog-requirement-streamlined.astro | 104 ++---
 .../prototypes/data-catalog-requirement.astro | 118 +++---
 ...ata-catalog-requirements-streamlined.astro |  24 +-
 .../data-catalog-source-document.astro        |  44 +-
 src/pages/prototypes/discussion.astro         |  46 +--
 .../prototypes/due-diligence-boundary.astro   |   4 +-
 .../due-diligence-constraints.astro           |  84 ++--
 .../prototypes/due-diligence-overview.astro   |  24 +-
 .../prototypes/due-diligence-permits.astro    |  94 ++---
 .../prototypes/due-diligence-report.astro     |   2 +-
 .../prototypes/due-diligence-siting.astro     |  52 +--
 src/pages/prototypes/fish-detail/[id].astro   |  82 ++--
 src/pages/prototypes/fish-gantt.astro         |  42 +-
 src/pages/prototypes/fish-node.astro          |   6 +-
 src/pages/prototypes/fish-studies.astro       |  60 +--
 src/pages/prototypes/fish-study/[coa].astro   |  32 +-
 .../monitoring/compliance-observations.astro  |  30 +-
 .../prototypes/monitoring/daily-reports.astro |  52 +--
 .../prototypes/monitoring/dashboard.astro     |  56 +--
 src/pages/prototypes/monitoring/surveys.astro |  28 +-
 src/pages/prototypes/permit-tracking.astro    | 352 ++++++++--------
 src/pages/prototypes/project-dashboard.astro  |  10 +-
 .../prototypes/requirement-reference.astro    |  30 +-
 .../prototypes/requirement-tracker.astro      |  94 ++---
 src/pages/prototypes/settings/tenants.astro   |   4 +-
 src/pages/prototypes/site-clearance-bio.astro | 323 +++++++--------
 .../prototypes/site-clearance-simple.astro    |  74 ++--
 src/pages/prototypes/site-clearance.astro     | 375 ++++++++---------
 .../work-area-drawer-specimen.astro           | 382 +++++++++---------
 src/pages/shell.astro                         |  24 +-
 src/styles/beacon-map.css                     |  20 +-
 src/styles/theme-beacon.css                   |  91 +++--
 187 files changed, 4022 insertions(+), 4011 deletions(-)

diff --git a/src/components/bcn/BcnAldoMark.astro b/src/components/bcn/BcnAldoMark.astro
index 9a38802a..1ffecccc 100644
--- a/src/components/bcn/BcnAldoMark.astro
+++ b/src/components/bcn/BcnAldoMark.astro
@@ -6,7 +6,7 @@
 // Aldo-green circle, and it is the ONE badge that stands for guidance everywhere
 // it appears: the floating help-bar button, the guidance drawer header, and the
 // Help & Guidance page hero. Aldo green (--bcn-aldo) is a deliberately distinct
-// accent — never --color-primary — so the guide reads as its own presence, not
+// accent — never --color-background-brand — so the guide reads as its own presence, not
 // another primary action.
 //
 // Purely decorative (aria-hidden). It carries no interactivity of its own — a host
@@ -52,7 +52,7 @@ const ICON_STEP = { sm: 'xs', md: 'md', lg: 'xl' } as const;
     flex-shrink: 0;
     border-radius: var(--radius-full);
     background: var(--bcn-aldo);
-    color: var(--color-text-inverse);
+    color: var(--color-content-default-knockout);
     line-height: 0;
   }
 
diff --git a/src/components/bcn/BcnAttentionPanel.astro b/src/components/bcn/BcnAttentionPanel.astro
index 5e86f313..7c6cd2fe 100644
--- a/src/components/bcn/BcnAttentionPanel.astro
+++ b/src/components/bcn/BcnAttentionPanel.astro
@@ -28,7 +28,7 @@ interface OutstandingItem {
   category: string;
   severity: 'needs-attention' | 'non-compliance';
   severityLabel: string;
-  /** SSR color for the severity chip; may be a `var(--color-danger)` string. */
+  /** SSR color for the severity chip; may be a `var(--color-background-utility-danger)` string. */
   severityHex: string;
   daysActive: number;
   area: string;
@@ -72,10 +72,10 @@ const payload = { outstanding, fileBase: exportFileBase };
 
 <EsaCard title="Needs Attention & Non-Compliance">
   <Fragment slot="actions">
-    <EsaButton id="ap-export-csv" color="ghost" appearance="outline" size="sm" icon="arrow-down">
+    <EsaButton id="ap-export-csv" variant="ghost" appearance="outline" size="sm" icon="arrow-down">
       Export spreadsheet
     </EsaButton>
-    <EsaButton id="ap-export-kml" color="ghost" appearance="outline" size="sm" icon="map-pin">
+    <EsaButton id="ap-export-kml" variant="ghost" appearance="outline" size="sm" icon="map-pin">
       Export KMZ
     </EsaButton>
   </Fragment>
@@ -89,7 +89,7 @@ const payload = { outstanding, fileBase: exportFileBase };
        reads as the aside. -->
   <div class="bcn-apanel__body sidebar" data-gap="lg" data-side="end">
     <div class="bcn-apanel__inset stack" data-gap="xs">
-      <h4 class="bcn-apanel__heading type-label">Active issue locations</h4>
+      <h4 class="bcn-apanel__heading typography-label">Active issue locations</h4>
       <BcnObservationMap
         observations={mapPins}
         mapId="attention-panel"
@@ -99,7 +99,7 @@ const payload = { outstanding, fileBase: exportFileBase };
     </div>
 
     <section class="bcn-apanel__outstanding stack" data-gap="sm">
-      <h4 class="bcn-apanel__heading type-label">Outstanding items ({outstanding.length})</h4>
+      <h4 class="bcn-apanel__heading typography-label">Outstanding items ({outstanding.length})</h4>
       {outstanding.length === 0 ? (
         <EsaEmptyState
           size="sm"
@@ -116,8 +116,8 @@ const payload = { outstanding, fileBase: exportFileBase };
                 label={item.severityLabel}
                 hex={item.severityHex}
               />
-              <span class="bcn-apanel__category type-body-small">{item.category}</span>
-              <span class="bcn-apanel__area type-body-small">{item.area}</span>
+              <span class="bcn-apanel__category typography-body-sm">{item.category}</span>
+              <span class="bcn-apanel__area typography-body-sm">{item.area}</span>
               <EsaBadge
                 value={`${item.daysActive}d active`}
                 variant={item.severity === 'non-compliance' ? 'danger' : 'warning'}
@@ -133,7 +133,7 @@ const payload = { outstanding, fileBase: exportFileBase };
   <Fragment slot="footer">
     <div class="cluster" data-gap="sm">
       <EsaButton
-        color="ghost"
+        variant="ghost"
         appearance="outline"
         size="sm"
         href={severityHref('needs-attention')}
@@ -141,7 +141,7 @@ const payload = { outstanding, fileBase: exportFileBase };
         All needs attention ({attentionCount})
       </EsaButton>
       <EsaButton
-        color="ghost"
+        variant="ghost"
         appearance="outline"
         size="sm"
         href={severityHref('non-compliance')}
@@ -262,7 +262,7 @@ ${placemarks}
 
   .bcn-apanel__heading {
     margin: 0;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   /* ── Outstanding items ── */
@@ -279,27 +279,27 @@ ${placemarks}
     padding-block: var(--spacing-150);
     padding-inline: var(--spacing-200);
   }
-  .bcn-apanel__list > li + li { border-top: 1px solid var(--color-border-light); }
+  .bcn-apanel__list > li + li { border-top: 1px solid var(--color-border-default-subtle); }
 
   .bcn-apanel__id {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-background-brand);
     text-decoration: underline;
     text-underline-offset: 2px;
     white-space: nowrap;
   }
-  .bcn-apanel__id:hover { color: var(--color-primary-hover); }
+  .bcn-apanel__id:hover { color: var(--color-background-brand-hover); }
 
-  /* Dense data row: .type-body-small (14px), darkened rather than grayed out. */
+  /* Dense data row: .typography-body-sm (14px), darkened rather than grayed out. */
   .bcn-apanel__category,
   .bcn-apanel__area {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .bcn-apanel__category { color: var(--color-text-primary); }
-  .bcn-apanel__area { color: var(--color-text-secondary); }
+  .bcn-apanel__category { color: var(--color-content-default); }
+  .bcn-apanel__area { color: var(--color-content-default-secondary); }
 
   /* Narrow: the row wraps to id + chip on one line, the rest beneath. */
   @media (max-width: 40rem) {
diff --git a/src/components/bcn/BcnBottomDrawer.astro b/src/components/bcn/BcnBottomDrawer.astro
index 81b0bd26..087de7d3 100644
--- a/src/components/bcn/BcnBottomDrawer.astro
+++ b/src/components/bcn/BcnBottomDrawer.astro
@@ -26,7 +26,7 @@
 // <esa-side-dialog position="bottom">. Until then bcn-bottom-drawer is the reusable home,
 // and it mirrors the lego's committed mechanics and token contract verbatim so the swap is
 // a rename. The close control IS esa-icon-button; the shell chrome is the only owned CSS.
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 
 interface Props {
   /** Accessible name for the dialog. Rendered as the fallback heading when no header slot. */
@@ -53,11 +53,11 @@ const hasFooter = Astro.slots.has('footer');
   >
     <header class="bcn-bottom-drawer__head">
       <div class="bcn-bottom-drawer__headslot">
-        {hasHeader ? <slot name="header" /> : <h2 class="type-card-title">{heading}</h2>}
+        {hasHeader ? <slot name="header" /> : <h2 class="typography-title">{heading}</h2>}
       </div>
       {showCloseButton && (
         <span class="bcn-bottom-drawer__close" data-drawer-close>
-          <EsaIconButton icon="x" label="Close" size="md" />
+          <EsaIconButton variant="chrome" iconOnly icon="x" label="Close" size="md" />
         </span>
       )}
     </header>
@@ -93,7 +93,7 @@ const hasFooter = Astro.slots.has('footer');
   .bcn-bottom-drawer__backdrop {
     position: fixed;
     inset: 0;
-    background: var(--color-backdrop, rgba(0, 0, 0, 0.5));
+    background: var(--color-background-overlay-backdrop, rgba(0, 0, 0, 0.5));
     -webkit-backdrop-filter: blur(2px);
     backdrop-filter: blur(2px);
     z-index: var(--_z);
@@ -109,7 +109,7 @@ const hasFooter = Astro.slots.has('footer');
     height: var(--_height);
     display: flex;
     flex-direction: column;
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     /* Rises from the bottom edge — only the top corners round. */
     border-radius: var(--radius-300) var(--radius-300) 0 0;
     box-shadow: 0 -12px 48px -12px rgba(0, 0, 0, 0.32);
@@ -143,7 +143,7 @@ const hasFooter = Astro.slots.has('footer');
     justify-content: space-between;
     gap: var(--spacing-400);
     padding: var(--spacing-400) var(--spacing-500);
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border-default);
   }
   .bcn-bottom-drawer__headslot {
     flex: 1;
@@ -151,7 +151,7 @@ const hasFooter = Astro.slots.has('footer');
   }
   .bcn-bottom-drawer__close {
     flex: none;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   .bcn-bottom-drawer__body {
@@ -164,8 +164,8 @@ const hasFooter = Astro.slots.has('footer');
   .bcn-bottom-drawer__foot {
     flex: none;
     padding: var(--spacing-300) var(--spacing-500);
-    border-top: 1px solid var(--color-border);
-    background: var(--color-surface);
+    border-top: 1px solid var(--color-border-default);
+    background: var(--color-background-elevation-raised);
   }
 
   @keyframes bcn-bd-fade {
diff --git a/src/components/bcn/BcnBoundaryDrawMap.astro b/src/components/bcn/BcnBoundaryDrawMap.astro
index f27910d2..271e1a88 100644
--- a/src/components/bcn/BcnBoundaryDrawMap.astro
+++ b/src/components/bcn/BcnBoundaryDrawMap.astro
@@ -188,7 +188,7 @@ const mapLabel = `${title} — draw or edit the site outline`;
   const rootStyle = () => getComputedStyle(document.documentElement);
 
   /**
-   * Leaflet paths take LITERAL colors, so a `var(--color-primary)` has to be resolved
+   * Leaflet paths take LITERAL colors, so a `var(--color-background-brand)` has to be resolved
    * first. Recurses because a semantic token may alias another var(), and honors an
    * inline var() fallback. Lifted verbatim from BcnFootprintMap / BcnObservationMap —
    * the third map to need it, and the reason it reads the same in all three.
@@ -328,7 +328,7 @@ const mapLabel = `${title} — draw or edit the site outline`;
     if (!mapEl) return;
 
     const seedRing = readSeed(prefix);
-    const drawColor = resolveColor('var(--color-primary)');
+    const drawColor = resolveColor('var(--color-background-brand)');
     const shapeOptions: L.PolylineOptions = {
       color: drawColor,
       weight: 2,
@@ -558,15 +558,15 @@ const mapLabel = `${title} — draw or edit the site outline`;
   .bcn-bmap__surface {
     width: 100%;
     border-radius: var(--radius-200);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     overflow: hidden;
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
 
   /* Leaflet injects .leaflet-container itself, so it is outside Astro's scope. */
   .bcn-bmap__surface :global(.leaflet-container) {
-    font-family: var(--font-sans, inherit);
-    background: var(--color-surface-sunken);
+    font-family: var(--typography-font-family-sans, inherit);
+    background: var(--color-background-elevation-sunken);
   }
   /* An editable map offers a crosshair while a draw handler is armed — Leaflet.draw
      sets this class on the container, and its own default is a dotted cursor URL. */
@@ -578,26 +578,26 @@ const mapLabel = `${title} — draw or edit the site outline`;
      no component scope can reach it. Bring it to the house control language: the 4px
      control radius, semantic surface and border. Glyphs stay the plugin's sprite. */
   .bcn-bmap__surface :global(.leaflet-draw-toolbar a) {
-    background-color: var(--color-surface);
-    border-bottom-color: var(--color-border);
+    background-color: var(--color-background-elevation-raised);
+    border-bottom-color: var(--color-border-default);
   }
   .bcn-bmap__surface :global(.leaflet-draw-toolbar a:hover) {
-    background-color: var(--color-surface-sunken);
+    background-color: var(--color-background-elevation-sunken);
   }
   .bcn-bmap__surface :global(.leaflet-bar) {
     border-radius: var(--radius-100);
-    border-color: var(--color-border);
+    border-color: var(--color-border-default);
   }
   .bcn-bmap__surface :global(.leaflet-draw-actions a) {
-    background-color: var(--color-text-primary);
+    background-color: var(--color-content-default);
   }
 
   /* Guidance under the control it explains — meta rung, the 13px floor the sibling
      maps' provenance line already sets. */
   .bcn-bmap__hint {
     margin: 0;
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
     max-width: 68ch;
   }
 
diff --git a/src/components/bcn/BcnCaDotMap.astro b/src/components/bcn/BcnCaDotMap.astro
index 8499d6ed..aab67840 100644
--- a/src/components/bcn/BcnCaDotMap.astro
+++ b/src/components/bcn/BcnCaDotMap.astro
@@ -106,12 +106,12 @@ const mapProjects = DOT_MAP_PROJECTS.map((p) => ({
     box-shadow: 0 0 6px currentColor;
   }
   .bcn-dot-map__name {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
     color: #ffffff;
   }
   .bcn-dot-map__tagline {
-    font-size: var(--type-size-150);
+    font-size: var(--font-size-150);
     font-weight: 300;
     color: rgba(255, 255, 255, 0.6);
     line-height: var(--line-height-normal, 1.5);
diff --git a/src/components/bcn/BcnChallengeGrid.astro b/src/components/bcn/BcnChallengeGrid.astro
index dd2c55cd..49aecbd3 100644
--- a/src/components/bcn/BcnChallengeGrid.astro
+++ b/src/components/bcn/BcnChallengeGrid.astro
@@ -39,34 +39,34 @@ import { CHALLENGES, MARKETING_ICON_PATHS } from '../../data/homepage';
     align-items: flex-start;
     gap: var(--spacing-400);
     padding: var(--spacing-500);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     transition: box-shadow 200ms ease;
   }
   .bcn-challenges__card:hover {
-    box-shadow: var(--shadow-200, 0 0 0.75rem rgba(0, 0, 0, 0.1));
+    box-shadow: var(--elevation-3, 0 0 0.75rem rgba(0, 0, 0, 0.1));
   }
 
   .bcn-challenges__icon {
     display: inline-flex;
-    color: var(--color-primary);
+    color: var(--color-background-brand);
     flex-shrink: 0;
     margin-block-start: 2px;
   }
 
   .bcn-challenges__q {
     margin: 0 0 var(--spacing-200);
-    font-family: var(--font-decorative, var(--font-sans));
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
+    font-family: var(--font-decorative, var(--typography-font-family-sans));
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: var(--line-height-tight, 1.25);
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-challenges__desc {
     margin: 0;
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
     line-height: var(--line-height-relaxed, 1.75);
   }
 
diff --git a/src/components/bcn/BcnChangeLog.astro b/src/components/bcn/BcnChangeLog.astro
index 2d9ad911..5cbd8476 100644
--- a/src/components/bcn/BcnChangeLog.astro
+++ b/src/components/bcn/BcnChangeLog.astro
@@ -52,16 +52,16 @@ const { days } = Astro.props;
 <style>
   .bcn-change-log { list-style: none; margin: 0; padding: 0; }
   /* The left border is the timeline SPINE (a rail), not a status indicator. */
-  .bcn-change-log__day { position: relative; margin-left: 5px; padding: 0 0 var(--spacing-400) var(--spacing-500); border-left: 2px solid var(--color-border); }
+  .bcn-change-log__day { position: relative; margin-left: 5px; padding: 0 0 var(--spacing-400) var(--spacing-500); border-left: 2px solid var(--color-border-default); }
   .bcn-change-log__day:last-child { border-left-color: transparent; padding-bottom: 0; }
-  .bcn-change-log__day::before { content: ''; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-secondary); }
-  .bcn-change-log__date { margin: 0 0 var(--spacing-200); font-size: 0.8125rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
+  .bcn-change-log__day::before { content: ''; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-background-elevation-raised); border: 2px solid var(--color-background-brand-muted); }
+  .bcn-change-log__date { margin: 0 0 var(--spacing-200); font-size: 0.8125rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
   .bcn-change-log__events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-300); }
   .bcn-change-log__event { display: flex; flex-direction: column; gap: 1px; }
-  .bcn-change-log__text { font-size: 0.875rem; line-height: 1.4; color: var(--color-text-primary); }
+  .bcn-change-log__text { font-size: 0.875rem; line-height: 1.4; color: var(--color-content-default); }
   /* The emphasis is the record the event happened ON — a link when the host has a
      route for it, otherwise plain bold. Same weight either way. */
-  .bcn-change-log__target { color: var(--color-text-link); text-decoration: none; }
+  .bcn-change-log__target { color: var(--color-content-link); text-decoration: none; }
   .bcn-change-log__target:hover { text-decoration: underline; }
-  .bcn-change-log__by { font-size: 0.75rem; color: var(--color-text-tertiary); }
+  .bcn-change-log__by { font-size: 0.75rem; color: var(--color-content-default-tertiary); }
 </style>
diff --git a/src/components/bcn/BcnCiaReport.astro b/src/components/bcn/BcnCiaReport.astro
index 3cec9cf9..297ff699 100644
--- a/src/components/bcn/BcnCiaReport.astro
+++ b/src/components/bcn/BcnCiaReport.astro
@@ -190,7 +190,7 @@ const tocEntries: TocEntry[] = [
   <!-- Document utilities. Print is wired locally (it acts on this document);
        anything that navigates is the host's, via the `actions` slot. -->
   <div class="bcn-cia__utilities repel" data-gap="sm">
-    <p class="bcn-cia__utilities-note type-body-small">
+    <p class="bcn-cia__utilities-note typography-body-sm">
       Section structure follows ESA's standard CIA template — Findings and Recommendations per
       resource, permit matrix, explicit limitations.
     </p>
@@ -210,11 +210,11 @@ const tocEntries: TocEntry[] = [
     <!-- ── Table of contents (scroll-spy) ── -->
     <aside class="bcn-cia__aside">
       <nav class="bcn-cia__toc" aria-label="Report contents">
-        <p class="bcn-cia__toc-heading type-body">Contents</p>
+        <p class="bcn-cia__toc-heading typography-body-md">Contents</p>
         <ul class="bcn-cia__toc-list">
           {tocEntries.map((t) => (
             <li class="bcn-cia__toc-item" data-level={t.level}>
-              <a class="bcn-cia__toc-link type-body-small" href={`#${t.id}`} data-toc-for={t.id}>
+              <a class="bcn-cia__toc-link typography-body-sm" href={`#${t.id}`} data-toc-for={t.id}>
                 {t.riskHex && (
                   <span class="bcn-cia__dot" style={`--_risk-dot:${t.riskHex}`} aria-hidden="true"></span>
                 )}
@@ -230,15 +230,15 @@ const tocEntries: TocEntry[] = [
     <article class="bcn-cia__doc stack" data-gap="xl">
       <header class="bcn-cia__masthead stack" data-gap="sm">
         <div class="repel" data-gap="sm" data-align="start">
-          <h1 class="bcn-cia__h1 type-page-title">{title}</h1>
+          <h1 class="bcn-cia__h1 typography-heading-lg">{title}</h1>
           <EsaBadge variant="warning" size="sm" value={statusBadgeLabel} />
         </div>
-        <p class="bcn-cia__subtitle type-body-large">{subtitle}</p>
+        <p class="bcn-cia__subtitle typography-body-lg">{subtitle}</p>
         <dl class="bcn-cia__meta">
           {meta.map((m) => (
             <>
-              <dt class="bcn-cia__meta-term type-body-small">{m.label}</dt>
-              <dd class="bcn-cia__meta-def type-body-small" set:html={m.value} />
+              <dt class="bcn-cia__meta-term typography-body-sm">{m.label}</dt>
+              <dd class="bcn-cia__meta-def typography-body-sm" set:html={m.value} />
             </>
           ))}
         </dl>
@@ -246,12 +246,12 @@ const tocEntries: TocEntry[] = [
 
       <!-- ── Executive summary ── -->
       <section class="bcn-cia__sec stack" data-gap="sm" id="cia-summary">
-        <h2 class="bcn-cia__h2 type-section-title">Executive Summary</h2>
-        {execSummaryParagraphs.map((p) => <p class="bcn-cia__p type-body" set:html={p} />)}
+        <h2 class="bcn-cia__h2 typography-heading-md">Executive Summary</h2>
+        {execSummaryParagraphs.map((p) => <p class="bcn-cia__p typography-body-md" set:html={p} />)}
         {summaryBullets.length > 0 && (
           <>
-            <h3 class="bcn-cia__h4 type-body">Summary of findings</h3>
-            <ul class="bcn-cia__list type-body">
+            <h3 class="bcn-cia__h4 typography-body-md">Summary of findings</h3>
+            <ul class="bcn-cia__list typography-body-md">
               {summaryBullets.map((b) => <li set:html={b} />)}
             </ul>
           </>
@@ -260,18 +260,18 @@ const tocEntries: TocEntry[] = [
 
       <!-- ── 1. Project description ── -->
       <section class="bcn-cia__sec stack" data-gap="sm" id="cia-project">
-        <h2 class="bcn-cia__h2 type-section-title">1. Project Description</h2>
-        {projectDescriptionParagraphs.map((p) => <p class="bcn-cia__p type-body" set:html={p} />)}
+        <h2 class="bcn-cia__h2 typography-heading-md">1. Project Description</h2>
+        {projectDescriptionParagraphs.map((p) => <p class="bcn-cia__p typography-body-md" set:html={p} />)}
       </section>
 
       <!-- ── 2. Methodology ── -->
       <section class="bcn-cia__sec stack" data-gap="sm" id="cia-methodology">
-        <h2 class="bcn-cia__h2 type-section-title">2. Methodology</h2>
-        {methodologyParagraphs.map((p) => <p class="bcn-cia__p type-body" set:html={p} />)}
+        <h2 class="bcn-cia__h2 typography-heading-md">2. Methodology</h2>
+        {methodologyParagraphs.map((p) => <p class="bcn-cia__p typography-body-md" set:html={p} />)}
         {datasetsReviewed.length > 0 && (
           <>
-            <h3 class="bcn-cia__h4 type-body">Datasets reviewed</h3>
-            <ul class="bcn-cia__list type-body">
+            <h3 class="bcn-cia__h4 typography-body-md">Datasets reviewed</h3>
+            <ul class="bcn-cia__list typography-body-md">
               {datasetsReviewed.map((d) => <li set:html={d} />)}
             </ul>
           </>
@@ -280,8 +280,8 @@ const tocEntries: TocEntry[] = [
 
       <!-- ── 3. Environmental characteristics ── -->
       <section class="bcn-cia__sec stack" data-gap="sm" id="cia-findings">
-        <h2 class="bcn-cia__h2 type-section-title">3. Environmental Characteristics</h2>
-        <p class="bcn-cia__p type-body">
+        <h2 class="bcn-cia__h2 typography-heading-md">3. Environmental Characteristics</h2>
+        <p class="bcn-cia__p typography-body-md">
           The following sections summarize findings for each resource area considered in this
           assessment. Each subsection presents <em>Findings</em> from the desktop review, followed by
           <em>Recommendations</em> for the additional study or actions to weigh in subsequent design
@@ -291,27 +291,27 @@ const tocEntries: TocEntry[] = [
 
       {resources.map((r, i) => (
         <section class="bcn-cia__sec bcn-cia__resource stack" data-gap="sm" id={r.id}>
-          <h3 class="bcn-cia__h3 type-card-title">
+          <h3 class="bcn-cia__h3 typography-title">
             <span class="bcn-cia__num">{r.number || `3.${i + 1}`}</span>
             {r.title}
           </h3>
 
           <div class="bcn-cia__resource-summary cluster" data-gap="sm">
-            <span class="bcn-cia__field-label type-body-small">Severity</span>
+            <span class="bcn-cia__field-label typography-body-sm">Severity</span>
             <span class="bcn-cia__risk cluster">
               <span class="bcn-cia__dot" style={`--_risk-dot:${r.riskHex}`} aria-hidden="true"></span>
               <EsaBadge variant={riskVariant(r.risk)} size="sm" value={riskLabel(r.risk)} />
             </span>
             {r.leadAgency && (
               <>
-                <span class="bcn-cia__field-label type-body-small">Lead agency</span>
-                <span class="type-body-small">{r.leadAgency}</span>
+                <span class="bcn-cia__field-label typography-body-sm">Lead agency</span>
+                <span class="typography-body-sm">{r.leadAgency}</span>
               </>
             )}
           </div>
 
-          <h4 class="bcn-cia__h4 type-body">Findings</h4>
-          {r.findings.map((p) => <p class="bcn-cia__p type-body" set:html={p} />)}
+          <h4 class="bcn-cia__h4 typography-body-md">Findings</h4>
+          {r.findings.map((p) => <p class="bcn-cia__p typography-body-md" set:html={p} />)}
 
           {r.aiNote && (
             <div class="bcn-cia__note">
@@ -321,21 +321,21 @@ const tocEntries: TocEntry[] = [
             </div>
           )}
 
-          <h4 class="bcn-cia__h4 type-body">Recommendations</h4>
-          {r.recommendations.map((p) => <p class="bcn-cia__p type-body" set:html={p} />)}
+          <h4 class="bcn-cia__h4 typography-body-md">Recommendations</h4>
+          {r.recommendations.map((p) => <p class="bcn-cia__p typography-body-md" set:html={p} />)}
         </section>
       ))}
 
       <!-- ── 4. Critical issues ── -->
       <section class="bcn-cia__sec stack" data-gap="sm" id="cia-critical">
-        <h2 class="bcn-cia__h2 type-section-title">4. Critical Issues &amp; Recommendations</h2>
+        <h2 class="bcn-cia__h2 typography-heading-md">4. Critical Issues &amp; Recommendations</h2>
         {summaryBullets.length > 0 && (
           <>
-            <p class="bcn-cia__p type-body">
+            <p class="bcn-cia__p typography-body-md">
               The results of the desktop resource evaluation are summarized below. Based on this
               review, the following critical issues have been identified for the Project:
             </p>
-            <ul class="bcn-cia__list type-body">
+            <ul class="bcn-cia__list typography-body-md">
               {summaryBullets.map((b) => <li set:html={b} />)}
             </ul>
           </>
@@ -343,21 +343,21 @@ const tocEntries: TocEntry[] = [
 
         {resourceSummaryRows.length > 0 && (
           <>
-            <h3 class="bcn-cia__h4 type-body">Resource summary</h3>
+            <h3 class="bcn-cia__h4 typography-body-md">Resource summary</h3>
             <div class="bcn-cia__table-scroll">
               <table class="bcn-cia__table">
                 <thead>
                   <tr>
-                    <th class="type-body-small" scope="col" style="width: 26%;">Resource</th>
-                    <th class="type-body-small" scope="col" style="width: 14%;">Severity</th>
-                    <th class="type-body-small" scope="col">Findings &amp; recommendations</th>
+                    <th class="typography-body-sm" scope="col" style="width: 26%;">Resource</th>
+                    <th class="typography-body-sm" scope="col" style="width: 14%;">Severity</th>
+                    <th class="typography-body-sm" scope="col">Findings &amp; recommendations</th>
                   </tr>
                 </thead>
                 <tbody>
                   {resourceSummaryRows.map((row) => (
                     <tr>
-                      <th class="bcn-cia__row-head type-body-small" scope="row" set:html={row.name} />
-                      <td class="type-body-small">
+                      <th class="bcn-cia__row-head typography-body-sm" scope="row" set:html={row.name} />
+                      <td class="typography-body-sm">
                         <span class="bcn-cia__risk cluster">
                           <span
                             class="bcn-cia__dot"
@@ -367,7 +367,7 @@ const tocEntries: TocEntry[] = [
                           <EsaBadge variant={riskVariant(row.risk)} size="sm" value={riskLabel(row.risk)} />
                         </span>
                       </td>
-                      <td class="type-body-small" set:html={row.note} />
+                      <td class="typography-body-sm" set:html={row.note} />
                     </tr>
                   ))}
                 </tbody>
@@ -376,13 +376,13 @@ const tocEntries: TocEntry[] = [
           </>
         )}
 
-        {criticalIssuesNarrative.map((p) => <p class="bcn-cia__p type-body" set:html={p} />)}
+        {criticalIssuesNarrative.map((p) => <p class="bcn-cia__p typography-body-md" set:html={p} />)}
       </section>
 
       <!-- ── 5. Permit & approval matrix ── -->
       <section class="bcn-cia__sec stack" data-gap="sm" id="cia-permits">
-        <h2 class="bcn-cia__h2 type-section-title">5. Permit &amp; Approval Matrix</h2>
-        <p class="bcn-cia__p type-body">
+        <h2 class="bcn-cia__h2 typography-heading-md">5. Permit &amp; Approval Matrix</h2>
+        <p class="bcn-cia__p typography-body-md">
           The table below summarizes the environmental permits and approvals that may be required by
           local, State, and Federal agencies based on this desktop review. Not all permits listed
           will be required; conversely, other permits not listed may become necessary as the Project
@@ -393,24 +393,24 @@ const tocEntries: TocEntry[] = [
           <table class="bcn-cia__table">
             <thead>
               <tr>
-                <th class="type-body-small" scope="col" style="width: 20%;">Agency</th>
-                <th class="type-body-small" scope="col" style="width: 20%;">Permit / approval</th>
-                <th class="type-body-small" scope="col">Requirement</th>
-                <th class="type-body-small" scope="col" style="width: 11rem;">Applicable?</th>
-                {hasReviewStatus && <th class="type-body-small" scope="col" style="width: 9rem;">Review status</th>}
-                <th class="type-body-small" scope="col" style="width: 20%;">Comments</th>
+                <th class="typography-body-sm" scope="col" style="width: 20%;">Agency</th>
+                <th class="typography-body-sm" scope="col" style="width: 20%;">Permit / approval</th>
+                <th class="typography-body-sm" scope="col">Requirement</th>
+                <th class="typography-body-sm" scope="col" style="width: 11rem;">Applicable?</th>
+                {hasReviewStatus && <th class="typography-body-sm" scope="col" style="width: 9rem;">Review status</th>}
+                <th class="typography-body-sm" scope="col" style="width: 20%;">Comments</th>
               </tr>
             </thead>
             <tbody>
               {permits.map((p) => (
                 <tr>
-                  <th class="bcn-cia__row-head type-body-small" scope="row">
+                  <th class="bcn-cia__row-head typography-body-sm" scope="row">
                     <span class="bcn-cia__agency">{p.agency}</span>
-                    <span class="bcn-cia__agency-level type-body-small">{p.level}</span>
+                    <span class="bcn-cia__agency-level typography-body-sm">{p.level}</span>
                   </th>
-                  <td class="type-body-small">{p.name}</td>
-                  <td class="type-body-small" set:html={p.requirement} />
-                  <td class="type-body-small">
+                  <td class="typography-body-sm">{p.name}</td>
+                  <td class="typography-body-sm" set:html={p.requirement} />
+                  <td class="typography-body-sm">
                     <EsaBadge
                       variant={TONE_VARIANT[p.applicabilityTone] ?? 'secondary'}
                       size="sm"
@@ -418,7 +418,7 @@ const tocEntries: TocEntry[] = [
                     />
                   </td>
                   {hasReviewStatus && (
-                    <td class="type-body-small">
+                    <td class="typography-body-sm">
                       {p.reviewStatusLabel && (
                         <EsaBadge
                           variant={p.reviewStatusLabel === 'Confirmed' ? 'success' : 'secondary'}
@@ -428,14 +428,14 @@ const tocEntries: TocEntry[] = [
                       )}
                     </td>
                   )}
-                  <td class="bcn-cia__muted type-body-small" set:html={p.notes} />
+                  <td class="bcn-cia__muted typography-body-sm" set:html={p.notes} />
                 </tr>
               ))}
             </tbody>
           </table>
         </div>
         {liveMatrixHref && (
-          <p class="bcn-cia__muted type-body-small">
+          <p class="bcn-cia__muted typography-body-sm">
             See the <a class="bcn-cia__link" href={liveMatrixHref}>live permit matrix</a> for filters
             and Excel export.
           </p>
@@ -444,14 +444,14 @@ const tocEntries: TocEntry[] = [
 
       <!-- ── 6. Limitations ── -->
       <section class="bcn-cia__sec stack" data-gap="sm" id="cia-limitations">
-        <h2 class="bcn-cia__h2 type-section-title">6. Limitations</h2>
-        <p class="bcn-cia__p type-body">
+        <h2 class="bcn-cia__h2 typography-heading-md">6. Limitations</h2>
+        <p class="bcn-cia__p typography-body-md">
           As noted throughout this report, the assessment of potential issues was limited to publicly
           available desktop information. No onsite surveys or other fieldwork were conducted, and no
           formal coordination or consultation with agencies was undertaken. The conclusions rely on
           the accuracy of the public data currently available.
         </p>
-        <p class="bcn-cia__p type-body">
+        <p class="bcn-cia__p typography-body-md">
           Not all CEQA resources were covered. This assessment evaluates the resource areas most
           likely to drive critical permits or affect scope, schedule, or cost — not the full Appendix
           G inventory. Coverage is summarized below.
@@ -459,14 +459,14 @@ const tocEntries: TocEntry[] = [
         <div class="bcn-cia__limitations grid" data-gap="md">
           {limitations.map((g) => (
             <div class="bcn-cia__limitation stack" data-gap="xs">
-              <p class="bcn-cia__h4 type-body">{g.covered}</p>
-              <ul class="bcn-cia__list type-body">
+              <p class="bcn-cia__h4 typography-body-md">{g.covered}</p>
+              <ul class="bcn-cia__list typography-body-md">
                 {g.items.map((i) => <li set:html={i} />)}
               </ul>
             </div>
           ))}
         </div>
-        <p class="bcn-cia__p type-body">
+        <p class="bcn-cia__p typography-body-md">
           Resources deferred to the CEQA stage will be addressed in the Initial Study or
           Environmental Impact Report prepared during the Planning &amp; Permitting phase.
         </p>
@@ -474,16 +474,16 @@ const tocEntries: TocEntry[] = [
 
       <!-- ── 7. References ── -->
       <section class="bcn-cia__sec stack" data-gap="sm" id="cia-references">
-        <h2 class="bcn-cia__h2 type-section-title">7. References</h2>
-        <ul class="bcn-cia__list type-body">
+        <h2 class="bcn-cia__h2 typography-heading-md">7. References</h2>
+        <ul class="bcn-cia__list typography-body-md">
           {references.map((r) => <li set:html={r} />)}
         </ul>
       </section>
 
       <!-- ── Figures & appendices ── -->
       <section class="bcn-cia__sec stack" data-gap="sm" id="cia-figures">
-        <h2 class="bcn-cia__h2 type-section-title">Figures &amp; Appendices</h2>
-        <ul class="bcn-cia__list type-body">
+        <h2 class="bcn-cia__h2 typography-heading-md">Figures &amp; Appendices</h2>
+        <ul class="bcn-cia__list typography-body-md">
           {figures.map((f) => <li set:html={f} />)}
         </ul>
       </section>
@@ -550,7 +550,7 @@ const tocEntries: TocEntry[] = [
     display: flex;
     flex-direction: column;
     gap: var(--spacing-400);
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
 
   /* ── Document utilities ── */
@@ -558,7 +558,7 @@ const tocEntries: TocEntry[] = [
     --align: center;
   }
   .bcn-cia__utilities-note {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     max-width: 56ch;
   }
 
@@ -574,15 +574,15 @@ const tocEntries: TocEntry[] = [
   .bcn-cia__toc {
     position: sticky;
     top: var(--spacing-400);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     padding: var(--spacing-300);
     max-height: calc(100vh - 8rem);
     overflow-y: auto;
   }
   .bcn-cia__toc-heading {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     font-weight: var(--typography-font-weight-semibold);
     padding: 0 var(--spacing-200) var(--spacing-200);
   }
@@ -597,16 +597,16 @@ const tocEntries: TocEntry[] = [
     gap: var(--spacing-200);
     padding: var(--spacing-150) var(--spacing-200);
     border-radius: var(--radius-100);
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     text-decoration: none;
   }
   .bcn-cia__toc-link:hover {
-    background: var(--color-surface-sunken);
-    color: var(--color-text-primary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-content-default);
   }
   .bcn-cia__toc-link.is-active {
-    background: var(--color-primary-subtle);
-    color: var(--color-primary);
+    background: var(--color-background-brand-subtle);
+    color: var(--color-background-brand);
     font-weight: var(--typography-font-weight-semibold);
   }
   .bcn-cia__toc-item[data-level='2'] .bcn-cia__toc-link {
@@ -623,21 +623,21 @@ const tocEntries: TocEntry[] = [
     width: 0.5rem;
     height: 0.5rem;
     border-radius: var(--radius-full);
-    background: var(--_risk-dot, var(--color-text-muted));
+    background: var(--_risk-dot, var(--bcn-content-muted));
     align-self: center;
   }
 
   /* ── Document surface ── */
   .bcn-cia__doc {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     padding: var(--spacing-650) var(--spacing-700);
     min-width: 0;
   }
 
   .bcn-cia__masthead {
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border-default);
     padding-bottom: var(--spacing-400);
   }
   /* The report voice: Beacon's designated document/serif face, used for the
@@ -645,10 +645,10 @@ const tocEntries: TocEntry[] = [
   .bcn-cia__h1,
   .bcn-cia__h2 {
     font-family: var(--font-decorative);
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-cia__subtitle {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-cia__meta {
     display: grid;
@@ -657,12 +657,12 @@ const tocEntries: TocEntry[] = [
     margin-top: var(--spacing-200);
   }
   .bcn-cia__meta-term {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     font-weight: var(--typography-font-weight-medium);
   }
   .bcn-cia__meta-def {
     margin: 0;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
 
   .bcn-cia__sec {
@@ -671,26 +671,26 @@ const tocEntries: TocEntry[] = [
   }
   .bcn-cia__h2 {
     padding-bottom: var(--spacing-200);
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border-default);
   }
   .bcn-cia__h3 {
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     margin-top: var(--spacing-200);
   }
   .bcn-cia__num {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     margin-right: var(--spacing-250);
   }
   /* Findings / Recommendations / Summary-of-findings. A label is content, not
      decoration — normal case, body size, weight does the work. */
   .bcn-cia__h4 {
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     font-weight: var(--typography-font-weight-semibold);
     margin-top: var(--spacing-200);
   }
   .bcn-cia__p {
     line-height: 1.65;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-cia__list {
     margin: 0;
@@ -701,21 +701,21 @@ const tocEntries: TocEntry[] = [
     gap: var(--spacing-150);
   }
   .bcn-cia__muted {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-cia__link {
-    color: var(--color-primary);
+    color: var(--color-background-brand);
   }
 
   /* ── Per-resource severity strip ── */
   .bcn-cia__resource-summary {
-    background: var(--color-surface-sunken);
-    border: 1px solid var(--color-border-light);
+    background: var(--color-background-elevation-sunken);
+    border: 1px solid var(--color-border-default-subtle);
     border-radius: var(--radius-100);
     padding: var(--spacing-250) var(--spacing-300);
   }
   .bcn-cia__field-label {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     font-weight: var(--typography-font-weight-medium);
   }
   .bcn-cia__risk {
@@ -740,26 +740,26 @@ const tocEntries: TocEntry[] = [
     text-align: left;
     vertical-align: top;
     padding: var(--spacing-250) var(--spacing-300);
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-default-subtle);
     line-height: 1.55;
   }
   .bcn-cia__table thead th {
-    background: var(--color-surface-sunken);
-    color: var(--color-text-secondary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-content-default-secondary);
     font-weight: var(--typography-font-weight-semibold);
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border-default);
     white-space: nowrap;
   }
   .bcn-cia__row-head {
     font-weight: var(--typography-font-weight-semibold);
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-cia__agency {
     display: block;
   }
   .bcn-cia__agency-level {
     display: block;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     font-weight: var(--typography-font-weight-regular);
   }
 
diff --git a/src/components/bcn/BcnCommitmentBadge.astro b/src/components/bcn/BcnCommitmentBadge.astro
index 82b90a54..35a9b3fe 100644
--- a/src/components/bcn/BcnCommitmentBadge.astro
+++ b/src/components/bcn/BcnCommitmentBadge.astro
@@ -30,15 +30,15 @@ const { code, size = 'md', tone = 'commitment' } = Astro.props;
   .bcn-cbadge {
     display: inline-block;
     flex-shrink: 0;
-    font-family: var(--font-mono);
-    font-weight: var(--font-weight-semibold);
+    font-family: var(--typography-font-family-mono);
+    font-weight: var(--typography-font-weight-semibold);
     color: var(--color-commitment);
     background: color-mix(in srgb, var(--color-commitment) 12%, white);
     border-radius: var(--radius-100);
     white-space: nowrap;
   }
   .bcn-cbadge--md {
-    font-size: var(--type-size-100);
+    font-size: var(--font-size-100);
     padding: 1px var(--spacing-200);
   }
   .bcn-cbadge--sm {
@@ -47,7 +47,7 @@ const { code, size = 'md', tone = 'commitment' } = Astro.props;
   }
   /* Same chip, no entity colour — the gray companion. */
   .bcn-cbadge--neutral {
-    font-family: var(--font-sans);
+    font-family: var(--typography-font-family-sans);
     color: var(--bcn-gray-700);
     background: var(--bcn-gray-100);
   }
diff --git a/src/components/bcn/BcnCommitmentRow.astro b/src/components/bcn/BcnCommitmentRow.astro
index 1b42cd1f..956efca6 100644
--- a/src/components/bcn/BcnCommitmentRow.astro
+++ b/src/components/bcn/BcnCommitmentRow.astro
@@ -33,20 +33,20 @@ const { commitment } = Astro.props;
     align-items: center;
     gap: var(--spacing-250);
     padding: var(--spacing-200) var(--spacing-300);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     cursor: pointer;
     transition: border-color 150ms ease, background 150ms ease;
   }
-  .bcn-crow:hover { border-color: var(--color-border-strong); background: var(--color-surface-sunken); }
-  .bcn-crow:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
+  .bcn-crow:hover { border-color: var(--color-border-default-strong); background: var(--color-background-elevation-sunken); }
+  .bcn-crow:focus-visible { outline: 2px solid var(--color-background-brand); outline-offset: 2px; }
 
   .bcn-crow__code {
     flex-shrink: 0;
-    font-family: var(--font-mono);
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-semibold);
+    font-family: var(--typography-font-family-mono);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-semibold);
     color: var(--color-commitment);
     background: color-mix(in srgb, var(--color-commitment) 12%, white);
     padding: 1px var(--spacing-200);
@@ -55,13 +55,13 @@ const { commitment } = Astro.props;
   .bcn-crow__title {
     flex: 1;
     min-width: 0;
-    font-size: var(--type-size-200);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-200);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .bcn-crow__open { flex-shrink: 0; display: inline-flex; color: var(--color-text-tertiary); }
-  .bcn-crow:hover .bcn-crow__open { color: var(--color-secondary); }
+  .bcn-crow__open { flex-shrink: 0; display: inline-flex; color: var(--color-content-default-tertiary); }
+  .bcn-crow:hover .bcn-crow__open { color: var(--color-background-brand-muted); }
 </style>
diff --git a/src/components/bcn/BcnComponentDataPanel.astro b/src/components/bcn/BcnComponentDataPanel.astro
index b6b16080..46b44043 100644
--- a/src/components/bcn/BcnComponentDataPanel.astro
+++ b/src/components/bcn/BcnComponentDataPanel.astro
@@ -75,19 +75,19 @@ const STATUS_OPTIONS = JSON.stringify(
   data-cdp-root
   data-cdp-confirm={confirmId}
   position="right"
-  style="--_width: min(480px, 94vw); --z-modal: 1300; --z-modal-backdrop: 1250; --backdrop-filter: blur(4px);"
+  style="--_width: min(480px, 94vw); --z-modal: 1300; --z-modal-backdrop: 1250; --side-dialog-backdrop-filter: blur(4px);"
 >
   <!-- Panel FOOTER. Only the editable keys get one; the controller re-slots this
        span to 'void' for sources / layers, which collapses the lego's footer bar.
        Save sits LEFT of Cancel (Windows order — the house rule). -->
   <span slot="footer" data-cdp-foot class="bcn-cdp__foot">
     <span data-cdp-foot-for="component-info" class="bcn-cdp__foot-actions" hidden>
-      <span data-cdp-save><EsaButton color="primary">Save</EsaButton></span>
-      <span data-cdp-cancel><EsaButton color="ghost">Cancel</EsaButton></span>
+      <span data-cdp-save><EsaButton variant="primary">Save</EsaButton></span>
+      <span data-cdp-cancel><EsaButton variant="ghost">Cancel</EsaButton></span>
     </span>
     <span data-cdp-foot-for="milestones" class="bcn-cdp__foot-actions" hidden>
-      <span data-cdp-save><EsaButton color="primary">Save dates</EsaButton></span>
-      <span data-cdp-cancel><EsaButton color="ghost">Cancel</EsaButton></span>
+      <span data-cdp-save><EsaButton variant="primary">Save dates</EsaButton></span>
+      <span data-cdp-cancel><EsaButton variant="ghost">Cancel</EsaButton></span>
     </span>
   </span>
 
@@ -122,7 +122,7 @@ const STATUS_OPTIONS = JSON.stringify(
         title="Delete this component"
         description="Removes the component, its work areas, its milestone dates, and its commitment applicability decisions from Beacon."
       >
-        <span data-cdp-delete><EsaButton color="danger" appearance="soft">Delete component</EsaButton></span>
+        <span data-cdp-delete><EsaButton variant="danger" appearance="soft">Delete component</EsaButton></span>
       </BcnDangerZone>
     </div>
   </section>
@@ -153,7 +153,7 @@ const STATUS_OPTIONS = JSON.stringify(
                   Inherited
                 </span>
                 <span class="bcn-cdp__revert" data-cdp-ms-clear hidden={!m.componentDate}>
-                  <EsaButton color="ghost" size="sm" icon="rotate-ccw" aria-label={`Use the project date for ${m.name}`}>
+                  <EsaButton variant="ghost" size="sm" icon="rotate-ccw" aria-label={`Use the project date for ${m.name}`}>
                     Use project date
                   </EsaButton>
                 </span>
@@ -313,8 +313,8 @@ const STATUS_OPTIONS = JSON.stringify(
     flex-direction: column;
     gap: var(--spacing-200);
     padding: var(--spacing-300);
-    background: var(--color-surface-sunken);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-sunken);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
   }
   .bcn-cdp__row--inline {
@@ -337,14 +337,14 @@ const STATUS_OPTIONS = JSON.stringify(
   .bcn-cdp__row-name {
     flex: 1;
     min-width: 0;
-    font-size: var(--form-font-size-md);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--typography-label-md-font-size);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     line-height: var(--line-height-tight);
   }
   .bcn-cdp__row-sub {
-    font-size: var(--type-size-150);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-tertiary);
     line-height: var(--line-height-tight);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -353,7 +353,7 @@ const STATUS_OPTIONS = JSON.stringify(
   .bcn-cdp__row-icon {
     display: inline-flex;
     flex-shrink: 0;
-    color: var(--color-text-muted);
+    color: var(--bcn-content-muted);
   }
   p.bcn-cdp__row-sub {
     margin: 0;
@@ -363,8 +363,8 @@ const STATUS_OPTIONS = JSON.stringify(
   /* Inheriting rows say so in a quiet word — no colored border, no micro-label. */
   .bcn-cdp__state {
     flex-shrink: 0;
-    font-size: var(--type-size-150);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-cdp__state[hidden],
   .bcn-cdp__revert[hidden] {
@@ -378,12 +378,12 @@ const STATUS_OPTIONS = JSON.stringify(
   .bcn-cdp__code {
     flex-shrink: 0;
     padding: 1px var(--spacing-200);
-    font-family: var(--font-mono);
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border-light);
+    font-family: var(--typography-font-family-mono);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-secondary);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default-subtle);
     border-radius: var(--radius-100);
   }
 
@@ -393,13 +393,13 @@ const STATUS_OPTIONS = JSON.stringify(
     align-items: center;
     gap: var(--spacing-300);
     padding: var(--spacing-300);
-    background: var(--color-surface-sunken);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-sunken);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     text-decoration: none;
   }
   .bcn-cdp__link-row:hover {
-    border-color: var(--color-border-strong);
+    border-color: var(--color-border-default-strong);
   }
 
   /* esa-switch-toggle's only accessible name is its own label; the layer name is
@@ -414,37 +414,37 @@ const STATUS_OPTIONS = JSON.stringify(
     white-space: nowrap;
   }
   .bcn-cdp__link-row:hover .bcn-cdp__row-name {
-    color: var(--color-primary);
+    color: var(--color-background-brand);
   }
 
   /* ── Milestone header count + the Spatial Library field ── */
   .bcn-cdp__count {
-    font-size: var(--form-font-size-md);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--typography-label-md-font-size);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .bcn-cdp__lede,
   .bcn-cdp__zone {
     padding-bottom: var(--spacing-300);
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-default-subtle);
   }
   .bcn-cdp__zone {
     padding-bottom: 0;
     padding-top: var(--spacing-300);
     border-bottom: 0;
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .bcn-cdp__zone-link {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-100);
-    font-size: var(--form-font-size-md);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-primary);
+    font-size: var(--typography-label-md-font-size);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-background-brand);
     text-decoration: none;
   }
   .bcn-cdp__zone-link:hover {
-    color: var(--color-primary-hover);
+    color: var(--color-background-brand-hover);
   }
 
   /* ── Forms ── */
@@ -466,13 +466,13 @@ const STATUS_OPTIONS = JSON.stringify(
   }
   .bcn-cdp__group-title {
     margin: 0;
-    font-size: var(--type-size-200);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-200);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .bcn-cdp__danger {
     padding-top: var(--spacing-500);
     margin-top: var(--spacing-300);
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
 </style>
diff --git a/src/components/bcn/BcnComponentGrid.astro b/src/components/bcn/BcnComponentGrid.astro
index 4878f6da..5f9ce4fd 100644
--- a/src/components/bcn/BcnComponentGrid.astro
+++ b/src/components/bcn/BcnComponentGrid.astro
@@ -332,7 +332,7 @@ const rows = byNeedsAttention(components).map((c) => {
     block-size: 24px;
     flex-shrink: 0;
     border-radius: var(--radius-100);
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
     color: var(--_mark);
   }
 
@@ -347,10 +347,10 @@ const rows = byNeedsAttention(components).map((c) => {
     border-radius: var(--radius-100);
     font-size: 0.875rem;
     line-height: 1.5;
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--typography-font-weight-medium);
     white-space: nowrap;
     background: color-mix(in srgb, var(--_tone, #bdbdbd) 16%, transparent);
-    color: color-mix(in srgb, var(--_tone, #bdbdbd) 70%, var(--color-text-primary));
+    color: color-mix(in srgb, var(--_tone, #bdbdbd) 70%, var(--color-content-default));
   }
   .bcn-cg :global(.bcn-cg__chip::before) {
     content: '';
@@ -360,18 +360,18 @@ const rows = byNeedsAttention(components).map((c) => {
     background: var(--_tone, #bdbdbd);
   }
   .bcn-cg :global(.bcn-cg__chip[data-tone='not-started']) { --_tone: var(--bcn-status-not-started, #bdbdbd); }
-  .bcn-cg :global(.bcn-cg__chip[data-tone='in-progress']) { --_tone: var(--color-warning, #f59e0b); }
+  .bcn-cg :global(.bcn-cg__chip[data-tone='in-progress']) { --_tone: var(--color-background-utility-warning, #f59e0b); }
   .bcn-cg :global(.bcn-cg__chip[data-tone='on-hold'])     { --_tone: var(--bcn-status-on-hold, #656565); }
-  .bcn-cg :global(.bcn-cg__chip[data-tone='complete'])    { --_tone: var(--color-success, #2e7571); }
+  .bcn-cg :global(.bcn-cg__chip[data-tone='complete'])    { --_tone: var(--color-background-utility-success, #2e7571); }
 
   .bcn-cg :global(.bcn-cg__name) {
-    color: var(--color-text-link);
+    color: var(--color-content-link);
     text-decoration: underline;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .bcn-cg :global(.bcn-cg__name:hover) {
-    color: var(--color-primary-hover);
+    color: var(--color-background-brand-hover);
   }
 
   .bcn-cg :global(.bcn-cg__num) {
@@ -380,10 +380,10 @@ const rows = byNeedsAttention(components).map((c) => {
   /* Darken as you shrink, never gray out: an em-dash placeholder is the one thing
      here that genuinely is absence, so it alone recedes. */
   .bcn-cg :global(.bcn-cg__quiet) {
-    color: var(--color-text-muted);
+    color: var(--bcn-content-muted);
   }
   .bcn-cg :global(.bcn-cg__danger) {
-    color: var(--color-danger-strong);
-    font-weight: var(--font-weight-semibold);
+    color: var(--color-content-utility-danger);
+    font-weight: var(--typography-font-weight-semibold);
   }
 </style>
diff --git a/src/components/bcn/BcnComponentHeader.astro b/src/components/bcn/BcnComponentHeader.astro
index 573ee96d..b02f0fd2 100644
--- a/src/components/bcn/BcnComponentHeader.astro
+++ b/src/components/bcn/BcnComponentHeader.astro
@@ -54,7 +54,7 @@
 // inside it is a lego.
 import BcnEntityLogo from './BcnEntityLogo.astro';
 import BcnStatusChip from './BcnStatusChip.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import type { ComponentRecord } from '../../data/component-detail';
 
 interface Props {
@@ -81,7 +81,7 @@ const fmtDate = (iso: string): string => {
 // current state (brand primary, like the project's phase chip), Complete is the
 // one status that earns success green, and On Hold recedes.
 const STATUS_TONE: Record<ComponentRecord['status'], { key: string; hex: string }> = {
-  Active: { key: 'active', hex: 'var(--color-primary)' },
+  Active: { key: 'active', hex: 'var(--color-background-brand)' },
   'On Hold': { key: 'on-hold', hex: 'var(--bcn-status-not-started)' },
   Complete: { key: 'complete', hex: 'var(--bcn-status-completed)' },
 };
@@ -107,7 +107,7 @@ const starLabel = starred ? `Unstar ${component.name}` : `Star ${component.name}
            and drops unknown attributes, so a data-* on the lego goes nowhere.
            The click bubbles out of the button to this span. -->
       <span class="bcn-chd__logo-edit" data-logo-edit>
-        <EsaIconButton icon="pencil" label="Change component logo" size="sm" />
+        <EsaIconButton variant="chrome" iconOnly icon="pencil" label="Change component logo" size="sm" />
       </span>
     </span>
 
@@ -119,10 +119,10 @@ const starLabel = starred ? `Unstar ${component.name}` : `Star ${component.name}
         the far edge, so the three things about THIS component read as one group. */}
     <div class="bcn-chd__ident">
       <div class="bcn-chd__title-row">
-        <h1 class="bcn-chd__name type-page-title">{component.name}</h1>
+        <h1 class="bcn-chd__name typography-heading-lg">{component.name}</h1>
         <BcnStatusChip status={tone.key} label={component.status} hex={tone.hex} />
         <span class="bcn-chd__star" data-star-toggle data-pressed={String(starred)} data-name={component.name}>
-          <EsaIconButton icon="star" label={starLabel} size="md" />
+          <EsaIconButton variant="chrome" iconOnly icon="star" label={starLabel} size="md" />
         </span>
       </div>
     </div>
@@ -181,8 +181,8 @@ const starLabel = starred ? `Unstar ${component.name}` : `Star ${component.name}
     flex-direction: column;
     gap: var(--spacing-300);
     padding: var(--spacing-200) var(--spacing-600);
-    background: var(--color-surface);
-    border-bottom: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border-bottom: 1px solid var(--color-border-default);
   }
 
   /* The eyebrow / wayfinding rules that lived here are gone with the markup —
@@ -221,9 +221,9 @@ const starLabel = starred ? `Unstar ${component.name}` : `Star ${component.name}
     bottom: calc(var(--spacing-150) * -1);
     display: inline-flex;
     border-radius: var(--radius-full);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    color: var(--color-text-secondary);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
+    color: var(--color-content-default-secondary);
     opacity: 0;
     transition: opacity 150ms ease;
   }
@@ -254,12 +254,12 @@ const starLabel = starred ? `Unstar ${component.name}` : `Star ${component.name}
   }
   .bcn-chd__name {
     margin: 0;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-chd__desc {
     margin: 0;
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
   }
   .bcn-chd__facts {
     display: flex;
@@ -267,15 +267,15 @@ const starLabel = starred ? `Unstar ${component.name}` : `Star ${component.name}
     gap: var(--spacing-150);
     flex-wrap: wrap;
     margin: 0;
-    font-size: var(--type-size-150);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-chd__fact-value {
-    color: var(--color-text-secondary);
-    font-weight: var(--font-weight-medium);
+    color: var(--color-content-default-secondary);
+    font-weight: var(--typography-font-weight-medium);
   }
   .bcn-chd__dot-sep {
-    color: var(--color-border-strong);
+    color: var(--color-border-default-strong);
   }
 
   .bcn-chd__actions {
@@ -287,7 +287,7 @@ const starLabel = starred ? `Unstar ${component.name}` : `Star ${component.name}
   }
   /* Pressed = the user's own star (per-user, never a team designation). */
   .bcn-chd__star :global(button[aria-pressed='true']) {
-    color: var(--color-warning);
+    color: var(--color-background-utility-warning);
   }
   .bcn-chd__star :global(button[aria-pressed='true'] svg) {
     fill: currentColor;
diff --git a/src/components/bcn/BcnComponentSetupCard.astro b/src/components/bcn/BcnComponentSetupCard.astro
index 2d5b3580..180b73a6 100644
--- a/src/components/bcn/BcnComponentSetupCard.astro
+++ b/src/components/bcn/BcnComponentSetupCard.astro
@@ -77,7 +77,7 @@ const {
 
     <div class="bcn-csc__foot">
       <span data-opens={opensPrimary}>
-        <EsaButton color="primary">Review commitments</EsaButton>
+        <EsaButton variant="primary">Review commitments</EsaButton>
       </span>
     </div>
   </div>
diff --git a/src/components/bcn/BcnComponentSummary.astro b/src/components/bcn/BcnComponentSummary.astro
index df13274e..5161bbf4 100644
--- a/src/components/bcn/BcnComponentSummary.astro
+++ b/src/components/bcn/BcnComponentSummary.astro
@@ -64,7 +64,7 @@ const breakdownAria = summary.breakdown
 
   <EsaCard title="Needs attention">
     <div class="bcn-summary__attention">
-      <div style={summary.attentionCount > 0 ? '--stat-value-color: var(--color-danger-strong)' : undefined}>
+      <div style={summary.attentionCount > 0 ? '--stat-value-color: var(--color-content-utility-danger)' : undefined}>
         <EsaStat value={summary.attentionCount} label="Components with overdue actions" />
       </div>
 
@@ -106,11 +106,11 @@ const breakdownAria = summary.breakdown
     min-width: 22px;
     height: 22px;
     padding: 0 var(--spacing-150);
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-secondary);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-secondary);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-100);
     font-variant-numeric: tabular-nums;
   }
@@ -123,7 +123,7 @@ const breakdownAria = summary.breakdown
     border-radius: var(--radius-full);
     overflow: hidden;
     display: flex;
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
   .bcn-summary__seg { height: 100%; background: var(--_c); }
 
@@ -132,11 +132,11 @@ const breakdownAria = summary.breakdown
     display: flex;
     align-items: center;
     gap: var(--spacing-200);
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
   }
   .bcn-summary__dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--_c); flex-shrink: 0; }
-  .bcn-summary__legend-count { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
+  .bcn-summary__legend-count { font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); font-variant-numeric: tabular-nums; }
 
   /* attention lane */
   .bcn-summary__attention { display: flex; flex-direction: column; }
@@ -144,33 +144,33 @@ const breakdownAria = summary.breakdown
     list-style: none;
     margin: var(--spacing-400) 0 0;
     padding: var(--spacing-400) 0 0;
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
     display: flex;
     flex-direction: column;
     gap: var(--spacing-200);
   }
   .bcn-summary__att-row { display: flex; align-items: center; gap: var(--spacing-200); justify-content: space-between; }
-  .bcn-summary__att-name { font-size: var(--type-size-150); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .bcn-summary__att-name { font-size: var(--font-size-150); color: var(--color-content-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .bcn-summary__att-flag {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-100);
     padding: 1px var(--spacing-200);
     border-radius: var(--radius-100);
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-danger-strong);
-    background: color-mix(in srgb, var(--color-danger) 12%, white);
-    border: 1px solid color-mix(in srgb, var(--color-danger) 26%, white);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-utility-danger);
+    background: color-mix(in srgb, var(--color-background-utility-danger) 12%, white);
+    border: 1px solid color-mix(in srgb, var(--color-background-utility-danger) 26%, white);
     white-space: nowrap;
     flex-shrink: 0;
   }
-  .bcn-summary__att-more { font-size: var(--type-size-100); color: var(--color-text-muted); }
+  .bcn-summary__att-more { font-size: var(--font-size-100); color: var(--bcn-content-muted); }
   .bcn-summary__att-clear {
     margin: var(--spacing-400) 0 0;
     padding: var(--spacing-400) 0 0;
-    border-top: 1px solid var(--color-border-light);
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    border-top: 1px solid var(--color-border-default-subtle);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
   }
 </style>
diff --git a/src/components/bcn/BcnConsultationLog.astro b/src/components/bcn/BcnConsultationLog.astro
index 426d5c16..548cf64c 100644
--- a/src/components/bcn/BcnConsultationLog.astro
+++ b/src/components/bcn/BcnConsultationLog.astro
@@ -36,7 +36,7 @@ for (const entry of entries) {
 <div class="bcn-consultation-log">
   {addable && (
     <div class="bcn-consultation-log__add">
-      <EsaButton color="secondary" appearance="outline" size="sm" icon="plus">
+      <EsaButton variant="secondary" appearance="outline" size="sm" icon="plus">
         Log consultation
       </EsaButton>
     </div>
@@ -84,7 +84,7 @@ for (const entry of entries) {
     position: relative;
     margin-left: 5px;
     padding: 0 0 var(--spacing-400) var(--spacing-500);
-    border-left: 2px solid var(--color-border);
+    border-left: 2px solid var(--color-border-default);
   }
   .bcn-consultation-log__day:last-child { border-left-color: transparent; padding-bottom: 0; }
   .bcn-consultation-log__day::before {
@@ -95,15 +95,15 @@ for (const entry of entries) {
     width: 10px;
     height: 10px;
     border-radius: 50%;
-    background: var(--color-surface);
-    border: 2px solid var(--color-secondary);
+    background: var(--color-background-elevation-raised);
+    border: 2px solid var(--color-background-brand-muted);
   }
 
   .bcn-consultation-log__date {
     margin: 0 0 var(--spacing-200);
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
 
   .bcn-consultation-log__entries {
@@ -123,8 +123,8 @@ for (const entry of entries) {
     margin: 0;
     font-size: 1rem;
     line-height: 1.45;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
 
-  .bcn-consultation-log__by { font-size: 0.75rem; color: var(--color-text-tertiary); }
+  .bcn-consultation-log__by { font-size: 0.75rem; color: var(--color-content-default-tertiary); }
 </style>
diff --git a/src/components/bcn/BcnContrastPanels.astro b/src/components/bcn/BcnContrastPanels.astro
index 714091d2..45feb66e 100644
--- a/src/components/bcn/BcnContrastPanels.astro
+++ b/src/components/bcn/BcnContrastPanels.astro
@@ -92,16 +92,16 @@ import { CONTRAST_WITHOUT, CONTRAST_WITH, CONTRAST_MOCK_ROWS } from '../../data/
   .bcn-contrast__card {
     border-radius: var(--radius-200);
     padding: var(--spacing-600);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     overflow: hidden;
   }
   .bcn-contrast__card--before {
-    background: var(--color-danger-subtle);
-    border-color: var(--color-danger-border);
+    background: var(--color-background-utility-danger-subtle);
+    border-color: var(--color-border-utility-danger);
   }
   .bcn-contrast__card--after {
-    background: var(--color-success-subtle);
-    border-color: var(--color-success-border);
+    background: var(--color-background-utility-success-subtle);
+    border-color: var(--color-border-utility-success);
   }
 
   /* Full-bleed media strip across the card's top. */
@@ -120,14 +120,14 @@ import { CONTRAST_WITHOUT, CONTRAST_WITH, CONTRAST_MOCK_ROWS } from '../../data/
     align-items: center;
     gap: var(--spacing-200);
     margin-block-end: var(--spacing-400);
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-semibold);
   }
   .bcn-contrast__card--before .bcn-contrast__title {
-    color: var(--color-danger-strong);
+    color: var(--color-content-utility-danger);
   }
   .bcn-contrast__card--after .bcn-contrast__title {
-    color: var(--color-success-strong);
+    color: var(--color-content-utility-success);
   }
 
   .bcn-contrast__list {
@@ -142,7 +142,7 @@ import { CONTRAST_WITHOUT, CONTRAST_WITH, CONTRAST_MOCK_ROWS } from '../../data/
     display: flex;
     align-items: flex-start;
     gap: var(--spacing-300);
-    font-size: var(--type-size-200);
+    font-size: var(--font-size-200);
     line-height: var(--line-height-normal, 1.5);
   }
   .bcn-contrast__glyph {
@@ -151,10 +151,10 @@ import { CONTRAST_WITHOUT, CONTRAST_WITH, CONTRAST_MOCK_ROWS } from '../../data/
     margin-block-start: 2px;
   }
   .bcn-contrast__card--before .bcn-contrast__glyph {
-    color: var(--color-danger);
+    color: var(--color-background-utility-danger);
   }
   .bcn-contrast__card--after .bcn-contrast__glyph {
-    color: var(--color-success);
+    color: var(--color-background-utility-success);
   }
 
   /* ── The illustrative dark product-window mock (artwork literals) ── */
@@ -175,7 +175,7 @@ import { CONTRAST_WITHOUT, CONTRAST_WITH, CONTRAST_MOCK_ROWS } from '../../data/
     background: rgba(255, 255, 255, 0.06);
     border-radius: var(--radius-100);
     margin-block-end: var(--spacing-300);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--typography-font-weight-medium);
     font-size: 11px;
     color: #989898;
   }
@@ -183,7 +183,7 @@ import { CONTRAST_WITHOUT, CONTRAST_WITH, CONTRAST_MOCK_ROWS } from '../../data/
     inline-size: 8px;
     block-size: 8px;
     border-radius: 50%;
-    background: var(--color-primary);
+    background: var(--color-background-brand);
   }
   .bcn-contrast__mock-row {
     display: flex;
@@ -214,7 +214,7 @@ import { CONTRAST_WITHOUT, CONTRAST_WITH, CONTRAST_MOCK_ROWS } from '../../data/
   }
   .bcn-contrast__mock-badge {
     font-size: 10px;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     padding: 2px 8px;
     border-radius: var(--radius-full, 9999px);
     white-space: nowrap;
diff --git a/src/components/bcn/BcnCount.astro b/src/components/bcn/BcnCount.astro
index 74f8606d..591a03cd 100644
--- a/src/components/bcn/BcnCount.astro
+++ b/src/components/bcn/BcnCount.astro
@@ -39,10 +39,10 @@ const { value, label } = Astro.props;
     /* 13px — the design-principles meta floor; no token exists at this step
        (150 = 14px read too big beside card titles — Andy, round 3). */
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-secondary);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-100);
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
diff --git a/src/components/bcn/BcnCountChip.astro b/src/components/bcn/BcnCountChip.astro
index 7dcf52f9..c1480bc3 100644
--- a/src/components/bcn/BcnCountChip.astro
+++ b/src/components/bcn/BcnCountChip.astro
@@ -84,7 +84,7 @@ const hookAttr = hook ? { [hook]: '' } : {};
     justify-content: center;
     width: 100%;
     height: 100%;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     /* 18px — a step OFF the scale on purpose. esa-icon jumps sm(16) to md(20), and 16 was
        too small here (it was the previous setting) while 20 is a shade too heavy beside a
        15px bubble. Re-pointed through the lego own --icon-size-md rather than styling the
@@ -113,10 +113,10 @@ const hookAttr = hook ? { [hook]: '' } : {};
        reads: the named variants (success, info, …) assign the badge's internal fill
        directly and would silently ignore both. */
     /* SOLID, no outline. Without a border the fill has to carry the shape on its own, so
-       it steps from --color-surface-sunken (#efefef, which needed the border to read) to
-       --color-border (#dcdcdc) — still grey, still quiet, but definite against the card. */
-    --badge-bg: var(--color-border);
-    --badge-text-color: var(--color-text-secondary);
+       it steps from --color-background-elevation-sunken (#efefef, which needed the border to read) to
+       --color-border-default (#dcdcdc) — still grey, still quiet, but definite against the card. */
+    --badge-bg: var(--color-border-default);
+    --badge-text-color: var(--color-content-default-secondary);
     min-width: 19px;
     height: 19px;
     padding: 0 4px;
@@ -132,7 +132,7 @@ const hookAttr = hook ? { [hook]: '' } : {};
     line-height: 1;
     /* A ring in the card's own surface colour punches the bubble out of the glyph beneath
        it — without it the two shapes merge at small sizes. */
-    box-shadow: 0 0 0 1.5px var(--color-surface);
+    box-shadow: 0 0 0 1.5px var(--color-background-elevation-raised);
   }
   /* The visible chip is a glyph and a digit; this is the sentence it stands for. */
   .bcn-countchip__sr {
diff --git a/src/components/bcn/BcnCtaPaths.astro b/src/components/bcn/BcnCtaPaths.astro
index cde282b9..80af5741 100644
--- a/src/components/bcn/BcnCtaPaths.astro
+++ b/src/components/bcn/BcnCtaPaths.astro
@@ -22,7 +22,7 @@ import { CTA_PATHS, MARKETING_ICON_PATHS } from '../../data/homepage';
         </div>
         <div class="bcn-cta-paths__title">{path.title}</div>
         <div class="bcn-cta-paths__desc">{path.description}</div>
-        <EsaButton color="primary" appearance="fill" href={path.button.href}>
+        <EsaButton variant="primary" appearance="fill" href={path.button.href}>
           {path.button.label}
         </EsaButton>
       </div>
@@ -43,8 +43,8 @@ import { CTA_PATHS, MARKETING_ICON_PATHS } from '../../data/homepage';
     align-items: center;
     text-align: center;
     padding: var(--spacing-700) var(--spacing-500);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     box-shadow:
       0 1px 2px rgba(0, 0, 0, 0.06),
@@ -52,7 +52,7 @@ import { CTA_PATHS, MARKETING_ICON_PATHS } from '../../data/homepage';
   }
 
   .bcn-cta-paths__card--featured {
-    border-color: var(--color-primary);
+    border-color: var(--color-background-brand);
     border-width: 2px;
     position: relative;
   }
@@ -63,10 +63,10 @@ import { CTA_PATHS, MARKETING_ICON_PATHS } from '../../data/homepage';
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 10px;
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--typography-font-weight-bold);
     letter-spacing: 1px;
     color: #ffffff;
-    background: var(--color-primary);
+    background: var(--color-background-brand);
     padding: var(--spacing-100) var(--spacing-300);
     border-radius: var(--radius-full, 9999px);
   }
@@ -75,8 +75,8 @@ import { CTA_PATHS, MARKETING_ICON_PATHS } from '../../data/homepage';
     inline-size: 56px;
     block-size: 56px;
     border-radius: var(--radius-full, 9999px);
-    background: var(--color-primary-subtle, #effefb);
-    color: var(--color-primary);
+    background: var(--color-background-brand-subtle, #effefb);
+    color: var(--color-background-brand);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -85,13 +85,13 @@ import { CTA_PATHS, MARKETING_ICON_PATHS } from '../../data/homepage';
   }
 
   .bcn-cta-paths__title {
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-semibold);
     margin-block-end: var(--spacing-300);
   }
   .bcn-cta-paths__desc {
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
     line-height: var(--line-height-relaxed, 1.75);
     margin-block-end: var(--spacing-500);
     flex: 1;
diff --git a/src/components/bcn/BcnDangerZone.astro b/src/components/bcn/BcnDangerZone.astro
index d1971b7c..5d65aeb2 100644
--- a/src/components/bcn/BcnDangerZone.astro
+++ b/src/components/bcn/BcnDangerZone.astro
@@ -39,17 +39,17 @@ const headingId = `bcn-danger-zone-${++nextId}`;
 
 <style>
   .bcn-danger-zone { display: flex; flex-direction: column; gap: var(--spacing-300); }
-  .bcn-danger-zone__heading { margin: 0; font-size: var(--type-size-250); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
+  .bcn-danger-zone__heading { margin: 0; font-size: var(--font-size-250); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
   .bcn-danger-zone__box {
     padding: var(--spacing-500);
-    border: 1px solid var(--color-danger);
+    border: 1px solid var(--color-background-utility-danger);
     border-radius: var(--radius-200);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
   }
   .bcn-danger-zone__item { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-400); }
   .bcn-danger-zone__text { display: flex; flex-direction: column; gap: var(--spacing-100); min-width: 0; }
-  .bcn-danger-zone__title { margin: 0; font-size: var(--form-font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-danger-zone__desc { margin: 0; font-size: var(--form-font-size-md); color: var(--color-text-secondary); }
+  .bcn-danger-zone__title { margin: 0; font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-danger-zone__desc { margin: 0; font-size: var(--typography-label-md-font-size); color: var(--color-content-default-secondary); }
   .bcn-danger-zone__action { flex-shrink: 0; }
 
   @media (max-width: 640px) {
diff --git a/src/components/bcn/BcnDemoDialog.astro b/src/components/bcn/BcnDemoDialog.astro
index 2df979c9..fe60cd54 100644
--- a/src/components/bcn/BcnDemoDialog.astro
+++ b/src/components/bcn/BcnDemoDialog.astro
@@ -25,7 +25,7 @@ const INTERESTS = [
 
 <esa-dialog id="bcn-demo-dialog" heading="Schedule a demo" size="md">
   <form class="stack" data-gap="md" id="bcn-demo-form" novalidate>
-    <p class="type-body bcn-demo__lede">
+    <p class="typography-body-md bcn-demo__lede">
       Tell us about your project and we'll set up a walkthrough with the Beacon team.
     </p>
 
@@ -46,8 +46,8 @@ const INTERESTS = [
   </form>
 
   <div class="stack" data-gap="sm" id="bcn-demo-done" hidden>
-    <p class="type-card-title">Thanks — we'll be in touch.</p>
-    <p class="type-body">
+    <p class="typography-title">Thanks — we'll be in touch.</p>
+    <p class="typography-body-md">
       Someone from the Beacon team will reach out within two business days to schedule your
       walkthrough.
     </p>
@@ -57,11 +57,11 @@ const INTERESTS = [
     <!-- Wrapper spans, not the buttons themselves: `hidden` on an <EsaButton> reaches
          only the native control, leaving the styled .esa-button wrapper on screen. -->
     <span class="cluster" data-gap="sm" id="bcn-demo-actions">
-      <EsaButton color="ghost" appearance="soft" type="button" id="bcn-demo-cancel">Cancel</EsaButton>
-      <EsaButton color="primary" type="button" id="bcn-demo-submit">Send request</EsaButton>
+      <EsaButton variant="ghost" appearance="soft" type="button" id="bcn-demo-cancel">Cancel</EsaButton>
+      <EsaButton variant="primary" type="button" id="bcn-demo-submit">Send request</EsaButton>
     </span>
     <span id="bcn-demo-close-wrap" hidden>
-      <EsaButton color="primary" type="button" id="bcn-demo-close">Close</EsaButton>
+      <EsaButton variant="primary" type="button" id="bcn-demo-close">Close</EsaButton>
     </span>
   </span>
 </esa-dialog>
@@ -173,11 +173,11 @@ const INTERESTS = [
 
   .bcn-demo__lede {
     margin: 0;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
-  #bcn-demo-done .type-card-title,
-  #bcn-demo-done .type-body {
+  #bcn-demo-done .typography-title,
+  #bcn-demo-done .typography-body-md {
     margin: 0;
   }
 </style>
diff --git a/src/components/bcn/BcnDetailAssignments.astro b/src/components/bcn/BcnDetailAssignments.astro
index f42a08e8..407161e7 100644
--- a/src/components/bcn/BcnDetailAssignments.astro
+++ b/src/components/bcn/BcnDetailAssignments.astro
@@ -73,7 +73,7 @@ const statusMeta = statusOptions.find((o) => o.value === statusValue);
       </template>
 
       <span class="bcn-dassign__edit" data-da-edit>
-        <EsaButton color="ghost" appearance="outline" size="sm" icon="pencil">Edit assignments</EsaButton>
+        <EsaButton variant="ghost" appearance="outline" size="sm" icon="pencil">Edit assignments</EsaButton>
       </span>
     </>
   )}
@@ -115,14 +115,14 @@ const statusMeta = statusOptions.find((o) => o.value === statusValue);
   }
   /* Mirrors bcn-key-value's label → value tier exactly (one KV treatment). */
   .bcn-dassign__k {
-    font-size: var(--form-font-size-md, 0.9375rem);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--typography-label-md-font-size, 0.9375rem);
+    font-weight: var(--typography-font-weight-medium);
     color: var(--form-label-color);
   }
   .bcn-dassign__v {
-    font-size: var(--form-font-size-md, 0.9375rem);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--typography-label-md-font-size, 0.9375rem);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .bcn-dassign__roles {
     display: flex;
@@ -133,34 +133,34 @@ const statusMeta = statusOptions.find((o) => o.value === statusValue);
     flex-direction: column;
     gap: 2px;
     padding: var(--spacing-200) 0;
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-default-subtle);
   }
   .bcn-dassign__role:last-child {
     border-bottom: 0;
   }
   .bcn-dassign__ws {
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-dassign__who {
     display: inline-flex;
     align-items: baseline;
     flex-wrap: wrap;
     gap: var(--spacing-200);
-    font-size: var(--type-size-150);
+    font-size: var(--font-size-150);
   }
   .bcn-dassign__org {
-    color: var(--color-text-primary);
-    font-weight: var(--font-weight-medium);
+    color: var(--color-content-default);
+    font-weight: var(--typography-font-weight-medium);
   }
   .bcn-dassign__person {
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .bcn-dassign__tent {
-    font-size: var(--type-size-100);
+    font-size: var(--font-size-100);
     font-style: italic;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-dassign__edit {
     align-self: flex-start;
diff --git a/src/components/bcn/BcnDetailChildren.astro b/src/components/bcn/BcnDetailChildren.astro
index d8978d8f..08412155 100644
--- a/src/components/bcn/BcnDetailChildren.astro
+++ b/src/components/bcn/BcnDetailChildren.astro
@@ -93,9 +93,9 @@ const hasSiblings = Boolean(siblings?.prevHref || siblings?.nextHref);
   }
   .bcn-dchildren__h {
     margin: 0;
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .bcn-dchildren__list {
     list-style: none;
@@ -105,7 +105,7 @@ const hasSiblings = Boolean(siblings?.prevHref || siblings?.nextHref);
     flex-direction: column;
   }
   .bcn-dchildren__list li + li .bcn-dchildren__row {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .bcn-dchildren__row {
     display: flex;
@@ -116,14 +116,14 @@ const hasSiblings = Boolean(siblings?.prevHref || siblings?.nextHref);
     border-radius: var(--radius-100);
   }
   .bcn-dchildren__row:hover {
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
   .bcn-dchildren__id {
     display: inline-block;
     align-self: flex-start;
-    font-family: var(--font-mono);
+    font-family: var(--typography-font-family-mono);
     font-size: 0.6875rem; /* adherence-allow: font-too-small — matches the gantt's Andy-sanctioned 11px ID badges */
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     color: var(--color-commitment);
     background: color-mix(in srgb, var(--color-commitment) 12%, white);
     padding: 1px 5px;
@@ -131,9 +131,9 @@ const hasSiblings = Boolean(siblings?.prevHref || siblings?.nextHref);
     white-space: nowrap;
   }
   .bcn-dchildren__name {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default);
     line-height: 1.35;
   }
   .bcn-dchildren__meta {
@@ -141,11 +141,11 @@ const hasSiblings = Boolean(siblings?.prevHref || siblings?.nextHref);
     align-items: baseline;
     flex-wrap: wrap;
     gap: var(--spacing-100) var(--spacing-300);
-    font-size: var(--type-size-100);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-100);
+    color: var(--color-content-default-secondary);
   }
   .bcn-dchildren__funding {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-dchildren__status {
     display: inline-flex;
@@ -157,14 +157,14 @@ const hasSiblings = Boolean(siblings?.prevHref || siblings?.nextHref);
     width: 8px;
     height: 8px;
     border-radius: var(--radius-full);
-    background: var(--_tone, var(--color-text-muted));
+    background: var(--_tone, var(--bcn-content-muted));
     flex: none;
   }
-  .bcn-dchildren__dot[data-tone='on-track'] { --_tone: var(--color-secondary); }
+  .bcn-dchildren__dot[data-tone='on-track'] { --_tone: var(--color-background-brand-muted); }
   .bcn-dchildren__dot[data-tone='complete'] { --_tone: var(--bcn-status-completed); }
   .bcn-dchildren__dot[data-tone='at-risk'] { --_tone: var(--bcn-status-in-progress); }
   .bcn-dchildren__dot[data-tone='blocked'] { --_tone: var(--bcn-status-overdue); }
-  .bcn-dchildren__dot[data-tone='not-started'] { --_tone: var(--color-text-muted); }
+  .bcn-dchildren__dot[data-tone='not-started'] { --_tone: var(--bcn-content-muted); }
 
   .bcn-dchildren__sibrow {
     display: flex;
@@ -175,9 +175,9 @@ const hasSiblings = Boolean(siblings?.prevHref || siblings?.nextHref);
     border-radius: var(--radius-100);
   }
   .bcn-dchildren__sibrow:hover {
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
   .bcn-dchildren__list li + li .bcn-dchildren__sibrow {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
 </style>
diff --git a/src/components/bcn/BcnDetailLineage.astro b/src/components/bcn/BcnDetailLineage.astro
index c9b7971a..29cddcb6 100644
--- a/src/components/bcn/BcnDetailLineage.astro
+++ b/src/components/bcn/BcnDetailLineage.astro
@@ -66,7 +66,7 @@ const { nodes } = Astro.props;
     top: 30px;
     bottom: 2px;
     width: 2px;
-    background: var(--color-border);
+    background: var(--color-border-default);
   }
   .bcn-dlineage__node:last-child {
     padding-bottom: 0;
@@ -82,16 +82,16 @@ const { nodes } = Astro.props;
     height: 28px;
     flex-shrink: 0;
     border-radius: 50%;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    color: var(--color-text-secondary);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
+    color: var(--color-content-default-secondary);
   }
   .bcn-dlineage__icon :global(.esa-icon) {
     --_icon-size: 14px;
   }
   .bcn-dlineage__node--current .bcn-dlineage__icon {
-    border-color: var(--color-secondary);
-    color: var(--color-secondary);
+    border-color: var(--color-background-brand-muted);
+    color: var(--color-background-brand-muted);
   }
   .bcn-dlineage__body {
     display: flex;
@@ -102,20 +102,20 @@ const { nodes } = Astro.props;
   }
   .bcn-dlineage__kind {
     font-size: 0.75rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-dlineage__name {
-    font-size: var(--form-font-size-md, 0.9375rem);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--typography-label-md-font-size, 0.9375rem);
+    font-weight: var(--typography-font-weight-medium);
     line-height: 1.35;
-    color: var(--color-primary);
+    color: var(--color-background-brand);
     text-decoration: none;
   }
   a.bcn-dlineage__name:hover {
     text-decoration: underline;
   }
   .bcn-dlineage__name--current {
-    color: var(--color-text-primary);
-    font-weight: var(--font-weight-semibold);
+    color: var(--color-content-default);
+    font-weight: var(--typography-font-weight-semibold);
   }
 </style>
diff --git a/src/components/bcn/BcnDisclosureToggle.astro b/src/components/bcn/BcnDisclosureToggle.astro
index 1f95be40..2e4d1334 100644
--- a/src/components/bcn/BcnDisclosureToggle.astro
+++ b/src/components/bcn/BcnDisclosureToggle.astro
@@ -57,12 +57,12 @@ const hookAttr = { [hook]: value };
     border: 0;
     border-radius: var(--radius-100);
     background: transparent;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     cursor: pointer;
   }
   .bcn-disclosure:hover {
-    background: var(--color-surface-sunken);
-    color: var(--color-text-secondary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-content-default-secondary);
   }
   .bcn-disclosure :global(.esa-icon) {
     transition: transform 150ms ease;
diff --git a/src/components/bcn/BcnDiscussion.astro b/src/components/bcn/BcnDiscussion.astro
index a8299e10..edd0099e 100644
--- a/src/components/bcn/BcnDiscussion.astro
+++ b/src/components/bcn/BcnDiscussion.astro
@@ -22,7 +22,7 @@ import EsaIcon from '@esa/ecology/esa-icon.astro';
 import EsaAvatar from '@esa/ecology/esa-avatar.astro';
 import EsaBadge from '@esa/ecology/esa-badge.astro';
 import EsaButton from '@esa/ecology/esa-button.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 
 export interface DiscussionComment {
   author: string;
@@ -76,8 +76,8 @@ const stepColor = (name: string): string => authorColors.get(name) ?? STEPPER[0]
             {c.edited && <span class="bcn-disc__edited">(edited)</span>}
             {c.own && (
               <span class="bcn-disc__actions">
-                <EsaIconButton icon="pencil" label="Edit" size="sm" />
-                <EsaIconButton icon="trash-2" label="Delete" size="sm" />
+                <EsaIconButton variant="chrome" iconOnly icon="pencil" label="Edit" size="sm" />
+                <EsaIconButton variant="chrome" iconOnly icon="trash-2" label="Delete" size="sm" />
               </span>
             )}
           </div>
@@ -92,7 +92,7 @@ const stepColor = (name: string): string => authorColors.get(name) ?? STEPPER[0]
       <div class="bcn-disc__compose">
         <span class="bcn-disc__as">Posting as {currentUser}</span>
         <esa-textarea rows="2" placeholder="Write your comment..."></esa-textarea>
-        <div class="bcn-disc__compose-actions"><EsaButton color="primary" size="sm">Post Comment</EsaButton></div>
+        <div class="bcn-disc__compose-actions"><EsaButton variant="primary" size="sm">Post Comment</EsaButton></div>
       </div>
     </li>
   </ul>
@@ -104,26 +104,26 @@ const stepColor = (name: string): string => authorColors.get(name) ?? STEPPER[0]
 
 <style>
   .bcn-disc { display: flex; flex-direction: column; gap: var(--spacing-400); }
-  .bcn-disc__head { display: flex; align-items: center; gap: var(--spacing-200); margin: 0; font-size: var(--type-size-200); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-disc__head :global(.esa-icon) { flex-shrink: 0; color: var(--color-text-secondary); }
-  .bcn-disc__none { margin: 0; font-size: 0.875rem; color: var(--color-text-tertiary); }
+  .bcn-disc__head { display: flex; align-items: center; gap: var(--spacing-200); margin: 0; font-size: var(--font-size-200); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-disc__head :global(.esa-icon) { flex-shrink: 0; color: var(--color-content-default-secondary); }
+  .bcn-disc__none { margin: 0; font-size: 0.875rem; color: var(--color-content-default-tertiary); }
 
   /* Timeline — avatars as connected nodes (same vocabulary as the Change Log). */
   .bcn-disc__tl { list-style: none; margin: 0; padding: 0; }
   .bcn-disc__item { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-300); padding-bottom: var(--spacing-400); }
-  .bcn-disc__item:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 32px; bottom: 0; width: 2px; background: var(--color-border); }
+  .bcn-disc__item:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 32px; bottom: 0; width: 2px; background: var(--color-border-default); }
   .bcn-disc__item--compose { padding-bottom: 0; }
   .bcn-disc__node { position: relative; z-index: 1; }
   /* Avatar color = the wrapper's --_node-color (stepper token), overriding the
      lego's name-hash default. */
-  .bcn-disc__node :global(.esa-avatar) { --_avatar-bg: var(--_node-color, var(--color-secondary)); }
+  .bcn-disc__node :global(.esa-avatar) { --_avatar-bg: var(--_node-color, var(--color-background-brand-muted)); }
 
   .bcn-disc__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
   .bcn-disc__meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--spacing-200); }
-  .bcn-disc__author { font-size: 0.875rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-disc__time { font-size: 0.75rem; color: var(--color-text-tertiary); }
-  .bcn-disc__edited { font-size: 0.75rem; font-style: italic; color: var(--color-text-tertiary); }
-  .bcn-disc__text { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-primary); white-space: pre-wrap; }
+  .bcn-disc__author { font-size: 0.875rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-disc__time { font-size: 0.75rem; color: var(--color-content-default-tertiary); }
+  .bcn-disc__edited { font-size: 0.75rem; font-style: italic; color: var(--color-content-default-tertiary); }
+  .bcn-disc__text { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-content-default); white-space: pre-wrap; }
 
   /* Author-only Edit/Delete — revealed on hover/focus (prod behavior). */
   .bcn-disc__actions { display: inline-flex; align-items: center; gap: 1px; margin-left: auto; opacity: 0; transition: opacity 120ms ease; }
@@ -134,7 +134,7 @@ const stepColor = (name: string): string => authorColors.get(name) ?? STEPPER[0]
 
   /* Compose. */
   .bcn-disc__compose { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-200); }
-  .bcn-disc__as { font-size: 0.8125rem; color: var(--color-text-secondary); }
+  .bcn-disc__as { font-size: 0.8125rem; color: var(--color-content-default-secondary); }
   .bcn-disc__compose esa-textarea { width: 100%; }
   .bcn-disc__compose-actions { display: flex; justify-content: flex-end; }
 </style>
diff --git a/src/components/bcn/BcnDueDiligenceSteps.astro b/src/components/bcn/BcnDueDiligenceSteps.astro
index e4d8ffa2..b4ddef21 100644
--- a/src/components/bcn/BcnDueDiligenceSteps.astro
+++ b/src/components/bcn/BcnDueDiligenceSteps.astro
@@ -102,7 +102,7 @@ const BADGE_VARIANT = {
                 </span>
 
                 <span class="bcn-dds__title-row repel" data-gap="xs">
-                  <span class="bcn-dds__label type-card-title">{s.label}</span>
+                  <span class="bcn-dds__label typography-title">{s.label}</span>
                   {!s.disabled && (
                     <span class="bcn-dds__chev" aria-hidden="true">
                       <EsaIcon name="chevron-right" size="sm" />
@@ -110,7 +110,7 @@ const BADGE_VARIANT = {
                   )}
                 </span>
 
-                <span class="bcn-dds__desc type-body-small">{s.description}</span>
+                <span class="bcn-dds__desc typography-body-sm">{s.description}</span>
               </Tile>
             </li>
           );
@@ -143,8 +143,8 @@ const BADGE_VARIANT = {
     flex: 1;
     min-width: 0;
     padding: var(--spacing-400);
-    background: var(--color-surface-sunken);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-sunken);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     color: inherit;
     text-decoration: none;
@@ -153,15 +153,15 @@ const BADGE_VARIANT = {
       background-color 150ms ease;
   }
   a.bcn-dds__tile:hover {
-    border-color: var(--color-border-strong);
-    background: var(--color-surface);
+    border-color: var(--color-border-default-strong);
+    background: var(--color-background-elevation-raised);
   }
   a.bcn-dds__tile:hover .bcn-dds__label,
   a.bcn-dds__tile:hover .bcn-dds__chev {
-    color: var(--color-primary);
+    color: var(--color-background-brand);
   }
   a.bcn-dds__tile:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-background-brand);
     outline-offset: 2px;
   }
 
@@ -175,9 +175,9 @@ const BADGE_VARIANT = {
     height: 28px;
     flex-shrink: 0;
     border-radius: var(--radius-100);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    color: var(--color-text-secondary);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
+    color: var(--color-content-default-secondary);
   }
 
   /* .repel already centers; only the width is ours (it's a flex child of .stack). */
@@ -195,46 +195,46 @@ const BADGE_VARIANT = {
   }
   .bcn-dds__label {
     min-width: 0;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-dds__chev {
     display: inline-flex;
     flex-shrink: 0;
     margin-top: 0.125rem;
-    color: var(--color-text-muted);
+    color: var(--bcn-content-muted);
     transition: color 150ms ease;
   }
 
   /* Secondary, not tertiary: this line shrinks to 14px, so it darkens rather
      than grays out. */
   .bcn-dds__desc {
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     min-width: 0;
   }
 
   /* esa-badge has no `neutral` variant — re-point its two public hooks. A white
      fill on the sunken tile gives the quiet mark its edge without a border. */
   .bcn-dds__tile[data-tone='neutral'] {
-    --badge-bg: var(--color-surface);
-    --badge-text-color: var(--color-text-secondary);
+    --badge-bg: var(--color-background-elevation-raised);
+    --badge-text-color: var(--color-content-default-secondary);
   }
 
   /* Locked stage: visibly inert — no hover, no chevron, no link. The reason
      ("Complete Boundary first") is the description the caller passed. */
   .bcn-dds__tile[data-disabled] {
     background: transparent;
-    border-color: var(--color-border-light);
+    border-color: var(--color-border-default-subtle);
     border-style: dashed;
   }
   .bcn-dds__tile[data-disabled] .bcn-dds__mark {
     background: transparent;
-    border-color: var(--color-border-light);
-    color: var(--color-text-muted);
+    border-color: var(--color-border-default-subtle);
+    color: var(--bcn-content-muted);
   }
   .bcn-dds__tile[data-disabled] .bcn-dds__label {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-dds__tile[data-disabled] .bcn-dds__desc {
-    color: var(--color-text-muted);
+    color: var(--bcn-content-muted);
   }
 </style>
diff --git a/src/components/bcn/BcnEntityLogo.astro b/src/components/bcn/BcnEntityLogo.astro
index 43c10f18..c3c21591 100644
--- a/src/components/bcn/BcnEntityLogo.astro
+++ b/src/components/bcn/BcnEntityLogo.astro
@@ -123,14 +123,14 @@ const ICON_STEP = { sm: 'xs', md: 'sm', lg: 'lg', xl: 'xl', '2xl': 'xl' } as con
   /* fill — neutral glyph on the color; the bold landmark weight. */
   .bcn-entity-logo[data-style='fill'] {
     background: var(--_c);
-    color: var(--color-text-inverse);
+    color: var(--color-content-default-knockout);
     border-color: transparent;
   }
 
   /* image — the tile is the crop; no tint, no hairline competing with the photo. */
   .bcn-entity-logo[data-style='image'] {
-    background: var(--color-surface-sunken);
-    border-color: var(--color-border-light);
+    background: var(--color-background-elevation-sunken);
+    border-color: var(--color-border-default-subtle);
   }
   .bcn-entity-logo__img {
     width: 100%;
diff --git a/src/components/bcn/BcnEvidenceDrawer.astro b/src/components/bcn/BcnEvidenceDrawer.astro
index f42cb84a..a902bb4b 100644
--- a/src/components/bcn/BcnEvidenceDrawer.astro
+++ b/src/components/bcn/BcnEvidenceDrawer.astro
@@ -78,10 +78,10 @@ import EsaButton from '@esa/ecology/esa-button.astro';
   <div slot="footer" class="bcn-ev__foot">
     <div class="bcn-ev__actions">
       <span data-evidence-save>
-        <EsaButton color="primary" size="md" disabled>Save</EsaButton>
+        <EsaButton variant="primary" size="md" disabled>Save</EsaButton>
       </span>
       <span data-drawer-close>
-        <EsaButton color="ghost" appearance="outline" size="md">Cancel</EsaButton>
+        <EsaButton variant="ghost" appearance="outline" size="md">Cancel</EsaButton>
       </span>
     </div>
   </div>
@@ -118,7 +118,7 @@ import EsaButton from '@esa/ecology/esa-button.astro';
        filter selects, the tabs, the buttons. Declared HERE, once, because these are
        inherited custom properties: a copy per control is how the four existing bcn-*
        workarounds for this same bug ended up disagreeing with each other.
-       Why it is needed: the hub wires focus to --color-border-focus → --color-grass-8
+       Why it is needed: the hub wires focus to --color-border-default-focus → --color-grass-8
        (#65ba74), a chain Beacon's theme has no hook into, so every field in the app
        focuses GREEN. These three values are the verbatim port of prod's own input focus
        (Beacon.Web/src/scss/variables/_form-inputs.scss:25-28) —
@@ -128,21 +128,21 @@ import EsaButton from '@esa/ecology/esa-button.astro';
        — and prod applies them as border-color + `box-shadow: 0 0 0 $focus-ring-width
        $focus-ring-color`, which is exactly the pair the esa-* form legos read. The 30%
        alpha is load-bearing: a solid ring reads as an error state at a glance.
-       The real fix is re-pointing --color-border-focus in theme-beacon.css, which would
+       The real fix is re-pointing --color-border-default-focus in theme-beacon.css, which would
        correct every surface at once and let the bcn-* workarounds be deleted. */
-    --form-border-color-focus: var(--color-secondary);
-    --focus-ring-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
+    --form-border-color-focus: var(--color-background-brand-muted);
+    --focus-ring-color: color-mix(in srgb, var(--color-background-brand-muted) 30%, transparent);
     --focus-ring-width: 2px;
 
     /* Same family of leak, different token: the legos colour SELECTED/active option text
-       with --color-primary-strong, whose hub default is #3a7c59 — green again — and which
+       with --color-content-brand, whose hub default is #3a7c59 — green again — and which
        Beacon also never re-points. Ten legos read it, so it is not specific to the select.
        Prod's own selected option (ui-search-select.component.scss:217) is `background:
        $teal-100` with NO colour override — it tints the row and leaves the text alone. The
        nearest single token that serves every role this variable plays here (selected rows,
-       match highlights, chips) is --color-primary, so the accent reads deep teal on the
+       match highlights, chips) is --color-background-brand, so the accent reads deep teal on the
        teal-tinted row rather than green on it. */
-    --color-primary-strong: var(--color-primary);
+    --color-content-brand: var(--color-background-brand);
 
     /* Distance from each column's hairline down to its search field. Declared here because
        the two columns reach it from opposite directions — the left inherits the tab panel's
@@ -168,16 +168,16 @@ import EsaButton from '@esa/ecology/esa-button.astro';
     flex-wrap: wrap;
     min-width: 0;
   }
-  /* Drawer title at the house drawer size — --type-size-400 semibold, the same value
+  /* Drawer title at the house drawer size — --font-size-400 semibold, the same value
      esa-side-dialog's own .title uses and the same one the guidance drawer and the
      work-area drawers already carry. NOT the page-title role: this is drawer chrome, not
-     a page, and at --type-size-600 it read like a route heading. */
+     a page, and at --font-size-600 it read like a route heading. */
   .bcn-ev__title {
     margin: 0;
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.2;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
 
   /* ── Body ── */
@@ -195,11 +195,11 @@ import EsaButton from '@esa/ecology/esa-button.astro';
     min-height: 0;
   }
 
-  /* The seam itself — the whole 1px track IS the rule. --color-border, not
-     --color-border-light: it meets the header and footer rules BcnBottomDrawer draws, and
+  /* The seam itself — the whole 1px track IS the rule. --color-border-default, not
+     --color-border-default-subtle: it meets the header and footer rules BcnBottomDrawer draws, and
      three edges of the same drawer should be one weight. */
   .bcn-ev__joint {
-    background: var(--color-border);
+    background: var(--color-border-default);
   }
 
   /* ── Footer: Windows order — primary left of Cancel inside a right-aligned group. ── */
diff --git a/src/components/bcn/BcnEvidenceEntryPoints.astro b/src/components/bcn/BcnEvidenceEntryPoints.astro
index fa1a5012..46f1bff5 100644
--- a/src/components/bcn/BcnEvidenceEntryPoints.astro
+++ b/src/components/bcn/BcnEvidenceEntryPoints.astro
@@ -38,8 +38,8 @@ const preset = (id: string) => ENTRY_PRESETS.find((p) => p.id === id)!;
 
 <section class="bcn-ev-entries stack" data-gap="md" aria-labelledby="bcn-ev-entries-title">
   <div class="bcn-ev-entries__intro">
-    <h2 class="type-section-title" id="bcn-ev-entries-title">Four ways in</h2>
-    <p class="type-body bcn-ev-entries__lede">
+    <h2 class="typography-heading-md" id="bcn-ev-entries-title">Four ways in</h2>
+    <p class="typography-body-md bcn-ev-entries__lede">
       The drawer is the same workspace every time. What changes is what is already on it when it
       opens. Try each one — then close it and open it from the Attach Evidence of Compliance button in the
       bottom bar.
@@ -50,17 +50,17 @@ const preset = (id: string) => ENTRY_PRESETS.find((p) => p.id === id)!;
     <!-- 1 · Cold open -->
     <EsaCard variant="outlined">
       <div class="bcn-ev-entry">
-        <h3 class="type-card-title">{preset('cold').label}</h3>
-        <p class="type-body-small bcn-ev-entry__blurb">{preset('cold').blurb}</p>
+        <h3 class="typography-title">{preset('cold').label}</h3>
+        <p class="typography-body-sm bcn-ev-entry__blurb">{preset('cold').blurb}</p>
         <div class="bcn-ev-entry__demo bcn-ev-entry__demo--quiet">
-          <p class="type-body-small">
+          <p class="typography-body-sm">
             The Attach Evidence of Compliance button sits in the floating bar at the bottom of every page,
             where Search used to be.
           </p>
         </div>
         <div class="bcn-ev-entry__act">
           <span data-evidence-open="cold">
-            <EsaButton color="primary" size="md">Open the drawer</EsaButton>
+            <EsaButton variant="primary" size="md">Open the drawer</EsaButton>
           </span>
         </div>
       </div>
@@ -69,20 +69,20 @@ const preset = (id: string) => ENTRY_PRESETS.find((p) => p.id === id)!;
     <!-- 2 · From a single action -->
     <EsaCard variant="outlined">
       <div class="bcn-ev-entry">
-        <h3 class="type-card-title">{preset('single-action').label}</h3>
-        <p class="type-body-small bcn-ev-entry__blurb">{preset('single-action').blurb}</p>
+        <h3 class="typography-title">{preset('single-action').label}</h3>
+        <p class="typography-body-sm bcn-ev-entry__blurb">{preset('single-action').blurb}</p>
         <div class="bcn-ev-entry__demo">
-          <p class="bcn-ev-entry__mocklabel type-caption">An open action</p>
+          <p class="bcn-ev-entry__mocklabel typography-meta">An open action</p>
           <p class="bcn-ev-entry__mocktitle">
             <BcnCommitmentBadge code={single.code} size="sm" />
             <span>{single.name}</span>
           </p>
-          <p class="type-body-small bcn-ev-entry__mockmeta">
+          <p class="typography-body-sm bcn-ev-entry__mockmeta">
             {FREQUENCY_LABEL[single.frequency]} · {single.period}
           </p>
           <div class="bcn-ev-entry__mockact">
             <span data-evidence-open="single-action">
-              <EsaButton color="ghost" appearance="outline" size="sm">Add evidence</EsaButton>
+              <EsaButton variant="ghost" appearance="outline" size="sm">Add evidence</EsaButton>
             </span>
           </div>
         </div>
@@ -92,10 +92,10 @@ const preset = (id: string) => ENTRY_PRESETS.find((p) => p.id === id)!;
     <!-- 3 · Bulk -->
     <EsaCard variant="outlined">
       <div class="bcn-ev-entry">
-        <h3 class="type-card-title">{preset('bulk').label}</h3>
-        <p class="type-body-small bcn-ev-entry__blurb">{preset('bulk').blurb}</p>
+        <h3 class="typography-title">{preset('bulk').label}</h3>
+        <p class="typography-body-sm bcn-ev-entry__blurb">{preset('bulk').blurb}</p>
         <div class="bcn-ev-entry__demo">
-          <p class="bcn-ev-entry__mocklabel type-caption">An action list, four selected</p>
+          <p class="bcn-ev-entry__mocklabel typography-meta">An action list, four selected</p>
           <ul class="bcn-ev-entry__rows">
             {bulkRows.map((a) => (
               <li class="bcn-ev-entry__row">
@@ -109,7 +109,7 @@ const preset = (id: string) => ENTRY_PRESETS.find((p) => p.id === id)!;
           </ul>
           <div class="bcn-ev-entry__mockact">
             <span data-evidence-open="bulk">
-              <EsaButton color="ghost" appearance="outline" size="sm">
+              <EsaButton variant="ghost" appearance="outline" size="sm">
                 Add evidence to {bulkRows.length} actions
               </EsaButton>
             </span>
@@ -121,17 +121,17 @@ const preset = (id: string) => ENTRY_PRESETS.find((p) => p.id === id)!;
     <!-- 4 · Existing evidence -->
     <EsaCard variant="outlined">
       <div class="bcn-ev-entry">
-        <h3 class="type-card-title">{preset('existing').label}</h3>
-        <p class="type-body-small bcn-ev-entry__blurb">{preset('existing').blurb}</p>
+        <h3 class="typography-title">{preset('existing').label}</h3>
+        <p class="typography-body-sm bcn-ev-entry__blurb">{preset('existing').blurb}</p>
         <div class="bcn-ev-entry__demo bcn-ev-entry__demo--quiet">
-          <p class="type-body-small">
+          <p class="typography-body-sm">
             Andrew raised this as a real need: the evidence table is already long, and it grows
             every day the monitoring portal runs.
           </p>
         </div>
         <div class="bcn-ev-entry__act">
           <span data-evidence-open="existing">
-            <EsaButton color="ghost" appearance="outline" size="md">Open on existing evidence</EsaButton>
+            <EsaButton variant="ghost" appearance="outline" size="md">Open on existing evidence</EsaButton>
           </span>
         </div>
       </div>
@@ -143,7 +143,7 @@ const preset = (id: string) => ENTRY_PRESETS.find((p) => p.id === id)!;
   .bcn-ev-entries__lede {
     margin: var(--spacing-200) 0 0;
     max-width: 78ch;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .bcn-ev-entries__grid {
     display: grid;
@@ -160,7 +160,7 @@ const preset = (id: string) => ENTRY_PRESETS.find((p) => p.id === id)!;
   }
   .bcn-ev-entry__blurb {
     margin: 0;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   /* The mocked fragment of the surface this entry comes from. Sunken so it reads as a
@@ -168,33 +168,33 @@ const preset = (id: string) => ENTRY_PRESETS.find((p) => p.id === id)!;
   .bcn-ev-entry__demo {
     margin-top: auto;
     padding: var(--spacing-300);
-    border: 1px solid var(--color-border-light);
+    border: 1px solid var(--color-border-default-subtle);
     border-radius: var(--radius-200);
-    background: var(--color-background);
+    background: var(--color-background-default);
   }
   .bcn-ev-entry__demo--quiet {
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .bcn-ev-entry__demo--quiet p {
     margin: 0;
   }
   .bcn-ev-entry__mocklabel {
     margin: 0 0 var(--spacing-200);
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-ev-entry__mocktitle {
     display: flex;
     align-items: baseline;
     gap: var(--spacing-200);
     margin: 0;
-    font-size: var(--type-size-200, 0.9375rem);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-200, 0.9375rem);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.35;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-ev-entry__mockmeta {
     margin: 2px 0 0;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .bcn-ev-entry__mockact {
     margin-top: var(--spacing-300);
@@ -213,8 +213,8 @@ const preset = (id: string) => ENTRY_PRESETS.find((p) => p.id === id)!;
     align-items: center;
     gap: var(--spacing-200);
     min-width: 0;
-    font-size: var(--type-size-150, 0.875rem);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150, 0.875rem);
+    color: var(--color-content-default);
   }
   /* A checked box, drawn rather than interactive — this is a picture of another screen. */
   .bcn-ev-entry__check {
@@ -225,8 +225,8 @@ const preset = (id: string) => ENTRY_PRESETS.find((p) => p.id === id)!;
     width: 16px;
     height: 16px;
     border-radius: var(--radius-100);
-    background: var(--color-primary);
-    color: var(--color-text-inverse);
+    background: var(--color-background-brand);
+    color: var(--color-content-default-knockout);
   }
   .bcn-ev-entry__rowname {
     min-width: 0;
diff --git a/src/components/bcn/BcnEvidenceList.astro b/src/components/bcn/BcnEvidenceList.astro
index d843936d..b7c41f6b 100644
--- a/src/components/bcn/BcnEvidenceList.astro
+++ b/src/components/bcn/BcnEvidenceList.astro
@@ -17,7 +17,7 @@
 import EsaCard from '@esa/ecology/esa-card.astro';
 import EsaButton from '@esa/ecology/esa-button.astro';
 import EsaIcon from '@esa/ecology/esa-icon.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import EsaPill from '@esa/ecology/esa-pill.astro';
 import EsaBadge from '@esa/ecology/esa-badge.astro';
 
@@ -53,10 +53,10 @@ const { items } = Astro.props;
               <span class="bcn-evidence-card__name">{e.title}</span>
             </span>
             <span class="bcn-evidence-card__actions">
-              <EsaIconButton icon="star" label="Add to summary page" size="sm" />
-              <EsaIconButton icon="download" label="Download all files as .zip" size="sm" />
-              <EsaIconButton icon="pencil" label="Edit evidence" size="sm" />
-              <EsaIconButton icon="trash-2" label="Delete evidence" size="sm" />
+              <EsaIconButton variant="chrome" iconOnly icon="star" label="Add to summary page" size="sm" />
+              <EsaIconButton variant="chrome" iconOnly icon="download" label="Download all files as .zip" size="sm" />
+              <EsaIconButton variant="chrome" iconOnly icon="pencil" label="Edit evidence" size="sm" />
+              <EsaIconButton variant="chrome" iconOnly icon="trash-2" label="Delete evidence" size="sm" />
             </span>
           </div>
           <div class="bcn-evidence-card__fields" hidden>
@@ -81,8 +81,8 @@ const { items } = Astro.props;
     ))}
   </ul>
   <div class="bcn-evidence-list__row-actions">
-    <EsaButton color="primary" size="sm" icon="plus">Add New Evidence</EsaButton>
-    <EsaButton color="ghost" appearance="outline" size="sm">Add Existing Evidence</EsaButton>
+    <EsaButton variant="primary" size="sm" icon="plus">Add New Evidence</EsaButton>
+    <EsaButton variant="ghost" appearance="outline" size="sm">Add Existing Evidence</EsaButton>
   </div>
 </div>
 
@@ -102,22 +102,22 @@ const { items } = Astro.props;
   .bcn-evidence-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-150); width: 100%; padding-inline: var(--spacing-200); }
   /* Clickable expand lead (chevron + title); actions sit outside it */
   .bcn-evidence-card__lead { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--spacing-150); padding: var(--spacing-150) 0; cursor: pointer; }
-  .bcn-evidence-card__lead :global(.esa-icon) { flex-shrink: 0; color: var(--color-text-tertiary); transition: transform 150ms ease; }
+  .bcn-evidence-card__lead :global(.esa-icon) { flex-shrink: 0; color: var(--color-content-default-tertiary); transition: transform 150ms ease; }
   .bcn-evidence-card.is-expanded .bcn-evidence-card__lead :global(.esa-icon) { transform: rotate(90deg); }
-  .bcn-evidence-card__name { min-width: 0; font-size: 0.8125rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .bcn-evidence-card__name { min-width: 0; font-size: 0.8125rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .bcn-evidence-card__actions { display: flex; align-items: center; gap: 1px; flex-shrink: 0; }
   /* Dense action buttons: shrink the esa-icon-button box + glyph */
   .bcn-evidence-card__actions :global(.esa-icon-button) { width: 26px; height: 26px; }
   .bcn-evidence-card__actions :global(.esa-icon) { width: 15px; height: 15px; }
-  .bcn-evidence-card__actions :global(.bcn-evidence-card__star--on) { color: var(--color-accent); }
+  .bcn-evidence-card__actions :global(.bcn-evidence-card__star--on) { color: var(--color-background-accent); }
   .bcn-evidence-card__actions :global(.bcn-evidence-card__star--on svg) { fill: currentColor; }
   /* Collapsible body — [hidden] beats display rules here since it's the default flow */
   .bcn-evidence-card__fields[hidden] { display: none; }
   .bcn-evidence-card__fields { display: flex; flex-direction: column; gap: var(--spacing-300); padding: var(--spacing-300) var(--spacing-400) var(--spacing-400); }
   .bcn-evidence-card__field { display: flex; flex-direction: column; gap: var(--spacing-100); }
-  .bcn-evidence-card__label { display: inline-flex; align-items: center; gap: var(--spacing-150); font-size: 0.8125rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-evidence-card__text { font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-secondary); }
-  .bcn-evidence-card__text--muted { color: var(--color-text-tertiary); font-style: italic; }
+  .bcn-evidence-card__label { display: inline-flex; align-items: center; gap: var(--spacing-150); font-size: 0.8125rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-evidence-card__text { font-size: 0.8125rem; line-height: 1.5; color: var(--color-content-default-secondary); }
+  .bcn-evidence-card__text--muted { color: var(--color-content-default-tertiary); font-style: italic; }
   .bcn-evidence-card__pills { display: flex; flex-wrap: wrap; gap: var(--spacing-150); }
 
   /* File rows use the esa-file-list lego (own styling). */
diff --git a/src/components/bcn/BcnEvidencePatternNotes.astro b/src/components/bcn/BcnEvidencePatternNotes.astro
index f69ef53f..8f69ff65 100644
--- a/src/components/bcn/BcnEvidencePatternNotes.astro
+++ b/src/components/bcn/BcnEvidencePatternNotes.astro
@@ -43,15 +43,15 @@ const EVALUATE = [
 
 <section class="bcn-ev-notes stack" data-gap="md" aria-labelledby="bcn-ev-notes-title">
   <div>
-    <h2 class="type-section-title" id="bcn-ev-notes-title">About this prototype</h2>
-    <p class="type-body bcn-ev-notes__lede">
+    <h2 class="typography-heading-md" id="bcn-ev-notes-title">About this prototype</h2>
+    <p class="typography-body-md bcn-ev-notes__lede">
       Nothing here saves. The drawer is a picture of the feature, built to be argued with.
     </p>
   </div>
 
   <div class="bcn-ev-notes__grid">
     <EsaCard title="Where it sits" variant="outlined">
-      <p class="type-body-small bcn-ev-notes__text">
+      <p class="typography-body-sm bcn-ev-notes__text">
         Beacon’s drawers come in from the right and hold temporary work. This one is app-shell
         furniture, like the nav and the top bar, and it layers above modals so it can cover an open
         dialog.
@@ -64,7 +64,7 @@ const EVALUATE = [
           </li>
         ))}
       </ul>
-      <p class="type-caption bcn-ev-notes__caveat">
+      <p class="typography-meta bcn-ev-notes__caveat">
         The hub’s drawer lego only opens from the left or right and has no height control, so the
         bottom drawer is built here and filed as a request upstream.
       </p>
@@ -92,7 +92,7 @@ const EVALUATE = [
   .bcn-ev-notes__lede {
     margin: var(--spacing-200) 0 0;
     max-width: 78ch;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .bcn-ev-notes__grid {
     display: grid;
@@ -102,7 +102,7 @@ const EVALUATE = [
   }
   .bcn-ev-notes__text {
     margin: 0 0 var(--spacing-300);
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   /* The layer stack, drawn as a list rather than a diagram — the order is the content. */
@@ -112,7 +112,7 @@ const EVALUATE = [
     padding: 0;
     display: flex;
     flex-direction: column;
-    border: 1px solid var(--color-border-light);
+    border: 1px solid var(--color-border-default-subtle);
     border-radius: var(--radius-200);
     overflow: hidden;
   }
@@ -121,28 +121,28 @@ const EVALUATE = [
     flex-direction: column;
     gap: 1px;
     padding: var(--spacing-200) var(--spacing-300);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
   }
   .bcn-ev-notes__layer + .bcn-ev-notes__layer {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   /* The one that is this feature — a background tint inline with the content, not a
      colored edge. */
   .bcn-ev-notes__layer[data-here] {
-    background: var(--color-primary-subtle, var(--color-background));
+    background: var(--color-background-brand-subtle, var(--color-background-default));
   }
   .bcn-ev-notes__layername {
-    font-size: var(--type-size-150, 0.875rem);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150, 0.875rem);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .bcn-ev-notes__layernote {
-    font-size: var(--type-size-150, 0.875rem);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150, 0.875rem);
+    color: var(--color-content-default-secondary);
   }
   .bcn-ev-notes__caveat {
     margin: var(--spacing-300) 0 0;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
 
   .bcn-ev-notes__list {
@@ -156,8 +156,8 @@ const EVALUATE = [
     padding-left: 1.35rem;
   }
   .bcn-ev-notes__item {
-    font-size: var(--type-size-150, 0.875rem);
+    font-size: var(--font-size-150, 0.875rem);
     line-height: 1.5;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 </style>
diff --git a/src/components/bcn/BcnEvidenceSearch.astro b/src/components/bcn/BcnEvidenceSearch.astro
index 4083ec23..3370bfad 100644
--- a/src/components/bcn/BcnEvidenceSearch.astro
+++ b/src/components/bcn/BcnEvidenceSearch.astro
@@ -16,9 +16,10 @@
 // keyboard nav, match highlight — all its job). The only thing it does not provide is a
 // LEADING icon: it renders a search glyph inside the select-mode dropdown's own filter box,
 // but the autocomplete trigger has no icon, no ::part, and no slot. So this component
-// overlays one and pushes the field's text across by re-pointing --form-padding-x-md,
-// which is a real semantic token the lego already reads — no shadow-DOM reach-in, no
-// restyled internals. Checked Ecology for a search-field lego (esa-text-field has the same
+// overlays one and pushes the field's text across by re-pointing the lego's --_field-padding
+// hooks on the host (the public --form-padding-* hooks were deleted upstream,
+// form-padding-to-spacing, with no successor — a leading-icon slot is the real fix and is
+// a pending hub request). Checked Ecology for a search-field lego (esa-text-field has the same
 // gap; esa-search-panel and esa-entity-search are full overlay surfaces, not fields) and
 // checked Beacon prod, whose search inputs are the same pattern (an overlaid glyph on a
 // padded field). bcn-evidence-search is the reusable home.
@@ -62,16 +63,15 @@ const { placeholder, hook, label } = Astro.props;
   }
   .bcn-ev-search esa-combobox {
     display: block;
-    /* Re-point the field's horizontal padding so the text clears the overlaid glyph. This
-       is the lego's own semantic form token, scoped to this wrapper. */
-    --form-padding-x-md: 2.25rem;
-    /* A slightly tighter field. --form-padding-y-md alone would NOT have done it: the lego
-       also sets an explicit height from --form-height-md (36px), which wins over the
-       padding, so the padding change would have been invisible. Both move together here.
-       Scoped to this component, so both columns' fields stay identical and nothing else
-       in the drawer changes size. */
-    --form-height-md: 32px;
-    --form-padding-y-md: var(--spacing-150);
+    /* The lego's padding hooks are PRIVATE (--_field-*) since the hub deleted the public
+       --form-padding-*/--form-height-* surface with no successor. Document rules on the
+       host beat the :host defaults, so these scoped re-points still work — but they ride
+       an internal name that can move without a deprecation path. Pending hub request for
+       a leading-icon slot (which removes the need for the x re-point entirely).
+       x: clears the overlaid glyph. y: the tighter field the old height:32px produced —
+       the control now sizes from padding + text, so padding alone does it. */
+    --_field-padding-x: 2.25rem;
+    --_field-padding-y: var(--spacing-150);
     /* NO focus-colour override here on purpose. The hub focuses fields GREEN (see the note
        on #bcn-evidence-drawer in BcnEvidenceDrawer.astro); the correction is declared once
        on the drawer shell and inherited, so this field and the filter selects beside it
@@ -87,7 +87,7 @@ const { placeholder, hook, label } = Astro.props;
     left: 0.75rem;
     display: flex;
     align-items: center;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     pointer-events: none;
     z-index: 1;
   }
diff --git a/src/components/bcn/BcnEvidenceStaging.astro b/src/components/bcn/BcnEvidenceStaging.astro
index a02906d4..d84f86a8 100644
--- a/src/components/bcn/BcnEvidenceStaging.astro
+++ b/src/components/bcn/BcnEvidenceStaging.astro
@@ -45,7 +45,7 @@
 // home; its own CSS is the panel frame plus the card's meta rows.
 import EsaCard from '@esa/ecology/esa-card.astro';
 import EsaIcon from '@esa/ecology/esa-icon.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import EsaButton from '@esa/ecology/esa-button.astro';
 import EsaPill from '@esa/ecology/esa-pill.astro';
 import EsaEmptyState from '@esa/ecology/esa-empty-state.astro';
@@ -129,10 +129,10 @@ const GRIP =
                arrangement the drawer footer uses. -->
           <footer class="bcn-ev-draft__foot">
             <span data-draft-add>
-              <EsaButton color="primary" size="sm">Save</EsaButton>
+              <EsaButton variant="primary" size="sm">Save</EsaButton>
             </span>
             <span data-draft-cancel>
-              <EsaButton color="ghost" appearance="outline" size="sm">Cancel</EsaButton>
+              <EsaButton variant="ghost" appearance="outline" size="sm">Cancel</EsaButton>
             </span>
           </footer>
         </div>
@@ -152,7 +152,7 @@ const GRIP =
         <span class="bcn-ev-draft__filename"></span>
         <span class="bcn-ev-draft__filesize"></span>
         <span class="bcn-ev-draft__fileremove">
-          <EsaIconButton icon="x" label="Remove this file from the evidence" size="sm" />
+          <EsaIconButton variant="chrome" iconOnly icon="x" label="Remove this file from the evidence" size="sm" />
         </span>
       </li>
     </template>
@@ -219,7 +219,7 @@ const GRIP =
                       hook="data-staging-attached"
                     />
                   <span class="bcn-ev-card__remove" data-staging-remove={item.id}>
-                    <EsaIconButton icon="x" label={`Remove ${item.title}`} size="sm" />
+                    <EsaIconButton variant="chrome" iconOnly icon="x" label={`Remove ${item.title}`} size="sm" />
                   </span>
                 </div>
                 <span class="bcn-ev-card__toggle">
@@ -268,7 +268,7 @@ const GRIP =
          proposes — and only on this tab, since it has nothing to read from the uploader. -->
     <footer class="bcn-ev-staging__foot">
       <span class="bcn-ev-staging__find" data-targets-find>
-        <EsaButton color="ghost" appearance="outline" size="sm">Find matches</EsaButton>
+        <EsaButton variant="ghost" appearance="outline" size="sm">Find matches</EsaButton>
       </span>
     </footer>
   </div>
@@ -281,7 +281,7 @@ const GRIP =
     flex-direction: column;
     min-height: 0;
     height: 100%;
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
   }
   /* min-height is load-bearing: the Actions header is taller because it carries a button,
      and the two searches below only read as one row if BOTH headers resolve to the same
@@ -302,16 +302,16 @@ const GRIP =
     align-items: center;
     gap: var(--spacing-200);
     margin: 0;
-    font-size: var(--type-size-250);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-250);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.25;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   /* The glyph is subordinate to its heading — quieter tone, and it marks the section, not
      any item inside it. */
   .bcn-ev-staging__title :global(.esa-icon) {
     flex: none;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   /* Mirrors .bcn-ev-targets__search so the two search fields sit on one line — the top
      value must stay identical in both, or the fields drift apart. */
@@ -407,24 +407,24 @@ const GRIP =
     gap: var(--spacing-150);
     color: var(--bcn-unsaved);
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--typography-font-weight-medium);
     white-space: nowrap;
   }
   .bcn-ev-draft__title {
     margin: 0;
-    /* --type-size-150 (14px), the same as the staged cards. This card was written before the
+    /* --font-size-150 (14px), the same as the staged cards. This card was written before the
        density pass took those to 14 and was left at 15 — a heavier title next to identical
        body text is what made the rest of this card read lighter than the others. */
-    font-size: var(--type-size-150, 0.875rem);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-150, 0.875rem);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.35;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-ev-draft__notes {
     margin: 0;
     font-size: 0.8125rem;
     line-height: 1.45;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
 
   /* Same ruled Files section the staged cards use, so a draft and a saved record read as
@@ -439,14 +439,14 @@ const GRIP =
     min-width: 0;
     margin-top: var(--spacing-100);
     padding-top: var(--spacing-200);
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .bcn-ev-draft__fileslabel {
     flex: none;
     margin: 0;
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-secondary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-secondary);
   }
   .bcn-ev-draft__files {
     flex: 1;
@@ -469,7 +469,7 @@ const GRIP =
     gap: var(--spacing-200);
     min-width: 0;
     font-size: 0.8125rem;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-ev-draft__filename {
     flex: 1;
@@ -480,13 +480,14 @@ const GRIP =
   }
   .bcn-ev-draft__filesize {
     flex: none;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     font-variant-numeric: tabular-nums;
   }
   .bcn-ev-draft__fileremove {
     flex: none;
-    color: var(--color-text-tertiary);
-    --form-height-sm: 24px;
+    color: var(--color-content-default-tertiary);
+    /* --form-height-sm: 24px re-point removed — surface deleted upstream; see the
+       matching note in BcnEvidenceTargets. */
   }
   .bcn-ev-draft__foot {
     display: flex;
@@ -494,7 +495,7 @@ const GRIP =
     gap: var(--spacing-250, 0.625rem);
     margin-top: var(--spacing-100);
     padding-top: var(--spacing-200);
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
 
   /* The tone belongs to the DROP TARGET itself: it is what tells you where to let go.
@@ -513,19 +514,19 @@ const GRIP =
        host. This is a formatting-context trick standing in for a missing property. */
     display: grid;
     flex: 1;
-    --form-bg: var(--color-surface-sunken);
+    --color-background-field: var(--color-background-elevation-sunken);
     /* The zone's HOVER border reads --form-border-color-focus, which the hub wires to the
        grass ramp (#65ba74) — so the uploader turned green on hover, the same leak the
-       search fields had (see BcnEvidenceSearch). Point it at --color-secondary so every
+       search fields had (see BcnEvidenceSearch). Point it at --color-background-brand-muted so every
        drop affordance in this drawer is one colour: the action cards' receiving tint is
-       the same token. The lego's own [dragging] state stays --color-primary, a step
+       the same token. The lego's own [dragging] state stays --color-background-brand, a step
        deeper — hover invites, drag-over confirms, the same escalation the action card
        makes when its dashed edge goes solid. */
-    --form-border-color-focus: var(--color-secondary);
+    --form-border-color-focus: var(--color-background-brand-muted);
   }
   .bcn-ev-staging__dropnote {
     margin: var(--spacing-300) 0 0;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
 
   /* Footer: the match utility, right-aligned, on the list tab only. */
@@ -534,7 +535,7 @@ const GRIP =
     display: flex;
     justify-content: flex-end;
     padding: var(--spacing-300) var(--spacing-400);
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--color-border-default);
   }
   .bcn-ev-staging__list {
     list-style: none;
@@ -611,7 +612,7 @@ const GRIP =
     min-width: 0;
     margin-top: var(--spacing-100);
     padding-top: var(--spacing-200);
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .bcn-ev-card__fileslabel {
     flex: none;
@@ -633,13 +634,13 @@ const GRIP =
     justify-content: center;
     width: 20px;
     height: 20px;
-    color: var(--color-text-muted);
+    color: var(--bcn-content-muted);
     cursor: grab;
     border-radius: var(--radius-100);
   }
   .bcn-ev-card__grip:hover {
-    color: var(--color-text-secondary);
-    background: var(--color-surface-sunken);
+    color: var(--color-content-default-secondary);
+    background: var(--color-background-elevation-sunken);
   }
   .bcn-ev-card__grip:active {
     cursor: grabbing;
@@ -648,7 +649,7 @@ const GRIP =
      the handle withdraws rather than lying about being usable. */
   .bcn-ev-staging__item[data-exhausted] .bcn-ev-card__grip {
     cursor: not-allowed;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     opacity: 0.4;
     background: none;
   }
@@ -669,8 +670,8 @@ const GRIP =
      needed. Nothing here restyles its internals. */
   .bcn-ev-card__count :global(.esa-pill) {
     --pill-bg: transparent;
-    --pill-border-color: var(--color-border);
-    --pill-text-color: var(--color-text-secondary);
+    --pill-border-color: var(--color-border-default);
+    --pill-text-color: var(--color-content-default-secondary);
   }
   /* Description and files indent to the TITLE's left edge — the toggle's 20px plus the row
      gap — so the body reads as belonging to the title above it, the same inset the action
@@ -684,8 +685,8 @@ const GRIP =
   .bcn-ev-card__fileslabel {
     margin: 0;
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-secondary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-secondary);
     /* Matched to esa-pill's own sm height so the label sits on the FIRST row of pills.
        align-items:center on the row would instead centre it against the whole wrapped
        block, drifting further off the first line with every extra row of files. */
@@ -695,7 +696,7 @@ const GRIP =
     margin: 0;
     font-size: 0.8125rem;
     line-height: 1.45;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   /* Shut: the description keeps ONE line and ellipses, the file names go away entirely. */
   .bcn-ev-staging__item[data-collapsed] .bcn-ev-card__desc {
@@ -710,12 +711,12 @@ const GRIP =
     min-width: 0;
     margin: 0;
     /* 14px, the dense-surface base — these are scan-and-pick lists, not prose. Stepped down
-       from --type-size-200 (15px) with the card padding, so the row gets tighter as a whole
+       from --font-size-200 (15px) with the card padding, so the row gets tighter as a whole
        rather than just losing its margins. */
-    font-size: var(--type-size-150, 0.875rem);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-150, 0.875rem);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.35;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -747,7 +748,7 @@ const GRIP =
   }
   .bcn-ev-card__remove {
     flex: none;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
 
   /* The files as pills. A bullet-separated run was tried and read as one long string —
diff --git a/src/components/bcn/BcnEvidenceTargets.astro b/src/components/bcn/BcnEvidenceTargets.astro
index 33dfa356..4503db86 100644
--- a/src/components/bcn/BcnEvidenceTargets.astro
+++ b/src/components/bcn/BcnEvidenceTargets.astro
@@ -56,7 +56,7 @@
 import EsaCard from '@esa/ecology/esa-card.astro';
 import EsaIcon from '@esa/ecology/esa-icon.astro';
 import EsaBadge from '@esa/ecology/esa-badge.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import EsaEmptyState from '@esa/ecology/esa-empty-state.astro';
 import EsaLoadingSpinner from '@esa/ecology/esa-loading-spinner.astro';
 import BcnCommitmentBadge from './BcnCommitmentBadge.astro';
@@ -115,14 +115,14 @@ import { scopeIcon } from '../../data/global-search';
     <!-- Working state for Find matches — replaced by rows the moment it resolves. -->
     <div class="bcn-ev-targets__working" data-targets-working hidden>
       <EsaLoadingSpinner size="sm" />
-      <span class="type-body-small">Reading the evidence and checking actions in this component…</span>
+      <span class="typography-body-sm">Reading the evidence and checking actions in this component…</span>
     </div>
 
     <!-- Find matches must never finish silently. A utility that runs and then does nothing
          visible reads as broken, and the two ways it legitimately finds nothing — no
          evidence staged, and nothing new in scope — are different answers that deserve
          different sentences. -->
-    <p class="bcn-ev-targets__notice type-body-small" data-targets-notice hidden></p>
+    <p class="bcn-ev-targets__notice typography-body-sm" data-targets-notice hidden></p>
 
     <!-- The one list: searched rows and suggested rows together. -->
     <ul class="bcn-ev-targets__list" data-targets-list>
@@ -158,7 +158,7 @@ import { scopeIcon } from '../../data/global-search';
                           />
                         </span>
                         <div slot="content" class="bcn-ev-row__poplist">
-                          <p class="bcn-ev-row__poptitle type-caption">Commitments</p>
+                          <p class="bcn-ev-row__poptitle typography-meta">Commitments</p>
                           <ul>
                             {[a.code, ...(a.otherCodes ?? [])].map((c) => (
                               <li><BcnCommitmentBadge code={c} size="sm" /></li>
@@ -187,7 +187,7 @@ import { scopeIcon } from '../../data/global-search';
                 </div>
                 <div class="bcn-ev-row__side">
                   <span class="bcn-ev-row__dismiss" data-target-dismiss={a.id}>
-                    <EsaIconButton icon="x" label={`Remove ${a.name}`} size="sm" />
+                    <EsaIconButton variant="chrome" iconOnly icon="x" label={`Remove ${a.name}`} size="sm" />
                   </span>
                 </div>
               </div>
@@ -198,7 +198,7 @@ import { scopeIcon } from '../../data/global-search';
                    chevron does. -->
               <div class="bcn-ev-row__body" data-card-body>
                 <ul class="bcn-ev-attached" data-attached-list={a.id}></ul>
-                <p class="bcn-ev-row__hint type-body-small" data-attached-hint>
+                <p class="bcn-ev-row__hint typography-body-sm" data-attached-hint>
                   Drag evidence here to attach it.
                 </p>
               </div>
@@ -219,7 +219,7 @@ import { scopeIcon } from '../../data/global-search';
           <EsaBadge value="Suggested" size="sm" />
         </span>
         <span class="bcn-ev-attached__remove">
-          <EsaIconButton icon="x" label="Remove this evidence from the action" size="sm" />
+          <EsaIconButton variant="chrome" iconOnly icon="x" label="Remove this evidence from the action" size="sm" />
         </span>
       </li>
     </template>
@@ -257,7 +257,7 @@ import { scopeIcon } from '../../data/global-search';
     flex-direction: column;
     min-height: 0;
     height: 100%;
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
   /* Title only now — the filters moved into the bar below, so this matches the Evidence
      column's header box exactly. Keep min-height in sync with .bcn-ev-staging__head. */
@@ -269,7 +269,7 @@ import { scopeIcon } from '../../data/global-search';
     min-height: 60px;
     padding: var(--spacing-350, 0.875rem) var(--spacing-400);
   }
-  /* The ruled filter row. --color-border is the same token esa-tab-layout draws its
+  /* The ruled filter row. --color-border-default is the same token esa-tab-layout draws its
      underline with, and the padding matches the tab strip's, so the two hairlines are one
      continuous line across the seam. */
   .bcn-ev-targets__filters {
@@ -291,7 +291,7 @@ import { scopeIcon } from '../../data/global-search';
        not a measured pixel — if the tab size changes, this line follows it. */
     min-height: calc(var(--tab-layout-height-sm, 36px) + 1px + var(--_lift));
     box-sizing: border-box;
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border-default);
   }
   /* The search sits BELOW the filter card, between it and the list it searches. */
   .bcn-ev-targets__search {
@@ -312,15 +312,15 @@ import { scopeIcon } from '../../data/global-search';
   .bcn-ev-targets__flabel {
     flex: none;
     /* 13px is a DELIBERATE hard-code, not a missing token: the scale steps 14px
-       (--type-size-150) straight to 12px (--type-size-100), and 12px is under the floor
+       (--font-size-150) straight to 12px (--font-size-100), and 12px is under the floor
        design-principles sets for the smallest legible meta text. 13px is that floor exactly
        — the smallest these can go and still be inside the system.
        Colour steps UP as the size steps down (tertiary → secondary), per the same rule:
        "never fainter: darken as you shrink". A 13px tertiary label is the combination the
        house style specifically warns against. */
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-secondary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-secondary);
     white-space: nowrap;
   }
   /* Each box is sized by FLEX BASIS, not min-width: esa-select's intrinsic width is wider
@@ -345,9 +345,9 @@ import { scopeIcon } from '../../data/global-search';
   }
   /* Count of actions in view — the same signal the wizard's column header carries. */
   .bcn-ev-targets__count {
-    font-size: var(--type-size-150, 0.875rem);
-    font-weight: var(--font-weight-regular);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150, 0.875rem);
+    font-weight: var(--typography-font-weight-regular);
+    color: var(--color-content-default-tertiary);
   }
   /* Matches BcnEvidenceStaging's header exactly — the two panels are peers, so their
      headings must resolve to the same rendered size, not just the same intent. */
@@ -356,14 +356,14 @@ import { scopeIcon } from '../../data/global-search';
     align-items: center;
     gap: var(--spacing-200);
     margin: 0;
-    font-size: var(--type-size-250);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-250);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.25;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-ev-targets__title :global(.esa-icon) {
     flex: none;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
 
 
@@ -379,9 +379,9 @@ import { scopeIcon } from '../../data/global-search';
      same whether it is one attachment or the summary of all of them. */
   .bcn-ev-targets__pending {
     --bcn-unsaved: var(--color-action);
-    --color-warning-subtle: color-mix(in srgb, var(--bcn-unsaved) 6%, transparent);
-    --color-warning-border: color-mix(in srgb, var(--bcn-unsaved) 45%, transparent);
-    --color-warning-strong: var(--bcn-unsaved);
+    --color-background-utility-warning-subtle: color-mix(in srgb, var(--bcn-unsaved) 6%, transparent);
+    --color-border-utility-warning: color-mix(in srgb, var(--bcn-unsaved) 45%, transparent);
+    --color-content-utility-warning: var(--bcn-unsaved);
     flex: none;
     padding: 0 var(--spacing-400) var(--spacing-400);
     /* Tighter than the lego default (12/16). --alert-box-padding is a real hook and, unlike
@@ -406,10 +406,10 @@ import { scopeIcon } from '../../data/global-search';
     align-items: center;
     gap: var(--spacing-250, 0.625rem);
     padding: var(--spacing-300);
-    border: 1px solid var(--color-border-light);
+    border: 1px solid var(--color-border-default-subtle);
     border-radius: var(--radius-200);
-    background: var(--color-background);
-    color: var(--color-text-secondary);
+    background: var(--color-background-default);
+    color: var(--color-content-default-secondary);
   }
   .bcn-ev-targets__working[hidden] {
     display: none;
@@ -418,10 +418,10 @@ import { scopeIcon } from '../../data/global-search';
   .bcn-ev-targets__notice {
     margin: 0;
     padding: var(--spacing-250, 0.625rem) var(--spacing-300);
-    border: 1px solid var(--color-border-light);
+    border: 1px solid var(--color-border-default-subtle);
     border-radius: var(--radius-200);
-    background: var(--color-background);
-    color: var(--color-text-secondary);
+    background: var(--color-background-default);
+    color: var(--color-content-default-secondary);
   }
   .bcn-ev-targets__notice[hidden] {
     display: none;
@@ -476,12 +476,12 @@ import { scopeIcon } from '../../data/global-search';
      the action is only the destination, so the entity colour would be naming the wrong half
      of the interaction — it read as a stray pink with nothing else on the surface to
      justify it.
-     --color-secondary (#00918b), not --color-primary (#005862): design-principles reserves
+     --color-background-brand-muted (#00918b), not --color-background-brand (#005862): design-principles reserves
      saturated brand for the single primary action, which on this surface is the Attach
      button in the footer. A transient drop state should not compete with it. */
   .bcn-ev-targets__item[data-receiving] :global(.esa-card) {
-    border-color: var(--color-secondary);
-    background: color-mix(in srgb, var(--color-secondary) 5%, transparent);
+    border-color: var(--color-background-brand-muted);
+    background: color-mix(in srgb, var(--color-background-brand-muted) 5%, transparent);
   }
   /* Already holds the evidence being dragged — a valid target for something else, but not
      for this. Dimmed and inert rather than hidden, so the list does not reflow mid-drag. */
@@ -509,11 +509,11 @@ import { scopeIcon } from '../../data/global-search';
     align-items: center;
     gap: var(--spacing-200);
     padding: var(--spacing-050) var(--spacing-200);
-    border: 1px solid var(--color-border-light);
+    border: 1px solid var(--color-border-default-subtle);
     border-radius: var(--radius-200);
-    background: var(--color-background);
+    background: var(--color-background-default);
     font-size: 0.8125rem;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   /* UNSAVED — the Setup Wizard's pink (--color-action #d45087) as a border plus a light
      color-mix fill, the same pairing actions-step.component.scss uses for its own live
@@ -537,28 +537,26 @@ import { scopeIcon } from '../../data/global-search';
   /* The suggestion marker now lives HERE, on the individual attachment the utility made,
      not on the action card. The action was not suggested — this particular pairing was. */
   .bcn-ev-attached__mark :global(.esa-badge) {
-    --badge-bg: var(--color-info-subtle);
-    --badge-text-color: var(--color-text-primary);
-    border: 1px solid color-mix(in srgb, var(--color-info) 35%, transparent);
-    font-weight: var(--font-weight-medium);
-  }
-  /* The detach button is what SETS this row's height — at size="sm" it is 28px, more than
-     the text and padding together, so trimming the padding alone barely moved the row. The
-     button reads the shared form-size token, so re-pointing --form-height-sm here brings it
-     down with the rest instead of leaving one control at the old scale.
-     24px is still a comfortable pointer target on a dense desktop data surface; it is below
-     the 44px touch guideline, which this list is not designed for. */
+    --badge-bg: var(--color-background-utility-info-subtle);
+    --badge-text-color: var(--color-content-default);
+    border: 1px solid color-mix(in srgb, var(--color-background-utility-info) 35%, transparent);
+    font-weight: var(--typography-font-weight-medium);
+  }
+  /* The detach button used a --form-height-sm: 24px re-point to tighten this row; the
+     hub deleted that surface (buttons size from --spacing padding now), so the row sits
+     at the lego's natural sm height. Reclaiming the extra ~4px would mean reaching into
+     esa-button's private pad vars through its internal class — not worth the coupling
+     for dense-list polish. */
   .bcn-ev-attached__remove {
     flex: none;
-    color: var(--color-text-tertiary);
-    --form-height-sm: 24px;
+    color: var(--color-content-default-tertiary);
   }
 
   /* The invitation, shown only while the card holds nothing — and drawn as a real drop
      zone rather than a line of prose. Ported from the wizard's .actions-panel__create-zone:
      dashed edge at rest over a 3% tint, centred. It reads as somewhere you can put
      something, which is exactly what it is. The wizard's tint is the action entity colour;
-     this uses --color-secondary for the reason given at the drop states above. */
+     this uses --color-background-brand-muted for the reason given at the drop states above. */
   /* Always dashed while the list is empty — the zone reads as somewhere you can put
      something whether or not a drag is in flight. (A drag-only variant was tried; it made
      the empty card look inert until you were already committed to a drag.) */
@@ -568,13 +566,13 @@ import { scopeIcon } from '../../data/global-search';
     justify-content: center;
     margin: var(--spacing-200) 0 0;
     padding: var(--spacing-200);
-    border: 1px dashed var(--color-border);
+    border: 1px dashed var(--color-border-default);
     border-radius: var(--radius-200);
     /* No fill. The dashed edge alone says "put something here"; a tint on top of it was
        doing the same job twice, and on the column's sunken gray it read as a stray wash
        rather than as an affordance. */
     background: none;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     /* Italic — it is an instruction about what to do with the empty space, not a label for
        something that is there. */
     font-style: italic;
@@ -590,8 +588,8 @@ import { scopeIcon } from '../../data/global-search';
      so dropping it at the moment you are actually dragging over the zone removes the cue
      exactly when it is being used. Colour alone carries the state change. */
   .bcn-ev-targets__item[data-receiving] .bcn-ev-row__hint {
-    border-color: var(--color-secondary);
-    background: color-mix(in srgb, var(--color-secondary) 8%, transparent);
+    border-color: var(--color-background-brand-muted);
+    background: color-mix(in srgb, var(--color-background-brand-muted) 8%, transparent);
   }
   .bcn-ev-row__main {
     flex: 1;
@@ -671,7 +669,7 @@ import { scopeIcon } from '../../data/global-search';
   }
   .bcn-ev-row__poptitle {
     margin: 0 0 var(--spacing-200);
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-ev-row__poplist ul {
     list-style: none;
@@ -686,10 +684,10 @@ import { scopeIcon } from '../../data/global-search';
      check it". Quiet 4px badge, tinted away from the entity colours so it cannot be
      mistaken for one. */
   .bcn-ev-row__mark :global(.esa-badge) {
-    --badge-bg: var(--color-info-subtle);
-    --badge-text-color: var(--color-text-primary);
-    border: 1px solid color-mix(in srgb, var(--color-info) 35%, transparent);
-    font-weight: var(--font-weight-medium);
+    --badge-bg: var(--color-background-utility-info-subtle);
+    --badge-text-color: var(--color-content-default);
+    border: 1px solid color-mix(in srgb, var(--color-background-utility-info) 35%, transparent);
+    font-weight: var(--typography-font-weight-medium);
   }
   /* Shrink-to-content, not flex:1 — the codes sit immediately after the name rather than
      being pushed to the far edge. The name still truncates first when a row runs long. */
@@ -700,12 +698,12 @@ import { scopeIcon } from '../../data/global-search';
     flex: 0 1 auto;
     min-width: 22ch;
     /* 14px, the dense-surface base — these are scan-and-pick lists, not prose. Stepped down
-       from --type-size-200 (15px) with the card padding, so the row gets tighter as a whole
+       from --font-size-200 (15px) with the card padding, so the row gets tighter as a whole
        rather than just losing its margins. */
-    font-size: var(--type-size-150, 0.875rem);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-150, 0.875rem);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.35;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
 
   /* ── Tags, styled from the wizard's .action-card__tag: a quiet 4px tag on gray-100 with
@@ -722,12 +720,12 @@ import { scopeIcon } from '../../data/global-search';
   .bcn-ev-row__tags :global(.esa-badge) {
     --badge-bg: var(--bcn-gray-100);
     --badge-text-color: var(--bcn-gray-700);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--typography-font-weight-medium);
   }
   /* The reason a suggested row is here — the reviewable half of "suggests / approves". */
   .bcn-ev-row__why {
     margin: 2px 0 0;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     font-style: italic;
   }
   .bcn-ev-row__why[hidden] {
@@ -738,7 +736,7 @@ import { scopeIcon } from '../../data/global-search';
     display: flex;
     align-items: center;
     gap: var(--spacing-150);
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-ev-row__mark[hidden] {
     display: none;
diff --git a/src/components/bcn/BcnFilterBar.astro b/src/components/bcn/BcnFilterBar.astro
index 9836fb20..5e93ac18 100644
--- a/src/components/bcn/BcnFilterBar.astro
+++ b/src/components/bcn/BcnFilterBar.astro
@@ -84,8 +84,8 @@ const hasActions = Astro.slots.has('actions');
 <style>
   /* Carded two-band shell — the faithful port. Semantic tokens only. */
   .bcn-filterbar {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
   }
 
@@ -106,7 +106,7 @@ const hasActions = Astro.slots.has('actions');
   }
   /* The divider exists only when there is a band above it to divide from. */
   .bcn-filterbar__top + .bcn-filterbar__bottom {
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--color-border-default);
   }
 
   .bcn-filterbar__group {
@@ -117,9 +117,9 @@ const hasActions = Astro.slots.has('actions');
 
   /* A readable word, not an ornamental micro-label. */
   .bcn-filterbar__label {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
 
diff --git a/src/components/bcn/BcnFindingList.astro b/src/components/bcn/BcnFindingList.astro
index 13165935..d1329fa3 100644
--- a/src/components/bcn/BcnFindingList.astro
+++ b/src/components/bcn/BcnFindingList.astro
@@ -129,9 +129,9 @@ const hasActions = Astro.slots.has('actions');
                   aria-hidden="true"
                 />
                 <span class="bcn-finding-row__text">
-                  <span class="bcn-finding-row__category type-body-small">{f.category}</span>
-                  <span class="bcn-finding-row__name type-body">{f.name}</span>
-                  <span class="bcn-finding-row__note type-body-small">{f.note}</span>
+                  <span class="bcn-finding-row__category typography-body-sm">{f.category}</span>
+                  <span class="bcn-finding-row__name typography-body-md">{f.name}</span>
+                  <span class="bcn-finding-row__note typography-body-sm">{f.note}</span>
                 </span>
                 <span class="bcn-finding-row__risk">
                   <BcnStatusChip status={f.risk} label={RISK_LABEL[f.risk]} hex={f.riskHex} />
@@ -189,7 +189,7 @@ const hasActions = Astro.slots.has('actions');
     flex-direction: column;
   }
   .bcn-finding-list__rows > li + li {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
 
   /* The card is padding="none" so the row band runs full-bleed; the empty state has no
@@ -230,10 +230,10 @@ const hasActions = Astro.slots.has('actions');
     transition: background 150ms ease;
   }
   .bcn-finding-row:hover {
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
   .bcn-finding-row:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-background-brand);
     outline-offset: -2px;
   }
 
@@ -244,7 +244,7 @@ const hasActions = Astro.slots.has('actions');
     height: 10px;
     margin-top: var(--spacing-150);
     border-radius: var(--radius-full);
-    background: var(--_swatch, var(--color-border-strong));
+    background: var(--_swatch, var(--color-border-default-strong));
     flex-shrink: 0;
   }
 
@@ -259,16 +259,16 @@ const hasActions = Astro.slots.has('actions');
      apart (a short family above the name, a sentence below it), so neither needs an
      ornamental treatment to be legible as its own field. */
   .bcn-finding-row__category {
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     line-height: 1.4;
   }
   .bcn-finding-row__name {
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     line-height: 1.4;
   }
   .bcn-finding-row__note {
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     line-height: 1.4;
   }
 
diff --git a/src/components/bcn/BcnFlagList.astro b/src/components/bcn/BcnFlagList.astro
index 4704078d..0446530e 100644
--- a/src/components/bcn/BcnFlagList.astro
+++ b/src/components/bcn/BcnFlagList.astro
@@ -35,7 +35,7 @@ const { title, description, flags } = Astro.props;
 ---
 
 <EsaCard variant="outlined" title={title}>
-  <p class="bcn-flag-list__desc type-body">{description}</p>
+  <p class="bcn-flag-list__desc typography-body-md">{description}</p>
   <ul class="bcn-flag-list">
     {
       flags.map((flag) => (
@@ -54,7 +54,7 @@ const { title, description, flags } = Astro.props;
      meta pair — it reads as the first thing in the body instead. */
   .bcn-flag-list__desc {
     margin: 0 0 var(--spacing-400, 1rem);
-    color: var(--color-text-secondary, #525252);
+    color: var(--color-content-default-secondary, #525252);
   }
 
   /* Each BcnFlagRow owns its own block padding; the <li> only carries the hairline
@@ -67,6 +67,6 @@ const { title, description, flags } = Astro.props;
     flex-direction: column;
   }
   .bcn-flag-list > li + li {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
 </style>
diff --git a/src/components/bcn/BcnFlagRow.astro b/src/components/bcn/BcnFlagRow.astro
index 63a85ac5..77c983f3 100644
--- a/src/components/bcn/BcnFlagRow.astro
+++ b/src/components/bcn/BcnFlagRow.astro
@@ -54,10 +54,10 @@ const gaNote = flag.removeAtGa ? `Remove at GA${flag.gaTarget ? ` (${flag.gaTarg
     checked={flag.enabled ? '' : undefined}
   ></esa-switch-toggle>
 
-  <p class="bcn-flag-row__name type-body">{flag.displayName}</p>
+  <p class="bcn-flag-row__name typography-body-md">{flag.displayName}</p>
 
-  <p class="bcn-flag-row__desc type-body-small">{flag.description}</p>
-  {gaNote && <p class="bcn-flag-row__meta type-caption">{gaNote}</p>}
+  <p class="bcn-flag-row__desc typography-body-sm">{flag.description}</p>
+  {gaNote && <p class="bcn-flag-row__meta typography-meta">{gaNote}</p>}
 </div>
 
 <script>
@@ -107,14 +107,14 @@ const gaNote = flag.removeAtGa ? `Remove at GA${flag.gaTarget ? ` (${flag.gaTarg
   }
 
   /* The display name is the whole line, so weight and ink sit on the paragraph itself.
-     type-body's relaxed 1.8 would open a gap between the name and the description under
+     typography-body-md's relaxed 1.8 would open a gap between the name and the description under
      it; both are tightened here (a scoped selector outranks the role class). */
   .bcn-flag-row__name {
     margin: 0;
     line-height: 1.4;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
-  .bcn-flag-row__desc { margin: 0; line-height: 1.4; color: var(--color-text-secondary); }
-  .bcn-flag-row__meta { margin: 0; color: var(--color-text-tertiary); }
+  .bcn-flag-row__desc { margin: 0; line-height: 1.4; color: var(--color-content-default-secondary); }
+  .bcn-flag-row__meta { margin: 0; color: var(--color-content-default-tertiary); }
 </style>
diff --git a/src/components/bcn/BcnFledgingCountdown.astro b/src/components/bcn/BcnFledgingCountdown.astro
index cf8e89aa..d0f36409 100644
--- a/src/components/bcn/BcnFledgingCountdown.astro
+++ b/src/components/bcn/BcnFledgingCountdown.astro
@@ -109,21 +109,21 @@ const INFO = '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12
   }
   .bcn-fledge__num {
     font-family: var(--font-decorative);
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-bold);
     line-height: 1;
-    color: var(--color-secondary);
+    color: var(--color-background-brand-muted);
     font-variant-numeric: tabular-nums;
   }
-  .bcn-fledge__unit { font-size: 0.7em; font-weight: var(--font-weight-semibold); }
+  .bcn-fledge__unit { font-size: 0.7em; font-weight: var(--typography-font-weight-semibold); }
   .bcn-fledge__caption {
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
     white-space: nowrap;
   }
   .bcn-fledge[data-fledged='true'] .bcn-fledge__num {
-    font-size: var(--type-size-300);
-    color: var(--color-success);
+    font-size: var(--font-size-300);
+    color: var(--color-background-utility-success);
   }
 
   /* ── Dated rail (right) ── */
@@ -140,14 +140,14 @@ const INFO = '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12
     right: 7px;
     height: 6px;
     border-radius: var(--radius-full);
-    background: var(--color-border);
+    background: var(--color-border-default);
   }
   .bcn-fledge__fill {
     position: absolute;
     inset: 0 auto 0 0;
     height: 100%;
     border-radius: var(--radius-full);
-    background: var(--color-secondary);
+    background: var(--color-background-brand-muted);
   }
   .bcn-fledge__dot {
     position: absolute;
@@ -156,17 +156,17 @@ const INFO = '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12
     width: 12px;
     height: 12px;
     border-radius: var(--radius-full);
-    background: var(--color-surface);
-    border: 2px solid var(--color-border-strong);
+    background: var(--color-background-elevation-raised);
+    border: 2px solid var(--color-border-default-strong);
     z-index: 1;
   }
   .bcn-fledge__dot[data-reached='true'] {
-    background: var(--color-secondary);
-    border-color: var(--color-secondary);
+    background: var(--color-background-brand-muted);
+    border-color: var(--color-background-brand-muted);
   }
   .bcn-fledge__dot--end[data-reached='true'] {
-    background: var(--color-success);
-    border-color: var(--color-success);
+    background: var(--color-background-utility-success);
+    border-color: var(--color-background-utility-success);
   }
   .bcn-fledge__today {
     position: absolute;
@@ -175,8 +175,8 @@ const INFO = '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12
     height: 18px;
     transform: translate(-50%, -50%);
     border-radius: var(--radius-full);
-    background: var(--color-secondary);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 16%, transparent);
+    background: var(--color-background-brand-muted);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-background-brand-muted) 16%, transparent);
     z-index: 2;
   }
 
@@ -192,13 +192,13 @@ const INFO = '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12
   .bcn-fledge__cap--mid { transform: translateX(-50%); align-items: center; text-align: center; }
   .bcn-fledge__cap--end { right: 0; align-items: flex-end; text-align: right; }
   .bcn-fledge__cap-label {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .bcn-fledge__cap-date {
-    font-size: var(--type-size-100);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-100);
+    color: var(--color-content-default-secondary);
     font-variant-numeric: tabular-nums;
   }
 
@@ -208,9 +208,9 @@ const INFO = '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12
     align-items: flex-start;
     gap: var(--spacing-150);
     margin: 0;
-    font-size: var(--type-size-150);
+    font-size: var(--font-size-150);
     line-height: 1.45;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
-  .bcn-fledge__note :global(.esa-icon) { flex-shrink: 0; margin-top: 1px; color: var(--color-text-tertiary); }
+  .bcn-fledge__note :global(.esa-icon) { flex-shrink: 0; margin-top: 1px; color: var(--color-content-default-tertiary); }
 </style>
diff --git a/src/components/bcn/BcnFootprintMap.astro b/src/components/bcn/BcnFootprintMap.astro
index 76fc43b0..2edf1d37 100644
--- a/src/components/bcn/BcnFootprintMap.astro
+++ b/src/components/bcn/BcnFootprintMap.astro
@@ -76,7 +76,7 @@
 // this is the reusable home for a component footprint. The CSS below is the map
 // container's own geometry plus the legend key, which no lego models.
 import EsaCard from '@esa/ecology/esa-card.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import '../../styles/beacon-map.css';
 
 export interface MapPoint {
@@ -87,7 +87,7 @@ export interface MapPoint {
   status?: string;
   /** Tooltip text on the interactive map. Falls back to the id. */
   label?: string;
-  /** Explicit override. A TOKEN REFERENCE (`var(--color-success)`), never a hex —
+  /** Explicit override. A TOKEN REFERENCE (`var(--color-background-utility-success)`), never a hex —
    *  the controller resolves var() to a literal because Leaflet paths can't take one. */
   markColor?: string;
 }
@@ -161,17 +161,17 @@ const {
 // 'IN PROGRESS' all land. Zero literals: every value is a token reference, and
 // the --bcn-status-* layer already re-points to the status-color standard.
 const STATUS_COLOR: Record<string, string> = {
-  cleared: 'var(--color-success)',
+  cleared: 'var(--color-background-utility-success)',
   complete: 'var(--bcn-status-completed)',
   completed: 'var(--bcn-status-completed)',
-  scheduled: 'var(--color-info)',
-  active: 'var(--color-info)',
+  scheduled: 'var(--color-background-utility-info)',
+  active: 'var(--color-background-utility-info)',
   'in progress': 'var(--bcn-status-in-progress)',
   'not started': 'var(--bcn-status-not-started)',
   'on hold': 'var(--bcn-status-not-started)',
   overdue: 'var(--bcn-status-overdue)',
 };
-const FALLBACK_COLOR = 'var(--color-text-tertiary)';
+const FALLBACK_COLOR = 'var(--color-content-default-tertiary)';
 
 const payload = {
   points: points.map((p) => ({
@@ -219,7 +219,7 @@ const expandId = `${idPrefix}-expand`;
       <EsaCard title={title}>
         {/* esa-icon-button doesn't forward `id`, so the host span carries it — repo idiom. */}
         <span slot="actions" id={expandId}>
-          <EsaIconButton icon="expand" label={`Expand ${title.toLowerCase()} map`} size="sm" />
+          <EsaIconButton variant="chrome" iconOnly icon="expand" label={`Expand ${title.toLowerCase()} map`} size="sm" />
         </span>
 
         <div class="stack" data-gap="sm">
@@ -314,7 +314,7 @@ const expandId = `${idPrefix}-expand`;
     lat: number;
     lon: number;
     label: string;
-    /** Token reference (`var(--color-success)`) or a literal. */
+    /** Token reference (`var(--color-background-utility-success)`) or a literal. */
     color: string;
   }
 
@@ -350,7 +350,7 @@ const expandId = `${idPrefix}-expand`;
   const rootStyle = () => getComputedStyle(document.documentElement);
 
   /**
-   * Leaflet paths take LITERAL colors, so a `var(--color-success)` prop has to be
+   * Leaflet paths take LITERAL colors, so a `var(--color-background-utility-success)` prop has to be
    * resolved first. Recurses because a semantic token may alias another var(),
    * and honors an inline var() fallback.
    */
@@ -412,7 +412,7 @@ const expandId = `${idPrefix}-expand`;
 
   /** Draw the geometry into `map` and fit the view to it. */
   function plot(map: L.Map, data: MapData, interactive: boolean, pad: number) {
-    const stroke = rootStyle().getPropertyValue('--color-surface').trim() || '#ffffff';
+    const stroke = rootStyle().getPropertyValue('--color-background-elevation-raised').trim() || '#ffffff';
     const group = L.layerGroup().addTo(map);
 
     // Areas first, so points sit ON them. Translucent fill with a solid edge:
@@ -566,9 +566,9 @@ const expandId = `${idPrefix}-expand`;
   .bcn-fmap__surface {
     width: 100%;
     border-radius: var(--radius-200);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     overflow: hidden;
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
 
   /* Rail inset — a fixed band that reads as a picture. */
@@ -587,8 +587,8 @@ const expandId = `${idPrefix}-expand`;
 
   /* Leaflet injects .leaflet-container itself, so it is outside Astro's scope. */
   .bcn-fmap__surface :global(.leaflet-container) {
-    font-family: var(--font-sans, inherit);
-    background: var(--color-surface-sunken);
+    font-family: var(--typography-font-family-sans, inherit);
+    background: var(--color-background-elevation-sunken);
   }
   /* A picture must not offer a grab cursor it won't honor. */
   .bcn-fmap__surface--inset :global(.leaflet-container) {
@@ -608,11 +608,11 @@ const expandId = `${idPrefix}-expand`;
     font-size: 0.8125rem; /* 13px — the meta floor */
   }
   .bcn-fmap__source-label {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-fmap__source-value {
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-secondary);
   }
 
   .bcn-fmap__foot {
@@ -639,8 +639,8 @@ const expandId = `${idPrefix}-expand`;
     margin: 0;
     padding: 0;
     width: 100%;
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
   }
   /* In BOTH footers the legend sits beside something else, so it must not claim the
      full width — otherwise it pushes the sibling action onto its own row. */
@@ -658,13 +658,13 @@ const expandId = `${idPrefix}-expand`;
      a dashed rule for a line. --_cmap-key is set inline from the legend prop. */
   .bcn-fmap__key {
     flex-shrink: 0;
-    background: var(--_cmap-key, var(--color-border, #dcdcdc));
+    background: var(--_cmap-key, var(--color-border-default, #dcdcdc));
   }
   .bcn-fmap__key[data-shape='dot'] {
     width: 10px;
     height: 10px;
     border-radius: var(--radius-full, 999px);
-    box-shadow: 0 0 0 1px var(--color-surface, #ffffff);
+    box-shadow: 0 0 0 1px var(--color-background-elevation-raised, #ffffff);
   }
   /* Matches the polygon's own treatment — 18% fill inside a solid edge. */
   .bcn-fmap__key[data-shape='area'] {
diff --git a/src/components/bcn/BcnFundingPlan.astro b/src/components/bcn/BcnFundingPlan.astro
index ee3865e7..05ce547c 100644
--- a/src/components/bcn/BcnFundingPlan.astro
+++ b/src/components/bcn/BcnFundingPlan.astro
@@ -254,13 +254,13 @@ const hasSub = rollup.totalFunding !== rollup.ownFunding;
   .bcn-funding { display: flex; flex-direction: column; gap: var(--spacing-300); }
 
   .bcn-funding__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
-  .bcn-funding__table th, .bcn-funding__table td { padding: var(--spacing-150) var(--spacing-200); font-size: var(--type-size-200); text-align: left; border-bottom: 1px solid var(--color-border-light); }
-  .bcn-funding__table thead th { font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); border-bottom: 1px solid var(--color-border); }
+  .bcn-funding__table th, .bcn-funding__table td { padding: var(--spacing-150) var(--spacing-200); font-size: var(--font-size-200); text-align: left; border-bottom: 1px solid var(--color-border-default-subtle); }
+  .bcn-funding__table thead th { font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-tertiary); border-bottom: 1px solid var(--color-border-default); }
   /* Drawer (slim): one label scale with the esa field labels — same tokens the
      legos' .field__label uses (form-label-*, sm field-size fallback). */
   .bcn-funding--slim .bcn-funding__table thead th {
-    font-size: var(--form-label-font-size, var(--form-font-size-sm, 12px));
-    font-weight: var(--form-label-font-weight, var(--font-weight-medium));
+    font-size: var(--typography-label-md-font-size, var(--typography-label-xs-font-size, 12px));
+    font-weight: var(--typography-label-md-font-weight, var(--typography-font-weight-medium));
     color: var(--form-label-color);
   }
   /* The amount input fills its column (two-column task tables only — parents
@@ -268,11 +268,11 @@ const hasSub = rollup.totalFunding !== rollup.ownFunding;
   .bcn-funding--slim .bcn-funding__table:not(:has([data-cell='sub'])) .bcn-funding__edit { width: 60%; }
   .bcn-funding--slim .bcn-funding__field { width: 100%; }
   .bcn-funding__num { text-align: right; }
-  .bcn-funding__year { font-weight: var(--font-weight-regular); color: var(--color-text-primary); }
-  .bcn-funding__muted { color: var(--color-text-secondary); }
-  .bcn-funding__strong { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-funding__table tfoot th, .bcn-funding__table tfoot td { border-top: 1px solid var(--color-border-strong); border-bottom: 0; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-funding__empty { margin: 0; font-size: var(--type-size-100); color: var(--color-text-tertiary); font-style: italic; }
+  .bcn-funding__year { font-weight: var(--typography-font-weight-regular); color: var(--color-content-default); }
+  .bcn-funding__muted { color: var(--color-content-default-secondary); }
+  .bcn-funding__strong { font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-funding__table tfoot th, .bcn-funding__table tfoot td { border-top: 1px solid var(--color-border-default-strong); border-bottom: 0; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-funding__empty { margin: 0; font-size: var(--font-size-100); color: var(--color-content-default-tertiary); font-style: italic; }
 
   .bcn-funding__edit { padding-top: var(--spacing-100); padding-bottom: var(--spacing-100); }
   .bcn-funding__field { width: 130px; margin-left: auto; }
diff --git a/src/components/bcn/BcnGisLayerPanel.astro b/src/components/bcn/BcnGisLayerPanel.astro
index 3a7e153a..58aff288 100644
--- a/src/components/bcn/BcnGisLayerPanel.astro
+++ b/src/components/bcn/BcnGisLayerPanel.astro
@@ -46,7 +46,7 @@
 // CSS below is that divider glue plus the row's own grid.
 import EsaCard from '@esa/ecology/esa-card.astro';
 import EsaButton from '@esa/ecology/esa-button.astro';
-import EsaIconLink from '@esa/ecology/esa-icon-link.astro';
+import EsaIconLink from '@esa/ecology/esa-button.astro';
 import BcnStatusChip from './BcnStatusChip.astro';
 
 export interface GisLayer {
@@ -131,8 +131,8 @@ const onCount = layers.filter((l) => l.defaultOn).length;
                 <span class="bcn-gis-row__swatch" style={`--_swatch: ${layer.color};`} />
 
                 <span class="bcn-gis-row__text">
-                  <span class="bcn-gis-row__name type-body">{layer.name}</span>
-                  <span class="bcn-gis-row__meta type-body-small">
+                  <span class="bcn-gis-row__name typography-body-md">{layer.name}</span>
+                  <span class="bcn-gis-row__meta typography-body-sm">
                     {layer.category} · {featureNote(layer.features)}
                   </span>
                 </span>
@@ -158,8 +158,8 @@ const onCount = layers.filter((l) => l.defaultOn).length;
     {
       manageHref && (
         <div class="repel" slot="footer">
-          <span class="bcn-gis-panel__note type-body-small">Sources refresh nightly</span>
-          <EsaIconLink href={manageHref} iconRight="arrow-right" size="sm">
+          <span class="bcn-gis-panel__note typography-body-sm">Sources refresh nightly</span>
+          <EsaIconLink variant="chrome" href={manageHref} iconRight="arrow-right" size="sm">
             Manage data feeds
           </EsaIconLink>
         </div>
@@ -249,7 +249,7 @@ const onCount = layers.filter((l) => l.defaultOn).length;
     flex-direction: column;
   }
   .bcn-gis-panel__list > li + li {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
 
   /* [ activatable main | switch ] — the split that keeps the control out of the
@@ -276,7 +276,7 @@ const onCount = layers.filter((l) => l.defaultOn).length;
     cursor: pointer;
   }
   .bcn-gis-row__main:hover {
-    background: var(--color-surface-hover);
+    background: var(--color-background-default-hover);
   }
 
   /* The swatch is the row's key to the map, so it is the one thing that dims when the
@@ -287,7 +287,7 @@ const onCount = layers.filter((l) => l.defaultOn).length;
     border-radius: var(--radius-xs);
     background: var(--_swatch);
     /* A ring in the swatch's own darkened color, so pale layers don't vanish on white. */
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_swatch) 65%, var(--color-text-primary));
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_swatch) 65%, var(--color-content-default));
     flex-shrink: 0;
     transition: opacity 120ms ease;
   }
@@ -301,16 +301,16 @@ const onCount = layers.filter((l) => l.defaultOn).length;
     gap: 2px;
     min-width: 0;
   }
-  /* type-body's relaxed line-height would open a gap between the name and the meta
+  /* typography-body-md's relaxed line-height would open a gap between the name and the meta
      line under it; a scoped selector outranks the role class. */
   .bcn-gis-row__name {
     line-height: 1.4;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .bcn-gis-row__meta {
     line-height: 1.4;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   /* display:flex on the HOST is the vertical-centering fix documented in BcnFlagRow:
@@ -333,6 +333,6 @@ const onCount = layers.filter((l) => l.defaultOn).length;
   }
 
   .bcn-gis-panel__note {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
 </style>
diff --git a/src/components/bcn/BcnGridChrome.astro b/src/components/bcn/BcnGridChrome.astro
index 92ed0826..907865d7 100644
--- a/src/components/bcn/BcnGridChrome.astro
+++ b/src/components/bcn/BcnGridChrome.astro
@@ -22,7 +22,7 @@
 // search + clear pair as page markup, not a shared control. bcn-grid-chrome is the
 // reusable home; its own CSS is the search field's minimum width, which no lego owns.
 import EsaButton from '@esa/ecology/esa-button.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 
 interface Props {
   /**
@@ -54,7 +54,7 @@ const showClear = only !== 'search';
     <span class="bcn-gchrome__search">
       <esa-text-field placeholder={searchPlaceholder} size="sm" {...{ [`data-${prefix}-search`]: true }} />
       <span {...{ [`data-${prefix}-search-clear`]: true }} hidden>
-        <EsaIconButton icon="x" label="Clear search" size="sm" />
+        <EsaIconButton variant="chrome" iconOnly icon="x" label="Clear search" size="sm" />
       </span>
     </span>
   )
@@ -63,7 +63,7 @@ const showClear = only !== 'search';
 {
   showClear && (
     <span {...{ [`data-${prefix}-clear-filters`]: true }}>
-      <EsaButton color="ghost" appearance="outline" size="sm">
+      <EsaButton variant="ghost" appearance="outline" size="sm">
         Clear Filters
       </EsaButton>
     </span>
diff --git a/src/components/bcn/BcnGridFooter.astro b/src/components/bcn/BcnGridFooter.astro
index 200bb3a9..82ee32a6 100644
--- a/src/components/bcn/BcnGridFooter.astro
+++ b/src/components/bcn/BcnGridFooter.astro
@@ -34,7 +34,7 @@ const { prefix, total, downloadLabel = 'Download as CSV' } = Astro.props;
 
 <div class="repel bcn-gfoot" data-gap="md">
   <span {...{ [`data-${prefix}-download`]: true }}>
-    <EsaButton color="ghost" appearance="outline" size="sm" icon="download">{downloadLabel}</EsaButton>
+    <EsaButton variant="ghost" appearance="outline" size="sm" icon="download">{downloadLabel}</EsaButton>
   </span>
   <div class="cluster bcn-gfoot__count" data-gap="md">
     <span>Total Records: <span {...{ [`data-${prefix}-total`]: true }}>{total}</span></span>
@@ -44,14 +44,14 @@ const { prefix, total, downloadLabel = 'Download as CSV' } = Astro.props;
 
 <style>
   .bcn-gfoot__count {
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
     font-variant-numeric: tabular-nums;
   }
   /* The filtered figure is subordinate to the total, and absent when nothing is
      filtered — never a gap holding a place. */
   .bcn-gfoot__filtered {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-gfoot__filtered[hidden] {
     display: none;
diff --git a/src/components/bcn/BcnGuidanceDrawer.astro b/src/components/bcn/BcnGuidanceDrawer.astro
index 6084073e..7cf6574c 100644
--- a/src/components/bcn/BcnGuidanceDrawer.astro
+++ b/src/components/bcn/BcnGuidanceDrawer.astro
@@ -164,22 +164,22 @@ const ICON_BOOK =
     --z-modal-backdrop: 1300;
     --z-modal: 1301;
     --side-dialog-width: 460px;
-    --backdrop-filter: blur(2px);
+    --side-dialog-backdrop-filter: blur(2px);
   }
   .bcn-gd-article {
     --z-modal-backdrop: 1302;
     --z-modal: 1303;
     --side-dialog-width: 460px;
-    --backdrop-filter: blur(2px);
+    --side-dialog-backdrop-filter: blur(2px);
   }
 
   /* ── header (projected into the parent lego's header slot) ── */
   .bcn-gd__header { display: flex; align-items: center; gap: var(--spacing-300); min-width: 0; }
   .bcn-gd__title {
     font-family: var(--font-decorative); /* Besley — the guide's own voice */
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     line-height: 1.2;
   }
 
@@ -197,11 +197,11 @@ const ICON_BOOK =
     align-items: center;
     gap: var(--spacing-200);
     margin: 0;
-    font-size: var(--type-size-250);
-    font-weight: var(--font-weight-bold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-250);
+    font-weight: var(--typography-font-weight-bold);
+    color: var(--color-content-default);
   }
-  .bcn-gd__label :global(.esa-icon) { color: var(--color-text-tertiary); flex: none; }
+  .bcn-gd__label :global(.esa-icon) { color: var(--color-content-default-tertiary); flex: none; }
 
   /* You are here — a quiet Aldo-tinted card: the guide speaking */
   .bcn-gd__here {
@@ -213,8 +213,8 @@ const ICON_BOOK =
     border: 1px solid var(--bcn-aldo-100);
     border-radius: var(--radius-200);
   }
-  .bcn-gd__here-page { font-size: var(--type-size-250); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-gd__here-purpose { font-size: var(--type-size-150); color: var(--color-text-secondary); line-height: 1.5; }
+  .bcn-gd__here-page { font-size: var(--font-size-250); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-gd__here-purpose { font-size: var(--font-size-150); color: var(--color-content-default-secondary); line-height: 1.5; }
 
   .bcn-gd__rows { display: flex; flex-direction: column; }
 
@@ -226,18 +226,18 @@ const ICON_BOOK =
     width: 100%;
     padding: var(--spacing-300) var(--spacing-100);
     border: 0;
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-default-subtle);
     background: transparent;
     font: inherit;
     text-align: left;
     cursor: pointer;
   }
-  .bcn-gd-row:hover { background: var(--color-surface-sunken); }
+  .bcn-gd-row:hover { background: var(--color-background-elevation-sunken); }
   .bcn-gd-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
   /* semibold (550) — the medium token resolves to 450 and reads too light for row titles */
-  .bcn-gd-row__title { font-size: var(--type-size-200); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); line-height: 1.35; }
-  .bcn-gd-row__sub { font-size: var(--type-size-150); font-weight: var(--font-weight-regular); color: var(--color-text-secondary); line-height: 1.4; }
-  .bcn-gd-row :global(.esa-icon) { color: var(--color-text-tertiary); flex: none; }
+  .bcn-gd-row__title { font-size: var(--font-size-200); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); line-height: 1.35; }
+  .bcn-gd-row__sub { font-size: var(--font-size-150); font-weight: var(--typography-font-weight-regular); color: var(--color-content-default-secondary); line-height: 1.4; }
+  .bcn-gd-row :global(.esa-icon) { color: var(--color-content-default-tertiary); flex: none; }
 
   /* ── pinned footer: browse row + composer ── */
   .bcn-gd__foot { display: flex; flex-direction: column; gap: var(--spacing-250); }
@@ -246,9 +246,9 @@ const ICON_BOOK =
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-150);
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-background-brand);
     text-decoration: none;
   }
   .bcn-gd__browse:hover { text-decoration: underline; }
@@ -258,8 +258,8 @@ const ICON_BOOK =
     align-items: flex-end;
     gap: var(--spacing-200);
     padding: var(--spacing-150) var(--spacing-150) var(--spacing-150) var(--spacing-300);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
     transition: border-color 150ms ease, box-shadow 150ms ease;
   }
@@ -275,13 +275,13 @@ const ICON_BOOK =
     background: transparent;
     resize: none;
     font-family: inherit;
-    font-size: var(--type-size-200);
+    font-size: var(--font-size-200);
     line-height: 1.5;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     padding: 6px 0;
     overflow-y: hidden; /* JS grows height to content, then flips to auto at max rows */
   }
-  .bcn-gd-composer__input::placeholder { color: var(--color-text-tertiary); }
+  .bcn-gd-composer__input::placeholder { color: var(--color-content-default-tertiary); }
   /* circular send: Aldo-green filled with input, muted when empty */
   .bcn-gd-composer__send {
     flex: none;
@@ -293,14 +293,14 @@ const ICON_BOOK =
     border: 0;
     border-radius: var(--radius-full);
     background: var(--bcn-aldo);
-    color: var(--color-text-inverse);
+    color: var(--color-content-default-knockout);
     cursor: pointer;
     transition: background 150ms ease, color 150ms ease;
   }
   .bcn-gd-composer__send:hover:not(:disabled) { background: var(--bcn-aldo-600); }
   .bcn-gd-composer__send:disabled {
-    background: var(--color-surface-sunken);
-    color: var(--color-text-tertiary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-content-default-tertiary);
     cursor: default;
   }
 
@@ -315,18 +315,18 @@ const ICON_BOOK =
     border: 0;
     background: transparent;
     font: inherit;
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-secondary);
     cursor: pointer;
   }
-  .bcn-gd-article__back:hover { color: var(--color-text-primary); }
+  .bcn-gd-article__back:hover { color: var(--color-content-default); }
   .bcn-gd-article__titlerow { display: flex; align-items: center; gap: var(--spacing-200); min-width: 0; }
   .bcn-gd-article__title {
     font-family: var(--font-decorative);
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     line-height: 1.25;
   }
   /* quiet 4px kind badge (not a full pill) */
@@ -334,11 +334,11 @@ const ICON_BOOK =
     flex: none;
     padding: 1px 6px;
     border-radius: var(--radius-100);
-    border: 1px solid var(--color-border);
-    background: var(--color-surface);
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
+    border: 1px solid var(--color-border-default);
+    background: var(--color-background-elevation-raised);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-secondary);
     line-height: 1.5;
     white-space: nowrap;
   }
@@ -365,17 +365,17 @@ const ICON_BOOK =
     gap: var(--spacing-200);
     padding: var(--spacing-250) var(--spacing-300);
     border-radius: var(--radius-300);
-    font-size: var(--type-size-150);
+    font-size: var(--font-size-150);
     line-height: 1.5;
   }
   .bcn-gd-msg--user .bcn-gd-msg__bubble {
-    background: var(--color-surface-sunken);
-    color: var(--color-text-primary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-content-default);
     white-space: pre-wrap; /* preserve newlines from Shift+Enter, still textContent */
   }
   .bcn-gd-msg--aldo .bcn-gd-msg__bubble {
     background: var(--bcn-aldo-50);
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-gd-msg__text { margin: 0; }
   .bcn-gd-msg__links { display: flex; flex-direction: column; gap: var(--spacing-100); }
@@ -384,18 +384,18 @@ const ICON_BOOK =
     border: 0;
     background: transparent;
     font: inherit;
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-background-brand);
     text-align: left;
     text-decoration: underline;
     text-underline-offset: 2px;
     cursor: pointer;
   }
   .bcn-gd-msg__browse {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-background-brand);
     text-decoration: underline;
     text-underline-offset: 2px;
   }
diff --git a/src/components/bcn/BcnHelpArticle.astro b/src/components/bcn/BcnHelpArticle.astro
index b4415d3a..aa0838f8 100644
--- a/src/components/bcn/BcnHelpArticle.astro
+++ b/src/components/bcn/BcnHelpArticle.astro
@@ -68,7 +68,7 @@ const GLYPH = {
 <article id={`article-${article.id}`} class:list={['bcn-help-article', compact && 'bcn-help-article--compact']}>
   {!hideTitle && (
     <header class="bcn-help-article__head">
-      <Title class="bcn-help-article__title type-card-title">{article.title}</Title>
+      <Title class="bcn-help-article__title typography-title">{article.title}</Title>
       <EsaBadge value={kindLabel} size="sm" />
     </header>
   )}
@@ -76,14 +76,14 @@ const GLYPH = {
   <div class="bcn-help-article__body">
     {article.blocks.map((block) => {
       if (block.kind === 'p') {
-        return <p class="bcn-help-article__p type-body">{block.text}</p>;
+        return <p class="bcn-help-article__p typography-body-md">{block.text}</p>;
       }
 
       if (block.kind === 'steps') {
         return (
           <ol class="bcn-help-article__steps">
             {block.items.map((item) => (
-              <li class="bcn-help-article__step type-body">{item}</li>
+              <li class="bcn-help-article__step typography-body-md">{item}</li>
             ))}
           </ol>
         );
@@ -98,7 +98,7 @@ const GLYPH = {
             </span>
             <div class="bcn-help-article__callout-body">
               <span class="bcn-help-article__callout-label">{isTip ? 'Tip' : 'Note'}</span>
-              <p class="bcn-help-article__callout-text type-body">{block.text}</p>
+              <p class="bcn-help-article__callout-text typography-body-md">{block.text}</p>
             </div>
           </aside>
         );
@@ -111,7 +111,7 @@ const GLYPH = {
               <span class="bcn-help-article__figure-icon"><EsaIcon name="image" paths={GLYPH.image} size="lg" /></span>
               <span class="bcn-help-article__figure-label">{block.label}</span>
             </div>
-            <figcaption class="bcn-help-article__caption type-caption">{block.caption}</figcaption>
+            <figcaption class="bcn-help-article__caption typography-meta">{block.caption}</figcaption>
           </figure>
         );
       }
@@ -123,7 +123,7 @@ const GLYPH = {
               <span class="bcn-help-article__video-play"><EsaIcon name="play" paths={GLYPH.play} size="md" /></span>
               <span class="bcn-help-article__video-duration"><EsaBadge value={block.duration} size="sm" /></span>
             </div>
-            <figcaption class="bcn-help-article__caption type-caption">{block.label}</figcaption>
+            <figcaption class="bcn-help-article__caption typography-meta">{block.label}</figcaption>
           </figure>
         );
       }
@@ -152,14 +152,14 @@ const GLYPH = {
 
   /* Header: title + quiet kind badge on one line (badge wraps under a long title). */
   .bcn-help-article__head { display: flex; align-items: center; gap: var(--spacing-300); flex-wrap: wrap; }
-  .bcn-help-article__title { margin: 0; color: var(--color-text-primary); }
+  .bcn-help-article__title { margin: 0; color: var(--color-content-default); }
 
   /* Body: even rhythm between blocks; compact tightens it for the drawer. */
   .bcn-help-article__body { display: flex; flex-direction: column; gap: var(--spacing-400); }
   .bcn-help-article--compact .bcn-help-article__body { gap: var(--spacing-300); }
 
-  /* Paragraphs — primary text, never grayed; type-body carries the size. */
-  .bcn-help-article__p { margin: 0; color: var(--color-text-primary); }
+  /* Paragraphs — primary text, never grayed; typography-body-md carries the size. */
+  .bcn-help-article__p { margin: 0; color: var(--color-content-default); }
 
   /* Ordered steps — quiet round numbered markers (neutral gray), NO colored left border. */
   .bcn-help-article__steps {
@@ -169,14 +169,14 @@ const GLYPH = {
   .bcn-help-article__step {
     counter-increment: bcn-step;
     display: grid; grid-template-columns: 1.625rem 1fr; align-items: start; gap: var(--spacing-300);
-    margin: 0; color: var(--color-text-primary);
+    margin: 0; color: var(--color-content-default);
   }
   .bcn-help-article__step::before {
     content: counter(bcn-step);
     display: inline-flex; align-items: center; justify-content: center;
     width: 1.625rem; height: 1.625rem; border-radius: var(--radius-full);
-    background: var(--color-surface-sunken); color: var(--color-text-primary);
-    font-size: 0.8125rem; font-weight: var(--font-weight-semibold); line-height: 1;
+    background: var(--color-background-elevation-sunken); color: var(--color-content-default);
+    font-size: 0.8125rem; font-weight: var(--typography-font-weight-semibold); line-height: 1;
   }
 
   /* Callout — quiet neutral sunken box; Tip and Note share one treatment (gray fill,
@@ -185,15 +185,15 @@ const GLYPH = {
   .bcn-help-article__callout {
     display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--spacing-300);
     padding: var(--spacing-400); border-radius: var(--radius-200);
-    border: 1px solid var(--color-border-light); background: var(--color-surface-sunken);
+    border: 1px solid var(--color-border-default-subtle); background: var(--color-background-elevation-sunken);
   }
   .bcn-help-article--compact .bcn-help-article__callout { padding: var(--spacing-300); }
-  .bcn-help-article__callout-icon { display: inline-flex; margin-top: 1px; color: var(--color-text-secondary); }
+  .bcn-help-article__callout-icon { display: inline-flex; margin-top: 1px; color: var(--color-content-default-secondary); }
   .bcn-help-article__callout-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
   .bcn-help-article__callout-label {
-    font-size: 0.875rem; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary);
+    font-size: 0.875rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-secondary);
   }
-  .bcn-help-article__callout-text { margin: 0; color: var(--color-text-primary); }
+  .bcn-help-article__callout-text { margin: 0; color: var(--color-content-default); }
 
   /* Figure placeholder — a quiet dashed frame with a centered glyph + label; caption
      below. No fake image. */
@@ -201,11 +201,11 @@ const GLYPH = {
   .bcn-help-article__figure-frame {
     display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-200);
     min-height: 8.5rem; padding: var(--spacing-500);
-    border: 1px dashed var(--color-border-strong); border-radius: var(--radius-200);
-    background: var(--color-surface-sunken); text-align: center;
+    border: 1px dashed var(--color-border-default-strong); border-radius: var(--radius-200);
+    background: var(--color-background-elevation-sunken); text-align: center;
   }
-  .bcn-help-article__figure-icon { color: var(--color-text-tertiary); }
-  .bcn-help-article__figure-label { font-size: 0.875rem; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
+  .bcn-help-article__figure-icon { color: var(--color-content-default-tertiary); }
+  .bcn-help-article__figure-label { font-size: 0.875rem; font-weight: var(--typography-font-weight-medium); color: var(--color-content-default-secondary); }
 
   /* Video placeholder — 16:9 frame, subtle dark-on-light panel, centered circular
      play affordance, duration badge in the corner. Static; no real playback. */
@@ -213,29 +213,29 @@ const GLYPH = {
   .bcn-help-article__video-frame {
     position: relative; display: flex; align-items: center; justify-content: center;
     aspect-ratio: 16 / 9; border-radius: var(--radius-200); overflow: hidden;
-    border: 1px solid var(--color-border);
-    background: color-mix(in srgb, var(--color-text-primary) 8%, var(--color-surface-sunken));
+    border: 1px solid var(--color-border-default);
+    background: color-mix(in srgb, var(--color-content-default) 8%, var(--color-background-elevation-sunken));
   }
   .bcn-help-article__video-play {
     display: inline-flex; align-items: center; justify-content: center;
     width: 3rem; height: 3rem; border-radius: var(--radius-full);
-    background: var(--color-surface); color: var(--color-text-primary);
+    background: var(--color-background-elevation-raised); color: var(--color-content-default);
     box-shadow: 0 1px 4px rgb(0 0 0 / 0.18); padding-left: 3px;
   }
   .bcn-help-article__video-duration { position: absolute; right: var(--spacing-200); bottom: var(--spacing-200); }
   .bcn-help-article__video-label,
   .bcn-help-article__caption {
-    /* Genuine meta — floored to 13px so type-caption never dips into micro sizes. */
-    font-size: max(0.8125rem, var(--type-size-100)); color: var(--color-text-secondary); margin: 0;
+    /* Genuine meta — floored to 13px so typography-meta never dips into micro sizes. */
+    font-size: max(0.8125rem, var(--font-size-100)); color: var(--color-content-default-secondary); margin: 0;
   }
 
   /* Related — a quiet label + a row of text links to other articles. */
   .bcn-help-article__related {
     display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--spacing-150) var(--spacing-300);
-    padding-top: var(--spacing-300); border-top: 1px solid var(--color-border-light);
+    padding-top: var(--spacing-300); border-top: 1px solid var(--color-border-default-subtle);
   }
-  .bcn-help-article__related-label { font-size: 0.875rem; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
+  .bcn-help-article__related-label { font-size: 0.875rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-secondary); }
   .bcn-help-article__related-list { display: flex; flex-wrap: wrap; gap: var(--spacing-100) var(--spacing-300); margin: 0; padding: 0; list-style: none; }
-  .bcn-help-article__related-link { font-size: 0.9375rem; color: var(--color-text-link); text-decoration: none; }
-  .bcn-help-article__related-link:hover { color: var(--color-text-link-hover); text-decoration: underline; }
+  .bcn-help-article__related-link { font-size: 0.9375rem; color: var(--color-content-link); text-decoration: none; }
+  .bcn-help-article__related-link:hover { color: var(--color-content-link-hover); text-decoration: underline; }
 </style>
diff --git a/src/components/bcn/BcnHelpBar.astro b/src/components/bcn/BcnHelpBar.astro
index 1e60fc53..c72e814a 100644
--- a/src/components/bcn/BcnHelpBar.astro
+++ b/src/components/bcn/BcnHelpBar.astro
@@ -31,7 +31,7 @@
 // Release Notes page title. esa-icon-button forwards only a registry `icon` name (no
 // custom `paths` passthrough), so the glyph was registered in the ecology icon-registry.
 import BcnAldoMark from './BcnAldoMark.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import { WHATS_NEW } from '../../data/help-center';
 import { RELEASES } from '../../data/release-notes';
 import { withBase } from '../../lib/base';
@@ -69,13 +69,13 @@ const fmtLong = (iso: string): string =>
        where Beacon's bottom affordances live, which is where the global evidence drawer
        belongs. -->
   <esa-tooltip class="bcn-help-bar__tooltip" text="Attach Evidence of Compliance" position="above" data-evidence-trigger>
-    <EsaIconButton icon="file-text" label="Attach Evidence of Compliance" size="md" />
+    <EsaIconButton variant="chrome" iconOnly icon="file-text" label="Attach Evidence of Compliance" size="md" />
   </esa-tooltip>
 
   <!-- What's new — icon-only trigger + unread dot; esa-popover panel opens above the bar. -->
   <esa-popover class="bcn-help-bar__popover" position="top" trigger="click" offset={12}>
     <span class="bcn-help-bar__whatsnew" data-whatsnew>
-      <EsaIconButton icon="notepad-text" label="What's new" size="md" />
+      <EsaIconButton variant="chrome" iconOnly icon="notepad-text" label="What's new" size="md" />
       {WHATS_NEW.length > 0 && (
         <span class="bcn-help-bar__dot" data-whatsnew-dot aria-hidden="true"></span>
       )}
@@ -200,8 +200,8 @@ const fmtLong = (iso: string): string =>
     background: transparent;
     color: var(--bcn-helpbar-fg);
     font-family: inherit;
-    font-size: var(--type-size-200, 0.9375rem);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-200, 0.9375rem);
+    font-weight: var(--typography-font-weight-medium);
     line-height: 1;
     cursor: pointer;
     transition: background var(--transition-fast, 150ms ease);
@@ -270,7 +270,7 @@ const fmtLong = (iso: string): string =>
     max-width: 84vw;
     /* The pill zone sets a light foreground; the popover is a white content surface, so
        re-establish the standard dark-on-white text context for everything inside it. */
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   /* Header row: the panel label + a quiet release meta line (mirrors the page's
      "Latest · June 2, 2026" treatment) — one date for the set, not a badge per entry. */
@@ -283,14 +283,14 @@ const fmtLong = (iso: string): string =>
   }
   .bcn-help-bar__panel-title {
     margin: 0;
-    font-size: var(--type-size-200, 0.9375rem);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-200, 0.9375rem);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .bcn-help-bar__panel-release {
     margin: 0;
-    font-size: var(--type-size-150, 0.875rem);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150, 0.875rem);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
   .bcn-help-bar__panel-list {
@@ -315,10 +315,10 @@ const fmtLong = (iso: string): string =>
     transition: background var(--transition-fast, 150ms ease);
   }
   .bcn-help-bar__panel-link:hover {
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
   .bcn-help-bar__panel-link:focus-visible {
-    outline: 2px solid var(--color-text-link);
+    outline: 2px solid var(--color-content-link);
     outline-offset: 2px;
   }
   /* Serif display tier — the entry title takes the house serif, echoing the release
@@ -327,37 +327,37 @@ const fmtLong = (iso: string): string =>
     margin: 0 0 2px;
     font-family: var(--font-decorative);
     font-size: 1.0625rem; /* 17px */
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.3;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-help-bar__panel-item-blurb {
     margin: 0;
-    font-size: var(--type-size-150, 0.875rem);
-    font-weight: var(--font-weight-regular, 400);
+    font-size: var(--font-size-150, 0.875rem);
+    font-weight: var(--typography-font-weight-regular, 400);
     line-height: 1.45;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   /* Footer: hairline-topped quiet link to the full release-notes page. */
   .bcn-help-bar__panel-footer {
     margin-top: var(--spacing-300);
     padding-top: var(--spacing-250, 0.625rem);
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--color-border-default);
   }
   .bcn-help-bar__panel-all {
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    font-size: var(--type-size-150, 0.875rem);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-link);
+    font-size: var(--font-size-150, 0.875rem);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-link);
     text-decoration: none;
   }
   .bcn-help-bar__panel-all:hover {
     text-decoration: underline;
   }
   .bcn-help-bar__panel-all:focus-visible {
-    outline: 2px solid var(--color-text-link);
+    outline: 2px solid var(--color-content-link);
     outline-offset: 2px;
     border-radius: 2px;
   }
diff --git a/src/components/bcn/BcnKbArticleList.astro b/src/components/bcn/BcnKbArticleList.astro
index e371b4a2..a2227ba2 100644
--- a/src/components/bcn/BcnKbArticleList.astro
+++ b/src/components/bcn/BcnKbArticleList.astro
@@ -46,7 +46,7 @@ const count = articles.length;
   /* A quiet count sits alone above the list — no lede. */
   .bcn-kbl__count {
     font-size: 0.8125rem; /* 13px meta */
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
 
   /* Article list — one title link over a terse summary per row, divided by hairlines. */
@@ -65,25 +65,25 @@ const count = articles.length;
   }
   /* Hairlines divide rows only — the list has no outer top/bottom border. */
   .bcn-kbl__row + .bcn-kbl__row {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
 
   .bcn-kbl__link {
     font-size: 1rem; /* 16px */
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--typography-font-weight-medium);
     line-height: 1.4;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     text-decoration: none;
     transition: color 120ms ease;
     width: fit-content;
   }
   .bcn-kbl__link:hover {
-    color: var(--color-text-link);
+    color: var(--color-content-link);
     text-decoration: underline;
     text-underline-offset: 2px;
   }
   .bcn-kbl__link:focus-visible {
-    outline: 2px solid var(--color-text-link);
+    outline: 2px solid var(--color-content-link);
     outline-offset: 2px;
     border-radius: var(--radius-100);
   }
@@ -91,6 +91,6 @@ const count = articles.length;
   .bcn-kbl__summary {
     font-size: 0.875rem; /* 14px — dense floor */
     line-height: 1.45;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 </style>
diff --git a/src/components/bcn/BcnKbBrowser.astro b/src/components/bcn/BcnKbBrowser.astro
index 4e2e6b02..82a3db0d 100644
--- a/src/components/bcn/BcnKbBrowser.astro
+++ b/src/components/bcn/BcnKbBrowser.astro
@@ -66,7 +66,7 @@ const defaultArticleId = defaultOnLoad ? (articles[0]?.id ?? '') : '';
   .bcn-kb__pane {
     min-block-size: 60vh;
     padding-block-start: var(--spacing-600);
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--color-border-default);
     scroll-margin-top: var(--spacing-400); /* clearance when routed into view */
   }
 
diff --git a/src/components/bcn/BcnKbCategories.astro b/src/components/bcn/BcnKbCategories.astro
index 8004834c..f0e4967d 100644
--- a/src/components/bcn/BcnKbCategories.astro
+++ b/src/components/bcn/BcnKbCategories.astro
@@ -50,13 +50,13 @@ const cards = HELP_CATEGORIES.map((cat) => {
 ---
 
 <section class="bcn-kbc" aria-labelledby="bcn-kbc-title">
-  <h2 id="bcn-kbc-title" class="bcn-kbc__title type-section-title">Browse by category</h2>
+  <h2 id="bcn-kbc-title" class="bcn-kbc__title typography-heading-md">Browse by category</h2>
 
   <div class="bcn-kbc__grid">
     {
       cards.map((cat) => (
         <article class="bcn-kbc__card" id={`category-${cat.id}`}>
-          <h3 class="bcn-kbc__card-title type-card-title">{cat.title}</h3>
+          <h3 class="bcn-kbc__card-title typography-title">{cat.title}</h3>
           <p class="bcn-kbc__card-desc">{cat.description}</p>
 
           <ul class="bcn-kbc__featured" role="list">
@@ -92,7 +92,7 @@ const cards = HELP_CATEGORIES.map((cat) => {
   }
   .bcn-kbc__title {
     margin: 0;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
 
   /* ── Symmetric 3-column grid (Andy, 2026-07-22): equal cards, always 3-up on
@@ -118,21 +118,21 @@ const cards = HELP_CATEGORIES.map((cat) => {
     flex-direction: column;
     gap: var(--spacing-300);
     padding: var(--spacing-500);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
     scroll-margin-top: 5rem; /* #category-<id> graceful-fallback anchor clears the topbar */
   }
 
   .bcn-kbc__card-title {
     margin: 0;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-kbc__card-desc {
     margin: 0;
     font-size: 0.9375rem; /* 15px — supporting one-liner */
     line-height: 1.5;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   /* Featured links — the curated preview, a quiet scannable list. */
@@ -146,19 +146,19 @@ const cards = HELP_CATEGORIES.map((cat) => {
   }
   .bcn-kbc__featured-link {
     font-size: 0.9375rem; /* 15px */
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--typography-font-weight-medium);
     line-height: 1.35;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     text-decoration: none;
     transition: color 120ms ease;
   }
   .bcn-kbc__featured-link:hover {
-    color: var(--color-text-link);
+    color: var(--color-content-link);
     text-decoration: underline;
     text-underline-offset: 2px;
   }
   .bcn-kbc__featured-link:focus-visible {
-    outline: 2px solid var(--color-text-link);
+    outline: 2px solid var(--color-content-link);
     outline-offset: 2px;
     border-radius: var(--radius-100);
   }
@@ -171,11 +171,11 @@ const cards = HELP_CATEGORIES.map((cat) => {
     gap: var(--spacing-300);
     margin-top: auto;
     padding-top: var(--spacing-300);
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .bcn-kbc__count {
     font-size: 0.8125rem; /* 13px meta */
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
   .bcn-kbc__viewall {
@@ -183,15 +183,15 @@ const cards = HELP_CATEGORIES.map((cat) => {
     align-items: center;
     gap: var(--spacing-100);
     font-size: 0.9375rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-link);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-link);
     text-decoration: none;
     white-space: nowrap;
     transition: color 150ms ease;
   }
-  .bcn-kbc__viewall:hover { color: var(--color-text-link-hover); }
+  .bcn-kbc__viewall:hover { color: var(--color-content-link-hover); }
   .bcn-kbc__viewall:focus-visible {
-    outline: 2px solid var(--color-text-link);
+    outline: 2px solid var(--color-content-link);
     outline-offset: 2px;
     border-radius: var(--radius-100);
   }
diff --git a/src/components/bcn/BcnKbGlossary.astro b/src/components/bcn/BcnKbGlossary.astro
index 2a818697..eb0ef8ec 100644
--- a/src/components/bcn/BcnKbGlossary.astro
+++ b/src/components/bcn/BcnKbGlossary.astro
@@ -18,7 +18,7 @@ const glossary = glossaryArticles();
 ---
 
 <section class="bcn-kbg" aria-labelledby="bcn-kbg-title">
-  <h2 id="bcn-kbg-title" class="bcn-kbg__title type-section-title">Glossary</h2>
+  <h2 id="bcn-kbg-title" class="bcn-kbg__title typography-heading-md">Glossary</h2>
   <ul class="bcn-kbg__terms" role="list">
     {
       glossary.map((a) => (
@@ -37,12 +37,12 @@ const glossary = glossaryArticles();
     flex-direction: column;
     gap: var(--spacing-400);
     padding-block-start: var(--spacing-500);
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--color-border-default);
   }
 
   .bcn-kbg__title {
     margin: 0;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
 
   .bcn-kbg__terms {
@@ -60,17 +60,17 @@ const glossary = glossaryArticles();
   .bcn-kbg__link {
     font-size: 0.9375rem; /* 15px — dense term list */
     line-height: 1.4;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     text-decoration: none;
     transition: color 120ms ease;
   }
   .bcn-kbg__link:hover {
-    color: var(--color-text-link);
+    color: var(--color-content-link);
     text-decoration: underline;
     text-underline-offset: 2px;
   }
   .bcn-kbg__link:focus-visible {
-    outline: 2px solid var(--color-text-link);
+    outline: 2px solid var(--color-content-link);
     outline-offset: 2px;
     border-radius: var(--radius-100);
   }
diff --git a/src/components/bcn/BcnKbHero.astro b/src/components/bcn/BcnKbHero.astro
index f526b749..b914c8ae 100644
--- a/src/components/bcn/BcnKbHero.astro
+++ b/src/components/bcn/BcnKbHero.astro
@@ -6,9 +6,9 @@
 // must not push the index below the fold.
 //
 // Search PRIMACY (2026-07-22): the field is the esa-text-field lego at size="lg",
-// scaled up via a SCOPED re-point of its public size tokens (--form-height-lg /
-// --form-font-size-lg / --form-padding-x-lg / --form-radius-lg) — the sanctioned
-// component-token override, localized to this one field so nothing leaks globally.
+// scaled up on the host — font-size cascades into the shadow input (font: inherit),
+// and padding/radius ride the lego's private --_field-* hooks since the hub deleted
+// the public --form-* size surface (2026-08). Localized to this one field.
 // A leading esa-icon search glyph sits in the enlarged left gutter (decorative
 // overlay; the field owns its own box).
 //
@@ -66,8 +66,8 @@ const SEARCH_PATHS = '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>'
   <div class="center bcn-kb-hero__col">
     <div class="stack bcn-kb-hero__intro">
       <BcnAldoMark size="md" animated />
-      <h1 class="type-page-title bcn-kb-hero__title">{title}</h1>
-      <p class="type-body bcn-kb-hero__lede">{lede}</p>
+      <h1 class="typography-heading-lg bcn-kb-hero__title">{title}</h1>
+      <p class="typography-body-md bcn-kb-hero__lede">{lede}</p>
     </div>
 
     <div class="bcn-kb-hero__search-wrap">
@@ -154,12 +154,12 @@ const SEARCH_PATHS = '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>'
   }
 
   .bcn-kb-hero__title {
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
 
   .bcn-kb-hero__lede {
     max-inline-size: 34rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   /* ── Search: the primary action + its live-results dropdown ── */
@@ -174,17 +174,21 @@ const SEARCH_PATHS = '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>'
     inline-size: 100%;
   }
 
-  /* The lego at size="lg", scaled up via a SCOPED re-point of its public size tokens.
-     Enlarged padding-x opens a left gutter for the search glyph. The lego's focus
-     tokens default to Radix grass (an off-brand green ring) — re-point its public
-     focus border + ring color to the house link color, scoped to this one field. */
+  /* The lego at size="lg", scaled up on the host. The public --form-height/font-size/
+     padding/radius hooks were deleted upstream (no successor): the input inherits font
+     from the host, the control sizes from padding + text, and padding/radius ride the
+     lego's PRIVATE --_field-* hooks (same reach-in as BcnEvidenceSearch; leading-icon
+     slot is the pending hub request). The lego's focus tokens default to Radix grass
+     (an off-brand green ring) — re-point focus border + ring color to the house link
+     color, scoped to this one field. */
   .bcn-kb-hero__search {
-    --form-height-lg: 3.5rem; /* 56px — taller than default lg (48px): primary */
-    --form-font-size-lg: 1.1875rem; /* ~19px */
-    --form-padding-x-lg: 3.25rem; /* opens the leading gutter for the glyph */
-    --form-radius-lg: var(--radius-300);
-    --form-border-color-focus: var(--color-text-link);
-    --focus-ring-color: var(--color-text-link);
+    font-size: 1.1875rem; /* ~19px; the shadow input opts in via font: inherit */
+    /* 0.875rem py ≈ the old 56px: 2×14px + ~26px line + 2px border */
+    --_field-padding-y: 0.875rem;
+    --_field-padding-x: 3.25rem; /* opens the leading gutter for the glyph */
+    --_field-radius: var(--radius-300);
+    --form-border-color-focus: var(--color-content-link);
+    --focus-ring-color: var(--color-content-link);
     inline-size: 100%;
     text-align: start; /* reset the hero's centered text for the input's own value */
   }
@@ -196,7 +200,7 @@ const SEARCH_PATHS = '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>'
     inset-block-start: 50%;
     transform: translateY(-50%);
     display: inline-flex;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     pointer-events: none;
     z-index: 1;
     --icon-size-md: 22px;
@@ -211,10 +215,10 @@ const SEARCH_PATHS = '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>'
     max-block-size: min(60vh, 30rem);
     overflow-y: auto;
     padding: var(--spacing-100);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
-    box-shadow: var(--shadow-200, 0 8px 28px rgb(0 0 0 / 0.12));
+    box-shadow: var(--elevation-3, 0 8px 28px rgb(0 0 0 / 0.12));
     text-align: start;
   }
   .bcn-kb-hero__results[hidden] { display: none; }
@@ -234,7 +238,7 @@ const SEARCH_PATHS = '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>'
   .bcn-kb-hero__result[hidden] { display: none; }
   .bcn-kb-hero__result:hover,
   .bcn-kb-hero__result.is-active {
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
 
   .bcn-kb-hero__result-top {
@@ -245,18 +249,18 @@ const SEARCH_PATHS = '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>'
   }
   .bcn-kb-hero__result-title {
     font-size: 0.9375rem; /* 15px — dense-index list size (deliberate, no role fits) */
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default);
     line-height: 1.35;
   }
   .bcn-kb-hero__result.is-active .bcn-kb-hero__result-title,
   .bcn-kb-hero__result:hover .bcn-kb-hero__result-title {
-    color: var(--color-text-link);
+    color: var(--color-content-link);
   }
   /* Matched substring — a neutral translucent highlight (reads on white and on the
      sunken active row); never a tint. */
   .bcn-kb-hero__result-title :global(mark) {
-    background: color-mix(in srgb, var(--color-text-primary) 12%, transparent);
+    background: color-mix(in srgb, var(--color-content-default) 12%, transparent);
     color: inherit;
     border-radius: 2px;
     padding: 0 1px;
@@ -265,12 +269,12 @@ const SEARCH_PATHS = '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>'
   .bcn-kb-hero__result-cat {
     flex: none;
     font-size: 0.8125rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
   .bcn-kb-hero__result-summary {
     font-size: 0.8125rem; /* 13px terse one-liner */
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     line-height: 1.4;
   }
 
@@ -278,7 +282,7 @@ const SEARCH_PATHS = '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>'
     margin: 0;
     padding: var(--spacing-300);
     font-size: 0.9375rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   /* Quiet "What's new" doorway — house link color only on hover, resting state neutral. */
@@ -287,14 +291,14 @@ const SEARCH_PATHS = '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>'
     align-items: center;
     gap: var(--spacing-100);
     font-size: 0.9375rem;
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-secondary);
     text-decoration: none;
     transition: color 150ms ease;
   }
-  .bcn-kb-hero__whatsnew:hover { color: var(--color-text-link-hover); }
+  .bcn-kb-hero__whatsnew:hover { color: var(--color-content-link-hover); }
   .bcn-kb-hero__whatsnew:focus-visible {
-    outline: 2px solid var(--color-text-link);
+    outline: 2px solid var(--color-content-link);
     outline-offset: 2px;
     border-radius: var(--radius-100);
   }
diff --git a/src/components/bcn/BcnKeyValue.astro b/src/components/bcn/BcnKeyValue.astro
index 7f04e6a3..0f86634b 100644
--- a/src/components/bcn/BcnKeyValue.astro
+++ b/src/components/bcn/BcnKeyValue.astro
@@ -4,7 +4,7 @@
 // stacks a quiet label, an optional prominent value, and an optional tertiary hint.
 //
 // The label intentionally mirrors esa-select's .field__label EXACTLY (clamped
-// --form-font-size-md, --font-weight-medium 450, --form-label-color) so a read-only
+// --typography-label-md-font-size, --typography-font-weight-medium 450, --form-label-color) so a read-only
 // "Responsible Party" reads identically to an editable "Assignee" select label. The
 // value is the prominent answer (semibold + primary). A <slot> lets a host pass rich
 // value content (links, pills) in place of the plain `value` string.
@@ -31,11 +31,11 @@ const { label, value, hint } = Astro.props;
 <style>
   /* Sidebar key/value (read-only prod details) */
   .bcn-key-value { display: flex; flex-direction: column; gap: 2px; }
-  /* Key mirrors esa-select's .field__label EXACTLY (clamped --form-font-size-md,
-     --font-weight-medium 450, --form-label-color) so "Responsible Party"
+  /* Key mirrors esa-select's .field__label EXACTLY (clamped --typography-label-md-font-size,
+     --typography-font-weight-medium 450, --form-label-color) so "Responsible Party"
      reads identically to the "Assignee" select label. Value is the prominent answer:
      semibold + primary, so Scope's three lines gain a clear label→value→hint tier. */
-  .bcn-key-value__key { font-size: var(--form-font-size-md); font-weight: var(--font-weight-medium); color: var(--form-label-color); }
-  .bcn-key-value__val { font-size: var(--form-font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-key-value__hint { font-size: 0.75rem; color: var(--color-text-tertiary); }
+  .bcn-key-value__key { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-medium); color: var(--form-label-color); }
+  .bcn-key-value__val { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-key-value__hint { font-size: 0.75rem; color: var(--color-content-default-tertiary); }
 </style>
diff --git a/src/components/bcn/BcnLinkRowCard.astro b/src/components/bcn/BcnLinkRowCard.astro
index 6ab05895..ed7a825d 100644
--- a/src/components/bcn/BcnLinkRowCard.astro
+++ b/src/components/bcn/BcnLinkRowCard.astro
@@ -81,24 +81,24 @@ const { title, rows, count = false, countLabel, chevrons = false, footer } = Ast
     color: inherit;
   }
   .bcn-lrc li + li .bcn-lrc__row {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .bcn-lrc__label {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default);
     min-width: 0;
   }
-  .bcn-lrc__row:hover .bcn-lrc__label { color: var(--color-primary); }
+  .bcn-lrc__row:hover .bcn-lrc__label { color: var(--color-background-brand); }
   .bcn-lrc__right { display: inline-flex; align-items: center; gap: var(--spacing-200); flex-shrink: 0; }
   .bcn-lrc__meta {
-    font-size: var(--type-size-150);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-tertiary);
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
   }
-  .bcn-lrc__chev { color: var(--color-text-muted); }
-  .bcn-lrc__row:hover .bcn-lrc__chev { color: var(--color-primary); }
+  .bcn-lrc__chev { color: var(--bcn-content-muted); }
+  .bcn-lrc__row:hover .bcn-lrc__chev { color: var(--color-background-brand); }
 
   /* View-all footer — divided from the rows, the section-link voice. */
   .bcn-lrc__footer {
@@ -107,12 +107,12 @@ const { title, rows, count = false, countLabel, chevrons = false, footer } = Ast
     gap: var(--spacing-100);
     margin-top: var(--spacing-100);
     padding-top: var(--spacing-250);
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
     width: 100%;
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-background-brand);
     text-decoration: none;
   }
-  .bcn-lrc__footer:hover { color: var(--color-primary-hover); }
+  .bcn-lrc__footer:hover { color: var(--color-background-brand-hover); }
 </style>
diff --git a/src/components/bcn/BcnLogoPicker.astro b/src/components/bcn/BcnLogoPicker.astro
index d69fc3c4..a3bf992c 100644
--- a/src/components/bcn/BcnLogoPicker.astro
+++ b/src/components/bcn/BcnLogoPicker.astro
@@ -80,7 +80,7 @@ const previewMark: EntityMark = { glyph: mark.glyph, color: mark.color, style: m
         <span data-lp-preview-mark><BcnEntityLogo mark={previewMark} size="xl" variant="seal" /></span>
         <img class="bcn-logo-picker__photo" data-lp-preview-photo alt="" hidden />
       </span>
-      <span class="bcn-logo-picker__name type-card-title">{entityName}</span>
+      <span class="bcn-logo-picker__name typography-title">{entityName}</span>
     </div>
 
     <!-- PRIMARY: the photo. -->
@@ -94,7 +94,7 @@ const previewMark: EntityMark = { glyph: mark.glyph, color: mark.color, style: m
       <!-- Shown once a photo is set; Remove is the way back to the symbol. -->
       <div class="bcn-logo-picker__chosen repel" data-lp-chosen hidden>
         <span class="bcn-logo-picker__filename" data-lp-filename></span>
-        <EsaButton color="ghost" appearance="outline" size="sm" icon="trash-2" data-lp="remove-photo">
+        <EsaButton variant="ghost" appearance="outline" size="sm" icon="trash-2" data-lp="remove-photo">
           Remove photo
         </EsaButton>
       </div>
@@ -166,8 +166,8 @@ const previewMark: EntityMark = { glyph: mark.glyph, color: mark.color, style: m
   <!-- Windows order: Save LEFT of Cancel. No tertiary action — the upload it used
        to hold is now the section that leads the dialog. -->
   <div slot="footer" class="bcn-logo-picker__foot cluster" data-gap="xs">
-    <EsaButton color="primary" data-lp="save">Save</EsaButton>
-    <EsaButton color="ghost" appearance="outline" data-lp="cancel">Cancel</EsaButton>
+    <EsaButton variant="primary" data-lp="save">Save</EsaButton>
+    <EsaButton variant="ghost" appearance="outline" data-lp="cancel">Cancel</EsaButton>
   </div>
 </esa-dialog>
 
@@ -191,7 +191,7 @@ const previewMark: EntityMark = { glyph: mark.glyph, color: mark.color, style: m
   esa-dialog:not(:defined) { display: none; }
 
   .bcn-logo-picker__name {
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     min-width: 0;
   }
 
@@ -199,13 +199,13 @@ const previewMark: EntityMark = { glyph: mark.glyph, color: mark.color, style: m
      `label` renders at this size/weight), so the three controls read as one form. */
   .bcn-logo-picker__field-label {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--typography-font-weight-medium);
     color: var(--form-label-color);
   }
   .bcn-logo-picker__hint {
     margin: 0;
     font-size: 0.875rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
 
   /* The dropzone's own padding is the only height knob the lego exposes — its .zone
@@ -249,12 +249,12 @@ const previewMark: EntityMark = { glyph: mark.glyph, color: mark.color, style: m
     align-items: center;
     gap: var(--spacing-300);
     padding: var(--spacing-250) var(--spacing-300);
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
     border-radius: var(--radius-200);
   }
   .bcn-logo-picker__filename {
     font-size: 0.875rem;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -266,7 +266,7 @@ const previewMark: EntityMark = { glyph: mark.glyph, color: mark.color, style: m
     display: flex;
     align-items: center;
     gap: var(--spacing-300);
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     font-size: 0.875rem;
   }
   .bcn-logo-picker__rule::before,
@@ -274,7 +274,7 @@ const previewMark: EntityMark = { glyph: mark.glyph, color: mark.color, style: m
     content: '';
     flex: 1;
     height: 1px;
-    background: var(--color-border-light);
+    background: var(--color-border-default-subtle);
   }
 
   /* A photo WINS, so the symbol half stops being editable underneath it. Dimmed
@@ -314,16 +314,16 @@ const previewMark: EntityMark = { glyph: mark.glyph, color: mark.color, style: m
   .bcn-logo-picker__glyph {
     width: 44px;
     height: 44px;
-    color: var(--color-text-secondary);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    color: var(--color-content-default-secondary);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
   }
-  .bcn-logo-picker__glyph:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }
+  .bcn-logo-picker__glyph:hover { border-color: var(--color-border-default-strong); color: var(--color-content-default); }
   .bcn-logo-picker__glyph[aria-pressed='true'] {
-    color: var(--color-primary);
-    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
-    border-color: var(--color-primary);
+    color: var(--color-background-brand);
+    background: color-mix(in srgb, var(--color-background-brand) 10%, var(--color-background-elevation-raised));
+    border-color: var(--color-background-brand);
   }
 
   /* Swatch: the color IS the control, so selection reads as a ring set OFF the chip
@@ -333,13 +333,13 @@ const previewMark: EntityMark = { glyph: mark.glyph, color: mark.color, style: m
     width: 28px;
     height: 28px;
     background: var(--_c);
-    border: 1px solid color-mix(in srgb, var(--_c) 82%, var(--color-text-primary));
+    border: 1px solid color-mix(in srgb, var(--_c) 82%, var(--color-content-default));
     border-radius: var(--radius-200);
   }
   .bcn-logo-picker__swatch[aria-pressed='true'] {
     box-shadow:
-      0 0 0 2px var(--color-surface),
-      0 0 0 4px var(--color-primary);
+      0 0 0 2px var(--color-background-elevation-raised),
+      0 0 0 4px var(--color-background-brand);
   }
 
   .bcn-logo-picker__foot { justify-content: flex-end; }
diff --git a/src/components/bcn/BcnMarketGrid.astro b/src/components/bcn/BcnMarketGrid.astro
index 7b14b11d..d8c1d250 100644
--- a/src/components/bcn/BcnMarketGrid.astro
+++ b/src/components/bcn/BcnMarketGrid.astro
@@ -37,8 +37,8 @@ import { MARKETS } from '../../data/homepage';
   }
 
   .bcn-markets__card {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     overflow: hidden;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
@@ -65,22 +65,22 @@ import { MARKETS } from '../../data/homepage';
   }
   .bcn-markets__title {
     margin: 0 0 var(--spacing-100);
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
   }
   .bcn-markets__desc {
     margin: 0 0 var(--spacing-300);
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
     line-height: var(--line-height-normal, 1.5);
   }
   .bcn-markets__link {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-100);
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-background-brand);
     text-decoration: none;
   }
   .bcn-markets__link:hover {
diff --git a/src/components/bcn/BcnMarketingFooter.astro b/src/components/bcn/BcnMarketingFooter.astro
index 9ee98b88..9cf4436b 100644
--- a/src/components/bcn/BcnMarketingFooter.astro
+++ b/src/components/bcn/BcnMarketingFooter.astro
@@ -23,7 +23,7 @@ const YEAR = 2026;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: var(--type-size-150);
+    font-size: var(--font-size-150);
   }
   .bcn-mkt-footer a {
     color: #989898;
diff --git a/src/components/bcn/BcnMarketingHero.astro b/src/components/bcn/BcnMarketingHero.astro
index 130bb0ce..cb896b64 100644
--- a/src/components/bcn/BcnMarketingHero.astro
+++ b/src/components/bcn/BcnMarketingHero.astro
@@ -69,9 +69,9 @@ const heroImage = withBase('/images/marketing/hero-aerial.jpg');
 
   .bcn-mkt-hero__headline {
     margin: 0 0 var(--spacing-500);
-    font-family: var(--font-decorative, var(--font-sans));
-    font-size: var(--type-size-800);
-    font-weight: var(--font-weight-bold);
+    font-family: var(--font-decorative, var(--typography-font-family-sans));
+    font-size: var(--font-size-800);
+    font-weight: var(--typography-font-weight-bold);
     line-height: 1.15;
     color: #ffffff;
   }
@@ -79,8 +79,8 @@ const heroImage = withBase('/images/marketing/hero-aerial.jpg');
   .bcn-mkt-hero__sub {
     margin: 0 auto var(--spacing-600);
     max-inline-size: 840px;
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-medium);
     color: rgba(255, 255, 255, 0.85);
     line-height: normal;
     text-wrap: pretty;
@@ -101,8 +101,8 @@ const heroImage = withBase('/images/marketing/hero-aerial.jpg');
     gap: var(--spacing-200);
     padding: var(--spacing-400) var(--spacing-600);
     font-family: inherit;
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
     border-radius: var(--radius-200);
     border: 1px solid transparent;
     text-decoration: none;
@@ -111,18 +111,18 @@ const heroImage = withBase('/images/marketing/hero-aerial.jpg');
   }
   .bcn-mkt-hero__btn--white {
     background: #ffffff;
-    color: var(--color-primary);
+    color: var(--color-background-brand);
     border-color: #ffffff;
   }
   .bcn-mkt-hero__btn--white:hover {
-    background: var(--color-surface-sunken, #fafafa);
+    background: var(--color-background-elevation-sunken, #fafafa);
   }
   .bcn-mkt-hero__badge {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-200);
     margin-block-start: var(--spacing-700);
-    font-size: var(--type-size-150);
+    font-size: var(--font-size-150);
     color: rgba(255, 255, 255, 0.6);
   }
 </style>
diff --git a/src/components/bcn/BcnMarketingNav.astro b/src/components/bcn/BcnMarketingNav.astro
index d5c378dd..a41c1ef3 100644
--- a/src/components/bcn/BcnMarketingNav.astro
+++ b/src/components/bcn/BcnMarketingNav.astro
@@ -67,7 +67,7 @@ const { loginHref = '#' } = Astro.props;
   }
   .bcn-mkt-nav__wordmark {
     font-size: 1.1rem;
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--typography-font-weight-bold);
     letter-spacing: -0.02em;
     color: #ffffff;
   }
@@ -77,8 +77,8 @@ const { loginHref = '#' } = Astro.props;
     display: inline-flex;
     align-items: center;
     padding: var(--spacing-150) var(--spacing-400);
-    font-size: var(--type-size-200);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-200);
+    font-weight: var(--typography-font-weight-medium);
     color: #ffffff;
     background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.4);
diff --git a/src/components/bcn/BcnMarketingSection.astro b/src/components/bcn/BcnMarketingSection.astro
index 12c9133f..5ec88c31 100644
--- a/src/components/bcn/BcnMarketingSection.astro
+++ b/src/components/bcn/BcnMarketingSection.astro
@@ -55,10 +55,10 @@ const forestImage =
     padding-block: var(--_section-pad);
   }
   .bcn-mkt-section--white {
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
   }
   .bcn-mkt-section--light {
-    background: var(--color-surface-sunken, var(--color-gray-2));
+    background: var(--color-background-elevation-sunken, var(--color-gray-2));
   }
   /* Dark band: deep forest gradient over the aerial photo (specimen §7). */
   .bcn-mkt-section--forest {
diff --git a/src/components/bcn/BcnModelDiagram.astro b/src/components/bcn/BcnModelDiagram.astro
index 6fb9531e..c1cbf306 100644
--- a/src/components/bcn/BcnModelDiagram.astro
+++ b/src/components/bcn/BcnModelDiagram.astro
@@ -321,8 +321,8 @@ const PROJECTIONS: { name: string; note: string }[] = [
   .bcn-model-diagram {
     display: flex;
     flex-direction: column;
-    color: var(--color-text-primary);
-    font-size: var(--type-size-200);
+    color: var(--color-content-default);
+    font-size: var(--font-size-200);
     line-height: 1.5;
   }
 
@@ -332,24 +332,24 @@ const PROJECTIONS: { name: string; note: string }[] = [
     flex-direction: column;
     gap: var(--spacing-400);
     padding: var(--spacing-500);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
-    background: var(--color-surface, #fff);
+    background: var(--color-background-elevation-raised, #fff);
   }
   .bcn-model-diagram__band[data-tone='model'] {
-    background: var(--color-surface-sunken);
-    border-color: var(--color-border-strong);
+    background: var(--color-background-elevation-sunken);
+    border-color: var(--color-border-default-strong);
   }
   .bcn-model-diagram__band-title {
     margin: 0;
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.3;
   }
   .bcn-model-diagram__band-note {
     margin: calc(-1 * var(--spacing-300)) 0 0;
     max-width: 72ch;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   /* ── Flow connectors between bands ── */
@@ -363,8 +363,8 @@ const PROJECTIONS: { name: string; note: string }[] = [
   .bcn-model-diagram__flow-label {
     position: relative;
     padding-left: var(--spacing-500);
-    font-size: var(--type-size-150);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-model-diagram__flow-label::before {
     content: '';
@@ -373,7 +373,7 @@ const PROJECTIONS: { name: string; note: string }[] = [
     top: -14px;
     bottom: -14px;
     width: 2px;
-    background: var(--color-border-strong);
+    background: var(--color-border-default-strong);
   }
   .bcn-model-diagram__flow-label::after {
     content: '';
@@ -382,7 +382,7 @@ const PROJECTIONS: { name: string; note: string }[] = [
     bottom: -16px;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-top: 7px solid var(--color-border-strong);
+    border-top: 7px solid var(--color-border-default-strong);
   }
 
   /* ── Rows & the tier spine ── */
@@ -424,7 +424,7 @@ const PROJECTIONS: { name: string; note: string }[] = [
     right: 6px;
     top: 50%;
     height: 2px;
-    background: var(--color-border-strong);
+    background: var(--color-border-default-strong);
   }
   .bcn-model-diagram__link::after {
     content: '';
@@ -434,15 +434,15 @@ const PROJECTIONS: { name: string; note: string }[] = [
     transform: translateY(-50%);
     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;
-    border-left: 7px solid var(--color-border-strong);
+    border-left: 7px solid var(--color-border-default-strong);
   }
   .bcn-model-diagram__link-label {
     position: absolute;
     top: calc(50% - 26px);
     left: 50%;
     transform: translateX(-50%);
-    font-size: var(--type-size-150);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
 
@@ -452,8 +452,8 @@ const PROJECTIONS: { name: string; note: string }[] = [
     flex-direction: column;
     gap: var(--spacing-250);
     padding: var(--spacing-400);
-    background: var(--color-surface, #fff);
-    border: 1px solid var(--color-border-strong);
+    background: var(--color-background-elevation-raised, #fff);
+    border: 1px solid var(--color-border-default-strong);
     border-radius: var(--radius-200);
   }
   .bcn-model-diagram__card[data-tone='external'] {
@@ -465,11 +465,11 @@ const PROJECTIONS: { name: string; note: string }[] = [
     border-style: dashed;
   }
   .bcn-model-diagram__card--satellite {
-    border-color: var(--color-border);
+    border-color: var(--color-border-default);
   }
   .bcn-model-diagram__card--projection {
     gap: var(--spacing-150);
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
   .bcn-model-diagram__card-head {
     display: flex;
@@ -478,16 +478,16 @@ const PROJECTIONS: { name: string; note: string }[] = [
     gap: var(--spacing-200);
   }
   .bcn-model-diagram__card-name {
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.3;
   }
   .bcn-model-diagram__chip {
-    font-family: var(--font-mono);
+    font-family: var(--typography-font-family-mono);
     font-size: 0.75rem;
-    color: var(--color-text-secondary);
-    background: var(--color-surface-sunken);
-    border: 1px solid var(--color-border);
+    color: var(--color-content-default-secondary);
+    background: var(--color-background-elevation-sunken);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-100);
     padding: 0 6px;
     line-height: 1.5;
@@ -508,8 +508,8 @@ const PROJECTIONS: { name: string; note: string }[] = [
   }
   .bcn-model-diagram__purpose {
     margin: 0;
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
   }
 
   /* ── Field lists ── */
@@ -526,19 +526,19 @@ const PROJECTIONS: { name: string; note: string }[] = [
     flex-wrap: wrap;
     gap: var(--spacing-200);
     padding: var(--spacing-150) 0;
-    border-top: 1px solid var(--color-border-light);
-    font-size: var(--type-size-150);
+    border-top: 1px solid var(--color-border-default-subtle);
+    font-size: var(--font-size-150);
   }
   .bcn-model-diagram__fname {
-    font-family: var(--font-mono);
+    font-family: var(--typography-font-family-mono);
     font-size: 0.75rem;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-model-diagram__fname[data-ref='commitment'],
   .bcn-model-diagram__fname[data-ref='milestone'] {
     color: var(--color-commitment);
   }
   .bcn-model-diagram__fnote {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
 </style>
diff --git a/src/components/bcn/BcnModules.astro b/src/components/bcn/BcnModules.astro
index affcda96..0353a50a 100644
--- a/src/components/bcn/BcnModules.astro
+++ b/src/components/bcn/BcnModules.astro
@@ -172,14 +172,14 @@ const cards = modules.map((m) => {
     flex-direction: column;
     gap: var(--spacing-300);
     padding: var(--spacing-400);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
     transition: border-color 150ms ease, box-shadow 150ms ease;
   }
   .bcn-mod__card:hover {
-    border-color: var(--color-border-strong);
-    box-shadow: var(--shadow-50, 0 1px 4px 0 rgba(0, 0, 0, 0.05));
+    border-color: var(--color-border-default-strong);
+    box-shadow: var(--elevation-1, 0 1px 4px 0 rgba(0, 0, 0, 0.05));
   }
   .bcn-mod__portal {
     position: absolute;
@@ -187,7 +187,7 @@ const cards = modules.map((m) => {
     border-radius: var(--radius-300);
   }
   .bcn-mod__portal:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-background-brand);
     outline-offset: -2px;
   }
 
@@ -200,13 +200,13 @@ const cards = modules.map((m) => {
     height: 34px;
     flex-shrink: 0;
     border-radius: var(--radius-200);
-    background: var(--color-surface-sunken);
-    color: var(--color-text-secondary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-content-default-secondary);
   }
   .bcn-mod__name {
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
 
   .bcn-mod__rollup {
@@ -214,10 +214,10 @@ const cards = modules.map((m) => {
     flex-wrap: wrap;
     gap: var(--spacing-300) var(--spacing-500);
     padding-bottom: var(--spacing-300);
-    border-bottom: 1px solid var(--color-border-light);
-    --stat-value-size: var(--type-size-400);
-    --stat-label-size: var(--type-size-150);
-    --stat-label-color: var(--color-text-tertiary);
+    border-bottom: 1px solid var(--color-border-default-subtle);
+    --stat-value-size: var(--font-size-400);
+    --stat-label-size: var(--font-size-150);
+    --stat-label-color: var(--color-content-default-tertiary);
   }
 
   /* The module's urgent ACTIONS — each row is the "red/yellow circle that
@@ -244,24 +244,24 @@ const cards = modules.map((m) => {
     height: 9px;
     margin-top: 5px;
     border-radius: var(--radius-full);
-    background: var(--color-border-strong);
+    background: var(--color-border-default-strong);
     flex-shrink: 0;
   }
-  [data-urgency='overdue'] .bcn-mod__dot { background: var(--color-danger); }
-  [data-urgency='due-soon'] .bcn-mod__dot { background: var(--color-warning); }
+  [data-urgency='overdue'] .bcn-mod__dot { background: var(--color-background-utility-danger); }
+  [data-urgency='due-soon'] .bcn-mod__dot { background: var(--color-background-utility-warning); }
 
   .bcn-mod__action-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
   .bcn-mod__action-name {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default);
     line-height: var(--line-height-tight);
   }
-  .bcn-mod__action:hover .bcn-mod__action-name { color: var(--color-primary); }
+  .bcn-mod__action:hover .bcn-mod__action-name { color: var(--color-background-brand); }
   .bcn-mod__action-name :global(.bcn-cbadge) { margin-right: var(--spacing-150); }
   .bcn-mod__action-meta {
     font-size: 0.8125rem; /* 13px — meta floor */
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -271,11 +271,11 @@ const cards = modules.map((m) => {
     position: relative;
     z-index: 1;
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-secondary);
     text-decoration: none;
   }
-  .bcn-mod__more:hover { color: var(--color-primary); }
+  .bcn-mod__more:hover { color: var(--color-background-brand); }
 
   /* Named sub-surfaces — quiet links riding above the portal. */
   .bcn-mod__links {
@@ -285,7 +285,7 @@ const cards = modules.map((m) => {
     flex-direction: column;
     gap: var(--spacing-100);
     padding-top: var(--spacing-300);
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .bcn-mod__link {
     display: inline-flex;
@@ -293,12 +293,12 @@ const cards = modules.map((m) => {
     gap: var(--spacing-100);
     align-self: flex-start;
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-secondary);
     text-decoration: none;
   }
-  .bcn-mod__link:hover { color: var(--color-primary); }
-  .bcn-mod__link :global(.esa-icon) { color: var(--color-text-muted); }
+  .bcn-mod__link:hover { color: var(--color-background-brand); }
+  .bcn-mod__link :global(.esa-icon) { color: var(--bcn-content-muted); }
 
   .bcn-mod__open {
     display: inline-flex;
@@ -306,9 +306,9 @@ const cards = modules.map((m) => {
     gap: var(--spacing-100);
     margin-top: auto;
     padding-top: var(--spacing-200);
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-background-brand);
   }
-  .bcn-mod__card:hover .bcn-mod__open { color: var(--color-primary-hover); }
+  .bcn-mod__card:hover .bcn-mod__open { color: var(--color-background-brand-hover); }
 </style>
diff --git a/src/components/bcn/BcnMonitoringStats.astro b/src/components/bcn/BcnMonitoringStats.astro
index 10eacbb3..6cdb021a 100644
--- a/src/components/bcn/BcnMonitoringStats.astro
+++ b/src/components/bcn/BcnMonitoringStats.astro
@@ -69,7 +69,7 @@ const barWidth = (value: number, items: { value: number }[]) => {
             {stats.observationBreakdown.map((b) => (
               <li class="bcn-mstats__legend-item">
                 <span class="bcn-mstats__dot" style={`--_c: ${b.hex};`}></span>
-                <span class="type-body-small">{b.label} ({b.value})</span>
+                <span class="typography-body-sm">{b.label} ({b.value})</span>
               </li>
             ))}
           </ul>
@@ -78,7 +78,7 @@ const barWidth = (value: number, items: { value: number }[]) => {
 
       <!-- Outstanding Issues mini-panel -->
       <section class="bcn-mstats__issues stack" data-gap="sm">
-        <h4 class="bcn-mstats__issues-title type-label">
+        <h4 class="bcn-mstats__issues-title typography-label">
           Outstanding Issues ({outstandingIssues.length})
         </h4>
         <ul class="stack" data-gap="2xs">
@@ -106,11 +106,11 @@ const barWidth = (value: number, items: { value: number }[]) => {
         <ul class="bcn-mstats__bars stack" data-gap="xs">
           {stats.nestingBirds.species.map((s) => (
             <li class="bcn-mstats__bar-row">
-              <span class="bcn-mstats__bar-label type-body-small">{s.label}</span>
+              <span class="bcn-mstats__bar-label typography-body-sm">{s.label}</span>
               <span class="bcn-mstats__bar-track">
                 <span class="bcn-mstats__bar-fill" style={`--_c: ${s.hex}; width: ${barWidth(s.value, stats.nestingBirds.species)};`}></span>
               </span>
-              <span class="bcn-mstats__bar-value type-label">{s.value}</span>
+              <span class="bcn-mstats__bar-value typography-label">{s.value}</span>
             </li>
           ))}
         </ul>
@@ -137,11 +137,11 @@ const barWidth = (value: number, items: { value: number }[]) => {
         <ul class="bcn-mstats__bars stack" data-gap="xs">
           {stats.biologicalResources.items.map((item) => (
             <li class="bcn-mstats__bar-row">
-              <span class="bcn-mstats__bar-label type-body-small">{item.label}</span>
+              <span class="bcn-mstats__bar-label typography-body-sm">{item.label}</span>
               <span class="bcn-mstats__bar-track">
                 <span class="bcn-mstats__bar-fill" style={`--_c: ${item.hex}; width: ${barWidth(item.value, stats.biologicalResources.items)};`}></span>
               </span>
-              <span class="bcn-mstats__bar-value type-label">{item.value}</span>
+              <span class="bcn-mstats__bar-value typography-label">{item.value}</span>
             </li>
           ))}
         </ul>
@@ -176,11 +176,11 @@ const barWidth = (value: number, items: { value: number }[]) => {
     display: grid;
     place-items: center;
     border-radius: var(--radius-full);
-    background: var(--color-surface);
-    font-family: var(--font-display, var(--font-sans));
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-bold);
-    color: var(--color-text-primary);
+    background: var(--color-background-elevation-raised);
+    font-family: var(--typography-font-family-display, var(--typography-font-family-sans));
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-bold);
+    color: var(--color-content-default);
   }
 
   .bcn-mstats__legend { list-style: none; padding: 0; }
@@ -188,7 +188,7 @@ const barWidth = (value: number, items: { value: number }[]) => {
     display: flex;
     align-items: center;
     gap: var(--spacing-200);
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .bcn-mstats__dot {
     width: 10px;
@@ -201,11 +201,11 @@ const barWidth = (value: number, items: { value: number }[]) => {
   /* ── Outstanding Issues mini-panel ── */
   .bcn-mstats__issues {
     padding-top: var(--spacing-300);
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .bcn-mstats__issues-title {
     margin: 0;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .bcn-mstats__issues ul { list-style: none; padding: 0; }
   .bcn-mstats__issue {
@@ -214,15 +214,15 @@ const barWidth = (value: number, items: { value: number }[]) => {
     gap: var(--spacing-200);
   }
   .bcn-mstats__issue-link {
-    font-size: var(--type-size-150);
-    color: var(--color-primary);
+    font-size: var(--font-size-150);
+    color: var(--color-background-brand);
     text-decoration: underline;
     text-underline-offset: 2px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .bcn-mstats__issue-link:hover { color: var(--color-primary-hover); }
+  .bcn-mstats__issue-link:hover { color: var(--color-background-brand-hover); }
 
   /* ── Horizontal value bars (bespoke viz; color from data via --_c) ── */
   .bcn-mstats__bars { list-style: none; padding: 0; }
@@ -233,7 +233,7 @@ const barWidth = (value: number, items: { value: number }[]) => {
     gap: var(--spacing-300);
   }
   .bcn-mstats__bar-label {
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -241,7 +241,7 @@ const barWidth = (value: number, items: { value: number }[]) => {
   .bcn-mstats__bar-track {
     height: 10px;
     border-radius: var(--radius-full);
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
     overflow: hidden;
   }
   .bcn-mstats__bar-fill {
@@ -251,7 +251,7 @@ const barWidth = (value: number, items: { value: number }[]) => {
     background: var(--_c);
   }
   .bcn-mstats__bar-value {
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     font-variant-numeric: tabular-nums;
     text-align: right;
   }
diff --git a/src/components/bcn/BcnNodeDetail.astro b/src/components/bcn/BcnNodeDetail.astro
index 3e0a027c..c9d89ad2 100644
--- a/src/components/bcn/BcnNodeDetail.astro
+++ b/src/components/bcn/BcnNodeDetail.astro
@@ -306,10 +306,10 @@ const plannedKv = `${formatUSD(rollup.totalFunding)}${
 <style>
   .bcn-detail { display: flex; flex-direction: column; gap: var(--spacing-700); }
   .bcn-detail__section { display: flex; flex-direction: column; gap: var(--spacing-300); }
-  .bcn-detail__section--flush { border-top: 1px solid var(--color-border-light); padding-top: var(--spacing-200); }
+  .bcn-detail__section--flush { border-top: 1px solid var(--color-border-default-subtle); padding-top: var(--spacing-200); }
 
   /* House section heading: readable words, border-bottom, app scale. */
-  .bcn-detail__title { margin: 0; padding-bottom: var(--spacing-200); border-bottom: 1px solid var(--color-border); font-size: var(--type-size-300); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); line-height: 1.3; }
+  .bcn-detail__title { margin: 0; padding-bottom: var(--spacing-200); border-bottom: 1px solid var(--color-border-default); font-size: var(--font-size-300); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); line-height: 1.3; }
 
   .bcn-detail__rows { display: flex; flex-direction: column; gap: var(--spacing-300); }
 
@@ -320,7 +320,7 @@ const plannedKv = `${formatUSD(rollup.totalFunding)}${
   /* Global ON PURPOSE: the host page rebuilds the notes block after an
      Edit-record save — scoped attribute selectors would miss injected nodes.
      Classes stay bcn-detail__-namespaced. */
-  .bcn-detail__constraints { margin: 0; padding-left: var(--spacing-400); display: flex; flex-direction: column; gap: var(--spacing-100); font-size: var(--type-size-200); color: var(--color-text-secondary); }
-  .bcn-detail__note { margin: 0; font-size: var(--type-size-200); color: var(--color-text-secondary); line-height: 1.55; }
-  .bcn-detail__note--empty { color: var(--color-text-tertiary); font-style: italic; }
+  .bcn-detail__constraints { margin: 0; padding-left: var(--spacing-400); display: flex; flex-direction: column; gap: var(--spacing-100); font-size: var(--font-size-200); color: var(--color-content-default-secondary); }
+  .bcn-detail__note { margin: 0; font-size: var(--font-size-200); color: var(--color-content-default-secondary); line-height: 1.55; }
+  .bcn-detail__note--empty { color: var(--color-content-default-tertiary); font-style: italic; }
 </style>
diff --git a/src/components/bcn/BcnNodeEdit.astro b/src/components/bcn/BcnNodeEdit.astro
index 08c932cf..251e41d5 100644
--- a/src/components/bcn/BcnNodeEdit.astro
+++ b/src/components/bcn/BcnNodeEdit.astro
@@ -112,11 +112,11 @@ const detailsHref = withBase(`/prototypes/fish-detail/${node.id}`);
   <!-- ── Actions: add child / delete / full details ── -->
   <section class="bcn-edit__section bcn-edit__actions">
     {tier.childLabel && (
-      <EsaButton color="secondary" appearance="outline" size="sm" icon="plus" data-wb-add>
+      <EsaButton variant="secondary" appearance="outline" size="sm" icon="plus" data-wb-add>
         Add {tier.childLabel.toLowerCase()}
       </EsaButton>
     )}
-    <EsaButton class="bcn-edit__details" href={detailsHref} color="ghost" appearance="outline" size="sm" icon="external-link" data-wb-details>
+    <EsaButton class="bcn-edit__details" href={detailsHref} variant="ghost" appearance="outline" size="sm" icon="external-link" data-wb-details>
       View full details
     </EsaButton>
   </section>
@@ -309,13 +309,13 @@ const detailsHref = withBase(`/prototypes/fish-detail/${node.id}`);
   .bcn-edit { display: flex; flex-direction: column; gap: var(--spacing-500); flex: 1; }
   .bcn-edit__section { display: flex; flex-direction: column; gap: var(--spacing-300); }
 
-  .bcn-edit__title { margin: 0; font-size: var(--form-font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
+  .bcn-edit__title { margin: 0; font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-secondary); }
 
   .bcn-edit__sched-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-200) var(--spacing-300); }
-  .bcn-edit__hint { font-size: var(--type-size-150); color: var(--color-text-tertiary); }
+  .bcn-edit__hint { font-size: var(--font-size-150); color: var(--color-content-default-tertiary); }
   .bcn-edit__hint:empty { display: none; }
 
-  .bcn-edit__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--spacing-200); border-top: 1px solid var(--color-border-light); padding-top: var(--spacing-400); margin-top: auto; }
+  .bcn-edit__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--spacing-200); border-top: 1px solid var(--color-border-default-subtle); padding-top: var(--spacing-400); margin-top: auto; }
   .bcn-edit__actions :global(.bcn-edit__details) { margin-left: auto; }
   .bcn-edit__actions :global(.bcn-edit__details a) { text-decoration: none; }
 </style>
diff --git a/src/components/bcn/BcnNotifications.astro b/src/components/bcn/BcnNotifications.astro
index bd5fbd9c..52a0e130 100644
--- a/src/components/bcn/BcnNotifications.astro
+++ b/src/components/bcn/BcnNotifications.astro
@@ -16,7 +16,7 @@
 // notification summary.
 import EsaBadge from '@esa/ecology/esa-badge.astro';
 import EsaPill from '@esa/ecology/esa-pill.astro';
-import EsaIconLink from '@esa/ecology/esa-icon-link.astro';
+import EsaIconLink from '@esa/ecology/esa-button.astro';
 
 interface NotifTrigger {
   name: string;
@@ -47,7 +47,7 @@ const {
 <div class="bcn-notifications">
   <p class="bcn-notifications__lead">
     {lead}
-    <EsaIconLink href={editHref} trailing="arrow-right" size="sm">{editLabel}</EsaIconLink>
+    <EsaIconLink variant="chrome" href={editHref} iconRight="arrow-right" size="sm">{editLabel}</EsaIconLink>
   </p>
 
   <div class="bcn-notifications__field">
@@ -78,21 +78,21 @@ const {
 <style>
   /* Notifications — quiet summary; parent owns outer spacing. */
   .bcn-notifications { display: flex; flex-direction: column; gap: var(--spacing-400); }
-  .bcn-notifications__lead { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-secondary); }
+  .bcn-notifications__lead { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--color-content-default-secondary); }
 
   /* Field label — own class, copied from the dialog's .rd-kv__key sizing (decoupled). */
-  .bcn-notifications__label { font-size: var(--form-font-size-md); font-weight: var(--font-weight-medium); color: var(--form-label-color); }
+  .bcn-notifications__label { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-medium); color: var(--form-label-color); }
 
   .bcn-notifications__field { display: flex; flex-direction: column; gap: var(--spacing-200); }
-  .bcn-notifications__next { display: inline-flex; align-items: center; gap: var(--spacing-200); font-size: 0.9375rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
+  .bcn-notifications__next { display: inline-flex; align-items: center; gap: var(--spacing-200); font-size: 0.9375rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
   .bcn-notifications__recipients { display: flex; flex-wrap: wrap; gap: var(--spacing-150); }
 
   .bcn-notifications__triggers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-150); }
-  .bcn-notifications__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-300); padding: var(--spacing-250) var(--spacing-300); border: 1px solid var(--color-border); border-radius: var(--radius-200); background: var(--color-surface); }
-  .bcn-notifications__trigger-name { font-size: 0.875rem; font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
-  .bcn-notifications__trigger-detail { display: inline-flex; align-items: center; gap: var(--spacing-150); font-size: 0.8125rem; color: var(--color-text-secondary); }
-  .bcn-notifications__trigger-detail::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--color-border-strong); }
-  .bcn-notifications__trigger.is-on .bcn-notifications__trigger-detail::before { background: var(--color-success); }
+  .bcn-notifications__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-300); padding: var(--spacing-250) var(--spacing-300); border: 1px solid var(--color-border-default); border-radius: var(--radius-200); background: var(--color-background-elevation-raised); }
+  .bcn-notifications__trigger-name { font-size: 0.875rem; font-weight: var(--typography-font-weight-medium); color: var(--color-content-default); }
+  .bcn-notifications__trigger-detail { display: inline-flex; align-items: center; gap: var(--spacing-150); font-size: 0.8125rem; color: var(--color-content-default-secondary); }
+  .bcn-notifications__trigger-detail::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--color-border-default-strong); }
+  .bcn-notifications__trigger.is-on .bcn-notifications__trigger-detail::before { background: var(--color-background-utility-success); }
   .bcn-notifications__trigger.is-off { opacity: 0.7; }
-  .bcn-notifications__trigger.is-off .bcn-notifications__trigger-detail { color: var(--color-text-tertiary); }
+  .bcn-notifications__trigger.is-off .bcn-notifications__trigger-detail { color: var(--color-content-default-tertiary); }
 </style>
diff --git a/src/components/bcn/BcnObservationCard.astro b/src/components/bcn/BcnObservationCard.astro
index c2424bfb..693b79aa 100644
--- a/src/components/bcn/BcnObservationCard.astro
+++ b/src/components/bcn/BcnObservationCard.astro
@@ -97,9 +97,9 @@ const ALERT = '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a
 
 <style>
   .bcn-obs {
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     overflow: hidden;
   }
   .bcn-obs[hidden] { display: none; }
@@ -114,39 +114,39 @@ const ALERT = '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a
     list-style: none;
   }
   .bcn-obs__summary::-webkit-details-marker { display: none; }
-  .bcn-obs__summary:hover { background: var(--color-surface-sunken); }
+  .bcn-obs__summary:hover { background: var(--color-background-elevation-sunken); }
 
-  .bcn-obs__chev { display: inline-flex; flex-shrink: 0; color: var(--color-text-tertiary); transition: transform 150ms ease; }
+  .bcn-obs__chev { display: inline-flex; flex-shrink: 0; color: var(--color-content-default-tertiary); transition: transform 150ms ease; }
   .bcn-obs[open] > .bcn-obs__summary .bcn-obs__chev { transform: rotate(90deg); }
 
   /* Compliance concern marker — a warning glyph; the concern is a raised violation. */
-  .bcn-obs__concern-icon { display: inline-flex; flex-shrink: 0; color: var(--color-danger); }
+  .bcn-obs__concern-icon { display: inline-flex; flex-shrink: 0; color: var(--color-background-utility-danger); }
 
   .bcn-obs__badge {
     flex-shrink: 0;
-    font-family: var(--font-mono);
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-secondary);
-    background: color-mix(in srgb, var(--color-secondary) 12%, white);
+    font-family: var(--typography-font-family-mono);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-background-brand-muted);
+    background: color-mix(in srgb, var(--color-background-brand-muted) 12%, white);
     padding: 1px var(--spacing-200);
     border-radius: var(--radius-100);
   }
   .bcn-obs__name {
     flex-shrink: 0;
-    font-size: var(--type-size-200);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-200);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .bcn-obs__id {
     flex-shrink: 0;
-    font-family: var(--font-mono);
-    font-size: var(--type-size-100);
-    color: var(--color-text-secondary);
+    font-family: var(--typography-font-family-mono);
+    font-size: var(--font-size-100);
+    color: var(--color-content-default-secondary);
   }
   .bcn-obs__meta {
-    font-size: var(--type-size-100);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-100);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -154,9 +154,9 @@ const ALERT = '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a
   .bcn-obs__spacer { flex: 1 1 var(--spacing-300); }
   .bcn-obs__fledge {
     flex-shrink: 0;
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-secondary);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-background-brand-muted);
     white-space: nowrap;
   }
 
@@ -167,37 +167,37 @@ const ALERT = '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a
     flex-direction: column;
     gap: var(--spacing-400);
     padding: var(--spacing-400);
-    background: var(--color-surface);
-    border-top: 1px solid var(--color-border-light);
+    background: var(--color-background-elevation-raised);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   /* The real field note grounds the observation. */
   .bcn-obs__desc {
     margin: 0;
-    font-size: var(--type-size-200);
+    font-size: var(--font-size-200);
     line-height: 1.5;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   /* Jump to the observation/concern detail page. */
   .bcn-obs__detail-link {
-    color: var(--color-text-link);
+    color: var(--color-content-link);
     text-decoration: underline;
     text-underline-offset: 2px;
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--typography-font-weight-medium);
     white-space: nowrap;
   }
-  .bcn-obs__detail-link:hover { color: var(--color-primary-hover); }
+  .bcn-obs__detail-link:hover { color: var(--color-background-brand-hover); }
   .bcn-obs__fledge-panel {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     padding: var(--spacing-300) var(--spacing-400);
   }
   .bcn-obs__section { display: flex; flex-direction: column; gap: var(--spacing-300); }
   .bcn-obs__h {
     margin: 0;
-    font-size: var(--type-size-200);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-200);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .bcn-obs__rows { display: flex; flex-direction: column; gap: var(--spacing-100); }
 </style>
diff --git a/src/components/bcn/BcnObservationMap.astro b/src/components/bcn/BcnObservationMap.astro
index de445ab6..f0b25113 100644
--- a/src/components/bcn/BcnObservationMap.astro
+++ b/src/components/bcn/BcnObservationMap.astro
@@ -39,7 +39,7 @@ export interface ObservationPin {
   lng: number;
   label: string;
   /** Fill color. May be a literal (`#b3261e`) OR a token reference
-   *  (`var(--color-danger)`) — the script resolves vars to a computed literal,
+   *  (`var(--color-background-utility-danger)`) — the script resolves vars to a computed literal,
    *  because Leaflet cannot take a raw `var(...)` string. */
   hex: string;
 }
@@ -107,9 +107,9 @@ const label =
   const rootStyle = () => getComputedStyle(document.documentElement);
 
   /**
-   * Leaflet paths take LITERAL colors, so a `var(--color-danger)` prop has to be
-   * resolved first (same move BcnProjectMap makes for --color-secondary /
-   * --color-primary). Recurses because a semantic token may itself alias another
+   * Leaflet paths take LITERAL colors, so a `var(--color-background-utility-danger)` prop has to be
+   * resolved first (same move BcnProjectMap makes for --color-background-brand-muted /
+   * --color-background-brand). Recurses because a semantic token may itself alias another
    * var(), and honors an inline var() fallback.
    */
   function resolveColor(value: string, depth = 0): string {
@@ -159,7 +159,7 @@ const label =
 
     const mapId = host.dataset.mapId || '';
     const interactive = host.dataset.interactive !== 'false';
-    const stroke = rootStyle().getPropertyValue('--color-surface').trim() || '#ffffff';
+    const stroke = rootStyle().getPropertyValue('--color-background-elevation-raised').trim() || '#ffffff';
 
     // A view must exist BEFORE any layer is added; fitBounds then takes over.
     const map = L.map(host, interactive ? LIVE_OPTIONS : INSET_OPTIONS).setView(
@@ -227,15 +227,15 @@ const label =
   .bcn-obsmap {
     width: 100%;
     border-radius: var(--radius-200);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     overflow: hidden;
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
 
   /* Leaflet injects .leaflet-container itself, so it is out of Astro's scope. */
   .bcn-obsmap :global(.leaflet-container) {
-    font-family: var(--font-sans, inherit);
-    background: var(--color-surface-sunken);
+    font-family: var(--typography-font-family-sans, inherit);
+    background: var(--color-background-elevation-sunken);
   }
 
   /* A picture must not offer a grab cursor it won't honor. */
diff --git a/src/components/bcn/BcnOmniSearch.astro b/src/components/bcn/BcnOmniSearch.astro
index d9c1ea73..26fce86d 100644
--- a/src/components/bcn/BcnOmniSearch.astro
+++ b/src/components/bcn/BcnOmniSearch.astro
@@ -88,7 +88,7 @@
   .bcn-omni__scrim {
     position: absolute;
     inset: 0;
-    background: var(--color-backdrop, rgba(20, 30, 40, 0.45));
+    background: var(--color-background-overlay-backdrop, rgba(20, 30, 40, 0.45));
     backdrop-filter: blur(2px);
   }
 
@@ -100,8 +100,8 @@
     height: min(680px, 84vh); /* fixed-tall — does not jump as results change */
     display: flex;
     flex-direction: column;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-400, 12px);
     overflow: hidden;
     box-shadow: 0 24px 64px rgba(20, 30, 40, 0.32);
@@ -118,9 +118,9 @@
     gap: var(--spacing-300);
     flex: none;
     padding: var(--spacing-300) var(--spacing-500);
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border-default);
   }
-  .bcn-omni__searchicon { display: inline-flex; flex: none; color: var(--color-text-tertiary); }
+  .bcn-omni__searchicon { display: inline-flex; flex: none; color: var(--color-content-default-tertiary); }
   .bcn-omni__searchicon svg { width: 22px; height: 22px; }
   .bcn-omni__inputwrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
   .bcn-omni__input {
@@ -134,11 +134,11 @@
     outline: 0;
     background: transparent;
     font-family: inherit;
-    font-size: var(--type-size-400, 1.25rem);
+    font-size: var(--font-size-400, 1.25rem);
     line-height: 1.4;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
-  .bcn-omni__input::placeholder { color: var(--color-text-tertiary); }
+  .bcn-omni__input::placeholder { color: var(--color-content-default-tertiary); }
   /* ghost = inline-autocomplete preview sitting behind the input */
   .bcn-omni__ghost {
     position: absolute;
@@ -147,9 +147,9 @@
     display: flex;
     align-items: center;
     font-family: inherit;
-    font-size: var(--type-size-400, 1.25rem);
+    font-size: var(--font-size-400, 1.25rem);
     line-height: 1.4;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     white-space: pre;
     overflow: hidden;
     pointer-events: none;
@@ -164,12 +164,12 @@
     flex: none;
     border: 0;
     border-radius: var(--radius-full);
-    background: var(--color-surface-sunken);
-    color: var(--color-text-secondary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-content-default-secondary);
     cursor: pointer;
   }
   .bcn-omni__clear[hidden] { display: none; }
-  .bcn-omni__clear:hover { background: var(--color-border); }
+  .bcn-omni__clear:hover { background: var(--color-border-default); }
 
   .bcn-omni kbd {
     display: inline-flex;
@@ -180,10 +180,10 @@
     padding: 0 5px;
     font-family: inherit;
     font-size: 11px;
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-secondary);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-bottom-width: 2px;
     border-radius: 4px;
   }
@@ -203,7 +203,7 @@
     flex-direction: column;
     gap: 1px;
     padding: var(--spacing-200);
-    border-right: 1px solid var(--color-border);
+    border-right: 1px solid var(--color-border-default);
     overflow-y: auto;
     scrollbar-width: none;
   }
@@ -232,15 +232,15 @@
     width: 100%;
     padding: var(--spacing-300);
     border: 0;
-    background: var(--color-primary);
-    color: var(--color-text-inverse);
+    background: var(--color-background-brand);
+    color: var(--color-content-default-knockout);
     font-family: inherit;
-    font-size: var(--type-size-200);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-200);
+    font-weight: var(--typography-font-weight-semibold);
     cursor: pointer;
   }
   .bcn-omni__showall[hidden] { display: none; }
-  .bcn-omni__showall:hover { background: var(--color-primary-hover, var(--color-primary)); filter: brightness(0.96); }
+  .bcn-omni__showall:hover { background: var(--color-background-brand-hover, var(--color-background-brand)); filter: brightness(0.96); }
 
   .bcn-omni__footer {
     display: flex;
@@ -248,9 +248,9 @@
     gap: var(--spacing-400);
     flex: none;
     padding: var(--spacing-250) var(--spacing-500);
-    border-top: 1px solid var(--color-border);
-    font-size: var(--type-size-150);
-    color: var(--color-text-tertiary);
+    border-top: 1px solid var(--color-border-default);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-omni__footer span { display: inline-flex; align-items: center; gap: 6px; }
 </style>
@@ -266,16 +266,16 @@
     border: 0;
     border-radius: var(--radius-200);
     background: transparent;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     font-family: inherit;
-    font-size: var(--type-size-150);
+    font-size: var(--font-size-150);
     text-align: left;
     cursor: pointer;
     transition: background 0.1s, color 0.1s;
   }
-  .bcn-omni-rail__item:not(:disabled):hover { background: var(--color-surface-sunken); color: var(--color-text-primary); }
-  .bcn-omni-rail__item.is-active { background: var(--color-primary); color: var(--color-text-inverse); font-weight: var(--font-weight-semibold); }
-  .bcn-omni-rail__item:disabled { color: var(--color-text-tertiary); cursor: default; } /* null-state: present but inert */
+  .bcn-omni-rail__item:not(:disabled):hover { background: var(--color-background-elevation-sunken); color: var(--color-content-default); }
+  .bcn-omni-rail__item.is-active { background: var(--color-background-brand); color: var(--color-content-default-knockout); font-weight: var(--typography-font-weight-semibold); }
+  .bcn-omni-rail__item:disabled { color: var(--color-content-default-tertiary); cursor: default; } /* null-state: present but inert */
   .bcn-omni-rail__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .bcn-omni-rail__c { flex: none; font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0.8; }
 
@@ -285,14 +285,14 @@
     gap: var(--spacing-200);
     padding: var(--spacing-200) var(--spacing-400) var(--spacing-100);
   }
-  .bcn-omni-group__label { font-size: var(--type-size-150); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
+  .bcn-omni-group__label { font-size: var(--font-size-150); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
   /* count clustered next to the label as a bordered badge (clear bg, gray-200 border, 4px) */
   .bcn-omni-group__count {
-    font-size: var(--type-size-100);
+    font-size: var(--font-size-100);
     font-variant-numeric: tabular-nums;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     background: transparent;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-100);
     padding: 0 6px;
     line-height: 1.5;
@@ -305,12 +305,12 @@
     padding: var(--spacing-250) var(--spacing-400);
     border: 0;
     background: transparent;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     font-family: inherit;
     text-align: left;
     cursor: pointer;
   }
-  .bcn-omni-row.is-active { background: var(--color-surface-sunken); }
+  .bcn-omni-row.is-active { background: var(--color-background-elevation-sunken); }
   .bcn-omni-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
   .bcn-omni-row__titlerow { display: flex; align-items: center; gap: var(--spacing-150); min-width: 0; }
   /* purple commitment-ID badge (faithful to Beacon's --color-commitment identity token) */
@@ -318,30 +318,30 @@
     flex: none;
     padding: 1px 6px;
     border-radius: var(--radius-100);
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.4;
     white-space: nowrap;
     color: var(--color-commitment);
     background: color-mix(in srgb, var(--color-commitment) 12%, white);
   }
-  .bcn-omni-row__title { flex: 0 1 auto; min-width: 0; font-size: var(--type-size-150); font-weight: var(--font-weight-medium); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .bcn-omni-row__title { flex: 0 1 auto; min-width: 0; font-size: var(--font-size-150); font-weight: var(--typography-font-weight-medium); color: var(--color-content-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   /* document text from a commitment/requirement → serif */
-  .bcn-omni-row__snippet { margin-top: 2px; font-family: var(--font-decorative); font-size: var(--type-size-150); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .bcn-omni-row__snippet { margin-top: 2px; font-family: var(--font-decorative); font-size: var(--font-size-150); color: var(--color-content-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
   /* highlighter-yellow hits (dark text for contrast on the yellow) */
   .bcn-omni-row mark,
   .bcn-omni-empty mark {
     background: #fde047;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     border-radius: 2px;
     padding: 0 1px;
   }
   .bcn-omni-empty {
     padding: var(--spacing-600) var(--spacing-500);
     text-align: center;
-    color: var(--color-text-tertiary);
-    font-size: var(--type-size-200);
+    color: var(--color-content-default-tertiary);
+    font-size: var(--font-size-200);
   }
 
   /* null-state landing (the whole body before any query is typed) */
@@ -353,7 +353,7 @@
     gap: var(--spacing-150);
     padding: var(--spacing-500);
   }
-  .bcn-omni-landing__icon { width: 26px; height: 26px; color: var(--color-text-tertiary); }
-  .bcn-omni-landing__title { margin: 0; font-size: var(--type-size-200); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-omni-landing__hint { margin: 0; max-width: 46ch; font-size: var(--type-size-150); color: var(--color-text-tertiary); line-height: 1.55; }
+  .bcn-omni-landing__icon { width: 26px; height: 26px; color: var(--color-content-default-tertiary); }
+  .bcn-omni-landing__title { margin: 0; font-size: var(--font-size-200); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-omni-landing__hint { margin: 0; max-width: 46ch; font-size: var(--font-size-150); color: var(--color-content-default-tertiary); line-height: 1.55; }
 </style>
diff --git a/src/components/bcn/BcnOpCard.astro b/src/components/bcn/BcnOpCard.astro
index 09e1c439..0792b179 100644
--- a/src/components/bcn/BcnOpCard.astro
+++ b/src/components/bcn/BcnOpCard.astro
@@ -55,18 +55,18 @@ const scopeLine = allTenants
 >
   <EsaCard variant="outlined" title={op.name}>
     <div class="stack" data-gap="sm">
-      <p class="bcn-op__desc type-body-small">{op.description}</p>
+      <p class="bcn-op__desc typography-body-sm">{op.description}</p>
       {allTenants && <EsaAlertBox variant="warning">{scopeLine}</EsaAlertBox>}
     </div>
 
     <div class="cluster" data-gap="sm" slot="footer">
       {
         op.guided ? (
-          <EsaButton color="ghost" appearance="outline" size="md" icon="arrow-right" href="#">
+          <EsaButton variant="ghost" appearance="outline" size="md" icon="arrow-right" href="#">
             Open guided run
           </EsaButton>
         ) : (
-          <EsaButton color="primary" size="md" data-op-run={op.id}>
+          <EsaButton variant="primary" size="md" data-op-run={op.id}>
             Run…
           </EsaButton>
         )
@@ -82,11 +82,11 @@ const scopeLine = allTenants
         <div class="stack" data-gap="sm">
           {/* Full size here, unlike the card's 14px: in the confirm the description is
               not a caption under a title, it IS what the operator is reading. */}
-          <p class="bcn-op__dialog-desc type-body">{op.description}</p>
+          <p class="bcn-op__dialog-desc typography-body-md">{op.description}</p>
           {allTenants ? (
             <EsaAlertBox variant="warning">{scopeLine}</EsaAlertBox>
           ) : (
-            <p class="bcn-op__scope-line type-body">{scopeLine}</p>
+            <p class="bcn-op__scope-line typography-body-md">{scopeLine}</p>
           )}
           {allTenants && (
             <esa-text-field
@@ -98,10 +98,10 @@ const scopeLine = allTenants
         </div>
 
         <div class="cluster" data-gap="sm" slot="footer" style="--justify: flex-end">
-          <EsaButton color="ghost" appearance="outline" size="sm" data-op-cancel={op.id}>
+          <EsaButton variant="ghost" appearance="outline" size="sm" data-op-cancel={op.id}>
             Cancel
           </EsaButton>
-          <EsaButton color="primary" size="sm" disabled={allTenants} data-op-confirm={op.id}>
+          <EsaButton variant="primary" size="sm" disabled={allTenants} data-op-confirm={op.id}>
             Run now
           </EsaButton>
         </div>
@@ -113,10 +113,10 @@ const scopeLine = allTenants
 <style>
   .bcn-op {
     display: block;
-    /* esa-card fills its footer with --color-surface-sunken by default, which reads as a
+    /* esa-card fills its footer with --color-background-elevation-sunken by default, which reads as a
        mid-gray band under the description. Re-pointed through the lego's OWN public token
        (inherited down to the card) so the Run action sits on the card surface behind a
-       single hairline — the lego's border-top already resolves to --color-border-light. */
+       single hairline — the lego's border-top already resolves to --color-border-default-subtle. */
     --card-footer-bg: transparent;
   }
 
@@ -141,15 +141,15 @@ const scopeLine = allTenants
   /* Same scale as the settings rows beside them (BcnSettingRow's __desc). */
   .bcn-op__desc {
     line-height: 1.4;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   .bcn-op__dialog-desc {
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   .bcn-op__scope-line {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
 </style>
 
diff --git a/src/components/bcn/BcnOversightHero.astro b/src/components/bcn/BcnOversightHero.astro
index 8fcb851a..29edfae0 100644
--- a/src/components/bcn/BcnOversightHero.astro
+++ b/src/components/bcn/BcnOversightHero.astro
@@ -23,7 +23,7 @@
 // non-inline display that a bare <span> doesn't have by default, which is
 // exactly what silently broke it here before; a count list doesn't have that
 // failure mode and reads just as clearly at this width). Segment COLORS come
-// from semantic token strings (var(--color-success) etc) via inline style,
+// from semantic token strings (var(--color-background-utility-success) etc) via inline style,
 // never hardcoded. bcn-oversight-hero is the reusable home; the shell is
 // esa-card.
 import EsaCard from '@esa/ecology/esa-card.astro';
@@ -92,7 +92,7 @@ const segments = severityBreakdown.map((slice) => {
            sweep to the current active backlog, so the heading contradicted the data.
            It is now the only thing naming the set — the card's caption, which restated
            it and told the reader to click, came out with `subtitle` on 2026-08-16. -->
-      <h4 class="bcn-ohero__section-title type-card-title">Active Observations</h4>
+      <h4 class="bcn-ohero__section-title typography-title">Active Observations</h4>
       <div class="cluster" data-gap="lg" data-align="center">
         <div class="bcn-ohero__donut">
           <svg class="bcn-ohero__ring" viewBox="0 0 42 42" role="group" aria-label="Active observations by severity">
@@ -127,7 +127,7 @@ const segments = severityBreakdown.map((slice) => {
           </svg>
           <a class="bcn-ohero__hole" href={observationsHref}>
             <span class="bcn-ohero__hole-value">{sliceTotal}</span>
-            <span class="bcn-ohero__hole-cap type-caption">{asOfLabel}</span>
+            <span class="bcn-ohero__hole-cap typography-meta">{asOfLabel}</span>
           </a>
         </div>
 
@@ -136,8 +136,8 @@ const segments = severityBreakdown.map((slice) => {
             <li>
               <a class="bcn-ohero__legend-row" href={s.href}>
                 <span class="bcn-ohero__dot" style={`--_c: ${s.hex};`}></span>
-                <span class="bcn-ohero__legend-label type-body-small">{s.label}</span>
-                <span class="bcn-ohero__legend-value type-label">{s.value}</span>
+                <span class="bcn-ohero__legend-label typography-body-sm">{s.label}</span>
+                <span class="bcn-ohero__legend-value typography-label">{s.value}</span>
               </a>
             </li>
           ))}
@@ -148,24 +148,24 @@ const segments = severityBreakdown.map((slice) => {
     <!-- ── Two category count lists, by severity ── -->
     <div class="bcn-ohero__breakdowns cluster" data-gap="xl" data-align="start">
       <section class="stack" data-gap="xs">
-        <h4 class="bcn-ohero__section-title type-card-title">Needs Attention by Category</h4>
+        <h4 class="bcn-ohero__section-title typography-title">Needs Attention by Category</h4>
         <ul class="bcn-ohero__counts stack" data-gap="2xs">
           {needsAttentionCategories.map((c) => (
             <li class="bcn-ohero__count-row">
-              <span class="bcn-ohero__count-label type-body-small">{c.category}</span>
-              <span class="bcn-ohero__count-value type-label">{c.value}</span>
+              <span class="bcn-ohero__count-label typography-body-sm">{c.category}</span>
+              <span class="bcn-ohero__count-value typography-label">{c.value}</span>
             </li>
           ))}
         </ul>
       </section>
 
       <section class="stack" data-gap="xs">
-        <h4 class="bcn-ohero__section-title type-card-title">Non-Compliance by Category</h4>
+        <h4 class="bcn-ohero__section-title typography-title">Non-Compliance by Category</h4>
         <ul class="bcn-ohero__counts stack" data-gap="2xs">
           {nonComplianceCategories.map((c) => (
             <li class="bcn-ohero__count-row">
-              <span class="bcn-ohero__count-label type-body-small">{c.category}</span>
-              <span class="bcn-ohero__count-value type-label">{c.value}</span>
+              <span class="bcn-ohero__count-label typography-body-sm">{c.category}</span>
+              <span class="bcn-ohero__count-value typography-label">{c.value}</span>
             </li>
           ))}
         </ul>
@@ -183,10 +183,10 @@ const segments = severityBreakdown.map((slice) => {
     min-inline-size: 0;
   }
   /* Shared by the donut's own heading and the two count-list headings — one
-     step up from .type-label so all three sections read with equal weight. */
+     step up from .typography-label so all three sections read with equal weight. */
   .bcn-ohero__section-title {
     margin: 0;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
 
   /* ── Donut: stacked circle strokes, each an <a>. Color from data (--_c / the
@@ -205,7 +205,7 @@ const segments = severityBreakdown.map((slice) => {
     overflow: visible;
   }
   .bcn-ohero__track {
-    stroke: var(--color-surface-sunken);
+    stroke: var(--color-background-elevation-sunken);
   }
   .bcn-ohero__seg circle {
     transition: stroke-width 120ms ease-out, opacity 120ms ease-out;
@@ -232,21 +232,21 @@ const segments = severityBreakdown.map((slice) => {
     justify-content: center;
     gap: 1px;
     border-radius: var(--radius-full);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     text-decoration: none;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-ohero__hole-value {
-    font-family: var(--font-display, var(--font-sans));
-    font-size: var(--type-size-600);
-    font-weight: var(--font-weight-bold);
+    font-family: var(--typography-font-family-display, var(--typography-font-family-sans));
+    font-size: var(--font-size-600);
+    font-weight: var(--typography-font-weight-bold);
     line-height: 1;
   }
   .bcn-ohero__hole-cap {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-ohero__hole:hover .bcn-ohero__hole-value {
-    color: var(--color-primary-hover);
+    color: var(--color-background-brand-hover);
   }
   .bcn-ohero__hole:focus-visible {
     outline: var(--focus-ring-width) solid var(--focus-ring-color);
@@ -267,11 +267,11 @@ const segments = severityBreakdown.map((slice) => {
     padding: var(--spacing-100) var(--spacing-200);
     border-radius: var(--radius-200);
     text-decoration: none;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .bcn-ohero__legend-row:hover {
-    background: var(--color-surface-sunken);
-    color: var(--color-text-primary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-content-default);
   }
   .bcn-ohero__legend-row:focus-visible {
     outline: var(--focus-ring-width) solid var(--focus-ring-color);
@@ -289,7 +289,7 @@ const segments = severityBreakdown.map((slice) => {
     text-overflow: ellipsis;
   }
   .bcn-ohero__legend-value {
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     font-variant-numeric: tabular-nums;
     text-align: right;
   }
@@ -305,16 +305,16 @@ const segments = severityBreakdown.map((slice) => {
     padding-block: var(--spacing-100);
   }
   .bcn-ohero__count-row + .bcn-ohero__count-row {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .bcn-ohero__count-label {
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .bcn-ohero__count-value {
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     font-variant-numeric: tabular-nums;
     text-align: right;
   }
diff --git a/src/components/bcn/BcnPlanReader.astro b/src/components/bcn/BcnPlanReader.astro
index 150455d9..360f693d 100644
--- a/src/components/bcn/BcnPlanReader.astro
+++ b/src/components/bcn/BcnPlanReader.astro
@@ -307,15 +307,15 @@ const { sections, outline, counts, intents, statusOptions, coas } = Astro.props;
     display: flex;
     flex-direction: column;
     gap: var(--spacing-400);
-    font-size: var(--type-size-200);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-200);
+    color: var(--color-content-default);
   }
 
   /* ── Filter bar (house pattern) ── */
   .bcn-planr__filterbar {
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
   }
   .bcn-planr__fb-top {
     display: flex;
@@ -330,15 +330,15 @@ const { sections, outline, counts, intents, statusOptions, coas } = Astro.props;
     gap: var(--spacing-300);
   }
   .bcn-planr__fb-label {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
   .bcn-planr__fb-divider {
     width: 1px;
     align-self: stretch;
-    background: var(--color-border);
+    background: var(--color-border-default);
     margin: 0 var(--spacing-100);
   }
   .bcn-planr__fb-right {
@@ -357,20 +357,20 @@ const { sections, outline, counts, intents, statusOptions, coas } = Astro.props;
   .bcn-planr__fb-group :global(.bcn-status-select__trigger) {
     height: 32px;
     padding: 0 var(--spacing-200);
-    font-size: var(--form-font-size-sm, 12px);
-    font-weight: var(--font-weight-regular);
+    font-size: var(--typography-label-xs-font-size, 12px);
+    font-weight: var(--typography-font-weight-regular);
   }
   .bcn-planr__counts {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-300);
-    font-size: var(--type-size-100);
+    font-size: var(--font-size-100);
   }
   .bcn-planr__count {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-100);
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     white-space: nowrap;
   }
   .bcn-planr__count::before {
@@ -379,9 +379,9 @@ const { sections, outline, counts, intents, statusOptions, coas } = Astro.props;
     height: 8px;
     border-radius: var(--radius-full);
   }
-  .bcn-planr__count[data-s='open']::before { background: var(--color-warning); }
-  .bcn-planr__count[data-s='addressed']::before { background: var(--color-info); }
-  .bcn-planr__count[data-s='resolved']::before { background: var(--color-success); }
+  .bcn-planr__count[data-s='open']::before { background: var(--color-background-utility-warning); }
+  .bcn-planr__count[data-s='addressed']::before { background: var(--color-background-utility-info); }
+  .bcn-planr__count[data-s='resolved']::before { background: var(--color-background-utility-success); }
 
   /* ── Two-column: outline + document ── */
   .bcn-planr__grid {
@@ -393,9 +393,9 @@ const { sections, outline, counts, intents, statusOptions, coas } = Astro.props;
   .bcn-planr__outline {
     position: sticky;
     top: var(--spacing-400);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     padding: var(--spacing-300);
     max-height: calc(100vh - 140px);
     overflow-y: auto;
@@ -414,17 +414,17 @@ const { sections, outline, counts, intents, statusOptions, coas } = Astro.props;
     padding: var(--spacing-150) var(--spacing-200);
     border-radius: var(--radius-100);
     text-decoration: none;
-    color: var(--color-text-secondary);
-    font-size: var(--type-size-150);
+    color: var(--color-content-default-secondary);
+    font-size: var(--font-size-150);
     line-height: 1.35;
   }
   .bcn-planr__toc-link:hover {
-    background: var(--color-surface-sunken);
-    color: var(--color-text-primary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-content-default);
   }
   .bcn-planr__toc-item[data-level='1'] .bcn-planr__toc-link {
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     margin-top: var(--spacing-150);
   }
   .bcn-planr__toc-item[data-level='3'] .bcn-planr__toc-link {
@@ -432,9 +432,9 @@ const { sections, outline, counts, intents, statusOptions, coas } = Astro.props;
   }
   .bcn-planr__toc-num {
     flex: none;
-    font-family: var(--font-mono);
-    font-size: var(--type-size-100);
-    color: var(--color-text-tertiary);
+    font-family: var(--typography-font-family-mono);
+    font-size: var(--font-size-100);
+    color: var(--color-content-default-tertiary);
     min-width: 34px;
   }
   .bcn-planr__toc-title {
@@ -443,8 +443,8 @@ const { sections, outline, counts, intents, statusOptions, coas } = Astro.props;
   .bcn-planr__toc-count {
     margin-left: auto;
     flex: none;
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-semibold);
     color: var(--color-commitment);
     background: color-mix(in srgb, var(--color-commitment) 12%, white);
     padding: 0 6px;
@@ -476,28 +476,28 @@ const { sections, outline, counts, intents, statusOptions, coas } = Astro.props;
   .bcn-planr__h1 {
     margin: var(--spacing-400) 0 0;
     padding-bottom: var(--spacing-200);
-    border-bottom: 2px solid var(--color-border-strong);
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-semibold);
+    border-bottom: 2px solid var(--color-border-default-strong);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.3;
     flex: 1 1 100%;
   }
   .bcn-planr__h2 {
     margin: 0;
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.3;
   }
   .bcn-planr__h3 {
     margin: 0;
-    font-size: var(--type-size-200);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-200);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.35;
   }
   .bcn-planr__num {
-    font-family: var(--font-mono);
+    font-family: var(--typography-font-family-mono);
     font-size: 0.85em;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     margin-right: var(--spacing-250);
   }
   .bcn-planr__coas {
@@ -508,9 +508,9 @@ const { sections, outline, counts, intents, statusOptions, coas } = Astro.props;
   }
   .bcn-planr__coa {
     display: inline-block;
-    font-family: var(--font-mono);
+    font-family: var(--typography-font-family-mono);
     font-size: 0.6875rem; /* adherence-allow: font-too-small — matches the sanctioned 11px reference chips */
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     color: var(--color-commitment);
     background: color-mix(in srgb, var(--color-commitment) 12%, white);
     padding: 1px 5px;
@@ -524,8 +524,8 @@ const { sections, outline, counts, intents, statusOptions, coas } = Astro.props;
   }
   .bcn-planr__excerpt {
     margin: 0;
-    font-size: var(--type-size-200);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-200);
+    color: var(--color-content-default-secondary);
     line-height: 1.6;
     max-width: 72ch;
   }
@@ -546,9 +546,9 @@ const { sections, outline, counts, intents, statusOptions, coas } = Astro.props;
   }
   .bcn-planr__comment {
     padding: var(--spacing-300);
-    border: 1px solid var(--color-border-light);
+    border: 1px solid var(--color-border-default-subtle);
     border-radius: var(--radius-200);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
   }
   .bcn-planr__avatar {
     flex: none;
@@ -565,15 +565,15 @@ const { sections, outline, counts, intents, statusOptions, coas } = Astro.props;
     align-items: center;
     flex-wrap: wrap;
     gap: var(--spacing-200);
-    font-size: var(--type-size-150);
+    font-size: var(--font-size-150);
   }
   .bcn-planr__c-author {
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .bcn-planr__c-time {
-    color: var(--color-text-tertiary);
-    font-size: var(--type-size-100);
+    color: var(--color-content-default-tertiary);
+    font-size: var(--font-size-100);
   }
   .bcn-planr__c-tags {
     display: inline-flex;
@@ -583,23 +583,23 @@ const { sections, outline, counts, intents, statusOptions, coas } = Astro.props;
   }
   .bcn-planr__c-text {
     margin: 0;
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
     line-height: 1.55;
   }
   .bcn-planr__replies {
     list-style: none;
     margin: var(--spacing-100) 0 0;
     padding: var(--spacing-250) 0 0 var(--spacing-400);
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
     display: flex;
     flex-direction: column;
     gap: var(--spacing-250);
   }
   .bcn-planr__noresults {
     margin: 0;
-    font-size: var(--type-size-150);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-tertiary);
   }
 
   @media (max-width: 1000px) {
diff --git a/src/components/bcn/BcnPre2030Memo.astro b/src/components/bcn/BcnPre2030Memo.astro
index 11736495..9f9bb975 100644
--- a/src/components/bcn/BcnPre2030Memo.astro
+++ b/src/components/bcn/BcnPre2030Memo.astro
@@ -324,7 +324,7 @@ function healthSummary(h: MemoHealth): string {
   .bcn-memo {
     max-width: 76ch;
     margin-inline: auto;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     font-size: 1rem;
     line-height: 1.6;
   }
@@ -341,13 +341,13 @@ function healthSummary(h: MemoHealth): string {
     flex-direction: column;
     gap: var(--spacing-400);
     padding-bottom: var(--spacing-500);
-    border-bottom: 2px solid var(--color-border-strong);
+    border-bottom: 2px solid var(--color-border-default-strong);
   }
   .bcn-memo__kicker {
     margin: 0;
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-memo__meta {
     display: grid;
@@ -359,17 +359,17 @@ function healthSummary(h: MemoHealth): string {
     display: contents;
   }
   .bcn-memo__meta-label {
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-memo__meta-value {
     margin: 0;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   /* The Re line is the document's title — let it read as one. */
   .bcn-memo__meta-row:last-child .bcn-memo__meta-value {
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.35;
   }
 
@@ -396,10 +396,10 @@ function healthSummary(h: MemoHealth): string {
     flex-direction: column;
     gap: 2px;
     padding: var(--spacing-250) 0;
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-default-subtle);
   }
   .bcn-memo__milestone:first-child {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .bcn-memo__milestone-line {
     display: flex;
@@ -408,11 +408,11 @@ function healthSummary(h: MemoHealth): string {
     gap: var(--spacing-300);
   }
   .bcn-memo__milestone-name {
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--typography-font-weight-medium);
   }
   .bcn-memo__citation {
-    font-size: var(--type-size-300);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-300);
+    color: var(--color-content-default-tertiary);
   }
 
   /* ── Assumptions & open questions ── */
@@ -430,9 +430,9 @@ function healthSummary(h: MemoHealth): string {
     gap: 2px;
   }
   .bcn-memo__assumption-kind {
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-memo__assumption-kind[data-kind='question'] {
     color: var(--color-commitment);
@@ -451,15 +451,15 @@ function healthSummary(h: MemoHealth): string {
     gap: var(--spacing-300);
     margin: 0;
     padding-bottom: var(--spacing-250);
-    border-bottom: 1px solid var(--color-border);
-    font-size: var(--type-size-500);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    border-bottom: 1px solid var(--color-border-default);
+    font-size: var(--font-size-500);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     line-height: 1.3;
   }
   .bcn-memo__lede {
     margin: calc(-1 * var(--spacing-200)) 0 0;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   .bcn-memo__study {
@@ -473,18 +473,18 @@ function healthSummary(h: MemoHealth): string {
     flex-wrap: wrap;
     gap: var(--spacing-250);
     margin: var(--spacing-300) 0 0;
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     line-height: 1.35;
   }
 
   /* ── COA reference tag (mono, commitment hue) — mirrors BcnRolesMatrix's tag ── */
   .bcn-memo__coa {
     display: inline-block;
-    font-family: var(--font-mono);
+    font-family: var(--typography-font-family-mono);
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     color: var(--color-commitment);
     background: color-mix(in srgb, var(--color-commitment) 12%, white);
     padding: 0 6px;
@@ -502,20 +502,20 @@ function healthSummary(h: MemoHealth): string {
     flex-wrap: wrap;
     gap: var(--spacing-200);
     margin: 0;
-    font-size: var(--type-size-300);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-300);
+    color: var(--color-content-default-secondary);
   }
   .bcn-memo__ml {
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-memo__sep {
-    color: var(--color-border-strong);
+    color: var(--color-border-default-strong);
   }
   .bcn-memo__rollup {
     margin: 0;
-    font-size: var(--type-size-300);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-300);
+    color: var(--color-content-default-tertiary);
   }
 
   /* ── Status dot + word ── */
@@ -529,14 +529,14 @@ function healthSummary(h: MemoHealth): string {
     width: 9px;
     height: 9px;
     border-radius: var(--radius-full);
-    background: var(--_tone, var(--color-text-muted));
+    background: var(--_tone, var(--bcn-content-muted));
     flex: none;
   }
-  .bcn-memo__dot[data-tone='on-track'] { --_tone: var(--color-secondary); }
+  .bcn-memo__dot[data-tone='on-track'] { --_tone: var(--color-background-brand-muted); }
   .bcn-memo__dot[data-tone='complete'] { --_tone: var(--bcn-status-completed); }
   .bcn-memo__dot[data-tone='at-risk'] { --_tone: var(--bcn-status-in-progress); }
   .bcn-memo__dot[data-tone='blocked'] { --_tone: var(--bcn-status-overdue); }
-  .bcn-memo__dot[data-tone='not-started'] { --_tone: var(--color-text-muted); }
+  .bcn-memo__dot[data-tone='not-started'] { --_tone: var(--bcn-content-muted); }
 
   /* ── Task list — chronological, span-anchored ── */
   .bcn-memo__tasks {
@@ -551,14 +551,14 @@ function healthSummary(h: MemoHealth): string {
     grid-template-columns: max-content 1fr;
     gap: var(--spacing-100) var(--spacing-400);
     padding: var(--spacing-250) 0;
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-default-subtle);
   }
   .bcn-memo__task:first-child {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .bcn-memo__task-span {
-    font-size: var(--type-size-300);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-300);
+    color: var(--color-content-default-secondary);
     white-space: nowrap;
   }
   .bcn-memo__task-body {
@@ -567,61 +567,61 @@ function healthSummary(h: MemoHealth): string {
     gap: 2px;
   }
   .bcn-memo__task-name {
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-memo__task-sub {
     display: inline-flex;
     align-items: center;
     flex-wrap: wrap;
     gap: var(--spacing-150);
-    font-size: var(--type-size-300);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-300);
+    color: var(--color-content-default-tertiary);
   }
 
   /* ── Glance table ── */
   .bcn-memo__tablewrap {
     overflow-x: auto;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
   }
   .bcn-memo__table {
     border-collapse: collapse;
     width: 100%;
     min-width: 44rem;
-    font-size: var(--type-size-300);
+    font-size: var(--font-size-300);
   }
   .bcn-memo__table thead th {
     position: sticky;
     top: 0;
     text-align: left;
     padding: var(--spacing-250) var(--spacing-300);
-    background: var(--color-surface-sunken);
-    border-bottom: 1px solid var(--color-border);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-secondary);
+    background: var(--color-background-elevation-sunken);
+    border-bottom: 1px solid var(--color-border-default);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-secondary);
     white-space: nowrap;
   }
   .bcn-memo__table td,
   .bcn-memo__table tbody th {
     text-align: left;
     padding: var(--spacing-250) var(--spacing-300);
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-default-subtle);
     vertical-align: top;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .bcn-memo__table tbody tr:last-child td,
   .bcn-memo__table tbody tr:last-child th {
     border-bottom: 0;
   }
   .bcn-memo__cell-name {
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default);
   }
   .bcn-memo__num {
     text-align: right;
   }
   .bcn-memo__mono {
-    font-family: var(--font-mono);
+    font-family: var(--typography-font-family-mono);
     font-variant-numeric: tabular-nums;
   }
   /* Month spans and budgets never wrap — the tablewrap scrolls instead. */
diff --git a/src/components/bcn/BcnProjectDataPanel.astro b/src/components/bcn/BcnProjectDataPanel.astro
index 6f3c0f91..9408c9e7 100644
--- a/src/components/bcn/BcnProjectDataPanel.astro
+++ b/src/components/bcn/BcnProjectDataPanel.astro
@@ -77,16 +77,16 @@ const LAYERS =
 <esa-side-dialog
   id="pd-panel"
   position="right"
-  style="--_width: min(480px, 94vw); --z-modal: 1300; --z-modal-backdrop: 1250; --backdrop-filter: blur(4px);"
+  style="--_width: min(480px, 94vw); --z-modal: 1300; --z-modal-backdrop: 1250; --side-dialog-backdrop-filter: blur(4px);"
 >
   <!-- Panel FOOTER (round 8): the list screens' Add action — a normal primary
        button, right-aligned. The controller re-slots this span off ('void') for
        keys with no Add (Project Info, Spatial) so the lego's footer bar hides. -->
   <span slot="footer" id="pd-addfoot" class="bcn-pdp__addfoot">
-    <span data-add-for="species" data-cd-open="species-add" hidden><EsaButton color="primary">Add Species</EsaButton></span>
-    <span data-add-for="milestones" data-cd-open="milestone" hidden><EsaButton color="primary">Add Milestone</EsaButton></span>
-    <span data-add-for="construction-activities" data-cd-open="activity" hidden><EsaButton color="primary">Add Activity</EsaButton></span>
-    <span data-add-for="seasons" data-cd-open="season" hidden><EsaButton color="primary">Add Season</EsaButton></span>
+    <span data-add-for="species" data-cd-open="species-add" hidden><EsaButton variant="primary">Add Species</EsaButton></span>
+    <span data-add-for="milestones" data-cd-open="milestone" hidden><EsaButton variant="primary">Add Milestone</EsaButton></span>
+    <span data-add-for="construction-activities" data-cd-open="activity" hidden><EsaButton variant="primary">Add Activity</EsaButton></span>
+    <span data-add-for="seasons" data-cd-open="season" hidden><EsaButton variant="primary">Add Season</EsaButton></span>
   </span>
 
   <!-- Species — slim cards (common · scientific · code) + live search -->
@@ -124,7 +124,7 @@ const LAYERS =
                 <span class="bcn-pdp__card-name">{m.name}</span>
                 <span class="bcn-pdp__card-sub">{m.description}</span>
               </span>
-              <span data-cd-edit="milestone" class="bcn-pdp__card-action"><EsaButton color="ghost" size="sm" icon="pencil" iconOnly aria-label={`Edit ${m.name}`} /></span>
+              <span data-cd-edit="milestone" class="bcn-pdp__card-action"><EsaButton variant="ghost" size="sm" icon="pencil" iconOnly aria-label={`Edit ${m.name}`} /></span>
             </li>
           );
         })
@@ -143,7 +143,7 @@ const LAYERS =
               <span class="bcn-pdp__card-name">{a.name}</span>
               <span class="bcn-pdp__card-sub">{a.description}</span>
             </span>
-            <span data-cd-edit="activity" class="bcn-pdp__card-action"><EsaButton color="ghost" size="sm" icon="pencil" iconOnly aria-label={`Edit ${a.name}`} /></span>
+            <span data-cd-edit="activity" class="bcn-pdp__card-action"><EsaButton variant="ghost" size="sm" icon="pencil" iconOnly aria-label={`Edit ${a.name}`} /></span>
           </li>
         ))
       }
@@ -177,7 +177,7 @@ const LAYERS =
                   <!-- Tracked badge removed (round 7); Tracked stays a stored
                        field, surfaced in the edit form rather than card chrome. -->
                   <Fragment slot="actions">
-                    <span data-cd-edit="season"><EsaButton color="ghost" size="sm" icon="pencil" iconOnly aria-label={`Edit ${s.name}`} /></span>
+                    <span data-cd-edit="season"><EsaButton variant="ghost" size="sm" icon="pencil" iconOnly aria-label={`Edit ${s.name}`} /></span>
                   </Fragment>
                 </BcnSeasonCard>
               </div>
@@ -241,13 +241,13 @@ const LAYERS =
             ))
           }
         </ul>
-        <span><EsaButton color="ghost" appearance="outline" size="sm">Upload files</EsaButton></span>
+        <span><EsaButton variant="ghost" appearance="outline" size="sm">Upload files</EsaButton></span>
       </div>
 
       <!-- Delete-project lives in the danger zone below, not this footer. -->
       <div class="bcn-pdp__formfoot">
-        <span id="pd-info-cancel"><EsaButton color="ghost">Cancel</EsaButton></span>
-        <EsaButton color="primary">Save</EsaButton>
+        <span id="pd-info-cancel"><EsaButton variant="ghost">Cancel</EsaButton></span>
+        <EsaButton variant="primary">Save</EsaButton>
       </div>
     </div>
 
@@ -256,7 +256,7 @@ const LAYERS =
         title="Delete this project"
         description="Removes the project, its components, and all tracked compliance data from Beacon."
       >
-        <span id="pd-delete-project"><EsaButton color="danger" appearance="soft">Delete project</EsaButton></span>
+        <span id="pd-delete-project"><EsaButton variant="danger" appearance="soft">Delete project</EsaButton></span>
       </BcnDangerZone>
     </div>
   </section>
@@ -302,11 +302,11 @@ const LAYERS =
   <!-- THE STANDARD EDIT-FORM FOOTER (round 8): Delete left · Cancel/Save right,
        medium. Delete renders only in edit mode; species-add swaps Save → Add. -->
   <span slot="footer" class="bcn-pdp__cfoot">
-    <span id="cd-delete" data-cd-close hidden><EsaButton color="danger" appearance="soft">Delete</EsaButton></span>
+    <span id="cd-delete" data-cd-close hidden><EsaButton variant="danger" appearance="soft">Delete</EsaButton></span>
     <span class="bcn-pdp__cfoot-right">
-      <span data-cd-close><EsaButton color="ghost">Cancel</EsaButton></span>
-      <span id="cd-save" data-cd-close><EsaButton color="primary">Save</EsaButton></span>
-      <span id="cd-add" data-cd-close hidden><EsaButton color="primary">Add</EsaButton></span>
+      <span data-cd-close><EsaButton variant="ghost">Cancel</EsaButton></span>
+      <span id="cd-save" data-cd-close><EsaButton variant="primary">Save</EsaButton></span>
+      <span id="cd-add" data-cd-close hidden><EsaButton variant="primary">Add</EsaButton></span>
     </span>
   </span>
 </esa-side-dialog>
@@ -526,8 +526,8 @@ const LAYERS =
     align-items: center;
     gap: var(--spacing-300);
     padding: var(--spacing-200) var(--spacing-250);
-    background: var(--color-surface-sunken);
-    border: 1px solid var(--color-border); /* mid gray (round 7) — light read as none */
+    background: var(--color-background-elevation-sunken);
+    border: 1px solid var(--color-border-default); /* mid gray (round 7) — light read as none */
     border-radius: var(--radius-200);
   }
   .bcn-pdp__card[hidden] {
@@ -541,14 +541,14 @@ const LAYERS =
     flex: 1;
   }
   .bcn-pdp__card-name {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     line-height: var(--line-height-tight);
   }
   .bcn-pdp__card-sub {
     font-size: 0.8125rem; /* 13px — the meta floor */
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     line-height: var(--line-height-tight);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -559,7 +559,7 @@ const LAYERS =
   }
   .bcn-pdp__card-icon {
     display: inline-flex;
-    color: var(--color-text-muted);
+    color: var(--bcn-content-muted);
     flex-shrink: 0;
   }
   .bcn-pdp__card-action {
@@ -570,12 +570,12 @@ const LAYERS =
   .bcn-pdp__code {
     flex-shrink: 0;
     padding: 1px var(--spacing-200);
-    font-family: var(--font-mono);
+    font-family: var(--typography-font-family-mono);
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border-light);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-secondary);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default-subtle);
     border-radius: var(--radius-100);
   }
 
@@ -589,20 +589,20 @@ const LAYERS =
     flex-shrink: 0;
     width: 3.875rem;
     padding: var(--spacing-100) 0;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border-light);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default-subtle);
     border-radius: var(--radius-100);
   }
   .bcn-pdp__date-md {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     line-height: var(--line-height-tight);
     white-space: nowrap;
   }
   .bcn-pdp__date-year {
     font-size: 0.8125rem; /* 13px — the meta floor */
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     line-height: var(--line-height-tight);
   }
 
@@ -617,9 +617,9 @@ const LAYERS =
   }
   .bcn-pdp__sgroup-title {
     margin: 0;
-    font-size: var(--type-size-200);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-200);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .bcn-pdp__scards {
     display: flex;
@@ -634,15 +634,15 @@ const LAYERS =
     gap: var(--spacing-100);
     align-self: flex-start;
     padding-top: var(--spacing-300);
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
     width: 100%;
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-background-brand);
     text-decoration: none;
   }
   .bcn-pdp__zone-link:hover {
-    color: var(--color-primary-hover);
+    color: var(--color-background-brand-hover);
   }
 
   /* ── Forms (Project Info + the child drawer) ── */
@@ -672,8 +672,8 @@ const LAYERS =
   }
   .bcn-pdp__hint {
     margin: 0;
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
   }
   .bcn-pdp__files {
     display: flex;
@@ -681,9 +681,9 @@ const LAYERS =
     gap: var(--spacing-200);
   }
   .bcn-pdp__files-label {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-secondary);
   }
   .bcn-pdp__file-list {
     list-style: none;
@@ -697,25 +697,25 @@ const LAYERS =
     align-items: center;
     gap: var(--spacing-200);
     padding: var(--spacing-200) 0;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .bcn-pdp__file + .bcn-pdp__file {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .bcn-pdp__file-name {
-    font-size: var(--type-size-200);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-200);
+    color: var(--color-content-default);
   }
   .bcn-pdp__formfoot {
     display: flex;
     justify-content: flex-end;
     gap: var(--spacing-300);
     padding-top: var(--spacing-300);
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .bcn-pdp__danger {
     padding-top: var(--spacing-500);
     margin-top: var(--spacing-300);
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
 </style>
diff --git a/src/components/bcn/BcnProjectFacts.astro b/src/components/bcn/BcnProjectFacts.astro
index 2a2630ba..8a751d1b 100644
--- a/src/components/bcn/BcnProjectFacts.astro
+++ b/src/components/bcn/BcnProjectFacts.astro
@@ -64,9 +64,9 @@ const { facts, description, files = [], title = 'Project details' } = Astro.prop
 <style>
   .bcn-pf__desc {
     margin: 0 0 var(--spacing-300);
-    font-size: var(--type-size-150);
+    font-size: var(--font-size-150);
     line-height: var(--line-height-normal);
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .bcn-pf {
     margin: 0;
@@ -80,17 +80,17 @@ const { facts, description, files = [], title = 'Project details' } = Astro.prop
     padding: var(--spacing-250) 0;
   }
   .bcn-pf__fact + .bcn-pf__fact {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .bcn-pf__label {
-    font-size: var(--type-size-150);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-pf__value {
     margin: 0;
-    font-size: var(--type-size-200);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-200);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
 
   /* Project.Files — quiet attachment rows, divided from the facts. */
@@ -98,7 +98,7 @@ const { facts, description, files = [], title = 'Project details' } = Astro.prop
     list-style: none;
     margin: 0;
     padding: var(--spacing-250) 0 0;
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
     display: flex;
     flex-direction: column;
     gap: var(--spacing-200);
@@ -107,12 +107,12 @@ const { facts, description, files = [], title = 'Project details' } = Astro.prop
     display: flex;
     align-items: center;
     gap: var(--spacing-200);
-    color: var(--color-text-muted);
+    color: var(--bcn-content-muted);
     min-width: 0;
   }
   .bcn-pf__file-name {
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/src/components/bcn/BcnProjectHeader.astro b/src/components/bcn/BcnProjectHeader.astro
index 60e14710..94b65ce6 100644
--- a/src/components/bcn/BcnProjectHeader.astro
+++ b/src/components/bcn/BcnProjectHeader.astro
@@ -64,8 +64,8 @@ const PENCIL =
   /* Full-bleed header band: white surface, hairline base to part it from the gray
      canvas below. No outer radius/border — it runs edge-to-edge, snug to the topbar. */
   .bcn-phome {
-    background: var(--color-surface);
-    border-bottom: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border-bottom: 1px solid var(--color-border-default);
   }
 
   /* Cover — the aerial hero, fixed band height, object-fit cover (Andy: keep height).
@@ -75,7 +75,7 @@ const PENCIL =
     position: relative;
     height: 132px;
     overflow: hidden;
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
   .bcn-phome__hero {
     display: block;
@@ -104,10 +104,10 @@ const PENCIL =
     padding: var(--spacing-150) var(--spacing-250);
     font-family: inherit;
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
-    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
-    border: 1px solid var(--color-border);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
+    background: color-mix(in srgb, var(--color-background-elevation-raised) 92%, transparent);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-100);
     cursor: pointer;
     opacity: 0;
@@ -139,10 +139,10 @@ const PENCIL =
     height: 92px;
     margin-top: -46px;
     border-radius: var(--radius-full);
-    background: var(--color-surface);
-    border: 3px solid var(--color-surface);
+    background: var(--color-background-elevation-raised);
+    border: 3px solid var(--color-background-elevation-raised);
     object-fit: contain;
-    box-shadow: var(--shadow-100, 0 2px 12px 0 rgba(0, 0, 0, 0.08));
+    box-shadow: var(--elevation-2, 0 2px 12px 0 rgba(0, 0, 0, 0.08));
   }
 
   .bcn-phome__id {
@@ -162,17 +162,17 @@ const PENCIL =
   }
   .bcn-phome__name {
     margin: 0;
-    font-family: var(--font-decorative, var(--font-display, var(--font-sans)));
-    font-weight: var(--font-weight-bold);
-    font-size: var(--type-size-600);
+    font-family: var(--font-decorative, var(--typography-font-family-display, var(--typography-font-family-sans)));
+    font-weight: var(--typography-font-weight-bold);
+    font-size: var(--font-size-600);
     line-height: var(--line-height-tight);
     letter-spacing: var(--letter-spacing-tight);
-    color: var(--bcn-gray-1000, var(--color-text-primary));
+    color: var(--bcn-gray-1000, var(--color-content-default));
   }
   .bcn-phome__eyebrow {
     margin: 0 0 var(--spacing-200);
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-tertiary);
   }
 </style>
diff --git a/src/components/bcn/BcnProjectTimeline.astro b/src/components/bcn/BcnProjectTimeline.astro
index faeb0676..5b3c8c34 100644
--- a/src/components/bcn/BcnProjectTimeline.astro
+++ b/src/components/bcn/BcnProjectTimeline.astro
@@ -499,13 +499,13 @@ const payload = { today: TODAY, actions, milestones, seasons };
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-100);
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-background-brand);
     text-decoration: none;
     white-space: nowrap;
   }
-  .bcn-tl__full:hover { color: var(--color-primary-hover); }
+  .bcn-tl__full:hover { color: var(--color-background-brand-hover); }
 
   .bcn-tl {
     position: relative;
@@ -524,8 +524,8 @@ const payload = { today: TODAY, actions, milestones, seasons };
   .bcn-tl__row--more { margin-top: calc(var(--spacing-250) * -1); }
   .bcn-tl__lane-label {
     font-size: 0.8125rem; /* 13px — meta floor */
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-secondary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-secondary);
   }
 
   .bcn-tl__track {
@@ -542,7 +542,7 @@ const payload = { today: TODAY, actions, milestones, seasons };
     right: 0;
     top: 50%;
     height: 1px;
-    background: var(--color-border);
+    background: var(--color-border-default);
   }
 
   .bcn-tl__today {
@@ -559,7 +559,7 @@ const payload = { today: TODAY, actions, milestones, seasons };
     top: -2px;
     left: 4px;
     font-size: 0.75rem;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     color: var(--color-orange-400, #f9a134);
   }
 
@@ -568,18 +568,18 @@ const payload = { today: TODAY, actions, milestones, seasons };
     padding: 0;
     font-family: inherit;
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-background-brand);
     background: none;
     border: 0;
     cursor: pointer;
   }
-  .bcn-tl__showall:hover { color: var(--color-primary-hover); }
+  .bcn-tl__showall:hover { color: var(--color-background-brand-hover); }
 
   .bcn-tl__empty {
     margin: 0;
-    font-size: var(--type-size-150);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-tertiary);
   }
 
   /* ── JS-INJECTED NODES ──
@@ -591,7 +591,7 @@ const payload = { today: TODAY, actions, milestones, seasons };
     top: 2px;
     transform: translateX(-50%);
     font-size: 0.75rem;
-    color: var(--color-text-muted);
+    color: var(--bcn-content-muted);
     white-space: nowrap;
   }
 
@@ -613,10 +613,10 @@ const payload = { today: TODAY, actions, milestones, seasons };
   }
   .bcn-tl :global(.bcn-tl__item:hover),
   .bcn-tl :global(.bcn-tl__item[data-pinned]) {
-    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    background: color-mix(in srgb, var(--color-background-brand) 10%, transparent);
   }
   .bcn-tl :global(.bcn-tl__item:focus-visible) {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-background-brand);
     outline-offset: -2px;
   }
 
@@ -625,16 +625,16 @@ const payload = { today: TODAY, actions, milestones, seasons };
     width: 11px;
     height: 11px;
     border-radius: var(--radius-full);
-    background: var(--color-border-strong);
-    border: 2px solid var(--color-surface);
-    box-shadow: 0 0 0 1px var(--color-border);
+    background: var(--color-border-default-strong);
+    border: 2px solid var(--color-background-elevation-raised);
+    box-shadow: 0 0 0 1px var(--color-border-default);
   }
   .bcn-tl :global([data-urgency='overdue'] .bcn-tl__dot) {
-    background: var(--color-danger);
+    background: var(--color-background-utility-danger);
     box-shadow: none;
   }
   .bcn-tl :global([data-urgency='due-soon'] .bcn-tl__dot) {
-    background: var(--color-warning);
+    background: var(--color-background-utility-warning);
     box-shadow: none;
   }
 
@@ -644,7 +644,7 @@ const payload = { today: TODAY, actions, milestones, seasons };
     display: block;
     width: 11px;
     height: 11px;
-    background: var(--color-info);
+    background: var(--color-background-utility-info);
     transform: rotate(45deg);
   }
 
@@ -656,8 +656,8 @@ const payload = { today: TODAY, actions, milestones, seasons };
     align-items: center;
     gap: var(--spacing-200);
     padding: 0 var(--spacing-150);
-    background: color-mix(in srgb, var(--color-secondary) 16%, var(--color-surface));
-    border: 1px solid color-mix(in srgb, var(--color-secondary) 40%, var(--color-surface));
+    background: color-mix(in srgb, var(--color-background-brand-muted) 16%, var(--color-background-elevation-raised));
+    border: 1px solid color-mix(in srgb, var(--color-background-brand-muted) 40%, var(--color-background-elevation-raised));
     border-radius: var(--radius-100);
     overflow: hidden;
     cursor: pointer;
@@ -665,12 +665,12 @@ const payload = { today: TODAY, actions, milestones, seasons };
   }
   .bcn-tl :global(.bcn-tl__bar:hover),
   .bcn-tl :global(.bcn-tl__bar[data-pinned]) {
-    background: color-mix(in srgb, var(--color-secondary) 26%, var(--color-surface));
+    background: color-mix(in srgb, var(--color-background-brand-muted) 26%, var(--color-background-elevation-raised));
   }
   .bcn-tl :global(.bcn-tl__bar-label) {
     font-size: 0.75rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--bcn-teal-800, var(--color-secondary-hover));
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--bcn-teal-800, var(--color-background-brand-muted-hover));
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -678,7 +678,7 @@ const payload = { today: TODAY, actions, milestones, seasons };
   .bcn-tl :global(.bcn-tl__bar-dates) {
     margin-left: auto;
     font-size: 0.75rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
 
@@ -694,10 +694,10 @@ const payload = { today: TODAY, actions, milestones, seasons };
     flex-direction: column;
     gap: var(--spacing-250);
     padding: var(--spacing-350, var(--spacing-300)) var(--spacing-400);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
-    box-shadow: var(--shadow-300, 0 8px 24px -6px rgba(0, 0, 0, 0.18));
+    box-shadow: var(--elevation-4, 0 8px 24px -6px rgba(0, 0, 0, 0.18));
   }
   :global(.bcn-tl__pop[hidden]) { display: none; }
 
@@ -708,15 +708,15 @@ const payload = { today: TODAY, actions, milestones, seasons };
   }
   :global(.bcn-tl__pop-type) {
     font-size: 0.75rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
     text-transform: capitalize;
   }
   :global(.bcn-tl__pop-title) {
     margin: 0;
-    font-size: var(--type-size-200);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-200);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     line-height: var(--line-height-tight);
   }
   :global(.bcn-tl__pop-facts) {
@@ -732,16 +732,16 @@ const payload = { today: TODAY, actions, milestones, seasons };
   }
   :global(.bcn-tl__pop-facts dt) {
     font-size: 0.8125rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   :global(.bcn-tl__pop-facts dd) {
     margin: 0;
     font-size: 0.8125rem;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   :global(.bcn-tl__pop-late) {
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-danger);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-background-utility-danger);
   }
   :global(.bcn-tl__pop-species) {
     display: flex;
@@ -751,24 +751,24 @@ const payload = { today: TODAY, actions, milestones, seasons };
   :global(.bcn-tl__pop-chip) {
     padding: 1px var(--spacing-200);
     font-size: 0.75rem;
-    color: var(--color-text-secondary);
-    background: var(--color-surface-sunken);
-    border: 1px solid var(--color-border-light);
+    color: var(--color-content-default-secondary);
+    background: var(--color-background-elevation-sunken);
+    border: 1px solid var(--color-border-default-subtle);
     border-radius: var(--radius-100);
   }
   :global(.bcn-tl__pop-link) {
     align-self: flex-start;
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-background-brand);
     text-decoration: none;
   }
   /* The popover's commitment badge is bcn-commitment-badge's markup, injected at
      runtime — restate it here since the badge component's scoped CSS can't reach it. */
   :global(.bcn-tl__pop .bcn-cbadge) {
     display: inline-block;
-    font-family: var(--font-mono);
-    font-weight: var(--font-weight-semibold);
+    font-family: var(--typography-font-family-mono);
+    font-weight: var(--typography-font-weight-semibold);
     color: var(--color-commitment);
     background: color-mix(in srgb, var(--color-commitment) 12%, white);
     border-radius: var(--radius-100);
diff --git a/src/components/bcn/BcnPrototypeIndex.astro b/src/components/bcn/BcnPrototypeIndex.astro
index 60268f15..f67a9063 100644
--- a/src/components/bcn/BcnPrototypeIndex.astro
+++ b/src/components/bcn/BcnPrototypeIndex.astro
@@ -27,7 +27,7 @@
 // the catalog in the bundle. Every CONTROL above the table IS a lego and the bar shell is
 // bcn-filter-bar. bcn-prototype-index is the reusable home.
 import BcnFilterBar from './BcnFilterBar.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import EsaEmptyState from '@esa/ecology/esa-empty-state.astro';
 import FilterClearButton from '@esa/ecology/esa-filter-clear-button.astro';
 import {
@@ -83,7 +83,7 @@ const facets = [
 
 <section class="bcn-pi" aria-labelledby="bcn-pi-title" data-prototype-index>
   <div class="bcn-pi__head">
-    <h2 id="bcn-pi-title" class="bcn-pi__title type-section-title">Prototypes</h2>
+    <h2 id="bcn-pi-title" class="bcn-pi__title typography-heading-md">Prototypes</h2>
     <p class="bcn-pi__count">
       <span data-pi-count>{efforts.length}</span> of {efforts.length} efforts · {pageCount} pages
     </p>
@@ -97,7 +97,7 @@ const facets = [
       aria-label="Search prototypes"
       size="md"></esa-text-field>
     <span slot="search" data-pi-search-clear hidden>
-      <EsaIconButton icon="x" label="Clear search" size="sm" />
+      <EsaIconButton variant="chrome" iconOnly icon="x" label="Clear search" size="sm" />
     </span>
 
     {
@@ -230,13 +230,13 @@ const facets = [
   }
   .bcn-pi__title {
     margin: 0;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   /* A genuine tally, so 14px tertiary is honest meta. */
   .bcn-pi__count {
     margin: 0;
     font-size: 0.875rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     font-variant-numeric: tabular-nums;
   }
 
@@ -244,15 +244,15 @@ const facets = [
      Re-point its PUBLIC focus properties to the house link colour, scoped to this
      surface so nothing leaks. (Same fix bcn-kb-hero carries.) */
   .bcn-pi :global([data-pi-search]) {
-    --form-border-color-focus: var(--color-text-link);
-    --focus-ring-color: var(--color-text-link);
+    --form-border-color-focus: var(--color-content-link);
+    --focus-ring-color: var(--color-content-link);
   }
 
   /* ── Table skin. Rows divide with hairlines; no outer box fights the filter card. ── */
   .bcn-pi__table {
     width: 100%;
     border-collapse: collapse;
-    font-size: var(--type-size-200);
+    font-size: var(--font-size-200);
     /* FIXED, not auto: with auto layout the browser re-measures every column from the
        rows currently VISIBLE, so expanding an effort — which introduces long page titles
        and the first non-empty Status cells — resized the whole table under the cursor.
@@ -268,9 +268,9 @@ const facets = [
     padding: var(--spacing-250) var(--spacing-300);
     text-align: left;
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-secondary);
-    border-bottom: 1px solid var(--color-border);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-secondary);
+    border-bottom: 1px solid var(--color-border-default);
     white-space: nowrap;
   }
   .bcn-pi__table td,
@@ -278,7 +278,7 @@ const facets = [
     padding: var(--spacing-250) var(--spacing-300);
     text-align: left;
     vertical-align: middle;
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-default-subtle);
   }
   .bcn-pi__row[hidden] {
     display: none;
@@ -287,10 +287,10 @@ const facets = [
   /* ── Effort row — the line item. Its hairline is full-strength so each effort reads
         as the start of a block; its pages divide with the lighter rule. ── */
   .bcn-pi__row--effort th {
-    border-bottom-color: var(--color-border);
+    border-bottom-color: var(--color-border-default);
   }
   .bcn-pi__row--effort:hover {
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
   .bcn-pi__cell-effort {
     padding: 0 !important;
@@ -308,22 +308,22 @@ const facets = [
     font: inherit;
     text-align: left;
     cursor: pointer;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-pi__toggle:focus-visible {
-    outline: 2px solid var(--color-text-link);
+    outline: 2px solid var(--color-content-link);
     outline-offset: -2px;
   }
   .bcn-pi__chevron {
     flex: none;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     transition: transform 140ms ease;
   }
   .bcn-pi__toggle[aria-expanded='true'] .bcn-pi__chevron {
     transform: rotate(90deg);
   }
   .bcn-pi__effort-title {
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.35;
   }
   /* Search hits — highlighter-yellow with dark text, the same #fde047 the omni-search
@@ -331,15 +331,15 @@ const facets = [
   .bcn-pi__toggle :global(mark),
   .bcn-pi__link :global(mark) {
     background: #fde047;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     border-radius: 2px;
     padding: 0 1px;
   }
   /* A genuine count, so 13px tertiary is honest meta. */
   .bcn-pi__pages {
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-regular);
-    color: var(--color-text-tertiary);
+    font-weight: var(--typography-font-weight-regular);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
 
@@ -348,10 +348,10 @@ const facets = [
     padding-left: calc(var(--spacing-300) + var(--spacing-600)) !important;
   }
   .bcn-pi__row--page:hover {
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
   .bcn-pi__link {
-    color: var(--color-text-link);
+    color: var(--color-content-link);
     text-decoration: none;
     line-height: 1.35;
   }
@@ -361,12 +361,12 @@ const facets = [
   }
 
   .bcn-pi__cell-meta {
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     white-space: nowrap;
   }
   .bcn-pi__cell-date {
     white-space: nowrap;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     font-variant-numeric: tabular-nums;
   }
 
@@ -376,7 +376,7 @@ const facets = [
     align-items: center;
     gap: var(--spacing-150);
     font-size: 0.875rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     white-space: nowrap;
   }
   .bcn-pi__status-dot {
@@ -384,10 +384,10 @@ const facets = [
     block-size: 8px;
     border-radius: 50%;
     flex: none;
-    background: var(--color-text-muted);
+    background: var(--bcn-content-muted);
   }
   .bcn-pi__status[data-status='live'] .bcn-pi__status-dot {
-    background: var(--color-success);
+    background: var(--color-background-utility-success);
   }
   .bcn-pi__status[data-status='in-progress'] .bcn-pi__status-dot {
     background: var(--bcn-flag-on-color);
diff --git a/src/components/bcn/BcnReadiness.astro b/src/components/bcn/BcnReadiness.astro
index 6a6d66a4..4fc843aa 100644
--- a/src/components/bcn/BcnReadiness.astro
+++ b/src/components/bcn/BcnReadiness.astro
@@ -471,8 +471,8 @@ const hasCurrent = periods.some((p) => p.current);
     display: flex;
     flex-direction: column;
     gap: var(--spacing-800);
-    color: var(--color-text-primary);
-    font-size: var(--type-size-200);
+    color: var(--color-content-default);
+    font-size: var(--font-size-200);
     line-height: 1.5;
   }
 
@@ -484,16 +484,16 @@ const hasCurrent = periods.some((p) => p.current);
   .bcn-readiness__h2 {
     margin: 0;
     padding-bottom: var(--spacing-200);
-    border-bottom: 1px solid var(--color-border);
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    border-bottom: 1px solid var(--color-border-default);
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     line-height: 1.3;
   }
 
   /* ── Shared: mono, status dot + word, COA tag, task-id tag ── */
   .bcn-readiness__mono {
-    font-family: var(--font-mono);
+    font-family: var(--typography-font-family-mono);
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
   }
@@ -502,21 +502,21 @@ const hasCurrent = periods.some((p) => p.current);
     align-items: center;
     gap: var(--spacing-150);
     white-space: nowrap;
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
   }
   .bcn-readiness__dot {
     width: 9px;
     height: 9px;
     border-radius: var(--radius-full);
-    background: var(--_tone, var(--color-text-muted));
+    background: var(--_tone, var(--bcn-content-muted));
     flex: none;
   }
-  .bcn-readiness__dot[data-tone='on-track'] { --_tone: var(--color-secondary); }
+  .bcn-readiness__dot[data-tone='on-track'] { --_tone: var(--color-background-brand-muted); }
   .bcn-readiness__dot[data-tone='complete'] { --_tone: var(--bcn-status-completed); }
   .bcn-readiness__dot[data-tone='at-risk'] { --_tone: var(--bcn-status-in-progress); }
   .bcn-readiness__dot[data-tone='blocked'] { --_tone: var(--bcn-status-overdue); }
-  .bcn-readiness__dot[data-tone='not-started'] { --_tone: var(--color-text-muted); }
+  .bcn-readiness__dot[data-tone='not-started'] { --_tone: var(--bcn-content-muted); }
 
   .bcn-readiness__tid {
     justify-self: start;
@@ -530,9 +530,9 @@ const hasCurrent = periods.some((p) => p.current);
   .bcn-readiness__coa,
   .bcn-readiness__tid {
     display: inline-block;
-    font-family: var(--font-mono);
+    font-family: var(--typography-font-family-mono);
     font-size: 0.6875rem; /* adherence-allow: font-too-small — matches the gantt's Andy-sanctioned 11px ID badges */
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     color: var(--color-commitment);
     background: color-mix(in srgb, var(--color-commitment) 12%, white);
     padding: 1px 5px;
@@ -553,22 +553,22 @@ const hasCurrent = periods.some((p) => p.current);
     right: 0;
     bottom: 30px;
     height: 2px;
-    background: var(--color-border-strong);
+    background: var(--color-border-default-strong);
   }
   .bcn-readiness__tl-tick {
     position: absolute;
     bottom: 26px;
     width: 1px;
     height: 10px;
-    background: var(--color-border);
+    background: var(--color-border-default);
   }
   .bcn-readiness__tl-yr {
     position: absolute;
     bottom: 6px;
     transform: translateX(-50%);
-    font-family: var(--font-mono);
-    font-size: var(--type-size-100);
-    color: var(--color-text-tertiary);
+    font-family: var(--typography-font-family-mono);
+    font-size: var(--font-size-100);
+    color: var(--color-content-default-tertiary);
   }
 
   /* Phase band: sits on the axis, ABOVE the today line; label = popover trigger. */
@@ -580,14 +580,14 @@ const hasCurrent = periods.some((p) => p.current);
     height: 22px;
     z-index: 2;
     padding: 0 var(--spacing-150);
-    border: 1px solid color-mix(in srgb, var(--color-secondary) 45%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-background-brand-muted) 45%, transparent);
     border-radius: var(--radius-100);
-    background: color-mix(in srgb, var(--color-secondary) 14%, var(--color-surface));
+    background: color-mix(in srgb, var(--color-background-brand-muted) 14%, var(--color-background-elevation-raised));
     /* no overflow clip — the popover renders inside this box */
   }
   .bcn-readiness__tl-band[data-state='past'] {
-    border-color: var(--color-border);
-    background: var(--color-surface-sunken);
+    border-color: var(--color-border-default);
+    background: var(--color-background-elevation-sunken);
   }
   .bcn-readiness__tl-band-btn {
     background: none;
@@ -596,9 +596,9 @@ const hasCurrent = periods.some((p) => p.current);
     cursor: pointer;
   }
   .bcn-readiness__tl-band-lbl {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: color-mix(in srgb, var(--color-secondary) 65%, var(--color-text-primary));
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: color-mix(in srgb, var(--color-background-brand-muted) 65%, var(--color-content-default));
     white-space: nowrap;
   }
 
@@ -626,18 +626,18 @@ const hasCurrent = periods.some((p) => p.current);
     height: 10px;
     margin: 0 auto;
     border-radius: var(--radius-full);
-    background: var(--color-surface);
-    border: 3px solid var(--color-text-secondary);
+    background: var(--color-background-elevation-raised);
+    border: 3px solid var(--color-content-default-secondary);
   }
   .bcn-readiness__tl-point[data-state='past'] .bcn-readiness__tl-dot {
-    border-color: var(--color-border-strong);
+    border-color: var(--color-border-default-strong);
   }
   .bcn-readiness__tl-stem {
     display: block;
     width: 1px;
     margin: 0 auto;
     height: 18px;
-    background: var(--color-border);
+    background: var(--color-border-default);
   }
   .bcn-readiness__tl-point[data-row='1'] .bcn-readiness__tl-stem {
     height: 46px;
@@ -648,9 +648,9 @@ const hasCurrent = periods.some((p) => p.current);
     margin: 0 auto 3px;
     text-align: center;
     line-height: 1.25;
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
 
   /* Today: red indicator BEHIND the phase band, with a subtle pulsing beacon. */
@@ -659,7 +659,7 @@ const hasCurrent = periods.some((p) => p.current);
     top: 14px;
     bottom: 24px;
     width: 1px;
-    background: var(--color-danger);
+    background: var(--color-background-utility-danger);
     pointer-events: none;
     z-index: 1;
   }
@@ -670,21 +670,21 @@ const hasCurrent = periods.some((p) => p.current);
     width: 7px;
     height: 7px;
     border-radius: var(--radius-full);
-    background: var(--color-danger);
+    background: var(--color-background-utility-danger);
     animation: bcn-readiness-beacon 2.4s ease-out infinite;
   }
   @keyframes bcn-readiness-beacon {
-    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-danger) 35%, transparent); }
-    60% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--color-danger) 0%, transparent); }
-    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-danger) 0%, transparent); }
+    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-background-utility-danger) 35%, transparent); }
+    60% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--color-background-utility-danger) 0%, transparent); }
+    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-background-utility-danger) 0%, transparent); }
   }
   .bcn-readiness__tl-today-lbl {
     position: absolute;
     top: -14px;
     left: var(--spacing-200);
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-danger);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-background-utility-danger);
     white-space: nowrap;
   }
 
@@ -694,27 +694,27 @@ const hasCurrent = periods.some((p) => p.current);
     flex-direction: column;
     gap: var(--spacing-100);
     max-width: 34ch;
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
   }
   .bcn-readiness__tl-pop-name {
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
-    font-size: var(--type-size-200);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
+    font-size: var(--font-size-200);
   }
   .bcn-readiness__tl-pop-count {
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .bcn-readiness__tl-pop-cite {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     line-height: 1.4;
   }
 
   /* ── 2 · Deadline chains — filter bar matches the gantt's (white container). ── */
   .bcn-readiness__filterbar {
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
   }
   .bcn-readiness__fb-top {
     display: flex;
@@ -729,15 +729,15 @@ const hasCurrent = periods.some((p) => p.current);
     gap: var(--spacing-300);
   }
   .bcn-readiness__fb-label {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
   .bcn-readiness__fb-divider {
     width: 1px;
     align-self: stretch;
-    background: var(--color-border);
+    background: var(--color-border-default);
     margin: 0 var(--spacing-100);
   }
   .bcn-readiness__fb-clear {
@@ -751,12 +751,12 @@ const hasCurrent = periods.some((p) => p.current);
     width: 11em;
   }
   /* Size the status select's trigger down to match the sm controls beside it
-     (esa-select sm reads --form-font-size-sm). */
+     (esa-select sm reads --typography-label-xs-font-size). */
   .bcn-readiness__fb-group :global(.bcn-status-select__trigger) {
     height: 32px;
     padding: 0 var(--spacing-200);
-    font-size: var(--form-font-size-sm, 12px);
-    font-weight: var(--font-weight-regular);
+    font-size: var(--typography-label-xs-font-size, 12px);
+    font-weight: var(--typography-font-weight-regular);
   }
 
   .bcn-readiness__chains {
@@ -770,7 +770,7 @@ const hasCurrent = periods.some((p) => p.current);
     cursor: pointer;
   }
   .bcn-readiness__chainitem:hover :global(.esa-card) {
-    border-color: var(--color-border-strong);
+    border-color: var(--color-border-default-strong);
   }
   .bcn-readiness__chainitem :global(.esa-card__body) {
     padding: var(--spacing-300) var(--spacing-400);
@@ -796,9 +796,9 @@ const hasCurrent = periods.some((p) => p.current);
   }
   .bcn-readiness__study-name {
     margin: 0;
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     line-height: 1.35;
   }
   :global(.bcn-readiness__hit) {
@@ -808,8 +808,8 @@ const hasCurrent = periods.some((p) => p.current);
     padding: 0 1px;
   }
   .bcn-readiness__study-lead {
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
   }
 
   /* The three dates as first-class entities — tint follows the study's STATUS
@@ -819,11 +819,11 @@ const hasCurrent = periods.some((p) => p.current);
     grid-template-columns: repeat(3, 1fr);
     gap: var(--spacing-300);
   }
-  .bcn-readiness__dates[data-tone='on-track'] { --_hue: var(--color-secondary); }
+  .bcn-readiness__dates[data-tone='on-track'] { --_hue: var(--color-background-brand-muted); }
   .bcn-readiness__dates[data-tone='complete'] { --_hue: var(--bcn-status-completed); }
   .bcn-readiness__dates[data-tone='at-risk'] { --_hue: var(--bcn-status-in-progress); }
   .bcn-readiness__dates[data-tone='blocked'] { --_hue: var(--bcn-status-overdue); }
-  .bcn-readiness__dates[data-tone='not-started'] { --_hue: var(--color-text-muted); }
+  .bcn-readiness__dates[data-tone='not-started'] { --_hue: var(--bcn-content-muted); }
   .bcn-readiness__date {
     display: flex;
     flex-direction: row;
@@ -833,24 +833,24 @@ const hasCurrent = periods.some((p) => p.current);
     padding: var(--spacing-200) var(--spacing-250);
     border: 1px solid color-mix(in srgb, var(--_hue) 18%, transparent);
     border-radius: var(--radius-100);
-    background: color-mix(in srgb, var(--_hue) 6%, var(--color-surface));
+    background: color-mix(in srgb, var(--_hue) 6%, var(--color-background-elevation-raised));
   }
   .bcn-readiness__date[data-empty] {
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
   }
   .bcn-readiness__date-k {
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-semibold);
-    color: color-mix(in srgb, var(--_hue) 55%, var(--color-text-primary));
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-semibold);
+    color: color-mix(in srgb, var(--_hue) 55%, var(--color-content-default));
   }
   .bcn-readiness__date-v {
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-bold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-bold);
+    color: var(--color-content-default);
   }
   .bcn-readiness__date[data-empty] .bcn-readiness__date-v {
-    color: var(--color-text-muted);
-    font-weight: var(--font-weight-regular);
+    color: var(--bcn-content-muted);
+    font-weight: var(--typography-font-weight-regular);
   }
 
   /* Flags: grayscale chips — the severity lives in the leading icon, so they read
@@ -866,11 +866,11 @@ const hasCurrent = periods.some((p) => p.current);
     gap: var(--spacing-150);
     padding: 2px 10px;
     border-radius: var(--radius-100);
-    font-size: var(--type-size-150);
+    font-size: var(--font-size-150);
     line-height: 1.5;
-    background: var(--color-surface-sunken);
-    box-shadow: inset 0 0 0 1px var(--color-border-light);
-    color: var(--color-text-secondary);
+    background: var(--color-background-elevation-sunken);
+    box-shadow: inset 0 0 0 1px var(--color-border-default-subtle);
+    color: var(--color-content-default-secondary);
   }
   .bcn-readiness__flag-ic {
     width: 13px;
@@ -886,8 +886,8 @@ const hasCurrent = periods.some((p) => p.current);
 
   .bcn-readiness__noresults {
     margin: 0;
-    font-size: var(--type-size-150);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-tertiary);
   }
 
   /* ── 3 · Work plan by field season ── */
@@ -897,13 +897,13 @@ const hasCurrent = periods.some((p) => p.current);
     gap: var(--spacing-300);
   }
   .bcn-readiness__period {
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
   }
   .bcn-readiness__period[data-current] {
-    border-color: var(--color-secondary);
-    background: color-mix(in srgb, var(--color-secondary) 4%, var(--color-surface));
+    border-color: var(--color-background-brand-muted);
+    background: color-mix(in srgb, var(--color-background-brand-muted) 4%, var(--color-background-elevation-raised));
   }
   .bcn-readiness__period-sum {
     display: flex;
@@ -920,8 +920,8 @@ const hasCurrent = periods.some((p) => p.current);
     content: '';
     width: 8px;
     height: 8px;
-    border-right: 2px solid var(--color-text-tertiary);
-    border-bottom: 2px solid var(--color-text-tertiary);
+    border-right: 2px solid var(--color-content-default-tertiary);
+    border-bottom: 2px solid var(--color-content-default-tertiary);
     transform: rotate(-45deg);
     transition: transform 150ms ease;
     margin-left: auto;
@@ -930,16 +930,16 @@ const hasCurrent = periods.some((p) => p.current);
     transform: rotate(45deg);
   }
   .bcn-readiness__period-label {
-    font-size: var(--type-size-200);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-200);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .bcn-readiness__period-body {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-300);
     padding: var(--spacing-300) var(--spacing-400) var(--spacing-400);
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   /* Shared row grid — fixed px columns so header + rows align across groups
      (ch units resolve per-element font and drift between header and rows). */
@@ -949,16 +949,16 @@ const hasCurrent = periods.some((p) => p.current);
     align-items: baseline;
     gap: var(--spacing-400);
     padding: var(--spacing-150) var(--spacing-100);
-    font-size: var(--type-size-150);
+    font-size: var(--font-size-150);
     /* Task rows are children of the study head — indent them under it. */
     margin-left: var(--spacing-600);
   }
   .bcn-readiness__prow--head {
     margin-left: var(--spacing-600);
     padding-bottom: var(--spacing-100);
-    border-bottom: 1px solid var(--color-border);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    border-bottom: 1px solid var(--color-border-default);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-readiness__pgroup {
     display: flex;
@@ -972,9 +972,9 @@ const hasCurrent = periods.some((p) => p.current);
     gap: var(--spacing-200);
   }
   .bcn-readiness__pgroup-name {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     line-height: 1.3;
   }
   .bcn-readiness__pitems {
@@ -985,7 +985,7 @@ const hasCurrent = periods.some((p) => p.current);
     flex-direction: column;
   }
   .bcn-readiness__pitems li + li .bcn-readiness__pitem {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   /* A task row is a real Task record — full-row button opens its drawer. */
   .bcn-readiness__pitem {
@@ -999,22 +999,22 @@ const hasCurrent = periods.some((p) => p.current);
     border-radius: var(--radius-100);
   }
   .bcn-readiness__pitem:hover {
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
   .bcn-readiness__pitem-span {
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .bcn-readiness__pitem-name {
     display: inline-flex;
     align-items: center;
     flex-wrap: wrap;
     gap: var(--spacing-150);
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     line-height: 1.35;
     min-width: 0;
   }
   .bcn-readiness__pitem-owner {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
   .bcn-readiness__starts {
@@ -1022,11 +1022,11 @@ const hasCurrent = periods.some((p) => p.current);
     align-items: center;
     padding: 0 8px;
     border-radius: var(--radius-100);
-    background: color-mix(in srgb, var(--color-secondary) 10%, var(--color-surface));
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-secondary) 25%, transparent);
-    color: color-mix(in srgb, var(--color-secondary) 60%, var(--color-text-primary));
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-medium);
+    background: color-mix(in srgb, var(--color-background-brand-muted) 10%, var(--color-background-elevation-raised));
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-background-brand-muted) 25%, transparent);
+    color: color-mix(in srgb, var(--color-background-brand-muted) 60%, var(--color-content-default));
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-medium);
     line-height: 1.6;
   }
 
diff --git a/src/components/bcn/BcnRecordRows.astro b/src/components/bcn/BcnRecordRows.astro
index 68875f3d..502e409b 100644
--- a/src/components/bcn/BcnRecordRows.astro
+++ b/src/components/bcn/BcnRecordRows.astro
@@ -103,7 +103,7 @@ const addLabel = section.addFlow === 'page' ? undefined : section.addLabel;
           )}
 
           <div class="bcn-record-rows__content">
-            <p class="bcn-record-rows__lead type-body">
+            <p class="bcn-record-rows__lead typography-body-md">
               <span data-cell={leadColumn.key}>{record.cells[leadColumn.key]}</span>
               {record.badge && <EsaBadge value={record.badge} size="sm" />}
               {canDeactivate && (
@@ -114,12 +114,12 @@ const addLabel = section.addFlow === 'page' ? undefined : section.addLabel;
             </p>
 
             {metaColumns.length > 0 && (
-              <p class="bcn-record-rows__meta type-body-small">
+              <p class="bcn-record-rows__meta typography-body-sm">
                 {metaColumns.map((col) => (
                   <span class="bcn-record-rows__pair">
                     <span class="bcn-record-rows__label">{col.label}</span>
                     {col.code ? (
-                      <code class="bcn-record-rows__code type-code" data-cell={col.key}>
+                      <code class="bcn-record-rows__code typography-code-sm" data-cell={col.key}>
                         {record.cells[col.key]}
                       </code>
                     ) : (
@@ -137,7 +137,7 @@ const addLabel = section.addFlow === 'page' ? undefined : section.addLabel;
             {rowActions.map((action) => (
               <EsaButton
                 size="sm"
-                color={action === 'delete' ? 'danger' : 'ghost'}
+                variant={action === 'delete' ? 'danger' : 'ghost'}
                 appearance={action === 'delete' ? 'soft' : 'outline'}
                 icon={ACTIONS[action].icon}
                 class={action === 'deactivate' ? 'bcn-record-rows__quiet' : undefined}
@@ -167,10 +167,10 @@ const addLabel = section.addFlow === 'page' ? undefined : section.addLabel;
     </div>
 
     <div class="cluster" data-gap="sm" slot="footer" style="--justify: flex-end">
-      <EsaButton color="ghost" appearance="outline" size="sm" data-record-cancel>
+      <EsaButton variant="ghost" appearance="outline" size="sm" data-record-cancel>
         Cancel
       </EsaButton>
-      <EsaButton color="primary" size="sm" data-record-save>Save</EsaButton>
+      <EsaButton variant="primary" size="sm" data-record-save>Save</EsaButton>
     </div>
   </esa-dialog>
 </div>
@@ -206,14 +206,14 @@ const addLabel = section.addFlow === 'page' ? undefined : section.addLabel;
     padding-block: var(--spacing-250);
   }
   .bcn-record-rows__row + .bcn-record-rows__row {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
 
   /* Decorative — it says the list is dragged into order; the drag itself is not modeled. */
   .bcn-record-rows__handle {
     display: flex;
     align-items: center;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     cursor: grab;
   }
 
@@ -225,7 +225,7 @@ const addLabel = section.addFlow === 'page' ? undefined : section.addLabel;
     gap: var(--spacing-100);
   }
 
-  /* The lead cell carries the row. type-body's relaxed 1.8 would open a gap above the
+  /* The lead cell carries the row. typography-body-md's relaxed 1.8 would open a gap above the
      meta line under it — same tightening BcnFlagRow's name makes. */
   .bcn-record-rows__lead {
     display: flex;
@@ -234,12 +234,12 @@ const addLabel = section.addFlow === 'page' ? undefined : section.addLabel;
     gap: var(--spacing-200);
     margin: 0;
     line-height: 1.4;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     /* Quiet record markers — neutral surface + secondary ink through esa-badge's own
        component tokens, the same quieting the grid's badge column carries. */
-    --badge-bg: var(--color-surface-sunken);
-    --badge-text-color: var(--color-text-secondary);
+    --badge-bg: var(--color-background-elevation-sunken);
+    --badge-text-color: var(--color-content-default-secondary);
   }
 
   /* The supporting columns, on one wrapping line. The gap BETWEEN pairs is wider than
@@ -261,19 +261,19 @@ const addLabel = section.addFlow === 'page' ? undefined : section.addLabel;
   }
   /* The column's own name, one step quieter than the value it names. */
   .bcn-record-rows__label {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-record-rows__value {
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   /* An identifier, not prose: mono on the sunken surface, the 4px radius this chrome
-     uses everywhere. type-code supplies the family and size. */
+     uses everywhere. typography-code-sm supplies the family and size. */
   .bcn-record-rows__code {
     padding: 1px var(--spacing-150);
     border-radius: var(--radius-100);
-    background: var(--color-surface-sunken);
-    color: var(--color-text-secondary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-content-default-secondary);
   }
 
   .bcn-record-rows__actions {
@@ -281,19 +281,19 @@ const addLabel = section.addFlow === 'page' ? undefined : section.addLabel;
   }
 
   /* Deactivate is a state change, not a destructive one — it sits in the muted register
-     rather than the danger one. esa-button's ghost color reads --color-text-primary for
-     its label and --color-border for its edge; both are re-pointed one step down for
+     rather than the danger one. esa-button's ghost color reads --color-content-default for
+     its label and --color-border-default for its edge; both are re-pointed one step down for
      this button only, through the SEMANTIC tokens the lego already reads. */
   .bcn-record-rows :global(.bcn-record-rows__quiet) {
-    --color-text-primary: var(--color-text-secondary);
-    --color-border: var(--color-border-light);
+    --color-content-default: var(--color-content-default-secondary);
+    --color-border-default: var(--color-border-default-subtle);
   }
 
   /* A deactivated row keeps its place in the order and stops competing for attention.
      Its handle goes with it: a deactivated kind is out of the dropdown, so it has no
      position left to drag. (hidden, not removed — the rows stay aligned.) */
   .bcn-record-rows__row[data-deactivated] .bcn-record-rows__lead {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-record-rows__row[data-deactivated] .bcn-record-rows__handle {
     visibility: hidden;
diff --git a/src/components/bcn/BcnReleaseNav.astro b/src/components/bcn/BcnReleaseNav.astro
index ba8c20a2..0ec16bd5 100644
--- a/src/components/bcn/BcnReleaseNav.astro
+++ b/src/components/bcn/BcnReleaseNav.astro
@@ -132,8 +132,8 @@ function shortDate(raw: string): string {
     margin: 0 0 var(--spacing-200, 0.5rem);
     padding-inline: var(--spacing-300, 0.75rem);
     font-size: 1rem;
-    font-weight: var(--font-weight-semibold, 600);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold, 600);
+    color: var(--color-content-default);
     line-height: 1.3;
   }
 
@@ -152,26 +152,26 @@ function shortDate(raw: string): string {
     gap: 2px;
     padding: var(--spacing-200, 0.5rem) var(--spacing-300, 0.75rem);
     border-radius: var(--radius-200, 0.5rem);
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     text-decoration: none;
     transition: background 0.1s ease, color 0.1s ease;
   }
   /* Hover — a neutral wash at most; the active state is carried by ink, not fill. */
   .bcn-release-nav__link:hover {
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
   .bcn-release-nav__link:hover .bcn-release-nav__version {
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-release-nav__link:focus-visible {
-    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--color-text-link, #005862));
+    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--color-content-link, #005862));
     outline-offset: 2px;
   }
 
   /* Active / in-view — an ink shift, never a colour fill: the version darkens to
      primary and picks up weight; the rest of the row stays quiet. */
   .bcn-release-nav__link.is-active .bcn-release-nav__version {
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     font-weight: 600;
   }
 
@@ -184,7 +184,7 @@ function shortDate(raw: string): string {
     font-family: var(--font-decorative);
     font-size: 1rem; /* 16px */
     font-weight: 500;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     line-height: 1.3;
     transition: color 0.1s ease;
   }
@@ -193,11 +193,11 @@ function shortDate(raw: string): string {
      colour chip, so the newest-release marker never competes with the active ink. */
   .bcn-release-nav__latest {
     flex: none;
-    font-family: var(--font-sans, 'DM Sans', sans-serif);
+    font-family: var(--typography-font-family-sans, 'DM Sans', sans-serif);
     font-size: 12px;
-    font-weight: var(--font-weight-medium, 500);
-    color: var(--color-text-tertiary);
-    background: var(--color-surface-sunken);
+    font-weight: var(--typography-font-weight-medium, 500);
+    color: var(--color-content-default-tertiary);
+    background: var(--color-background-elevation-sunken);
     padding: 1px var(--spacing-150, 0.375rem);
     border-radius: var(--radius-100, 0.25rem);
     line-height: 1.5;
@@ -206,7 +206,7 @@ function shortDate(raw: string): string {
   /* Date — a genuine timestamp, so 14px secondary is honest meta (not a body role). */
   .bcn-release-nav__date {
     font-size: 0.875rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     line-height: 1.35;
   }
 
diff --git a/src/components/bcn/BcnReleaseStream.astro b/src/components/bcn/BcnReleaseStream.astro
index c45d5f46..43bcf4e3 100644
--- a/src/components/bcn/BcnReleaseStream.astro
+++ b/src/components/bcn/BcnReleaseStream.astro
@@ -169,7 +169,7 @@ const fmtDate = (iso: string): string =>
   /* Releases below the first carry a hairline separator — a rule, never a
      status border. */
   .bcn-release + .bcn-release {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .bcn-release:first-child { padding-block-start: var(--spacing-500); }
 
@@ -189,27 +189,27 @@ const fmtDate = (iso: string): string =>
     flex-wrap: wrap;
     font-size: 0.875rem;
     line-height: 1.4;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-release__latest {
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-secondary);
   }
   .bcn-release__latest::after {
     content: '·';
     margin-inline: var(--spacing-200);
-    color: var(--color-text-muted);
+    color: var(--bcn-content-muted);
   }
   /* Serif display tier — the release number. Besley at ~30px (type-size-600),
      tight leading, a hair of negative tracking for the large optical size. */
   .bcn-release__version {
     margin: 0;
     font-family: var(--font-decorative);
-    font-size: var(--type-size-600);
+    font-size: var(--font-size-600);
     font-weight: 600;
     line-height: 1.15;
     letter-spacing: -0.01em;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
 
   /* ── Headlines — the big stories (richest tier), serif-titled ─────── */
@@ -235,14 +235,14 @@ const fmtDate = (iso: string): string =>
     font-weight: 500;
     line-height: 1.3;
     letter-spacing: -0.005em;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-release__headline-link {
     color: inherit;
     text-decoration: none;
   }
   .bcn-release__headline-link:hover {
-    color: var(--color-text-link);
+    color: var(--color-content-link);
     text-decoration: underline;
     text-underline-offset: 2px;
   }
@@ -251,7 +251,7 @@ const fmtDate = (iso: string): string =>
     max-inline-size: 42rem;
     font-size: 1rem;
     line-height: var(--line-height-normal);
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   /* ── Area groups + entries ──────────────────────────────────────── */
@@ -262,10 +262,10 @@ const fmtDate = (iso: string): string =>
   .bcn-release__group-title {
     margin: 0 0 var(--spacing-400);
     padding-block-end: var(--spacing-200);
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-default-subtle);
     font-size: 1.0625rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-secondary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-secondary);
   }
 
   .bcn-release__entries {
@@ -287,9 +287,9 @@ const fmtDate = (iso: string): string =>
   .bcn-release__entry-title {
     margin: 0;
     font-size: 1rem;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.4;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   /* Feature-flag note — quiet neutral chip, the flag name in mono (genuine
      technical meta, so 13px is legitimate). */
@@ -298,20 +298,20 @@ const fmtDate = (iso: string): string =>
     align-items: baseline;
     gap: var(--spacing-100);
     padding: 2px var(--spacing-200);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-100);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     font-size: 0.8125rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-release__flag code {
-    font-family: var(--font-mono);
+    font-family: var(--typography-font-family-mono);
     font-size: 0.8125rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .bcn-release__applies {
     font-size: 0.8125rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
 
   /* ── Blocks (p / bullets / callout) — held to the reading measure ── */
@@ -325,7 +325,7 @@ const fmtDate = (iso: string): string =>
     margin: 0;
     font-size: 1rem;
     line-height: var(--line-height-normal);
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-release__bullets {
     margin: 0;
@@ -337,9 +337,9 @@ const fmtDate = (iso: string): string =>
   .bcn-release__bullet {
     font-size: 1rem;
     line-height: var(--line-height-normal);
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
-  .bcn-release__bullet::marker { color: var(--color-text-tertiary); }
+  .bcn-release__bullet::marker { color: var(--color-content-default-tertiary); }
   /* Quiet neutral note box — leading icon + text. Sunken surface + hairline, no
      colour, no left border. */
   .bcn-release__callout {
@@ -348,20 +348,20 @@ const fmtDate = (iso: string): string =>
     align-items: start;
     gap: var(--spacing-300);
     padding: var(--spacing-400);
-    border: 1px solid var(--color-border-light);
+    border: 1px solid var(--color-border-default-subtle);
     border-radius: var(--radius-200);
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
   .bcn-release__callout-icon {
     display: inline-flex;
     margin-block-start: 2px;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .bcn-release__callout-text {
     margin: 0;
     font-size: 1rem;
     line-height: var(--line-height-normal);
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
 
   /* ── Fixes — de-emphasized small print, collapsed by default ─────── */
@@ -371,11 +371,11 @@ const fmtDate = (iso: string): string =>
   .bcn-release__fixes-summary {
     cursor: pointer;
     font-size: 0.9375rem;
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-secondary);
     list-style-position: inside;
   }
-  .bcn-release__fixes-summary:hover { color: var(--color-text-primary); }
+  .bcn-release__fixes-summary:hover { color: var(--color-content-default); }
   .bcn-release__fixes-list {
     margin: var(--spacing-300) 0 0;
     padding-inline-start: var(--spacing-500);
@@ -387,20 +387,20 @@ const fmtDate = (iso: string): string =>
   .bcn-release__fix {
     font-size: 0.875rem;
     line-height: var(--line-height-normal);
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
-  .bcn-release__fix::marker { color: var(--color-border-strong); }
+  .bcn-release__fix::marker { color: var(--color-border-default-strong); }
 
   /* Injected inline spans from the formatter (set:html bypasses Astro scoping;
      :global under the component root keeps them bounded here). */
-  .bcn-release :global(strong) { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
+  .bcn-release :global(strong) { font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
   .bcn-release :global(code) {
-    font-family: var(--font-mono);
+    font-family: var(--typography-font-family-mono);
     font-size: 0.875em;
     padding: 1px 5px;
     border-radius: var(--radius-100);
-    background: var(--color-surface-sunken);
-    color: var(--color-text-primary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-content-default);
   }
 
   @media (max-width: 32rem) {
diff --git a/src/components/bcn/BcnRequirementReference.astro b/src/components/bcn/BcnRequirementReference.astro
index f8c8c26c..c54d04b6 100644
--- a/src/components/bcn/BcnRequirementReference.astro
+++ b/src/components/bcn/BcnRequirementReference.astro
@@ -51,10 +51,10 @@ const fields = resolveFields(requirement);
   <footer class="bcn-reqref__footer">
     <!-- Host wires this trigger to its own source-document drawer. -->
     <span class="bcn-reqref__action" data-bcn-source>
-      <EsaButton color="ghost" size="sm" icon="file-text">View in Source Document</EsaButton>
+      <EsaButton variant="ghost" size="sm" icon="file-text">View in Source Document</EsaButton>
     </span>
     <span class="bcn-reqref__action" data-bcn-edit data-href={editHref}>
-      <EsaButton color="ghost" size="sm" icon="pencil">Edit Requirement<span class="bcn-reqref__ext"><EsaIcon name="external-link" size="xs" /></span></EsaButton>
+      <EsaButton variant="ghost" size="sm" icon="pencil">Edit Requirement<span class="bcn-reqref__ext"><EsaIcon name="external-link" size="xs" /></span></EsaButton>
     </span>
   </footer>
 </article>
@@ -70,19 +70,19 @@ const fields = resolveFields(requirement);
 
 <style>
   /* Token-driven; parent owns outer spacing. Mirrors the dialog's .rd-reference shell. */
-  .bcn-reqref { display: flex; flex-direction: column; gap: var(--spacing-400); padding: var(--spacing-500); background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-300); }
+  .bcn-reqref { display: flex; flex-direction: column; gap: var(--spacing-400); padding: var(--spacing-500); background: var(--color-background-default); border: 1px solid var(--color-border-default); border-radius: var(--radius-300); }
 
   /* Source text in the decorative serif (Besley) — full width, quoted regulatory voice. */
-  .bcn-reqref__text { margin: 0; font-family: var(--font-decorative); font-size: 1rem; line-height: 1.6; color: var(--color-text-primary); }
+  .bcn-reqref__text { margin: 0; font-family: var(--font-decorative); font-size: 1rem; line-height: 1.6; color: var(--color-content-default); }
 
   /* Quiet key-value grid (no pills). */
-  .bcn-reqref__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--spacing-600); margin: 0; padding-top: var(--spacing-200); border-top: 1px solid var(--color-border); }
-  .bcn-reqref__row { display: grid; grid-template-columns: 178px 1fr; align-items: start; gap: var(--spacing-300); padding: var(--spacing-250) 0; border-bottom: 1px solid var(--color-border-light); }
+  .bcn-reqref__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--spacing-600); margin: 0; padding-top: var(--spacing-200); border-top: 1px solid var(--color-border-default); }
+  .bcn-reqref__row { display: grid; grid-template-columns: 178px 1fr; align-items: start; gap: var(--spacing-300); padding: var(--spacing-250) 0; border-bottom: 1px solid var(--color-border-default-subtle); }
   .bcn-reqref__row[hidden] { display: none; }
-  .bcn-reqref__key { display: inline-flex; align-items: center; gap: var(--spacing-150); margin: 0; font-size: var(--type-size-100); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
+  .bcn-reqref__key { display: inline-flex; align-items: center; gap: var(--spacing-150); margin: 0; font-size: var(--font-size-100); font-weight: var(--typography-font-weight-medium); color: var(--color-content-default-secondary); }
   /* Attribute glyphs — small, tertiary. */
-  .bcn-reqref__key :global(.esa-icon) { --_icon-size: 11px; color: var(--color-text-tertiary); flex-shrink: 0; }
-  .bcn-reqref__val { margin: 0; font-size: var(--type-size-100); color: var(--color-text-primary); line-height: 1.5; }
+  .bcn-reqref__key :global(.esa-icon) { --_icon-size: 11px; color: var(--color-content-default-tertiary); flex-shrink: 0; }
+  .bcn-reqref__val { margin: 0; font-size: var(--font-size-100); color: var(--color-content-default); line-height: 1.5; }
 
   /* Footer actions — two identical low-emphasis buttons. */
   .bcn-reqref__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-100); flex-wrap: wrap; padding-top: var(--spacing-200); }
@@ -93,8 +93,8 @@ const fields = resolveFields(requirement);
   .bcn-reqref__ext :global(.esa-icon) { --_icon-size: 12px; opacity: 0.75; }
   /* Brand "green ghost": tint esa-button's neutral ghost with Beacon's teal-green
      (token-only restyle of the lego — candidate for a real esa-button treatment). */
-  .bcn-reqref__footer :global(.esa-button--color-ghost .esa-button__native) { color: var(--color-secondary); }
-  .bcn-reqref__footer :global(.esa-button--color-ghost .esa-button__native:hover:not(:disabled)) { color: var(--color-secondary-hover); background: color-mix(in srgb, var(--color-secondary) 10%, transparent); }
+  .bcn-reqref__footer :global(.esa-button--color-ghost .esa-button__native) { color: var(--color-background-brand-muted); }
+  .bcn-reqref__footer :global(.esa-button--color-ghost .esa-button__native:hover:not(:disabled)) { color: var(--color-background-brand-muted-hover); background: color-mix(in srgb, var(--color-background-brand-muted) 10%, transparent); }
 
   @media (max-width: 720px) {
     .bcn-reqref__meta { grid-template-columns: 1fr; }
diff --git a/src/components/bcn/BcnReviewThread.astro b/src/components/bcn/BcnReviewThread.astro
index c3f1697e..6d5b9bc3 100644
--- a/src/components/bcn/BcnReviewThread.astro
+++ b/src/components/bcn/BcnReviewThread.astro
@@ -129,35 +129,35 @@ const fieldLabel = (f: string) => SKETCH_FIELD_META[f as keyof typeof SKETCH_FIE
 <style>
   .bcn-review { display: flex; flex-direction: column; gap: var(--spacing-400); }
   .bcn-review__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-300); }
-  .bcn-review__title { display: flex; align-items: center; gap: var(--spacing-200); margin: 0; font-size: var(--type-size-300); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-review__title :global(.esa-icon) { color: var(--color-warning); flex-shrink: 0; }
-  .bcn-review__counts { display: inline-flex; align-items: center; gap: var(--spacing-300); font-size: var(--type-size-100); }
-  .bcn-review__count { display: inline-flex; align-items: center; gap: var(--spacing-100); color: var(--color-text-secondary); }
+  .bcn-review__title { display: flex; align-items: center; gap: var(--spacing-200); margin: 0; font-size: var(--font-size-300); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-review__title :global(.esa-icon) { color: var(--color-background-utility-warning); flex-shrink: 0; }
+  .bcn-review__counts { display: inline-flex; align-items: center; gap: var(--spacing-300); font-size: var(--font-size-100); }
+  .bcn-review__count { display: inline-flex; align-items: center; gap: var(--spacing-100); color: var(--color-content-default-secondary); }
   .bcn-review__count::before { content: ''; width: 8px; height: 8px; border-radius: var(--radius-full); }
-  .bcn-review__count[data-s='open']::before { background: var(--color-warning); }
-  .bcn-review__count[data-s='addressed']::before { background: var(--color-info); }
-  .bcn-review__count[data-s='resolved']::before { background: var(--color-success); }
-  .bcn-review__section { font-family: var(--font-mono); font-size: 0.6875rem; /* adherence-allow: font-too-small — matches the sanctioned 11px reference chips */ font-weight: var(--font-weight-semibold); color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); padding: 1px 5px; border-radius: var(--radius-100); text-decoration: none; white-space: nowrap; }
+  .bcn-review__count[data-s='open']::before { background: var(--color-background-utility-warning); }
+  .bcn-review__count[data-s='addressed']::before { background: var(--color-background-utility-info); }
+  .bcn-review__count[data-s='resolved']::before { background: var(--color-background-utility-success); }
+  .bcn-review__section { font-family: var(--typography-font-family-mono); font-size: 0.6875rem; /* adherence-allow: font-too-small — matches the sanctioned 11px reference chips */ font-weight: var(--typography-font-weight-semibold); color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); padding: 1px 5px; border-radius: var(--radius-100); text-decoration: none; white-space: nowrap; }
   .bcn-review__section:hover { background: color-mix(in srgb, var(--color-commitment) 20%, white); }
-  .bcn-review__none { margin: 0; font-size: var(--type-size-200); color: var(--color-text-tertiary); }
+  .bcn-review__none { margin: 0; font-size: var(--font-size-200); color: var(--color-content-default-tertiary); }
 
   .bcn-review__groups { display: flex; flex-direction: column; gap: var(--spacing-500); }
   .bcn-review__group { display: flex; flex-direction: column; gap: var(--spacing-300); }
-  .bcn-review__field { display: flex; align-items: center; gap: var(--spacing-150); margin: 0; font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-text-tertiary); }
-  .bcn-review__field :global(.esa-icon) { color: var(--color-text-muted); }
+  .bcn-review__field { display: flex; align-items: center; gap: var(--spacing-150); margin: 0; font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-content-default-tertiary); }
+  .bcn-review__field :global(.esa-icon) { color: var(--bcn-content-muted); }
 
   .bcn-review__list, .bcn-review__replies { list-style: none; margin: 0; padding: 0; }
-  .bcn-review__item { display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-300); padding: var(--spacing-300); border: 1px solid var(--color-border); border-radius: var(--radius-200); background: var(--color-surface); }
+  .bcn-review__item { display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-300); padding: var(--spacing-300); border: 1px solid var(--color-border-default); border-radius: var(--radius-200); background: var(--color-background-elevation-raised); }
   .bcn-review__item + .bcn-review__item { margin-top: var(--spacing-200); }
   .bcn-review__body { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-150); }
   .bcn-review__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-200); }
-  .bcn-review__author { font-size: 0.875rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-review__time { font-size: 0.75rem; color: var(--color-text-tertiary); }
+  .bcn-review__author { font-size: 0.875rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-review__time { font-size: 0.75rem; color: var(--color-content-default-tertiary); }
   .bcn-review__tags { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-150); margin-left: auto; }
-  .bcn-review__text { margin: 0; font-size: var(--type-size-200); line-height: 1.55; color: var(--color-text-secondary); }
+  .bcn-review__text { margin: 0; font-size: var(--font-size-200); line-height: 1.55; color: var(--color-content-default-secondary); }
 
   /* Threaded author replies — indented, on a connecting rail. */
-  .bcn-review__replies { margin-top: var(--spacing-200); padding-left: var(--spacing-400); border-left: 2px solid var(--color-border); display: flex; flex-direction: column; gap: var(--spacing-200); }
+  .bcn-review__replies { margin-top: var(--spacing-200); padding-left: var(--spacing-400); border-left: 2px solid var(--color-border-default); display: flex; flex-direction: column; gap: var(--spacing-200); }
   .bcn-review__reply { display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-200); }
-  .bcn-review__node--reply :global(.esa-avatar) { --_avatar-bg: var(--color-secondary); }
+  .bcn-review__node--reply :global(.esa-avatar) { --_avatar-bg: var(--color-background-brand-muted); }
 </style>
diff --git a/src/components/bcn/BcnRolesMatrix.astro b/src/components/bcn/BcnRolesMatrix.astro
index f46c33da..62a89c40 100644
--- a/src/components/bcn/BcnRolesMatrix.astro
+++ b/src/components/bcn/BcnRolesMatrix.astro
@@ -198,42 +198,42 @@ const rows = inputRows.map((r) => ({
   .bcn-roles { display: flex; flex-direction: column; gap: var(--spacing-300); --_study-w: 300px; }
 
   /* Filter bar (gantt-parity) */
-  .bcn-roles__filterbar { display: flex; align-items: center; gap: var(--spacing-300); flex-wrap: wrap; padding: var(--spacing-250) var(--spacing-400); border: 1px solid var(--color-border); border-radius: var(--radius-200); background: var(--color-surface); }
+  .bcn-roles__filterbar { display: flex; align-items: center; gap: var(--spacing-300); flex-wrap: wrap; padding: var(--spacing-250) var(--spacing-400); border: 1px solid var(--color-border-default); border-radius: var(--radius-200); background: var(--color-background-elevation-raised); }
   .bcn-roles__fb-group { display: inline-flex; align-items: center; gap: var(--spacing-300); }
   .bcn-roles__filterbar :global(esa-text-field) { width: 240px; }
   .bcn-roles__filterbar :global(esa-select) { width: 11em; }
-  .bcn-roles__fb-label { font-size: var(--type-size-150); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); white-space: nowrap; }
-  .bcn-roles__fb-divider { width: 1px; align-self: stretch; background: var(--color-border); margin: 0 var(--spacing-100); }
-  .bcn-roles__fb-hint { margin-left: auto; font-size: var(--type-size-100); color: var(--color-text-tertiary); font-style: italic; }
+  .bcn-roles__fb-label { font-size: var(--font-size-150); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-tertiary); white-space: nowrap; }
+  .bcn-roles__fb-divider { width: 1px; align-self: stretch; background: var(--color-border-default); margin: 0 var(--spacing-100); }
+  .bcn-roles__fb-hint { margin-left: auto; font-size: var(--font-size-100); color: var(--color-content-default-tertiary); font-style: italic; }
 
-  .bcn-roles__scroll { overflow: auto; max-height: calc(100vh - 360px); border: 1px solid var(--color-border); border-radius: var(--radius-200); background: var(--color-surface); }
+  .bcn-roles__scroll { overflow: auto; max-height: calc(100vh - 360px); border: 1px solid var(--color-border-default); border-radius: var(--radius-200); background: var(--color-background-elevation-raised); }
 
   .bcn-roles__table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
 
   /* Header row (sticky top) */
-  .bcn-roles__table thead th { position: sticky; top: 0; z-index: 2; background: var(--color-surface-sunken); border-bottom: 1px solid var(--color-border); }
-  .bcn-roles__corner { position: sticky; left: 0; z-index: 3 !important; width: var(--_study-w); min-width: var(--_study-w); text-align: left; padding: var(--spacing-300); font-size: var(--type-size-150); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); border-right: 1px solid var(--color-border); }
-  .bcn-roles__ws { min-width: 148px; max-width: 176px; padding: var(--spacing-250) var(--spacing-300); text-align: left; vertical-align: bottom; font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); line-height: 1.3; }
+  .bcn-roles__table thead th { position: sticky; top: 0; z-index: 2; background: var(--color-background-elevation-sunken); border-bottom: 1px solid var(--color-border-default); }
+  .bcn-roles__corner { position: sticky; left: 0; z-index: 3 !important; width: var(--_study-w); min-width: var(--_study-w); text-align: left; padding: var(--spacing-300); font-size: var(--font-size-150); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-secondary); border-right: 1px solid var(--color-border-default); }
+  .bcn-roles__ws { min-width: 148px; max-width: 176px; padding: var(--spacing-250) var(--spacing-300); text-align: left; vertical-align: bottom; font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-secondary); line-height: 1.3; }
 
   /* Study column (sticky left) — clickable to edit */
   .bcn-roles__row { cursor: pointer; }
-  .bcn-roles__study { position: sticky; left: 0; z-index: 1; width: var(--_study-w); min-width: var(--_study-w); text-align: left; vertical-align: top; padding: var(--spacing-250) var(--spacing-300); background: var(--color-surface); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border-light); }
-  .bcn-roles__coa { display: inline-block; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: var(--font-weight-semibold); color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); padding: 1px 5px; border-radius: var(--radius-100); margin-bottom: 2px; }
-  .bcn-roles__name { display: block; font-size: var(--type-size-100); color: var(--color-text-primary); line-height: 1.35; }
+  .bcn-roles__study { position: sticky; left: 0; z-index: 1; width: var(--_study-w); min-width: var(--_study-w); text-align: left; vertical-align: top; padding: var(--spacing-250) var(--spacing-300); background: var(--color-background-elevation-raised); border-right: 1px solid var(--color-border-default); border-bottom: 1px solid var(--color-border-default-subtle); }
+  .bcn-roles__coa { display: inline-block; font-family: var(--typography-font-family-mono); font-size: 0.6875rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); padding: 1px 5px; border-radius: var(--radius-100); margin-bottom: 2px; }
+  .bcn-roles__name { display: block; font-size: var(--font-size-100); color: var(--color-content-default); line-height: 1.35; }
 
   /* Cells. The inner assign/org/person/tentative/empty spans are ALSO produced by
      the client repaint via innerHTML, which Astro's scoped attribute never reaches —
      so they are :global (names are bcn-roles__-namespaced, safe to unscope). */
-  .bcn-roles__cell { padding: var(--spacing-250) var(--spacing-300); vertical-align: top; border-bottom: 1px solid var(--color-border-light); border-right: 1px solid var(--color-border-light); }
-  .bcn-roles__row:hover .bcn-roles__cell { background: color-mix(in srgb, var(--color-secondary) 5%, transparent); }
-  .bcn-roles__row:hover .bcn-roles__study { background: color-mix(in srgb, var(--color-secondary) 5%, var(--color-surface)); }
+  .bcn-roles__cell { padding: var(--spacing-250) var(--spacing-300); vertical-align: top; border-bottom: 1px solid var(--color-border-default-subtle); border-right: 1px solid var(--color-border-default-subtle); }
+  .bcn-roles__row:hover .bcn-roles__cell { background: color-mix(in srgb, var(--color-background-brand-muted) 5%, transparent); }
+  .bcn-roles__row:hover .bcn-roles__study { background: color-mix(in srgb, var(--color-background-brand-muted) 5%, var(--color-background-elevation-raised)); }
   :global(.bcn-roles__assign) { display: flex; flex-direction: column; gap: 1px; }
-  :global(.bcn-roles__org) { font-size: var(--type-size-100); font-weight: var(--font-weight-medium); color: var(--color-text-primary); line-height: 1.3; }
-  :global(.bcn-roles__person) { font-size: 0.75rem; color: var(--color-text-tertiary); line-height: 1.3; }
-  :global(.bcn-roles__empty) { color: var(--color-border-strong); }
+  :global(.bcn-roles__org) { font-size: var(--font-size-100); font-weight: var(--typography-font-weight-medium); color: var(--color-content-default); line-height: 1.3; }
+  :global(.bcn-roles__person) { font-size: 0.75rem; color: var(--color-content-default-tertiary); line-height: 1.3; }
+  :global(.bcn-roles__empty) { color: var(--color-border-default-strong); }
 
-  :global(.bcn-roles__tentative) { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 3px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-warning) 20%, white); color: color-mix(in srgb, var(--color-warning) 80%, black); font-size: 0.625rem; font-weight: var(--font-weight-semibold); vertical-align: middle; }
+  :global(.bcn-roles__tentative) { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 3px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-background-utility-warning) 20%, white); color: color-mix(in srgb, var(--color-background-utility-warning) 80%, black); font-size: 0.625rem; font-weight: var(--typography-font-weight-semibold); vertical-align: middle; }
   .bcn-roles__tentative--legend { margin: 0 2px; }
 
-  .bcn-roles__note { margin: 0; font-size: var(--type-size-100); color: var(--color-text-tertiary); line-height: 1.5; }
+  .bcn-roles__note { margin: 0; font-size: var(--font-size-100); color: var(--color-content-default-tertiary); line-height: 1.5; }
 </style>
diff --git a/src/components/bcn/BcnRolesRepeater.astro b/src/components/bcn/BcnRolesRepeater.astro
index 82f519bf..c24e62ed 100644
--- a/src/components/bcn/BcnRolesRepeater.astro
+++ b/src/components/bcn/BcnRolesRepeater.astro
@@ -9,7 +9,7 @@
 // esa-text-field (person), esa-switch-toggle (tentative), esa-icon-button
 // (remove), esa-button (Add). The row grid is layout glue only. Semantic tokens.
 import EsaButton from '@esa/ecology/esa-button.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 ---
 
 <div class="bcn-rrep" data-roles-repeater>
@@ -28,14 +28,14 @@ import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
           <span>Tentative</span>
         </label>
         <span class="bcn-rrep__del" data-rr-del>
-          <EsaIconButton icon="trash-2" label="Remove assignment" size="sm" />
+          <EsaIconButton variant="chrome" iconOnly icon="trash-2" label="Remove assignment" size="sm" />
         </span>
       </div>
     </div>
   </template>
 
   <span data-rr-add class="bcn-rrep__add">
-    <EsaButton color="ghost" appearance="outline" size="sm" icon="plus">Add assignment</EsaButton>
+    <EsaButton variant="ghost" appearance="outline" size="sm" icon="plus">Add assignment</EsaButton>
   </span>
 </div>
 
@@ -54,7 +54,7 @@ import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
     flex-direction: column;
     gap: var(--spacing-200);
     padding: var(--spacing-300) 0;
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-default-subtle);
   }
   .bcn-rrep__selects {
     display: grid;
@@ -72,8 +72,8 @@ import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
     align-items: center;
     gap: var(--spacing-150);
     padding-bottom: 6px;
-    font-size: var(--type-size-100);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-100);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
   .bcn-rrep__del {
diff --git a/src/components/bcn/BcnRollupSummary.astro b/src/components/bcn/BcnRollupSummary.astro
index bfa1259f..6d1f5ac8 100644
--- a/src/components/bcn/BcnRollupSummary.astro
+++ b/src/components/bcn/BcnRollupSummary.astro
@@ -65,14 +65,14 @@ const total = Math.max(rollup.taskCount, 1);
   .bcn-rollup { display: flex; flex-direction: column; gap: var(--spacing-300); }
 
   .bcn-rollup__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-300); flex-wrap: wrap; }
-  .bcn-rollup__from { font-size: var(--form-font-size-md); font-weight: var(--font-weight-medium); color: var(--form-label-color); }
+  .bcn-rollup__from { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-medium); color: var(--form-label-color); }
 
-  .bcn-rollup__bar { display: flex; height: 12px; border-radius: var(--radius-full); overflow: hidden; background: var(--color-surface-sunken); border: 1px solid var(--color-border-light); }
+  .bcn-rollup__bar { display: flex; height: 12px; border-radius: var(--radius-full); overflow: hidden; background: var(--color-background-elevation-sunken); border: 1px solid var(--color-border-default-subtle); }
   .bcn-rollup__seg { display: block; height: 100%; background: var(--_c); }
-  .bcn-rollup__seg + .bcn-rollup__seg { box-shadow: -1px 0 0 var(--color-surface); }
+  .bcn-rollup__seg + .bcn-rollup__seg { box-shadow: -1px 0 0 var(--color-background-elevation-raised); }
 
-  .bcn-rollup__counts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-100) var(--spacing-400); font-size: var(--type-size-100); color: var(--color-text-secondary); }
-  .bcn-rollup__total { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
+  .bcn-rollup__counts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-100) var(--spacing-400); font-size: var(--font-size-100); color: var(--color-content-default-secondary); }
+  .bcn-rollup__total { font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); font-variant-numeric: tabular-nums; }
   .bcn-rollup__count { display: inline-flex; align-items: center; gap: var(--spacing-150); font-variant-numeric: tabular-nums; }
   .bcn-rollup__dot { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--_c); flex-shrink: 0; }
 </style>
diff --git a/src/components/bcn/BcnScaleStats.astro b/src/components/bcn/BcnScaleStats.astro
index 45bcedcb..1ed06cc3 100644
--- a/src/components/bcn/BcnScaleStats.astro
+++ b/src/components/bcn/BcnScaleStats.astro
@@ -71,22 +71,22 @@ const { eyebrow, headline, subtext } = Astro.props;
   }
   .bcn-scale__icon {
     display: inline-flex;
-    color: var(--color-primary);
+    color: var(--color-background-brand);
     margin-block-start: 2px;
     flex-shrink: 0;
   }
 
   .bcn-scale__value {
-    font-family: var(--font-decorative, var(--font-sans));
-    font-size: var(--type-size-500);
-    font-weight: var(--font-weight-bold);
+    font-family: var(--font-decorative, var(--typography-font-family-sans));
+    font-size: var(--font-size-500);
+    font-weight: var(--typography-font-weight-bold);
     line-height: 1;
     margin-block-end: var(--spacing-100);
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-scale__label {
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
     line-height: var(--line-height-normal, 1.5);
   }
 
diff --git a/src/components/bcn/BcnScheduleTimeline.astro b/src/components/bcn/BcnScheduleTimeline.astro
index 03183390..6f328732 100644
--- a/src/components/bcn/BcnScheduleTimeline.astro
+++ b/src/components/bcn/BcnScheduleTimeline.astro
@@ -202,61 +202,61 @@ const bar = (s: Study) => {
   }
 
   /* ── Legend ── */
-  .bcn-timeline__legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-300); font-size: var(--type-size-100); color: var(--color-text-secondary); }
-  .bcn-timeline__legend-title { font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); }
+  .bcn-timeline__legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-300); font-size: var(--font-size-100); color: var(--color-content-default-secondary); }
+  .bcn-timeline__legend-title { font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-tertiary); }
   .bcn-timeline__legend-item { display: inline-flex; align-items: center; gap: var(--spacing-150); }
   .bcn-timeline__legend-dot { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--_c); }
-  .bcn-timeline__legend-hint { margin-left: auto; color: var(--color-text-muted); font-style: italic; }
+  .bcn-timeline__legend-hint { margin-left: auto; color: var(--bcn-content-muted); font-style: italic; }
 
   /* ── Scroll + canvas ── */
-  .bcn-timeline__scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-200); background: var(--color-surface); }
+  .bcn-timeline__scroll { overflow-x: auto; border: 1px solid var(--color-border-default); border-radius: var(--radius-200); background: var(--color-background-elevation-raised); }
   .bcn-timeline__canvas { min-width: calc(var(--_label-w) + var(--_plot-w)); }
 
   /* ── Axis header — 3 stacked sub-rows ── */
-  .bcn-timeline__axis { display: grid; grid-template-columns: var(--_label-w) 1fr; position: sticky; top: 0; z-index: 5; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
-  .bcn-timeline__corner { display: flex; align-items: flex-end; padding: var(--spacing-200) var(--spacing-300); font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); border-right: 1px solid var(--color-border); }
+  .bcn-timeline__axis { display: grid; grid-template-columns: var(--_label-w) 1fr; position: sticky; top: 0; z-index: 5; background: var(--color-background-elevation-raised); border-bottom: 1px solid var(--color-border-default); }
+  .bcn-timeline__corner { display: flex; align-items: flex-end; padding: var(--spacing-200) var(--spacing-300); font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-tertiary); border-right: 1px solid var(--color-border-default); }
   .bcn-timeline__head-plot { position: relative; }
   .bcn-timeline__head-bands { position: absolute; inset: 0; z-index: 0; }
   .bcn-timeline__head-phases { position: relative; z-index: 1; height: 18px; }
   .bcn-timeline__head-years { position: relative; z-index: 1; height: 20px; }
   .bcn-timeline__head-ms { position: relative; z-index: 1; height: 22px; }
 
-  .bcn-timeline__phase-tag { position: absolute; top: 0; bottom: 0; display: inline-flex; align-items: center; padding: 0 var(--spacing-150); font-size: 0.625rem; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; }
-  .bcn-timeline__yr { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--color-border-light); display: flex; align-items: center; }
-  .bcn-timeline__yr.is-five { border-left-color: var(--color-border-strong); }
-  .bcn-timeline__yr-label { font-size: 0.6875rem; color: var(--color-text-muted); padding-left: 4px; font-variant-numeric: tabular-nums; }
-  .bcn-timeline__yr.is-five .bcn-timeline__yr-label { color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); }
-  .bcn-timeline__ms-tag { position: absolute; top: 2px; transform: translateX(-50%); font-size: 0.625rem; font-weight: var(--font-weight-semibold); color: var(--color-primary); white-space: nowrap; background: var(--color-surface); padding: 0 3px; border: 1px solid var(--color-primary-border); border-radius: var(--radius-100); }
+  .bcn-timeline__phase-tag { position: absolute; top: 0; bottom: 0; display: inline-flex; align-items: center; padding: 0 var(--spacing-150); font-size: 0.625rem; font-weight: var(--typography-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-content-default-secondary); white-space: nowrap; overflow: hidden; }
+  .bcn-timeline__yr { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--color-border-default-subtle); display: flex; align-items: center; }
+  .bcn-timeline__yr.is-five { border-left-color: var(--color-border-default-strong); }
+  .bcn-timeline__yr-label { font-size: 0.6875rem; color: var(--bcn-content-muted); padding-left: 4px; font-variant-numeric: tabular-nums; }
+  .bcn-timeline__yr.is-five .bcn-timeline__yr-label { color: var(--color-content-default-secondary); font-weight: var(--typography-font-weight-semibold); }
+  .bcn-timeline__ms-tag { position: absolute; top: 2px; transform: translateX(-50%); font-size: 0.625rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-background-brand); white-space: nowrap; background: var(--color-background-elevation-raised); padding: 0 3px; border: 1px solid var(--color-border-brand); border-radius: var(--radius-100); }
   .bcn-timeline__ms-tag.is-alt { top: 11px; }
 
   /* Neutral phase bands — alternating faint grays (not hues) so phase boundaries
      read without competing with the status-colored bars. */
-  .bcn-timeline__band[data-phase='baseline'] { background: color-mix(in srgb, var(--color-text-primary) 7%, transparent); }
-  .bcn-timeline__band[data-phase='in-water-construction'] { background: color-mix(in srgb, var(--color-text-primary) 3%, transparent); }
-  .bcn-timeline__band[data-phase='phase1-ops'] { background: color-mix(in srgb, var(--color-text-primary) 7%, transparent); }
-  .bcn-timeline__band[data-phase='phase2-ops'] { background: color-mix(in srgb, var(--color-text-primary) 3%, transparent); }
+  .bcn-timeline__band[data-phase='baseline'] { background: color-mix(in srgb, var(--color-content-default) 7%, transparent); }
+  .bcn-timeline__band[data-phase='in-water-construction'] { background: color-mix(in srgb, var(--color-content-default) 3%, transparent); }
+  .bcn-timeline__band[data-phase='phase1-ops'] { background: color-mix(in srgb, var(--color-content-default) 7%, transparent); }
+  .bcn-timeline__band[data-phase='phase2-ops'] { background: color-mix(in srgb, var(--color-content-default) 3%, transparent); }
 
   /* ── Body / rows ── */
-  .bcn-timeline__lane-title { margin: 0; padding: var(--spacing-150) var(--spacing-300); font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); background: var(--color-surface-sunken); border-bottom: 1px solid var(--color-border); position: sticky; left: 0; z-index: 3; }
+  .bcn-timeline__lane-title { margin: 0; padding: var(--spacing-150) var(--spacing-300); font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-secondary); background: var(--color-background-elevation-sunken); border-bottom: 1px solid var(--color-border-default); position: sticky; left: 0; z-index: 3; }
   .bcn-timeline__lane-title[hidden] { display: none; }
-  .bcn-timeline__row { display: grid; grid-template-columns: var(--_label-w) 1fr; border-bottom: 1px solid var(--color-border-light); }
+  .bcn-timeline__row { display: grid; grid-template-columns: var(--_label-w) 1fr; border-bottom: 1px solid var(--color-border-default-subtle); }
   .bcn-timeline__row[hidden] { display: none; }
-  .bcn-timeline__row:hover .bcn-timeline__plot { background: color-mix(in srgb, var(--color-secondary) 4%, transparent); }
+  .bcn-timeline__row:hover .bcn-timeline__plot { background: color-mix(in srgb, var(--color-background-brand-muted) 4%, transparent); }
 
   /* clickable study label (opens the manage drawer, like the bar) */
-  .bcn-timeline__row-label { display: flex; align-items: center; gap: var(--spacing-200); padding: 0 var(--spacing-300); min-height: var(--_row-h); width: 100%; border: 0; border-right: 1px solid var(--color-border); overflow: hidden; background: var(--color-surface); position: sticky; left: 0; z-index: 3; cursor: pointer; text-align: left; font: inherit; }
-  .bcn-timeline__row-label:hover .bcn-timeline__name { color: var(--color-primary); text-decoration: underline; }
-  .bcn-timeline__row-label:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
+  .bcn-timeline__row-label { display: flex; align-items: center; gap: var(--spacing-200); padding: 0 var(--spacing-300); min-height: var(--_row-h); width: 100%; border: 0; border-right: 1px solid var(--color-border-default); overflow: hidden; background: var(--color-background-elevation-raised); position: sticky; left: 0; z-index: 3; cursor: pointer; text-align: left; font: inherit; }
+  .bcn-timeline__row-label:hover .bcn-timeline__name { color: var(--color-background-brand); text-decoration: underline; }
+  .bcn-timeline__row-label:focus-visible { outline: 2px solid var(--color-background-brand); outline-offset: -2px; }
   /* COA = purple commitment badge (faithful to the Beacon commitment-id badge). */
-  .bcn-timeline__coa { flex-shrink: 0; font-family: var(--font-mono); font-size: 0.625rem; font-weight: var(--font-weight-semibold); color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); padding: 1px 5px; border-radius: var(--radius-100); }
-  .bcn-timeline__name { font-size: var(--type-size-200); font-weight: var(--font-weight-medium); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .bcn-timeline__coa { flex-shrink: 0; font-family: var(--typography-font-family-mono); font-size: 0.625rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); padding: 1px 5px; border-radius: var(--radius-100); }
+  .bcn-timeline__name { font-size: var(--font-size-200); font-weight: var(--typography-font-weight-medium); color: var(--color-content-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
   .bcn-timeline__plot { position: relative; min-height: var(--_row-h); }
   .bcn-timeline__band { position: absolute; top: 0; bottom: 0; }
-  .bcn-timeline__grid { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--color-border-light); }
-  .bcn-timeline__grid.is-five { border-left-color: var(--color-border); }
-  .bcn-timeline__ms-line { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed color-mix(in srgb, var(--color-primary) 35%, transparent); }
-  .bcn-timeline__today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--color-warning); z-index: 2; }
+  .bcn-timeline__grid { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--color-border-default-subtle); }
+  .bcn-timeline__grid.is-five { border-left-color: var(--color-border-default); }
+  .bcn-timeline__ms-line { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed color-mix(in srgb, var(--color-background-brand) 35%, transparent); }
+  .bcn-timeline__today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--color-background-utility-warning); z-index: 2; }
 
   /* status bar: 4px radius + left→right gradient (base → a lighter calculated tint) */
   .bcn-timeline__bar {
@@ -269,5 +269,5 @@ const bar = (s: Study) => {
     transition: filter 120ms ease, box-shadow 120ms ease;
   }
   .bcn-timeline__bar:hover { filter: brightness(1.05); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_c) 35%, transparent); }
-  .bcn-timeline__bar:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
+  .bcn-timeline__bar:focus-visible { outline: 2px solid var(--color-background-brand); outline-offset: 1px; }
 </style>
diff --git a/src/components/bcn/BcnSearchResults.astro b/src/components/bcn/BcnSearchResults.astro
index 6a70f37a..2a4a8b8b 100644
--- a/src/components/bcn/BcnSearchResults.astro
+++ b/src/components/bcn/BcnSearchResults.astro
@@ -298,15 +298,15 @@ const scopeCount = (id: string): number => ENTITIES.filter((e) => e.scope === id
     align-items: center;
     gap: var(--spacing-300);
     padding: var(--spacing-300) var(--spacing-400);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
   }
   .bcn-sr__search:focus-within {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px var(--color-primary-subtle);
+    border-color: var(--color-background-brand);
+    box-shadow: 0 0 0 3px var(--color-background-brand-subtle);
   }
-  .bcn-sr__search-icon { display: inline-flex; flex-shrink: 0; color: var(--color-text-tertiary); }
+  .bcn-sr__search-icon { display: inline-flex; flex-shrink: 0; color: var(--color-content-default-tertiary); }
   .bcn-sr__search-icon svg { width: 20px; height: 20px; }
   .bcn-sr__input {
     flex: 1;
@@ -315,16 +315,16 @@ const scopeCount = (id: string): number => ENTITIES.filter((e) => e.scope === id
     outline: none;
     background: transparent;
     font-family: inherit;
-    font-size: var(--type-size-300);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-300);
+    color: var(--color-content-default);
   }
-  .bcn-sr__input::placeholder { color: var(--color-text-tertiary); }
+  .bcn-sr__input::placeholder { color: var(--color-content-default-tertiary); }
 
   /* ── Result count line ── */
   .bcn-sr__count {
     margin: 0;
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
   }
 
   /* ── [ scope-facet rail | results ] split ── */
@@ -348,7 +348,7 @@ const scopeCount = (id: string): number => ENTITIES.filter((e) => e.scope === id
     display: flex;
     flex-direction: column;
     gap: var(--spacing-400);
-    border-left: 1px solid var(--color-border); /* divider between rail and results */
+    border-left: 1px solid var(--color-border-default); /* divider between rail and results */
     padding-left: var(--spacing-500);
   }
 
@@ -362,25 +362,25 @@ const scopeCount = (id: string): number => ENTITIES.filter((e) => e.scope === id
     border: 0;
     border-radius: var(--radius-200);
     background: transparent;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     font-family: inherit;
-    font-size: var(--type-size-150);
+    font-size: var(--font-size-150);
     text-align: left;
     cursor: pointer;
     transition: background 120ms ease, color 120ms ease;
   }
-  .bcn-sr__scope:hover { background: var(--color-surface-sunken); color: var(--color-text-primary); }
+  .bcn-sr__scope:hover { background: var(--color-background-elevation-sunken); color: var(--color-content-default); }
   .bcn-sr__scope--active {
-    background: var(--color-primary);
-    color: var(--color-text-inverse);
-    font-weight: var(--font-weight-semibold);
+    background: var(--color-background-brand);
+    color: var(--color-content-default-knockout);
+    font-weight: var(--typography-font-weight-semibold);
   }
   .bcn-sr__scope-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .bcn-sr__scope-count { flex: none; font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0.8; }
 
   /* Null state (empty query): the rail is present but disabled — muted, no counts. */
-  .bcn-sr--idle .bcn-sr__scope { color: var(--color-text-tertiary); cursor: default; }
-  .bcn-sr--idle .bcn-sr__scope:hover { background: transparent; color: var(--color-text-tertiary); }
+  .bcn-sr--idle .bcn-sr__scope { color: var(--color-content-default-tertiary); cursor: default; }
+  .bcn-sr--idle .bcn-sr__scope:hover { background: transparent; color: var(--color-content-default-tertiary); }
   .bcn-sr--idle .bcn-sr__scope-count { display: none; }
 
   /* Null-state landing prompt (the esa-empty-state lego), with breathing room. */
@@ -397,20 +397,20 @@ const scopeCount = (id: string): number => ENTITIES.filter((e) => e.scope === id
     align-items: center;
     gap: var(--spacing-200);
     padding: 0 var(--spacing-200) var(--spacing-150);
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-default-subtle);
   }
   .bcn-sr__group-label {
-    font-size: var(--type-size-200);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-200);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   /* count clustered next to the label as a bordered badge (clear bg, gray-200 border, 4px) */
   .bcn-sr__group-count {
-    font-size: var(--type-size-100);
+    font-size: var(--font-size-100);
     font-variant-numeric: tabular-nums;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     background: transparent;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-100);
     padding: 0 6px;
     line-height: 1.5;
@@ -426,11 +426,11 @@ const scopeCount = (id: string): number => ENTITIES.filter((e) => e.scope === id
     padding: var(--spacing-200) var(--spacing-300);
     border-radius: var(--radius-200);
     background: transparent;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     text-decoration: none;
     transition: background 120ms ease;
   }
-  .bcn-sr__row:hover { background: var(--color-surface-sunken); }
+  .bcn-sr__row:hover { background: var(--color-background-elevation-sunken); }
   .bcn-sr__row[hidden] { display: none; }
 
   .bcn-sr__row-head { display: flex; align-items: center; min-width: 0; }
@@ -441,8 +441,8 @@ const scopeCount = (id: string): number => ENTITIES.filter((e) => e.scope === id
     flex: none;
     padding: 1px 6px;
     border-radius: var(--radius-100);
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.4;
     white-space: nowrap;
     color: var(--color-commitment);
@@ -451,9 +451,9 @@ const scopeCount = (id: string): number => ENTITIES.filter((e) => e.scope === id
   .bcn-sr__row-title {
     flex: 0 1 auto;
     min-width: 0;
-    font-size: var(--type-size-200);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-200);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -464,13 +464,13 @@ const scopeCount = (id: string): number => ENTITIES.filter((e) => e.scope === id
   .bcn-sr__row-snippet {
     margin-top: var(--spacing-150);
     padding: var(--spacing-300) var(--spacing-350, 1.25rem);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     font-family: var(--font-decorative);
-    font-size: var(--type-size-150);
+    font-size: var(--font-size-150);
     line-height: 1.7;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     text-align: left;
   }
   .bcn-sr__row-snippet :global(p) { margin: 0; }
@@ -479,11 +479,11 @@ const scopeCount = (id: string): number => ENTITIES.filter((e) => e.scope === id
   .bcn-sr__row-snippet :global(.bcn-sr__row-more) {
     margin-top: 1em;
     padding-top: 0.7em;
-    border-top: 1px solid var(--color-border);
-    font-family: var(--font-sans, system-ui, sans-serif);
-    font-size: var(--type-size-100);
+    border-top: 1px solid var(--color-border-default);
+    font-family: var(--typography-font-family-sans, system-ui, sans-serif);
+    font-size: var(--font-size-100);
     font-style: normal;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-sr__row-snippet[hidden] { display: none; }
 
@@ -491,7 +491,7 @@ const scopeCount = (id: string): number => ENTITIES.filter((e) => e.scope === id
   .bcn-sr__row-title :global(mark),
   .bcn-sr__row-snippet :global(mark) {
     background: #fde047; /* highlighter yellow */
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     border-radius: 2px;
     padding: 0 1px;
   }
diff --git a/src/components/bcn/BcnSearchTrigger.astro b/src/components/bcn/BcnSearchTrigger.astro
index 02bc2ca2..631027d0 100644
--- a/src/components/bcn/BcnSearchTrigger.astro
+++ b/src/components/bcn/BcnSearchTrigger.astro
@@ -33,23 +33,23 @@ const { placeholder = 'Search…' } = Astro.props;
     max-width: 520px;
     margin: 0 auto; /* centered in the topbar's center zone */
     padding: var(--spacing-150) var(--spacing-300);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     cursor: text;
     transition: border-color 150ms ease, background 150ms ease;
   }
   .bcn-search-trigger:hover {
-    border-color: var(--color-primary-border);
-    background: var(--color-surface-raised, var(--color-surface));
+    border-color: var(--color-border-brand);
+    background: var(--color-background-elevation-raised);
   }
   .bcn-search-trigger:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-background-brand);
     outline-offset: 2px;
   }
   .bcn-search-trigger :global(.esa-icon) {
     flex: none;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-search-trigger__placeholder {
     flex: 1;
@@ -58,8 +58,8 @@ const { placeholder = 'Search…' } = Astro.props;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: var(--type-size-200);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-200);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-search-trigger__kbd {
     display: inline-flex;
@@ -75,10 +75,10 @@ const { placeholder = 'Search…' } = Astro.props;
     padding: 0 4px;
     font-family: inherit;
     font-size: 11px;
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-tertiary);
-    background: var(--color-surface-sunken);
-    border: 1px solid var(--color-border);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-tertiary);
+    background: var(--color-background-elevation-sunken);
+    border: 1px solid var(--color-border-default);
     border-radius: 4px;
   }
 
diff --git a/src/components/bcn/BcnSeasonCard.astro b/src/components/bcn/BcnSeasonCard.astro
index 0bf7470b..cfc77ada 100644
--- a/src/components/bcn/BcnSeasonCard.astro
+++ b/src/components/bcn/BcnSeasonCard.astro
@@ -90,8 +90,8 @@ const CALENDAR =
     display: flex;
     flex-direction: column;
     padding: var(--spacing-150) var(--spacing-250) var(--spacing-250);
-    background: var(--color-surface-sunken);
-    border: 1px solid var(--color-border); /* mid gray (round 7) */
+    background: var(--color-background-elevation-sunken);
+    border: 1px solid var(--color-border-default); /* mid gray (round 7) */
     border-radius: var(--radius-200);
   }
 
@@ -110,18 +110,18 @@ const CALENDAR =
   }
   .bcn-season-card__icon {
     display: inline-flex;
-    color: var(--color-text-muted);
+    color: var(--bcn-content-muted);
   }
   .bcn-season-card__title {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   /* Prod's teal range read-out (#0a6562) — the same value as --bcn-teal-800. */
   .bcn-season-card__dates {
     font-size: 0.8125rem; /* 13px — the meta floor */
-    font-weight: var(--font-weight-medium);
-    color: var(--bcn-teal-800, var(--color-secondary-hover));
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--bcn-teal-800, var(--color-background-brand-muted-hover));
     white-space: nowrap;
   }
   .bcn-season-card__actions {
@@ -145,18 +145,18 @@ const CALENDAR =
      card (round 7). */
   .bcn-season-card__seg--middle {
     position: relative;
-    background: var(--color-secondary);
+    background: var(--color-background-brand-muted);
   }
   .bcn-season-card__seg--first,
   .bcn-season-card__seg--last {
-    background: var(--color-border-strong);
+    background: var(--color-border-default-strong);
   }
   [data-wraps] .bcn-season-card__seg--middle {
-    background: var(--color-border-strong);
+    background: var(--color-border-default-strong);
   }
   [data-wraps] .bcn-season-card__seg--first,
   [data-wraps] .bcn-season-card__seg--last {
-    background: var(--color-secondary);
+    background: var(--color-background-brand-muted);
   }
   /* Boundary dots ride the middle segment's ends (prod's ::before/::after). */
   .bcn-season-card__seg--middle::before,
@@ -167,7 +167,7 @@ const CALENDAR =
     width: 8px;
     height: 8px;
     border-radius: var(--radius-full);
-    background: var(--color-secondary);
+    background: var(--color-background-brand-muted);
   }
   .bcn-season-card__seg--middle::before { left: -4px; }
   .bcn-season-card__seg--middle::after { right: -4px; }
@@ -190,7 +190,7 @@ const CALENDAR =
     gap: var(--spacing-200);
     margin-top: var(--spacing-200);
     font-size: 0.8125rem; /* 13px — the meta floor */
-    color: var(--color-text-muted);
+    color: var(--bcn-content-muted);
     white-space: nowrap;
   }
 </style>
diff --git a/src/components/bcn/BcnSectionIntro.astro b/src/components/bcn/BcnSectionIntro.astro
index 39f18bb4..0819ad13 100644
--- a/src/components/bcn/BcnSectionIntro.astro
+++ b/src/components/bcn/BcnSectionIntro.astro
@@ -44,27 +44,27 @@ const { eyebrow, headline, subtext, center = false, onDark = false } = Astro.pro
   .bcn-section-intro__eyebrow {
     display: block;
     font-size: 12px;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     text-transform: uppercase;
     letter-spacing: 2px;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     margin-block-end: var(--spacing-300);
   }
 
   .bcn-section-intro__headline {
     margin: 0 0 var(--spacing-400);
-    font-family: var(--font-decorative, var(--font-sans));
-    font-size: var(--type-size-700);
-    font-weight: var(--font-weight-bold);
+    font-family: var(--font-decorative, var(--typography-font-family-sans));
+    font-size: var(--font-size-700);
+    font-weight: var(--typography-font-weight-bold);
     line-height: var(--line-height-tight, 1.25);
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     text-wrap: balance;
   }
 
   .bcn-section-intro__accent {
     inline-size: 48px;
     block-size: 4px;
-    background: var(--color-primary);
+    background: var(--color-background-brand);
     border-radius: var(--radius-full, 9999px);
     margin-block-end: var(--spacing-400);
   }
@@ -74,8 +74,8 @@ const { eyebrow, headline, subtext, center = false, onDark = false } = Astro.pro
 
   .bcn-section-intro__subtext {
     margin: 0;
-    font-size: var(--type-size-300);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-300);
+    color: var(--color-content-default-secondary);
     max-inline-size: 820px;
     line-height: var(--line-height-relaxed, 1.75);
     text-wrap: balance;
diff --git a/src/components/bcn/BcnSettingRow.astro b/src/components/bcn/BcnSettingRow.astro
index 63f03f0b..f1412f9e 100644
--- a/src/components/bcn/BcnSettingRow.astro
+++ b/src/components/bcn/BcnSettingRow.astro
@@ -15,7 +15,7 @@
 //
 // ANCHORS: the wrapper carries id="s-<item.id>", so search results deep-link to
 // `#s-<id>`. Arriving there fires a :target animation that settles a synthesis-blue tint
-// (--color-info-subtle) back to transparent, which is what tells the reader WHICH row the
+// (--color-background-utility-info-subtle) back to transparent, which is what tells the reader WHICH row the
 // result meant. scroll-margin keeps the row clear of a sticky app bar.
 //
 // LABELLING: toggle / text / select / textarea each resolve to a single form-associated
@@ -83,20 +83,20 @@ const selectOptionsJson =
     <span class="bcn-setting-row__name cluster">
       {
         isGroup ? (
-          <span class="bcn-setting-row__label type-body" id={labelId}>
+          <span class="bcn-setting-row__label typography-body-md" id={labelId}>
             {item.label}
           </span>
         ) : (
-          <label class="bcn-setting-row__label type-body" id={labelId} for={controlId}>
+          <label class="bcn-setting-row__label typography-body-md" id={labelId} for={controlId}>
             {item.label}
           </label>
         )
       }
-      <span class="bcn-setting-row__saved type-body-small" data-setting-saved role="status" hidden>
+      <span class="bcn-setting-row__saved typography-body-sm" data-setting-saved role="status" hidden>
         Saved
       </span>
     </span>
-    <p class="bcn-setting-row__desc type-body-small">{item.description}</p>
+    <p class="bcn-setting-row__desc typography-body-sm">{item.description}</p>
   </div>
 
   <div class={controlClass} role={isGroup ? 'group' : undefined} aria-labelledby={isGroup ? labelId : undefined}>
@@ -160,7 +160,7 @@ const selectOptionsJson =
             </span>
             <EsaButton
               size="sm"
-              color="secondary"
+              variant="secondary"
               appearance="outline"
               icon="upload"
               aria-describedby={labelId}
@@ -179,7 +179,7 @@ const selectOptionsJson =
           {control.value.map((v) => (
             <EsaPill label={v} size="sm" removable={false} />
           ))}
-          <EsaButton size="sm" color="ghost" appearance="outline" icon="plus" aria-describedby={labelId}>
+          <EsaButton size="sm" variant="ghost" appearance="outline" icon="plus" aria-describedby={labelId}>
             Add
           </EsaButton>
         </>
@@ -294,8 +294,8 @@ const selectOptionsJson =
      a result shows WHICH row was meant. `both` holds the transparent end state. */
   @keyframes bcn-setting-row-target {
     from {
-      background-color: var(--color-info-subtle);
-      box-shadow: 0 0 0 1px var(--color-info-border);
+      background-color: var(--color-background-utility-info-subtle);
+      box-shadow: 0 0 0 1px var(--color-border-utility-info);
     }
     to {
       background-color: transparent;
@@ -309,8 +309,8 @@ const selectOptionsJson =
   @media (prefers-reduced-motion: reduce) {
     .bcn-setting-row:target {
       animation: none;
-      background-color: var(--color-info-subtle);
-      box-shadow: 0 0 0 1px var(--color-info-border);
+      background-color: var(--color-background-utility-info-subtle);
+      box-shadow: 0 0 0 1px var(--color-border-utility-info);
     }
   }
 
@@ -333,8 +333,8 @@ const selectOptionsJson =
      to ignore once trusted, present enough to answer "did that take?". */
   .bcn-setting-row__saved {
     line-height: 1.4;
-    font-weight: var(--font-weight-medium);
-    color: var(--color-success);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-background-utility-success);
     white-space: nowrap;
   }
   .bcn-setting-row__saved[hidden] {
@@ -345,12 +345,12 @@ const selectOptionsJson =
      labelled row in the settings surface reads at one scale. */
   .bcn-setting-row__label {
     line-height: 1.4;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .bcn-setting-row__desc {
     line-height: 1.4;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     max-inline-size: 60ch;
   }
 
@@ -410,14 +410,14 @@ const selectOptionsJson =
     --gap: var(--spacing-250);
   }
   .bcn-setting-row__filename {
-    font-size: var(--type-size-150);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default);
   }
   .bcn-setting-row__filename.is-empty {
-    color: var(--color-text-muted);
+    color: var(--bcn-content-muted);
   }
   .bcn-setting-row__help {
-    font-size: var(--type-size-100);
+    font-size: var(--font-size-100);
     color: var(--form-help-color);
     text-align: end;
   }
diff --git a/src/components/bcn/BcnSettingsGrid.astro b/src/components/bcn/BcnSettingsGrid.astro
index c8fa413e..627c4297 100644
--- a/src/components/bcn/BcnSettingsGrid.astro
+++ b/src/components/bcn/BcnSettingsGrid.astro
@@ -208,7 +208,7 @@ const payload = { columns, rows, hasBadges };
 
   /* The first column leads the row — same weight the table's lead cell carried. */
   .bcn-settings-grid :global(.bcn-settings-grid__lead) {
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--typography-font-weight-medium);
   }
 
   /* Quiet badge: neutral surface, secondary ink, the 4px radius the settings chrome
@@ -217,10 +217,10 @@ const payload = { columns, rows, hasBadges };
     display: inline-block;
     padding: 2px var(--spacing-150);
     border-radius: var(--radius-100);
-    background: var(--color-surface-sunken);
-    color: var(--color-text-secondary);
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-medium);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-content-default-secondary);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-medium);
     line-height: 1.4;
   }
 
diff --git a/src/components/bcn/BcnSettingsNav.astro b/src/components/bcn/BcnSettingsNav.astro
index 99dfbc5a..8c50053a 100644
--- a/src/components/bcn/BcnSettingsNav.astro
+++ b/src/components/bcn/BcnSettingsNav.astro
@@ -75,7 +75,7 @@ const blocks = AUDIENCE_BLOCKS.map((block) => ({
       class={`bcn-settings-nav__block${block.id === 'esa-admin' ? ' bcn-settings-nav__block--esa' : ''}`}
       aria-labelledby={`settings-aud-${block.id}`}
     >
-      <h2 class="type-body bcn-settings-nav__aud" id={`settings-aud-${block.id}`}>
+      <h2 class="typography-body-md bcn-settings-nav__aud" id={`settings-aud-${block.id}`}>
         <span class="bcn-settings-nav__aud-icon" aria-hidden="true">
           <EsaIcon name={block.id} size="sm" paths={AUD_ICON_PATHS[block.id]} />
         </span>
@@ -84,7 +84,7 @@ const blocks = AUDIENCE_BLOCKS.map((block) => ({
       {block.zones.map(({ zone, pages }) => (
         <div class="bcn-settings-nav__group">
           <h3
-            class="type-label bcn-settings-nav__zone"
+            class="typography-label bcn-settings-nav__zone"
             id={`settings-zone-${block.id}-${zone.id}`}
           >
             {zone.title}
@@ -99,7 +99,7 @@ const blocks = AUDIENCE_BLOCKS.map((block) => ({
               return (
                 <li class="bcn-settings-nav__item">
                   <a
-                    class="type-body-small bcn-settings-nav__link"
+                    class="typography-body-sm bcn-settings-nav__link"
                     href={withBase(settingsPagePath(page.id))}
                     aria-current={page.id === activePageId ? 'page' : undefined}
                   >
@@ -140,7 +140,7 @@ const blocks = AUDIENCE_BLOCKS.map((block) => ({
   }
 
   /* The ESA Admin block is a dark-GLASS panel, deliberately the same chrome family as
-     the floating help bar (bcn-help-bar) rather than the flat --color-surface-inverse
+     the floating help bar (bcn-help-bar) rather than the flat --color-background-default-knockout
      it used to be: solid inverse read as a near-black slab dropped into the rail, while
      the translucent recipe lets the page value through and settles into a mid-charcoal.
      Same tokens, same blur, same fallbacks as the action bar. The panel IS the divider
@@ -185,7 +185,7 @@ const blocks = AUDIENCE_BLOCKS.map((block) => ({
   }
   /* Current page — the same "hover is half of current" logic as the light block, run in
      the other direction: on dark, the most prominent row is the LIGHTEST, so it takes a
-     16% ink wash. (--color-surface-inverse-hover is a solid near-black and would now sink
+     16% ink wash. (--color-background-default-knockout-hover is a solid near-black and would now sink
      the current row BELOW the glass it sits on.) */
   .bcn-settings-nav__block--esa .bcn-settings-nav__link[aria-current='page'] {
     background: color-mix(in srgb, #ffffff 18%, transparent);
@@ -196,8 +196,8 @@ const blocks = AUDIENCE_BLOCKS.map((block) => ({
     outline-color: #ffffff;
   }
 
-  /* Tier 1 — the audience heading, the strongest text in the rail: .type-body (a step
-     ABOVE the links' .type-body-small), semibold, primary ink, underscored by a
+  /* Tier 1 — the audience heading, the strongest text in the rail: .typography-body-md (a step
+     ABOVE the links' .typography-body-sm), semibold, primary ink, underscored by a
      hairline that fences the heading off from its first zone group. */
   .bcn-settings-nav__aud {
     display: flex;
@@ -206,9 +206,9 @@ const blocks = AUDIENCE_BLOCKS.map((block) => ({
     margin: 0;
     padding-inline: var(--spacing-300, 0.75rem);
     padding-block-end: var(--spacing-200, 0.5rem);
-    border-block-end: 1px solid var(--color-border-light, var(--color-border));
-    font-weight: var(--font-weight-semibold, 600);
-    color: var(--color-text-primary);
+    border-block-end: 1px solid var(--color-border-default-subtle, var(--color-border-default));
+    font-weight: var(--typography-font-weight-semibold, 600);
+    color: var(--color-content-default);
   }
   /* The glyph hangs off the heading's own ink; flex kills its baseline slack. */
   .bcn-settings-nav__aud-icon {
@@ -231,10 +231,10 @@ const blocks = AUDIENCE_BLOCKS.map((block) => ({
     padding-inline: var(--spacing-300, 0.75rem);
     text-transform: uppercase;
     letter-spacing: 0.06em;
-    /* Bold, not the type-label role's default weight (Andy, 2026-07-30) — at eyebrow
+    /* Bold, not the typography-label role's default weight (Andy, 2026-07-30) — at eyebrow
        size the extra weight is what keeps the label legible against its tracking. */
-    font-weight: var(--font-weight-bold, 700);
-    color: var(--color-text-tertiary);
+    font-weight: var(--typography-font-weight-bold, 700);
+    color: var(--color-content-default-tertiary);
   }
 
   .bcn-settings-nav__list {
@@ -251,13 +251,13 @@ const blocks = AUDIENCE_BLOCKS.map((block) => ({
     align-items: center;
     justify-content: space-between;
     gap: var(--spacing-200, 0.5rem);
-    /* 13px, under the type-body-small role it carries — Andy's explicit call for this
+    /* 13px, under the typography-body-sm role it carries — Andy's explicit call for this
        rail (2026-07-30), same override register as the eyebrow labels above. Do not
        "fix" back to 14 on review. */
     font-size: 0.8125rem;
     padding: var(--spacing-150, 0.375rem) var(--spacing-300, 0.75rem);
     border-radius: var(--radius-200, 0.5rem);
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     text-decoration: none;
     transition: background 0.1s ease, color 0.1s ease;
   }
@@ -273,8 +273,8 @@ const blocks = AUDIENCE_BLOCKS.map((block) => ({
     line-height: 1.2;
     padding: 1px 5px;
     border-radius: var(--radius-100, 0.25rem); /* 4px */
-    background: var(--color-surface-sunken);
-    color: var(--color-text-secondary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-content-default-secondary);
     font-variant-numeric: tabular-nums;
   }
   .bcn-settings-nav__block--esa .bcn-settings-nav__count {
@@ -285,7 +285,7 @@ const blocks = AUDIENCE_BLOCKS.map((block) => ({
      doesn't vanish against the active row's own wash. */
   .bcn-settings-nav__link[aria-current='page'] .bcn-settings-nav__count {
     color: inherit;
-    background: color-mix(in srgb, var(--color-text-primary) 10%, transparent);
+    background: color-mix(in srgb, var(--color-content-default) 10%, transparent);
   }
   .bcn-settings-nav__block--esa .bcn-settings-nav__link[aria-current='page'] .bcn-settings-nav__count {
     background: color-mix(in srgb, #ffffff 20%, transparent);
@@ -293,12 +293,12 @@ const blocks = AUDIENCE_BLOCKS.map((block) => ({
   /* Hover — HALF the sunken wash, so the current row stays the darkest thing in the
      rail. Both states are neutral, so value is the only thing separating them. */
   .bcn-settings-nav__link:hover {
-    background: color-mix(in srgb, var(--color-surface-sunken) 50%, transparent);
-    color: var(--color-text-primary);
+    background: color-mix(in srgb, var(--color-background-elevation-sunken) 50%, transparent);
+    color: var(--color-content-default);
   }
   .bcn-settings-nav__link:focus-visible {
     outline: var(--focus-ring-width, 2px) solid
-      var(--focus-ring-color, var(--color-text-link, #005862));
+      var(--focus-ring-color, var(--color-content-link, #005862));
     outline-offset: 2px;
   }
 
@@ -306,7 +306,7 @@ const blocks = AUDIENCE_BLOCKS.map((block) => ({
      sunken wash, primary ink. Weight stays NORMAL (Andy, 2026-07-30) — the wash alone
      carries the state, and a weight change makes the row jitter as you navigate. */
   .bcn-settings-nav__link[aria-current='page'] {
-    background: var(--color-surface-sunken);
-    color: var(--color-text-primary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-content-default);
   }
 </style>
diff --git a/src/components/bcn/BcnSettingsSearch.astro b/src/components/bcn/BcnSettingsSearch.astro
index be184787..5777252c 100644
--- a/src/components/bcn/BcnSettingsSearch.astro
+++ b/src/components/bcn/BcnSettingsSearch.astro
@@ -197,9 +197,12 @@ for (const page of SETTINGS_PAGES) {
      tokens default to an off-brand ring, so point them at the house link color. Scoped
      to this one field, so nothing leaks. */
   .bcn-settings-search__field {
-    --form-padding-x-md: 2rem;
-    --form-border-color-focus: var(--color-text-link);
-    --focus-ring-color: var(--color-text-link);
+    /* Private hook: the public --form-padding-* surface was deleted upstream
+       (form-padding-to-spacing, no successor). Same reach-in as BcnEvidenceSearch;
+       a leading-icon slot on the field legos is the pending hub request. */
+    --_field-padding-x: 2rem;
+    --form-border-color-focus: var(--color-content-link);
+    --focus-ring-color: var(--color-content-link);
     display: block;
   }
 
@@ -211,14 +214,14 @@ for (const page of SETTINGS_PAGES) {
     transform: translateY(-50%);
     display: inline-flex;
     z-index: 1;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     pointer-events: none;
   }
 
   /* ── Results panel: an overlay hung under the field, over the nav ── */
   /* Elevation is the white card surface plus a shadow — the semantic layer has no
-     surface-raised token, so --color-surface (white on the rail's off-white ground) IS the
-     raised value, and --shadow-300 lifts it off the nav rows showing through around it.
+     surface-raised token, so --color-background-elevation-raised (white on the rail's off-white ground) IS the
+     raised value, and --elevation-4 lifts it off the nav rows showing through around it.
      z-index 30 only has to beat the nav below (everything in the rail is auto/0); it stays
      far under the fixed topbar (1100) and any dialog, so an open panel can never cover
      app chrome. Scrolls internally once the ten ranked rows plus the count exceed the cap. */
@@ -231,10 +234,10 @@ for (const page of SETTINGS_PAGES) {
     flex-direction: column;
     max-block-size: min(24rem, 60vh);
     overflow-y: auto;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-100);
-    box-shadow: var(--shadow-300);
+    box-shadow: var(--elevation-4);
   }
   .bcn-settings-search__panel[hidden] {
     display: none;
@@ -248,9 +251,9 @@ for (const page of SETTINGS_PAGES) {
     gap: var(--spacing-200);
     margin: 0;
     padding: var(--spacing-150) var(--spacing-250);
-    border-bottom: 1px solid var(--color-border-light, var(--color-border));
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    border-bottom: 1px solid var(--color-border-default-subtle, var(--color-border-default));
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
   }
   .bcn-settings-search__count kbd {
     display: inline-flex;
@@ -261,10 +264,10 @@ for (const page of SETTINGS_PAGES) {
     padding: 0 5px;
     font-family: inherit;
     font-size: 11px;
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-tertiary);
-    background: var(--color-surface-sunken);
-    border: 1px solid var(--color-border);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-tertiary);
+    background: var(--color-background-elevation-sunken);
+    border: 1px solid var(--color-border-default);
     border-radius: 4px;
   }
 
@@ -292,18 +295,18 @@ for (const page of SETTINGS_PAGES) {
   }
   .bcn-settings-search__result:hover,
   .bcn-settings-search__result.is-active {
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
 
   .bcn-settings-search__result-label {
-    font-size: var(--type-size-200);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-200);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default);
     line-height: 1.35;
   }
   .bcn-settings-search__result:hover .bcn-settings-search__result-label,
   .bcn-settings-search__result.is-active .bcn-settings-search__result-label {
-    color: var(--color-text-link);
+    color: var(--color-content-link);
   }
 
   /* Matched substring — highlighter-yellow with dark text, the one search-hit treatment
@@ -311,15 +314,15 @@ for (const page of SETTINGS_PAGES) {
      the controller, so it needs :global() under the scoped label class. */
   .bcn-settings-search__result-label :global(mark) {
     background: #fde047;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     border-radius: 2px;
     padding: 0 1px;
   }
 
   /* Zone · page breadcrumb — genuine meta. */
   .bcn-settings-search__result-meta {
-    font-size: var(--type-size-150);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-tertiary);
     line-height: 1.4;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -330,12 +333,12 @@ for (const page of SETTINGS_PAGES) {
   .bcn-settings-search__empty {
     margin: 0;
     padding: var(--spacing-200) var(--spacing-250);
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
   }
   .bcn-settings-search__more {
-    border-top: 1px solid var(--color-border-light, var(--color-border));
-    color: var(--color-text-tertiary);
+    border-top: 1px solid var(--color-border-default-subtle, var(--color-border-default));
+    color: var(--color-content-default-tertiary);
   }
   .bcn-settings-search__more[hidden],
   .bcn-settings-search__empty[hidden] {
diff --git a/src/components/bcn/BcnSettingsSection.astro b/src/components/bcn/BcnSettingsSection.astro
index d7e9809b..787641e6 100644
--- a/src/components/bcn/BcnSettingsSection.astro
+++ b/src/components/bcn/BcnSettingsSection.astro
@@ -71,7 +71,7 @@ const isSample =
 
 <section id={anchorId} class="bcn-set">
   <EsaCard variant="outlined" title={section.title}>
-    {section.description && <p class="bcn-set__desc type-body">{section.description}</p>}
+    {section.description && <p class="bcn-set__desc typography-body-md">{section.description}</p>}
     {
       /* EVERY collection's add action sits in the card HEADER, right-aligned by
          esa-card's own actions slot (grids first, then the table sections joined them —
@@ -87,7 +87,7 @@ const isSample =
         <EsaButton
           slot="actions"
           size="sm"
-          color="ghost"
+          variant="ghost"
           appearance="outline"
           icon="plus"
           data-settings-add={section.id}
@@ -212,7 +212,7 @@ const isSample =
     flex-direction: column;
   }
   .bcn-set__rows > li + li {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
 
   /* ── pairs: a table that scrolls inside its own container when the three columns
@@ -228,12 +228,12 @@ const isSample =
 
   .bcn-set__th {
     padding: 0 var(--spacing-400) var(--spacing-250);
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-secondary);
     text-align: left;
     white-space: nowrap;
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border-default);
   }
 
   /* Cells carry the tenant's own terms, so they read as CONTENT in primary ink, not as
@@ -241,14 +241,14 @@ const isSample =
      (1.6) steps — neither lands where a dense data row wants to sit. */
   .bcn-set__td {
     padding: var(--spacing-250) var(--spacing-400);
-    font-size: var(--type-size-200);
+    font-size: var(--font-size-200);
     line-height: 1.4;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     text-align: left;
     vertical-align: middle;
   }
   .bcn-set__tr + .bcn-set__tr .bcn-set__td {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
 
   /* Flush the outer columns with the card's content edge. */
@@ -263,8 +263,8 @@ const isSample =
 
   /* The first column leads the row. */
   .bcn-set__td--lead {
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default);
     white-space: nowrap;
   }
 
@@ -275,15 +275,15 @@ const isSample =
      first thing in the body instead. */
   .bcn-set__desc {
     margin: 0 0 var(--spacing-400);
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   /* How much of the list is on screen — a caption for the list above it, so it sits
      quiet: the 14px step, tertiary ink, no rule of its own. */
   .bcn-set__count {
     margin: var(--spacing-250) 0 0;
-    font-size: var(--type-size-150);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-tertiary);
   }
 
   /* Terminology override fields. */
diff --git a/src/components/bcn/BcnSettingsShell.astro b/src/components/bcn/BcnSettingsShell.astro
index e2794f6e..66fd2db7 100644
--- a/src/components/bcn/BcnSettingsShell.astro
+++ b/src/components/bcn/BcnSettingsShell.astro
@@ -86,7 +86,7 @@ const { activePageId, esaSurface = false } = Astro.props;
   .bcn-settings-shell__content {
     min-inline-size: 0; /* let long tables/code scroll inside the column, not widen it */
     /* Settings cards sit on pure white (Andy's call, 2026-07-29) — esa-card's default
-       --color-surface is the theme's near-white gray, which read as tinted against the
+       --color-background-elevation-raised is the theme's near-white gray, which read as tinted against the
        page. Re-pointed once here through the lego's own public token so every card in
        the slotted content inherits it. */
     --card-bg: #ffffff;
@@ -121,8 +121,8 @@ const { activePageId, esaSurface = false } = Astro.props;
      band itself is stated through esa-card's public tokens. Nothing else in the header
      reads them. */
   .bcn-settings-shell__content[data-esa-surface] :global(.esa-card__header .esa-card__actions) {
-    --color-text-primary: #ffffff;
-    --color-border: color-mix(in srgb, #ffffff 42%, transparent);
-    --color-surface-sunken: color-mix(in srgb, #ffffff 16%, transparent);
+    --color-content-default: #ffffff;
+    --color-border-default: color-mix(in srgb, #ffffff 42%, transparent);
+    --color-background-elevation-sunken: color-mix(in srgb, #ffffff 16%, transparent);
   }
 </style>
diff --git a/src/components/bcn/BcnSetupWizardCard.astro b/src/components/bcn/BcnSetupWizardCard.astro
index 246121f5..012279b8 100644
--- a/src/components/bcn/BcnSetupWizardCard.astro
+++ b/src/components/bcn/BcnSetupWizardCard.astro
@@ -38,7 +38,7 @@ const linkHref = (href: string) => (href.startsWith('/') ? withBase(href) : href
     <span class="bcn-swc__mark"><EsaIcon name="compass" size="md" paths={COMPASS} /></span>
     <span class="bcn-swc__title">Setup Wizard</span>
     <span class="bcn-swc__cta">
-      <EsaButton color="primary" href={linkHref(WIZARD_HREF)}>Continue setup</EsaButton>
+      <EsaButton variant="primary" href={linkHref(WIZARD_HREF)}>Continue setup</EsaButton>
     </span>
   </div>
 
@@ -75,8 +75,8 @@ const linkHref = (href: string) => (href.startsWith('/') ? withBase(href) : href
     flex-direction: column;
     gap: var(--spacing-400);
     padding: var(--spacing-500);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
   }
 
@@ -94,14 +94,14 @@ const linkHref = (href: string) => (href.startsWith('/') ? withBase(href) : href
     height: 32px;
     flex-shrink: 0;
     border-radius: var(--radius-full);
-    background: var(--bcn-teal-600, var(--color-secondary));
-    color: var(--color-text-inverse);
+    background: var(--bcn-teal-600, var(--color-background-brand-muted));
+    color: var(--color-content-default-knockout);
   }
   .bcn-swc__title {
-    font-family: var(--font-decorative, var(--font-sans));
-    font-weight: var(--font-weight-bold);
-    font-size: var(--type-size-300);
-    color: var(--color-text-primary);
+    font-family: var(--font-decorative, var(--typography-font-family-sans));
+    font-weight: var(--typography-font-weight-bold);
+    font-size: var(--font-size-300);
+    color: var(--color-content-default);
   }
   .bcn-swc__cta { margin-left: auto; flex-shrink: 0; }
 
@@ -110,7 +110,7 @@ const linkHref = (href: string) => (href.startsWith('/') ? withBase(href) : href
     list-style: none;
     margin: 0;
     padding: var(--spacing-400) 0 0;
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: var(--spacing-400);
@@ -131,14 +131,14 @@ const linkHref = (href: string) => (href.startsWith('/') ? withBase(href) : href
     min-width: 0;
     height: 100%;
     padding: var(--spacing-400);
-    background: var(--color-surface-sunken);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-sunken);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     text-decoration: none;
     color: inherit;
     transition: border-color 150ms ease;
   }
-  .bcn-swc__link:hover { border-color: var(--color-border-strong); }
+  .bcn-swc__link:hover { border-color: var(--color-border-default-strong); }
   .bcn-swc__link:hover .bcn-swc__label { color: var(--_step); }
 
   /* Two-line min-height so a wrapping label ("Source Documents") doesn't push
@@ -159,14 +159,14 @@ const linkHref = (href: string) => (href.startsWith('/') ? withBase(href) : href
     flex-shrink: 0;
     border-radius: var(--radius-full);
     background: var(--_step);
-    color: var(--color-text-inverse);
+    color: var(--color-content-default-knockout);
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
   }
   .bcn-swc__label {
-    font-size: var(--type-size-200);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-200);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     line-height: var(--line-height-tight);
   }
 
@@ -188,14 +188,14 @@ const linkHref = (href: string) => (href.startsWith('/') ? withBase(href) : href
     align-items: center;
     gap: var(--spacing-100);
     font-size: 0.8125rem; /* 13px — meta floor */
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     min-width: 0;
   }
   .bcn-swc__stat dd {
     margin: 0;
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     font-variant-numeric: tabular-nums;
     flex-shrink: 0;
   }
@@ -204,7 +204,7 @@ const linkHref = (href: string) => (href.startsWith('/') ? withBase(href) : href
     width: 7px;
     height: 7px;
     border-radius: var(--radius-full);
-    background: var(--color-warning);
+    background: var(--color-background-utility-warning);
     flex-shrink: 0;
   }
 </style>
diff --git a/src/components/bcn/BcnSetupWorkspace.astro b/src/components/bcn/BcnSetupWorkspace.astro
index e4301cd0..59b5dfc5 100644
--- a/src/components/bcn/BcnSetupWorkspace.astro
+++ b/src/components/bcn/BcnSetupWorkspace.astro
@@ -75,7 +75,7 @@ import EsaStat from '@esa/ecology/esa-stat.astro';
 import EsaProgressBar from '@esa/ecology/esa-progress-bar.astro';
 import EsaBadge from '@esa/ecology/esa-badge.astro';
 import EsaIcon from '@esa/ecology/esa-icon.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import EsaButton from '@esa/ecology/esa-button.astro';
 import EsaEmptyState from '@esa/ecology/esa-empty-state.astro';
 import EsaAlertBox from '@esa/ecology/esa-alert-box.astro';
@@ -172,7 +172,7 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
         {/* The bar's lead slot is exactly what it was extracted for: a View pivot. The
             toggle carries its own `label` so the lego wires aria-labelledby onto its
             radiogroup — a leadLabel here would only duplicate it.
-            size="md", not "sm": at sm the lego resolves --form-font-size-sm (12px) for
+            size="md", not "sm": at sm the lego resolves --typography-label-xs-font-size (12px) for
             BOTH its label and its segment text, and these segments are this drawer's
             primary navigation — 12px is under the house floor. md lands at 15px / 36px.
             It sits in the bar's TOP band, so it has no same-row sibling to match. */}
@@ -209,9 +209,9 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
           <esa-checkbox size="sm" data-sw-check-all aria-label="Select every commitment in view"></esa-checkbox>
           <span class="bcn-sw__listcount" data-sw-listcount></span>
           <span class="bcn-sw__listacts" data-sw-bulk hidden>
-            <EsaButton size="sm" color="primary" data-sw-bulk-apply>Apply</EsaButton>
-            <EsaButton size="sm" color="ghost" appearance="outline" data-sw-bulk-dismiss>Dismiss</EsaButton>
-            <EsaButton size="sm" color="ghost" data-sw-bulk-clear>Clear</EsaButton>
+            <EsaButton size="sm" variant="primary" data-sw-bulk-apply>Apply</EsaButton>
+            <EsaButton size="sm" variant="ghost" appearance="outline" data-sw-bulk-dismiss>Dismiss</EsaButton>
+            <EsaButton size="sm" variant="ghost" data-sw-bulk-clear>Clear</EsaButton>
           </span>
         </div>
 
@@ -277,18 +277,18 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
                     <span class="bcn-sw-row__acts">
                       <esa-tooltip text="Apply to this component" position="top">
                         <span data-sw-apply={c.id}>
-                          <EsaIconButton icon="check" label={`Apply ${c.code}`} size="sm" />
+                          <EsaIconButton variant="chrome" iconOnly icon="check" label={`Apply ${c.code}`} size="sm" />
                         </span>
                       </esa-tooltip>
                       <esa-tooltip text="Not applicable" position="top">
                         <span data-sw-dismiss={c.id}>
-                          <EsaIconButton icon="x" label={`Dismiss ${c.code}`} size="sm" />
+                          <EsaIconButton variant="chrome" iconOnly icon="x" label={`Dismiss ${c.code}`} size="sm" />
                         </span>
                       </esa-tooltip>
                       <span class="bcn-sw-row__undo">
                         <esa-tooltip text="Undo this decision" position="top">
                           <span data-sw-undo={c.id}>
-                            <EsaIconButton icon="rotate-ccw" label={`Undo ${c.code}`} size="sm" />
+                            <EsaIconButton variant="chrome" iconOnly icon="rotate-ccw" label={`Undo ${c.code}`} size="sm" />
                           </span>
                         </esa-tooltip>
                       </span>
@@ -388,8 +388,8 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
        with the primary LEFT of Cancel. ── -->
   <div slot="footer" class="bcn-sw__foot">
     <span class="bcn-sw__footacts">
-      <EsaButton color="primary" data-sw-save>Save decisions</EsaButton>
-      <EsaButton color="ghost" appearance="outline" data-sw-cancel>Cancel</EsaButton>
+      <EsaButton variant="primary" data-sw-save>Save decisions</EsaButton>
+      <EsaButton variant="ghost" appearance="outline" data-sw-cancel>Cancel</EsaButton>
     </span>
   </div>
 </esa-side-dialog>
@@ -399,7 +399,7 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
      count of what is about to be lost is never shown. ── -->
 <esa-dialog id={`${id}-rationale`} class="bcn-sw-rationale" heading="Apply commitments" data-sw-dialog>
   <div class="bcn-sw-rationale__body">
-    <p class="bcn-sw-rationale__what type-body" data-sw-dialog-what></p>
+    <p class="bcn-sw-rationale__what typography-body-md" data-sw-dialog-what></p>
 
     <div class="bcn-sw-rationale__warn" data-sw-dialog-warn hidden>
       <EsaAlertBox variant="warning" title="This replaces a rationale already on record">
@@ -416,8 +416,8 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
   </div>
 
   <div slot="footer" class="bcn-sw-rationale__foot">
-    <EsaButton color="primary" data-sw-dialog-confirm>Apply</EsaButton>
-    <EsaButton color="ghost" appearance="outline" data-sw-dialog-cancel>Cancel</EsaButton>
+    <EsaButton variant="primary" data-sw-dialog-confirm>Apply</EsaButton>
+    <EsaButton variant="ghost" appearance="outline" data-sw-dialog-cancel>Cancel</EsaButton>
   </div>
 </esa-dialog>
 
@@ -447,13 +447,13 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
     --side-dialog-width-lg: 1180px;
     --z-modal-backdrop: 1300;
     --z-modal: 1301;
-    --backdrop-filter: blur(2px);
-    /* Every small CONTROL in this drawer reads 14px, not 12px. --form-font-size-sm
-       resolves to --type-size-100 (12px), which is the right density for a chip but
+    --side-dialog-backdrop-filter: blur(2px);
+    /* Every small CONTROL in this drawer reads 14px, not 12px. --typography-label-xs-font-size
+       resolves to --font-size-100 (12px), which is the right density for a chip but
        under the house floor for something you click — the inline Apply / Dismiss and
        the bulk bar are actions, not meta. Re-pointed once here so a control never
        disagrees with its neighbour, rather than patched per button. */
-    --form-font-size-sm: var(--type-size-150);
+    --typography-label-xs-font-size: var(--font-size-150);
   }
 
   /* The lego's .body is a definite-height flex child, so height:100% here fills it
@@ -464,7 +464,7 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
     gap: var(--spacing-400);
     height: 100%;
     min-height: 0;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
 
   /* Header slot: workflow glyph, name, and the record it acts on as a badge. */
@@ -476,12 +476,12 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
   }
   .bcn-sw__headtitle {
     margin: 0;
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     white-space: nowrap;
   }
-  .bcn-sw__head :global(.esa-icon) { color: var(--color-text-secondary); }
+  .bcn-sw__head :global(.esa-icon) { color: var(--color-content-default-secondary); }
   /* The record badge is a LABEL, not a status: quiet hairline and text, per the house
      badge standard. esa-badge's variants are all saturated FILLS, which put a block of
      brand colour in the title bar and made the component's name read as an alert.
@@ -489,9 +489,9 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
      class sets those properties directly, so re-pointing the token does nothing. */
   .bcn-sw__head :global(.esa-badge) {
     background: transparent;
-    color: var(--color-text-secondary);
-    border: 1px solid var(--color-border);
-    font-weight: var(--font-weight-medium);
+    color: var(--color-content-default-secondary);
+    border: 1px solid var(--color-border-default);
+    font-weight: var(--typography-font-weight-medium);
   }
 
   .bcn-sw__search {
@@ -509,7 +509,7 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
   }
   .bcn-sw__scope {
     margin: 0;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .bcn-sw__figures {
     display: flex;
@@ -521,7 +521,7 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
     min-width: 0;
     /* One step down from the lego default: three figures on one band, and the drawer is
        a work surface, not a dashboard hero. */
-    --stat-value-size: var(--type-size-600);
+    --stat-value-size: var(--font-size-600);
   }
   .bcn-sw__figure--progress {
     display: flex;
@@ -543,14 +543,14 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
   /* The pill row rides inside the filter container. Every possible chip is pre-rendered
      (esa-filter-pills is compile-time) and the controller reveals the active ones; the
      wrapper itself hides when none are, so an empty bar has no stray gap.
-     Neutral chips: --color-primary-bg is not a Beacon token, so the lego's default pill
+     Neutral chips: --color-background-brand-muted is not a Beacon token, so the lego's default pill
      fill would resolve to its literal green fallback. Re-point to the house neutral pair. */
   .bcn-sw__pills {
     display: inline-flex;
     min-width: 0;
-    --filter-pill-bg: var(--color-surface-sunken);
-    --filter-pill-bg-hover: var(--color-border);
-    --filter-pill-text: var(--color-text-primary);
+    --filter-pill-bg: var(--color-background-elevation-sunken);
+    --filter-pill-bg-hover: var(--color-border-default);
+    --filter-pill-text: var(--color-content-default);
   }
   .bcn-sw__pills[hidden] {
     display: none;
@@ -579,13 +579,13 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
     flex-direction: column;
     min-height: 0;
     min-width: 0;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
   }
   .bcn-sw__pane--list {
     position: relative;
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
     overflow: hidden;
   }
   .bcn-sw__scroll {
@@ -624,9 +624,9 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
     align-items: start;
     column-gap: var(--spacing-400);
     padding: var(--spacing-250, 0.625rem) var(--spacing-300);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     transition:
       border-color 120ms ease,
       background 120ms ease;
@@ -657,7 +657,7 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
     cursor: pointer;
   }
   .bcn-sw-row:hover {
-    border-color: var(--color-border-strong);
+    border-color: var(--color-border-default-strong);
   }
   /* …except the two regions that do something else. */
   .bcn-sw-row__check,
@@ -666,8 +666,8 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
   }
   /* Being previewed. A tint plus a full border — never a coloured left edge. */
   .bcn-sw-row[data-active] {
-    border-color: var(--color-primary);
-    background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
+    border-color: var(--color-background-brand);
+    background: color-mix(in srgb, var(--color-background-brand) 5%, var(--color-background-elevation-raised));
   }
   /* Vertically centred on the title line, not the whole card, so it reads as
      belonging to the row rather than floating in the gutter. */
@@ -708,10 +708,10 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
   .bcn-sw-row__name {
     min-width: 0;
     /* 14px — the dense-surface base. This is a scan-and-pick list, not prose. */
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.35;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -719,10 +719,10 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
   /* The suggestion marker: a quiet 4px badge, tinted away from the entity ramp so it
      cannot be mistaken for one. Same treatment as the evidence drawer's. */
   .bcn-sw-row__mark :global(.esa-badge) {
-    --badge-bg: var(--color-info-subtle);
-    --badge-text-color: var(--color-text-primary);
-    border: 1px solid color-mix(in srgb, var(--color-info) 35%, transparent);
-    font-weight: var(--font-weight-medium);
+    --badge-bg: var(--color-background-utility-info-subtle);
+    --badge-text-color: var(--color-content-default);
+    border: 1px solid color-mix(in srgb, var(--color-background-utility-info) 35%, transparent);
+    font-weight: var(--typography-font-weight-medium);
   }
   /* Decision chips — shown by the row's own data-decision, no JS toggling needed. */
   .bcn-sw-row__state {
@@ -739,16 +739,16 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
      wears the brand teal as text on the plain surface. */
   .bcn-sw-row__state--applied :global(.esa-badge) {
     --badge-bg: transparent;
-    --badge-text-color: var(--color-primary);
-    --badge-border-color: var(--color-primary-border, var(--color-border));
-    border: 1px solid var(--color-primary-border, var(--color-border));
-    font-weight: var(--font-weight-medium);
+    --badge-text-color: var(--color-background-brand);
+    --badge-border-color: var(--color-border-brand, var(--color-border-default));
+    border: 1px solid var(--color-border-brand, var(--color-border-default));
+    font-weight: var(--typography-font-weight-medium);
   }
   .bcn-sw-row__state--dismissed :global(.esa-badge) {
     --badge-bg: transparent;
-    --badge-text-color: var(--color-text-secondary);
-    border: 1px solid var(--color-border);
-    font-weight: var(--font-weight-medium);
+    --badge-text-color: var(--color-content-default-secondary);
+    border: 1px solid var(--color-border-default);
+    font-weight: var(--typography-font-weight-medium);
   }
   /* Inline actions: revealed on hover or when anything inside has focus, so keyboard
      users reach them too. Space is reserved by visibility, not display — the row's width
@@ -793,11 +793,11 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
     gap: var(--spacing-250, 0.625rem);
     min-height: 40px;
     padding: var(--spacing-200) var(--spacing-300);
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-default-subtle);
   }
   .bcn-sw__listcount {
     font-size: 0.8125rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
   }
@@ -828,10 +828,10 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
   }
   .bcn-sw-prev__title {
     margin: 0;
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.25;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   /* The document voice: Beacon's designated serif (Besley) on the citation surface, the
      same treatment the commitment detail page gives quoted regulatory language. */
@@ -843,7 +843,7 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
     font-family: var(--font-decorative);
     font-size: 1.0625rem;
     line-height: 1.65;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-sw-prev__facts {
     display: grid;
@@ -859,13 +859,13 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
     flex-direction: column;
     gap: var(--spacing-250, 0.625rem);
     padding-top: var(--spacing-300);
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .bcn-sw-prev__efftitle {
     margin: 0;
-    font-size: var(--type-size-200);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-200);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .bcn-sw-prev__actions {
     list-style: none;
@@ -880,25 +880,25 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
     align-items: center;
     gap: var(--spacing-200);
     padding: var(--spacing-200) var(--spacing-300);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-100);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
   }
   .bcn-sw-prev__actname {
     flex: 1;
     min-width: 0;
-    font-size: var(--type-size-150);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default);
   }
   .bcn-sw-prev__acttype :global(.esa-badge) {
-    --badge-bg: var(--color-surface-sunken);
-    --badge-text-color: var(--color-text-secondary);
-    font-weight: var(--font-weight-medium);
+    --badge-bg: var(--color-background-elevation-sunken);
+    --badge-text-color: var(--color-content-default-secondary);
+    font-weight: var(--typography-font-weight-medium);
   }
   .bcn-sw-prev__undo {
     margin: 0;
     font-size: 0.8125rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   .bcn-sw-prev__decision {
@@ -906,15 +906,15 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
     flex-wrap: wrap;
     gap: var(--spacing-300) var(--spacing-500);
     padding-top: var(--spacing-300);
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .bcn-sw-prev__decision[hidden] {
     display: none;
   }
   .bcn-sw-prev__decval,
   .bcn-sw-prev__rationale {
-    font-size: var(--form-font-size-md);
-    color: var(--color-text-primary);
+    font-size: var(--typography-label-md-font-size);
+    color: var(--color-content-default);
   }
 
   /* ── Footer ── */
@@ -944,7 +944,7 @@ const isNew = (addedOn: string) => addedOn > LAST_REVIEWED;
   }
   .bcn-sw-rationale__what {
     margin: 0;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-sw-rationale__warn[hidden] {
     display: none;
diff --git a/src/components/bcn/BcnSiblingNav.astro b/src/components/bcn/BcnSiblingNav.astro
index 2621d9e8..40b2777e 100644
--- a/src/components/bcn/BcnSiblingNav.astro
+++ b/src/components/bcn/BcnSiblingNav.astro
@@ -112,18 +112,18 @@ const linkHref = (href: string) => (href.startsWith('/') ? withBase(href) : href
     min-width: 0;
     padding: var(--spacing-100) var(--spacing-150);
     border-radius: var(--radius-100);
-    font-size: var(--type-size-150, 0.875rem);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150, 0.875rem);
+    color: var(--color-content-default-secondary);
     text-decoration: none;
   }
   a.bcn-sibnav__link:hover {
-    background: var(--color-surface-sunken);
-    color: var(--color-primary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-background-brand);
   }
   /* Ends stay in place rather than disappearing, so the row does not resize as you
      walk the set. */
   .bcn-sibnav__link--off {
-    color: var(--color-text-muted);
+    color: var(--bcn-content-muted);
     cursor: default;
   }
   .bcn-sibnav__label {
@@ -132,8 +132,8 @@ const linkHref = (href: string) => (href.startsWith('/') ? withBase(href) : href
     white-space: nowrap;
   }
   .bcn-sibnav__pos {
-    font-size: var(--type-size-150, 0.875rem);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150, 0.875rem);
+    color: var(--color-content-default-tertiary);
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
   }
diff --git a/src/components/bcn/BcnSolutionPhases.astro b/src/components/bcn/BcnSolutionPhases.astro
index fcec319b..38ae3b5b 100644
--- a/src/components/bcn/BcnSolutionPhases.astro
+++ b/src/components/bcn/BcnSolutionPhases.astro
@@ -34,8 +34,8 @@ import { SOLUTION_PHASES, MARKETING_ICON_PATHS } from '../../data/homepage';
   }
 
   .bcn-solution__card {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     padding: var(--spacing-600) var(--spacing-500);
     text-align: center;
@@ -45,7 +45,7 @@ import { SOLUTION_PHASES, MARKETING_ICON_PATHS } from '../../data/homepage';
   }
   .bcn-solution__card:hover {
     transform: translateY(-2px);
-    box-shadow: var(--shadow-200, 0 0 1.5rem rgba(0, 0, 0, 0.1));
+    box-shadow: var(--elevation-3, 0 0 1.5rem rgba(0, 0, 0, 0.1));
   }
 
   .bcn-solution__medallion {
@@ -61,13 +61,13 @@ import { SOLUTION_PHASES, MARKETING_ICON_PATHS } from '../../data/homepage';
   }
 
   .bcn-solution__title {
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-semibold);
     margin-block-end: var(--spacing-300);
   }
   .bcn-solution__desc {
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
     line-height: var(--line-height-relaxed, 1.75);
   }
 
diff --git a/src/components/bcn/BcnStarredComponents.astro b/src/components/bcn/BcnStarredComponents.astro
index ec1ef968..a8d11b7b 100644
--- a/src/components/bcn/BcnStarredComponents.astro
+++ b/src/components/bcn/BcnStarredComponents.astro
@@ -31,7 +31,7 @@
 // component list is a bare AG Grid). bcn-starred-components is the reusable home;
 // the glyphs are esa-icon and pulse color follows the theme via --_c.
 import EsaIcon from '@esa/ecology/esa-icon.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import { withBase } from '../../lib/base';
 import { PULSE_META, PROJECT, type StarredComponent, type MacroArea, type PulseStatus } from '../../data/project-dashboard';
 import { projectScopedByType, daysOut } from '../../data/project-actions';
@@ -72,7 +72,7 @@ const projectScopePulse = MACRO_AREAS.map((area) => {
     <!-- No lede — the starred cards and their pulses are self-describing
          (data-grounded review, 2026-08-03). -->
     <div class="bcn-stc__headings">
-      <h2 class="bcn-stc__title type-section-title">Components</h2>
+      <h2 class="bcn-stc__title typography-heading-md">Components</h2>
     </div>
     <a class="bcn-stc__all" href={ALL_COMPONENTS_HREF}>All 24 components <EsaIcon name="chevron-right" size="sm" /></a>
   </header>
@@ -110,7 +110,7 @@ const projectScopePulse = MACRO_AREAS.map((area) => {
         <div class="bcn-stc__card">
           <a class="bcn-stc__portal" href={linkHref(c.href)} aria-label={`Open the ${c.name} component dashboard`}></a>
           <span class="bcn-stc__star" data-star-toggle>
-            <EsaIconButton icon="star" label={`Unstar ${c.name}`} size="sm" />
+            <EsaIconButton variant="chrome" iconOnly icon="star" label={`Unstar ${c.name}`} size="sm" />
           </span>
           <div class="bcn-stc__main">
             <div class="bcn-stc__card-head">
@@ -165,18 +165,18 @@ const projectScopePulse = MACRO_AREAS.map((area) => {
     flex-wrap: wrap;
   }
   .bcn-stc__headings { display: flex; flex-direction: column; gap: var(--spacing-100); min-width: 0; }
-  .bcn-stc__title { margin: 0; color: var(--color-text-primary); }
-  .bcn-stc__lede { margin: 0; color: var(--color-text-secondary); max-width: 68ch; }
+  .bcn-stc__title { margin: 0; color: var(--color-content-default); }
+  .bcn-stc__lede { margin: 0; color: var(--color-content-default-secondary); max-width: 68ch; }
   .bcn-stc__all {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-100);
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-background-brand);
     white-space: nowrap;
   }
-  .bcn-stc__all:hover { color: var(--color-primary-hover); }
+  .bcn-stc__all:hover { color: var(--color-background-brand-hover); }
 
   /* 1-col stacked (Andy, round 2). */
   .bcn-stc__list { display: flex; flex-direction: column; gap: var(--spacing-300); }
@@ -191,8 +191,8 @@ const projectScopePulse = MACRO_AREAS.map((area) => {
     align-items: center;
     gap: var(--spacing-500);
     padding: var(--spacing-400) var(--spacing-500);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
     transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
   }
@@ -202,7 +202,7 @@ const projectScopePulse = MACRO_AREAS.map((area) => {
     border-radius: var(--radius-300);
   }
   .bcn-stc__portal:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-background-brand);
     outline-offset: -2px;
   }
   /* Star toggle — rides above the portal link; pressed = the user's star. */
@@ -213,14 +213,14 @@ const projectScopePulse = MACRO_AREAS.map((area) => {
     z-index: 1;
   }
   .bcn-stc__star :global(button[aria-pressed='true']) {
-    color: var(--color-warning);
+    color: var(--color-background-utility-warning);
   }
   .bcn-stc__star :global(button[aria-pressed='true'] svg) {
     fill: currentColor;
   }
   .bcn-stc__card:hover {
-    border-color: var(--color-border-strong);
-    box-shadow: var(--shadow-100, 0 2px 12px 0 rgba(0, 0, 0, 0.06));
+    border-color: var(--color-border-default-strong);
+    box-shadow: var(--elevation-2, 0 2px 12px 0 rgba(0, 0, 0, 0.06));
     transform: translateY(-1px);
   }
   @media (max-width: 720px) {
@@ -233,15 +233,15 @@ const projectScopePulse = MACRO_AREAS.map((area) => {
     gap: var(--spacing-300);
     min-width: 0;
     padding-right: var(--spacing-500);
-    border-right: 1px solid var(--color-border-light);
+    border-right: 1px solid var(--color-border-default-subtle);
   }
 
   .bcn-stc__card-head { display: flex; align-items: flex-start; gap: var(--spacing-300); }
   /* The project-scope row reads as the project itself, not a component: neutral
      glyph tile, no star. */
   .bcn-stc__glyph--scope {
-    background: var(--color-surface-sunken) !important;
-    color: var(--color-text-secondary) !important;
+    background: var(--color-background-elevation-sunken) !important;
+    color: var(--color-content-default-secondary) !important;
   }
   .bcn-stc__glyph {
     display: inline-flex;
@@ -253,17 +253,17 @@ const projectScopePulse = MACRO_AREAS.map((area) => {
     border-radius: var(--radius-200);
     /* The brand accent at low strength — 10% primary into the surface (Andy,
        round 4), matching the Tracking zone's wash family. */
-    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
-    color: var(--color-primary);
+    background: color-mix(in srgb, var(--color-background-brand) 10%, var(--color-background-elevation-raised));
+    color: var(--color-background-brand);
   }
   .bcn-stc__ident { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
   .bcn-stc__name {
-    font-size: var(--type-size-250, 1.0625rem);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-250, 1.0625rem);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     line-height: var(--line-height-tight);
   }
-  .bcn-stc__type { font-size: var(--type-size-150); color: var(--color-text-tertiary); }
+  .bcn-stc__type { font-size: var(--font-size-150); color: var(--color-content-default-tertiary); }
 
   .bcn-stc__dot {
     width: 9px;
@@ -290,7 +290,7 @@ const projectScopePulse = MACRO_AREAS.map((area) => {
     }
     .bcn-stc__pulse {
       padding: var(--spacing-300) 0 0;
-      border-top: 1px solid var(--color-border-light);
+      border-top: 1px solid var(--color-border-default-subtle);
     }
   }
   .bcn-stc__pulse-row {
@@ -301,13 +301,13 @@ const projectScopePulse = MACRO_AREAS.map((area) => {
     min-width: 0;
   }
   .bcn-stc__pulse-area {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .bcn-stc__pulse-note {
-    font-size: var(--type-size-150);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-tertiary);
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/src/components/bcn/BcnStatusChip.astro b/src/components/bcn/BcnStatusChip.astro
index 362021a0..c455fedd 100644
--- a/src/components/bcn/BcnStatusChip.astro
+++ b/src/components/bcn/BcnStatusChip.astro
@@ -40,8 +40,8 @@ const varKey = status === 'issued' ? 'cleared' : status;
     gap: var(--spacing-150);
     padding: 2px var(--spacing-250);
     border-radius: var(--radius-full);
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-semibold);
     white-space: nowrap;
     background: color-mix(in srgb, var(--_chip) 16%, transparent);
     color: color-mix(in srgb, var(--_chip) 72%, #1a1a1a);
diff --git a/src/components/bcn/BcnStatusSelect.astro b/src/components/bcn/BcnStatusSelect.astro
index c5acdd31..02ef5b5e 100644
--- a/src/components/bcn/BcnStatusSelect.astro
+++ b/src/components/bcn/BcnStatusSelect.astro
@@ -75,24 +75,24 @@ const selected = opts.find((o) => o.value === current) ?? opts[0];
 <style>
   /* Label matches the legos' .field__label (esa-date-picker / esa-select), 4px gap. */
   .bcn-status-select { display: flex; flex-direction: column; gap: var(--spacing-100); }
-  .bcn-status-select__label { font-size: 0.875rem; font-weight: var(--font-weight-medium); color: var(--form-label-color); }
+  .bcn-status-select__label { font-size: 0.875rem; font-weight: var(--typography-font-weight-medium); color: var(--form-label-color); }
 
   .bcn-status-select__dd { position: relative; }
   .bcn-status-select__trigger {
     display: flex; align-items: center; gap: var(--spacing-200); width: 100%;
     height: 40px; padding: 0 var(--spacing-300);
-    font-size: 0.875rem; font-weight: var(--font-weight-medium); color: var(--color-text-primary);
-    background: var(--color-surface); border: 1px solid var(--form-border-color);
-    border-radius: var(--form-radius-md); cursor: pointer;
+    font-size: 0.875rem; font-weight: var(--typography-font-weight-medium); color: var(--color-content-default);
+    background: var(--color-background-elevation-raised); border: 1px solid var(--form-border-color);
+    border-radius: var(--radius-md); cursor: pointer;
     transition: border-color 150ms ease, box-shadow 150ms ease;
   }
-  .bcn-status-select__trigger:hover { border-color: var(--color-border-strong); }
+  .bcn-status-select__trigger:hover { border-color: var(--color-border-default-strong); }
   .bcn-status-select__trigger[aria-expanded='true'] {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    border-color: var(--color-background-brand);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-background-brand) 18%, transparent);
   }
   .bcn-status-select__value { flex: 1; text-align: left; }
-  .bcn-status-select__chev { color: var(--color-text-tertiary); flex-shrink: 0; transition: transform 150ms ease; }
+  .bcn-status-select__chev { color: var(--color-content-default-tertiary); flex-shrink: 0; transition: transform 150ms ease; }
   .bcn-status-select__trigger[aria-expanded='true'] .bcn-status-select__chev { transform: rotate(180deg); }
 
   /* Default-set dot colors are token-driven (option mode supplies inline color instead). */
@@ -108,15 +108,15 @@ const selected = opts.find((o) => o.value === current) ?? opts[0];
     /* Grows to the longest option (min = trigger width) instead of wrapping rows. */
     position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; z-index: 20;
     margin: 0; padding: var(--spacing-100); list-style: none;
-    background: var(--color-surface); border: 1px solid var(--color-border);
-    border-radius: var(--form-radius-md); box-shadow: var(--shadow-300);
+    background: var(--color-background-elevation-raised); border: 1px solid var(--color-border-default);
+    border-radius: var(--radius-md); box-shadow: var(--elevation-4);
   }
   .bcn-status-select__menu[hidden] { display: none; }
   .bcn-status-select__opt {
     display: flex; align-items: center; gap: var(--spacing-200);
-    padding: var(--spacing-200) var(--spacing-300); font-size: 0.875rem; color: var(--color-text-primary);
+    padding: var(--spacing-200) var(--spacing-300); font-size: 0.875rem; color: var(--color-content-default);
     border-radius: var(--radius-200); cursor: pointer; white-space: nowrap;
   }
-  .bcn-status-select__opt:hover { background: var(--color-surface-sunken); }
-  .bcn-status-select__opt[aria-selected='true'] { background: var(--color-surface-sunken); font-weight: var(--font-weight-semibold); }
+  .bcn-status-select__opt:hover { background: var(--color-background-elevation-sunken); }
+  .bcn-status-select__opt[aria-selected='true'] { background: var(--color-background-elevation-sunken); font-weight: var(--typography-font-weight-semibold); }
 </style>
diff --git a/src/components/bcn/BcnStudySketch.astro b/src/components/bcn/BcnStudySketch.astro
index 4c2b74c4..c8ca71e6 100644
--- a/src/components/bcn/BcnStudySketch.astro
+++ b/src/components/bcn/BcnStudySketch.astro
@@ -22,8 +22,8 @@ const { sketch, species } = Astro.props;
 
 const SPECIES_TINT: Record<FocalSpecies['group'], string> = {
   listed: 'var(--color-action)',
-  predator: 'var(--color-warning)',
-  other: 'var(--color-text-muted)',
+  predator: 'var(--color-background-utility-warning)',
+  other: 'var(--bcn-content-muted)',
 };
 // Lucide flask-conical (study) / target (objectives) / book-open (background) etc.
 const ICON = {
@@ -132,32 +132,32 @@ const ICON = {
   .bcn-sketch__h {
     display: flex; align-items: center; gap: var(--spacing-200);
     margin: 0;
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     padding-bottom: var(--spacing-150);
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border-default);
   }
-  .bcn-sketch__h :global(.esa-icon) { color: var(--color-secondary); flex-shrink: 0; }
-  .bcn-sketch__p { margin: 0; font-size: var(--type-size-200); line-height: 1.6; color: var(--color-text-secondary); }
-  .bcn-sketch__sub { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
+  .bcn-sketch__h :global(.esa-icon) { color: var(--color-background-brand-muted); flex-shrink: 0; }
+  .bcn-sketch__p { margin: 0; font-size: var(--font-size-200); line-height: 1.6; color: var(--color-content-default-secondary); }
+  .bcn-sketch__sub { font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
 
   .bcn-sketch__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-150); margin-bottom: var(--spacing-100); }
 
   .bcn-sketch__rq { margin: var(--spacing-100) 0 0; padding-left: var(--spacing-500); display: flex; flex-direction: column; gap: var(--spacing-200); }
-  .bcn-sketch__rq li { font-size: var(--type-size-200); line-height: 1.5; color: var(--color-text-primary); }
+  .bcn-sketch__rq li { font-size: var(--font-size-200); line-height: 1.5; color: var(--color-content-default); }
   .bcn-sketch__hyp { margin: var(--spacing-200) 0 0; padding-left: var(--spacing-500); }
-  .bcn-sketch__hyp li { font-size: var(--type-size-200); line-height: 1.5; color: var(--color-text-secondary); font-style: italic; }
+  .bcn-sketch__hyp li { font-size: var(--font-size-200); line-height: 1.5; color: var(--color-content-default-secondary); font-style: italic; }
 
   .bcn-sketch__list { margin: 0; padding-left: var(--spacing-500); display: flex; flex-direction: column; gap: var(--spacing-100); }
-  .bcn-sketch__list li { font-size: var(--type-size-200); line-height: 1.5; color: var(--color-text-secondary); }
+  .bcn-sketch__list li { font-size: var(--font-size-200); line-height: 1.5; color: var(--color-content-default-secondary); }
 
   /* Components — each a bordered block with a 2-col methods/metrics split. */
   .bcn-sketch__components { display: flex; flex-direction: column; gap: var(--spacing-300); }
-  .bcn-sketch__component { border: 1px solid var(--color-border); border-radius: var(--radius-200); padding: var(--spacing-300) var(--spacing-400); background: var(--color-surface); }
-  .bcn-sketch__component-h { display: flex; align-items: center; gap: var(--spacing-200); margin: 0 0 var(--spacing-200); font-size: var(--type-size-200); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-sketch__component-h :global(.esa-icon) { color: var(--color-secondary); }
+  .bcn-sketch__component { border: 1px solid var(--color-border-default); border-radius: var(--radius-200); padding: var(--spacing-300) var(--spacing-400); background: var(--color-background-elevation-raised); }
+  .bcn-sketch__component-h { display: flex; align-items: center; gap: var(--spacing-200); margin: 0 0 var(--spacing-200); font-size: var(--font-size-200); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-sketch__component-h :global(.esa-icon) { color: var(--color-background-brand-muted); }
   .bcn-sketch__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-400); }
-  .bcn-sketch__col-label { display: block; font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); margin-bottom: var(--spacing-150); }
+  .bcn-sketch__col-label { display: block; font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-tertiary); margin-bottom: var(--spacing-150); }
   @media (max-width: 720px) { .bcn-sketch__cols { grid-template-columns: 1fr; } }
 </style>
diff --git a/src/components/bcn/BcnTimelineExplorer.astro b/src/components/bcn/BcnTimelineExplorer.astro
index dda3c829..6da172be 100644
--- a/src/components/bcn/BcnTimelineExplorer.astro
+++ b/src/components/bcn/BcnTimelineExplorer.astro
@@ -41,9 +41,9 @@ const payload = { weekLabels, categories };
 >
   <div class="bcn-tlx stack" data-gap="md">
     <div class="bcn-tlx__toolbar cluster" data-gap="md" data-align="center">
-      <span class="bcn-tlx__toolbar-label type-label">Timeframe</span>
+      <span class="bcn-tlx__toolbar-label typography-label">Timeframe</span>
       <esa-button-toggle id="tlx-window" size="sm"></esa-button-toggle>
-      <span class="bcn-tlx__hint type-caption" id="tlx-hint"></span>
+      <span class="bcn-tlx__hint typography-meta" id="tlx-hint"></span>
     </div>
 
     <div class="bcn-tlx__grid" id="tlx-grid" aria-hidden="true"></div>
@@ -164,10 +164,10 @@ const payload = { weekLabels, categories };
 
 <style>
   .bcn-tlx__toolbar-label {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-tlx__hint {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     font-variant-numeric: tabular-nums;
   }
 
@@ -178,8 +178,8 @@ const payload = { weekLabels, categories };
   }
 
   .bcn-tlx__tile {
-    background: var(--color-surface-sunken);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-sunken);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     padding: var(--spacing-300) var(--spacing-350);
     display: flex;
@@ -187,9 +187,9 @@ const payload = { weekLabels, categories };
     gap: var(--spacing-150);
   }
   .bcn-tlx__tile-label {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-secondary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -215,21 +215,21 @@ const payload = { weekLabels, categories };
     flex-shrink: 0;
   }
   .bcn-tlx__tile-count {
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-bold);
     font-variant-numeric: tabular-nums;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     line-height: 1;
   }
   .bcn-tlx__delta {
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-semibold);
     margin-top: 2px;
   }
   /* Direction is never color-alone: the arrow glyph carries it too. */
-  .bcn-tlx__delta--up { color: var(--color-warning); }
-  .bcn-tlx__delta--down { color: var(--color-success); }
-  .bcn-tlx__delta--flat { color: var(--color-text-tertiary); }
+  .bcn-tlx__delta--up { color: var(--color-background-utility-warning); }
+  .bcn-tlx__delta--down { color: var(--color-background-utility-success); }
+  .bcn-tlx__delta--flat { color: var(--color-content-default-tertiary); }
 
   /* ── the accessible table reading of the plot (off-screen, still announced) ── */
   .bcn-tlx__table {
diff --git a/src/components/bcn/BcnTriageCounts.astro b/src/components/bcn/BcnTriageCounts.astro
index d786767c..6b2561a2 100644
--- a/src/components/bcn/BcnTriageCounts.astro
+++ b/src/components/bcn/BcnTriageCounts.astro
@@ -59,18 +59,18 @@ const { total } = Astro.props;
      SANCTIONED HARD-CODE: --badge-height-md is a real hook but no token defines it. */
   .bcn-triage-counts__chip :global(.esa-badge) {
     --badge-height-md: 24px;
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--typography-font-weight-medium);
   }
 
   /* Waiting: the neutral tag treatment the drawer uses for its facets. */
   .bcn-triage-counts__chip :global(.esa-badge) {
-    --badge-bg: var(--color-surface-sunken);
-    --badge-text-color: var(--color-text-secondary);
+    --badge-bg: var(--color-background-elevation-sunken);
+    --badge-text-color: var(--color-content-default-secondary);
   }
 
   .bcn-triage-counts__showing {
     font-size: 0.8125rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   .bcn-triage-counts__showing[hidden] {
diff --git a/src/components/bcn/BcnTriageQueue.astro b/src/components/bcn/BcnTriageQueue.astro
index cd58d22f..38a055fb 100644
--- a/src/components/bcn/BcnTriageQueue.astro
+++ b/src/components/bcn/BcnTriageQueue.astro
@@ -168,8 +168,8 @@ const rowFor = (item: TriageItem) => {
     flex-direction: column;
     min-height: 0; /* lets the scroll region actually scroll inside the fixed frame */
     height: 100%;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-100);
     overflow: hidden;
   }
@@ -202,14 +202,14 @@ const rowFor = (item: TriageItem) => {
     z-index: 1;
     margin: 0;
     padding: var(--spacing-100) var(--spacing-300);
-    /* The sunken step, not the page canvas: at --color-background the bands sat too close to
+    /* The sunken step, not the page canvas: at --color-background-default the bands sat too close to
        the white rows to divide them. */
-    background: var(--color-surface-sunken);
-    border-block: 1px solid var(--color-border-light);
+    background: var(--color-background-elevation-sunken);
+    border-block: 1px solid var(--color-border-default-subtle);
     font-size: 0.875rem;
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--typography-font-weight-medium);
     line-height: 1.4;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
 
   /* The first band sits flush against the pane's top edge. */
@@ -233,8 +233,8 @@ const rowFor = (item: TriageItem) => {
     flex-direction: column;
     gap: var(--spacing-150);
     padding: var(--spacing-300);
-    border-bottom: 1px solid var(--color-border-light);
-    background: var(--color-surface);
+    border-bottom: 1px solid var(--color-border-default-subtle);
+    background: var(--color-background-elevation-raised);
   }
 
   /* The band below already draws its own top rule; a second one here would double it. */
@@ -249,20 +249,20 @@ const rowFor = (item: TriageItem) => {
   /* Half a step toward the selected fill, so hover and selection are the same gesture at
      two strengths rather than two different colours. */
   .bcn-triage-row:hover {
-    background: color-mix(in srgb, var(--color-surface-sunken) 50%, var(--color-surface));
+    background: color-mix(in srgb, var(--color-background-elevation-sunken) 50%, var(--color-background-elevation-raised));
   }
 
-  /* NEUTRAL, not the brand tint. --color-primary-subtle is a mint wash, and beside the blue
+  /* NEUTRAL, not the brand tint. --color-background-brand-subtle is a mint wash, and beside the blue
      the suggestions area now carries it read as a third accent belonging to nothing — two
      pale colours in one view, neither of them meaning the same thing. Selection is a state of
      the LIST, not a category, so it takes a plain surface step: white -> hover -> sunken.
      Still a surface alone, never a colored left border (a banned pattern). */
   .bcn-triage-row[data-active],
   .bcn-triage-row[data-active]:hover {
-    /* One step BELOW the day bands. At --color-surface-sunken the selected row was the exact
-       fill of a date separator, so a selection read as a divider. --color-border is the next
+    /* One step BELOW the day bands. At --color-background-elevation-sunken the selected row was the exact
+       fill of a date separator, so a selection read as a divider. --color-border-default is the next
        neutral down, which keeps the ladder legible: row -> hover -> band -> selected. */
-    background: var(--color-border);
+    background: var(--color-border-default);
   }
 
   .bcn-triage-row__body {
@@ -280,7 +280,7 @@ const rowFor = (item: TriageItem) => {
   }
 
   .bcn-triage-row__body:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-background-brand);
     outline-offset: 2px;
     border-radius: var(--radius-100);
   }
@@ -298,18 +298,18 @@ const rowFor = (item: TriageItem) => {
     font-size: 0.875rem; /* 14px — the dense-surface floor; darkened rather than grayed */
     font-weight: 600;
     line-height: 1.35;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
 
   .bcn-triage-row__date {
     flex: none;
     font-size: 0.8125rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   .bcn-triage-row__meta {
     font-size: 0.8125rem; /* 13px meta */
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   .bcn-triage-row__foot[hidden] {
@@ -359,16 +359,16 @@ const rowFor = (item: TriageItem) => {
      sixteen of them do not fight the row titles they sit under. Approved patterns are canon;
      it is also now the same chip as the confidence mark in the review panel. */
   .bcn-triage-row__sug :global(.esa-badge) {
-    --badge-bg: var(--color-info-subtle);
-    --badge-text-color: var(--color-text-primary);
+    --badge-bg: var(--color-background-utility-info-subtle);
+    --badge-text-color: var(--color-content-default);
     /* esa-badge's md step is 28px tall, which is sized for a chip standing on its own. In a
        dense list row it reads as a button. 24px keeps the 13px label comfortable and lets the
        chip sit INSIDE the row's rhythm instead of setting it.
        SANCTIONED HARD-CODE: --badge-height-md is a real hook, but no token defines it (the
        lego only ever uses it with a literal fallback), so there is nothing to point at. */
     --badge-height-md: 24px;
-    border: 1px solid color-mix(in srgb, var(--color-info) 35%, transparent);
-    font-weight: var(--font-weight-medium);
+    border: 1px solid color-mix(in srgb, var(--color-background-utility-info) 35%, transparent);
+    font-weight: var(--typography-font-weight-medium);
   }
 
   .bcn-triage-queue__empty {
diff --git a/src/components/bcn/BcnTriageReview.astro b/src/components/bcn/BcnTriageReview.astro
index 167717a8..ebb6ad1d 100644
--- a/src/components/bcn/BcnTriageReview.astro
+++ b/src/components/bcn/BcnTriageReview.astro
@@ -35,7 +35,7 @@
 // dialog is the closest prod relative and is a modal, not a persistent pane.
 // bcn-triage-review is the reusable home.
 import EsaButton from '@esa/ecology/esa-button.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import EsaBadge from '@esa/ecology/esa-badge.astro';
 import EsaCollapsible from '@esa/ecology/esa-collapsible.astro';
 import EsaEmptyState from '@esa/ecology/esa-empty-state.astro';
@@ -96,7 +96,7 @@ const FILE_PLUS =
               {/* Closing returns the pane to its unselected state — the same place you were
                   before opening a record, rather than a half-dismissed one. */}
               <span class="bcn-triage-review__close" data-triage-close>
-                <EsaIconButton icon="x" label="Close this record" size="sm" />
+                <EsaIconButton variant="chrome" iconOnly icon="x" label="Close this record" size="sm" />
               </span>
             </div>
             <p class="bcn-triage-review__notes">{item.notes}</p>
@@ -159,7 +159,7 @@ const FILE_PLUS =
                   does, so a data-* passed to it is silently dropped. Click bubbles either way.
                   LEGO GAP: esa-icon-button should forward extra attrs like esa-button. */}
               <span class="bcn-triage-review__add" data-triage-add={item.id}>
-                <EsaIconButton icon="plus" label="Add a suggested action" size="sm" />
+                <EsaIconButton variant="chrome" iconOnly icon="plus" label="Add a suggested action" size="sm" />
               </span>
             </h3>
 
@@ -193,10 +193,10 @@ const FILE_PLUS =
                           </div>
 
                           <div class="bcn-triage-sug__act" data-triage-sug-act>
-                            <EsaButton size="sm" color="primary" data-triage-sug-approve>
+                            <EsaButton size="sm" variant="primary" data-triage-sug-approve>
                               Approve
                             </EsaButton>
-                            <EsaButton size="sm" color="danger" appearance="outline" data-triage-sug-dismiss>
+                            <EsaButton size="sm" variant="danger" appearance="outline" data-triage-sug-dismiss>
                               Dismiss
                             </EsaButton>
                           </div>
@@ -205,7 +205,7 @@ const FILE_PLUS =
                             <span data-triage-sug-verdict>
                               <EsaBadge value="Attached" variant="success" size="sm" />
                             </span>
-                            <EsaButton size="sm" color="ghost" data-triage-sug-undo>
+                            <EsaButton size="sm" variant="ghost" data-triage-sug-undo>
                               Undo
                             </EsaButton>
                           </div>
@@ -263,8 +263,8 @@ const FILE_PLUS =
     </div>
 
     <div slot="footer" class="bcn-triage-add__actions">
-      <EsaButton size="md" color="primary" data-triage-add-commit disabled>Add</EsaButton>
-      <EsaButton size="md" color="ghost" data-triage-add-cancel>Cancel</EsaButton>
+      <EsaButton size="md" variant="primary" data-triage-add-commit disabled>Add</EsaButton>
+      <EsaButton size="md" variant="ghost" data-triage-add-cancel>Cancel</EsaButton>
     </div>
   </esa-dialog>
 
@@ -287,15 +287,15 @@ const FILE_PLUS =
           </div>
 
           <div class="bcn-triage-sug__act" data-triage-sug-act>
-            <EsaButton size="sm" color="primary" data-triage-sug-approve>Approve</EsaButton>
-            <EsaButton size="sm" color="danger" appearance="outline" data-triage-sug-dismiss>
+            <EsaButton size="sm" variant="primary" data-triage-sug-approve>Approve</EsaButton>
+            <EsaButton size="sm" variant="danger" appearance="outline" data-triage-sug-dismiss>
               Dismiss
             </EsaButton>
           </div>
 
           <div class="bcn-triage-sug__done" data-triage-sug-done hidden>
             <span data-triage-sug-verdict><EsaBadge value="Attached" variant="success" size="sm" /></span>
-            <EsaButton size="sm" color="ghost" data-triage-sug-undo>Undo</EsaButton>
+            <EsaButton size="sm" variant="ghost" data-triage-sug-undo>Undo</EsaButton>
           </div>
         </div>
       </EsaCard>
@@ -316,8 +316,8 @@ const FILE_PLUS =
     min-height: 0;
     max-height: 100%;
     overflow-y: auto;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-100);
   }
 
@@ -352,7 +352,7 @@ const FILE_PLUS =
     flex-direction: column;
     gap: var(--spacing-200);
     padding: var(--spacing-400) var(--spacing-400) var(--spacing-300);
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border-default);
   }
 
   /* One step down from a card title: this pane is dense, and the record's NAME is not the
@@ -371,17 +371,17 @@ const FILE_PLUS =
   .bcn-triage-review__title {
     min-width: 0;
     margin: 0;
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.3;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
 
   .bcn-triage-review__notes {
     margin: 0;
     font-size: 0.8125rem;
     line-height: 1.45;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   /* Four label/value pairs on one dense row, wrapping only when it must. Replaces a
@@ -426,22 +426,22 @@ const FILE_PLUS =
     /* 13px is the house FLOOR for genuine meta — never smaller. The label/value hierarchy is
        carried by colour and weight instead: secondary + regular here, primary + medium below. */
     font-size: 0.8125rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   .bcn-triage-review__facts dd {
     margin: 0;
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default);
   }
 
   /* An ABSENCE, not a warning. Orange claimed something was wrong; muted italic says the
      field simply has no value yet, which is all "Not set" means. */
   .bcn-triage-review__facts dd[data-warn] {
-    font-weight: var(--font-weight-regular, 400);
+    font-weight: var(--typography-font-weight-regular, 400);
     font-style: italic;
-    color: var(--color-text-muted);
+    color: var(--bcn-content-muted);
   }
 
   /* The files disclosure closes out the record block, divided by a rule rather than given a
@@ -449,7 +449,7 @@ const FILE_PLUS =
      collapsed it should read as one quiet line. */
   .bcn-triage-review__files {
     margin-top: var(--spacing-150);
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--color-border-default);
   }
 
   /* Asymmetric on purpose: more above the summary than below it, so the rule reads as
@@ -481,13 +481,13 @@ const FILE_PLUS =
   }
 
   .bcn-triage-review__section + .bcn-triage-review__section {
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--color-border-default);
   }
 
   /* The drawer's in-drawer section-header SHAPE — icon + label, semibold, primary text, with
      the glyph subordinate in a quieter tone — using the spoke's own entity vocabulary
      (paperclip = evidence, radar = actions) so the icons mark structure rather than decorate
-     it. Sized to --type-size-150 rather than the drawer's 250 on purpose: two of this pane's
+     it. Sized to --font-size-150 rather than the drawer's 250 on purpose: two of this pane's
      three sections ARE esa-collapsible, whose summary is fixed at 150 with no hook to
      re-point, so matching it is the only way all three headers read as one tier. The drawer
      can afford the larger step; this pane is dense.
@@ -500,10 +500,10 @@ const FILE_PLUS =
     /* Matches .esa-collapsible__summary's padding-block in the Files section, so a plain
        heading and a disclosure heading occupy the same box. */
     padding-block: var(--spacing-150);
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.25;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
 
   /* One glyph tone across all three section headers. esa-collapsible paints its own summary
@@ -516,7 +516,7 @@ const FILE_PLUS =
   .bcn-triage-review__legend :global(.esa-icon),
   .bcn-triage-review__files :global(.esa-collapsible__summary .esa-icon) {
     flex: none;
-    color: var(--color-text-muted);
+    color: var(--bcn-content-muted);
   }
 
   /* Sits a little away from the label so it reads as a count OF the section rather than a
@@ -530,15 +530,15 @@ const FILE_PLUS =
      sized to the type rather than the type shrunk to the bubble. The drawer fills its bubble
      grey because an attachment count is neutral; this one is blue because it counts the
      thing the section exists for.
-     --color-info-strong rather than --color-info: the brighter step puts white text at
-     4.8:1, where --color-info (#228be6) would land near 3.6 and fail AA at this size. */
+     --color-content-utility-info rather than --color-background-utility-info: the brighter step puts white text at
+     4.8:1, where --color-background-utility-info (#228be6) would land near 3.6 and fail AA at this size. */
   .bcn-triage-review__legendcount :global(.esa-badge) {
     --badge-radius: var(--radius-full);
-    /* A step toward --color-info without landing on it. The full step measures ~3.6:1 against
+    /* A step toward --color-background-utility-info without landing on it. The full step measures ~3.6:1 against
        white text and an 18% mix measures 4.4 — both fail AA at 13px — so this sits at 8%,
        which is as light as the contrast allows while staying above 4.5. */
-    --badge-bg: color-mix(in srgb, var(--color-info) 8%, var(--color-info-strong));
-    --badge-text-color: var(--color-text-inverse, #fff);
+    --badge-bg: color-mix(in srgb, var(--color-background-utility-info) 8%, var(--color-content-utility-info));
+    --badge-text-color: var(--color-content-default-knockout, #fff);
     min-width: 19px;
     height: 19px;
     padding: 0 4px;
@@ -549,7 +549,7 @@ const FILE_PLUS =
     font-size: 0.8125rem;
     font-variant-numeric: tabular-nums;
     line-height: 1;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
   }
 
   /* Centred and italic: this is the section reporting on ITSELF, not prose addressed to the
@@ -561,7 +561,7 @@ const FILE_PLUS =
     font-style: italic;
     line-height: 1.45;
     text-align: center;
-    color: var(--color-text-muted);
+    color: var(--bcn-content-muted);
   }
 
   /* The whole block steps in from the panel edge — header and contents together — while the
@@ -587,7 +587,7 @@ const FILE_PLUS =
      INTO" idea, in the info colour instead of the neutral one. The tint says "these are
      proposals" once, for the region, rather than per card. */
   .bcn-triage-review__section[aria-label='Suggested actions'] {
-    background: var(--color-info-subtle);
+    background: var(--color-background-utility-info-subtle);
   }
 
 
@@ -607,7 +607,7 @@ const FILE_PLUS =
      legend, so a blue border was sitting around a grey glyph.
      Change the one --triage-add-ink value to recolour both. */
   .bcn-triage-review__add :global(.esa-icon-button) {
-    --triage-add-ink: var(--color-text-muted);
+    --triage-add-ink: var(--bcn-content-muted);
     border: 1px solid currentColor;
     border-radius: var(--radius-100);
     background: transparent;
@@ -620,8 +620,8 @@ const FILE_PLUS =
   }
 
   .bcn-triage-review__add :global(.esa-icon-button:hover) {
-    color: var(--color-text-primary);
-    background: var(--color-surface-sunken);
+    color: var(--color-content-default);
+    background: var(--color-background-elevation-sunken);
   }
 
   /* ── The add-a-suggestion modal ──────────────────────────────────────── */
@@ -639,7 +639,7 @@ const FILE_PLUS =
   .bcn-triage-add__scope {
     margin: 0;
     font-size: 0.8125rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   /* Windows order: the primary sits LEFT of the secondary within a right-aligned group. */
@@ -667,14 +667,14 @@ const FILE_PLUS =
      the meaning into one side. White fill keeps the card an object, not a tinted region. */
   .bcn-triage-sug {
     --card-padding: var(--spacing-250);
-    --card-bg: var(--color-surface);
-    --card-border-color: color-mix(in srgb, var(--color-info) 45%, transparent);
+    --card-bg: var(--color-background-elevation-raised);
+    --card-border-color: color-mix(in srgb, var(--color-background-utility-info) 45%, transparent);
     --card-radius: var(--radius-100);
   }
 
   /* THEME GAP, patched locally. esa-button's outline appearance takes its LABEL colour from
-     --color-primary-strong (the hub: "step 11 = colored text on surfaces… Override in your
-     theme when changing the primary ramp"). theme-beacon.css re-points --color-primary to
+     --color-content-brand (the hub: "step 11 = colored text on surfaces… Override in your
+     theme when changing the primary ramp"). theme-beacon.css re-points --color-background-brand to
      teal-900 but never overrode *-strong, so it is still the hub's GRASS green — which is why
      a primary-outline button renders a teal border around a green label.
      Scoped here rather than fixed in the theme because the same token also drives
@@ -682,7 +682,7 @@ const FILE_PLUS =
      re-pointing it spoke-wide is right, but it is a deliberate site-wide change. */
   .bcn-triage-review,
   .bcn-triage-sug {
-    --color-primary-strong: var(--color-primary);
+    --color-content-brand: var(--color-background-brand);
   }
 
   .bcn-triage-sug[data-state='dismissed'] {
@@ -707,10 +707,10 @@ const FILE_PLUS =
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: var(--type-size-150, 0.875rem);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-150, 0.875rem);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.35;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
 
   .bcn-ev-row__spacer {
@@ -732,9 +732,9 @@ const FILE_PLUS =
   }
 
   .bcn-ev-row__tags :global(.esa-badge) {
-    --badge-bg: var(--color-surface-sunken);
-    --badge-text-color: var(--color-text-secondary);
-    font-weight: var(--font-weight-medium);
+    --badge-bg: var(--color-background-elevation-sunken);
+    --badge-text-color: var(--color-content-default-secondary);
+    font-weight: var(--typography-font-weight-medium);
   }
 
   /* The confidence mark, wearing the drawer's suggestion-marker treatment: an info-subtle
@@ -749,7 +749,7 @@ const FILE_PLUS =
     gap: var(--spacing-200);
     margin-top: var(--spacing-250);
     padding-top: var(--spacing-200);
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
 
   .bcn-triage-sug__act[hidden],
diff --git a/src/components/bcn/BcnWorkAreaBoard.astro b/src/components/bcn/BcnWorkAreaBoard.astro
index 18b4ca77..151821ae 100644
--- a/src/components/bcn/BcnWorkAreaBoard.astro
+++ b/src/components/bcn/BcnWorkAreaBoard.astro
@@ -91,7 +91,7 @@ const payload = { rows, plural, singular, csvName: `${plural.replace(/\s+/g, '-'
 <section class="bcn-wa" aria-label={title} data-work-area-board>
   <EsaCard>
     <div slot="header" class="cluster bcn-wa__ident" data-gap="sm">
-      <h2 class="type-card-title bcn-wa__title">{title}</h2>
+      <h2 class="typography-title bcn-wa__title">{title}</h2>
       <span data-wa-count
         ><BcnCount value={workAreas.length} label={`${workAreas.length} ${workAreas.length === 1 ? singular : plural}`} /></span
       >
@@ -99,8 +99,8 @@ const payload = { rows, plural, singular, csvName: `${plural.replace(/\s+/g, '-'
     </div>
 
     <div slot="header" class="cluster" data-gap="xs">
-      <EsaButton color="primary" size="sm" icon="plus" data-wa-create>Create</EsaButton>
-      <EsaButton color="ghost" appearance="outline" size="sm" icon="upload" data-wa-import>Bulk import</EsaButton>
+      <EsaButton variant="primary" size="sm" icon="plus" data-wa-create>Create</EsaButton>
+      <EsaButton variant="ghost" appearance="outline" size="sm" icon="upload" data-wa-import>Bulk import</EsaButton>
     </div>
 
     <!-- Toolbar: ONE row. The bulk group joins the chrome on the right rather than
@@ -122,8 +122,8 @@ const payload = { rows, plural, singular, csvName: `${plural.replace(/\s+/g, '-'
         <div class="cluster bcn-wa__right" data-gap="sm" data-align="center">
           <div class="cluster bcn-wa__bulk" data-wa-bulk data-gap="xs" data-align="center" hidden>
             <span class="bcn-wa__bulk-count" data-wa-bulk-count aria-live="polite"></span>
-            <EsaButton color="danger" appearance="soft" size="sm" icon="trash-2" data-wa-delete>Delete</EsaButton>
-            <EsaButton color="ghost" appearance="outline" size="sm" data-wa-bulk-clear>Clear selection</EsaButton>
+            <EsaButton variant="danger" appearance="soft" size="sm" icon="trash-2" data-wa-delete>Delete</EsaButton>
+            <EsaButton variant="ghost" appearance="outline" size="sm" data-wa-bulk-clear>Clear selection</EsaButton>
           </div>
           <BcnGridChrome prefix="wa" only="clear-filters" />
         </div>
@@ -356,13 +356,13 @@ const payload = { rows, plural, singular, csvName: `${plural.replace(/\s+/g, '-'
   .bcn-wa__title {
     margin: 0;
     font-family: var(--font-decorative);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   /* The set's total disturbance — a figure, deliberately quieter than the count. */
   .bcn-wa__acres {
     font-size: 0.875rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     font-variant-numeric: tabular-nums;
   }
 
@@ -389,8 +389,8 @@ const payload = { rows, plural, singular, csvName: `${plural.replace(/\s+/g, '-'
   /* A tint inline with the content marks the selection state — not a colored edge. */
   .bcn-wa__bulk {
     padding: var(--spacing-100) var(--spacing-250);
-    background: var(--color-primary-subtle);
-    border: 1px solid var(--color-primary-border);
+    background: var(--color-background-brand-subtle);
+    border: 1px solid var(--color-border-brand);
     border-radius: var(--radius-200);
   }
   .bcn-wa__bulk[hidden] {
@@ -398,8 +398,8 @@ const payload = { rows, plural, singular, csvName: `${plural.replace(/\s+/g, '-'
   }
   .bcn-wa__bulk-count {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     font-variant-numeric: tabular-nums;
   }
 
@@ -421,8 +421,8 @@ const payload = { rows, plural, singular, csvName: `${plural.replace(/\s+/g, '-'
   /* ── Footer: download · record count (the house data-table chrome) ───────── */
   .bcn-wa__footer {
     padding: var(--spacing-200) var(--spacing-300);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
     border-top: 0;
     border-radius: 0 0 var(--radius-100) var(--radius-100);
   }
@@ -431,11 +431,11 @@ const payload = { rows, plural, singular, csvName: `${plural.replace(/\s+/g, '-'
     align-items: center;
     gap: var(--spacing-400);
     font-size: 0.875rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     font-variant-numeric: tabular-nums;
   }
   .bcn-wa__filtered {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-wa__filtered[hidden] {
     display: none;
@@ -446,12 +446,12 @@ const payload = { rows, plural, singular, csvName: `${plural.replace(/\s+/g, '-'
     cursor: pointer;
   }
   .bcn-wa :global(.bcn-grid-name) {
-    color: var(--color-text-link);
-    font-weight: var(--font-weight-regular);
+    color: var(--color-content-link);
+    font-weight: var(--typography-font-weight-regular);
     text-decoration: underline;
   }
   .bcn-wa :global(.bcn-grid-name:hover) {
-    color: var(--color-primary-hover);
+    color: var(--color-background-brand-hover);
   }
   /* Numeric columns read as a column of numbers: right-aligned by AG Grid's
      numericColumn type, aligned digit-for-digit by tabular numerals. */
@@ -471,10 +471,10 @@ const payload = { rows, plural, singular, csvName: `${plural.replace(/\s+/g, '-'
     border-radius: var(--radius-100);
     font-size: 0.875rem;
     line-height: 1.5;
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--typography-font-weight-medium);
     white-space: nowrap;
     background: color-mix(in srgb, var(--_tone, #bdbdbd) 16%, transparent);
-    color: color-mix(in srgb, var(--_tone, #bdbdbd) 70%, var(--color-text-primary));
+    color: color-mix(in srgb, var(--_tone, #bdbdbd) 70%, var(--color-content-default));
   }
   .bcn-wa :global(.bcn-wa__chip::before) {
     content: '';
@@ -485,13 +485,13 @@ const payload = { rows, plural, singular, csvName: `${plural.replace(/\s+/g, '-'
     flex-shrink: 0;
   }
   .bcn-wa :global(.bcn-wa__chip[data-tone='cleared']) {
-    --_tone: var(--color-success, #2e7571);
+    --_tone: var(--color-background-utility-success, #2e7571);
   }
   .bcn-wa :global(.bcn-wa__chip[data-tone='scheduled']) {
-    --_tone: var(--color-info, #228be6);
+    --_tone: var(--color-background-utility-info, #228be6);
   }
   .bcn-wa :global(.bcn-wa__chip[data-tone='in-progress']) {
-    --_tone: var(--color-warning, #f59e0b);
+    --_tone: var(--color-background-utility-warning, #f59e0b);
   }
   .bcn-wa :global(.bcn-wa__chip[data-tone='not-started']) {
     --_tone: var(--bcn-status-not-started, #bdbdbd);
diff --git a/src/components/bcn/BcnWorkBreakdown.astro b/src/components/bcn/BcnWorkBreakdown.astro
index a6675907..58f856ab 100644
--- a/src/components/bcn/BcnWorkBreakdown.astro
+++ b/src/components/bcn/BcnWorkBreakdown.astro
@@ -33,7 +33,7 @@
 import type { HierNode } from '../../data/fish-model';
 import { computeRollUp, flattenForest, formatUSD, TASK_STATUS_META, TIER_META } from '../../data/fish-model';
 import EsaButton from '@esa/ecology/esa-button.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import {
   DCP_PHASES,
   MILESTONES,
@@ -249,7 +249,7 @@ function leadCell(node: HierNode): { text: string; filterVal: string; inherited:
                   </button>
                   {node.tier !== 'task' && (
                     <span class="bcn-wb__add">
-                      <EsaIconButton icon="plus" size="xs" label={`Add ${TIER_META[node.tier].childLabel.toLowerCase()}`} />
+                      <EsaIconButton variant="chrome" iconOnly icon="plus" size="xs" label={`Add ${TIER_META[node.tier].childLabel.toLowerCase()}`} />
                     </span>
                   )}
                   <esa-dropdown-menu class="bcn-wb__menu" position="below-end" width="auto">
@@ -295,7 +295,7 @@ function leadCell(node: HierNode): { text: string; filterVal: string; inherited:
            The button rides the sticky label column so it stays visible while
            the plot scrolls. Same #bcn-wb-add-program hook as before. ── -->
       <div class="bcn-wb__addrow">
-        <span id="bcn-wb-add-program"><EsaButton color="ghost" appearance="dashed" size="sm" icon="plus">Add commitment</EsaButton></span>
+        <span id="bcn-wb-add-program"><EsaButton variant="ghost" appearance="dashed" size="sm" icon="plus">Add commitment</EsaButton></span>
         <span class="bcn-wb__lead" aria-hidden="true"></span>
         <span class="bcn-wb__money" aria-hidden="true"></span>
       </div>
@@ -320,7 +320,7 @@ function leadCell(node: HierNode): { text: string; filterVal: string; inherited:
           <span class="bcn-wb__name"></span>
         </button>
         <span class="bcn-wb__add">
-          <EsaIconButton icon="plus" size="xs" label="Add child" />
+          <EsaIconButton variant="chrome" iconOnly icon="plus" size="xs" label="Add child" />
         </span>
         <esa-dropdown-menu class="bcn-wb__menu" position="below-end" width="auto">
           <button type="button" class="bcn-wb__kebab" aria-label="Row actions">⋯</button>
@@ -1239,97 +1239,97 @@ function leadCell(node: HierNode): { text: string; filterVal: string; inherited:
   .bcn-wb.is-dragging .bcn-wb__bar { transition: none; }
 
   /* ── Filter bar (permit-tracking pattern; ecology legos, layout-only CSS) ── */
-  .bcn-wb__filterbar { border: 1px solid var(--color-border); border-radius: var(--radius-200); background: var(--color-surface); margin-bottom: var(--spacing-300); }
+  .bcn-wb__filterbar { border: 1px solid var(--color-border-default); border-radius: var(--radius-200); background: var(--color-background-elevation-raised); margin-bottom: var(--spacing-300); }
   .bcn-wb__fb-top { display: flex; align-items: center; gap: var(--spacing-300); flex-wrap: wrap; padding: var(--spacing-250) var(--spacing-400); }
   .bcn-wb__fb-group { display: inline-flex; align-items: center; gap: var(--spacing-300); }
   .bcn-wb__fb-group esa-text-field { width: 220px; }
   /* Year pickers hold a 4-digit year — no need for the default select width. */
   .bcn-wb__fb-year { display: inline-block; width: 5.5em; }
   .bcn-wb__fb-leadsel { display: inline-block; width: 10em; }
-  .bcn-wb__fb-label { font-size: var(--type-size-150); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); white-space: nowrap; }
-  .bcn-wb__fb-divider { width: 1px; align-self: stretch; background: var(--color-border); margin: 0 var(--spacing-100); }
-  .bcn-wb__fb-to { font-size: var(--type-size-150); color: var(--color-text-tertiary); }
+  .bcn-wb__fb-label { font-size: var(--font-size-150); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-tertiary); white-space: nowrap; }
+  .bcn-wb__fb-divider { width: 1px; align-self: stretch; background: var(--color-border-default); margin: 0 var(--spacing-100); }
+  .bcn-wb__fb-to { font-size: var(--font-size-150); color: var(--color-content-default-tertiary); }
 
-  .bcn-wb__legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-300); padding: var(--spacing-200) var(--spacing-400); box-shadow: inset 0 1px 0 var(--color-border-light); font-size: var(--type-size-150); color: var(--color-text-secondary); }
+  .bcn-wb__legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-300); padding: var(--spacing-200) var(--spacing-400); box-shadow: inset 0 1px 0 var(--color-border-default-subtle); font-size: var(--font-size-150); color: var(--color-content-default-secondary); }
   .bcn-wb__legend-item { display: inline-flex; align-items: center; gap: var(--spacing-150); }
   .bcn-wb__legend-dot { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--_c); }
-  .bcn-wb__legend-summary { width: 20px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--color-text-primary) 10%, transparent); border: 1px solid var(--color-border-strong); }
-  .bcn-wb__legend-hint { margin-left: auto; color: var(--color-text-tertiary); }
+  .bcn-wb__legend-summary { width: 20px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--color-content-default) 10%, transparent); border: 1px solid var(--color-border-default-strong); }
+  .bcn-wb__legend-hint { margin-left: auto; color: var(--color-content-default-tertiary); }
 
   /* ── Scroll + canvas ── */
-  .bcn-wb__scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-200); background: var(--color-surface); }
+  .bcn-wb__scroll { overflow-x: auto; border: 1px solid var(--color-border-default); border-radius: var(--radius-200); background: var(--color-background-elevation-raised); }
   .bcn-wb__canvas { min-width: calc(var(--_label-w) + var(--_lead-w) + var(--_money-w) + var(--_plot-w)); }
 
   /* ── Axis header ── */
-  .bcn-wb__axis { display: grid; grid-template-columns: var(--_label-w) var(--_lead-w) var(--_money-w) 1fr; position: sticky; top: 0; z-index: 5; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
-  .bcn-wb__lead-head { display: flex; align-items: flex-end; position: sticky; left: var(--_label-w); z-index: 4; padding: var(--spacing-200) var(--spacing-300); font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); background: var(--color-surface); border-right: 1px solid var(--color-border); }
-  .bcn-wb__money-head { display: flex; align-items: flex-end; justify-content: flex-end; position: sticky; left: calc(var(--_label-w) + var(--_lead-w)); z-index: 4; padding: var(--spacing-200) var(--spacing-300); font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); background: var(--color-surface); border-right: 1px solid var(--color-border); }
-  .bcn-wb__corner { display: flex; align-items: flex-end; position: sticky; left: 0; z-index: 4; padding: var(--spacing-200) var(--spacing-300); font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); background: var(--color-surface); border-right: 1px solid var(--color-border); }
+  .bcn-wb__axis { display: grid; grid-template-columns: var(--_label-w) var(--_lead-w) var(--_money-w) 1fr; position: sticky; top: 0; z-index: 5; background: var(--color-background-elevation-raised); border-bottom: 1px solid var(--color-border-default); }
+  .bcn-wb__lead-head { display: flex; align-items: flex-end; position: sticky; left: var(--_label-w); z-index: 4; padding: var(--spacing-200) var(--spacing-300); font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-tertiary); background: var(--color-background-elevation-raised); border-right: 1px solid var(--color-border-default); }
+  .bcn-wb__money-head { display: flex; align-items: flex-end; justify-content: flex-end; position: sticky; left: calc(var(--_label-w) + var(--_lead-w)); z-index: 4; padding: var(--spacing-200) var(--spacing-300); font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-tertiary); background: var(--color-background-elevation-raised); border-right: 1px solid var(--color-border-default); }
+  .bcn-wb__corner { display: flex; align-items: flex-end; position: sticky; left: 0; z-index: 4; padding: var(--spacing-200) var(--spacing-300); font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-tertiary); background: var(--color-background-elevation-raised); border-right: 1px solid var(--color-border-default); }
   .bcn-wb__head-plot { position: relative; }
   .bcn-wb__head-bands { position: absolute; inset: 0; z-index: 0; }
   .bcn-wb__head-phases { position: relative; z-index: 1; height: 18px; }
   .bcn-wb__head-years { position: relative; z-index: 1; height: 20px; }
   .bcn-wb__head-ms { position: relative; z-index: 1; height: 22px; }
 
-  .bcn-wb__phase-tag { position: absolute; top: 0; bottom: 0; display: inline-flex; align-items: center; padding: 0 var(--spacing-150); font-size: 0.8125rem; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; }
-  .bcn-wb__yr { position: absolute; top: 0; bottom: 0; box-shadow: inset 1px 0 0 var(--color-border-light); display: flex; align-items: center; }
-  .bcn-wb__yr.is-five { box-shadow: inset 1px 0 0 var(--color-border-strong); }
-  .bcn-wb__yr-label { font-size: 0.8125rem; color: var(--color-text-muted); padding-left: 4px; font-variant-numeric: tabular-nums; }
-  .bcn-wb__yr.is-five .bcn-wb__yr-label { color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); }
-  .bcn-wb__ms-tag { position: absolute; top: 2px; transform: translateX(-50%); font-size: 0.8125rem; font-weight: var(--font-weight-semibold); color: var(--color-primary); white-space: nowrap; background: var(--color-surface); padding: 0 3px; border: 1px solid var(--color-primary-border); border-radius: var(--radius-100); }
+  .bcn-wb__phase-tag { position: absolute; top: 0; bottom: 0; display: inline-flex; align-items: center; padding: 0 var(--spacing-150); font-size: 0.8125rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-secondary); white-space: nowrap; overflow: hidden; }
+  .bcn-wb__yr { position: absolute; top: 0; bottom: 0; box-shadow: inset 1px 0 0 var(--color-border-default-subtle); display: flex; align-items: center; }
+  .bcn-wb__yr.is-five { box-shadow: inset 1px 0 0 var(--color-border-default-strong); }
+  .bcn-wb__yr-label { font-size: 0.8125rem; color: var(--bcn-content-muted); padding-left: 4px; font-variant-numeric: tabular-nums; }
+  .bcn-wb__yr.is-five .bcn-wb__yr-label { color: var(--color-content-default-secondary); font-weight: var(--typography-font-weight-semibold); }
+  .bcn-wb__ms-tag { position: absolute; top: 2px; transform: translateX(-50%); font-size: 0.8125rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-background-brand); white-space: nowrap; background: var(--color-background-elevation-raised); padding: 0 3px; border: 1px solid var(--color-border-brand); border-radius: var(--radius-100); }
   .bcn-wb__ms-tag.is-alt { top: 11px; }
 
   /* Neutral phase bands (value, not hue) */
-  .bcn-wb__band[data-phase='baseline'] { background: color-mix(in srgb, var(--color-text-primary) 7%, transparent); }
-  .bcn-wb__band[data-phase='in-water-construction'] { background: color-mix(in srgb, var(--color-text-primary) 3%, transparent); }
-  .bcn-wb__band[data-phase='phase1-ops'] { background: color-mix(in srgb, var(--color-text-primary) 7%, transparent); }
-  .bcn-wb__band[data-phase='phase2-ops'] { background: color-mix(in srgb, var(--color-text-primary) 3%, transparent); }
+  .bcn-wb__band[data-phase='baseline'] { background: color-mix(in srgb, var(--color-content-default) 7%, transparent); }
+  .bcn-wb__band[data-phase='in-water-construction'] { background: color-mix(in srgb, var(--color-content-default) 3%, transparent); }
+  .bcn-wb__band[data-phase='phase1-ops'] { background: color-mix(in srgb, var(--color-content-default) 7%, transparent); }
+  .bcn-wb__band[data-phase='phase2-ops'] { background: color-mix(in srgb, var(--color-content-default) 3%, transparent); }
 
   /* ── Body / rows ── */
   .bcn-wb__body { position: relative; }
-  .bcn-wb__row { display: grid; grid-template-columns: var(--_label-w) var(--_lead-w) var(--_money-w) 1fr; border-bottom: 1px solid var(--color-border-light); }
+  .bcn-wb__row { display: grid; grid-template-columns: var(--_label-w) var(--_lead-w) var(--_money-w) 1fr; border-bottom: 1px solid var(--color-border-default-subtle); }
   .bcn-wb__row[hidden] { display: none; }
-  .bcn-wb__row.is-program { background: color-mix(in srgb, var(--color-text-primary) 3%, transparent); }
-  .bcn-wb__row.is-study { background: color-mix(in srgb, var(--color-text-primary) 1.5%, transparent); }
-  .bcn-wb__row:hover .bcn-wb__plot { background: color-mix(in srgb, var(--color-secondary) 4%, transparent); }
-  .bcn-wb__row.is-selected .bcn-wb__label { background: var(--color-primary-subtle); }
+  .bcn-wb__row.is-program { background: color-mix(in srgb, var(--color-content-default) 3%, transparent); }
+  .bcn-wb__row.is-study { background: color-mix(in srgb, var(--color-content-default) 1.5%, transparent); }
+  .bcn-wb__row:hover .bcn-wb__plot { background: color-mix(in srgb, var(--color-background-brand-muted) 4%, transparent); }
+  .bcn-wb__row.is-selected .bcn-wb__label { background: var(--color-background-brand-subtle); }
 
   /* label cell: indent by depth, disclosure caret, name button, add-child, menu */
   /* NO overflow:hidden here — the esa-dropdown-menu panel renders inside this
      cell and would be clipped invisible; truncation lives on .bcn-wb__name. */
-  .bcn-wb__label { display: flex; align-items: center; gap: var(--spacing-150); min-height: var(--_row-h); padding: 0 var(--spacing-200) 0 calc(var(--spacing-200) + var(--_indent) * 18px); border-right: 1px solid var(--color-border); background: var(--color-surface); position: sticky; left: 0; z-index: 3; }
+  .bcn-wb__label { display: flex; align-items: center; gap: var(--spacing-150); min-height: var(--_row-h); padding: 0 var(--spacing-200) 0 calc(var(--spacing-200) + var(--_indent) * 18px); border-right: 1px solid var(--color-border-default); background: var(--color-background-elevation-raised); position: sticky; left: 0; z-index: 3; }
   /* An open row menu must paint above the LATER rows' sticky labels (same z-index
      siblings paint in DOM order) — raise the open row, but stay under the axis (5). */
   .bcn-wb__row:has(.bcn-wb__menu[open]) .bcn-wb__label { z-index: 4; }
-  .bcn-wb__row.is-program .bcn-wb__label { background: color-mix(in srgb, var(--color-text-primary) 3%, var(--color-surface)); }
-  .bcn-wb__caret { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; background: transparent; color: var(--color-text-tertiary); cursor: pointer; flex-shrink: 0; border-radius: var(--radius-100); }
-  .bcn-wb__caret:hover { background: var(--color-surface-sunken); color: var(--color-text-primary); }
+  .bcn-wb__row.is-program .bcn-wb__label { background: color-mix(in srgb, var(--color-content-default) 3%, var(--color-background-elevation-raised)); }
+  .bcn-wb__caret { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; background: transparent; color: var(--color-content-default-tertiary); cursor: pointer; flex-shrink: 0; border-radius: var(--radius-100); }
+  .bcn-wb__caret:hover { background: var(--color-background-elevation-sunken); color: var(--color-content-default); }
   .bcn-wb__caret svg { transition: transform 120ms ease; }
   .bcn-wb__caret.is-collapsed svg { transform: rotate(-90deg); }
   .bcn-wb__caret-spacer { width: 18px; flex-shrink: 0; }
 
   .bcn-wb__name-btn { display: flex; align-items: center; gap: var(--spacing-150); min-width: 0; flex: 1; padding: 2px 0; border: 0; background: transparent; cursor: pointer; text-align: left; font: inherit; overflow: hidden; }
-  .bcn-wb__name-btn:hover .bcn-wb__name { color: var(--color-primary); text-decoration: underline; }
-  .bcn-wb__name-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-100); }
-  .bcn-wb__id { flex-shrink: 0; font-family: var(--font-mono); font-size: 0.6875rem; /* adherence-allow: font-too-small — Andy-sanctioned 11px ID badges (2026-07-15) */ font-weight: var(--font-weight-semibold); color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); padding: 1px 5px; border-radius: var(--radius-100); }
+  .bcn-wb__name-btn:hover .bcn-wb__name { color: var(--color-background-brand); text-decoration: underline; }
+  .bcn-wb__name-btn:focus-visible { outline: 2px solid var(--color-background-brand); outline-offset: 2px; border-radius: var(--radius-100); }
+  .bcn-wb__id { flex-shrink: 0; font-family: var(--typography-font-family-mono); font-size: 0.6875rem; /* adherence-allow: font-too-small — Andy-sanctioned 11px ID badges (2026-07-15) */ font-weight: var(--typography-font-weight-semibold); color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); padding: 1px 5px; border-radius: var(--radius-100); }
   /* Tier ramp — one hue, dark to light down the tree */
-  .bcn-wb__ref { flex-shrink: 0; font-family: var(--font-mono); font-size: 0.6875rem; /* adherence-allow: font-too-small — matches the 11px ID badges */ color: var(--color-text-tertiary); background: var(--color-surface-sunken); padding: 1px 5px; border-radius: var(--radius-100); }
+  .bcn-wb__ref { flex-shrink: 0; font-family: var(--typography-font-family-mono); font-size: 0.6875rem; /* adherence-allow: font-too-small — matches the 11px ID badges */ color: var(--color-content-default-tertiary); background: var(--color-background-elevation-sunken); padding: 1px 5px; border-radius: var(--radius-100); }
   .bcn-wb__row.is-program .bcn-wb__id { background: color-mix(in srgb, var(--color-commitment) 30%, white); color: color-mix(in srgb, var(--color-commitment) 85%, black); }
   .bcn-wb__row.is-study .bcn-wb__id { background: color-mix(in srgb, var(--color-commitment) 20%, white); }
   .bcn-wb__row.is-substudy .bcn-wb__id { background: color-mix(in srgb, var(--color-commitment) 12%, white); }
   .bcn-wb__row.is-task .bcn-wb__id { background: color-mix(in srgb, var(--color-commitment) 6%, white); }
-  .bcn-wb__name { font-size: var(--type-size-150); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .bcn-wb__name { font-size: var(--font-size-150); color: var(--color-content-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   /* Search-match highlight — <mark> is JS-injected by the filter script; same
      highlighter-yellow treatment as BcnSearchResults' marked titles. */
   .bcn-wb__name mark,
   .bcn-wb__id mark {
     background: #fde047; /* highlighter yellow */
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     border-radius: 2px;
     padding: 0 1px;
   }
-  .bcn-wb__name.is-editing { white-space: normal; outline: 2px solid var(--color-primary); outline-offset: 1px; border-radius: var(--radius-100); background: var(--color-surface); padding: 0 3px; }
-  .bcn-wb__row.is-program .bcn-wb__name, .bcn-wb__row.is-study .bcn-wb__name { font-weight: var(--font-weight-semibold); }
+  .bcn-wb__name.is-editing { white-space: normal; outline: 2px solid var(--color-background-brand); outline-offset: 1px; border-radius: var(--radius-100); background: var(--color-background-elevation-raised); padding: 0 3px; }
+  .bcn-wb__row.is-program .bcn-wb__name, .bcn-wb__row.is-study .bcn-wb__name { font-weight: var(--typography-font-weight-semibold); }
 
   /* Visible add-child affordance: revealed on row hover / keyboard focus.
      The ⋯ menu keeps rename / reparent / delete. */
@@ -1338,41 +1338,41 @@ function leadCell(node: HierNode): { text: string; filterVal: string; inherited:
      so values read in one straight line down the chart. */
   /* Lead column (study-tier accountability) — sits between the label and money,
      sharing their sticky/frozen behavior; inherited leads render muted. */
-  .bcn-wb__lead { display: flex; align-items: center; position: sticky; left: var(--_label-w); z-index: 3; padding: 0 var(--spacing-300); min-height: var(--_row-h); font-size: var(--type-size-150); color: var(--color-text-secondary); background: var(--color-surface); border-right: 1px solid var(--color-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .bcn-wb__lead.is-inherited { color: var(--color-text-muted); }
-  .bcn-wb__row.is-program .bcn-wb__lead { background: color-mix(in srgb, var(--color-text-primary) 3%, var(--color-surface)); font-weight: var(--font-weight-semibold); }
-  .bcn-wb__row.is-study .bcn-wb__lead { background: color-mix(in srgb, var(--color-text-primary) 1.5%, var(--color-surface)); font-weight: var(--font-weight-medium); }
-  .bcn-wb__row.is-selected .bcn-wb__lead { background: var(--color-primary-subtle); }
+  .bcn-wb__lead { display: flex; align-items: center; position: sticky; left: var(--_label-w); z-index: 3; padding: 0 var(--spacing-300); min-height: var(--_row-h); font-size: var(--font-size-150); color: var(--color-content-default-secondary); background: var(--color-background-elevation-raised); border-right: 1px solid var(--color-border-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .bcn-wb__lead.is-inherited { color: var(--bcn-content-muted); }
+  .bcn-wb__row.is-program .bcn-wb__lead { background: color-mix(in srgb, var(--color-content-default) 3%, var(--color-background-elevation-raised)); font-weight: var(--typography-font-weight-semibold); }
+  .bcn-wb__row.is-study .bcn-wb__lead { background: color-mix(in srgb, var(--color-content-default) 1.5%, var(--color-background-elevation-raised)); font-weight: var(--typography-font-weight-medium); }
+  .bcn-wb__row.is-selected .bcn-wb__lead { background: var(--color-background-brand-subtle); }
 
-  .bcn-wb__money { display: flex; align-items: center; justify-content: flex-end; position: sticky; left: calc(var(--_label-w) + var(--_lead-w)); z-index: 3; padding: 0 var(--spacing-300); min-height: var(--_row-h); font-size: var(--type-size-150); font-variant-numeric: tabular-nums; color: var(--color-text-secondary); background: var(--color-surface); border-right: 1px solid var(--color-border); }
+  .bcn-wb__money { display: flex; align-items: center; justify-content: flex-end; position: sticky; left: calc(var(--_label-w) + var(--_lead-w)); z-index: 3; padding: 0 var(--spacing-300); min-height: var(--_row-h); font-size: var(--font-size-150); font-variant-numeric: tabular-nums; color: var(--color-content-default-secondary); background: var(--color-background-elevation-raised); border-right: 1px solid var(--color-border-default); }
   /* Derived vs entered: parents' dollars are roll-ups (quiet, muted) so the eye
      doesn't sum the column across tiers; tasks are the real entries (solid);
      the Total row is the one honest sum (bold). */
-  .bcn-wb__row.is-program .bcn-wb__money, .bcn-wb__row.is-study .bcn-wb__money, .bcn-wb__row.is-substudy .bcn-wb__money { color: var(--color-text-muted); }
-  .bcn-wb__row.is-program .bcn-wb__money { background: color-mix(in srgb, var(--color-text-primary) 3%, var(--color-surface)); }
-  .bcn-wb__row.is-study .bcn-wb__money { background: color-mix(in srgb, var(--color-text-primary) 1.5%, var(--color-surface)); }
-  .bcn-wb__row.is-selected .bcn-wb__money { background: var(--color-primary-subtle); }
-  .bcn-wb__row--total { border-top: 2px solid var(--color-border-strong); border-bottom: 0; }
-  .bcn-wb__label--total { display: flex; align-items: center; font-size: var(--type-size-150); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-wb__money--total { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
+  .bcn-wb__row.is-program .bcn-wb__money, .bcn-wb__row.is-study .bcn-wb__money, .bcn-wb__row.is-substudy .bcn-wb__money { color: var(--bcn-content-muted); }
+  .bcn-wb__row.is-program .bcn-wb__money { background: color-mix(in srgb, var(--color-content-default) 3%, var(--color-background-elevation-raised)); }
+  .bcn-wb__row.is-study .bcn-wb__money { background: color-mix(in srgb, var(--color-content-default) 1.5%, var(--color-background-elevation-raised)); }
+  .bcn-wb__row.is-selected .bcn-wb__money { background: var(--color-background-brand-subtle); }
+  .bcn-wb__row--total { border-top: 2px solid var(--color-border-default-strong); border-bottom: 0; }
+  .bcn-wb__label--total { display: flex; align-items: center; font-size: var(--font-size-150); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-wb__money--total { font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
   .bcn-wb__add { flex-shrink: 0; margin-left: auto; display: inline-flex; opacity: 0.55; transition: opacity 120ms ease; }
   .bcn-wb__row:hover .bcn-wb__add, .bcn-wb__add:focus-within { opacity: 1; }
-  .bcn-wb__add .esa-icon-button { width: 24px; height: 24px; color: var(--color-text-tertiary); border-radius: var(--radius-100); }
-  .bcn-wb__add .esa-icon-button:hover { color: var(--color-text-primary); background: var(--color-surface-sunken); }
+  .bcn-wb__add .esa-icon-button { width: 24px; height: 24px; color: var(--color-content-default-tertiary); border-radius: var(--radius-100); }
+  .bcn-wb__add .esa-icon-button:hover { color: var(--color-content-default); background: var(--color-background-elevation-sunken); }
   .bcn-wb__add + .bcn-wb__menu { margin-left: 0; }
 
   .bcn-wb__menu { flex-shrink: 0; margin-left: auto; }
-  .bcn-wb__kebab { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--color-text-tertiary); border-radius: var(--radius-100); cursor: pointer; font-size: 1rem; line-height: 1; }
-  .bcn-wb__kebab:hover { background: var(--color-surface-sunken); color: var(--color-text-primary); }
+  .bcn-wb__kebab { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--color-content-default-tertiary); border-radius: var(--radius-100); cursor: pointer; font-size: 1rem; line-height: 1; }
+  .bcn-wb__kebab:hover { background: var(--color-background-elevation-sunken); color: var(--color-content-default); }
 
   /* plot cell */
   .bcn-wb__plot { position: relative; min-height: var(--_row-h); }
   .bcn-wb__band { position: absolute; top: 0; bottom: 0; }
-  .bcn-wb__grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-border-light); }
-  .bcn-wb__grid.is-five { background: var(--color-border); }
-  .bcn-wb__ms-line { position: absolute; top: 0; bottom: 0; width: 1px; background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 35%, transparent) 0 4px, transparent 4px 8px); }
-  .bcn-wb__today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--color-warning); z-index: 2; }
-  .bcn-wb__unscheduled { position: absolute; left: var(--spacing-300); top: 50%; transform: translateY(-50%); font-size: 0.8125rem; color: var(--color-text-tertiary); font-style: italic; }
+  .bcn-wb__grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-border-default-subtle); }
+  .bcn-wb__grid.is-five { background: var(--color-border-default); }
+  .bcn-wb__ms-line { position: absolute; top: 0; bottom: 0; width: 1px; background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--color-background-brand) 35%, transparent) 0 4px, transparent 4px 8px); }
+  .bcn-wb__today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--color-background-utility-warning); z-index: 2; }
+  .bcn-wb__unscheduled { position: absolute; left: var(--spacing-300); top: 50%; transform: translateY(-50%); font-size: 0.8125rem; color: var(--color-content-default-tertiary); font-style: italic; }
 
   /* task bar (status color) */
   .bcn-wb__bar {
@@ -1386,7 +1386,7 @@ function leadCell(node: HierNode): { text: string; filterVal: string; inherited:
     transition: filter 120ms ease, box-shadow 120ms ease;
   }
   .bcn-wb__bar:hover { filter: brightness(1.05); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_c) 35%, transparent); }
-  .bcn-wb__bar:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
+  .bcn-wb__bar:focus-visible { outline: 2px solid var(--color-background-brand); outline-offset: 1px; }
   .bcn-wb__row.is-selected .bcn-wb__bar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--_c) 45%, transparent); }
 
   /* parent roll-up brackets — weight steps down the tree so tier reads in the plot */
@@ -1394,24 +1394,24 @@ function leadCell(node: HierNode): { text: string; filterVal: string; inherited:
     position: absolute; top: 50%; transform: translateY(-50%);
     min-width: 5px; z-index: 1; border-radius: 2px;
   }
-  .bcn-wb__row.is-program .bcn-wb__summary { height: 10px; background: color-mix(in srgb, var(--color-text-primary) 24%, transparent); border: 1px solid var(--color-text-tertiary); }
-  .bcn-wb__row.is-study .bcn-wb__summary { height: 7px; background: color-mix(in srgb, var(--color-text-primary) 15%, transparent); border: 1px solid var(--color-border-strong); }
-  .bcn-wb__row.is-substudy .bcn-wb__summary { height: 4px; background: color-mix(in srgb, var(--color-text-primary) 10%, transparent); border: 0; }
-  .bcn-wb__summary::before, .bcn-wb__summary::after { content: ''; position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--color-text-tertiary); }
+  .bcn-wb__row.is-program .bcn-wb__summary { height: 10px; background: color-mix(in srgb, var(--color-content-default) 24%, transparent); border: 1px solid var(--color-content-default-tertiary); }
+  .bcn-wb__row.is-study .bcn-wb__summary { height: 7px; background: color-mix(in srgb, var(--color-content-default) 15%, transparent); border: 1px solid var(--color-border-default-strong); }
+  .bcn-wb__row.is-substudy .bcn-wb__summary { height: 4px; background: color-mix(in srgb, var(--color-content-default) 10%, transparent); border: 0; }
+  .bcn-wb__summary::before, .bcn-wb__summary::after { content: ''; position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--color-content-default-tertiary); }
   .bcn-wb__summary::before { left: 0; }
   .bcn-wb__summary::after { right: 0; }
   .bcn-wb__row.is-substudy .bcn-wb__summary::before, .bcn-wb__row.is-substudy .bcn-wb__summary::after { display: none; }
 
   /* Ghost add-row at the bottom of the tree body — the button rides the sticky
      label column so it stays visible while the plot scrolls. */
-  .bcn-wb__addrow { display: grid; grid-template-columns: var(--_label-w) var(--_lead-w) var(--_money-w) 1fr; border-top: 1px solid var(--color-border-light); }
-  .bcn-wb__addrow > span:first-child { display: block; position: sticky; left: 0; padding: var(--spacing-150) var(--spacing-200); background: var(--color-surface); border-right: 1px solid var(--color-border); }
+  .bcn-wb__addrow { display: grid; grid-template-columns: var(--_label-w) var(--_lead-w) var(--_money-w) 1fr; border-top: 1px solid var(--color-border-default-subtle); }
+  .bcn-wb__addrow > span:first-child { display: block; position: sticky; left: 0; padding: var(--spacing-150) var(--spacing-200); background: var(--color-background-elevation-raised); border-right: 1px solid var(--color-border-default); }
   .bcn-wb__addrow .esa-button { display: block; width: 100%; }
   .bcn-wb__addrow .esa-button .esa-button__native { width: 100%; justify-content: center; }
 
   /* reparent dialog footer */
   .bcn-wb__dialog-foot { display: flex; justify-content: flex-end; gap: var(--spacing-200); width: 100%; }
-  .bcn-wb__dialog-cancel, .bcn-wb__dialog-move { padding: var(--spacing-200) var(--spacing-400); font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); border-radius: var(--radius-200); cursor: pointer; border: 1px solid var(--color-border); }
-  .bcn-wb__dialog-cancel { background: var(--color-surface); color: var(--color-text-secondary); }
-  .bcn-wb__dialog-move { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }
+  .bcn-wb__dialog-cancel, .bcn-wb__dialog-move { padding: var(--spacing-200) var(--spacing-400); font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); border-radius: var(--radius-200); cursor: pointer; border: 1px solid var(--color-border-default); }
+  .bcn-wb__dialog-cancel { background: var(--color-background-elevation-raised); color: var(--color-content-default-secondary); }
+  .bcn-wb__dialog-move { background: var(--color-background-brand); color: var(--color-content-default-knockout); border-color: var(--color-background-brand); }
 </style>
diff --git a/src/components/bcn/evidence-drawer.ts b/src/components/bcn/evidence-drawer.ts
index 1b0db384..fb1cc52b 100644
--- a/src/components/bcn/evidence-drawer.ts
+++ b/src/components/bcn/evidence-drawer.ts
@@ -629,7 +629,7 @@ export function initEvidenceDrawer(): void {
   // ── Dragging ─────────────────────────────────────────────────────────────
   // HTML5 drag API rather than Angular CDK, but the VISUAL contract is the wizard's: grip
   // handle, source card dimmed while it travels, a compact chip as the drag image, and the
-  // receiving card tinted with --color-secondary.
+  // receiving card tinted with --color-background-brand-muted.
 
   let draggingId: string | null = null;
 
diff --git a/src/data/component-dashboard.ts b/src/data/component-dashboard.ts
index b1117f30..068b9cc3 100644
--- a/src/data/component-dashboard.ts
+++ b/src/data/component-dashboard.ts
@@ -26,7 +26,7 @@ export interface ComponentStatusMeta {
  * Re-pointed off raw literals (#bdbdbd / #f59e0b / #656565 / #22c55e) onto the Beacon
  * status-color standard declared in theme-beacon.css, so this surface can never drift
  * from the dashboards, the grid chips, and the pulses. Note `complete` moves from the
- * generic #22c55e to Beacon's own --color-success (#2e7571) — that was the whole point
+ * generic #22c55e to Beacon's own --color-background-utility-success (#2e7571) — that was the whole point
  * of the standard. `on-hold` had no --bcn-status-* entry when this was re-pointed; the
  * hook was added alongside the component index (the first surface to render all four
  * lifecycle states side by side), and it is deliberately DARKER than not-started — a
@@ -34,9 +34,9 @@ export interface ComponentStatusMeta {
  */
 export const STATUS_META: Record<ComponentStatus, ComponentStatusMeta> = {
   'not-started': { label: 'Not started', hex: 'var(--bcn-status-not-started)' },
-  'in-progress': { label: 'In progress', hex: 'var(--color-warning)' },
+  'in-progress': { label: 'In progress', hex: 'var(--color-background-utility-warning)' },
   'on-hold': { label: 'On hold', hex: 'var(--bcn-status-on-hold)' },
-  complete: { label: 'Complete', hex: 'var(--color-success)' },
+  complete: { label: 'Complete', hex: 'var(--color-background-utility-success)' },
 };
 
 /** Fixed display order for the breakdown bar + legend. */
diff --git a/src/data/component-detail.ts b/src/data/component-detail.ts
index 6df268dc..e8132ad2 100644
--- a/src/data/component-detail.ts
+++ b/src/data/component-detail.ts
@@ -299,8 +299,8 @@ export const COMPONENT_MAP_POINTS = WORK_AREAS.map((w) => ({
 }));
 
 export const COMPONENT_MAP_LEGEND = [
-  { label: 'Cleared', color: 'var(--color-success)' },
-  { label: 'Scheduled', color: 'var(--color-info)' },
+  { label: 'Cleared', color: 'var(--color-background-utility-success)' },
+  { label: 'Scheduled', color: 'var(--color-background-utility-info)' },
   { label: 'In progress', color: 'var(--bcn-status-in-progress)' },
   { label: 'Not started', color: 'var(--bcn-status-not-started)' },
 ];
diff --git a/src/data/due-diligence-fixture.ts b/src/data/due-diligence-fixture.ts
index a75dba38..9fcba69e 100644
--- a/src/data/due-diligence-fixture.ts
+++ b/src/data/due-diligence-fixture.ts
@@ -231,9 +231,9 @@ export interface GisLayerFixture {
 }
 
 export const RISK_HEX: Record<Risk, string> = {
-  high: '#e5484d', // --color-danger
-  medium: '#f59e0b', // --color-warning
-  low: '#228be6', // --color-info
+  high: '#e5484d', // --color-background-utility-danger
+  medium: '#f59e0b', // --color-background-utility-warning
+  low: '#228be6', // --color-background-utility-info
   none: '#8a9099', // neutral fallback (matches the map components' MARK_FALLBACK)
 };
 
diff --git a/src/data/handoff/data-catalog-requirement-streamlined.mjs b/src/data/handoff/data-catalog-requirement-streamlined.mjs
index 0ab588ea..65a29a5c 100644
--- a/src/data/handoff/data-catalog-requirement-streamlined.mjs
+++ b/src/data/handoff/data-catalog-requirement-streamlined.mjs
@@ -84,14 +84,14 @@ export default {
         'One connected lineage spine leading the rail: the entity chain this requirement descends from — Project → Source Document → Commitment → this Requirement — on a single line with one circular-icon treatment. It places the merged record in the catalog hierarchy and doubles as upward navigation to its provenance.',
       decisions: [
         'A single <ol> renders all four nodes so they share the connecting line + circular icon chips — it must read as ONE spine, ported verbatim from the standard twin (data-catalog-requirement.astro) so the two workflows stay visually parallel.',
-        'The CURRENT node (this Requirement) gets the secondary-ring accent (border + text in --color-secondary) and a non-link name; ancestry nodes are links in the brand link color.',
+        'The CURRENT node (this Requirement) gets the secondary-ring accent (border + text in --color-background-brand-muted) and a non-link name; ancestry nodes are links in the brand link color.',
         'Each node shows a "kind" caption (Project / Source Document / Commitment / Requirement) above the entity name. The Commitment node names both id and title (MM-BIO-2 — Nesting Birds and Raptors).',
         'Lineage LEADS the rail (above Details / Timing / Notifications) — provenance first, config second. It replaced the removed "Track this Requirement" jump-off as the rail\'s opening module.',
       ],
       gotchas: [
         'The connecting line is a ::before on each node, hidden on :last-child — keep all nodes in the one <ol> or the line breaks.',
         'This is composition glue shared across the catalog detail family (requirement / commitment / source-document), not an esa-* lego — the lego lookup found no ancestry-spine component. If Angular already has an entity-breadcrumb/lineage control, reuse it; otherwise this is a promotion candidate.',
-        'The current-node ring is --color-secondary here (the requirement family), whereas the source-document page fills the current dot with --color-primary — keep each page\'s family accent.',
+        'The current-node ring is --color-background-brand-muted here (the requirement family), whereas the source-document page fills the current dot with --color-background-brand — keep each page\'s family accent.',
       ],
       acceptance: [
         'One unbroken spine Project → Source Document → Commitment → Requirement, the Requirement node carrying the secondary ring and a non-link name; ancestry names link to their catalog targets.',
diff --git a/src/data/handoff/data-catalog-source-document.mjs b/src/data/handoff/data-catalog-source-document.mjs
index 7b8ebfc3..ff1bad9d 100644
--- a/src/data/handoff/data-catalog-source-document.mjs
+++ b/src/data/handoff/data-catalog-source-document.mjs
@@ -124,7 +124,7 @@ export default {
       gotchas: [
         'Do not add a type-to-confirm; Beacon uses a plain confirm and the prototype matches it.',
         'The confirm dialog z-index (1400) must sit above the topbar and the other dialogs.',
-        'BcnDangerZone reads only the semantic token layer; the box border is --color-danger.',
+        'BcnDangerZone reads only the semantic token layer; the box border is --color-background-utility-danger.',
       ],
       acceptance: [
         'A red-bordered danger zone at the page bottom with a soft-danger "Delete source document" button; clicking it opens a simple confirm; confirming routes to the source-documents list.',
diff --git a/src/data/handoff/global-search.mjs b/src/data/handoff/global-search.mjs
index db38c291..3f000b1c 100644
--- a/src/data/handoff/global-search.mjs
+++ b/src/data/handoff/global-search.mjs
@@ -55,7 +55,7 @@ export default {
         'The global-search command palette — a fixed overlay centered both vertically and horizontally. It searches all 8 scopes FULL-TEXT (titles + commitment/requirement body), with a left scope-facet rail, results grouped by scope with per-scope counts, highlighted hits, and an inline ghost-text typeahead in the input. ⌘/Ctrl+Enter forks to the full results page carrying the query + active scope.',
       decisions: [
         'NULL STATE shows a centered "Search Beacon" landing only (no recents); the scope rail is PRESENT but DISABLED with no counts until a query is typed, at which point its facets enable, show counts, and the active scope highlights.',
-        'Scope facets are a left VERTICAL RAIL (not tabs); the active facet is solid --color-primary with white text.',
+        'Scope facets are a left VERTICAL RAIL (not tabs); the active facet is solid --color-background-brand with white text.',
         'Inline ghost-text typeahead: a grey predicted completion sits after the caret (a transparent pad span occupies the typed text so the grey suffix lands exactly at the caret); Tab or → accepts it.',
         'Hit highlighting is highlighter-yellow (#fde047), dark text — louder than a tinted-primary mark.',
         'Result rows carry NO leading scope icon and NO subtitle. Commitments + requirements show a purple commitment-ID badge (--color-commitment) before the title; the body match renders as a one-line serif (--font-decorative) snippet of the matched document text.',
diff --git a/src/data/handoff/help.mjs b/src/data/handoff/help.mjs
index 16947c8d..88439b07 100644
--- a/src/data/handoff/help.mjs
+++ b/src/data/handoff/help.mjs
@@ -52,9 +52,9 @@ export default {
       intent:
         'The front door to the knowledge base: the animated Aldo mark, the page title, a one-line lede, and a LARGE search field that is the page\'s primary action — plus a quiet "What\'s new in Beacon" doorway to the release notes. Search is the primary path into help; browsing is the fallback, which is why the field outweighs everything else on the surface.',
       decisions: [
-        'The search control IS the esa-text-field lego at size="lg", scaled up by a SCOPED re-point of its public size tokens (--form-height-lg: 3.5rem, --form-font-size-lg, --form-padding-x-lg, --form-radius-lg) on the field\'s own class. This is the sanctioned component-token override — localized, nothing leaks globally.',
-        'The lego\'s focus tokens default to Radix grass (an off-brand green ring); --form-border-color-focus and --focus-ring-color are re-pointed to --color-text-link, scoped to this one field.',
-        'The leading magnifier is a decorative esa-icon overlay positioned in the gutter that the enlarged --form-padding-x-lg opens. The field still owns its own box — the icon is never inside it.',
+        'The search control IS the esa-text-field lego at size="lg", scaled up on the field\'s own class: font-size cascades into the shadow input (font: inherit), and padding/radius ride the lego\'s private --_field-* hooks — the public --form-* size surface was removed upstream (2026-08) with no successor, so this is a documented reach-in pending a leading-icon slot on the hub. Localized; nothing leaks globally.',
+        'The lego\'s focus tokens default to Radix grass (an off-brand green ring); --form-border-color-focus and --focus-ring-color are re-pointed to --color-content-link, scoped to this one field.',
+        'The leading magnifier is a decorative esa-icon overlay positioned in the gutter that the enlarged --_field-padding-x opens. The field still owns its own box — the icon is never inside it.',
         'The hero is deliberately COMPACT (no card, no surface of its own, modest padding) so the category grid sits near the fold.',
         'The "What\'s new" doorway is a quiet neutral link that only takes the house link color on hover — it is a doorway, not a second call to action.',
       ],
@@ -76,8 +76,8 @@ export default {
       decisions: [
         'PROGRESSIVE, NOT CLIENT-RENDERED: every article is server-rendered as a hidden row up front. The controller only shows/hides rows and wraps matches in <mark> — the article corpus never enters the JS bundle.',
         'Keyboard: ArrowUp/ArrowDown move the active row, Enter opens it, Esc closes the dropdown. The active row is mirrored into aria-activedescendant against each row\'s id.',
-        'The active/hover row gets a quiet neutral sunken wash (--color-surface-sunken) and shifts the title to the link color — never a tint, never a colored left border.',
-        'Match highlighting is a neutral translucent wash (color-mix of --color-text-primary at 12%), which reads on both white and the sunken active row.',
+        'The active/hover row gets a quiet neutral sunken wash (--color-background-elevation-sunken) and shifts the title to the link color — never a tint, never a colored left border.',
+        'Match highlighting is a neutral translucent wash (color-mix of --color-content-default at 12%), which reads on both white and the sunken active row.',
         'The category label and the summary are genuine meta, floored at 13px; the row title sits at 15px — a deliberate dense-list size with no type role that fits.',
       ],
       gotchas: [
diff --git a/src/data/handoff/project-dashboard.mjs b/src/data/handoff/project-dashboard.mjs
index b3869666..31653cd5 100644
--- a/src/data/handoff/project-dashboard.mjs
+++ b/src/data/handoff/project-dashboard.mjs
@@ -74,7 +74,7 @@ export default {
       decisions: [
         'The window opens 7 days BEFORE today, so work that is already overdue stays visible instead of falling off the left edge. The today line marks the boundary.',
         'Marks open a CLICK-PINNED popover, not a hover tooltip. An action\'s popover is an action-implementation card: commitment badge, type, component, due date with the overdue callout, status, and a link to the action. A season\'s adds source document and related species.',
-        'Milestones use --color-info (azure) because they mark SCHEDULE, not severity — they must not borrow the red/amber urgency palette or an entity color.',
+        'Milestones use --color-background-utility-info (azure) because they mark SCHEDULE, not severity — they must not borrow the red/amber urgency palette or an entity color.',
         'Seasons scale: a project can carry 10–15. The lane shows the ones whose start or end falls inside the window (the ones changing) and hides the rest behind a show-all toggle. Bars carry their own date range.',
         'A separate month-grid calendar page was built and then CUT — the timeline covers the need. Do not rebuild one without asking.',
       ],
diff --git a/src/data/handoff/requirement-tracker.mjs b/src/data/handoff/requirement-tracker.mjs
index 173d9b20..ede0deed 100644
--- a/src/data/handoff/requirement-tracker.mjs
+++ b/src/data/handoff/requirement-tracker.mjs
@@ -33,7 +33,7 @@ export default {
         'The project title row: an H1 reading the project name ("3600 Alameda") with a green radar (Tracking) glyph, immediately followed by a neutral "Project Tracking" badge that names the workspace. The badge sits directly right of the H1, not in the far-right utilities slot.',
       decisions: [
         'The H1 is the PROJECT, not the page — the workspace name ("Project Tracking") is demoted to a badge beside it, so the user always sees what project they are in first.',
-        'The radar icon is the Tracking section glyph, tinted brand green (--color-secondary / teal-500) to tie the title to the active nav section.',
+        'The radar icon is the Tracking section glyph, tinted brand green (--color-background-brand-muted / teal-500) to tie the title to the active nav section.',
         'The badge is neutral (gray-100 bg, gray-200 border, 4px radius) — it labels, it does not signal status, so it must not read as a colored state chip.',
       ],
       gotchas: [
diff --git a/src/data/monitoring-oversight-fixture.ts b/src/data/monitoring-oversight-fixture.ts
index 72a826b1..dc50b6ca 100644
--- a/src/data/monitoring-oversight-fixture.ts
+++ b/src/data/monitoring-oversight-fixture.ts
@@ -30,9 +30,9 @@ export const SEVERITY_ORDER: SeverityLevel[] = ['in-compliance', 'needs-attentio
 // three-level scheme requested for this prototype. Colors read the semantic
 // tokens (never a raw hex) — same idiom as project-dashboard.ts's `critical`.
 export const SEVERITY_META: Record<SeverityLevel, { label: string; hex: string }> = {
-  'in-compliance': { label: 'In Compliance', hex: 'var(--color-success)' },
-  'needs-attention': { label: 'Needs Attention', hex: 'var(--color-warning)' },
-  'non-compliance': { label: 'Non-Compliance', hex: 'var(--color-danger)' },
+  'in-compliance': { label: 'In Compliance', hex: 'var(--color-background-utility-success)' },
+  'needs-attention': { label: 'Needs Attention', hex: 'var(--color-background-utility-warning)' },
+  'non-compliance': { label: 'Non-Compliance', hex: 'var(--color-background-utility-danger)' },
 };
 
 export type ObservationStatus = 'active' | 'resolved';
@@ -314,10 +314,10 @@ export const SITE_VISITS: SiteVisit[] = [
 // done) rather than copying the reference screenshot's chip colors literally.
 export type ReportStatus = 'draft' | 'in-review' | 'in-progress' | 'final';
 export const REPORT_STATUS_META: Record<ReportStatus, { label: string; hex: string }> = {
-  draft: { label: 'Draft', hex: 'var(--color-text-tertiary)' },
-  'in-review': { label: 'In Review', hex: 'var(--color-info)' },
-  'in-progress': { label: 'In Progress', hex: 'var(--color-warning)' },
-  final: { label: 'Final', hex: 'var(--color-success)' },
+  draft: { label: 'Draft', hex: 'var(--color-content-default-tertiary)' },
+  'in-review': { label: 'In Review', hex: 'var(--color-background-utility-info)' },
+  'in-progress': { label: 'In Progress', hex: 'var(--color-background-utility-warning)' },
+  final: { label: 'Final', hex: 'var(--color-background-utility-success)' },
 };
 
 /** Deterministic pipeline: newer reports haven't finished processing yet; a
diff --git a/src/data/project-dashboard.ts b/src/data/project-dashboard.ts
index 38dc014d..ea7450b7 100644
--- a/src/data/project-dashboard.ts
+++ b/src/data/project-dashboard.ts
@@ -36,9 +36,9 @@ export interface PulseMeta {
   hex: string;
 }
 export const PULSE_META: Record<PulseStatus, PulseMeta> = {
-  'on-track': { label: 'On track', hex: 'var(--color-success)' },
-  attention: { label: 'Attention', hex: 'var(--color-warning)' },
-  critical: { label: 'Critical', hex: 'var(--color-danger)' },
+  'on-track': { label: 'On track', hex: 'var(--color-background-utility-success)' },
+  attention: { label: 'Attention', hex: 'var(--color-background-utility-warning)' },
+  critical: { label: 'Critical', hex: 'var(--color-background-utility-danger)' },
   // Light gray, not mid gray (Andy, round 3): quiet rows keep their dot for
   // row-to-row consistency, but the dot recedes.
   quiet: { label: 'Quiet', hex: 'var(--bcn-status-not-started)' },
@@ -77,7 +77,7 @@ export const PROJECT: Project = {
     'The Delta Conveyance Project will modernize water infrastructure in the Sacramento-San Joaquin Delta by making physical improvements to how we capture and move water during wet years for use in dry years with a tunnel system. The Delta Conveyance Project is intended to restore the reliability of the State Water Project and ensure California’s largest supply of clean and affordable water for 27 million people and 750,000 acres of farmland is protected from earthquakes and climate-driven weather extremes.',
   logo: '/images/dcp/dwr-logo.png',
   hero: '/images/dcp/hero.jpeg',
-  phase: { key: 'preconstruction', label: 'Pre-Construction', hex: 'var(--color-primary)' },
+  phase: { key: 'preconstruction', label: 'Pre-Construction', hex: 'var(--color-background-brand)' },
   // Every fact is a Project-record field (round 6: Lead agency, Region,
   // Components, and Tracking-since had no DB source — cut. The org line in the
   // header is Tenant.Name; files render below the facts from Project.Files).
diff --git a/src/layouts/AppShell.astro b/src/layouts/AppShell.astro
index 9e047fb3..99d30ad9 100644
--- a/src/layouts/AppShell.astro
+++ b/src/layouts/AppShell.astro
@@ -6,16 +6,16 @@
 //   - side-nav-modern.component.*        → side nav (logo, project-switcher, main-nav)
 //
 // SCSS → spoke-token translation (no hardcoded hex/px):
-//   $gray-N → var(--bcn-gray-N); $primary → var(--color-primary);
-//   rgba($primary,.1) → color-mix(...); $white → var(--color-surface);
-//   $accent → var(--color-accent); $danger-600/50 → var(--color-danger[-subtle]);
+//   $gray-N → var(--bcn-gray-N); $primary → var(--color-background-brand);
+//   rgba($primary,.1) → color-mix(...); $white → var(--color-background-elevation-raised);
+//   $accent → var(--color-background-accent); $danger-600/50 → var(--color-background-utility-danger[-subtle]);
 //   $spacing-* → var(--spacing-*). Radii kept as spacing vars (verbatim).
 //
 // Driven by a static fixture (see defaults below). The collapse toggle + user
 // panel are wired with a tiny inline script — no framework.
 import BaseLayout from './BaseLayout.astro';
 import EsaIcon from '@esa/ecology/esa-icon.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import BcnSearchTrigger from '../components/bcn/BcnSearchTrigger.astro';
 import BcnOmniSearch from '../components/bcn/BcnOmniSearch.astro';
 import BcnHelpBar from '../components/bcn/BcnHelpBar.astro';
@@ -267,7 +267,7 @@ if (activeNavId) {
           <EsaIcon name="sliders-horizontal" size="md" paths={LUCIDE['sliders-horizontal']} />
         </a>
 
-        <EsaIconButton
+        <EsaIconButton variant="chrome" iconOnly
           icon="settings"
           label="Admin settings"
           size="md"
@@ -479,8 +479,8 @@ if (activeNavId) {
     padding: var(--spacing-050) var(--spacing-200);
     font-size: 0.8125rem; /* 13px — the meta/dense floor; was 12px */
     font-weight: 600;
-    background: var(--color-accent);
-    color: var(--color-surface);
+    background: var(--color-background-accent);
+    color: var(--color-background-elevation-raised);
     border-radius: var(--spacing-100);
     white-space: nowrap;
   }
@@ -546,10 +546,10 @@ if (activeNavId) {
   }
   .sidebar-toggle:hover {
     background: var(--bcn-gray-200);
-    color: var(--color-primary);
+    color: var(--color-background-brand);
   }
   .sidebar-toggle:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-background-brand);
     outline-offset: 2px;
   }
   .sidebar-toggle__icon {
@@ -583,7 +583,7 @@ if (activeNavId) {
      their resting icon color via the zone. The hand-rolled .icon-button (ESA-Config)
      reads the same semantic token below. */
   .topbar__right :global(.esa-icon-button) {
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   .icon-button {
@@ -596,21 +596,21 @@ if (activeNavId) {
     border: none;
     border-radius: var(--spacing-050);
     background: transparent;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     text-decoration: none;
     cursor: pointer;
     transition: background 150ms ease, color 150ms ease;
   }
   .icon-button:hover {
-    background: var(--color-surface-sunken);
-    color: var(--color-primary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-background-brand);
   }
   .icon-button--active {
-    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    color: var(--color-primary);
+    background: color-mix(in srgb, var(--color-background-brand) 10%, transparent);
+    color: var(--color-background-brand);
   }
   .icon-button:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-background-brand);
     outline-offset: 2px;
   }
 
@@ -635,7 +635,7 @@ if (activeNavId) {
     transform: scale(1.05);
   }
   .user-menu-trigger:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-background-brand);
     outline-offset: 2px;
   }
   .user-menu-trigger__avatar {
@@ -654,7 +654,7 @@ if (activeNavId) {
     color: var(--bcn-gray-500);
   }
   .user-menu-trigger:hover .user-menu-trigger__avatar {
-    border-color: var(--color-primary);
+    border-color: var(--color-background-brand);
   }
 
   /* User panel dropdown (ui-dropdown content, position bottom-end) */
@@ -663,7 +663,7 @@ if (activeNavId) {
     top: calc(100% + var(--spacing-200));
     right: 0;
     min-width: 280px;
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     border-radius: var(--spacing-200);
     border: 1px solid var(--bcn-gray-200);
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
@@ -747,16 +747,16 @@ if (activeNavId) {
     background: var(--bcn-gray-100);
   }
   .user-panel__item--danger {
-    color: var(--color-danger);
+    color: var(--color-background-utility-danger);
   }
   .user-panel__item--danger:hover {
-    background: var(--color-danger-subtle);
+    background: var(--color-background-utility-danger-subtle);
   }
   .user-panel__item :global(.esa-icon) {
     color: var(--bcn-gray-500);
   }
   .user-panel__item--danger :global(.esa-icon) {
-    color: var(--color-danger);
+    color: var(--color-background-utility-danger);
   }
 
   /* ═══════════════════════════════════════════════════════════════════
@@ -834,7 +834,7 @@ if (activeNavId) {
     min-width: 0;
     box-sizing: border-box;
     padding: var(--spacing-200) var(--spacing-300);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     border: 1px solid var(--bcn-gray-200);
     border-radius: var(--spacing-200);
     cursor: pointer;
@@ -930,16 +930,16 @@ if (activeNavId) {
   }
   .nav-section__header:hover {
     background: rgba(0, 0, 0, 0.04);
-    color: var(--color-primary);
+    color: var(--color-background-brand);
   }
   .nav-section__header:hover :global(.esa-icon) {
-    color: var(--color-primary);
+    color: var(--color-background-brand);
   }
   .nav-section--active .nav-section__header {
-    color: var(--color-primary);
+    color: var(--color-background-brand);
   }
   .nav-section--active .nav-section__header :global(.esa-icon) {
-    color: var(--color-primary);
+    color: var(--color-background-brand);
   }
 
   /* icon (first esa-icon in the header) */
@@ -1024,6 +1024,6 @@ if (activeNavId) {
   }
   .nav-sublink.active {
     background: rgba(0, 0, 0, 0.04);
-    color: var(--color-primary);
+    color: var(--color-background-brand);
   }
 </style>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 3de84f30..c833ee76 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -38,13 +38,13 @@ const { title = 'Beacon Design' } = Astro.props;
       *, *::before, *::after { box-sizing: border-box; }
       body {
         margin: 0;
-        font-family: var(--font-sans, system-ui, sans-serif);
-        font-weight: var(--font-weight-regular, 350);
-        color: var(--color-text-primary, #3d3d3d);
-        background: var(--color-surface, #fff);
+        font-family: var(--typography-font-family-sans, system-ui, sans-serif);
+        font-weight: var(--typography-font-weight-regular, 350);
+        color: var(--color-content-default, #3d3d3d);
+        background: var(--color-background-elevation-raised, #fff);
         -webkit-font-smoothing: antialiased;
       }
-      a { color: var(--color-text-link, #005862); text-decoration: none; }
+      a { color: var(--color-content-link, #005862); text-decoration: none; }
       img { display: block; max-width: 100%; }
       button { font-family: inherit; cursor: pointer; background: none; border: 0; }
     </style>
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
index dd8636e6..057a7b62 100644
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@@ -9,7 +9,7 @@
 // SCSS → spoke-token translation (no hardcoded hex/px):
 //   $gray-N → the --bcn-gray ramp; $spacing-* → the --spacing ramp;
 //   font-weight 650 → the bold weight token; the decorative font token kept
-//   (Besley); $type-size-500 → var(--type-size-500).
+//   (Besley); $type-size-500 → var(--font-size-500).
 import EsaIcon from '@esa/ecology/esa-icon.astro';
 
 export interface Breadcrumb {
@@ -248,8 +248,8 @@ const hasCrumbEnd = Astro.slots.has('breadcrumb-end');
     align-items: center;
     gap: var(--spacing-200);
     font-family: var(--font-decorative);
-    font-weight: var(--font-weight-bold);
-    font-size: var(--type-size-500);
+    font-weight: var(--typography-font-weight-bold);
+    font-size: var(--font-size-500);
     margin: 0;
     color: var(--bcn-gray-1000);
   }
diff --git a/src/pages/design-system/components/esa-alert-box.astro b/src/pages/design-system/components/esa-alert-box.astro
index c4eced21..be2215e0 100644
--- a/src/pages/design-system/components/esa-alert-box.astro
+++ b/src/pages/design-system/components/esa-alert-box.astro
@@ -50,9 +50,9 @@ const events = [
 
   <Section id="tokens" title="Tokens">
     <ul class="tokens">
-      <li><code>--color-info</code> / <code>--color-success</code> / <code>--color-warning</code> / <code>--color-danger</code> + their <code>-subtle</code> and <code>-border</code> variants — re-pointed to Beacon's palette by the theme</li>
-      <li><code>--color-text-primary</code> (title) · <code>--color-text-secondary</code> (message) · <code>--color-text-muted</code> (dismiss)</li>
-      <li><code>--radius-200</code> · <code>--spacing-*</code> · <code>--type-size-150</code></li>
+      <li><code>--color-background-utility-info</code> / <code>--color-background-utility-success</code> / <code>--color-background-utility-warning</code> / <code>--color-background-utility-danger</code> + their <code>-subtle</code> and <code>-border</code> variants — re-pointed to Beacon's palette by the theme</li>
+      <li><code>--color-content-default</code> (title) · <code>--color-content-default-secondary</code> (message) · <code>--bcn-content-muted</code> (dismiss)</li>
+      <li><code>--radius-200</code> · <code>--spacing-*</code> · <code>--font-size-150</code></li>
     </ul>
   </Section>
 </ComponentDoc>
diff --git a/src/pages/design-system/components/esa-button-toggle.astro b/src/pages/design-system/components/esa-button-toggle.astro
index eff308ce..66f9eec0 100644
--- a/src/pages/design-system/components/esa-button-toggle.astro
+++ b/src/pages/design-system/components/esa-button-toggle.astro
@@ -92,10 +92,10 @@ const events = [
   <Section id="tokens" title="Tokens">
     <p>Override the form and semantic token layers to re-skin without touching the component:</p>
     <ul class="tokens">
-      <li><code>--color-primary</code> · <code>--color-text-inverse</code> — selected segment fill and text</li>
+      <li><code>--color-background-brand</code> · <code>--color-content-default-knockout</code> — selected segment fill and text</li>
       <li><code>{'--form-{height,padding-x,font-size,radius}-{xs,sm,md,lg}'}</code> — size scale</li>
-      <li><code>--form-bg</code> · <code>--form-border-color</code> · <code>--form-text-color</code> — unselected segments</li>
-      <li><code>--color-surface-sunken</code> — hover tint · <code>--color-disabled-text</code> — disabled state</li>
+      <li><code>--color-background-field</code> · <code>--form-border-color</code> · <code>--form-text-color</code> — unselected segments</li>
+      <li><code>--color-background-elevation-sunken</code> — hover tint · <code>--color-content-disabled</code> — disabled state</li>
       <li><code>--focus-ring-width</code> / <code>--focus-ring-color</code> — focus ring</li>
       <li><code>--form-label-color</code> — label</li>
     </ul>
@@ -110,11 +110,11 @@ const events = [
     padding: var(--spacing-200, 0.5rem) var(--spacing-400, 1rem);
     border: 0;
     border-radius: var(--radius-200, 0.5rem);
-    background: var(--color-primary, #005862);
-    color: var(--color-text-inverse, #fff);
+    background: var(--color-background-brand, #005862);
+    color: var(--color-content-default-knockout, #fff);
     cursor: pointer;
   }
-  .demo-out { font-family: var(--font-mono, monospace); font-size: 14px; color: var(--color-text-secondary, #525252); }
+  .demo-out { font-family: var(--typography-font-family-mono, monospace); font-size: 14px; color: var(--color-content-default-secondary, #525252); }
 </style>
 
 <script>
diff --git a/src/pages/design-system/components/esa-button.astro b/src/pages/design-system/components/esa-button.astro
index 965ee428..2cd7884c 100644
--- a/src/pages/design-system/components/esa-button.astro
+++ b/src/pages/design-system/components/esa-button.astro
@@ -8,7 +8,7 @@ import EsaButton from '@esa/ecology/esa-button.astro';
 const colors = ['primary', 'secondary', 'danger', 'success', 'warning', 'info'] as const;
 
 const props = [
-  { name: 'color', type: "'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'ai' | 'ghost'", default: "'primary'", description: 'Semantic color role. Beacon teal comes from --color-primary (teal-900).' },
+  { name: 'color', type: "'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'ai' | 'ghost'", default: "'primary'", description: 'Semantic color role. Beacon teal comes from --color-background-brand (teal-900).' },
   { name: 'appearance', type: "'fill' | 'outline'", default: "'fill'", description: 'Solid or outlined.' },
   { name: 'size', type: "'xs' | 'sm' | 'md' | 'lg'", default: "'md'", description: 'Control size.' },
   { name: 'disabled', type: 'boolean', default: 'false', description: 'Non-interactive state.' },
@@ -20,26 +20,26 @@ const props = [
   category="Actions"
   slug="esa-button"
   type=".astro"
-  summary="The inherited Ecology button, wearing the Beacon skin. Primary is Beacon teal because the theme keeps <code>--color-primary</code> at teal-900; the rest of the palette is inherited."
+  summary="The inherited Ecology button, wearing the Beacon skin. Primary is Beacon teal because the theme keeps <code>--color-background-brand</code> at teal-900; the rest of the palette is inherited."
 >
   <Section id="colors" title="Colors">
-    <Preview code={`<EsaButton color="primary">Save</EsaButton>`}>
-      {colors.map((c) => <EsaButton color={c}>Save</EsaButton>)}
+    <Preview code={`<EsaButton variant="primary">Save</EsaButton>`}>
+      {colors.map((c) => <EsaButton variant={c}>Save</EsaButton>)}
     </Preview>
   </Section>
 
   <Section id="outline" title="Outline">
-    <Preview code={`<EsaButton color="primary" appearance="outline">Save</EsaButton>`}>
-      {colors.map((c) => <EsaButton color={c} appearance="outline">Save</EsaButton>)}
+    <Preview code={`<EsaButton variant="primary" appearance="outline">Save</EsaButton>`}>
+      {colors.map((c) => <EsaButton variant={c} appearance="outline">Save</EsaButton>)}
     </Preview>
   </Section>
 
   <Section id="sizes" title="Sizes">
     <Preview code={`<EsaButton size="xs">Save</EsaButton>`}>
-      <EsaButton color="primary" size="xs">Save</EsaButton>
-      <EsaButton color="primary" size="sm">Save</EsaButton>
-      <EsaButton color="primary" size="md">Save</EsaButton>
-      <EsaButton color="primary" size="lg">Save</EsaButton>
+      <EsaButton variant="primary" size="xs">Save</EsaButton>
+      <EsaButton variant="primary" size="sm">Save</EsaButton>
+      <EsaButton variant="primary" size="md">Save</EsaButton>
+      <EsaButton variant="primary" size="lg">Save</EsaButton>
     </Preview>
   </Section>
 
diff --git a/src/pages/design-system/components/esa-checkbox.astro b/src/pages/design-system/components/esa-checkbox.astro
index 63147d01..e9860751 100644
--- a/src/pages/design-system/components/esa-checkbox.astro
+++ b/src/pages/design-system/components/esa-checkbox.astro
@@ -21,7 +21,7 @@ const events = [
   category="Form Inputs"
   slug="esa-checkbox"
   type="wc"
-  summary="The inherited Ecology checkbox, wearing the Beacon skin. The checked and indeterminate states fill with brand teal because the theme re-points <code>--color-primary</code>; form-associated with an inlined check icon."
+  summary="The inherited Ecology checkbox, wearing the Beacon skin. The checked and indeterminate states fill with brand teal because the theme re-points <code>--color-background-brand</code>; form-associated with an inlined check icon."
 >
   <Section id="preview" title="Preview">
     <Preview code={`<esa-checkbox label="Subscribe to updates" checked></esa-checkbox>`}>
diff --git a/src/pages/design-system/components/esa-collapsible.astro b/src/pages/design-system/components/esa-collapsible.astro
index 776f2939..2193be56 100644
--- a/src/pages/design-system/components/esa-collapsible.astro
+++ b/src/pages/design-system/components/esa-collapsible.astro
@@ -25,10 +25,10 @@ const props = [
 </EsaCollapsible>`}>
       <div style="display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 420px;">
         <EsaCollapsible title="Tracking" icon="square-check" open>
-          <p style="margin: 0; color: var(--color-text-secondary);">Status, due date, and assignee fields go here.</p>
+          <p style="margin: 0; color: var(--color-content-default-secondary);">Status, due date, and assignee fields go here.</p>
         </EsaCollapsible>
         <EsaCollapsible title="Details" icon="info">
-          <p style="margin: 0; color: var(--color-text-secondary);">Scope and other read-only metadata.</p>
+          <p style="margin: 0; color: var(--color-content-default-secondary);">Scope and other read-only metadata.</p>
         </EsaCollapsible>
       </div>
     </Preview>
@@ -41,7 +41,7 @@ const props = [
 </EsaCollapsible>`}>
       <div style="display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 420px;">
         <EsaCollapsible title="Notifications">
-          <p style="margin: 0; color: var(--color-text-secondary);">Recipients and triggers.</p>
+          <p style="margin: 0; color: var(--color-content-default-secondary);">Recipients and triggers.</p>
         </EsaCollapsible>
       </div>
     </Preview>
@@ -53,9 +53,9 @@ const props = [
 
   <Section id="tokens" title="Tokens">
     <ul class="tokens">
-      <li><code>--color-border</code> (frame) · <code>--color-surface</code> (fill) · <code>--radius-300</code></li>
-      <li><code>--color-text-primary</code> (title) · <code>--color-text-secondary</code> (leading icon) · <code>--color-text-tertiary</code> (caret)</li>
-      <li><code>--type-size-150</code> · <code>--font-weight-semibold</code> · <code>--spacing-*</code></li>
+      <li><code>--color-border-default</code> (frame) · <code>--color-background-elevation-raised</code> (fill) · <code>--radius-300</code></li>
+      <li><code>--color-content-default</code> (title) · <code>--color-content-default-secondary</code> (leading icon) · <code>--color-content-default-tertiary</code> (caret)</li>
+      <li><code>--font-size-150</code> · <code>--typography-font-weight-semibold</code> · <code>--spacing-*</code></li>
     </ul>
   </Section>
 </ComponentDoc>
diff --git a/src/pages/design-system/components/esa-combobox.astro b/src/pages/design-system/components/esa-combobox.astro
index 42fd0304..a35d90ce 100644
--- a/src/pages/design-system/components/esa-combobox.astro
+++ b/src/pages/design-system/components/esa-combobox.astro
@@ -90,10 +90,10 @@ const events = [
 
   <Section id="tokens" title="Tokens">
     <ul class="tokens">
-      <li><code>--form-bg</code> · <code>--form-text-color</code> · <code>--form-border-color</code> / <code>--form-border-color-focus</code> / <code>--form-border-color-error</code></li>
-      <li><code>--form-height-*</code> · <code>--form-padding-*</code> · <code>--form-radius-*</code> · <code>--form-font-size-*</code></li>
-      <li><code>--color-surface</code> · <code>--color-surface-sunken</code> · <code>--color-active-overlay</code> · <code>--color-primary</code> / <code>--color-primary-hover</code></li>
-      <li><code>--color-warning-subtle</code> (highlight) · <code>--focus-ring-color</code> · <code>--z-dropdown</code> · <code>--shadow-200</code> · <code>--radius-full</code></li>
+      <li><code>--color-background-field</code> · <code>--form-text-color</code> · <code>--form-border-color</code> / <code>--form-border-color-focus</code> / <code>--form-error-border-color</code></li>
+      <li>Sizing reads <code>--spacing-*</code> directly (the <code>--form-height/padding/radius/font-size-*</code> hooks were removed upstream, 2026-08)</li>
+      <li><code>--color-background-elevation-raised</code> · <code>--color-background-elevation-sunken</code> · <code>--color-background-overlay-active</code> · <code>--color-background-brand</code> / <code>--color-background-brand-hover</code></li>
+      <li><code>--color-background-utility-warning-subtle</code> (highlight) · <code>--focus-ring-color</code> · <code>--z-dropdown</code> · <code>--elevation-3</code> · <code>--radius-full</code></li>
     </ul>
   </Section>
 </ComponentDoc>
diff --git a/src/pages/design-system/components/esa-date-picker.astro b/src/pages/design-system/components/esa-date-picker.astro
index d19f005c..2cca4659 100644
--- a/src/pages/design-system/components/esa-date-picker.astro
+++ b/src/pages/design-system/components/esa-date-picker.astro
@@ -72,9 +72,9 @@ const events = [
 
   <Section id="tokens" title="Tokens">
     <ul class="tokens">
-      <li><code>--form-bg</code> · <code>--form-text-color</code> · <code>--form-border-color</code> / <code>--form-border-color-focus</code> / <code>--form-border-color-error</code></li>
-      <li><code>--form-height-*</code> · <code>--form-padding-*</code> · <code>--form-radius-*</code> · <code>--form-font-size-*</code></li>
-      <li><code>--color-primary</code> (focus) · <code>--color-danger</code> · <code>--focus-ring-color</code></li>
+      <li><code>--color-background-field</code> · <code>--form-text-color</code> · <code>--form-border-color</code> / <code>--form-border-color-focus</code> / <code>--form-error-border-color</code></li>
+      <li>Sizing reads <code>--spacing-*</code> directly (the <code>--form-height/padding/radius/font-size-*</code> hooks were removed upstream, 2026-08)</li>
+      <li><code>--color-background-brand</code> (focus) · <code>--color-background-utility-danger</code> · <code>--focus-ring-color</code></li>
     </ul>
   </Section>
 </ComponentDoc>
diff --git a/src/pages/design-system/components/esa-dialog.astro b/src/pages/design-system/components/esa-dialog.astro
index 0c53c042..d27b32b2 100644
--- a/src/pages/design-system/components/esa-dialog.astro
+++ b/src/pages/design-system/components/esa-dialog.astro
@@ -93,9 +93,9 @@ const events = [
 
   <Section id="tokens" title="Tokens">
     <ul class="tokens">
-      <li><code>--color-surface-elevated</code> · <code>--color-border-light</code> · <code>--color-text-primary</code></li>
-      <li><code>--color-backdrop</code> · <code>--z-modal</code> / <code>--z-modal-backdrop</code></li>
-      <li><code>--radius-400</code> · <code>--spacing-500</code> · <code>--type-size-400</code> · <code>--font-weight-semibold</code></li>
+      <li><code>--color-background-elevation-floating</code> · <code>--color-border-default-subtle</code> · <code>--color-content-default</code></li>
+      <li><code>--color-background-overlay-backdrop</code> · <code>--z-modal</code> / <code>--z-modal-backdrop</code></li>
+      <li><code>--radius-400</code> · <code>--spacing-500</code> · <code>--font-size-400</code> · <code>--typography-font-weight-semibold</code></li>
       <li><code>--focus-ring-width</code> / <code>--focus-ring-color</code> / <code>--focus-ring-offset</code></li>
     </ul>
   </Section>
@@ -121,12 +121,12 @@ const events = [
   .trigger, .trigger-close {
     padding: 0.5rem 1rem;
     border-radius: var(--radius-200, 0.5rem);
-    border: 1px solid var(--color-border-strong, #d4d4d4);
-    background: var(--color-primary, #005862);
-    color: var(--color-text-inverse, #fff);
+    border: 1px solid var(--color-border-default-strong, #d4d4d4);
+    background: var(--color-background-brand, #005862);
+    color: var(--color-content-default-knockout, #fff);
     font-family: inherit;
-    font-size: var(--type-size-200, 0.9375rem);
+    font-size: var(--font-size-200, 0.9375rem);
     cursor: pointer;
   }
-  .trigger-close { background: transparent; color: var(--color-text-primary, #171717); }
+  .trigger-close { background: transparent; color: var(--color-content-default, #171717); }
 </style>
diff --git a/src/pages/design-system/components/esa-dropdown-menu.astro b/src/pages/design-system/components/esa-dropdown-menu.astro
index e7bb5245..25eb7aa5 100644
--- a/src/pages/design-system/components/esa-dropdown-menu.astro
+++ b/src/pages/design-system/components/esa-dropdown-menu.astro
@@ -61,9 +61,9 @@ const events = [
 
   <Section id="tokens" title="Tokens">
     <ul class="tokens">
-      <li><code>--color-surface-elevated</code> · <code>--color-border</code> / <code>--color-border-light</code></li>
-      <li><code>--color-text-primary</code> · <code>--color-danger</code> / <code>--color-danger-subtle</code> (danger items)</li>
-      <li><code>--shadow-300</code> · <code>--z-dropdown</code></li>
+      <li><code>--color-background-elevation-floating</code> · <code>--color-border-default</code> / <code>--color-border-default-subtle</code></li>
+      <li><code>--color-content-default</code> · <code>--color-background-utility-danger</code> / <code>--color-background-utility-danger-subtle</code> (danger items)</li>
+      <li><code>--elevation-4</code> · <code>--z-dropdown</code></li>
       <li><code>--radius-200</code> · <code>--spacing-100</code> – <code>--spacing-300</code> · <code>--focus-ring-*</code></li>
     </ul>
   </Section>
@@ -93,12 +93,12 @@ const events = [
   .trigger {
     padding: 0.5rem 1rem;
     border-radius: var(--radius-200, 0.5rem);
-    border: 1px solid var(--color-border-strong, #d4d4d4);
-    background: var(--color-surface, #fff);
-    color: var(--color-text-primary, #171717);
+    border: 1px solid var(--color-border-default-strong, #d4d4d4);
+    background: var(--color-background-elevation-raised, #fff);
+    color: var(--color-content-default, #171717);
     font-family: inherit;
-    font-size: var(--type-size-200, 0.9375rem);
+    font-size: var(--font-size-200, 0.9375rem);
     cursor: pointer;
   }
-  .result { color: var(--color-text-muted, #737373); min-height: 1.5em; width: 100%; }
+  .result { color: var(--bcn-content-muted, #737373); min-height: 1.5em; width: 100%; }
 </style>
diff --git a/src/pages/design-system/components/esa-icon-button.astro b/src/pages/design-system/components/esa-icon-button.astro
index ad9d69d1..afb0a59d 100644
--- a/src/pages/design-system/components/esa-icon-button.astro
+++ b/src/pages/design-system/components/esa-icon-button.astro
@@ -3,7 +3,7 @@ import ComponentDoc from '../../../layouts/ComponentDoc.astro';
 import Section from '@esa/docs/Section.astro';
 import Preview from '@esa/docs/Preview.astro';
 import Api from '@esa/docs/Api.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 
 const props = [
   { name: 'icon', type: 'string', description: 'Lucide icon name.' },
@@ -16,21 +16,21 @@ const props = [
   summary="Icon-only action for toolbars and chrome (search, close, overflow). Lightweight, transparent, and inherits <code>currentColor</code> — the chrome-grade counterpart to <code>esa-button</code>'s heavier <code>iconOnly</code> mode. <code>label</code> is required for accessibility.">
 
   <Section id="preview" title="Preview">
-    <Preview code={`<EsaIconButton icon="search" label="Search" />`}>
-      <EsaIconButton icon="search" label="Search" />
+    <Preview code={`<EsaIconButton variant="chrome" iconOnly icon="search" label="Search" />`}>
+      <EsaIconButton variant="chrome" iconOnly icon="search" label="Search" />
     </Preview>
   </Section>
 
   <Section id="sizes" title="Sizes">
-    <Preview code={`<EsaIconButton icon="search" label="Search" size="xs" />
-<EsaIconButton icon="search" label="Search" size="sm" />
-<EsaIconButton icon="search" label="Search" size="md" />
-<EsaIconButton icon="search" label="Search" size="lg" />`}>
+    <Preview code={`<EsaIconButton variant="chrome" iconOnly icon="search" label="Search" size="xs" />
+<EsaIconButton variant="chrome" iconOnly icon="search" label="Search" size="sm" />
+<EsaIconButton variant="chrome" iconOnly icon="search" label="Search" size="md" />
+<EsaIconButton variant="chrome" iconOnly icon="search" label="Search" size="lg" />`}>
       <div style="display:flex;gap:8px;align-items:center">
-        <EsaIconButton icon="search" label="Search" size="xs" />
-        <EsaIconButton icon="search" label="Search" size="sm" />
-        <EsaIconButton icon="search" label="Search" size="md" />
-        <EsaIconButton icon="search" label="Search" size="lg" />
+        <EsaIconButton variant="chrome" iconOnly icon="search" label="Search" size="xs" />
+        <EsaIconButton variant="chrome" iconOnly icon="search" label="Search" size="sm" />
+        <EsaIconButton variant="chrome" iconOnly icon="search" label="Search" size="md" />
+        <EsaIconButton variant="chrome" iconOnly icon="search" label="Search" size="lg" />
       </div>
     </Preview>
   </Section>
@@ -38,17 +38,17 @@ const props = [
   <Section id="oncontext" title="On any surface (currentColor)">
     <p>Transparent background and <code>currentColor</code> mean it reads correctly on a dark bar or a light surface; the hover tint is derived from the inherited color.</p>
     <Preview code={`<div style="color:#fff;background:#1e5386">
-  <EsaIconButton icon="search" label="Search" />
+  <EsaIconButton variant="chrome" iconOnly icon="search" label="Search" />
 </div>`}>
       <div style="display:flex;gap:16px">
         <div style="color:#fff;background:#1e5386;padding:8px 16px;border-radius:8px;display:flex;gap:4px">
-          <EsaIconButton icon="search" label="Search" />
-          <EsaIconButton icon="bell" label="Notifications" />
-          <EsaIconButton icon="settings" label="Settings" />
+          <EsaIconButton variant="chrome" iconOnly icon="search" label="Search" />
+          <EsaIconButton variant="chrome" iconOnly icon="bell" label="Notifications" />
+          <EsaIconButton variant="chrome" iconOnly icon="settings" label="Settings" />
         </div>
         <div style="background:#f3f7fc;padding:8px 16px;border-radius:8px;display:flex;gap:4px;color:#1e5386">
-          <EsaIconButton icon="search" label="Search" />
-          <EsaIconButton icon="x" label="Close" />
+          <EsaIconButton variant="chrome" iconOnly icon="search" label="Search" />
+          <EsaIconButton variant="chrome" iconOnly icon="x" label="Close" />
         </div>
       </div>
     </Preview>
diff --git a/src/pages/design-system/components/esa-input-tag.astro b/src/pages/design-system/components/esa-input-tag.astro
index c8287024..a3af7f1e 100644
--- a/src/pages/design-system/components/esa-input-tag.astro
+++ b/src/pages/design-system/components/esa-input-tag.astro
@@ -52,10 +52,10 @@ const events = [
   <Section id="states" title="States">
     <p>The required asterisk, hint text, and disabled state are attribute-driven. Disabled fields keep their chips but drop the remove buttons.</p>
     <Preview code={`<esa-input-tag label="Required" required placeholder="At least one tag"></esa-input-tag>
-<esa-input-tag label="With hint" hint="Press Enter to add each tag."></esa-input-tag>
+<esa-input-tag label="With hint" help-text="Press Enter to add each tag."></esa-input-tag>
 <esa-input-tag label="Disabled" disabled></esa-input-tag>`}>
       <esa-input-tag label="Required" required placeholder="At least one tag"></esa-input-tag>
-      <esa-input-tag label="With hint" hint="Press Enter to add each tag." placeholder="Add a tag"></esa-input-tag>
+      <esa-input-tag label="With hint" help-text="Press Enter to add each tag." placeholder="Add a tag"></esa-input-tag>
       <esa-input-tag id="it-disabled" label="Disabled" disabled></esa-input-tag>
     </Preview>
   </Section>
@@ -91,11 +91,11 @@ const events = [
   <Section id="tokens" title="Tokens">
     <p>Override the form token layer to re-skin without touching the component:</p>
     <ul class="tokens">
-      <li><code>--form-bg</code> · <code>--form-text-color</code> · <code>--form-border-color</code> / <code>--form-border-color-hover</code> / <code>--form-border-color-focus</code></li>
+      <li><code>--color-background-field</code> · <code>--form-text-color</code> · <code>--form-border-color</code> / <code>--form-border-color-hover</code> / <code>--form-border-color-focus</code></li>
       <li><code>{'--form-{height,padding-x,padding-y,font-size,radius}-{xs,sm,md,lg}'}</code> (size scale)</li>
-      <li><code>--form-label-color</code> · <code>--form-help-color</code> · <code>--form-placeholder-color</code> · <code>--form-bg-disabled</code></li>
-      <li><code>--color-active-overlay</code> · <code>--color-primary</code> (chips) · <code>--color-surface</code> · <code>--color-surface-sunken</code> (dropdown)</li>
-      <li><code>--focus-ring-width</code> / <code>--focus-ring-color</code> · <code>--z-dropdown</code> · <code>--shadow-200</code> · <code>--radius-full</code></li>
+      <li><code>--form-label-color</code> · <code>--form-help-color</code> · <code>--form-placeholder-color</code> · <code>--color-background-disabled</code></li>
+      <li><code>--color-background-overlay-active</code> · <code>--color-background-brand</code> (chips) · <code>--color-background-elevation-raised</code> · <code>--color-background-elevation-sunken</code> (dropdown)</li>
+      <li><code>--focus-ring-width</code> / <code>--focus-ring-color</code> · <code>--z-dropdown</code> · <code>--elevation-3</code> · <code>--radius-full</code></li>
     </ul>
   </Section>
 </ComponentDoc>
@@ -108,11 +108,11 @@ const events = [
     padding: var(--spacing-200, 0.5rem) var(--spacing-400, 1rem);
     border: 0;
     border-radius: var(--radius-200, 0.5rem);
-    background: var(--color-primary, #005862);
-    color: var(--color-text-inverse, #fff);
+    background: var(--color-background-brand, #005862);
+    color: var(--color-content-default-knockout, #fff);
     cursor: pointer;
   }
-  .demo-out { font-family: var(--font-mono, monospace); font-size: 14px; color: var(--color-text-secondary, #525252); }
+  .demo-out { font-family: var(--typography-font-family-mono, monospace); font-size: 14px; color: var(--color-content-default-secondary, #525252); }
 </style>
 
 <script>
diff --git a/src/pages/design-system/components/esa-popover.astro b/src/pages/design-system/components/esa-popover.astro
index 3995127a..bee81fec 100644
--- a/src/pages/design-system/components/esa-popover.astro
+++ b/src/pages/design-system/components/esa-popover.astro
@@ -96,9 +96,9 @@ const props = [
 
   <Section id="tokens" title="Tokens">
     <ul class="tokens">
-      <li><code>--color-surface</code> · <code>--color-border</code> · <code>--color-text-primary</code></li>
-      <li><code>--color-gray-900</code> · <code>--color-text-inverse</code> (inverse appearance)</li>
-      <li><code>--shadow-300</code> · <code>--z-dropdown</code></li>
+      <li><code>--color-background-elevation-raised</code> · <code>--color-border-default</code> · <code>--color-content-default</code></li>
+      <li><code>--color-gray-900</code> · <code>--color-content-default-knockout</code> (inverse appearance)</li>
+      <li><code>--elevation-4</code> · <code>--z-dropdown</code></li>
       <li><code>--radius-200</code> · <code>--spacing-300</code></li>
     </ul>
   </Section>
@@ -110,11 +110,11 @@ const props = [
   .trigger {
     padding: 0.5rem 1rem;
     border-radius: var(--radius-200, 0.5rem);
-    border: 1px solid var(--color-border-strong, #d4d4d4);
-    background: var(--color-surface, #fff);
-    color: var(--color-text-primary, #171717);
+    border: 1px solid var(--color-border-default-strong, #d4d4d4);
+    background: var(--color-background-elevation-raised, #fff);
+    color: var(--color-content-default, #171717);
     font-family: inherit;
-    font-size: var(--type-size-200, 0.9375rem);
+    font-size: var(--font-size-200, 0.9375rem);
     cursor: pointer;
   }
 </style>
diff --git a/src/pages/design-system/components/esa-select.astro b/src/pages/design-system/components/esa-select.astro
index 9e8e9bb8..7e16a19f 100644
--- a/src/pages/design-system/components/esa-select.astro
+++ b/src/pages/design-system/components/esa-select.astro
@@ -24,7 +24,7 @@ const events = [
   category="Form Inputs"
   slug="esa-select"
   type="wc"
-  summary="The inherited Ecology searchable select, wearing the Beacon skin. Single/multi-select with type-to-filter and removable chips; the active option and focus state pick up brand teal from <code>--color-primary</code>."
+  summary="The inherited Ecology searchable select, wearing the Beacon skin. Single/multi-select with type-to-filter and removable chips; the active option and focus state pick up brand teal from <code>--color-background-brand</code>."
 >
   <Section id="preview" title="Preview">
     <Preview code={`<esa-select label="Fruit" placeholder="Choose a fruit" help-text="Type to filter"></esa-select>`}>
diff --git a/src/pages/design-system/components/esa-switch-toggle.astro b/src/pages/design-system/components/esa-switch-toggle.astro
index c269e62e..acbcca97 100644
--- a/src/pages/design-system/components/esa-switch-toggle.astro
+++ b/src/pages/design-system/components/esa-switch-toggle.astro
@@ -21,7 +21,7 @@ const events = [
   category="Form Inputs"
   slug="esa-switch-toggle"
   type="wc"
-  summary="The inherited Ecology switch, wearing the Beacon skin. An on/off control for instant settings; the track fills with brand teal when checked because the theme re-points <code>--color-primary</code>."
+  summary="The inherited Ecology switch, wearing the Beacon skin. An on/off control for instant settings; the track fills with brand teal when checked because the theme re-points <code>--color-background-brand</code>."
 >
   <Section id="preview" title="Preview">
     <Preview code={`<esa-switch-toggle label="Email notifications" checked></esa-switch-toggle>`}>
diff --git a/src/pages/design-system/components/esa-tab-layout.astro b/src/pages/design-system/components/esa-tab-layout.astro
index d7108d59..3907d68f 100644
--- a/src/pages/design-system/components/esa-tab-layout.astro
+++ b/src/pages/design-system/components/esa-tab-layout.astro
@@ -116,9 +116,9 @@ const slots = [
   <Section id="tokens" title="Tokens">
     <p>Override these to re-skin without touching the component:</p>
     <ul class="tokens">
-      <li><code>--color-text-secondary</code> / <code>--color-text-primary</code> · <code>--color-primary</code> (active + indicator + badge)</li>
-      <li><code>--color-surface-sunken</code> (hover, pill track) · <code>--color-surface</code> (active pill) · <code>--color-border</code> · <code>--shadow-50</code></li>
-      <li><code>--type-size-150</code> / <code>--type-size-200</code> / <code>--type-size-300</code> · <code>--spacing-*</code> · <code>--radius-100</code> / <code>--radius-200</code> / <code>--radius-full</code></li>
+      <li><code>--color-content-default-secondary</code> / <code>--color-content-default</code> · <code>--color-background-brand</code> (active + indicator + badge)</li>
+      <li><code>--color-background-elevation-sunken</code> (hover, pill track) · <code>--color-background-elevation-raised</code> (active pill) · <code>--color-border-default</code> · <code>--elevation-1</code></li>
+      <li><code>--font-size-150</code> / <code>--font-size-200</code> / <code>--font-size-300</code> · <code>--spacing-*</code> · <code>--radius-100</code> / <code>--radius-200</code> / <code>--radius-full</code></li>
     </ul>
   </Section>
 </ComponentDoc>
diff --git a/src/pages/design-system/components/esa-text-field.astro b/src/pages/design-system/components/esa-text-field.astro
index 81d2b616..8ddb9050 100644
--- a/src/pages/design-system/components/esa-text-field.astro
+++ b/src/pages/design-system/components/esa-text-field.astro
@@ -25,7 +25,7 @@ const events = [
   category="Form Inputs"
   slug="esa-text-field"
   type="wc"
-  summary="The inherited Ecology text input, wearing the Beacon skin. Label, input, and help/error text in one form-associated Web Component; its focus ring picks up brand teal from <code>--color-primary</code>."
+  summary="The inherited Ecology text input, wearing the Beacon skin. Label, input, and help/error text in one form-associated Web Component; its focus ring picks up brand teal from <code>--color-background-brand</code>."
 >
   <Section id="preview" title="Preview">
     <Preview code={`<esa-text-field label="Full name" placeholder="Jane Doe" help-text="As it appears on the permit."></esa-text-field>`}>
diff --git a/src/pages/design-system/components/scope-selector.astro b/src/pages/design-system/components/scope-selector.astro
index 2d73dda9..a8758a54 100644
--- a/src/pages/design-system/components/scope-selector.astro
+++ b/src/pages/design-system/components/scope-selector.astro
@@ -128,48 +128,48 @@ const searchSvg =
 <style>
   .spec { max-width: 820px; margin: 0 auto; padding: var(--spacing-700) var(--spacing-500) var(--spacing-900); }
   .spec__head { margin-bottom: var(--spacing-700); }
-  .spec__title { margin: 0 0 var(--spacing-200); font-family: var(--font-decorative, var(--font-sans)); font-size: var(--type-size-600); font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
-  .spec__lede { margin: 0; font-size: var(--type-size-300); line-height: 1.5; color: var(--color-text-secondary); max-width: 60ch; }
+  .spec__title { margin: 0 0 var(--spacing-200); font-family: var(--font-decorative, var(--typography-font-family-sans)); font-size: var(--font-size-600); font-weight: var(--typography-font-weight-bold); color: var(--color-content-default); }
+  .spec__lede { margin: 0; font-size: var(--font-size-300); line-height: 1.5; color: var(--color-content-default-secondary); max-width: 60ch; }
 
   .spec-variant { margin-bottom: var(--spacing-800); }
-  .spec-variant__label { display: flex; align-items: center; gap: var(--spacing-200); margin: 0 0 4px; font-size: var(--type-size-300); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .spec-variant__tag { font-size: var(--type-size-100); font-weight: var(--font-weight-medium); color: var(--color-text-tertiary); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 1px 8px; }
-  .spec-variant__desc { margin: 0 0 var(--spacing-300); font-size: var(--type-size-200); line-height: 1.5; color: var(--color-text-secondary); max-width: 70ch; }
+  .spec-variant__label { display: flex; align-items: center; gap: var(--spacing-200); margin: 0 0 4px; font-size: var(--font-size-300); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .spec-variant__tag { font-size: var(--font-size-100); font-weight: var(--typography-font-weight-medium); color: var(--color-content-default-tertiary); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); padding: 1px 8px; }
+  .spec-variant__desc { margin: 0 0 var(--spacing-300); font-size: var(--font-size-200); line-height: 1.5; color: var(--color-content-default-secondary); max-width: 70ch; }
 
   /* ── shared omni panel chrome ── */
-  .spec-omni { border: 1px solid var(--color-border); border-radius: var(--radius-400); background: var(--color-surface); overflow: hidden; box-shadow: 0 12px 36px rgba(20, 30, 40, 0.12); }
-  .spec-omni__search { display: flex; align-items: center; gap: var(--spacing-300); padding: var(--spacing-300) var(--spacing-400); border-bottom: 1px solid var(--color-border); }
+  .spec-omni { border: 1px solid var(--color-border-default); border-radius: var(--radius-400); background: var(--color-background-elevation-raised); overflow: hidden; box-shadow: 0 12px 36px rgba(20, 30, 40, 0.12); }
+  .spec-omni__search { display: flex; align-items: center; gap: var(--spacing-300); padding: var(--spacing-300) var(--spacing-400); border-bottom: 1px solid var(--color-border-default); }
   .spec-omni__search :global(svg) { width: 20px; height: 20px; }
-  .spec-ic-search { display: inline-flex; color: var(--color-text-tertiary); }
-  .spec-omni__ph { flex: 1; font-size: var(--type-size-300); color: var(--color-text-tertiary); }
-  .spec-omni__search kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 6px; font-family: inherit; font-size: 12px; color: var(--color-text-secondary); background: var(--color-surface); border: 1px solid var(--color-border); border-bottom-width: 2px; border-radius: 4px; }
+  .spec-ic-search { display: inline-flex; color: var(--color-content-default-tertiary); }
+  .spec-omni__ph { flex: 1; font-size: var(--font-size-300); color: var(--color-content-default-tertiary); }
+  .spec-omni__search kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 6px; font-family: inherit; font-size: 12px; color: var(--color-content-default-secondary); background: var(--color-background-elevation-raised); border: 1px solid var(--color-border-default); border-bottom-width: 2px; border-radius: 4px; }
 
-  .spec-scopes { padding: var(--spacing-250) var(--spacing-400); border-bottom: 1px solid var(--color-border); }
+  .spec-scopes { padding: var(--spacing-250) var(--spacing-400); border-bottom: 1px solid var(--color-border-default); }
   .spec-ic-sm { width: 15px; height: 15px; flex: none; }
   .spec-ic { width: 18px; height: 18px; }
 
   /* result rows (identical across variants) */
   .spec-results { padding: var(--spacing-200) 0; }
   .spec-row { display: flex; align-items: center; gap: var(--spacing-300); padding: var(--spacing-200) var(--spacing-400); text-decoration: none; }
-  .spec-row:hover { background: var(--color-surface-sunken); }
-  .spec-row__chip { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: var(--radius-200); background: var(--color-surface-sunken); color: var(--color-text-secondary); }
+  .spec-row:hover { background: var(--color-background-elevation-sunken); }
+  .spec-row__chip { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: var(--radius-200); background: var(--color-background-elevation-sunken); color: var(--color-content-default-secondary); }
   .spec-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
-  .spec-row__title { font-size: var(--type-size-200); font-weight: var(--font-weight-medium); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .spec-row__sub { font-size: var(--type-size-150); color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .spec-row__meta { flex: none; font-size: var(--type-size-150); color: var(--color-text-tertiary); }
+  .spec-row__title { font-size: var(--font-size-200); font-weight: var(--typography-font-weight-medium); color: var(--color-content-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .spec-row__sub { font-size: var(--font-size-150); color: var(--color-content-default-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .spec-row__meta { flex: none; font-size: var(--font-size-150); color: var(--color-content-default-tertiary); }
 
   /* 1 · wrapped chips */
   .spec-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-150); }
-  .spec-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px var(--spacing-300); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text-secondary); font-size: var(--type-size-150); }
-  .spec-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
+  .spec-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px var(--spacing-300); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); background: var(--color-background-elevation-raised); color: var(--color-content-default-secondary); font-size: var(--font-size-150); }
+  .spec-chip.is-active { background: var(--color-background-brand); border-color: var(--color-background-brand); color: var(--color-content-default-knockout); }
   .spec-chip__c { font-size: 11px; opacity: 0.75; font-variant-numeric: tabular-nums; }
 
   /* 2 · vertical rail */
   .spec-rail-body { display: flex; min-height: 248px; }
-  .spec-rail { flex: none; width: 196px; padding: var(--spacing-200); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
-  .spec-rail__item { display: flex; align-items: center; gap: var(--spacing-200); width: 100%; padding: var(--spacing-150) var(--spacing-250); border-radius: var(--radius-200); background: transparent; color: var(--color-text-secondary); font-size: var(--type-size-150); text-align: left; }
-  .spec-rail__item:hover { background: var(--color-surface-sunken); color: var(--color-text-primary); }
-  .spec-rail__item.is-active { background: var(--color-primary-subtle); color: var(--color-primary); font-weight: var(--font-weight-semibold); }
+  .spec-rail { flex: none; width: 196px; padding: var(--spacing-200); border-right: 1px solid var(--color-border-default); display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
+  .spec-rail__item { display: flex; align-items: center; gap: var(--spacing-200); width: 100%; padding: var(--spacing-150) var(--spacing-250); border-radius: var(--radius-200); background: transparent; color: var(--color-content-default-secondary); font-size: var(--font-size-150); text-align: left; }
+  .spec-rail__item:hover { background: var(--color-background-elevation-sunken); color: var(--color-content-default); }
+  .spec-rail__item.is-active { background: var(--color-background-brand-subtle); color: var(--color-background-brand); font-weight: var(--typography-font-weight-semibold); }
   .spec-rail__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .spec-rail__c { font-size: 11px; opacity: 0.8; font-variant-numeric: tabular-nums; }
   .spec-results--rail { flex: 1; min-width: 0; border-bottom: 0; }
@@ -177,24 +177,24 @@ const searchSvg =
   /* 3 · condensed icon chips */
   .spec-ichips { display: flex; gap: var(--spacing-150); overflow-x: auto; scrollbar-width: none; }
   .spec-ichips::-webkit-scrollbar { display: none; }
-  .spec-ichip { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 5px var(--spacing-250); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text-secondary); font-size: var(--type-size-150); }
-  .spec-ichip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
-  .spec-ichip__label { font-weight: var(--font-weight-medium); }
+  .spec-ichip { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 5px var(--spacing-250); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); background: var(--color-background-elevation-raised); color: var(--color-content-default-secondary); font-size: var(--font-size-150); }
+  .spec-ichip.is-active { background: var(--color-background-brand); border-color: var(--color-background-brand); color: var(--color-content-default-knockout); }
+  .spec-ichip__label { font-weight: var(--typography-font-weight-medium); }
   .spec-ichip__c { font-size: 11px; opacity: 0.75; font-variant-numeric: tabular-nums; }
 
   /* 4 · dropdown */
   .spec-dropdown { display: flex; align-items: center; justify-content: space-between; }
-  .spec-dd { display: inline-flex; align-items: center; gap: var(--spacing-200); padding: var(--spacing-200) var(--spacing-300); border: 1px solid var(--color-border); border-radius: var(--radius-200); background: var(--color-surface); color: var(--color-text-primary); font-size: var(--type-size-200); }
-  .spec-dd__dot { display: inline-flex; width: 16px; height: 16px; color: var(--color-text-tertiary); }
+  .spec-dd { display: inline-flex; align-items: center; gap: var(--spacing-200); padding: var(--spacing-200) var(--spacing-300); border: 1px solid var(--color-border-default); border-radius: var(--radius-200); background: var(--color-background-elevation-raised); color: var(--color-content-default); font-size: var(--font-size-200); }
+  .spec-dd__dot { display: inline-flex; width: 16px; height: 16px; color: var(--color-content-default-tertiary); }
   .spec-dd__dot :global(svg), .spec-dd :global(svg) { width: 16px; height: 16px; }
-  .spec-dd__chev { color: var(--color-text-tertiary); }
-  .spec-dd__count { font-size: var(--type-size-150); color: var(--color-text-tertiary); }
+  .spec-dd__chev { color: var(--color-content-default-tertiary); }
+  .spec-dd__count { font-size: var(--font-size-150); color: var(--color-content-default-tertiary); }
 
   /* 5 · underlined tabs */
   .spec-tabs { display: flex; gap: var(--spacing-400); padding: 0 var(--spacing-400); overflow-x: auto; scrollbar-width: none; }
   .spec-tabs::-webkit-scrollbar { display: none; }
-  .spec-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: var(--spacing-300) 2px; border-bottom: 2px solid transparent; background: transparent; color: var(--color-text-secondary); font-size: var(--type-size-200); white-space: nowrap; }
-  .spec-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--font-weight-semibold); }
-  .spec-tab__c { font-size: 11px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
-  .spec-tab.is-active .spec-tab__c { color: var(--color-primary); }
+  .spec-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: var(--spacing-300) 2px; border-bottom: 2px solid transparent; background: transparent; color: var(--color-content-default-secondary); font-size: var(--font-size-200); white-space: nowrap; }
+  .spec-tab.is-active { color: var(--color-background-brand); border-bottom-color: var(--color-background-brand); font-weight: var(--typography-font-weight-semibold); }
+  .spec-tab__c { font-size: 11px; color: var(--color-content-default-tertiary); font-variant-numeric: tabular-nums; }
+  .spec-tab.is-active .spec-tab__c { color: var(--color-background-brand); }
 </style>
diff --git a/src/pages/design-system/foundations/iconography.astro b/src/pages/design-system/foundations/iconography.astro
index febfd3a4..6605eb4c 100644
--- a/src/pages/design-system/foundations/iconography.astro
+++ b/src/pages/design-system/foundations/iconography.astro
@@ -38,10 +38,10 @@ const names = [
   <Section id="color" title="Color">
     <p>Icons inherit <code>currentColor</code> — set <code>color</code> on a wrapper to tint them. These use Beacon's themed semantic roles.</p>
     <div class="row">
-      <span style="color: var(--color-primary, #005862)"><EsaIcon name="circle-check" size="lg" /></span>
-      <span style="color: var(--color-warning, #f2770e)"><EsaIcon name="triangle-alert" size="lg" /></span>
-      <span style="color: var(--color-danger, #ef4444)"><EsaIcon name="circle-x" size="lg" /></span>
-      <span style="color: var(--color-info, #228be6)"><EsaIcon name="info" size="lg" /></span>
+      <span style="color: var(--color-background-brand, #005862)"><EsaIcon name="circle-check" size="lg" /></span>
+      <span style="color: var(--color-background-utility-warning, #f2770e)"><EsaIcon name="triangle-alert" size="lg" /></span>
+      <span style="color: var(--color-background-utility-danger, #ef4444)"><EsaIcon name="circle-x" size="lg" /></span>
+      <span style="color: var(--color-background-utility-info, #228be6)"><EsaIcon name="info" size="lg" /></span>
     </div>
   </Section>
 
@@ -59,14 +59,14 @@ const names = [
 </DocsLayout>
 
 <style>
-  .row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--spacing-500, 1.5rem); color: var(--color-text-primary, #3d3d3d); }
+  .row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--spacing-500, 1.5rem); color: var(--color-content-default, #3d3d3d); }
   .cell { display: inline-flex; flex-direction: column; align-items: center; gap: var(--spacing-200, 0.5rem); }
-  .cell code, .icon-cell code { font-family: var(--font-mono, monospace); font-size: 12.5px; color: var(--color-text-muted, #7c7c7c); background: none; }
+  .cell code, .icon-cell code { font-family: var(--typography-font-family-mono, monospace); font-size: 12.5px; color: var(--bcn-content-muted, #7c7c7c); background: none; }
   .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--spacing-300, 0.75rem); }
   .icon-cell {
     display: flex; flex-direction: column; align-items: center; gap: var(--spacing-200, 0.5rem);
     padding: var(--spacing-300, 0.75rem);
-    border: 1px solid var(--color-border, #dcdcdc); border-radius: var(--radius-200, 8px);
-    text-align: center; color: var(--color-text-primary, #3d3d3d);
+    border: 1px solid var(--color-border-default, #dcdcdc); border-radius: var(--radius-200, 8px);
+    text-align: center; color: var(--color-content-default, #3d3d3d);
   }
 </style>
diff --git a/src/pages/design-system/index.astro b/src/pages/design-system/index.astro
index ae5e597d..a623ef03 100644
--- a/src/pages/design-system/index.astro
+++ b/src/pages/design-system/index.astro
@@ -18,8 +18,8 @@ import { foundations, componentGroups } from '../../data/ds-nav';
   <Section id="model" title="The spoke model">
     <p>
       Three token tiers cascade. <strong>Primitives</strong> (raw color ramps, the spacing and
-      radius scales) never move. <strong>Semantic roles</strong> (<code>--color-primary</code>,
-      <code>--color-border</code>, <code>--font-sans</code>…) are what components actually read —
+      radius scales) never move. <strong>Semantic roles</strong> (<code>--color-background-brand</code>,
+      <code>--color-border-default</code>, <code>--typography-font-family-sans</code>…) are what components actually read —
       and what the Beacon theme re-points. <strong>Component tokens</strong> fine-tune individual
       parts. Because every <code>esa-*</code> component reads only the semantic layer, overriding
       that one layer re-skins the entire kit with no forks.
@@ -55,19 +55,19 @@ import { foundations, componentGroups } from '../../data/ds-nav';
 </DocsLayout>
 
 <style>
-  .snippet { background: var(--color-surface-sunken, #efefef); border: 1px solid var(--color-border, #dcdcdc); border-radius: 10px; padding: var(--spacing-400, 1rem) var(--spacing-500, 1.5rem); overflow-x: auto; }
-  .snippet code { font-family: var(--font-mono, monospace); font-size: 13.5px; line-height: 1.7; color: var(--color-text-primary, #3d3d3d); background: none; padding: 0; }
+  .snippet { background: var(--color-background-elevation-sunken, #efefef); border: 1px solid var(--color-border-default, #dcdcdc); border-radius: 10px; padding: var(--spacing-400, 1rem) var(--spacing-500, 1.5rem); overflow-x: auto; }
+  .snippet code { font-family: var(--typography-font-family-mono, monospace); font-size: 13.5px; line-height: 1.7; color: var(--color-content-default, #3d3d3d); background: none; padding: 0; }
 
   .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--spacing-300, 0.75rem); }
   .ds-card {
     display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-200, 0.5rem);
     padding: var(--spacing-400, 1rem);
-    border: 1px solid var(--color-border, #dcdcdc); border-radius: 10px;
-    background: var(--color-surface, #fff);
+    border: 1px solid var(--color-border-default, #dcdcdc); border-radius: 10px;
+    background: var(--color-background-elevation-raised, #fff);
     transition: background 120ms ease, border-color 120ms ease;
   }
-  .ds-card:hover { background: var(--color-primary-subtle, #f0fdfa); border-color: var(--color-primary-border, #99f6e4); }
-  .ds-card__title { font-weight: 600; font-size: 15px; color: var(--color-text-primary, #3d3d3d); }
-  .ds-card__arrow { color: var(--color-primary, #005862); opacity: 0; transition: opacity 120ms ease; flex: none; }
+  .ds-card:hover { background: var(--color-background-brand-subtle, #f0fdfa); border-color: var(--color-border-brand, #99f6e4); }
+  .ds-card__title { font-weight: 600; font-size: 15px; color: var(--color-content-default, #3d3d3d); }
+  .ds-card__arrow { color: var(--color-background-brand, #005862); opacity: 0; transition: opacity 120ms ease; flex: none; }
   .ds-card:hover .ds-card__arrow { opacity: 0.8; }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ccc22432..f9c27c4d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -44,7 +44,7 @@ import BcnPrototypeIndex from '../components/bcn/BcnPrototypeIndex.astro';
   </main>
 
   <style>
-    .home { max-width: 1040px; margin: 0 auto; padding: 0 var(--spacing-500, 24px); background: var(--color-surface, #fff); }
+    .home { max-width: 1040px; margin: 0 auto; padding: 0 var(--spacing-500, 24px); background: var(--color-background-elevation-raised, #fff); }
 
     /* ---- Hero ---- */
     .hero {
@@ -53,63 +53,63 @@ import BcnPrototypeIndex from '../components/bcn/BcnPrototypeIndex.astro';
     }
     .hero__eyebrow {
       margin: 0;
-      font-size: var(--type-size-100, 0.875rem);
-      font-weight: var(--font-weight-medium, 450);
+      font-size: var(--font-size-100, 0.875rem);
+      font-weight: var(--typography-font-weight-medium, 450);
       letter-spacing: 0.04em; text-transform: uppercase;
-      color: var(--color-secondary, #00918b);
+      color: var(--color-background-brand-muted, #00918b);
     }
     .hero__title {
       margin: var(--spacing-200, 8px) 0 0;
-      font-family: var(--font-display, var(--font-sans));
-      font-weight: var(--font-weight-semibold, 550);
+      font-family: var(--typography-font-family-display, var(--typography-font-family-sans));
+      font-weight: var(--typography-font-weight-semibold, 550);
       font-size: clamp(2.5rem, 1.9rem + 3vw, 4rem);
       line-height: 1.04; letter-spacing: -0.02em;
-      color: var(--color-text-primary, #3d3d3d);
+      color: var(--color-content-default, #3d3d3d);
     }
     .hero__tagline {
       margin: var(--spacing-400, 16px) auto 0; max-width: 58ch;
-      font-size: var(--type-size-300, 1.125rem); line-height: 1.6;
-      color: var(--color-text-secondary, #525252);
+      font-size: var(--font-size-300, 1.125rem); line-height: 1.6;
+      color: var(--color-content-default-secondary, #525252);
     }
-    code { font-family: var(--font-mono, monospace); font-size: 0.9em; background: var(--color-surface-sunken, #efefef); padding: 0.1em 0.35em; border-radius: var(--radius-100, 4px); }
+    code { font-family: var(--typography-font-family-mono, monospace); font-size: 0.9em; background: var(--color-background-elevation-sunken, #efefef); padding: 0.1em 0.35em; border-radius: var(--radius-100, 4px); }
 
     /* ---- Layer cards ---- */
     .layers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-400, 16px); padding-bottom: var(--spacing-800, 64px); }
     .layer {
       position: relative; display: flex; flex-direction: column;
       padding: var(--spacing-600, 32px);
-      border: 1px solid var(--color-border, #dcdcdc); border-radius: var(--radius-400, 12px);
-      background: var(--color-surface, #fff);
+      border: 1px solid var(--color-border-default, #dcdcdc); border-radius: var(--radius-400, 12px);
+      background: var(--color-background-elevation-raised, #fff);
       transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
     }
     .layer:hover {
-      border-color: var(--color-primary-border, #99f6e4);
-      box-shadow: 0 12px 32px color-mix(in srgb, var(--color-primary, #005862) 12%, transparent);
+      border-color: var(--color-border-brand, #99f6e4);
+      box-shadow: 0 12px 32px color-mix(in srgb, var(--color-background-brand, #005862) 12%, transparent);
       transform: translateY(-2px);
     }
-    .layer--soon { background: var(--color-surface-sunken, #efefef); }
-    .layer__status { display: inline-flex; align-items: center; gap: var(--spacing-150, 6px); font-size: var(--type-size-100, 0.875rem); font-weight: var(--font-weight-medium, 450); }
+    .layer--soon { background: var(--color-background-elevation-sunken, #efefef); }
+    .layer__status { display: inline-flex; align-items: center; gap: var(--spacing-150, 6px); font-size: var(--font-size-100, 0.875rem); font-weight: var(--typography-font-weight-medium, 450); }
     .layer__status .dot { width: 8px; height: 8px; border-radius: 50%; }
-    .layer__status--live { color: var(--color-success-strong, #15803d); }
-    .layer__status--live .dot { background: var(--color-success, #2e7571); }
-    .layer__status--soon { color: var(--color-text-muted, #7c7c7c); }
-    .layer__status--soon .dot { background: var(--color-secondary, #00918b); }
+    .layer__status--live { color: var(--color-content-utility-success, #15803d); }
+    .layer__status--live .dot { background: var(--color-background-utility-success, #2e7571); }
+    .layer__status--soon { color: var(--bcn-content-muted, #7c7c7c); }
+    .layer__status--soon .dot { background: var(--color-background-brand-muted, #00918b); }
     .layer__title {
       margin: var(--spacing-300, 12px) 0 var(--spacing-200, 8px);
-      font-family: var(--font-display, var(--font-sans));
-      font-size: var(--type-size-600, 2rem); font-weight: var(--font-weight-semibold, 550);
-      letter-spacing: -0.01em; color: var(--color-text-primary, #3d3d3d);
+      font-family: var(--typography-font-family-display, var(--typography-font-family-sans));
+      font-size: var(--font-size-600, 2rem); font-weight: var(--typography-font-weight-semibold, 550);
+      letter-spacing: -0.01em; color: var(--color-content-default, #3d3d3d);
     }
-    .layer__body { margin: 0; font-size: var(--type-size-200, 1rem); line-height: 1.55; color: var(--color-text-secondary, #525252); }
+    .layer__body { margin: 0; font-size: var(--font-size-200, 1rem); line-height: 1.55; color: var(--color-content-default-secondary, #525252); }
     .layer__go {
       display: inline-flex; align-items: center; gap: var(--spacing-150, 6px);
       margin-top: var(--spacing-500, 24px);
-      font-weight: var(--font-weight-semibold, 550); font-size: var(--type-size-200, 1rem);
-      color: var(--color-text-link, #005862);
+      font-weight: var(--typography-font-weight-semibold, 550); font-size: var(--font-size-200, 1rem);
+      color: var(--color-content-link, #005862);
     }
     .layer__go svg { transition: transform 0.14s ease; }
     .layer:hover .layer__go svg { transform: translateX(3px); }
-    .layer--soon .layer__go { color: var(--color-text-muted, #7c7c7c); }
+    .layer--soon .layer__go { color: var(--bcn-content-muted, #7c7c7c); }
 
     /* ---- Prototypes ---- */
     .protos { padding-bottom: var(--spacing-800, 64px); }
@@ -118,8 +118,8 @@ import BcnPrototypeIndex from '../components/bcn/BcnPrototypeIndex.astro';
     .home__foot {
       display: flex; align-items: center; gap: var(--spacing-250, 10px);
       padding: var(--spacing-500, 24px) 0 var(--spacing-800, 64px);
-      border-top: 1px solid var(--color-border, #dcdcdc);
-      color: var(--color-text-muted, #7c7c7c); font-size: var(--type-size-100, 0.875rem);
+      border-top: 1px solid var(--color-border-default, #dcdcdc);
+      color: var(--bcn-content-muted, #7c7c7c); font-size: var(--font-size-100, 0.875rem);
     }
 
     @media (max-width: 720px) {
diff --git a/src/pages/patterns/index.astro b/src/pages/patterns/index.astro
index b3e4adb9..de5224db 100644
--- a/src/pages/patterns/index.astro
+++ b/src/pages/patterns/index.astro
@@ -33,7 +33,7 @@ const planned = [
 
 <style>
   .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--spacing-400, 1rem); }
-  .card { padding: var(--spacing-400, 1rem); border: 1px solid var(--color-border, #dcdcdc); border-radius: 10px; background: var(--color-surface, #fff); }
-  .card h3 { margin: 0 0 var(--spacing-200, 0.5rem); font-size: 15px; color: var(--color-text-primary, #3d3d3d); }
-  .card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-text-secondary, #525252); }
+  .card { padding: var(--spacing-400, 1rem); border: 1px solid var(--color-border-default, #dcdcdc); border-radius: 10px; background: var(--color-background-elevation-raised, #fff); }
+  .card h3 { margin: 0 0 var(--spacing-200, 0.5rem); font-size: 15px; color: var(--color-content-default, #3d3d3d); }
+  .card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-content-default-secondary, #525252); }
 </style>
diff --git a/src/pages/prototypes/components.astro b/src/pages/prototypes/components.astro
index 9aff58f3..f53d6332 100644
--- a/src/pages/prototypes/components.astro
+++ b/src/pages/prototypes/components.astro
@@ -82,7 +82,7 @@ const mappedSites = footprints.reduce((n, f) => n + f.siteCount, 0);
   >
     <div slot="utilities" class="cluster" data-gap="sm" data-align="center">
       <esa-button-toggle id="view-toggle" value="grid" size="sm"></esa-button-toggle>
-      <EsaButton color="primary" icon="plus">New component</EsaButton>
+      <EsaButton variant="primary" icon="plus">New component</EsaButton>
     </div>
 
     <div class="stack" data-gap="lg">
diff --git a/src/pages/prototypes/data-catalog-action.astro b/src/pages/prototypes/data-catalog-action.astro
index 4bc51b23..462e240b 100644
--- a/src/pages/prototypes/data-catalog-action.astro
+++ b/src/pages/prototypes/data-catalog-action.astro
@@ -19,7 +19,7 @@
 import AppShell from '../../layouts/AppShell.astro';
 import PageLayout from '../../layouts/PageLayout.astro';
 import EsaButton from '@esa/ecology/esa-button.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import EsaIcon from '@esa/ecology/esa-icon.astro';
 import EsaBadge from '@esa/ecology/esa-badge.astro';
 import EsaCollapsible from '@esa/ecology/esa-collapsible.astro';
@@ -123,7 +123,7 @@ const editPayload = { actionName, browseTotal, dueParts: { y: 2026, m: 6, d: 30
           </div>
         </div>
         <div class="bcn-action__head-actions">
-          <span id="edit-action"><EsaButton color="primary"><span class="bcn-btn-ico"><EsaIcon name="pencil" size="xs" />Edit action</span></EsaButton></span>
+          <span id="edit-action"><EsaButton variant="primary"><span class="bcn-btn-ico"><EsaIcon name="pencil" size="xs" />Edit action</span></EsaButton></span>
         </div>
       </header>
 
@@ -210,7 +210,7 @@ const editPayload = { actionName, browseTotal, dueParts: { y: 2026, m: 6, d: 30
   <esa-dialog
     id="edit-dialog"
     size="lg"
-    style="--_dialog-width: 96vw; --_dialog-max-height: 94vh; --_dialog-bg: var(--color-surface, #fff); --z-modal-backdrop: 1150; --z-modal: 1200;"
+    style="--_dialog-width: 96vw; --_dialog-max-height: 94vh; --_dialog-bg: var(--color-background-elevation-raised, #fff); --z-modal-backdrop: 1150; --z-modal: 1200;"
   >
     <div slot="header" class="bcn-editor__head">
       <span class="bcn-editor__head-title">{actionName}</span>
@@ -226,7 +226,7 @@ const editPayload = { actionName, browseTotal, dueParts: { y: 2026, m: 6, d: 30
               <li class="bcn-req-row bcn-req-row--assigned">
                 <span class="bcn-req-row__badge">{r.commitment}</span>
                 <span class="bcn-req-row__name">{r.name}</span>
-                <span class="bcn-req-row__act"><EsaIconButton icon="x" label={`Remove ${r.commitment}`} size="xs" /></span>
+                <span class="bcn-req-row__act"><EsaIconButton variant="chrome" iconOnly icon="x" label={`Remove ${r.commitment}`} size="xs" /></span>
               </li>
             ))}
           </ul>
@@ -246,7 +246,7 @@ const editPayload = { actionName, browseTotal, dueParts: { y: 2026, m: 6, d: 30
               <li class="bcn-req-row">
                 <span class="bcn-req-row__badge">{r.commitment}</span>
                 <span class="bcn-req-row__name">{r.name}</span>
-                <span class="bcn-req-row__act"><EsaIconButton icon="plus" label={`Assign ${r.commitment}`} size="xs" /></span>
+                <span class="bcn-req-row__act"><EsaIconButton variant="chrome" iconOnly icon="plus" label={`Assign ${r.commitment}`} size="xs" /></span>
               </li>
             ))}
           </ul>
@@ -350,7 +350,7 @@ const editPayload = { actionName, browseTotal, dueParts: { y: 2026, m: 6, d: 30
               <div id="notif-schedule-rows"></div>
               <p id="notif-schedule-empty" class="bcn-ncard__hint">Enable notification types above to see the schedule.</p>
               <div id="notif-test" class="bcn-nsched__test" hidden>
-                <span id="notif-test-btn"><EsaButton color="ghost" appearance="outline" size="sm">Send Test Emails</EsaButton></span>
+                <span id="notif-test-btn"><EsaButton variant="ghost" appearance="outline" size="sm">Send Test Emails</EsaButton></span>
                 <span class="bcn-ncard__hint">Sends to your email only</span>
               </div>
             </section>
@@ -359,8 +359,8 @@ const editPayload = { actionName, browseTotal, dueParts: { y: 2026, m: 6, d: 30
       </section>
     </div>
     <div slot="footer" class="bcn-editor__foot">
-      <span id="ea-cancel"><EsaButton color="ghost" appearance="outline">Cancel</EsaButton></span>
-      <span id="ea-save"><EsaButton color="primary">Save</EsaButton></span>
+      <span id="ea-cancel"><EsaButton variant="ghost" appearance="outline">Cancel</EsaButton></span>
+      <span id="ea-save"><EsaButton variant="primary">Save</EsaButton></span>
     </div>
   </esa-dialog>
 
@@ -568,14 +568,14 @@ const editPayload = { actionName, browseTotal, dueParts: { y: 2026, m: 6, d: 30
 
   /* Identity header — tracker-modal treatment (commitment badge top, decorative name,
      neutral type badge trailing). */
-  .bcn-action__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-400); padding-bottom: var(--spacing-400); border-bottom: 1px solid var(--color-border); }
+  .bcn-action__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-400); padding-bottom: var(--spacing-400); border-bottom: 1px solid var(--color-border-default); }
   .bcn-action__head-actions { display: inline-flex; align-items: center; gap: var(--spacing-200); flex-shrink: 0; }
   .bcn-action__identity { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-100); min-width: 0; }
   .bcn-action__title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-200); min-width: 0; }
-  .bcn-action__title { margin: 0; font-family: var(--font-decorative); font-size: 1.5rem; font-weight: var(--font-weight-semibold); line-height: 1.2; color: var(--color-text-primary); }
-  .bcn-action__badge { flex-shrink: 0; padding: 0.125rem 0.375rem; border-radius: var(--radius-100); font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); line-height: 1.4; white-space: nowrap; }
+  .bcn-action__title { margin: 0; font-family: var(--font-decorative); font-size: 1.5rem; font-weight: var(--typography-font-weight-semibold); line-height: 1.2; color: var(--color-content-default); }
+  .bcn-action__badge { flex-shrink: 0; padding: 0.125rem 0.375rem; border-radius: var(--radius-100); font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); line-height: 1.4; white-space: nowrap; }
   .bcn-action__badge--commitment { color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); }
-  .bcn-action__badge--type { color: var(--color-text-secondary); background: var(--color-surface-sunken); transform: translateY(2px); }
+  .bcn-action__badge--type { color: var(--color-content-default-secondary); background: var(--color-background-elevation-sunken); transform: translateY(2px); }
 
   /* Two-column body */
   .bcn-action__body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--spacing-600); align-items: start; }
@@ -589,24 +589,24 @@ const editPayload = { actionName, browseTotal, dueParts: { y: 2026, m: 6, d: 30
   /* Rail module headers (Details / Timing / Lists / Notifications) match the page
      section titles (Requirements / Action Text / Evidence of Compliance). */
   .bcn-action__rail :global(.esa-collapsible__title) {
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
   }
 
   .bcn-action__section { display: flex; flex-direction: column; gap: var(--spacing-300); }
   .bcn-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-300); }
   .bcn-section-title {
     display: flex; align-items: center; gap: var(--spacing-200); margin: 0;
-    font-size: var(--type-size-300); font-weight: var(--font-weight-semibold); color: var(--color-text-primary);
+    font-size: var(--font-size-300); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default);
   }
-  .bcn-prose { margin: 0; font-size: var(--form-font-size-md); line-height: 1.6; color: var(--color-text-primary); }
+  .bcn-prose { margin: 0; font-size: var(--typography-label-md-font-size); line-height: 1.6; color: var(--color-content-default); }
 
   /* Sub-field inside a section (Expected evidence / Reference Files): a quiet label
      over content. The body uses .bcn-prose so Expected evidence reads identically to
      Action Text — consistent body typography across the two sections. */
   .bcn-action__section--evidence { gap: var(--spacing-500); }
   .bcn-subfield { display: flex; flex-direction: column; gap: var(--spacing-250); }
-  .bcn-subfield__label { font-size: var(--form-font-size-md); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
+  .bcn-subfield__label { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-medium); color: var(--color-content-default-secondary); }
   .bcn-subfield :global(esa-file-list) { margin-top: var(--spacing-100); }
 
   /* Read requirement rows */
@@ -614,28 +614,28 @@ const editPayload = { actionName, browseTotal, dueParts: { y: 2026, m: 6, d: 30
   .bcn-req-read__row {
     display: flex; align-items: center; gap: var(--spacing-250);
     padding: var(--spacing-150) var(--spacing-300);
-    border: 1px solid var(--color-border); border-radius: var(--radius-200); background: var(--color-surface);
+    border: 1px solid var(--color-border-default); border-radius: var(--radius-200); background: var(--color-background-elevation-raised);
   }
   .bcn-req-read__badge {
     flex-shrink: 0; padding: 0.0625rem 0.375rem; border-radius: var(--radius-100);
-    font-size: 0.6875rem; font-weight: var(--font-weight-semibold);
+    font-size: 0.6875rem; font-weight: var(--typography-font-weight-semibold);
     color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); white-space: nowrap;
   }
-  .bcn-req-read__name { flex: 1; min-width: 0; font-size: var(--form-font-size-md); color: var(--color-text-primary); text-decoration: none; }
+  .bcn-req-read__name { flex: 1; min-width: 0; font-size: var(--typography-label-md-font-size); color: var(--color-content-default); text-decoration: none; }
   .bcn-req-read__name:hover { text-decoration: underline; }
 
   /* Action Lists */
   .bcn-lists { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-150); margin: 0; padding: 0; list-style: none; }
-  .bcn-list-link { font-size: var(--form-font-size-md); font-weight: var(--font-weight-medium); color: var(--color-primary); text-decoration: none; }
+  .bcn-list-link { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-medium); color: var(--color-background-brand); text-decoration: none; }
   .bcn-list-link:hover { text-decoration: underline; }
 
   /* Rail Notifications — rules-only summary: differentiated icon rows for recipients
      (person/org icons) and triggers (per-trigger icon | name | rule). */
   .bcn-triggers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-200); }
-  .bcn-trigger-row { display: flex; align-items: center; gap: var(--spacing-250); font-size: var(--form-font-size-md); }
-  .bcn-trigger-row :global(.esa-icon) { color: var(--color-primary); flex-shrink: 0; }
-  .bcn-trigger-row__name { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
-  .bcn-trigger-row__rule { margin-left: auto; color: var(--color-text-secondary); text-align: right; }
+  .bcn-trigger-row { display: flex; align-items: center; gap: var(--spacing-250); font-size: var(--typography-label-md-font-size); }
+  .bcn-trigger-row :global(.esa-icon) { color: var(--color-background-brand); flex-shrink: 0; }
+  .bcn-trigger-row__name { color: var(--color-content-default); font-weight: var(--typography-font-weight-medium); }
+  .bcn-trigger-row__rule { margin-left: auto; color: var(--color-content-default-secondary); text-align: right; }
 
   .bcn-btn-ico { display: inline-flex; align-items: center; gap: var(--spacing-150); }
 
@@ -646,7 +646,7 @@ const editPayload = { actionName, browseTotal, dueParts: { y: 2026, m: 6, d: 30
   :global(.bcn-grid-chip) {
     display: inline-flex; align-items: center; gap: var(--spacing-150);
     padding: 1px var(--spacing-200); border-radius: var(--radius-100);
-    font-size: 0.75rem; line-height: 1.5; font-weight: var(--font-weight-semibold); white-space: nowrap;
+    font-size: 0.75rem; line-height: 1.5; font-weight: var(--typography-font-weight-semibold); white-space: nowrap;
     background: color-mix(in srgb, var(--_chip) 16%, transparent); color: color-mix(in srgb, var(--_chip) 70%, #1a1a1a);
   }
   :global(.bcn-grid-chip__dot) { width: 7px; height: 7px; border-radius: 50%; background: var(--_chip); flex-shrink: 0; }
@@ -672,21 +672,21 @@ const editPayload = { actionName, browseTotal, dueParts: { y: 2026, m: 6, d: 30
   }
   /* Header/footer are padded by the dialog (--_dialog-padding); don't double-pad. */
   .bcn-editor__head { display: flex; align-items: center; gap: var(--spacing-200); }
-  .bcn-editor__head-title { font-family: var(--font-decorative); font-size: var(--type-size-300); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
+  .bcn-editor__head-title { font-family: var(--font-decorative); font-size: var(--font-size-300); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
   .bcn-editor__foot { display: flex; gap: var(--spacing-300); justify-content: flex-end; width: 100%; }
 
   /* Left pane: Assigned + Browse All split 50/50, each scrolling internally. */
   /* Left pane: no padding on the wrapper — each region pads its own content, so the
      Browse divider/border spans the full column width and its gray fill bleeds edge to edge. */
-  .bcn-reqs { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; border-right: 1px solid var(--color-border); }
+  .bcn-reqs { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; border-right: 1px solid var(--color-border-default); }
   .bcn-reqs__region { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: var(--spacing-300); padding: var(--spacing-500); }
-  .bcn-reqs__region--browse { border-top: 1px solid var(--color-border); background: var(--color-background); }
+  .bcn-reqs__region--browse { border-top: 1px solid var(--color-border-default); background: var(--color-background-default); }
   .bcn-reqs__assigned, .bcn-reqs__browse { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-150); overflow-y: auto; flex: 1 1 0; min-height: 0; }
   .bcn-reqs__assigned:empty::after {
     content: 'No requirements assigned yet. Use the + button in Browse All.';
     display: block; padding: var(--spacing-500); text-align: center;
-    font-size: var(--form-font-size-md); color: var(--color-text-tertiary);
-    border: 1px dashed var(--color-border); border-radius: var(--radius-200);
+    font-size: var(--typography-label-md-font-size); color: var(--color-content-default-tertiary);
+    border: 1px dashed var(--color-border-default); border-radius: var(--radius-200);
   }
   .bcn-reqs__filters { display: flex; flex-direction: column; gap: var(--spacing-200); }
   .bcn-reqs__filter-row { display: flex; gap: var(--spacing-200); flex-wrap: wrap; }
@@ -695,18 +695,18 @@ const editPayload = { actionName, browseTotal, dueParts: { y: 2026, m: 6, d: 30
   .bcn-req-row {
     display: flex; align-items: center; gap: var(--spacing-200);
     padding: var(--spacing-100) var(--spacing-250);
-    border: 1px solid var(--color-border); border-radius: var(--radius-200); background: var(--color-surface);
+    border: 1px solid var(--color-border-default); border-radius: var(--radius-200); background: var(--color-background-elevation-raised);
   }
-  .bcn-req-row--assigned { background: var(--color-background); }
+  .bcn-req-row--assigned { background: var(--color-background-default); }
   .bcn-req-row__badge {
     flex-shrink: 0; padding: 0.0625rem 0.375rem; border-radius: var(--radius-100);
-    font-size: 0.6875rem; font-weight: var(--font-weight-semibold);
+    font-size: 0.6875rem; font-weight: var(--typography-font-weight-semibold);
     color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); white-space: nowrap;
   }
-  .bcn-req-row__name { flex: 1; min-width: 0; font-size: var(--form-font-size-md); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .bcn-req-row__name { flex: 1; min-width: 0; font-size: var(--typography-label-md-font-size); color: var(--color-content-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .bcn-req-row__act { flex-shrink: 0; }
-  .bcn-req-row__remove { border: 0; background: transparent; cursor: pointer; color: var(--color-text-tertiary); font-size: 0.875rem; line-height: 1; padding: var(--spacing-100); border-radius: var(--radius-100); }
-  .bcn-req-row__remove:hover { background: var(--color-surface-sunken); color: var(--color-text-primary); }
+  .bcn-req-row__remove { border: 0; background: transparent; cursor: pointer; color: var(--color-content-default-tertiary); font-size: 0.875rem; line-height: 1; padding: var(--spacing-100); border-radius: var(--radius-100); }
+  .bcn-req-row__remove:hover { background: var(--color-background-elevation-sunken); color: var(--color-content-default); }
 
   /* Config pane: NO padding here — the tab bar spans the full pane width. The tabs and
      each panel pad themselves separately so the tab-bar border reaches both edges. */
@@ -715,44 +715,44 @@ const editPayload = { actionName, browseTotal, dueParts: { y: 2026, m: 6, d: 30
   .bcn-form { display: flex; flex-direction: column; gap: var(--spacing-400); padding: var(--spacing-300) var(--spacing-500) var(--spacing-500); }
   .bcn-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-300); }
   .bcn-field { display: flex; flex-direction: column; gap: var(--spacing-150); }
-  .bcn-field__label { font-size: var(--form-font-size-md); font-weight: var(--font-weight-medium); color: var(--form-label-color); }
-  .bcn-field__value { font-size: var(--type-size-200); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-field__hint { font-size: 0.75rem; color: var(--color-text-tertiary); }
+  .bcn-field__label { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-medium); color: var(--form-label-color); }
+  .bcn-field__value { font-size: var(--font-size-200); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-field__hint { font-size: 0.75rem; color: var(--color-content-default-tertiary); }
 
   .bcn-note {
     display: flex; align-items: flex-start; gap: var(--spacing-200);
     padding: var(--spacing-300); border-radius: var(--radius-200);
-    background: color-mix(in srgb, var(--color-primary) 8%, white);
-    color: var(--color-text-secondary); font-size: var(--form-font-size-md); line-height: 1.45;
+    background: color-mix(in srgb, var(--color-background-brand) 8%, white);
+    color: var(--color-content-default-secondary); font-size: var(--typography-label-md-font-size); line-height: 1.45;
   }
-  .bcn-note :global(.esa-icon) { color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }
+  .bcn-note :global(.esa-icon) { color: var(--color-background-brand); flex-shrink: 0; margin-top: 2px; }
 
   /* Notifications tab — carded sections matching the prod modal. */
   .bcn-notif { gap: var(--spacing-400); }
   .bcn-ncard {
     display: flex; flex-direction: column; gap: var(--spacing-250);
-    padding: var(--spacing-400); border: 1px solid var(--color-border); border-radius: var(--radius-200); background: var(--color-surface);
+    padding: var(--spacing-400); border: 1px solid var(--color-border-default); border-radius: var(--radius-200); background: var(--color-background-elevation-raised);
   }
-  .bcn-ncard__title { margin: 0; font-size: 0.875rem; font-weight: var(--font-weight-bold); letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-text-primary); }
-  .bcn-ncard__date { margin: 0; font-size: var(--type-size-300); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-ncard__hint { margin: 0; font-size: var(--form-font-size-md); color: var(--color-text-secondary); line-height: 1.45; }
+  .bcn-ncard__title { margin: 0; font-size: 0.875rem; font-weight: var(--typography-font-weight-bold); letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-content-default); }
+  .bcn-ncard__date { margin: 0; font-size: var(--font-size-300); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-ncard__hint { margin: 0; font-size: var(--typography-label-md-font-size); color: var(--color-content-default-secondary); line-height: 1.45; }
 
   .bcn-ntoggle {
     display: flex; flex-direction: column; gap: var(--spacing-300);
-    padding: var(--spacing-400); border: 1px solid var(--color-border); border-radius: var(--radius-200); background: var(--color-surface);
+    padding: var(--spacing-400); border: 1px solid var(--color-border-default); border-radius: var(--radius-200); background: var(--color-background-elevation-raised);
   }
   .bcn-ntoggle__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-300); }
-  .bcn-ntoggle__title { display: inline-flex; align-items: center; gap: var(--spacing-250); font-weight: var(--font-weight-semibold); color: var(--color-primary); }
-  .bcn-ntoggle__title :global(.esa-icon) { color: var(--color-text-primary); }
+  .bcn-ntoggle__title { display: inline-flex; align-items: center; gap: var(--spacing-250); font-weight: var(--typography-font-weight-semibold); color: var(--color-background-brand); }
+  .bcn-ntoggle__title :global(.esa-icon) { color: var(--color-content-default); }
   .bcn-ntoggle__body { display: flex; flex-direction: column; gap: var(--spacing-200); align-items: flex-start; }
   .bcn-ntoggle__body[hidden] { display: none; }
   .bcn-ntoggle__body :global(esa-text-field) { max-width: 240px; }
 
-  .bcn-check { display: inline-flex; align-items: center; gap: var(--spacing-200); font-size: var(--form-font-size-md); color: var(--color-text-primary); cursor: pointer; }
-  .bcn-check input { width: 1rem; height: 1rem; accent-color: var(--color-primary); }
+  .bcn-check { display: inline-flex; align-items: center; gap: var(--spacing-200); font-size: var(--typography-label-md-font-size); color: var(--color-content-default); cursor: pointer; }
+  .bcn-check input { width: 1rem; height: 1rem; accent-color: var(--color-background-brand); }
 
-  .bcn-nsched__row { margin: 0 0 var(--spacing-150); font-size: var(--form-font-size-md); color: var(--color-text-primary); }
-  .bcn-nsched__k { font-weight: var(--font-weight-semibold); }
+  .bcn-nsched__row { margin: 0 0 var(--spacing-150); font-size: var(--typography-label-md-font-size); color: var(--color-content-default); }
+  .bcn-nsched__k { font-weight: var(--typography-font-weight-semibold); }
   .bcn-nsched__test { display: flex; align-items: center; gap: var(--spacing-300); margin-top: var(--spacing-200); }
   .bcn-nsched__test[hidden] { display: none; }
 
diff --git a/src/pages/prototypes/data-catalog-actions.astro b/src/pages/prototypes/data-catalog-actions.astro
index 8a39dea5..2a7425a1 100644
--- a/src/pages/prototypes/data-catalog-actions.astro
+++ b/src/pages/prototypes/data-catalog-actions.astro
@@ -16,7 +16,7 @@
 import AppShell from '../../layouts/AppShell.astro';
 import PageLayout from '../../layouts/PageLayout.astro';
 import EsaButton from '@esa/ecology/esa-button.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import { actions, PROJECT_NAME } from '../../data/tracker-fixture';
 import { withBase } from '../../lib/base';
 
@@ -74,16 +74,16 @@ const gridPayload = {
     <div class="grid-header">
       <div class="grid-header__filter">
         <esa-text-field id="dc-search" placeholder="Search grid…" size="sm"></esa-text-field>
-        <span id="dc-search-clear" hidden><EsaIconButton icon="x" label="Clear search" size="sm" /></span>
+        <span id="dc-search-clear" hidden><EsaIconButton variant="chrome" iconOnly icon="x" label="Clear search" size="sm" /></span>
       </div>
-      <span id="dc-clear-filters"><EsaButton color="ghost" appearance="outline" size="sm">Clear Filters</EsaButton></span>
+      <span id="dc-clear-filters"><EsaButton variant="ghost" appearance="outline" size="sm">Clear Filters</EsaButton></span>
     </div>
 
     <div id="dc-grid" class="tracker-grid"></div>
 
     <!-- Grid footer: download · record count -->
     <div class="table-footer">
-      <span id="dc-download"><EsaButton color="ghost" appearance="outline" size="sm" icon="download">Download as CSV</EsaButton></span>
+      <span id="dc-download"><EsaButton variant="ghost" appearance="outline" size="sm" icon="download">Download as CSV</EsaButton></span>
       <div class="row-count-data">
         Total Records: <span id="dc-total">0</span>
         <span id="dc-filtered" class="filtered-rows-count" hidden></span>
@@ -220,8 +220,8 @@ const gridPayload = {
     justify-content: space-between;
     gap: var(--spacing-400);
     padding: var(--spacing-200) var(--spacing-400);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
     border-top: 0;
     border-radius: 0 0 var(--radius-100) var(--radius-100);
   }
@@ -229,19 +229,19 @@ const gridPayload = {
     display: flex;
     align-items: center;
     gap: var(--spacing-400);
-    font-size: var(--type-size-100);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-100);
+    color: var(--color-content-default-secondary);
     font-variant-numeric: tabular-nums;
   }
-  .filtered-rows-count { color: var(--color-text-tertiary); }
+  .filtered-rows-count { color: var(--color-content-default-tertiary); }
   .filtered-rows-count[hidden] { display: none; }
 
   /* AG Grid cell renderers (global — AG Grid injects cells outside Astro's scope) */
   :global(.ag-row) { cursor: pointer; }
   :global(.bcn-grid-name) {
-    color: var(--color-text-link);
-    font-weight: var(--font-weight-regular);
+    color: var(--color-content-link);
+    font-weight: var(--typography-font-weight-regular);
     text-decoration: underline;
   }
-  :global(.bcn-grid-name:hover) { color: var(--color-primary-hover); }
+  :global(.bcn-grid-name:hover) { color: var(--color-background-brand-hover); }
 </style>
diff --git a/src/pages/prototypes/data-catalog-commitment.astro b/src/pages/prototypes/data-catalog-commitment.astro
index 826176b7..d5e59a81 100644
--- a/src/pages/prototypes/data-catalog-commitment.astro
+++ b/src/pages/prototypes/data-catalog-commitment.astro
@@ -32,7 +32,7 @@ import EsaIcon from '@esa/ecology/esa-icon.astro';
 import EsaBadge from '@esa/ecology/esa-badge.astro';
 import EsaPill from '@esa/ecology/esa-pill.astro';
 import EsaCollapsible from '@esa/ecology/esa-collapsible.astro';
-import EsaIconLink from '@esa/ecology/esa-icon-link.astro';
+import EsaIconLink from '@esa/ecology/esa-button.astro';
 import EsaEmptyState from '@esa/ecology/esa-empty-state.astro';
 import FilterContainer from '@esa/ecology/esa-filter-container.astro';
 import FilterClearButton from '@esa/ecology/esa-filter-clear-button.astro';
@@ -199,7 +199,7 @@ const editPayload = {
           </div>
         </div>
         <div class="bcn-cmt__head-actions">
-          <span id="edit-cmt"><EsaButton color="primary" size="sm"><span class="bcn-btn-ico"><EsaIcon name="pencil" size="xs" />Edit commitment</span></EsaButton></span>
+          <span id="edit-cmt"><EsaButton variant="primary" size="sm"><span class="bcn-btn-ico"><EsaIcon name="pencil" size="xs" />Edit commitment</span></EsaButton></span>
         </div>
       </header>
 
@@ -215,7 +215,7 @@ const editPayload = {
                 ))}
               </ul>
               <footer class="bcn-cmttext__footer">
-                <span data-bcn-source><EsaButton color="ghost" size="sm" icon="file-text">View in Source Document</EsaButton></span>
+                <span data-bcn-source><EsaButton variant="ghost" size="sm" icon="file-text">View in Source Document</EsaButton></span>
               </footer>
             </article>
           </section>
@@ -224,7 +224,7 @@ const editPayload = {
           <section class="bcn-cmt__section">
             <header class="bcn-cmt__section-head">
               <h2 class="bcn-section-title">Requirements <span class="bcn-count-neutral"><EsaBadge size="sm" value={requirementsTotal} /></span></h2>
-              <EsaIconLink href="#add-requirement" icon="plus" size="sm" weight="medium">Add requirement</EsaIconLink>
+              <EsaIconLink variant="chrome" href="#add-requirement" icon="plus" size="sm">Add requirement</EsaIconLink>
             </header>
 
             <div class="bcn-reqfilters">
@@ -342,7 +342,7 @@ const editPayload = {
               ))}
             </ol>
             <div class="bcn-revs__add">
-              <span id="add-rev"><EsaButton color="ghost" appearance="outline"><span class="bcn-btn-ico"><EsaIcon name="plus" size="xs" />Add New Version</span></EsaButton></span>
+              <span id="add-rev"><EsaButton variant="ghost" appearance="outline"><span class="bcn-btn-ico"><EsaIcon name="plus" size="xs" />Add New Version</span></EsaButton></span>
             </div>
           </EsaCollapsible>
         </aside>
@@ -350,13 +350,13 @@ const editPayload = {
 
       <!-- Danger zone — GitHub layout; opens a simple confirm, matching prod. -->
       <BcnDangerZone title="Delete this commitment" description="Deleting this commitment also deletes all requirements and actions defined under it. This action cannot be undone.">
-        <span id="delete-cmt"><EsaButton color="danger" appearance="soft">Delete commitment</EsaButton></span>
+        <span id="delete-cmt"><EsaButton variant="danger" appearance="soft">Delete commitment</EsaButton></span>
       </BcnDangerZone>
     </div>
   </PageLayout>
 
   <!-- ═══ Edit Commitment MODAL — single-column form (prod field set). ═══ -->
-  <esa-dialog id="edit-dialog" heading="Edit Commitment" style="--_dialog-width: 760px; --_dialog-max-height: 92vh; --_dialog-bg: var(--color-surface, #fff); --z-modal-backdrop: 1150; --z-modal: 1200;">
+  <esa-dialog id="edit-dialog" heading="Edit Commitment" style="--_dialog-width: 760px; --_dialog-max-height: 92vh; --_dialog-bg: var(--color-background-elevation-raised, #fff); --z-modal-backdrop: 1150; --z-modal: 1200;">
     <div class="bcn-form bcn-form--dialog">
       <esa-text-field id="c-title" label="Title" required></esa-text-field>
       <div class="bcn-grid-2">
@@ -372,13 +372,13 @@ const editPayload = {
       <esa-textarea id="c-text" label="Full Commitment Text" rows="10"></esa-textarea>
     </div>
     <div slot="footer" class="bcn-editor__foot">
-      <span id="ec-cancel"><EsaButton color="ghost" appearance="outline">Cancel</EsaButton></span>
-      <span id="ec-save"><EsaButton color="primary">Save</EsaButton></span>
+      <span id="ec-cancel"><EsaButton variant="ghost" appearance="outline">Cancel</EsaButton></span>
+      <span id="ec-save"><EsaButton variant="primary">Save</EsaButton></span>
     </div>
   </esa-dialog>
 
   <!-- ═══ Add New Version MODAL — prod create-version field set (with file upload). ═══ -->
-  <esa-dialog id="rev-add-dialog" heading="Add New Version" style="--_dialog-width: 640px; --_dialog-max-height: 92vh; --_dialog-bg: var(--color-surface, #fff); --z-modal-backdrop: 1150; --z-modal: 1200;">
+  <esa-dialog id="rev-add-dialog" heading="Add New Version" style="--_dialog-width: 640px; --_dialog-max-height: 92vh; --_dialog-bg: var(--color-background-elevation-raised, #fff); --z-modal-backdrop: 1150; --z-modal: 1200;">
     <div class="bcn-form bcn-form--dialog">
       <esa-text-field id="rv-originator" label="Originator of Change" required></esa-text-field>
       <esa-date-picker id="rv-effective" label="Effective Date"></esa-date-picker>
@@ -389,31 +389,31 @@ const editPayload = {
       </div>
     </div>
     <div slot="footer" class="bcn-editor__foot">
-      <span id="rv-cancel"><EsaButton color="ghost" appearance="outline">Cancel</EsaButton></span>
-      <span id="rv-save"><EsaButton color="primary">Add version</EsaButton></span>
+      <span id="rv-cancel"><EsaButton variant="ghost" appearance="outline">Cancel</EsaButton></span>
+      <span id="rv-save"><EsaButton variant="primary">Add version</EsaButton></span>
     </div>
   </esa-dialog>
 
   <!-- ═══ Edit Version Metadata MODAL — prod edit-metadata field set (no upload). ═══ -->
-  <esa-dialog id="rev-edit-dialog" heading="Edit Version Metadata" style="--_dialog-width: 640px; --_dialog-max-height: 92vh; --_dialog-bg: var(--color-surface, #fff); --z-modal-backdrop: 1150; --z-modal: 1200;">
+  <esa-dialog id="rev-edit-dialog" heading="Edit Version Metadata" style="--_dialog-width: 640px; --_dialog-max-height: 92vh; --_dialog-bg: var(--color-background-elevation-raised, #fff); --z-modal-backdrop: 1150; --z-modal: 1200;">
     <div class="bcn-form bcn-form--dialog">
       <esa-text-field id="re-originator" label="Originator of Change" required></esa-text-field>
       <esa-date-picker id="re-effective" label="Effective Date"></esa-date-picker>
       <esa-textarea id="re-summary" label="Summary of Change" rows="4" required></esa-textarea>
     </div>
     <div slot="footer" class="bcn-editor__foot">
-      <span id="re-cancel"><EsaButton color="ghost" appearance="outline">Cancel</EsaButton></span>
-      <span id="re-save"><EsaButton color="primary">Save</EsaButton></span>
+      <span id="re-cancel"><EsaButton variant="ghost" appearance="outline">Cancel</EsaButton></span>
+      <span id="re-save"><EsaButton variant="primary">Save</EsaButton></span>
     </div>
   </esa-dialog>
 
   <!-- Source-document viewer. -->
-  <esa-side-dialog id="source-drawer" heading={SOURCE_DOCUMENT} size="lg" style="--_width: 66vw; --z-modal: 1300; --z-modal-backdrop: 1250; --backdrop-filter: blur(4px);">
+  <esa-side-dialog id="source-drawer" heading={SOURCE_DOCUMENT} size="lg" style="--_width: 66vw; --z-modal: 1300; --z-modal-backdrop: 1250; --side-dialog-backdrop-filter: blur(4px);">
     <div class="bcn-source-pdf">
       <iframe class="bcn-source-pdf__frame" src={`${sourcePdf}#view=FitH&navpanes=0&pagemode=none`} title={`Source document — ${SOURCE_DOCUMENT} (sample)`}></iframe>
     </div>
     <span slot="footer" class="bcn-source-foot">
-      <EsaIconLink href={sourceDocHref} trailing="arrow-right" size="sm" weight="medium">Open Source Document</EsaIconLink>
+      <EsaIconLink variant="chrome" href={sourceDocHref} iconRight="arrow-right" size="sm">Open Source Document</EsaIconLink>
     </span>
   </esa-side-dialog>
 
@@ -606,36 +606,36 @@ const editPayload = {
 
   .bcn-cmt { display: flex; flex-direction: column; gap: var(--spacing-600); }
 
-  .bcn-cmt__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-400); padding-bottom: var(--spacing-400); border-bottom: 1px solid var(--color-border); }
+  .bcn-cmt__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-400); padding-bottom: var(--spacing-400); border-bottom: 1px solid var(--color-border-default); }
   .bcn-cmt__head-actions { display: inline-flex; align-items: center; gap: var(--spacing-200); flex-shrink: 0; }
   .bcn-cmt__identity { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-100); min-width: 0; }
   .bcn-cmt__title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-200); min-width: 0; }
-  .bcn-cmt__title { margin: 0; font-family: var(--font-decorative); font-size: 1.5rem; font-weight: var(--font-weight-semibold); line-height: 1.2; color: var(--color-text-primary); }
-  .bcn-cmt__badge { flex-shrink: 0; padding: 0.125rem 0.375rem; border-radius: var(--radius-100); font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); line-height: 1.4; white-space: nowrap; }
+  .bcn-cmt__title { margin: 0; font-family: var(--font-decorative); font-size: 1.5rem; font-weight: var(--typography-font-weight-semibold); line-height: 1.2; color: var(--color-content-default); }
+  .bcn-cmt__badge { flex-shrink: 0; padding: 0.125rem 0.375rem; border-radius: var(--radius-100); font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); line-height: 1.4; white-space: nowrap; }
   .bcn-cmt__badge--commitment { color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); }
-  .bcn-cmt__badge--type { color: var(--color-text-secondary); background: var(--color-surface-sunken); transform: translateY(2px); }
-  .bcn-cmt__badge--phase { color: var(--color-text-secondary); background: transparent; border: 1px solid var(--color-border); }
+  .bcn-cmt__badge--type { color: var(--color-content-default-secondary); background: var(--color-background-elevation-sunken); transform: translateY(2px); }
+  .bcn-cmt__badge--phase { color: var(--color-content-default-secondary); background: transparent; border: 1px solid var(--color-border-default); }
 
   .bcn-cmt__body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--spacing-600); align-items: start; }
   .bcn-cmt__main { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-600); }
   .bcn-cmt__rail { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-500); }
-  .bcn-cmt__rail :global(.esa-collapsible__title) { font-size: var(--type-size-250); font-weight: var(--font-weight-semibold); }
+  .bcn-cmt__rail :global(.esa-collapsible__title) { font-size: var(--font-size-250); font-weight: var(--typography-font-weight-semibold); }
 
   .bcn-cmt__section { display: flex; flex-direction: column; gap: var(--spacing-300); }
   .bcn-cmt__section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-300); }
-  .bcn-section-title { display: flex; align-items: center; gap: var(--spacing-200); margin: 0; font-size: var(--type-size-300); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
+  .bcn-section-title { display: flex; align-items: center; gap: var(--spacing-200); margin: 0; font-size: var(--font-size-300); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
   .bcn-btn-ico { display: inline-flex; align-items: center; gap: var(--spacing-150); }
 
   /* Neutral count badge — re-point esa-badge to the house neutral pair. */
-  .bcn-count-neutral { display: inline-flex; align-items: center; --badge-bg: var(--color-surface-sunken); --badge-text-color: var(--color-text-secondary); }
+  .bcn-count-neutral { display: inline-flex; align-items: center; --badge-bg: var(--color-background-elevation-sunken); --badge-text-color: var(--color-content-default-secondary); }
 
   /* Commitment-text card — serif regulatory voice, parsed bullets with bold lead-ins. */
-  .bcn-cmttext { display: flex; flex-direction: column; gap: var(--spacing-300); padding: var(--spacing-500); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-300); }
+  .bcn-cmttext { display: flex; flex-direction: column; gap: var(--spacing-300); padding: var(--spacing-500); background: var(--color-background-elevation-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-300); }
   .bcn-cmttext__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-400); }
-  .bcn-cmttext__item { font-family: var(--font-decorative); font-size: 1.0625rem; line-height: 1.65; color: var(--color-text-primary); }
-  .bcn-cmttext__footer { display: flex; justify-content: flex-end; gap: var(--spacing-100); padding-top: var(--spacing-200); border-top: 1px solid var(--color-border-light); }
-  .bcn-cmttext__footer :global(.esa-button--color-ghost .esa-button__native) { color: var(--color-primary); }
-  .bcn-cmttext__footer :global(.esa-button--color-ghost .esa-button__native:hover:not(:disabled)) { color: var(--color-primary-hover); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
+  .bcn-cmttext__item { font-family: var(--font-decorative); font-size: 1.0625rem; line-height: 1.65; color: var(--color-content-default); }
+  .bcn-cmttext__footer { display: flex; justify-content: flex-end; gap: var(--spacing-100); padding-top: var(--spacing-200); border-top: 1px solid var(--color-border-default-subtle); }
+  .bcn-cmttext__footer :global(.esa-button--color-ghost .esa-button__native) { color: var(--color-background-brand); }
+  .bcn-cmttext__footer :global(.esa-button--color-ghost .esa-button__native:hover:not(:disabled)) { color: var(--color-background-brand-hover); background: color-mix(in srgb, var(--color-background-brand) 8%, transparent); }
 
   /* Requirements filter bar (canonical: search + filter-dropdowns + clear). */
   .bcn-reqfilters { display: flex; flex-direction: column; gap: var(--spacing-250); }
@@ -648,46 +648,46 @@ const editPayload = {
   .bcn-row {
     display: flex; align-items: center; gap: var(--spacing-300);
     padding: var(--spacing-300) var(--spacing-400);
-    border: 1px solid var(--color-border); border-radius: var(--radius-200); background: var(--color-surface);
+    border: 1px solid var(--color-border-default); border-radius: var(--radius-200); background: var(--color-background-elevation-raised);
     text-decoration: none;
     transition: background-color 120ms ease;
   }
-  .bcn-row:hover { background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)); }
-  .bcn-row__name { flex: 1; min-width: 0; font-size: var(--form-font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
+  .bcn-row:hover { background: color-mix(in srgb, var(--color-background-brand) 4%, var(--color-background-elevation-raised)); }
+  .bcn-row__name { flex: 1; min-width: 0; font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
   .bcn-row .bcn-cmt__badge--type,
   .bcn-row .bcn-cmt__badge--phase { transform: none; }
-  .bcn-row > :global(.esa-icon:last-child) { color: var(--color-text-tertiary); flex-shrink: 0; transition: transform 120ms ease, color 120ms ease; }
-  .bcn-row:hover > :global(.esa-icon:last-child) { transform: translateX(2px); color: var(--color-text-secondary); }
+  .bcn-row > :global(.esa-icon:last-child) { color: var(--color-content-default-tertiary); flex-shrink: 0; transition: transform 120ms ease, color 120ms ease; }
+  .bcn-row:hover > :global(.esa-icon:last-child) { transform: translateX(2px); color: var(--color-content-default-secondary); }
 
-  .bcn-reqs__empty { border: 1px dashed var(--color-border); border-radius: var(--radius-200); padding: var(--spacing-400); }
-  .bcn-reqs__empty :global(.esa-empty-state__title) { color: var(--color-text-tertiary); font-weight: var(--font-weight-regular); }
+  .bcn-reqs__empty { border: 1px dashed var(--color-border-default); border-radius: var(--radius-200); padding: var(--spacing-400); }
+  .bcn-reqs__empty :global(.esa-empty-state__title) { color: var(--color-content-default-tertiary); font-weight: var(--typography-font-weight-regular); }
 
   /* Roomier file rows; the lego's density knob inherits into its shadow DOM. */
   #cmt-files { --file-list-row-padding-y: var(--spacing-200); }
 
   /* Rail extras */
   .bcn-tagrow { display: flex; flex-wrap: wrap; gap: var(--spacing-150); margin-top: var(--spacing-100); }
-  .bcn-tagrow :global(.esa-pill) { border-radius: var(--radius-100); background: var(--color-surface-sunken); border: 1px solid var(--color-border); color: var(--color-text-secondary); }
+  .bcn-tagrow :global(.esa-pill) { border-radius: var(--radius-100); background: var(--color-background-elevation-sunken); border: 1px solid var(--color-border-default); color: var(--color-content-default-secondary); }
   .bcn-lists { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-150); margin: 0; padding: 0; list-style: none; }
-  .bcn-list-link { font-size: var(--form-font-size-md); font-weight: var(--font-weight-medium); color: var(--color-primary); text-decoration: none; }
+  .bcn-list-link { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-medium); color: var(--color-background-brand); text-decoration: none; }
   .bcn-list-link:hover { text-decoration: underline; }
-  .bcn-rail-meta { margin: var(--spacing-300) 0 0; padding-top: var(--spacing-300); border-top: 1px solid var(--color-border-light); font-size: 0.75rem; color: var(--color-text-secondary); }
+  .bcn-rail-meta { margin: var(--spacing-300) 0 0; padding-top: var(--spacing-300); border-top: 1px solid var(--color-border-default-subtle); font-size: 0.75rem; color: var(--color-content-default-secondary); }
 
   /* Lineage / Revisions spine modules (family treatment). */
   .bcn-lineage { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
   .bcn-lineage__node { position: relative; display: flex; align-items: flex-start; gap: var(--spacing-300); padding-bottom: var(--spacing-400); }
-  .bcn-lineage__node::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--color-border); }
+  .bcn-lineage__node::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--color-border-default); }
   .bcn-lineage__node:last-child { padding-bottom: 0; }
   .bcn-lineage__node:last-child::before { display: none; }
-  .bcn-lineage__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-secondary); }
+  .bcn-lineage__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--color-background-elevation-raised); border: 1px solid var(--color-border-default); color: var(--color-content-default-secondary); }
   .bcn-lineage__icon :global(.esa-icon) { --_icon-size: 14px; }
-  .bcn-lineage__node--current .bcn-lineage__icon { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-inverse); }
+  .bcn-lineage__node--current .bcn-lineage__icon { border-color: var(--color-background-brand); background: var(--color-background-brand); color: var(--color-content-default-knockout); }
   .bcn-lineage__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 2px; }
-  .bcn-lineage__kind { font-size: 0.75rem; color: var(--color-primary); text-decoration: none; width: fit-content; }
+  .bcn-lineage__kind { font-size: 0.75rem; color: var(--color-background-brand); text-decoration: none; width: fit-content; }
   a.bcn-lineage__kind:hover { text-decoration: underline; }
-  .bcn-lineage__name { font-size: var(--form-font-size-md); font-weight: var(--font-weight-medium); line-height: 1.35; color: var(--color-primary); text-decoration: none; }
+  .bcn-lineage__name { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-medium); line-height: 1.35; color: var(--color-background-brand); text-decoration: none; }
   a.bcn-lineage__name:hover { text-decoration: underline; }
-  .bcn-lineage__name--current { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
+  .bcn-lineage__name--current { color: var(--color-content-default); font-weight: var(--typography-font-weight-semibold); }
 
   /* Child rollup nodes (Requirements / Actions) — single-line link + neutral count. */
   .bcn-lineage__node.bcn-lineage__node--child { align-items: center; }
@@ -698,12 +698,12 @@ const editPayload = {
   /* Revisions spine — caption-style kind, change metadata, inline edit, add action. */
   .bcn-revs .bcn-lineage__body { gap: 2px; }
   .bcn-revs__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-200); }
-  .bcn-revs .bcn-lineage__kind { color: var(--color-text-tertiary); }
-  .bcn-revs__edit { border: 0; background: none; padding: 0; cursor: pointer; font-size: 0.75rem; font-weight: var(--font-weight-medium); color: var(--color-primary); }
+  .bcn-revs .bcn-lineage__kind { color: var(--color-content-default-tertiary); }
+  .bcn-revs__edit { border: 0; background: none; padding: 0; cursor: pointer; font-size: 0.75rem; font-weight: var(--typography-font-weight-medium); color: var(--color-background-brand); }
   .bcn-revs__edit:hover { text-decoration: underline; }
-  .bcn-revs__summary { font-size: var(--form-font-size-md); font-weight: var(--font-weight-medium); line-height: 1.35; color: var(--color-text-primary); }
-  .bcn-revs__meta { font-size: 0.75rem; color: var(--color-text-secondary); }
-  .bcn-revs__by { font-size: 0.75rem; color: var(--color-text-tertiary); margin-top: 1px; }
+  .bcn-revs__summary { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-medium); line-height: 1.35; color: var(--color-content-default); }
+  .bcn-revs__meta { font-size: 0.75rem; color: var(--color-content-default-secondary); }
+  .bcn-revs__by { font-size: 0.75rem; color: var(--color-content-default-tertiary); margin-top: 1px; }
   .bcn-revs__add { padding-top: var(--spacing-300); }
   #add-rev { display: block; }
   #add-rev :global(.esa-button) { width: 100%; justify-content: center; }
@@ -716,17 +716,17 @@ const editPayload = {
   .bcn-form { display: flex; flex-direction: column; gap: var(--spacing-400); }
   .bcn-form--dialog { padding: var(--spacing-100) 0; }
   .bcn-form :global(esa-input-tag) {
-    --_chip-bg: var(--color-surface-sunken);
-    --_chip-color: var(--color-text-primary);
+    --_chip-bg: var(--color-background-elevation-sunken);
+    --_chip-color: var(--color-content-default);
     --_chip-radius: var(--radius-100);
   }
   .bcn-field { display: flex; flex-direction: column; gap: var(--spacing-150); }
-  .bcn-field__label { font-size: var(--form-font-size-md); font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
+  .bcn-field__label { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-medium); color: var(--color-content-default); }
   .bcn-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-300); }
   .bcn-editor__foot { display: flex; gap: var(--spacing-300); justify-content: flex-end; width: 100%; }
 
   .bcn-source-pdf { height: 100%; min-height: 60vh; }
-  .bcn-source-pdf__frame { width: 100%; height: 100%; min-height: 60vh; border: 0; border-radius: var(--radius-200); background: var(--color-surface-sunken); }
+  .bcn-source-pdf__frame { width: 100%; height: 100%; min-height: 60vh; border: 0; border-radius: var(--radius-200); background: var(--color-background-elevation-sunken); }
   .bcn-source-foot { display: flex; justify-content: flex-end; width: 100%; }
 </style>
 
diff --git a/src/pages/prototypes/data-catalog-requirement-streamlined.astro b/src/pages/prototypes/data-catalog-requirement-streamlined.astro
index 51b6f82f..6162c012 100644
--- a/src/pages/prototypes/data-catalog-requirement-streamlined.astro
+++ b/src/pages/prototypes/data-catalog-requirement-streamlined.astro
@@ -32,7 +32,7 @@ import PageLayout from '../../layouts/PageLayout.astro';
 import EsaButton from '@esa/ecology/esa-button.astro';
 import EsaIcon from '@esa/ecology/esa-icon.astro';
 import EsaCollapsible from '@esa/ecology/esa-collapsible.astro';
-import EsaIconLink from '@esa/ecology/esa-icon-link.astro';
+import EsaIconLink from '@esa/ecology/esa-button.astro';
 import BcnKeyValue from '../../components/bcn/BcnKeyValue.astro';
 import BcnRequirementReference from '../../components/bcn/BcnRequirementReference.astro';
 import { actions, PROJECT_NAME } from '../../data/tracker-fixture';
@@ -153,7 +153,7 @@ const editPayload = {
           </div>
         </div>
         <div class="bcn-action__head-actions">
-          <span id="edit-req"><EsaButton color="primary"><span class="bcn-btn-ico"><EsaIcon name="pencil" size="xs" />Edit requirement</span></EsaButton></span>
+          <span id="edit-req"><EsaButton variant="primary"><span class="bcn-btn-ico"><EsaIcon name="pencil" size="xs" />Edit requirement</span></EsaButton></span>
         </div>
       </header>
 
@@ -238,7 +238,7 @@ const editPayload = {
   <esa-dialog
     id="edit-dialog"
     size="lg"
-    style="--_dialog-width: 96vw; --_dialog-max-height: 94vh; --_dialog-bg: var(--color-surface, #fff); --z-modal-backdrop: 1150; --z-modal: 1200;"
+    style="--_dialog-width: 96vw; --_dialog-max-height: 94vh; --_dialog-bg: var(--color-background-elevation-raised, #fff); --z-modal-backdrop: 1150; --z-modal: 1200;"
   >
     <div slot="header" class="bcn-editor__head">
       <span class="bcn-editor__head-title">{reqName}</span>
@@ -256,7 +256,7 @@ const editPayload = {
           </span>
         </div>
         <div class="bcn-context__actions">
-          <span id="ctx-source"><EsaButton color="ghost" appearance="outline" size="sm" icon="file-text">View in Source Document</EsaButton></span>
+          <span id="ctx-source"><EsaButton variant="ghost" appearance="outline" size="sm" icon="file-text">View in Source Document</EsaButton></span>
         </div>
       </section>
 
@@ -358,7 +358,7 @@ const editPayload = {
               <div id="notif-schedule-rows"></div>
               <p id="notif-schedule-empty" class="bcn-ncard__hint">Enable notification types above to see the schedule.</p>
               <div id="notif-test" class="bcn-nsched__test" hidden>
-                <span id="notif-test-btn"><EsaButton color="ghost" appearance="outline" size="sm">Send Test Emails</EsaButton></span>
+                <span id="notif-test-btn"><EsaButton variant="ghost" appearance="outline" size="sm">Send Test Emails</EsaButton></span>
                 <span class="bcn-ncard__hint">Sends to your email only</span>
               </div>
             </section>
@@ -367,20 +367,20 @@ const editPayload = {
       </section>
     </div>
     <div slot="footer" class="bcn-editor__foot">
-      <span id="er-cancel"><EsaButton color="ghost" appearance="outline">Cancel</EsaButton></span>
-      <span id="er-save"><EsaButton color="primary">Save</EsaButton></span>
+      <span id="er-cancel"><EsaButton variant="ghost" appearance="outline">Cancel</EsaButton></span>
+      <span id="er-save"><EsaButton variant="primary">Save</EsaButton></span>
     </div>
   </esa-dialog>
 
   <!-- Source-document viewer = esa-side-dialog lego at page root; opened by both the
        reference block's [data-bcn-source] trigger and the modal's context button.
        --z lifts it above the edit dialog (z 1200). -->
-  <esa-side-dialog id="source-drawer" heading={sourceDocTitle} size="lg" style="--_width: 66vw; --z-modal: 1300; --z-modal-backdrop: 1250; --backdrop-filter: blur(4px);">
+  <esa-side-dialog id="source-drawer" heading={sourceDocTitle} size="lg" style="--_width: 66vw; --z-modal: 1300; --z-modal-backdrop: 1250; --side-dialog-backdrop-filter: blur(4px);">
     <div class="bcn-source-pdf">
       <iframe class="bcn-source-pdf__frame" src={`${sourcePdf}#view=FitH&navpanes=0&pagemode=none`} title={`Source document — ${sourceDocTitle} (sample)`}></iframe>
     </div>
     <span slot="footer" class="bcn-source-foot">
-      <EsaIconLink href={sourceDocHref} trailing="arrow-right" size="sm" weight="medium">Open Source Document</EsaIconLink>
+      <EsaIconLink variant="chrome" href={sourceDocHref} iconRight="arrow-right" size="sm">Open Source Document</EsaIconLink>
     </span>
   </esa-side-dialog>
 
@@ -542,28 +542,28 @@ const editPayload = {
   .bcn-action { display: flex; flex-direction: column; gap: var(--spacing-600); }
 
   /* Identity header */
-  .bcn-action__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-400); padding-bottom: var(--spacing-400); border-bottom: 1px solid var(--color-border); }
+  .bcn-action__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-400); padding-bottom: var(--spacing-400); border-bottom: 1px solid var(--color-border-default); }
   .bcn-action__head-actions { display: inline-flex; align-items: center; gap: var(--spacing-200); flex-shrink: 0; }
   .bcn-action__identity { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-100); min-width: 0; }
   .bcn-action__title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-200); min-width: 0; }
-  .bcn-action__title { margin: 0; font-family: var(--font-decorative); font-size: 1.5rem; font-weight: var(--font-weight-semibold); line-height: 1.2; color: var(--color-text-primary); }
-  .bcn-action__badge { flex-shrink: 0; padding: 0.125rem 0.375rem; border-radius: var(--radius-100); font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); line-height: 1.4; white-space: nowrap; }
+  .bcn-action__title { margin: 0; font-family: var(--font-decorative); font-size: 1.5rem; font-weight: var(--typography-font-weight-semibold); line-height: 1.2; color: var(--color-content-default); }
+  .bcn-action__badge { flex-shrink: 0; padding: 0.125rem 0.375rem; border-radius: var(--radius-100); font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); line-height: 1.4; white-space: nowrap; }
   .bcn-action__badge--commitment { color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); }
-  .bcn-action__badge--type { color: var(--color-text-secondary); background: var(--color-surface-sunken); transform: translateY(2px); }
+  .bcn-action__badge--type { color: var(--color-content-default-secondary); background: var(--color-background-elevation-sunken); transform: translateY(2px); }
 
   /* Two-column body */
   .bcn-action__body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--spacing-600); align-items: start; }
   .bcn-action__main { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-600); }
   .bcn-action__rail { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-500); }
   .bcn-action__rail :global(.esa-collapsible__title) {
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
   }
 
   .bcn-action__section { display: flex; flex-direction: column; gap: var(--spacing-300); }
   .bcn-section-title {
     display: flex; align-items: center; gap: var(--spacing-200); margin: 0;
-    font-size: var(--type-size-300); font-weight: var(--font-weight-semibold); color: var(--color-text-primary);
+    font-size: var(--font-size-300); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default);
   }
 
   /* The page header owns Edit — hide the reference block's own footer Edit button
@@ -572,7 +572,7 @@ const editPayload = {
 
   /* The reference block sits on the page (not a white dialog) — surface white so it
      reads as a card against the page background. */
-  .bcn-action__main :global(.bcn-reqref) { background: var(--color-surface); }
+  .bcn-action__main :global(.bcn-reqref) { background: var(--color-background-elevation-raised); }
 
   .bcn-btn-ico { display: inline-flex; align-items: center; gap: var(--spacing-150); }
 
@@ -581,30 +581,30 @@ const editPayload = {
      standard twin, data-catalog-requirement.astro. */
   .bcn-lineage { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
   .bcn-lineage__node { position: relative; display: flex; align-items: flex-start; gap: var(--spacing-300); padding-bottom: var(--spacing-400); }
-  .bcn-lineage__node::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--color-border); }
+  .bcn-lineage__node::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--color-border-default); }
   .bcn-lineage__node:last-child { padding-bottom: 0; }
   .bcn-lineage__node:last-child::before { display: none; }
   .bcn-lineage__icon {
     display: inline-flex; align-items: center; justify-content: center;
     width: 28px; height: 28px; flex-shrink: 0;
-    border-radius: 50%; background: var(--color-surface);
-    border: 1px solid var(--color-border); color: var(--color-text-secondary);
+    border-radius: 50%; background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default); color: var(--color-content-default-secondary);
   }
   .bcn-lineage__icon :global(.esa-icon) { --_icon-size: 14px; }
-  .bcn-lineage__node--current .bcn-lineage__icon { border-color: var(--color-secondary); color: var(--color-secondary); }
+  .bcn-lineage__node--current .bcn-lineage__icon { border-color: var(--color-background-brand-muted); color: var(--color-background-brand-muted); }
   .bcn-lineage__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 2px; }
-  .bcn-lineage__kind { font-size: 0.75rem; color: var(--color-text-tertiary); }
-  .bcn-lineage__name { font-size: var(--form-font-size-md); font-weight: var(--font-weight-medium); line-height: 1.35; color: var(--color-primary); text-decoration: none; }
+  .bcn-lineage__kind { font-size: 0.75rem; color: var(--color-content-default-tertiary); }
+  .bcn-lineage__name { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-medium); line-height: 1.35; color: var(--color-background-brand); text-decoration: none; }
   a.bcn-lineage__name:hover { text-decoration: underline; }
-  .bcn-lineage__name--current { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
+  .bcn-lineage__name--current { color: var(--color-content-default); font-weight: var(--typography-font-weight-semibold); }
 
   /* Rail Notifications — rules-only trigger rows (per-trigger icon | name | rule),
      ported from the regular Action detail page. */
   .bcn-triggers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-200); }
-  .bcn-trigger-row { display: flex; align-items: center; gap: var(--spacing-250); font-size: var(--form-font-size-md); }
-  .bcn-trigger-row :global(.esa-icon) { color: var(--color-primary); flex-shrink: 0; }
-  .bcn-trigger-row__name { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
-  .bcn-trigger-row__rule { margin-left: auto; color: var(--color-text-secondary); text-align: right; }
+  .bcn-trigger-row { display: flex; align-items: center; gap: var(--spacing-250); font-size: var(--typography-label-md-font-size); }
+  .bcn-trigger-row :global(.esa-icon) { color: var(--color-background-brand); flex-shrink: 0; }
+  .bcn-trigger-row__name { color: var(--color-content-default); font-weight: var(--typography-font-weight-medium); }
+  .bcn-trigger-row__rule { margin-left: auto; color: var(--color-content-default-secondary); text-align: right; }
 
   @media (max-width: 1024px) {
     .bcn-action__body { grid-template-columns: 1fr; }
@@ -624,7 +624,7 @@ const editPayload = {
     overflow: hidden;
   }
   .bcn-editor__head { display: flex; align-items: center; gap: var(--spacing-200); }
-  .bcn-editor__head-title { font-family: var(--font-decorative); font-size: var(--type-size-300); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
+  .bcn-editor__head-title { font-family: var(--font-decorative); font-size: var(--font-size-300); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
   .bcn-editor__foot { display: flex; gap: var(--spacing-300); justify-content: flex-end; width: 100%; }
 
   /* Left pane: read-only source context — quiet background, serif requirement text. */
@@ -632,13 +632,13 @@ const editPayload = {
     display: flex; flex-direction: column; gap: var(--spacing-400);
     min-width: 0; height: 100%; overflow-y: auto;
     padding: var(--spacing-500);
-    background: var(--color-background);
-    border-right: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border-right: 1px solid var(--color-border-default);
   }
-  .bcn-context__text { margin: 0; font-family: var(--font-decorative); font-size: 1.0625rem; line-height: 1.65; color: var(--color-text-primary); }
-  .bcn-context__facts { display: flex; align-items: center; gap: var(--spacing-300); flex-wrap: wrap; padding-top: var(--spacing-300); border-top: 1px solid var(--color-border); }
-  .bcn-context__doc { display: inline-flex; align-items: center; gap: var(--spacing-150); font-size: var(--form-font-size-md); color: var(--color-text-secondary); }
-  .bcn-context__doc :global(.esa-icon) { color: var(--color-text-tertiary); }
+  .bcn-context__text { margin: 0; font-family: var(--font-decorative); font-size: 1.0625rem; line-height: 1.65; color: var(--color-content-default); }
+  .bcn-context__facts { display: flex; align-items: center; gap: var(--spacing-300); flex-wrap: wrap; padding-top: var(--spacing-300); border-top: 1px solid var(--color-border-default); }
+  .bcn-context__doc { display: inline-flex; align-items: center; gap: var(--spacing-150); font-size: var(--typography-label-md-font-size); color: var(--color-content-default-secondary); }
+  .bcn-context__doc :global(.esa-icon) { color: var(--color-content-default-tertiary); }
   .bcn-context__actions { display: flex; }
 
   /* Config pane: NO padding here — the tab bar spans the full pane width. */
@@ -648,49 +648,49 @@ const editPayload = {
   .bcn-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-300); }
   .bcn-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-300); }
   .bcn-field { display: flex; flex-direction: column; gap: var(--spacing-150); }
-  .bcn-field__label { font-size: var(--form-font-size-md); font-weight: var(--font-weight-medium); color: var(--form-label-color); }
-  .bcn-field__hint { font-size: 0.75rem; color: var(--color-text-tertiary); }
+  .bcn-field__label { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-medium); color: var(--form-label-color); }
+  .bcn-field__hint { font-size: 0.75rem; color: var(--color-content-default-tertiary); }
 
   .bcn-note {
     display: flex; align-items: flex-start; gap: var(--spacing-200);
     padding: var(--spacing-300); border-radius: var(--radius-200);
-    background: color-mix(in srgb, var(--color-primary) 8%, white);
-    color: var(--color-text-secondary); font-size: var(--form-font-size-md); line-height: 1.45;
+    background: color-mix(in srgb, var(--color-background-brand) 8%, white);
+    color: var(--color-content-default-secondary); font-size: var(--typography-label-md-font-size); line-height: 1.45;
   }
-  .bcn-note :global(.esa-icon) { color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }
+  .bcn-note :global(.esa-icon) { color: var(--color-background-brand); flex-shrink: 0; margin-top: 2px; }
 
   /* Notifications tab — carded sections matching the prod modal. */
   .bcn-notif { gap: var(--spacing-400); }
   .bcn-ncard {
     display: flex; flex-direction: column; gap: var(--spacing-250);
-    padding: var(--spacing-400); border: 1px solid var(--color-border); border-radius: var(--radius-200); background: var(--color-surface);
+    padding: var(--spacing-400); border: 1px solid var(--color-border-default); border-radius: var(--radius-200); background: var(--color-background-elevation-raised);
   }
-  .bcn-ncard__title { margin: 0; font-size: 0.875rem; font-weight: var(--font-weight-bold); letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-text-primary); }
-  .bcn-ncard__date { margin: 0; font-size: var(--type-size-300); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-ncard__hint { margin: 0; font-size: var(--form-font-size-md); color: var(--color-text-secondary); line-height: 1.45; }
+  .bcn-ncard__title { margin: 0; font-size: 0.875rem; font-weight: var(--typography-font-weight-bold); letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-content-default); }
+  .bcn-ncard__date { margin: 0; font-size: var(--font-size-300); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-ncard__hint { margin: 0; font-size: var(--typography-label-md-font-size); color: var(--color-content-default-secondary); line-height: 1.45; }
 
   .bcn-ntoggle {
     display: flex; flex-direction: column; gap: var(--spacing-300);
-    padding: var(--spacing-400); border: 1px solid var(--color-border); border-radius: var(--radius-200); background: var(--color-surface);
+    padding: var(--spacing-400); border: 1px solid var(--color-border-default); border-radius: var(--radius-200); background: var(--color-background-elevation-raised);
   }
   .bcn-ntoggle__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-300); }
-  .bcn-ntoggle__title { display: inline-flex; align-items: center; gap: var(--spacing-250); font-weight: var(--font-weight-semibold); color: var(--color-primary); }
-  .bcn-ntoggle__title :global(.esa-icon) { color: var(--color-text-primary); }
+  .bcn-ntoggle__title { display: inline-flex; align-items: center; gap: var(--spacing-250); font-weight: var(--typography-font-weight-semibold); color: var(--color-background-brand); }
+  .bcn-ntoggle__title :global(.esa-icon) { color: var(--color-content-default); }
   .bcn-ntoggle__body { display: flex; flex-direction: column; gap: var(--spacing-200); align-items: flex-start; }
   .bcn-ntoggle__body[hidden] { display: none; }
   .bcn-ntoggle__body :global(esa-text-field) { max-width: 240px; }
 
-  .bcn-check { display: inline-flex; align-items: center; gap: var(--spacing-200); font-size: var(--form-font-size-md); color: var(--color-text-primary); cursor: pointer; }
-  .bcn-check input { width: 1rem; height: 1rem; accent-color: var(--color-primary); }
+  .bcn-check { display: inline-flex; align-items: center; gap: var(--spacing-200); font-size: var(--typography-label-md-font-size); color: var(--color-content-default); cursor: pointer; }
+  .bcn-check input { width: 1rem; height: 1rem; accent-color: var(--color-background-brand); }
 
-  .bcn-nsched__row { margin: 0 0 var(--spacing-150); font-size: var(--form-font-size-md); color: var(--color-text-primary); }
-  .bcn-nsched__k { font-weight: var(--font-weight-semibold); }
+  .bcn-nsched__row { margin: 0 0 var(--spacing-150); font-size: var(--typography-label-md-font-size); color: var(--color-content-default); }
+  .bcn-nsched__k { font-weight: var(--typography-font-weight-semibold); }
   .bcn-nsched__test { display: flex; align-items: center; gap: var(--spacing-300); margin-top: var(--spacing-200); }
   .bcn-nsched__test[hidden] { display: none; }
 
   /* Source-document drawer body — full-height PDF frame. */
   .bcn-source-pdf { height: 100%; min-height: 60vh; }
-  .bcn-source-pdf__frame { width: 100%; height: 100%; min-height: 60vh; border: 0; border-radius: var(--radius-200); background: var(--color-surface-sunken); }
+  .bcn-source-pdf__frame { width: 100%; height: 100%; min-height: 60vh; border: 0; border-radius: var(--radius-200); background: var(--color-background-elevation-sunken); }
   .bcn-source-foot { display: flex; justify-content: flex-end; width: 100%; }
 
   @media (max-width: 860px) {
diff --git a/src/pages/prototypes/data-catalog-requirement.astro b/src/pages/prototypes/data-catalog-requirement.astro
index 9c6ec759..87cb0e02 100644
--- a/src/pages/prototypes/data-catalog-requirement.astro
+++ b/src/pages/prototypes/data-catalog-requirement.astro
@@ -34,11 +34,11 @@ import AppShell from '../../layouts/AppShell.astro';
 import PageLayout from '../../layouts/PageLayout.astro';
 import EsaButton from '@esa/ecology/esa-button.astro';
 import EsaIcon from '@esa/ecology/esa-icon.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import EsaPill from '@esa/ecology/esa-pill.astro';
 import EsaBadge from '@esa/ecology/esa-badge.astro';
 import EsaCollapsible from '@esa/ecology/esa-collapsible.astro';
-import EsaIconLink from '@esa/ecology/esa-icon-link.astro';
+import EsaIconLink from '@esa/ecology/esa-button.astro';
 import BcnKeyValue from '../../components/bcn/BcnKeyValue.astro';
 import { actions, PROJECT_NAME } from '../../data/tracker-fixture';
 import { ENRICH } from '../../data/requirement-enrich';
@@ -178,7 +178,7 @@ const editPayload = {
           </div>
         </div>
         <div class="bcn-req__head-actions">
-          <span id="edit-req"><EsaButton color="primary"><span class="bcn-btn-ico"><EsaIcon name="pencil" size="xs" />Edit requirement</span></EsaButton></span>
+          <span id="edit-req"><EsaButton variant="primary"><span class="bcn-btn-ico"><EsaIcon name="pencil" size="xs" />Edit requirement</span></EsaButton></span>
         </div>
       </header>
 
@@ -192,8 +192,8 @@ const editPayload = {
             <article class="bcn-reqtext">
               <p class="bcn-reqtext__text">{row.requirementText}</p>
               <footer class="bcn-reqtext__footer">
-                <span id="open-commitment"><EsaButton color="ghost" size="sm"><span class="bcn-btn-ico"><EsaIcon name="scroll-text" size="xs" paths={SCROLL_TEXT} />View Commitment Text</span></EsaButton></span>
-                <span data-bcn-source><EsaButton color="ghost" size="sm" icon="file-text">View in Source Document</EsaButton></span>
+                <span id="open-commitment"><EsaButton variant="ghost" size="sm"><span class="bcn-btn-ico"><EsaIcon name="scroll-text" size="xs" paths={SCROLL_TEXT} />View Commitment Text</span></EsaButton></span>
+                <span data-bcn-source><EsaButton variant="ghost" size="sm" icon="file-text">View in Source Document</EsaButton></span>
               </footer>
             </article>
           </section>
@@ -267,7 +267,7 @@ const editPayload = {
   <esa-dialog
     id="edit-dialog"
     size="lg"
-    style="--_dialog-width: 96vw; --_dialog-max-height: 94vh; --_dialog-bg: var(--color-surface, #fff); --z-modal-backdrop: 1150; --z-modal: 1200;"
+    style="--_dialog-width: 96vw; --_dialog-max-height: 94vh; --_dialog-bg: var(--color-background-elevation-raised, #fff); --z-modal-backdrop: 1150; --z-modal: 1200;"
   >
     <div slot="header" class="bcn-editor__head">
       <span class="bcn-editor__head-title">{reqName}</span>
@@ -282,7 +282,7 @@ const editPayload = {
         </div>
         <p class="bcn-context__text">{commitmentText}</p>
         <div class="bcn-context__actions">
-          <span id="ctx-source"><EsaButton color="ghost" appearance="outline" size="sm" icon="file-text">View in Source Document</EsaButton></span>
+          <span id="ctx-source"><EsaButton variant="ghost" appearance="outline" size="sm" icon="file-text">View in Source Document</EsaButton></span>
         </div>
       </section>
 
@@ -301,21 +301,21 @@ const editPayload = {
           <div class="bcn-grid-2">
             <div class="bcn-field-add">
               <esa-input-tag id="d-species" label="Species"></esa-input-tag>
-              <span class="bcn-field-add__btn" data-add-entity="Species" data-target="d-species"><EsaIconButton icon="plus" label="Add new species" size="xs" /></span>
+              <span class="bcn-field-add__btn" data-add-entity="Species" data-target="d-species"><EsaIconButton variant="chrome" iconOnly icon="plus" label="Add new species" size="xs" /></span>
             </div>
             <div class="bcn-field-add">
               <esa-input-tag id="d-seasons" label="Seasons"></esa-input-tag>
-              <span class="bcn-field-add__btn" data-add-entity="Season" data-target="d-seasons"><EsaIconButton icon="plus" label="Add new season" size="xs" /></span>
+              <span class="bcn-field-add__btn" data-add-entity="Season" data-target="d-seasons"><EsaIconButton variant="chrome" iconOnly icon="plus" label="Add new season" size="xs" /></span>
             </div>
           </div>
           <div class="bcn-field-add">
             <esa-input-tag id="d-activities" label="Construction Activities"></esa-input-tag>
-            <span class="bcn-field-add__btn" data-add-entity="Construction Activity" data-target="d-activities"><EsaIconButton icon="plus" label="Add new construction activity" size="xs" /></span>
+            <span class="bcn-field-add__btn" data-add-entity="Construction Activity" data-target="d-activities"><EsaIconButton variant="chrome" iconOnly icon="plus" label="Add new construction activity" size="xs" /></span>
           </div>
           <div class="bcn-grid-2">
             <div class="bcn-field-add">
               <esa-input-tag id="d-milestones" label="Milestones"></esa-input-tag>
-              <span class="bcn-field-add__btn" data-add-entity="Milestone" data-target="d-milestones"><EsaIconButton icon="plus" label="Add new milestone" size="xs" /></span>
+              <span class="bcn-field-add__btn" data-add-entity="Milestone" data-target="d-milestones"><EsaIconButton variant="chrome" iconOnly icon="plus" label="Add new milestone" size="xs" /></span>
             </div>
             <esa-input-tag id="d-tags" label="Tags"></esa-input-tag>
           </div>
@@ -323,25 +323,25 @@ const editPayload = {
       </section>
     </div>
     <div slot="footer" class="bcn-editor__foot">
-      <span id="er-cancel"><EsaButton color="ghost" appearance="outline">Cancel</EsaButton></span>
-      <span id="er-save"><EsaButton color="primary">Save</EsaButton></span>
+      <span id="er-cancel"><EsaButton variant="ghost" appearance="outline">Cancel</EsaButton></span>
+      <span id="er-save"><EsaButton variant="primary">Save</EsaButton></span>
     </div>
   </esa-dialog>
 
   <!-- Source-document viewer = esa-side-dialog lego at page root; opened by the
        requirement-text card's trigger and the modal's context button. -->
-  <esa-side-dialog id="source-drawer" heading={sourceDocTitle} size="lg" style="--_width: 66vw; --z-modal: 1300; --z-modal-backdrop: 1250; --backdrop-filter: blur(4px);">
+  <esa-side-dialog id="source-drawer" heading={sourceDocTitle} size="lg" style="--_width: 66vw; --z-modal: 1300; --z-modal-backdrop: 1250; --side-dialog-backdrop-filter: blur(4px);">
     <div class="bcn-source-pdf">
       <iframe class="bcn-source-pdf__frame" src={`${sourcePdf}#view=FitH&navpanes=0&pagemode=none`} title={`Source document — ${sourceDocTitle} (sample)`}></iframe>
     </div>
     <span slot="footer" class="bcn-source-foot">
-      <EsaIconLink href={sourceDocHref} trailing="arrow-right" size="sm" weight="medium">Open Source Document</EsaIconLink>
+      <EsaIconLink variant="chrome" href={sourceDocHref} iconRight="arrow-right" size="sm">Open Source Document</EsaIconLink>
     </span>
   </esa-side-dialog>
 
   <!-- Full-commitment-text viewer (the document-review treatment): the commitment's
        parsed text in the serif regulatory voice; badge + title in the header. -->
-  <esa-side-dialog id="commitment-drawer" heading={`${commitmentId} — ${commitmentTitle}`} style="--_width: 560px; --z-modal: 1300; --z-modal-backdrop: 1250; --backdrop-filter: blur(4px);">
+  <esa-side-dialog id="commitment-drawer" heading={`${commitmentId} — ${commitmentTitle}`} style="--_width: 560px; --z-modal: 1300; --z-modal-backdrop: 1250; --side-dialog-backdrop-filter: blur(4px);">
     <span slot="header" class="bcn-drawer-head">
       <span class="bcn-req__badge bcn-req__badge--commitment">{commitmentId}</span>
       <span class="bcn-drawer-head__title">{commitmentTitle}</span>
@@ -357,7 +357,7 @@ const editPayload = {
       </ul>
     </div>
     <span slot="footer" class="bcn-source-foot">
-      <EsaIconLink href={commitmentHref} trailing="arrow-right" size="sm" weight="medium">Open Commitment</EsaIconLink>
+      <EsaIconLink variant="chrome" href={commitmentHref} iconRight="arrow-right" size="sm">Open Commitment</EsaIconLink>
     </span>
   </esa-side-dialog>
 
@@ -373,8 +373,8 @@ const editPayload = {
       <esa-textarea id="ent-desc" label="Description" rows="4" placeholder="Optional context…"></esa-textarea>
     </div>
     <div slot="footer" class="bcn-editor__foot">
-      <span id="ent-cancel"><EsaButton color="ghost" appearance="outline">Cancel</EsaButton></span>
-      <span id="ent-add"><EsaButton color="primary">Add</EsaButton></span>
+      <span id="ent-cancel"><EsaButton variant="ghost" appearance="outline">Cancel</EsaButton></span>
+      <span id="ent-add"><EsaButton variant="primary">Add</EsaButton></span>
     </div>
   </esa-side-dialog>
 
@@ -481,37 +481,37 @@ const editPayload = {
   .bcn-req { display: flex; flex-direction: column; gap: var(--spacing-600); }
 
   /* Identity header */
-  .bcn-req__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-400); padding-bottom: var(--spacing-400); border-bottom: 1px solid var(--color-border); }
+  .bcn-req__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-400); padding-bottom: var(--spacing-400); border-bottom: 1px solid var(--color-border-default); }
   .bcn-req__head-actions { display: inline-flex; align-items: center; gap: var(--spacing-200); flex-shrink: 0; }
   .bcn-req__identity { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-100); min-width: 0; }
   .bcn-req__title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-200); min-width: 0; }
-  .bcn-req__title { margin: 0; font-family: var(--font-decorative); font-size: 1.5rem; font-weight: var(--font-weight-semibold); line-height: 1.2; color: var(--color-text-primary); }
-  .bcn-req__badge { flex-shrink: 0; padding: 0.125rem 0.375rem; border-radius: var(--radius-100); font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); line-height: 1.4; white-space: nowrap; }
+  .bcn-req__title { margin: 0; font-family: var(--font-decorative); font-size: 1.5rem; font-weight: var(--typography-font-weight-semibold); line-height: 1.2; color: var(--color-content-default); }
+  .bcn-req__badge { flex-shrink: 0; padding: 0.125rem 0.375rem; border-radius: var(--radius-100); font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); line-height: 1.4; white-space: nowrap; }
   .bcn-req__badge--commitment { color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); }
-  .bcn-req__badge--type { color: var(--color-text-secondary); background: var(--color-surface-sunken); transform: translateY(2px); }
+  .bcn-req__badge--type { color: var(--color-content-default-secondary); background: var(--color-background-elevation-sunken); transform: translateY(2px); }
 
   /* Two-column body */
   .bcn-req__body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--spacing-600); align-items: start; }
   .bcn-req__main { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-600); }
   .bcn-req__rail { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-500); }
   .bcn-req__rail :global(.esa-collapsible__title) {
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
   }
 
   .bcn-req__section { display: flex; flex-direction: column; gap: var(--spacing-300); }
   .bcn-section-title {
     display: flex; align-items: center; gap: var(--spacing-200); margin: 0;
-    font-size: var(--type-size-300); font-weight: var(--font-weight-semibold); color: var(--color-text-primary);
+    font-size: var(--font-size-300); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default);
   }
   /* Requirement-text card — serif regulatory voice on a quiet surface (mirrors the
      BcnRequirementReference shell, minus the Action-owned metadata grid). */
-  .bcn-reqtext { display: flex; flex-direction: column; gap: var(--spacing-300); padding: var(--spacing-500); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-300); }
-  .bcn-reqtext__text { margin: 0; font-family: var(--font-decorative); font-size: 1.0625rem; line-height: 1.65; color: var(--color-text-primary); }
-  .bcn-reqtext__footer { display: flex; justify-content: flex-end; gap: var(--spacing-100); padding-top: var(--spacing-200); border-top: 1px solid var(--color-border-light); }
+  .bcn-reqtext { display: flex; flex-direction: column; gap: var(--spacing-300); padding: var(--spacing-500); background: var(--color-background-elevation-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-300); }
+  .bcn-reqtext__text { margin: 0; font-family: var(--font-decorative); font-size: 1.0625rem; line-height: 1.65; color: var(--color-content-default); }
+  .bcn-reqtext__footer { display: flex; justify-content: flex-end; gap: var(--spacing-100); padding-top: var(--spacing-200); border-top: 1px solid var(--color-border-default-subtle); }
   /* Footer links read in the PRIMARY (darker) green — token-only tint of esa-button's ghost. */
-  .bcn-reqtext__footer :global(.esa-button--color-ghost .esa-button__native) { color: var(--color-primary); }
-  .bcn-reqtext__footer :global(.esa-button--color-ghost .esa-button__native:hover:not(:disabled)) { color: var(--color-primary-hover); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
+  .bcn-reqtext__footer :global(.esa-button--color-ghost .esa-button__native) { color: var(--color-background-brand); }
+  .bcn-reqtext__footer :global(.esa-button--color-ghost .esa-button__native:hover:not(:disabled)) { color: var(--color-background-brand-hover); background: color-mix(in srgb, var(--color-background-brand) 8%, transparent); }
 
   /* Linked Action rows — quiet single-line jump-offs: commitment badge | name |
      type badge | chevron. Hover is a whisper (surface tint + chevron nudge), not an
@@ -520,50 +520,50 @@ const editPayload = {
   .bcn-linked-action {
     display: flex; align-items: center; gap: var(--spacing-300);
     padding: var(--spacing-300) var(--spacing-400);
-    border: 1px solid var(--color-border); border-radius: var(--radius-200); background: var(--color-surface);
+    border: 1px solid var(--color-border-default); border-radius: var(--radius-200); background: var(--color-background-elevation-raised);
     text-decoration: none;
     transition: background-color 120ms ease;
   }
-  .bcn-linked-action:hover { background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)); }
-  .bcn-linked-action__name { flex: 1; min-width: 0; font-size: var(--form-font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
+  .bcn-linked-action:hover { background: color-mix(in srgb, var(--color-background-brand) 4%, var(--color-background-elevation-raised)); }
+  .bcn-linked-action__name { flex: 1; min-width: 0; font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
   .bcn-linked-action .bcn-req__badge--type { transform: none; }
-  .bcn-linked-action > :global(.esa-icon:last-child) { color: var(--color-text-tertiary); flex-shrink: 0; transition: transform 120ms ease, color 120ms ease; }
-  .bcn-linked-action:hover > :global(.esa-icon:last-child) { transform: translateX(2px); color: var(--color-text-secondary); }
+  .bcn-linked-action > :global(.esa-icon:last-child) { color: var(--color-content-default-tertiary); flex-shrink: 0; transition: transform 120ms ease, color 120ms ease; }
+  .bcn-linked-action:hover > :global(.esa-icon:last-child) { transform: translateX(2px); color: var(--color-content-default-secondary); }
 
   /* Rail extras — tag chips: squared (4px), light gray fill, mid-gray border (the
      rounded esa-pill default reads too playful here). */
   .bcn-tagrow { display: flex; flex-wrap: wrap; gap: var(--spacing-150); margin-top: var(--spacing-100); }
   .bcn-tagrow :global(.esa-pill) {
     border-radius: var(--radius-100);
-    background: var(--color-surface-sunken);
-    border: 1px solid var(--color-border);
-    color: var(--color-text-secondary);
+    background: var(--color-background-elevation-sunken);
+    border: 1px solid var(--color-border-default);
+    color: var(--color-content-default-secondary);
   }
 
   /* Lineage — entity chain on a connecting rail (BcnChangeLog spine treatment).
      The current node (this requirement) gets the secondary-ring accent. */
   .bcn-lineage { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
   .bcn-lineage__node { position: relative; display: flex; align-items: flex-start; gap: var(--spacing-300); padding-bottom: var(--spacing-400); }
-  .bcn-lineage__node::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--color-border); }
+  .bcn-lineage__node::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--color-border-default); }
   .bcn-lineage__node:last-child { padding-bottom: 0; }
   .bcn-lineage__node:last-child::before { display: none; }
   .bcn-lineage__icon {
     display: inline-flex; align-items: center; justify-content: center;
     width: 28px; height: 28px; flex-shrink: 0;
-    border-radius: 50%; background: var(--color-surface);
-    border: 1px solid var(--color-border); color: var(--color-text-secondary);
+    border-radius: 50%; background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default); color: var(--color-content-default-secondary);
   }
   .bcn-lineage__icon :global(.esa-icon) { --_icon-size: 14px; }
-  .bcn-lineage__node--current .bcn-lineage__icon { border-color: var(--color-secondary); color: var(--color-secondary); }
+  .bcn-lineage__node--current .bcn-lineage__icon { border-color: var(--color-background-brand-muted); color: var(--color-background-brand-muted); }
   .bcn-lineage__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 2px; }
-  .bcn-lineage__kind { font-size: 0.75rem; color: var(--color-text-tertiary); }
-  .bcn-lineage__name { font-size: var(--form-font-size-md); font-weight: var(--font-weight-medium); line-height: 1.35; color: var(--color-primary); text-decoration: none; }
+  .bcn-lineage__kind { font-size: 0.75rem; color: var(--color-content-default-tertiary); }
+  .bcn-lineage__name { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-medium); line-height: 1.35; color: var(--color-background-brand); text-decoration: none; }
   a.bcn-lineage__name:hover { text-decoration: underline; }
-  .bcn-lineage__name--current { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
+  .bcn-lineage__name--current { color: var(--color-content-default); font-weight: var(--typography-font-weight-semibold); }
 
   /* Created/Updated (Details panel) — genuine meta: small but legible, a step darker
      than tertiary, separated from the key-values above by a hairline. */
-  .bcn-rail-meta { margin: var(--spacing-300) 0 0; padding-top: var(--spacing-300); border-top: 1px solid var(--color-border-light); font-size: 0.75rem; color: var(--color-text-secondary); }
+  .bcn-rail-meta { margin: var(--spacing-300) 0 0; padding-top: var(--spacing-300); border-top: 1px solid var(--color-border-default-subtle); font-size: 0.75rem; color: var(--color-content-default-secondary); }
 
   .bcn-btn-ico { display: inline-flex; align-items: center; gap: var(--spacing-150); }
 
@@ -585,7 +585,7 @@ const editPayload = {
     overflow: hidden;
   }
   .bcn-editor__head { display: flex; align-items: center; gap: var(--spacing-200); }
-  .bcn-editor__head-title { font-family: var(--font-decorative); font-size: var(--type-size-300); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
+  .bcn-editor__head-title { font-family: var(--font-decorative); font-size: var(--font-size-300); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
   .bcn-editor__foot { display: flex; gap: var(--spacing-300); justify-content: flex-end; width: 100%; }
 
   /* Left pane: read-only commitment context — quiet background, serif text. */
@@ -593,12 +593,12 @@ const editPayload = {
     display: flex; flex-direction: column; gap: var(--spacing-400);
     min-width: 0; height: 100%; overflow-y: auto;
     padding: var(--spacing-500);
-    background: var(--color-background);
-    border-right: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border-right: 1px solid var(--color-border-default);
   }
   .bcn-context__commitment { display: flex; align-items: center; gap: var(--spacing-250); }
-  .bcn-context__commitment-title { font-size: var(--form-font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-context__text { margin: 0; font-family: var(--font-decorative); font-size: 1.0625rem; line-height: 1.65; color: var(--color-text-primary); }
+  .bcn-context__commitment-title { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-context__text { margin: 0; font-family: var(--font-decorative); font-size: 1.0625rem; line-height: 1.65; color: var(--color-content-default); }
   .bcn-context__actions { display: flex; }
 
   /* Form pane — one scrolling column (no tabs: the requirement owns reference data only). */
@@ -608,8 +608,8 @@ const editPayload = {
   /* Neutral squared chips in the form's input-tags (prod ui-input-tag look: gray
      fill, dark-gray text, small radius) — via the lego's chip hooks. */
   .bcn-form :global(esa-input-tag) {
-    --_chip-bg: var(--color-surface-sunken);
-    --_chip-color: var(--color-text-primary);
+    --_chip-bg: var(--color-background-elevation-sunken);
+    --_chip-color: var(--color-content-default);
     --_chip-radius: var(--radius-100);
   }
 
@@ -618,7 +618,7 @@ const editPayload = {
      control is the wrapper's bottom row). */
   .bcn-field-add { position: relative; min-width: 0; }
   .bcn-field-add__btn { position: absolute; right: 5px; bottom: 5px; display: inline-flex; }
-  .bcn-field__hint { font-size: 0.75rem; color: var(--color-text-tertiary); }
+  .bcn-field__hint { font-size: 0.75rem; color: var(--color-content-default-tertiary); }
 
   /* Entity-creation drawer body. */
   .bcn-entity-form { display: flex; flex-direction: column; gap: var(--spacing-400); }
@@ -628,14 +628,14 @@ const editPayload = {
   /* Full-commitment drawer — badge + title header, then the parsed text in the
      serif regulatory voice (matching the requirement-text card). */
   .bcn-drawer-head { display: inline-flex; align-items: center; gap: var(--spacing-250); }
-  .bcn-drawer-head__title { font-size: var(--type-size-300); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-parsed { display: flex; flex-direction: column; gap: var(--spacing-400); font-family: var(--font-decorative); font-size: 1.0625rem; line-height: 1.65; color: var(--color-text-primary); }
-  .bcn-parsed__title { margin: 0; font-weight: var(--font-weight-semibold); }
+  .bcn-drawer-head__title { font-size: var(--font-size-300); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-parsed { display: flex; flex-direction: column; gap: var(--spacing-400); font-family: var(--font-decorative); font-size: 1.0625rem; line-height: 1.65; color: var(--color-content-default); }
+  .bcn-parsed__title { margin: 0; font-weight: var(--typography-font-weight-semibold); }
   .bcn-parsed__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-400); }
 
   /* Source-document drawer body — full-height PDF frame. */
   .bcn-source-pdf { height: 100%; min-height: 60vh; }
-  .bcn-source-pdf__frame { width: 100%; height: 100%; min-height: 60vh; border: 0; border-radius: var(--radius-200); background: var(--color-surface-sunken); }
+  .bcn-source-pdf__frame { width: 100%; height: 100%; min-height: 60vh; border: 0; border-radius: var(--radius-200); background: var(--color-background-elevation-sunken); }
   .bcn-source-foot { display: flex; justify-content: flex-end; width: 100%; }
 
   @media (max-width: 860px) {
diff --git a/src/pages/prototypes/data-catalog-requirements-streamlined.astro b/src/pages/prototypes/data-catalog-requirements-streamlined.astro
index 00702d7a..4d93f953 100644
--- a/src/pages/prototypes/data-catalog-requirements-streamlined.astro
+++ b/src/pages/prototypes/data-catalog-requirements-streamlined.astro
@@ -17,7 +17,7 @@
 import AppShell from '../../layouts/AppShell.astro';
 import PageLayout from '../../layouts/PageLayout.astro';
 import EsaButton from '@esa/ecology/esa-button.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import { actions, PROJECT_NAME } from '../../data/tracker-fixture';
 import { ENRICH } from '../../data/requirement-enrich';
 import { withBase } from '../../lib/base';
@@ -78,16 +78,16 @@ const gridPayload = {
     <div class="grid-header">
       <div class="grid-header__filter">
         <esa-text-field id="dc-search" placeholder="Search grid…" size="sm"></esa-text-field>
-        <span id="dc-search-clear" hidden><EsaIconButton icon="x" label="Clear search" size="sm" /></span>
+        <span id="dc-search-clear" hidden><EsaIconButton variant="chrome" iconOnly icon="x" label="Clear search" size="sm" /></span>
       </div>
-      <span id="dc-clear-filters"><EsaButton color="ghost" appearance="outline" size="sm">Clear Filters</EsaButton></span>
+      <span id="dc-clear-filters"><EsaButton variant="ghost" appearance="outline" size="sm">Clear Filters</EsaButton></span>
     </div>
 
     <div id="dc-grid" class="tracker-grid"></div>
 
     <!-- Grid footer: download · record count -->
     <div class="table-footer">
-      <span id="dc-download"><EsaButton color="ghost" appearance="outline" size="sm" icon="download">Download as CSV</EsaButton></span>
+      <span id="dc-download"><EsaButton variant="ghost" appearance="outline" size="sm" icon="download">Download as CSV</EsaButton></span>
       <div class="row-count-data">
         Total Records: <span id="dc-total">0</span>
         <span id="dc-filtered" class="filtered-rows-count" hidden></span>
@@ -229,8 +229,8 @@ const gridPayload = {
     justify-content: space-between;
     gap: var(--spacing-400);
     padding: var(--spacing-200) var(--spacing-400);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
     border-top: 0;
     border-radius: 0 0 var(--radius-100) var(--radius-100);
   }
@@ -238,19 +238,19 @@ const gridPayload = {
     display: flex;
     align-items: center;
     gap: var(--spacing-400);
-    font-size: var(--type-size-100);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-100);
+    color: var(--color-content-default-secondary);
     font-variant-numeric: tabular-nums;
   }
-  .filtered-rows-count { color: var(--color-text-tertiary); }
+  .filtered-rows-count { color: var(--color-content-default-tertiary); }
   .filtered-rows-count[hidden] { display: none; }
 
   /* AG Grid cell renderers (global — AG Grid injects cells outside Astro's scope) */
   :global(.ag-row) { cursor: pointer; }
   :global(.bcn-grid-name) {
-    color: var(--color-text-link);
-    font-weight: var(--font-weight-regular);
+    color: var(--color-content-link);
+    font-weight: var(--typography-font-weight-regular);
     text-decoration: underline;
   }
-  :global(.bcn-grid-name:hover) { color: var(--color-primary-hover); }
+  :global(.bcn-grid-name:hover) { color: var(--color-background-brand-hover); }
 </style>
diff --git a/src/pages/prototypes/data-catalog-source-document.astro b/src/pages/prototypes/data-catalog-source-document.astro
index c989c255..e4d15755 100644
--- a/src/pages/prototypes/data-catalog-source-document.astro
+++ b/src/pages/prototypes/data-catalog-source-document.astro
@@ -119,7 +119,7 @@ const editPayload = { docTitle, project: PROJECT_NAME, latestAmendment: '2026-02
       <header class="bcn-doc__head">
         <h1 class="bcn-doc__title">{docTitle}</h1>
         <div class="bcn-doc__head-actions">
-          <span id="edit-doc"><EsaButton color="primary" size="sm"><span class="bcn-btn-ico"><EsaIcon name="pencil" size="xs" />Edit source document</span></EsaButton></span>
+          <span id="edit-doc"><EsaButton variant="primary" size="sm"><span class="bcn-btn-ico"><EsaIcon name="pencil" size="xs" />Edit source document</span></EsaButton></span>
         </div>
       </header>
 
@@ -181,7 +181,7 @@ const editPayload = { docTitle, project: PROJECT_NAME, latestAmendment: '2026-02
 
           <!-- Coversheet download — rail action module (prod: sourcesSourceIDCoverSheetGet). -->
           <div class="bcn-coversheet">
-            <span id="download-coversheet"><EsaButton color="ghost" appearance="outline"><span class="bcn-btn-ico"><EsaIcon name="download" size="xs" paths={DOWNLOAD} />Download Source Coversheet</span></EsaButton></span>
+            <span id="download-coversheet"><EsaButton variant="ghost" appearance="outline"><span class="bcn-btn-ico"><EsaIcon name="download" size="xs" paths={DOWNLOAD} />Download Source Coversheet</span></EsaButton></span>
           </div>
         </aside>
       </div>
@@ -189,13 +189,13 @@ const editPayload = { docTitle, project: PROJECT_NAME, latestAmendment: '2026-02
       <!-- Danger zone — GitHub layout (heading outside the box; row of title+desc and a
            right-aligned secondary-danger button). Opens a simple confirm, matching prod. -->
       <BcnDangerZone title="Delete this source document" description="Deleting this source document also deletes all files attached to it. This action cannot be undone.">
-        <span id="delete-doc"><EsaButton color="danger" appearance="soft">Delete source document</EsaButton></span>
+        <span id="delete-doc"><EsaButton variant="danger" appearance="soft">Delete source document</EsaButton></span>
       </BcnDangerZone>
     </div>
   </PageLayout>
 
   <!-- ═══ Edit Source Document MODAL — single-column form (prod field set). ═══ -->
-  <esa-dialog id="edit-dialog" heading="Edit Source Document" style="--_dialog-width: 640px; --_dialog-max-height: 92vh; --_dialog-bg: var(--color-surface, #fff); --z-modal-backdrop: 1150; --z-modal: 1200;">
+  <esa-dialog id="edit-dialog" heading="Edit Source Document" style="--_dialog-width: 640px; --_dialog-max-height: 92vh; --_dialog-bg: var(--color-background-elevation-raised, #fff); --z-modal-backdrop: 1150; --z-modal: 1200;">
     <div class="bcn-form bcn-form--dialog">
       <esa-text-field id="d-name" label="Name" required></esa-text-field>
       <esa-select id="d-project" label="Project" required></esa-select>
@@ -211,13 +211,13 @@ const editPayload = { docTitle, project: PROJECT_NAME, latestAmendment: '2026-02
       <esa-textarea id="d-desc" label="Description" rows="5"></esa-textarea>
     </div>
     <div slot="footer" class="bcn-editor__foot">
-      <span id="ed-cancel"><EsaButton color="ghost" appearance="outline">Cancel</EsaButton></span>
-      <span id="ed-save"><EsaButton color="primary">Save</EsaButton></span>
+      <span id="ed-cancel"><EsaButton variant="ghost" appearance="outline">Cancel</EsaButton></span>
+      <span id="ed-save"><EsaButton variant="primary">Save</EsaButton></span>
     </div>
   </esa-dialog>
 
   <!-- Document viewer — the source PDF in the family side drawer. -->
-  <esa-side-dialog id="source-drawer" heading={docTitle} size="lg" style="--_width: 66vw; --z-modal: 1300; --z-modal-backdrop: 1250; --backdrop-filter: blur(4px);">
+  <esa-side-dialog id="source-drawer" heading={docTitle} size="lg" style="--_width: 66vw; --z-modal: 1300; --z-modal-backdrop: 1250; --side-dialog-backdrop-filter: blur(4px);">
     <div class="bcn-source-pdf">
       <iframe class="bcn-source-pdf__frame" src={`${sourcePdf}#view=FitH&navpanes=0&pagemode=none`} title={`Source document — ${docTitle} (sample)`}></iframe>
     </div>
@@ -338,18 +338,18 @@ const editPayload = { docTitle, project: PROJECT_NAME, latestAmendment: '2026-02
 
   .bcn-doc { display: flex; flex-direction: column; gap: var(--spacing-600); }
 
-  .bcn-doc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-400); padding-bottom: var(--spacing-400); border-bottom: 1px solid var(--color-border); }
+  .bcn-doc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-400); padding-bottom: var(--spacing-400); border-bottom: 1px solid var(--color-border-default); }
   .bcn-doc__head-actions { display: inline-flex; align-items: center; gap: var(--spacing-200); flex-shrink: 0; }
-  .bcn-doc__title { margin: 0; min-width: 0; font-family: var(--font-decorative); font-size: 1.5rem; font-weight: var(--font-weight-semibold); line-height: 1.2; color: var(--color-text-primary); }
+  .bcn-doc__title { margin: 0; min-width: 0; font-family: var(--font-decorative); font-size: 1.5rem; font-weight: var(--typography-font-weight-semibold); line-height: 1.2; color: var(--color-content-default); }
 
   .bcn-doc__body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--spacing-600); align-items: start; }
   .bcn-doc__main { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-600); }
   .bcn-doc__rail { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-500); }
-  .bcn-doc__rail :global(.esa-collapsible__title) { font-size: var(--type-size-250); font-weight: var(--font-weight-semibold); }
+  .bcn-doc__rail :global(.esa-collapsible__title) { font-size: var(--font-size-250); font-weight: var(--typography-font-weight-semibold); }
 
   .bcn-doc__section { display: flex; flex-direction: column; gap: var(--spacing-300); }
-  .bcn-section-title { display: flex; align-items: center; gap: var(--spacing-200); margin: 0; font-size: var(--type-size-300); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-prose { margin: 0; font-size: var(--form-font-size-md); line-height: 1.6; color: var(--color-text-primary); }
+  .bcn-section-title { display: flex; align-items: center; gap: var(--spacing-200); margin: 0; font-size: var(--font-size-300); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-prose { margin: 0; font-size: var(--typography-label-md-font-size); line-height: 1.6; color: var(--color-content-default); }
   .bcn-btn-ico { display: inline-flex; align-items: center; gap: var(--spacing-150); }
 
   /* Coversheet download — full-width rail action module. */
@@ -358,7 +358,7 @@ const editPayload = { docTitle, project: PROJECT_NAME, latestAmendment: '2026-02
 
   /* Neutral count badge — re-point esa-badge's public override tokens to the house
      neutral pair (sunken surface + secondary text), instead of the teal secondary. */
-  .bcn-count-neutral { display: inline-flex; align-items: center; --badge-bg: var(--color-surface-sunken); --badge-text-color: var(--color-text-secondary); }
+  .bcn-count-neutral { display: inline-flex; align-items: center; --badge-bg: var(--color-background-elevation-sunken); --badge-text-color: var(--color-content-default-secondary); }
 
   /* Roomier file rows — drive the esa-file-list density knob (inherits into the lego's
      shadow DOM); default there is a tight 2px block padding. */
@@ -366,7 +366,7 @@ const editPayload = { docTitle, project: PROJECT_NAME, latestAmendment: '2026-02
 
   /* Rail lists (Associated Components) */
   .bcn-lists { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-150); margin: 0; padding: 0; list-style: none; }
-  .bcn-list-link { font-size: var(--form-font-size-md); font-weight: var(--font-weight-medium); color: var(--color-primary); text-decoration: none; }
+  .bcn-list-link { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-medium); color: var(--color-background-brand); text-decoration: none; }
   .bcn-list-link:hover { text-decoration: underline; }
 
   /* Child rollup nodes (Commitments / Requirements / Actions) on the lineage spine —
@@ -381,20 +381,20 @@ const editPayload = { docTitle, project: PROJECT_NAME, latestAmendment: '2026-02
   /* Lineage rail (family treatment) */
   .bcn-lineage { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
   .bcn-lineage__node { position: relative; display: flex; align-items: flex-start; gap: var(--spacing-300); padding-bottom: var(--spacing-400); }
-  .bcn-lineage__node::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--color-border); }
+  .bcn-lineage__node::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--color-border-default); }
   .bcn-lineage__node:last-child { padding-bottom: 0; }
   .bcn-lineage__node:last-child::before { display: none; }
-  .bcn-lineage__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-secondary); }
+  .bcn-lineage__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--color-background-elevation-raised); border: 1px solid var(--color-border-default); color: var(--color-content-default-secondary); }
   .bcn-lineage__icon :global(.esa-icon) { --_icon-size: 14px; }
-  .bcn-lineage__node--current .bcn-lineage__icon { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-inverse); }
+  .bcn-lineage__node--current .bcn-lineage__icon { border-color: var(--color-background-brand); background: var(--color-background-brand); color: var(--color-content-default-knockout); }
   .bcn-lineage__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 2px; }
-  .bcn-lineage__kind { font-size: 0.75rem; color: var(--color-primary); text-decoration: none; width: fit-content; }
+  .bcn-lineage__kind { font-size: 0.75rem; color: var(--color-background-brand); text-decoration: none; width: fit-content; }
   a.bcn-lineage__kind:hover { text-decoration: underline; }
-  .bcn-lineage__name { font-size: var(--form-font-size-md); font-weight: var(--font-weight-medium); line-height: 1.35; color: var(--color-primary); text-decoration: none; }
+  .bcn-lineage__name { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-medium); line-height: 1.35; color: var(--color-background-brand); text-decoration: none; }
   a.bcn-lineage__name:hover { text-decoration: underline; }
-  .bcn-lineage__name--current { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
+  .bcn-lineage__name--current { color: var(--color-content-default); font-weight: var(--typography-font-weight-semibold); }
 
-  .bcn-rail-meta { margin: var(--spacing-300) 0 0; padding-top: var(--spacing-300); border-top: 1px solid var(--color-border-light); font-size: 0.75rem; color: var(--color-text-secondary); }
+  .bcn-rail-meta { margin: var(--spacing-300) 0 0; padding-top: var(--spacing-300); border-top: 1px solid var(--color-border-default-subtle); font-size: 0.75rem; color: var(--color-content-default-secondary); }
 
   @media (max-width: 1024px) {
     .bcn-doc__body { grid-template-columns: 1fr; }
@@ -407,7 +407,7 @@ const editPayload = { docTitle, project: PROJECT_NAME, latestAmendment: '2026-02
   .bcn-editor__foot { display: flex; gap: var(--spacing-300); justify-content: flex-end; width: 100%; }
 
   .bcn-source-pdf { height: 100%; min-height: 60vh; }
-  .bcn-source-pdf__frame { width: 100%; height: 100%; min-height: 60vh; border: 0; border-radius: var(--radius-200); background: var(--color-surface-sunken); }
+  .bcn-source-pdf__frame { width: 100%; height: 100%; min-height: 60vh; border: 0; border-radius: var(--radius-200); background: var(--color-background-elevation-sunken); }
 </style>
 
 <!-- Page renders its own identity header; hide PageLayout's default title row. -->
diff --git a/src/pages/prototypes/discussion.astro b/src/pages/prototypes/discussion.astro
index 829d9fec..d9800665 100644
--- a/src/pages/prototypes/discussion.astro
+++ b/src/pages/prototypes/discussion.astro
@@ -21,7 +21,7 @@ import EsaIcon from '@esa/ecology/esa-icon.astro';
 import EsaAvatar from '@esa/ecology/esa-avatar.astro';
 import EsaBadge from '@esa/ecology/esa-badge.astro';
 import EsaButton from '@esa/ecology/esa-button.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 
 // Lucide message-square-dot.
 const MSG_DOT = "<path d='M11.7 3H5a2 2 0 0 0-2 2v16l4-4h12a2 2 0 0 0 2-2v-2.7'/><circle cx='18' cy='5' r='3'/>";
@@ -88,8 +88,8 @@ const stepColor = (name: string) => STEP[name] ?? '--color-action';
                     {c.edited && <span class="disc-c__edited">(edited)</span>}
                     {c.own && (
                       <span class="disc-c__actions">
-                        <EsaIconButton icon="pencil" label="Edit" size="sm" />
-                        <EsaIconButton icon="trash-2" label="Delete" size="sm" />
+                        <EsaIconButton variant="chrome" iconOnly icon="pencil" label="Edit" size="sm" />
+                        <EsaIconButton variant="chrome" iconOnly icon="trash-2" label="Delete" size="sm" />
                       </span>
                     )}
                   </div>
@@ -102,7 +102,7 @@ const stepColor = (name: string) => STEP[name] ?? '--color-action';
               <div class="disc-compose__field">
                 <span class="disc-compose__as">Posting as {currentUser}</span>
                 <esa-textarea rows="2" placeholder="Write your comment..."></esa-textarea>
-                <div class="disc-compose__actions"><EsaButton color="primary" size="sm">Post Comment</EsaButton></div>
+                <div class="disc-compose__actions"><EsaButton variant="primary" size="sm">Post Comment</EsaButton></div>
               </div>
             </li>
           </ul>
@@ -135,8 +135,8 @@ const stepColor = (name: string) => STEP[name] ?? '--color-action';
                     {c.edited && <span class="disc-c__edited">(edited)</span>}
                     {c.own && (
                       <span class="disc-c__actions">
-                        <EsaIconButton icon="pencil" label="Edit" size="sm" />
-                        <EsaIconButton icon="trash-2" label="Delete" size="sm" />
+                        <EsaIconButton variant="chrome" iconOnly icon="pencil" label="Edit" size="sm" />
+                        <EsaIconButton variant="chrome" iconOnly icon="trash-2" label="Delete" size="sm" />
                       </span>
                     )}
                   </div>
@@ -149,7 +149,7 @@ const stepColor = (name: string) => STEP[name] ?? '--color-action';
               <div class="disc-compose__field">
                 <span class="disc-compose__as">Posting as {currentUser}</span>
                 <esa-textarea rows="2" placeholder="Write your comment..."></esa-textarea>
-                <div class="disc-compose__actions"><EsaButton color="primary" size="sm">Post Comment</EsaButton></div>
+                <div class="disc-compose__actions"><EsaButton variant="primary" size="sm">Post Comment</EsaButton></div>
               </div>
             </li>
           </ul>
@@ -167,29 +167,29 @@ const stepColor = (name: string) => STEP[name] ?? '--color-action';
   /* ═══ Lab scaffolding (not product chrome) ═══ */
   .lab { max-width: 880px; margin: 0 auto; padding: var(--spacing-700, 2.5rem) var(--spacing-500) var(--spacing-800, 4rem); display: flex; flex-direction: column; gap: var(--spacing-700, 2.5rem); }
   .lab__head { display: flex; flex-direction: column; gap: var(--spacing-300); }
-  .lab__title { margin: 0; font-family: var(--font-decorative); font-size: 2rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .lab__intro { margin: 0; max-width: 74ch; font-size: var(--type-size-200, 1rem); line-height: 1.6; color: var(--color-text-secondary); }
-  .lab__intro strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
+  .lab__title { margin: 0; font-family: var(--font-decorative); font-size: 2rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .lab__intro { margin: 0; max-width: 74ch; font-size: var(--font-size-200, 1rem); line-height: 1.6; color: var(--color-content-default-secondary); }
+  .lab__intro strong { color: var(--color-content-default); font-weight: var(--typography-font-weight-semibold); }
   .lab__intro em { font-style: italic; }
 
   .opt { display: flex; flex-direction: column; gap: var(--spacing-300); }
   .opt__bar { display: flex; align-items: center; gap: var(--spacing-300); flex-wrap: wrap; }
-  .opt__num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 0.875rem; font-weight: var(--font-weight-semibold); flex-shrink: 0; }
-  .opt__name { font-size: var(--type-size-300, 1.125rem); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .opt__note { font-size: var(--type-size-100, 0.875rem); color: var(--color-text-tertiary); }
-  .opt__stage { padding: var(--spacing-600, 2rem); background: var(--color-surface, #fff); border: 1px dashed var(--bcn-gray-200); border-radius: var(--radius-400, 0.75rem); }
+  .opt__num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-background-brand); color: #fff; font-size: 0.875rem; font-weight: var(--typography-font-weight-semibold); flex-shrink: 0; }
+  .opt__name { font-size: var(--font-size-300, 1.125rem); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .opt__note { font-size: var(--font-size-100, 0.875rem); color: var(--color-content-default-tertiary); }
+  .opt__stage { padding: var(--spacing-600, 2rem); background: var(--color-background-elevation-raised, #fff); border: 1px dashed var(--bcn-gray-200); border-radius: var(--radius-400, 0.75rem); }
 
   /* ═══ Discussion (shared) ═══ */
   .disc { display: flex; flex-direction: column; gap: var(--spacing-400); }
-  .disc__head { display: flex; align-items: center; gap: var(--spacing-200); margin: 0; font-size: var(--type-size-200, 1rem); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .disc__head :global(.esa-icon) { color: var(--color-text-secondary); }
+  .disc__head { display: flex; align-items: center; gap: var(--spacing-200); margin: 0; font-size: var(--font-size-200, 1rem); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .disc__head :global(.esa-icon) { color: var(--color-content-default-secondary); }
 
   .disc-c__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
   .disc-c__meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--spacing-200); }
-  .disc-c__author { font-size: 0.875rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .disc-c__time { font-size: 0.75rem; color: var(--color-text-tertiary); }
-  .disc-c__edited { font-size: 0.75rem; font-style: italic; color: var(--color-text-tertiary); }
-  .disc-c__text { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-primary); white-space: pre-wrap; }
+  .disc-c__author { font-size: 0.875rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .disc-c__time { font-size: 0.75rem; color: var(--color-content-default-tertiary); }
+  .disc-c__edited { font-size: 0.75rem; font-style: italic; color: var(--color-content-default-tertiary); }
+  .disc-c__text { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-content-default); white-space: pre-wrap; }
 
   /* Author-only Edit/Delete — revealed on hover/focus (prod behavior). */
   .disc-c__actions { display: inline-flex; align-items: center; gap: 1px; margin-left: auto; opacity: 0; transition: opacity 120ms ease; }
@@ -199,7 +199,7 @@ const stepColor = (name: string) => STEP[name] ?? '--color-action';
   .disc-c__actions :global(.esa-icon) { width: 15px; height: 15px; }
 
   /* Compose. */
-  .disc-compose__as { display: inline-flex; align-items: center; gap: var(--spacing-150); font-size: 0.8125rem; color: var(--color-text-secondary); }
+  .disc-compose__as { display: inline-flex; align-items: center; gap: var(--spacing-150); font-size: 0.8125rem; color: var(--color-content-default-secondary); }
   .disc-compose__field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-200); }
   .disc-compose__field esa-textarea { width: 100%; }
   .disc-compose__actions { display: flex; justify-content: flex-end; }
@@ -213,6 +213,6 @@ const stepColor = (name: string) => STEP[name] ?? '--color-action';
 
   /* Avatar color = the wrapper's --_node-color (stepper token), overriding the
      lego's name-hash default. Section 2 forces a uniform teal. */
-  .disc-tl__node :global(.esa-avatar) { --_avatar-bg: var(--_node-color, var(--color-secondary)); }
-  .disc--teal .disc-tl__node :global(.esa-avatar) { --_avatar-bg: var(--color-secondary); }
+  .disc-tl__node :global(.esa-avatar) { --_avatar-bg: var(--_node-color, var(--color-background-brand-muted)); }
+  .disc--teal .disc-tl__node :global(.esa-avatar) { --_avatar-bg: var(--color-background-brand-muted); }
 </style>
diff --git a/src/pages/prototypes/due-diligence-boundary.astro b/src/pages/prototypes/due-diligence-boundary.astro
index 40b025dc..496d6813 100644
--- a/src/pages/prototypes/due-diligence-boundary.astro
+++ b/src/pages/prototypes/due-diligence-boundary.astro
@@ -59,8 +59,8 @@ const seedRing: [number, number][] = [
     ]}
   >
     <div slot="utilities">
-      <a href={withBase('/prototypes/due-diligence-siting')}><EsaButton color="ghost" appearance="outline">Cancel</EsaButton></a>
-      <span id="bd-continue"><EsaButton color="primary" icon="arrow-right">Run constraints check</EsaButton></span>
+      <a href={withBase('/prototypes/due-diligence-siting')}><EsaButton variant="ghost" appearance="outline">Cancel</EsaButton></a>
+      <span id="bd-continue"><EsaButton variant="primary" icon="arrow-right">Run constraints check</EsaButton></span>
     </div>
 
     <div class="stack" data-gap="lg">
diff --git a/src/pages/prototypes/due-diligence-constraints.astro b/src/pages/prototypes/due-diligence-constraints.astro
index 574e2beb..5beea229 100644
--- a/src/pages/prototypes/due-diligence-constraints.astro
+++ b/src/pages/prototypes/due-diligence-constraints.astro
@@ -83,37 +83,37 @@ const highRiskCount = GIS_LAYERS.filter((l) => l.risk === 'high').length;
     ]}
   >
     <div slot="utilities">
-      <span id="cx-rerun"><EsaButton color="ghost" appearance="outline" icon="rotate-ccw">Re-run</EsaButton></span>
-      <a href={withBase('/prototypes/due-diligence-report')}><EsaButton color="primary" icon="file-text">View report</EsaButton></a>
+      <span id="cx-rerun"><EsaButton variant="ghost" appearance="outline" icon="rotate-ccw">Re-run</EsaButton></span>
+      <a href={withBase('/prototypes/due-diligence-report')}><EsaButton variant="primary" icon="file-text">View report</EsaButton></a>
     </div>
 
     <div class="stack" data-gap="lg">
       <div class="grid" data-gap="md" style="--grid-min: 13rem;">
         <EsaCard>
           <div class="stack" data-gap="xs">
-            <span class="type-body-small">Layers active</span>
-            <span class="type-page-title" id="cx-layers-active">{GIS_LAYERS.filter((l) => l.defaultOn).length} / {GIS_LAYERS.length}</span>
+            <span class="typography-body-sm">Layers active</span>
+            <span class="typography-heading-lg" id="cx-layers-active">{GIS_LAYERS.filter((l) => l.defaultOn).length} / {GIS_LAYERS.length}</span>
           </div>
         </EsaCard>
         <EsaCard>
           <div class="stack" data-gap="xs">
-            <span class="type-body-small">Overlaps detected</span>
-            <span class="type-page-title">{overlapCount}</span>
-            <span class="type-body-small">across {GIS_LAYERS.filter((l) => l.features > 0).length} layers</span>
+            <span class="typography-body-sm">Overlaps detected</span>
+            <span class="typography-heading-lg">{overlapCount}</span>
+            <span class="typography-body-sm">across {GIS_LAYERS.filter((l) => l.features > 0).length} layers</span>
           </div>
         </EsaCard>
         <EsaCard>
           <div class="stack" data-gap="xs">
-            <span class="type-body-small">High-risk findings</span>
-            <span class="type-page-title" style="color: var(--color-danger);">{highRiskCount}</span>
-            <span class="type-body-small">Hazardous materials · Biological</span>
+            <span class="typography-body-sm">High-risk findings</span>
+            <span class="typography-heading-lg" style="color: var(--color-background-utility-danger);">{highRiskCount}</span>
+            <span class="typography-body-sm">Hazardous materials · Biological</span>
           </div>
         </EsaCard>
         <EsaCard>
           <div class="stack" data-gap="xs">
-            <span class="type-body-small">Permits implicated</span>
-            <span class="type-page-title">11</span>
-            <span class="type-body-small"><a href={withBase('/prototypes/due-diligence-permits')}>See matrix</a></span>
+            <span class="typography-body-sm">Permits implicated</span>
+            <span class="typography-heading-lg">11</span>
+            <span class="typography-body-sm"><a href={withBase('/prototypes/due-diligence-permits')}>See matrix</a></span>
           </div>
         </EsaCard>
       </div>
@@ -121,7 +121,7 @@ const highRiskCount = GIS_LAYERS.filter((l) => l.risk === 'high').length;
       <BcnFilterBar filtersLabel="">
         <div class="cluster" data-gap="md" slot="lead">
           <span class="cx-filter">
-            <span class="type-body-small">Basemap</span>
+            <span class="typography-body-sm">Basemap</span>
             <esa-select id="cx-basemap" size="sm"></esa-select>
           </span>
         </div>
@@ -139,19 +139,19 @@ const highRiskCount = GIS_LAYERS.filter((l) => l.risk === 'high').length;
           <div class="cx-map-shell">
             <div id="cx-map" class="cx-map"></div>
             <div class="cx-legend" id="cx-legend">
-              <div class="type-body-small cx-legend__title">Boundary</div>
+              <div class="typography-body-sm cx-legend__title">Boundary</div>
               <div class="cluster" data-gap="xs">
-                <span class="cx-legend__swatch" style="--_c: var(--color-primary, #005862);"></span>
-                <span class="type-body-small">Project site · {PROJECT.footprintAcres} ac</span>
+                <span class="cx-legend__swatch" style="--_c: var(--color-background-brand, #005862);"></span>
+                <span class="typography-body-sm">Project site · {PROJECT.footprintAcres} ac</span>
               </div>
-              <div class="type-body-small cx-legend__title">Active overlays</div>
+              <div class="typography-body-sm cx-legend__title">Active overlays</div>
               <div id="cx-legend-overlays" class="stack" data-gap="xs"></div>
             </div>
           </div>
 
           <BcnFindingList findings={findingRows} subtitle={`${findingRows.length} findings · ${highRiskCount} high risk`}>
             <Fragment slot="actions">
-              <span id="cx-export-findings"><EsaButton color="ghost" appearance="outline" size="sm" icon="download">Export</EsaButton></span>
+              <span id="cx-export-findings"><EsaButton variant="ghost" appearance="outline" size="sm" icon="download">Export</EsaButton></span>
             </Fragment>
           </BcnFindingList>
         </div>
@@ -164,27 +164,27 @@ const highRiskCount = GIS_LAYERS.filter((l) => l.risk === 'high').length;
   <!-- Finding / layer detail drawer — reached from both the layer panel and the finding list -->
   <esa-side-dialog id="cx-drawer" size="md" style="--_width: 560px;">
     <div slot="header" class="stack" data-gap="xs">
-      <span class="type-body-small" id="cx-d-cat">—</span>
-      <span class="type-card-title" id="cx-d-name">—</span>
+      <span class="typography-body-sm" id="cx-d-cat">—</span>
+      <span class="typography-title" id="cx-d-name">—</span>
     </div>
     <div class="stack" data-gap="lg">
       <div class="cluster" data-gap="xs" id="cx-d-chips"></div>
       <div class="stack" data-gap="xs">
-        <span class="type-body-small cx-d-label">Data source</span>
-        <span class="type-body" id="cx-d-source"></span>
+        <span class="typography-body-sm cx-d-label">Data source</span>
+        <span class="typography-body-md" id="cx-d-source"></span>
       </div>
       <div class="stack" data-gap="xs">
-        <span class="type-body-small cx-d-label">Intersection result</span>
+        <span class="typography-body-sm cx-d-label">Intersection result</span>
         <dl class="cx-kv" id="cx-d-kv"></dl>
       </div>
       <div class="stack" data-gap="xs">
-        <span class="type-body-small cx-d-label">Recommended next steps</span>
+        <span class="typography-body-sm cx-d-label">Recommended next steps</span>
         <ul class="cx-d-next" id="cx-d-next"></ul>
       </div>
     </div>
     <div slot="footer" class="repel">
-      <span id="cx-d-flag"><EsaButton color="ghost" appearance="outline">Flag for permit matrix</EsaButton></span>
-      <span id="cx-d-add"><EsaButton color="primary">Add to report</EsaButton></span>
+      <span id="cx-d-flag"><EsaButton variant="ghost" appearance="outline">Flag for permit matrix</EsaButton></span>
+      <span id="cx-d-add"><EsaButton variant="primary">Add to report</EsaButton></span>
     </div>
   </esa-side-dialog>
 </AppShell>
@@ -324,10 +324,10 @@ const highRiskCount = GIS_LAYERS.filter((l) => l.risk === 'high').length;
       ? rows
           .map(
             (l) =>
-              `<div class="cluster" data-gap="xs"><span class="cx-legend__swatch" style="--_c: ${l.color};"></span><span class="type-body-small">${l.name}</span></div>`,
+              `<div class="cluster" data-gap="xs"><span class="cx-legend__swatch" style="--_c: ${l.color};"></span><span class="typography-body-sm">${l.name}</span></div>`,
           )
           .join('')
-      : '<span class="type-body-small" style="color: var(--color-text-tertiary);">No overlays on</span>';
+      : '<span class="typography-body-sm" style="color: var(--color-content-default-tertiary);">No overlays on</span>';
   }
 
   function updateActiveCount() {
@@ -393,7 +393,7 @@ const highRiskCount = GIS_LAYERS.filter((l) => l.risk === 'high').length;
     position: relative;
     height: min(64vh, 560px);
     border-radius: var(--radius-200);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     overflow: hidden;
   }
   .cx-map {
@@ -405,14 +405,14 @@ const highRiskCount = GIS_LAYERS.filter((l) => l.risk === 'high').length;
     bottom: var(--spacing-300);
     left: var(--spacing-300);
     z-index: 10;
-    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
-    border: 1px solid var(--color-border);
+    background: color-mix(in srgb, var(--color-background-elevation-raised) 92%, transparent);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     padding: var(--spacing-300);
     max-width: 220px;
   }
   .cx-legend__title {
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     margin-top: var(--spacing-200);
   }
   .cx-legend__title:first-child {
@@ -433,7 +433,7 @@ const highRiskCount = GIS_LAYERS.filter((l) => l.risk === 'high').length;
   }
   .cx-d-label {
     text-transform: none;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .cx-kv {
     display: grid;
@@ -442,11 +442,11 @@ const highRiskCount = GIS_LAYERS.filter((l) => l.risk === 'high').length;
     margin: 0;
   }
   .cx-kv dt {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .cx-kv dd {
     margin: 0;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .cx-d-next {
     margin: 0;
@@ -459,12 +459,12 @@ const highRiskCount = GIS_LAYERS.filter((l) => l.risk === 'high').length;
     gap: var(--spacing-150);
     padding: 2px var(--spacing-250);
     border-radius: var(--radius-full);
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-semibold);
     white-space: nowrap;
   }
-  :global(.dd-static-chip[data-risk='high'])   { background: color-mix(in srgb, var(--color-danger) 16%, transparent); color: color-mix(in srgb, var(--color-danger) 72%, #1a1a1a); }
-  :global(.dd-static-chip[data-risk='medium']) { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: color-mix(in srgb, var(--color-warning) 72%, #1a1a1a); }
-  :global(.dd-static-chip[data-risk='low'])    { background: color-mix(in srgb, var(--color-info) 16%, transparent); color: color-mix(in srgb, var(--color-info) 72%, #1a1a1a); }
-  :global(.dd-static-chip[data-risk='none'])   { background: var(--color-surface-sunken); color: var(--color-text-secondary); }
+  :global(.dd-static-chip[data-risk='high'])   { background: color-mix(in srgb, var(--color-background-utility-danger) 16%, transparent); color: color-mix(in srgb, var(--color-background-utility-danger) 72%, #1a1a1a); }
+  :global(.dd-static-chip[data-risk='medium']) { background: color-mix(in srgb, var(--color-background-utility-warning) 16%, transparent); color: color-mix(in srgb, var(--color-background-utility-warning) 72%, #1a1a1a); }
+  :global(.dd-static-chip[data-risk='low'])    { background: color-mix(in srgb, var(--color-background-utility-info) 16%, transparent); color: color-mix(in srgb, var(--color-background-utility-info) 72%, #1a1a1a); }
+  :global(.dd-static-chip[data-risk='none'])   { background: var(--color-background-elevation-sunken); color: var(--color-content-default-secondary); }
 </style>
diff --git a/src/pages/prototypes/due-diligence-overview.astro b/src/pages/prototypes/due-diligence-overview.astro
index ca100eed..edbc6bfe 100644
--- a/src/pages/prototypes/due-diligence-overview.astro
+++ b/src/pages/prototypes/due-diligence-overview.astro
@@ -111,8 +111,8 @@ const steps: DueDiligenceStep[] = [
       <EsaBadge variant="info">Due Diligence</EsaBadge>
     </div>
     <div slot="utilities">
-      <span id="ov-export"><EsaButton color="ghost" appearance="outline" icon="download">Export</EsaButton></span>
-      <a href={withBase('/prototypes/due-diligence-report')}><EsaButton color="primary" icon="file-text">Open report</EsaButton></a>
+      <span id="ov-export"><EsaButton variant="ghost" appearance="outline" icon="download">Export</EsaButton></span>
+      <a href={withBase('/prototypes/due-diligence-report')}><EsaButton variant="primary" icon="file-text">Open report</EsaButton></a>
     </div>
 
     <div class="stack" data-gap="xl">
@@ -140,8 +140,8 @@ const steps: DueDiligenceStep[] = [
                 <div class="cluster" data-gap="sm">
                   <EsaAvatar name={member.name} size="sm" />
                   <div class="stack" data-gap="none">
-                    <span class="type-body" style="font-weight: var(--font-weight-semibold);">{member.name}</span>
-                    <span class="type-body-small" style="color: var(--color-text-tertiary);">{member.role}</span>
+                    <span class="typography-body-md" style="font-weight: var(--typography-font-weight-semibold);">{member.name}</span>
+                    <span class="typography-body-sm" style="color: var(--color-content-default-tertiary);">{member.role}</span>
                   </div>
                 </div>
               ))}
@@ -152,7 +152,7 @@ const steps: DueDiligenceStep[] = [
         <div class="stack" data-gap="md">
           <EsaCard title="Critical issues" subtitle="Headline issues that may impact feasibility, schedule, or cost">
             <Fragment slot="actions">
-              <a href={withBase('/prototypes/due-diligence-report')}><EsaButton color="ghost" size="sm">Open report</EsaButton></a>
+              <a href={withBase('/prototypes/due-diligence-report')}><EsaButton variant="ghost" size="sm">Open report</EsaButton></a>
             </Fragment>
             <ul class="ov-issue-list">
               {CRITICAL_ISSUES.map((issue) => <li>{issue}</li>)}
@@ -161,7 +161,7 @@ const steps: DueDiligenceStep[] = [
 
           <EsaCard title="Findings by severity" subtitle="Auto-derived from the current GIS data sync">
             <Fragment slot="actions">
-              <a href={withBase('/prototypes/due-diligence-constraints')}><EsaButton color="ghost" size="sm">Open constraints</EsaButton></a>
+              <a href={withBase('/prototypes/due-diligence-constraints')}><EsaButton variant="ghost" size="sm">Open constraints</EsaButton></a>
             </Fragment>
             <div class="grid" data-gap="md" style="--grid-min: 12rem;">
               {findingsBySeverity.map((f) => (
@@ -175,7 +175,7 @@ const steps: DueDiligenceStep[] = [
                     showValue={false}
                     variant={f.risk === 'high' ? 'danger' : f.risk === 'medium' ? 'warning' : f.risk === 'low' ? 'primary' : 'primary'}
                   />
-                  <span class="type-body-small" style="color: var(--color-text-tertiary);">{f.names.join(' · ') || 'None'}</span>
+                  <span class="typography-body-sm" style="color: var(--color-content-default-tertiary);">{f.names.join(' · ') || 'None'}</span>
                 </div>
               ))}
             </div>
@@ -221,8 +221,8 @@ const steps: DueDiligenceStep[] = [
     align-items: flex-start;
     gap: var(--spacing-300);
     padding: var(--spacing-300) 0;
-    border-bottom: 1px solid var(--color-border-light);
-    font-size: var(--type-size-300);
+    border-bottom: 1px solid var(--color-border-default-subtle);
+    font-size: var(--font-size-300);
   }
   .ov-activity li:last-child {
     border-bottom: none;
@@ -231,7 +231,7 @@ const steps: DueDiligenceStep[] = [
     width: 8px;
     height: 8px;
     border-radius: var(--radius-full);
-    background: var(--color-primary);
+    background: var(--color-background-brand);
     margin-top: 8px;
     flex-shrink: 0;
   }
@@ -239,8 +239,8 @@ const steps: DueDiligenceStep[] = [
     flex: 1;
   }
   .ov-activity__time {
-    color: var(--color-text-tertiary);
-    font-size: var(--type-size-200);
+    color: var(--color-content-default-tertiary);
+    font-size: var(--font-size-200);
     white-space: nowrap;
   }
 </style>
diff --git a/src/pages/prototypes/due-diligence-permits.astro b/src/pages/prototypes/due-diligence-permits.astro
index fd9bcb40..d69932e0 100644
--- a/src/pages/prototypes/due-diligence-permits.astro
+++ b/src/pages/prototypes/due-diligence-permits.astro
@@ -55,38 +55,38 @@ import { dueDiligenceNavSections } from '../../lib/due-diligence-nav';
     ]}
   >
     <div slot="utilities">
-      <span id="pm-excel"><EsaButton color="ghost" appearance="outline" icon="download">Export to Excel</EsaButton></span>
-      <a href={withBase('/prototypes/due-diligence-report')}><EsaButton color="primary" icon="arrow-right">View report</EsaButton></a>
+      <span id="pm-excel"><EsaButton variant="ghost" appearance="outline" icon="download">Export to Excel</EsaButton></span>
+      <a href={withBase('/prototypes/due-diligence-report')}><EsaButton variant="primary" icon="arrow-right">View report</EsaButton></a>
     </div>
 
     <div class="stack" data-gap="lg">
       <div class="grid" data-gap="md" style="--grid-min: 14rem;">
         <EsaCard>
           <div class="stack" data-gap="xs">
-            <span class="type-body-small">Permits identified</span>
-            <span class="type-page-title">{PERMITS.length}</span>
-            <span class="type-body-small">{PERMITS.filter((p) => p.applicability === 'applicable').length} applicable · {PERMITS.filter((p) => p.applicability === 'potentially').length} potentially</span>
+            <span class="typography-body-sm">Permits identified</span>
+            <span class="typography-heading-lg">{PERMITS.length}</span>
+            <span class="typography-body-sm">{PERMITS.filter((p) => p.applicability === 'applicable').length} applicable · {PERMITS.filter((p) => p.applicability === 'potentially').length} potentially</span>
           </div>
         </EsaCard>
         <EsaCard>
           <div class="stack" data-gap="xs">
-            <span class="type-body-small">Local</span>
-            <span class="type-page-title">{PERMITS.filter((p) => p.level === 'Local').length}</span>
-            <span class="type-body-small">Kern County departments</span>
+            <span class="typography-body-sm">Local</span>
+            <span class="typography-heading-lg">{PERMITS.filter((p) => p.level === 'Local').length}</span>
+            <span class="typography-body-sm">Kern County departments</span>
           </div>
         </EsaCard>
         <EsaCard>
           <div class="stack" data-gap="xs">
-            <span class="type-body-small">State / Regional</span>
-            <span class="type-page-title">{PERMITS.filter((p) => p.level === 'State' || p.level === 'Regional').length}</span>
-            <span class="type-body-small">CDFW · SWRCB · KCAPCD</span>
+            <span class="typography-body-sm">State / Regional</span>
+            <span class="typography-heading-lg">{PERMITS.filter((p) => p.level === 'State' || p.level === 'Regional').length}</span>
+            <span class="typography-body-sm">CDFW · SWRCB · KCAPCD</span>
           </div>
         </EsaCard>
         <EsaCard>
           <div class="stack" data-gap="xs">
-            <span class="type-body-small">Federal &amp; Utility</span>
-            <span class="type-page-title">{PERMITS.filter((p) => p.level === 'Federal' || p.level === 'Utility').length}</span>
-            <span class="type-body-small">USACE · USFWS · SCE</span>
+            <span class="typography-body-sm">Federal &amp; Utility</span>
+            <span class="typography-heading-lg">{PERMITS.filter((p) => p.level === 'Federal' || p.level === 'Utility').length}</span>
+            <span class="typography-body-sm">USACE · USFWS · SCE</span>
           </div>
         </EsaCard>
       </div>
@@ -120,8 +120,8 @@ import { dueDiligenceNavSections } from '../../lib/due-diligence-nav';
           <div class="grid" data-gap="md" style="--grid-min: 20rem;">
             {AHJ_NOTES.map((n) => (
               <EsaCard title={n.topic}>
-                <Fragment slot="actions"><span class="type-body-small">Assistant draft</span></Fragment>
-                <p class="type-body-small">{n.summary}</p>
+                <Fragment slot="actions"><span class="typography-body-sm">Assistant draft</span></Fragment>
+                <p class="typography-body-sm">{n.summary}</p>
               </EsaCard>
             ))}
           </div>
@@ -137,12 +137,12 @@ import { dueDiligenceNavSections } from '../../lib/due-diligence-nav';
        of who changed what and when, and a free-text comments thread. -->
   <esa-side-dialog id="pm-drawer" size="md" style="--_width: 560px;">
     <div slot="header" class="stack" data-gap="xs">
-      <span class="type-body-small" id="pm-d-level">—</span>
-      <span class="type-card-title" id="pm-d-name">—</span>
+      <span class="typography-body-sm" id="pm-d-level">—</span>
+      <span class="typography-title" id="pm-d-name">—</span>
     </div>
     <div class="stack" data-gap="lg">
       <div class="stack" data-gap="xs">
-        <span class="type-body-small pm-d-label">Details</span>
+        <span class="typography-body-sm pm-d-label">Details</span>
         <dl class="pm-kv">
           <dt>Agency</dt><dd id="pm-d-agency">—</dd>
           <dt>Requirement</dt><dd id="pm-d-requirement">—</dd>
@@ -151,31 +151,31 @@ import { dueDiligenceNavSections } from '../../lib/due-diligence-nav';
       </div>
 
       <div class="stack" data-gap="md">
-        <span class="type-body-small pm-d-label">Status</span>
+        <span class="typography-body-sm pm-d-label">Status</span>
         <esa-select id="pm-d-applicability" label="Applicable?" size="md"></esa-select>
         <esa-select id="pm-d-review" label="Review status" size="md"></esa-select>
       </div>
 
       <div class="stack" data-gap="xs">
-        <span class="type-body-small pm-d-label">Activity</span>
+        <span class="typography-body-sm pm-d-label">Activity</span>
         <ul class="pm-activity" id="pm-d-activity"></ul>
       </div>
 
       <div class="stack" data-gap="xs">
-        <span class="type-body-small pm-d-label">Comments</span>
+        <span class="typography-body-sm pm-d-label">Comments</span>
         <ul class="pm-comments" id="pm-d-comments"></ul>
         <div class="stack" data-gap="xs">
           <esa-textarea id="pm-d-comment-input" rows="2" placeholder="Add a note…"></esa-textarea>
           <div class="repel">
-            <span class="type-body-small" style="color: var(--color-text-tertiary);">Posting as {PROJECT.team[0].name}</span>
-            <span id="pm-d-post"><EsaButton color="primary" size="sm">Post</EsaButton></span>
+            <span class="typography-body-sm" style="color: var(--color-content-default-tertiary);">Posting as {PROJECT.team[0].name}</span>
+            <span id="pm-d-post"><EsaButton variant="primary" size="sm">Post</EsaButton></span>
           </div>
         </div>
       </div>
     </div>
     <div slot="footer" class="cluster" data-justify="end">
-      <span id="pm-d-save"><EsaButton color="primary">Save</EsaButton></span>
-      <span id="pm-d-cancel"><EsaButton color="ghost" appearance="outline">Cancel</EsaButton></span>
+      <span id="pm-d-save"><EsaButton variant="primary">Save</EsaButton></span>
+      <span id="pm-d-cancel"><EsaButton variant="ghost" appearance="outline">Cancel</EsaButton></span>
     </div>
   </esa-side-dialog>
 </AppShell>
@@ -469,7 +469,7 @@ import { dueDiligenceNavSections } from '../../lib/due-diligence-nav';
     padding-block: var(--spacing-200) !important;
   }
   :global(.dd-chip) {
-    --_tone: var(--color-text-muted, #8a9099);
+    --_tone: var(--bcn-content-muted, #8a9099);
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-150);
@@ -477,10 +477,10 @@ import { dueDiligenceNavSections } from '../../lib/due-diligence-nav';
     border-radius: var(--radius-100);
     font-size: 0.8125rem;
     line-height: 1.5;
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--typography-font-weight-medium);
     white-space: nowrap;
     background: color-mix(in srgb, var(--_tone) 16%, transparent);
-    color: color-mix(in srgb, var(--_tone) 70%, var(--color-text-primary));
+    color: color-mix(in srgb, var(--_tone) 70%, var(--color-content-default));
   }
   :global(.dd-chip::before) {
     content: '';
@@ -490,21 +490,21 @@ import { dueDiligenceNavSections } from '../../lib/due-diligence-nav';
     background: var(--_tone);
     flex-shrink: 0;
   }
-  :global(.dd-chip[data-tone='applicable'])     { --_tone: var(--color-warning, #f59e0b); }
-  :global(.dd-chip[data-tone='potentially'])    { --_tone: var(--color-info, #228be6); }
-  :global(.dd-chip[data-tone='not-likely'])     { --_tone: var(--color-success, #2e7571); }
-  :global(.dd-chip[data-tone='not-applicable']) { --_tone: var(--color-text-muted, #8a9099); }
-  :global(.dd-chip[data-tone='High'])           { --_tone: var(--color-danger, #e5484d); }
-  :global(.dd-chip[data-tone='Med'])            { --_tone: var(--color-warning, #f59e0b); }
-  :global(.dd-chip[data-tone='Low'])            { --_tone: var(--color-info, #228be6); }
-  :global(.dd-chip[data-tone='—'])              { --_tone: var(--color-text-muted, #8a9099); }
-  :global(.dd-chip[data-tone='preliminary'])    { --_tone: var(--color-text-muted, #8a9099); }
-  :global(.dd-chip[data-tone='confirmed'])      { --_tone: var(--color-success, #2e7571); }
+  :global(.dd-chip[data-tone='applicable'])     { --_tone: var(--color-background-utility-warning, #f59e0b); }
+  :global(.dd-chip[data-tone='potentially'])    { --_tone: var(--color-background-utility-info, #228be6); }
+  :global(.dd-chip[data-tone='not-likely'])     { --_tone: var(--color-background-utility-success, #2e7571); }
+  :global(.dd-chip[data-tone='not-applicable']) { --_tone: var(--bcn-content-muted, #8a9099); }
+  :global(.dd-chip[data-tone='High'])           { --_tone: var(--color-background-utility-danger, #e5484d); }
+  :global(.dd-chip[data-tone='Med'])            { --_tone: var(--color-background-utility-warning, #f59e0b); }
+  :global(.dd-chip[data-tone='Low'])            { --_tone: var(--color-background-utility-info, #228be6); }
+  :global(.dd-chip[data-tone='—'])              { --_tone: var(--bcn-content-muted, #8a9099); }
+  :global(.dd-chip[data-tone='preliminary'])    { --_tone: var(--bcn-content-muted, #8a9099); }
+  :global(.dd-chip[data-tone='confirmed'])      { --_tone: var(--color-background-utility-success, #2e7571); }
 
   /* Permit editor drawer — read-only details, and the two log lists (activity +
      comments) that share one row shape (text line + a by/when meta line). */
   .pm-d-label {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .pm-kv {
     display: grid;
@@ -514,11 +514,11 @@ import { dueDiligenceNavSections } from '../../lib/due-diligence-nav';
     padding-left: var(--spacing-300);
   }
   .pm-kv dt {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .pm-kv dd {
     margin: 0;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .pm-activity,
   .pm-comments {
@@ -532,14 +532,14 @@ import { dueDiligenceNavSections } from '../../lib/due-diligence-nav';
   }
   :global(.pm-log__text) {
     margin: 0;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   :global(.pm-log__meta) {
-    color: var(--color-text-tertiary);
-    font-size: var(--type-size-150);
+    color: var(--color-content-default-tertiary);
+    font-size: var(--font-size-150);
   }
   :global(.pm-log__empty) {
-    color: var(--color-text-tertiary);
-    font-size: var(--type-size-200);
+    color: var(--color-content-default-tertiary);
+    font-size: var(--font-size-200);
   }
 </style>
diff --git a/src/pages/prototypes/due-diligence-report.astro b/src/pages/prototypes/due-diligence-report.astro
index 7781454d..dfbaaedf 100644
--- a/src/pages/prototypes/due-diligence-report.astro
+++ b/src/pages/prototypes/due-diligence-report.astro
@@ -126,7 +126,7 @@ const permitRows: CiaPermitRow[] = PERMITS.map((p) => ({
         liveMatrixHref={withBase('/prototypes/due-diligence-permits')}
       >
         <Fragment slot="actions">
-          <span id="cia-advance"><EsaButton color="primary" icon="arrow-right">Advance to Planning &amp; Permitting</EsaButton></span>
+          <span id="cia-advance"><EsaButton variant="primary" icon="arrow-right">Advance to Planning &amp; Permitting</EsaButton></span>
         </Fragment>
       </BcnCiaReport>
     </div>
diff --git a/src/pages/prototypes/due-diligence-siting.astro b/src/pages/prototypes/due-diligence-siting.astro
index c22ef3e2..be3db820 100644
--- a/src/pages/prototypes/due-diligence-siting.astro
+++ b/src/pages/prototypes/due-diligence-siting.astro
@@ -79,23 +79,23 @@ const observations = rows.map((r) => ({
       <div class="grid" data-gap="md" style="--grid-min: 14rem;">
         <EsaCard>
           <div class="stack" data-gap="xs">
-            <span class="type-body-small">Candidates screened</span>
-            <span class="type-page-title">{rows.length}</span>
-            <span class="type-body-small">Five acquisition criteria each</span>
+            <span class="typography-body-sm">Candidates screened</span>
+            <span class="typography-heading-lg">{rows.length}</span>
+            <span class="typography-body-sm">Five acquisition criteria each</span>
           </div>
         </EsaCard>
         <EsaCard>
           <div class="stack" data-gap="xs">
-            <span class="type-body-small">Passed all criteria</span>
-            <span class="type-page-title" style="color: var(--color-success);">{passedCount}</span>
-            <span class="type-body-small">Eligible to advance</span>
+            <span class="typography-body-sm">Passed all criteria</span>
+            <span class="typography-heading-lg" style="color: var(--color-background-utility-success);">{passedCount}</span>
+            <span class="typography-body-sm">Eligible to advance</span>
           </div>
         </EsaCard>
         <EsaCard>
           <div class="stack" data-gap="xs">
-            <span class="type-body-small">Advancing to due diligence</span>
-            <span class="type-page-title">{advanced.codeName}</span>
-            <span class="type-body-small">{advanced.county} · {advanced.acres} ac</span>
+            <span class="typography-body-sm">Advancing to due diligence</span>
+            <span class="typography-heading-lg">{advanced.codeName}</span>
+            <span class="typography-body-sm">{advanced.county} · {advanced.acres} ac</span>
           </div>
         </EsaCard>
       </div>
@@ -119,22 +119,22 @@ const observations = rows.map((r) => ({
   <!-- Candidate profile drawer — the criteria checklist + facts + the Advance CTA -->
   <esa-side-dialog id="stg-drawer" size="md" style="--_width: 520px;">
     <div slot="header" class="stack" data-gap="xs">
-      <span class="type-body-small" id="stg-d-region">—</span>
-      <span class="type-card-title" id="stg-d-name">—</span>
+      <span class="typography-body-sm" id="stg-d-region">—</span>
+      <span class="typography-title" id="stg-d-name">—</span>
     </div>
     <div class="stack" data-gap="lg">
       <div class="stack" data-gap="xs">
-        <span class="type-body-small stg-d-label">Acquisition criteria</span>
+        <span class="typography-body-sm stg-d-label">Acquisition criteria</span>
         <ul class="stg-checklist" id="stg-d-checklist"></ul>
       </div>
       <div class="stack" data-gap="xs">
-        <span class="type-body-small stg-d-label">Property facts</span>
+        <span class="typography-body-sm stg-d-label">Property facts</span>
         <dl class="stg-kv" id="stg-d-facts"></dl>
       </div>
-      <p class="type-body-small" id="stg-d-reason" hidden></p>
+      <p class="typography-body-sm" id="stg-d-reason" hidden></p>
     </div>
     <div slot="footer">
-      <span id="stg-d-advance"><EsaButton color="primary" icon="arrow-right">Advance to Due Diligence</EsaButton></span>
+      <span id="stg-d-advance"><EsaButton variant="primary" icon="arrow-right">Advance to Due Diligence</EsaButton></span>
     </div>
   </esa-side-dialog>
 </AppShell>
@@ -345,13 +345,13 @@ const observations = rows.map((r) => ({
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--typography-font-weight-bold);
   }
   :global(.stg-check[data-pass='true']) {
-    color: var(--color-success);
+    color: var(--color-background-utility-success);
   }
   :global(.stg-check[data-pass='false']) {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   :global(.stg-result) {
     display: inline-flex;
@@ -359,18 +359,18 @@ const observations = rows.map((r) => ({
     padding: 2px var(--spacing-250);
     border-radius: var(--radius-100);
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
   }
   :global(.stg-result[data-pass='true']) {
-    background: color-mix(in srgb, var(--color-success) 16%, transparent);
-    color: color-mix(in srgb, var(--color-success) 72%, #1a1a1a);
+    background: color-mix(in srgb, var(--color-background-utility-success) 16%, transparent);
+    color: color-mix(in srgb, var(--color-background-utility-success) 72%, #1a1a1a);
   }
   :global(.stg-result[data-pass='false']) {
-    background: var(--color-surface-sunken);
-    color: var(--color-text-secondary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-content-default-secondary);
   }
   .stg-d-label {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .stg-checklist {
     list-style: none;
@@ -394,10 +394,10 @@ const observations = rows.map((r) => ({
     padding-left: var(--spacing-300);
   }
   .stg-kv dt {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .stg-kv dd {
     margin: 0;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
 </style>
diff --git a/src/pages/prototypes/fish-detail/[id].astro b/src/pages/prototypes/fish-detail/[id].astro
index 7a29c2cc..21aa1bb8 100644
--- a/src/pages/prototypes/fish-detail/[id].astro
+++ b/src/pages/prototypes/fish-detail/[id].astro
@@ -260,11 +260,11 @@ const detailJson = JSON.stringify({ node });
       <span class="bcn-fdetail__chip" data-chip="id">{node.id}</span>
     </span>
     <div slot="utilities" class="bcn-fdetail__utils">
-      <span data-rec-edit><EsaButton color="ghost" appearance="outline" size="sm" icon="pencil">Edit record</EsaButton></span>
+      <span data-rec-edit><EsaButton variant="ghost" appearance="outline" size="sm" icon="pencil">Edit record</EsaButton></span>
       {isStudy && profile?.sketch && (
-        <EsaButton color="ghost" appearance="outline" size="sm" icon="file-text">Generate sketch (.docx)</EsaButton>
+        <EsaButton variant="ghost" appearance="outline" size="sm" icon="file-text">Generate sketch (.docx)</EsaButton>
       )}
-      {isStudy && <EsaButton color="primary" size="sm" icon="upload">Submit for CDFW review</EsaButton>}
+      {isStudy && <EsaButton variant="primary" size="sm" icon="upload">Submit for CDFW review</EsaButton>}
     </div>
 
     <!-- bcn-lego-checked: PAGE-COMPOSITION GLUE ONLY — the KPI strip wraps esa-stat
@@ -451,8 +451,8 @@ const detailJson = JSON.stringify({ node });
       )}
     </div>
     <span slot="footer" class="bcn-adr-foot">
-      <span data-rd-cancel><EsaButton color="ghost" appearance="outline">Cancel</EsaButton></span>
-      <span data-rd-save><EsaButton color="primary">Save record</EsaButton></span>
+      <span data-rd-cancel><EsaButton variant="ghost" appearance="outline">Cancel</EsaButton></span>
+      <span data-rd-save><EsaButton variant="primary">Save record</EsaButton></span>
     </span>
   </esa-side-dialog>
 
@@ -474,8 +474,8 @@ const detailJson = JSON.stringify({ node });
         <BcnRolesRepeater />
       </div>
       <span slot="footer" class="bcn-adr-foot">
-        <span data-adr-cancel><EsaButton color="ghost" appearance="outline">Cancel</EsaButton></span>
-        <span data-adr-save><EsaButton color="primary">Save assignments</EsaButton></span>
+        <span data-adr-cancel><EsaButton variant="ghost" appearance="outline">Cancel</EsaButton></span>
+        <span data-adr-save><EsaButton variant="primary">Save assignments</EsaButton></span>
       </span>
     </esa-side-dialog>
   )}
@@ -768,9 +768,9 @@ const detailJson = JSON.stringify({ node });
     flex-wrap: wrap;
   }
   .bcn-fdetail__chip {
-    font-family: var(--font-mono);
+    font-family: var(--typography-font-family-mono);
     font-size: 0.6875rem; /* adherence-allow: font-too-small — matches the gantt's Andy-sanctioned 11px ID badges */
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     color: var(--color-commitment);
     background: color-mix(in srgb, var(--color-commitment) 12%, white);
     padding: 2px var(--spacing-200);
@@ -818,8 +818,8 @@ const detailJson = JSON.stringify({ node });
     gap: var(--spacing-150);
   }
   .bcn-fdetail__kv-label {
-    font-size: var(--form-font-size-md);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--typography-label-md-font-size);
+    font-weight: var(--typography-font-weight-medium);
     color: var(--form-label-color);
   }
   .bcn-fdetail__chips {
@@ -828,32 +828,32 @@ const detailJson = JSON.stringify({ node });
     gap: var(--spacing-150);
   }
   .bcn-fdetail__empty {
-    font-size: var(--type-size-100);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-100);
+    color: var(--color-content-default-tertiary);
     font-style: italic;
   }
   .bcn-fdetail__coa-link,
   .bcn-fdetail__coa-ref {
     display: inline-flex;
     align-items: center;
-    font-family: var(--font-mono);
+    font-family: var(--typography-font-family-mono);
     font-size: 0.75rem;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     padding: 1px var(--spacing-200);
     border-radius: var(--radius-100);
-    background: var(--color-surface-sunken);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-sunken);
+    border: 1px solid var(--color-border-default);
   }
   .bcn-fdetail__coa-link {
-    color: var(--color-primary);
+    color: var(--color-background-brand);
     text-decoration: none;
   }
   .bcn-fdetail__coa-link:hover {
-    background: var(--color-primary-subtle);
-    border-color: var(--color-primary-border);
+    background: var(--color-background-brand-subtle);
+    border-color: var(--color-border-brand);
   }
   .bcn-fdetail__coa-ref {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .bcn-fdetail__deliv {
     list-style: none;
@@ -870,8 +870,8 @@ const detailJson = JSON.stringify({ node });
     gap: var(--spacing-200);
   }
   .bcn-fdetail__deliv-name {
-    font-size: var(--type-size-100);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-100);
+    color: var(--color-content-default);
   }
 
   @media (max-width: 980px) {
@@ -893,17 +893,17 @@ const detailJson = JSON.stringify({ node });
     display: inline-flex;
     align-items: baseline;
     gap: var(--spacing-150);
-    font-size: var(--type-size-150);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default);
     text-decoration: none;
   }
   .fd-plansec a:hover {
     text-decoration: underline;
   }
   .fd-plansec__num {
-    font-family: var(--font-mono);
-    font-size: var(--type-size-100);
-    color: var(--color-text-tertiary);
+    font-family: var(--typography-font-family-mono);
+    font-size: var(--font-size-100);
+    color: var(--color-content-default-tertiary);
   }
 
   /* ── Edit-record drawer fields ── */
@@ -918,8 +918,8 @@ const detailJson = JSON.stringify({ node });
     gap: var(--spacing-200);
   }
   .bcn-rd-funding__label {
-    font-size: var(--form-label-font-size, var(--form-font-size-sm, 12px));
-    font-weight: var(--form-label-font-weight, var(--font-weight-medium));
+    font-size: var(--typography-label-md-font-size, var(--typography-label-xs-font-size, 12px));
+    font-weight: var(--typography-label-md-font-weight, var(--typography-font-weight-medium));
     color: var(--form-label-color);
   }
   .bcn-rd-funding__row {
@@ -929,20 +929,20 @@ const detailJson = JSON.stringify({ node });
     gap: var(--spacing-300);
   }
   .bcn-rd-funding__wy {
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
   }
   /* Drawer field consistency: the status select's md-styled trigger/label sized
      down to the sm scale every other drawer control uses. */
   #record-drawer :global(.bcn-status-select__trigger) {
     height: 32px;
     padding: 0 var(--spacing-200);
-    font-size: var(--form-font-size-sm, 12px);
-    font-weight: var(--font-weight-regular);
+    font-size: var(--typography-label-xs-font-size, 12px);
+    font-weight: var(--typography-font-weight-regular);
   }
   #record-drawer :global(.bcn-status-select__label) {
-    font-size: var(--form-label-font-size, var(--form-font-size-sm, 12px));
-    font-weight: var(--form-label-font-weight, var(--font-weight-medium));
+    font-size: var(--typography-label-md-font-size, var(--typography-label-xs-font-size, 12px));
+    font-weight: var(--typography-label-md-font-weight, var(--typography-font-weight-medium));
     color: var(--form-label-color);
   }
 
@@ -953,18 +953,18 @@ const detailJson = JSON.stringify({ node });
     gap: var(--spacing-250);
   }
   .bcn-adr-head__id {
-    font-family: var(--font-mono);
+    font-family: var(--typography-font-family-mono);
     font-size: 0.6875rem; /* adherence-allow: font-too-small — matches the sanctioned 11px ID badges */
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     color: var(--color-commitment);
     background: color-mix(in srgb, var(--color-commitment) 12%, white);
     padding: 1px 5px;
     border-radius: var(--radius-100);
   }
   .bcn-adr-head__title {
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .bcn-adr-body {
     display: flex;
diff --git a/src/pages/prototypes/fish-gantt.astro b/src/pages/prototypes/fish-gantt.astro
index 82361187..1a2ed212 100644
--- a/src/pages/prototypes/fish-gantt.astro
+++ b/src/pages/prototypes/fish-gantt.astro
@@ -276,7 +276,7 @@ const fishNav = [
     <div slot="utilities" class="bcn-gantt-utils">
       <esa-button-toggle id="gantt-view" value="gantt" size="md"></esa-button-toggle>
       <esa-dropdown-menu id="export-menu" position="below-end">
-        <span id="export-trigger"><EsaButton color="ghost" appearance="outline">Export</EsaButton></span>
+        <span id="export-trigger"><EsaButton variant="ghost" appearance="outline">Export</EsaButton></span>
       </esa-dropdown-menu>
     </div>
 
@@ -347,8 +347,8 @@ const fishNav = [
     </div>
 
     <span slot="footer" class="bcn-node-foot">
-      <span id="node-delete"><EsaButton color="danger" appearance="soft" icon="trash-2">Delete</EsaButton></span>
-      <span id="node-close"><EsaButton color="primary">Close</EsaButton></span>
+      <span id="node-delete"><EsaButton variant="danger" appearance="soft" icon="trash-2">Delete</EsaButton></span>
+      <span id="node-close"><EsaButton variant="primary">Close</EsaButton></span>
     </span>
   </esa-side-dialog>
 
@@ -393,8 +393,8 @@ const fishNav = [
     </div>
 
     <span slot="footer" class="bcn-create-foot">
-      <span id="create-cancel"><EsaButton color="ghost" appearance="outline">Cancel</EsaButton></span>
-      <span id="create-submit"><EsaButton color="primary" disabled>Create</EsaButton></span>
+      <span id="create-cancel"><EsaButton variant="ghost" appearance="outline">Cancel</EsaButton></span>
+      <span id="create-submit"><EsaButton variant="primary" disabled>Create</EsaButton></span>
     </span>
   </esa-side-dialog>
 
@@ -410,8 +410,8 @@ const fishNav = [
       <BcnRolesRepeater />
     </div>
     <span slot="footer" class="bcn-roles-edit-foot">
-      <span id="roles-drawer-cancel"><EsaButton color="ghost" appearance="outline">Cancel</EsaButton></span>
-      <span id="roles-drawer-save"><EsaButton color="primary">Save roles</EsaButton></span>
+      <span id="roles-drawer-cancel"><EsaButton variant="ghost" appearance="outline">Cancel</EsaButton></span>
+      <span id="roles-drawer-save"><EsaButton variant="primary">Save roles</EsaButton></span>
     </span>
   </esa-side-dialog>
 </AppShell>
@@ -872,13 +872,13 @@ const fishNav = [
      Every section resolves to a component (see manifest). Checked esa-* (no 4-tier
      gantt lego, no node-panel lego) and Beacon. The only bespoke CSS is drawer chrome
      + create-form stacking glue and the two esa-side-dialog stacking knobs (--side-
-     dialog-inset / --color-backdrop). No reinvented primitive; no raw form control. */
+     dialog-inset / --color-background-overlay-backdrop). No reinvented primitive; no raw form control. */
 
 
 
   .bcn-node-head { display: flex; align-items: center; gap: var(--spacing-200); flex-wrap: wrap; min-width: 0; }
-  .bcn-node-head__id { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); padding: 1px var(--spacing-200); border-radius: var(--radius-100); }
-  .bcn-node-head__title { font-family: var(--font-decorative); font-size: 1.125rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); line-height: 1.25; min-width: 0; }
+  .bcn-node-head__id { flex-shrink: 0; font-family: var(--typography-font-family-mono); font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); padding: 1px var(--spacing-200); border-radius: var(--radius-100); }
+  .bcn-node-head__title { font-family: var(--font-decorative); font-size: 1.125rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); line-height: 1.25; min-width: 0; }
 
   /* The edit form fills the drawer body so the actions row sits at the bottom. */
   .bcn-node-body { display: flex; flex-direction: column; min-height: 100%; }
@@ -890,11 +890,11 @@ const fishNav = [
 
   /* ── Stacked create drawer (a small, tier-aware create form) ── */
   .bcn-create-head { display: flex; align-items: center; gap: var(--spacing-200); min-width: 0; }
-  .bcn-create-head__title { font-family: var(--font-decorative); font-size: 1.125rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); line-height: 1.25; min-width: 0; }
+  .bcn-create-head__title { font-family: var(--font-decorative); font-size: 1.125rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); line-height: 1.25; min-width: 0; }
 
   .bcn-create { display: flex; flex-direction: column; gap: var(--spacing-400); }
   .bcn-create__section { display: flex; flex-direction: column; gap: var(--spacing-300); }
-  .bcn-create__label { font-size: var(--form-font-size-md, 0.9375rem); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
+  .bcn-create__label { font-size: var(--typography-label-md-font-size, 0.9375rem); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-secondary); }
   .bcn-create__sched-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-200) var(--spacing-300); }
 
   .bcn-create-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-200); width: 100%; }
@@ -905,27 +905,27 @@ const fishNav = [
      properties; the slide is the lego's own inset transition. --side-dialog-inset
      MUST carry units (44px) — a unitless value silently kills the width calc. ── */
   #node-drawer.is-under { --side-dialog-inset: 44px; }
-  #create-drawer.is-stacked { --color-backdrop: transparent; --backdrop-filter: none; }
+  #create-drawer.is-stacked { --color-background-overlay-backdrop: transparent; --side-dialog-backdrop-filter: none; }
 
   /* ── Roles-edit drawer body (composition glue: rows of esa-* controls) ── */
   .bcn-roles-edit-head { display: flex; align-items: center; gap: var(--spacing-200); flex-wrap: wrap; min-width: 0; }
-  .bcn-roles-edit-head__ref { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); padding: 1px var(--spacing-200); border-radius: var(--radius-100); }
-  .bcn-roles-edit-head__title { font-family: var(--font-decorative); font-size: 1.125rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); line-height: 1.25; min-width: 0; }
+  .bcn-roles-edit-head__ref { flex-shrink: 0; font-family: var(--typography-font-family-mono); font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); padding: 1px var(--spacing-200); border-radius: var(--radius-100); }
+  .bcn-roles-edit-head__title { font-family: var(--font-decorative); font-size: 1.125rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); line-height: 1.25; min-width: 0; }
 
   .bcn-roles-edit { display: flex; flex-direction: column; gap: var(--spacing-400); }
-  .bcn-roles-edit__row { display: flex; flex-direction: column; gap: var(--spacing-200); padding-bottom: var(--spacing-400); border-bottom: 1px solid var(--color-border-light); }
+  .bcn-roles-edit__row { display: flex; flex-direction: column; gap: var(--spacing-200); padding-bottom: var(--spacing-400); border-bottom: 1px solid var(--color-border-default-subtle); }
   .bcn-roles-edit__row:last-child { border-bottom: 0; padding-bottom: 0; }
-  .bcn-roles-edit__ws { font-size: var(--form-font-size-md, 0.9375rem); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
+  .bcn-roles-edit__ws { font-size: var(--typography-label-md-font-size, 0.9375rem); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-secondary); }
   .bcn-roles-edit__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-200) var(--spacing-300); align-items: center; }
-  .bcn-roles-edit__tent { display: inline-flex; align-items: center; gap: var(--spacing-200); grid-column: 1 / -1; font-size: var(--type-size-150); color: var(--color-text-secondary); cursor: pointer; }
+  .bcn-roles-edit__tent { display: inline-flex; align-items: center; gap: var(--spacing-200); grid-column: 1 / -1; font-size: var(--font-size-150); color: var(--color-content-default-secondary); cursor: pointer; }
 
   .bcn-roles-edit-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-200); width: 100%; }
   /* COA 10.18 anchor chip beside the page title — the science-plan commitment
      this whole work-breakdown satisfies (a data reference, not a label). */
   .bcn-gantt-coa {
-    font-family: var(--font-mono);
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-semibold);
+    font-family: var(--typography-font-family-mono);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-semibold);
     color: var(--color-commitment);
     background: color-mix(in srgb, var(--color-commitment) 12%, white);
     padding: 2px 8px;
diff --git a/src/pages/prototypes/fish-node.astro b/src/pages/prototypes/fish-node.astro
index 33156c59..7c0532e7 100644
--- a/src/pages/prototypes/fish-node.astro
+++ b/src/pages/prototypes/fish-node.astro
@@ -70,7 +70,7 @@ const fishNav = [
   >
     <span slot="title-badge" class="bcn-node-page__badge" id="bcn-node-badge" hidden>—</span>
     <div slot="utilities" class="bcn-node-page__utils">
-      <EsaButton href={ganttHref} color="ghost" appearance="outline" size="sm" icon="arrow-left">Back to Study Planning</EsaButton>
+      <EsaButton href={ganttHref} variant="ghost" appearance="outline" size="sm" icon="arrow-left">Back to Study Planning</EsaButton>
     </div>
 
     <!-- bcn-lego-checked: PAGE-COMPOSITION GLUE ONLY. The body is the unchanged
@@ -83,7 +83,7 @@ const fishNav = [
           title="Pick a node"
           description="Open a node from the Study Planning gantt (View full details in the row drawer), or pass ?id= with a COA / STY / SUB / TSK id."
         >
-          <EsaButton href={ganttHref} color="primary" size="sm" icon="arrow-left">Open Study Planning</EsaButton>
+          <EsaButton href={ganttHref} variant="primary" size="sm" icon="arrow-left">Open Study Planning</EsaButton>
         </EsaEmptyState>
       </section>
       {
@@ -203,7 +203,7 @@ const fishNav = [
   .bcn-node-page [data-node-panel][hidden] { display: none; }
   .bcn-node-page__empty[hidden] { display: none; }
 
-  .bcn-node-page__badge { font-family: var(--font-mono); font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); padding: 2px var(--spacing-250); border-radius: var(--radius-100); white-space: nowrap; }
+  .bcn-node-page__badge { font-family: var(--typography-font-family-mono); font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); padding: 2px var(--spacing-250); border-radius: var(--radius-100); white-space: nowrap; }
 
   .bcn-node-page__utils :global(a) { text-decoration: none; }
 </style>
diff --git a/src/pages/prototypes/fish-studies.astro b/src/pages/prototypes/fish-studies.astro
index 2e122fca..86f7ef43 100644
--- a/src/pages/prototypes/fish-studies.astro
+++ b/src/pages/prototypes/fish-studies.astro
@@ -17,8 +17,8 @@ import AppShell from '../../layouts/AppShell.astro';
 import PageLayout from '../../layouts/PageLayout.astro';
 import EsaButton from '@esa/ecology/esa-button.astro';
 import EsaIcon from '@esa/ecology/esa-icon.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
-import EsaIconLink from '@esa/ecology/esa-icon-link.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
+import EsaIconLink from '@esa/ecology/esa-button.astro';
 import FilterContainer from '@esa/ecology/esa-filter-container.astro';
 import FilterClearButton from '@esa/ecology/esa-filter-clear-button.astro';
 import BcnScheduleTimeline from '../../components/bcn/BcnScheduleTimeline.astro';
@@ -100,7 +100,7 @@ const fishNav = [
     breadcrumbs={[{ label: 'Delta Conveyance', href: '#project' }, { label: 'Studies', href: '#studies' }, { label: 'Science Plan' }]}
   >
     <div slot="utilities" class="bcn-fs-utils">
-      <span id="fs-generate"><EsaButton color="ghost" appearance="outline" size="md" icon="download">Generate outputs</EsaButton></span>
+      <span id="fs-generate"><EsaButton variant="ghost" appearance="outline" size="md" icon="download">Generate outputs</EsaButton></span>
     </div>
 
     <!-- ═══ Filter bar — carded (Tracker parity); every control is a lego ═══
@@ -120,7 +120,7 @@ const fishNav = [
         </div>
         <div class="bcn-filterbar__search">
           <esa-text-field id="fs-search" placeholder="Search studies…" size="md"></esa-text-field>
-          <span id="fs-search-clear" hidden><EsaIconButton icon="x" label="Clear search" size="sm" /></span>
+          <span id="fs-search-clear" hidden><EsaIconButton variant="chrome" iconOnly icon="x" label="Clear search" size="sm" /></span>
         </div>
       </div>
       <div class="bcn-filterbar__bottom">
@@ -140,7 +140,7 @@ const fishNav = [
     <div class="bcn-view-pane" id="view-grid" hidden>
       <div id="fs-grid" class="fs-grid"></div>
       <div class="table-footer">
-        <span id="fs-download"><EsaButton color="ghost" appearance="outline" size="sm" icon="download">Download crosswalk (CSV)</EsaButton></span>
+        <span id="fs-download"><EsaButton variant="ghost" appearance="outline" size="sm" icon="download">Download crosswalk (CSV)</EsaButton></span>
         <div class="row-count-data">
           Total studies: <span id="fs-total">0</span>
           <span id="fs-filtered" class="filtered-rows-count" hidden></span>
@@ -170,26 +170,26 @@ const fishNav = [
       <li class="bcn-out__item">
         <EsaIcon name="file-text" size="md" paths="<path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/><path d='M14 2v5h5'/>" />
         <div><strong>Covered Fish Species Monitoring &amp; Science Plan</strong><span>Word — the 27 study sketches, ready for CDFW review</span></div>
-        <EsaButton color="ghost" appearance="outline" size="sm">.docx</EsaButton>
+        <EsaButton variant="ghost" appearance="outline" size="sm">.docx</EsaButton>
       </li>
       <li class="bcn-out__item">
         <EsaIcon name="table" size="md" paths="<path d='M12 3v18'/><rect width='18' height='18' x='3' y='3' rx='2'/><path d='M3 9h18'/><path d='M3 15h18'/>" />
         <div><strong>ITP Aquatic Study Crosswalk</strong><span>Excel — the wide reference table</span></div>
-        <EsaButton color="ghost" appearance="outline" size="sm">.xlsx</EsaButton>
+        <EsaButton variant="ghost" appearance="outline" size="sm">.xlsx</EsaButton>
       </li>
       <li class="bcn-out__item">
         <EsaIcon name="users" size="md" paths="<path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/>" />
         <div><strong>Roles &amp; Responsibilities Summary</strong><span>the RACI matrix — generated live</span></div>
-        <span id="fs-out-roles"><EsaButton color="ghost" appearance="outline" size="sm" icon="external-link">Open</EsaButton></span>
+        <span id="fs-out-roles"><EsaButton variant="ghost" appearance="outline" size="sm" icon="external-link">Open</EsaButton></span>
       </li>
       <li class="bcn-out__item">
         <EsaIcon name="calendar" size="md" paths="<path d='M8 2v4'/><path d='M16 2v4'/><rect width='18' height='18' x='3' y='4' rx='2'/><path d='M3 10h18'/>" />
         <div><strong>Prior-to-2030 Timeline &amp; Gantt</strong><span>PDF — the water-year schedule</span></div>
-        <EsaButton color="ghost" appearance="outline" size="sm">.pdf</EsaButton>
+        <EsaButton variant="ghost" appearance="outline" size="sm">.pdf</EsaButton>
       </li>
     </ul>
     <div slot="footer" class="bcn-out__foot">
-      <span id="fs-outputs-close"><EsaButton color="ghost" appearance="outline">Close</EsaButton></span>
+      <span id="fs-outputs-close"><EsaButton variant="ghost" appearance="outline">Close</EsaButton></span>
     </div>
   </esa-dialog>
 
@@ -211,10 +211,10 @@ const fishNav = [
       <esa-date-picker id="fs-drawer-due" label="Study plan due"></esa-date-picker>
     </div>
     <span slot="footer" class="bcn-drawer__foot">
-      <span id="fs-drawer-open"><EsaIconLink href="#" trailing="arrow-right" size="sm" weight="medium">Open full study</EsaIconLink></span>
+      <span id="fs-drawer-open"><EsaIconLink variant="chrome" href="#" iconRight="arrow-right" size="sm">Open full study</EsaIconLink></span>
       <span class="bcn-drawer__foot-actions">
-        <span id="fs-drawer-cancel"><EsaButton color="ghost" appearance="outline">Cancel</EsaButton></span>
-        <span id="fs-drawer-save"><EsaButton color="primary">Save</EsaButton></span>
+        <span id="fs-drawer-cancel"><EsaButton variant="ghost" appearance="outline">Cancel</EsaButton></span>
+        <span id="fs-drawer-save"><EsaButton variant="primary">Save</EsaButton></span>
       </span>
     </span>
   </esa-side-dialog>
@@ -568,12 +568,12 @@ const fishNav = [
   .bcn-fs-utils { display: inline-flex; align-items: center; gap: var(--spacing-200); }
 
   /* Filter bar (Tracker parity) */
-  .bcn-filterbar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-200); margin-bottom: var(--spacing-400); }
+  .bcn-filterbar { background: var(--color-background-elevation-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-200); margin-bottom: var(--spacing-400); }
   .bcn-filterbar__top { display: flex; align-items: center; gap: var(--spacing-400); padding: var(--spacing-300) var(--spacing-400); flex-wrap: wrap; }
-  .bcn-filterbar__bottom { display: flex; align-items: center; gap: var(--spacing-300); padding: var(--spacing-300) var(--spacing-400); border-top: 1px solid var(--color-border); flex-wrap: wrap; }
+  .bcn-filterbar__bottom { display: flex; align-items: center; gap: var(--spacing-300); padding: var(--spacing-300) var(--spacing-400); border-top: 1px solid var(--color-border-default); flex-wrap: wrap; }
   .bcn-filterbar__group { display: inline-flex; align-items: center; gap: var(--spacing-300); }
   .bcn-filterbar__group[hidden] { display: none; } /* Arrange is timeline-only; override inline-flex */
-  .bcn-filterbar__label { font-size: var(--type-size-150); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); white-space: nowrap; }
+  .bcn-filterbar__label { font-size: var(--font-size-150); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-tertiary); white-space: nowrap; }
   .bcn-filterbar__search { margin-left: auto; display: inline-flex; align-items: center; gap: var(--spacing-150); min-width: 300px; }
   .bcn-filterbar__search :global(esa-text-field) { flex: 1; }
   .bcn-filterbar__clear { margin-left: auto; }
@@ -581,35 +581,35 @@ const fishNav = [
   /* View panes + grid host */
   .bcn-view-pane[hidden] { display: none; }
   .fs-grid { width: 100%; height: calc(100vh - 300px); min-height: 600px; }
-  .table-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-400); padding: var(--spacing-200) var(--spacing-400); background: var(--color-background); border: 1px solid var(--color-border); border-top: 0; border-radius: 0 0 var(--radius-100) var(--radius-100); }
-  .row-count-data { display: flex; align-items: center; gap: var(--spacing-400); font-size: var(--type-size-100); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
-  .filtered-rows-count { color: var(--color-text-tertiary); }
+  .table-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-400); padding: var(--spacing-200) var(--spacing-400); background: var(--color-background-default); border: 1px solid var(--color-border-default); border-top: 0; border-radius: 0 0 var(--radius-100) var(--radius-100); }
+  .row-count-data { display: flex; align-items: center; gap: var(--spacing-400); font-size: var(--font-size-100); color: var(--color-content-default-secondary); font-variant-numeric: tabular-nums; }
+  .filtered-rows-count { color: var(--color-content-default-tertiary); }
   .filtered-rows-count[hidden] { display: none; }
 
   /* AG Grid injected cells (global) */
   :global(.ag-cell.bcn-grid-status-cell) { display: flex; align-items: center; }
-  :global(.bcn-grid-chip) { display: inline-flex; align-items: center; gap: var(--spacing-150); padding: 1px var(--spacing-200); border-radius: var(--radius-100); font-size: 0.75rem; line-height: 1.5; font-weight: var(--font-weight-semibold); white-space: nowrap; background: color-mix(in srgb, var(--_chip) 16%, transparent); color: color-mix(in srgb, var(--_chip) 70%, #1a1a1a); }
+  :global(.bcn-grid-chip) { display: inline-flex; align-items: center; gap: var(--spacing-150); padding: 1px var(--spacing-200); border-radius: var(--radius-100); font-size: 0.75rem; line-height: 1.5; font-weight: var(--typography-font-weight-semibold); white-space: nowrap; background: color-mix(in srgb, var(--_chip) 16%, transparent); color: color-mix(in srgb, var(--_chip) 70%, #1a1a1a); }
   :global(.bcn-grid-chip__dot) { width: 7px; height: 7px; border-radius: 50%; background: var(--_chip); flex-shrink: 0; }
-  :global(.bcn-grid-name) { color: var(--color-text-link); font-weight: var(--font-weight-regular); text-decoration: underline; }
-  :global(.bcn-grid-name:hover) { color: var(--color-primary-hover); }
+  :global(.bcn-grid-name) { color: var(--color-content-link); font-weight: var(--typography-font-weight-regular); text-decoration: underline; }
+  :global(.bcn-grid-name:hover) { color: var(--color-background-brand-hover); }
 
   /* Outputs dialog body */
-  .bcn-out__head { font-family: var(--font-decorative); font-size: 1.375rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-out__lede { margin: 0 0 var(--spacing-400); font-size: var(--type-size-200); color: var(--color-text-secondary); line-height: 1.5; }
+  .bcn-out__head { font-family: var(--font-decorative); font-size: 1.375rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-out__lede { margin: 0 0 var(--spacing-400); font-size: var(--font-size-200); color: var(--color-content-default-secondary); line-height: 1.5; }
   .bcn-out__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-200); }
-  .bcn-out__item { display: flex; align-items: center; gap: var(--spacing-300); padding: var(--spacing-300); border: 1px solid var(--color-border); border-radius: var(--radius-200); }
-  .bcn-out__item :global(.esa-icon) { color: var(--color-secondary); flex-shrink: 0; }
+  .bcn-out__item { display: flex; align-items: center; gap: var(--spacing-300); padding: var(--spacing-300); border: 1px solid var(--color-border-default); border-radius: var(--radius-200); }
+  .bcn-out__item :global(.esa-icon) { color: var(--color-background-brand-muted); flex-shrink: 0; }
   .bcn-out__item div { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
-  .bcn-out__item strong { font-size: var(--form-font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-out__item span { font-size: 0.8125rem; color: var(--color-text-tertiary); }
+  .bcn-out__item strong { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-out__item span { font-size: 0.8125rem; color: var(--color-content-default-tertiary); }
   .bcn-out__foot { display: flex; justify-content: flex-end; width: 100%; }
 
   /* Manage-study drawer body */
   .bcn-drawer { display: flex; flex-direction: column; gap: var(--spacing-400); }
   /* Drawer header: COA purple commitment badge prefixing the study title. */
   .bcn-drawer-head { display: flex; align-items: center; gap: var(--spacing-200); flex-wrap: wrap; min-width: 0; }
-  .bcn-drawer-head__badge { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); padding: 1px var(--spacing-200); border-radius: var(--radius-100); }
-  .bcn-drawer-head__title { font-family: var(--font-decorative); font-size: 1.125rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); line-height: 1.25; min-width: 0; }
+  .bcn-drawer-head__badge { flex-shrink: 0; font-family: var(--typography-font-family-mono); font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); padding: 1px var(--spacing-200); border-radius: var(--radius-100); }
+  .bcn-drawer-head__title { font-family: var(--font-decorative); font-size: 1.125rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); line-height: 1.25; min-width: 0; }
   .bcn-drawer__dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-300); }
   .bcn-drawer__foot { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--spacing-300); }
   .bcn-drawer__foot-actions { display: inline-flex; align-items: center; gap: var(--spacing-200); }
diff --git a/src/pages/prototypes/fish-study/[coa].astro b/src/pages/prototypes/fish-study/[coa].astro
index 9edbf6b4..697ad4e2 100644
--- a/src/pages/prototypes/fish-study/[coa].astro
+++ b/src/pages/prototypes/fish-study/[coa].astro
@@ -103,8 +103,8 @@ const fishNav = [
       <BcnStatusChip status={s.execStatus} label={exec.label} hex={exec.hex} />
     </span>
     <div slot="utilities" class="bcn-study__utils">
-      <EsaButton color="ghost" appearance="outline" size="sm" icon="file-text">Generate sketch (.docx)</EsaButton>
-      <EsaButton color="primary" size="sm" icon="upload">Submit for CDFW review</EsaButton>
+      <EsaButton variant="ghost" appearance="outline" size="sm" icon="file-text">Generate sketch (.docx)</EsaButton>
+      <EsaButton variant="primary" size="sm" icon="upload">Submit for CDFW review</EsaButton>
     </div>
 
     <div class="bcn-study">
@@ -117,7 +117,7 @@ const fishNav = [
             title="Sketch not yet drafted"
             description="This study is tracked in the crosswalk and schedule, but its 9-field science-plan sketch hasn't been authored yet. Draft it to include the study in the next plan export to CDFW."
           >
-            <EsaButton slot="action" color="primary" icon="plus">Draft study sketch</EsaButton>
+            <EsaButton slot="action" variant="primary" icon="plus">Draft study sketch</EsaButton>
           </EsaEmptyState>
         )}
 
@@ -226,7 +226,7 @@ const fishNav = [
      layout lego) and Beacon. No reinvented primitive. */
 
   .bcn-study__badges { display: inline-flex; align-items: center; gap: var(--spacing-200); flex-wrap: wrap; }
-  .bcn-study__coa { font-family: var(--font-mono); font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); }
+  .bcn-study__coa { font-family: var(--typography-font-family-mono); font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-tertiary); }
   .bcn-study__utils { display: inline-flex; align-items: center; gap: var(--spacing-200); }
 
   .bcn-study { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--spacing-600); align-items: start; }
@@ -235,28 +235,28 @@ const fishNav = [
 
   /* rail key/value + chips (small, matches BcnKeyValue) */
   .bcn-study__kv { display: flex; flex-direction: column; gap: var(--spacing-150); }
-  .bcn-study__kv-label { font-size: var(--form-font-size-md); font-weight: var(--font-weight-medium); color: var(--form-label-color); }
+  .bcn-study__kv-label { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-medium); color: var(--form-label-color); }
   .bcn-study__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-150); }
-  .bcn-study__empty { font-size: var(--type-size-100); color: var(--color-text-tertiary); font-style: italic; }
+  .bcn-study__empty { font-size: var(--font-size-100); color: var(--color-content-default-tertiary); font-style: italic; }
 
   .bcn-study__coa-link, .bcn-study__coa-ref {
     display: inline-flex; align-items: center;
-    font-family: var(--font-mono); font-size: 0.75rem; font-weight: var(--font-weight-semibold);
+    font-family: var(--typography-font-family-mono); font-size: 0.75rem; font-weight: var(--typography-font-weight-semibold);
     padding: 1px var(--spacing-200); border-radius: var(--radius-100);
-    background: var(--color-surface-sunken); border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-sunken); border: 1px solid var(--color-border-default);
   }
-  .bcn-study__coa-link { color: var(--color-primary); text-decoration: none; }
-  .bcn-study__coa-link:hover { background: var(--color-primary-subtle); border-color: var(--color-primary-border); }
-  .bcn-study__coa-ref { color: var(--color-text-tertiary); }
+  .bcn-study__coa-link { color: var(--color-background-brand); text-decoration: none; }
+  .bcn-study__coa-link:hover { background: var(--color-background-brand-subtle); border-color: var(--color-border-brand); }
+  .bcn-study__coa-ref { color: var(--color-content-default-tertiary); }
 
   .bcn-study__deliv, .bcn-study__roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-200); }
   .bcn-study__deliv-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-200); }
-  .bcn-study__deliv-name { font-size: var(--type-size-100); color: var(--color-text-primary); }
-  .bcn-study__role-row { display: flex; flex-direction: column; gap: 1px; padding-bottom: var(--spacing-150); border-bottom: 1px solid var(--color-border-light); }
+  .bcn-study__deliv-name { font-size: var(--font-size-100); color: var(--color-content-default); }
+  .bcn-study__role-row { display: flex; flex-direction: column; gap: 1px; padding-bottom: var(--spacing-150); border-bottom: 1px solid var(--color-border-default-subtle); }
   .bcn-study__role-row:last-child { border-bottom: 0; padding-bottom: 0; }
-  .bcn-study__role-stream { font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
-  .bcn-study__role-org { display: inline-flex; align-items: center; gap: var(--spacing-150); font-size: var(--type-size-100); color: var(--color-text-primary); }
-  .bcn-study__role-person { color: var(--color-text-tertiary); }
+  .bcn-study__role-stream { font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-secondary); }
+  .bcn-study__role-org { display: inline-flex; align-items: center; gap: var(--spacing-150); font-size: var(--font-size-100); color: var(--color-content-default); }
+  .bcn-study__role-person { color: var(--color-content-default-tertiary); }
 
   @media (max-width: 900px) {
     .bcn-study { grid-template-columns: 1fr; }
diff --git a/src/pages/prototypes/monitoring/compliance-observations.astro b/src/pages/prototypes/monitoring/compliance-observations.astro
index 222bb7fe..eb56f56f 100644
--- a/src/pages/prototypes/monitoring/compliance-observations.astro
+++ b/src/pages/prototypes/monitoring/compliance-observations.astro
@@ -7,7 +7,7 @@
 // resolved. See src/data/monitoring-oversight-fixture.ts for the scenario.
 import AppShell from '../../../layouts/AppShell.astro';
 import PageLayout from '../../../layouts/PageLayout.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import EsaButton from '@esa/ecology/esa-button.astro';
 import FilterContainer from '@esa/ecology/esa-filter-container.astro';
 import FilterClearButton from '@esa/ecology/esa-filter-clear-button.astro';
@@ -28,8 +28,8 @@ import {
 } from '../../../data/monitoring-oversight-fixture';
 
 const STATUS_DISPLAY_META: Record<'active' | 'resolved', { label: string; hex: string }> = {
-  active: { label: 'Active', hex: 'var(--color-info)' },
-  resolved: { label: 'Resolved', hex: 'var(--color-text-tertiary)' },
+  active: { label: 'Active', hex: 'var(--color-background-utility-info)' },
+  resolved: { label: 'Resolved', hex: 'var(--color-content-default-tertiary)' },
 };
 
 const gridRows = OBSERVATIONS.map((o) => ({
@@ -138,7 +138,7 @@ const oversightNav = [
         <span id="ov-clear-filters" class="bcn-filterbar__clear"><FilterClearButton /></span>
         <div class="bcn-filterbar__search">
           <esa-text-field id="ov-search" placeholder="Search ID, category, area, inspector…" size="md"></esa-text-field>
-          <span id="ov-search-clear" hidden><EsaIconButton icon="x" label="Clear search" size="sm" /></span>
+          <span id="ov-search-clear" hidden><EsaIconButton variant="chrome" iconOnly icon="x" label="Clear search" size="sm" /></span>
         </div>
       </div>
     </div>
@@ -147,7 +147,7 @@ const oversightNav = [
     <div id="ov-list-pane">
       <div id="ov-grid" class="ov-grid"></div>
       <div class="table-footer">
-        <span id="ov-download"><EsaButton color="ghost" appearance="outline" size="sm" icon="download">Download as CSV</EsaButton></span>
+        <span id="ov-download"><EsaButton variant="ghost" appearance="outline" size="sm" icon="download">Download as CSV</EsaButton></span>
         <div class="row-count-data">
           Total Records: <span id="ov-total">0</span>
           <span id="ov-filtered" class="filtered-rows-count" hidden></span>
@@ -492,32 +492,32 @@ const oversightNav = [
      primitives — checked esa-* (no filter-bar-shell, no data-grid,
      no read-only-record-panel lego) and Beacon. */
 
-  .bcn-filterbar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-200); margin-bottom: var(--spacing-400); }
+  .bcn-filterbar { background: var(--color-background-elevation-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-200); margin-bottom: var(--spacing-400); }
   .bcn-filterbar__top { display: flex; align-items: center; gap: var(--spacing-300); padding: var(--spacing-300) var(--spacing-400); flex-wrap: wrap; }
-  .bcn-filterbar__group { display: inline-flex; align-items: center; gap: var(--spacing-200); padding-right: var(--spacing-300); border-right: 1px solid var(--color-border-light); }
-  .bcn-filterbar__label { font-size: var(--type-size-150); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); white-space: nowrap; }
+  .bcn-filterbar__group { display: inline-flex; align-items: center; gap: var(--spacing-200); padding-right: var(--spacing-300); border-right: 1px solid var(--color-border-default-subtle); }
+  .bcn-filterbar__label { font-size: var(--font-size-150); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-tertiary); white-space: nowrap; }
   .bcn-filterbar__clear { margin-left: var(--spacing-100); }
   .bcn-filterbar__search { margin-left: auto; display: inline-flex; align-items: center; gap: var(--spacing-150); min-width: 280px; }
   .bcn-filterbar__search :global(esa-text-field) { flex: 1; }
 
   /* Grid host + footer */
   .ov-grid { width: 100%; height: calc(100vh - 460px); min-height: 480px; }
-  .table-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-400); padding: var(--spacing-200) var(--spacing-400); background: var(--color-background); border: 1px solid var(--color-border); border-top: 0; border-radius: 0 0 var(--radius-100) var(--radius-100); }
-  .row-count-data { display: flex; align-items: center; gap: var(--spacing-400); font-size: var(--type-size-100); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
-  .filtered-rows-count { color: var(--color-text-tertiary); }
+  .table-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-400); padding: var(--spacing-200) var(--spacing-400); background: var(--color-background-default); border: 1px solid var(--color-border-default); border-top: 0; border-radius: 0 0 var(--radius-100) var(--radius-100); }
+  .row-count-data { display: flex; align-items: center; gap: var(--spacing-400); font-size: var(--font-size-100); color: var(--color-content-default-secondary); font-variant-numeric: tabular-nums; }
+  .filtered-rows-count { color: var(--color-content-default-tertiary); }
   .filtered-rows-count[hidden] { display: none; }
 
   /* AG Grid injected cells (global) */
   :global(.ag-cell.bcn-grid-status-cell) { display: flex; align-items: center; }
-  :global(.bcn-grid-chip) { display: inline-flex; align-items: center; gap: var(--spacing-150); padding: 1px var(--spacing-200); border-radius: var(--radius-100); font-size: 0.8125rem; /* 13px — dense-meta floor */ line-height: 1.5; font-weight: var(--font-weight-semibold); white-space: nowrap; background: color-mix(in srgb, var(--_chip) 16%, transparent); color: color-mix(in srgb, var(--_chip) 70%, var(--color-text-primary)); }
+  :global(.bcn-grid-chip) { display: inline-flex; align-items: center; gap: var(--spacing-150); padding: 1px var(--spacing-200); border-radius: var(--radius-100); font-size: 0.8125rem; /* 13px — dense-meta floor */ line-height: 1.5; font-weight: var(--typography-font-weight-semibold); white-space: nowrap; background: color-mix(in srgb, var(--_chip) 16%, transparent); color: color-mix(in srgb, var(--_chip) 70%, var(--color-content-default)); }
   :global(.bcn-grid-chip__dot) { width: 7px; height: 7px; border-radius: 50%; background: var(--_chip); flex-shrink: 0; }
-  :global(.bcn-grid-name) { color: var(--color-text-link); font-weight: var(--font-weight-regular); text-decoration: underline; }
-  :global(.bcn-grid-name:hover) { color: var(--color-primary-hover); }
+  :global(.bcn-grid-name) { color: var(--color-content-link); font-weight: var(--typography-font-weight-regular); text-decoration: underline; }
+  :global(.bcn-grid-name:hover) { color: var(--color-background-brand-hover); }
 
   /* Detail panel header + body glue */
   .bcn-detail__head { display: flex; flex-direction: column; gap: var(--spacing-150); min-width: 0; padding: var(--spacing-400) var(--spacing-500); flex: 1; }
   .bcn-detail__title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-200); min-width: 0; }
-  .bcn-detail__title { margin: 0; font-family: var(--font-decorative); font-size: 1.125rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); line-height: 1.3; }
+  .bcn-detail__title { margin: 0; font-family: var(--font-decorative); font-size: 1.125rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); line-height: 1.3; }
   .bcn-detail__chips { display: flex; gap: var(--spacing-200); margin-bottom: var(--spacing-400); }
   .bcn-detail__grid { display: flex; flex-direction: column; gap: var(--spacing-400); margin-bottom: var(--spacing-400); }
   .bcn-detail__body :global(esa-side-dialog) { display: block; }
diff --git a/src/pages/prototypes/monitoring/daily-reports.astro b/src/pages/prototypes/monitoring/daily-reports.astro
index 20a88c93..fb170ea5 100644
--- a/src/pages/prototypes/monitoring/daily-reports.astro
+++ b/src/pages/prototypes/monitoring/daily-reports.astro
@@ -11,7 +11,7 @@
 import AppShell from '../../../layouts/AppShell.astro';
 import PageLayout from '../../../layouts/PageLayout.astro';
 import EsaButton from '@esa/ecology/esa-button.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import FilterClearButton from '@esa/ecology/esa-filter-clear-button.astro';
 import BcnKeyValue from '../../../components/bcn/BcnKeyValue.astro';
 import BcnStatusChip from '../../../components/bcn/BcnStatusChip.astro';
@@ -113,7 +113,7 @@ const oversightNav = [
       <div class="bcn-filterbar__top">
         <div class="bcn-filterbar__search">
           <esa-text-field id="dr-search" placeholder="Search grid…" size="md"></esa-text-field>
-          <span id="dr-search-clear" hidden><EsaIconButton icon="x" label="Clear search" size="sm" /></span>
+          <span id="dr-search-clear" hidden><EsaIconButton variant="chrome" iconOnly icon="x" label="Clear search" size="sm" /></span>
         </div>
         <span id="dr-clear-filters"><FilterClearButton /></span>
       </div>
@@ -121,7 +121,7 @@ const oversightNav = [
 
     <div id="dr-grid" class="dr-grid"></div>
     <div class="table-footer">
-      <span id="dr-download"><EsaButton color="ghost" appearance="outline" size="sm" icon="download">Download as CSV</EsaButton></span>
+      <span id="dr-download"><EsaButton variant="ghost" appearance="outline" size="sm" icon="download">Download as CSV</EsaButton></span>
       <div class="row-count-data">
         Total Records: <span id="dr-total">0</span>
         <span id="dr-filtered" class="filtered-rows-count" hidden></span>
@@ -151,7 +151,7 @@ const oversightNav = [
       <span id="dr-detail-summary"><BcnKeyValue label="Summary" value={seed.summary} /></span>
       <div id="dr-detail-observations" class="bcn-dr-detail__observations"></div>
       <div class="bcn-dr-detail__download">
-        <span id="dr-detail-download-btn"><EsaButton color="ghost" appearance="outline" size="sm" icon="download">Download Report</EsaButton></span>
+        <span id="dr-detail-download-btn"><EsaButton variant="ghost" appearance="outline" size="sm" icon="download">Download Report</EsaButton></span>
       </div>
     </div>
   </esa-side-dialog>
@@ -387,43 +387,43 @@ const oversightNav = [
      injected / dynamically-built DOM (outside Astro's scope), styled :global
      the same way this repo's other grids style their injected cells. */
 
-  .bcn-filterbar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-200); margin-bottom: var(--spacing-400); }
+  .bcn-filterbar { background: var(--color-background-elevation-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-200); margin-bottom: var(--spacing-400); }
   .bcn-filterbar__top { display: flex; align-items: center; gap: var(--spacing-300); padding: var(--spacing-300) var(--spacing-400); flex-wrap: wrap; }
   .bcn-filterbar__search { display: inline-flex; align-items: center; gap: var(--spacing-150); min-width: 280px; }
   .bcn-filterbar__search :global(esa-text-field) { flex: 1; }
 
   /* Grid host + footer */
   .dr-grid { width: 100%; height: calc(100vh - 360px); min-height: 480px; }
-  .table-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-400); padding: var(--spacing-200) var(--spacing-400); background: var(--color-background); border: 1px solid var(--color-border); border-top: 0; border-radius: 0 0 var(--radius-100) var(--radius-100); }
-  .row-count-data { display: flex; align-items: center; gap: var(--spacing-400); font-size: var(--type-size-100); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
-  .filtered-rows-count { color: var(--color-text-tertiary); }
+  .table-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-400); padding: var(--spacing-200) var(--spacing-400); background: var(--color-background-default); border: 1px solid var(--color-border-default); border-top: 0; border-radius: 0 0 var(--radius-100) var(--radius-100); }
+  .row-count-data { display: flex; align-items: center; gap: var(--spacing-400); font-size: var(--font-size-100); color: var(--color-content-default-secondary); font-variant-numeric: tabular-nums; }
+  .filtered-rows-count { color: var(--color-content-default-tertiary); }
   .filtered-rows-count[hidden] { display: none; }
 
   /* AG Grid injected cells (global) */
   :global(.ag-cell.bcn-grid-status-cell) { display: flex; align-items: center; }
-  :global(.bcn-grid-chip) { display: inline-flex; align-items: center; gap: var(--spacing-150); padding: 1px var(--spacing-200); border-radius: var(--radius-100); font-size: 0.8125rem; line-height: 1.5; font-weight: var(--font-weight-semibold); white-space: nowrap; background: color-mix(in srgb, var(--_chip) 16%, transparent); color: color-mix(in srgb, var(--_chip) 70%, var(--color-text-primary)); }
+  :global(.bcn-grid-chip) { display: inline-flex; align-items: center; gap: var(--spacing-150); padding: 1px var(--spacing-200); border-radius: var(--radius-100); font-size: 0.8125rem; line-height: 1.5; font-weight: var(--typography-font-weight-semibold); white-space: nowrap; background: color-mix(in srgb, var(--_chip) 16%, transparent); color: color-mix(in srgb, var(--_chip) 70%, var(--color-content-default)); }
   :global(.bcn-grid-chip__dot) { width: 7px; height: 7px; border-radius: 50%; background: var(--_chip); flex-shrink: 0; }
-  :global(.bcn-grid-name) { color: var(--color-text-link); font-weight: var(--font-weight-regular); text-decoration: underline; }
-  :global(.bcn-grid-name:hover) { color: var(--color-primary-hover); }
+  :global(.bcn-grid-name) { color: var(--color-content-link); font-weight: var(--typography-font-weight-regular); text-decoration: underline; }
+  :global(.bcn-grid-name:hover) { color: var(--color-background-brand-hover); }
   :global(.bcn-grid-download-btn) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 30px;
     height: 30px;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-100);
-    background: var(--color-surface);
-    color: var(--color-text-secondary);
+    background: var(--color-background-elevation-raised);
+    color: var(--color-content-default-secondary);
     cursor: pointer;
     padding: 0;
   }
-  :global(.bcn-grid-download-btn:hover) { background: var(--color-surface-sunken); color: var(--color-text-primary); }
+  :global(.bcn-grid-download-btn:hover) { background: var(--color-background-elevation-sunken); color: var(--color-content-default); }
 
   /* Detail panel header + body glue */
   .bcn-detail__head { display: flex; flex-direction: column; gap: var(--spacing-150); min-width: 0; padding: var(--spacing-400) var(--spacing-500); flex: 1; }
   .bcn-detail__title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-200); min-width: 0; }
-  .bcn-detail__title { margin: 0; font-family: var(--font-decorative); font-size: 1.125rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); line-height: 1.3; }
+  .bcn-detail__title { margin: 0; font-family: var(--font-decorative); font-size: 1.125rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); line-height: 1.3; }
   .bcn-detail__chips { display: flex; gap: var(--spacing-200); margin-bottom: var(--spacing-400); }
   .bcn-detail__grid { display: flex; flex-direction: column; gap: var(--spacing-400); margin-bottom: var(--spacing-400); }
   .bcn-detail__body :global(esa-side-dialog) { display: block; }
@@ -431,26 +431,26 @@ const oversightNav = [
   .bcn-dr-detail__observations { display: flex; flex-direction: column; }
   .bcn-dr-detail__obs-row {
     padding: var(--spacing-300) 0;
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   :global(.bcn-dr-detail__obs-severity) {
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-secondary);
   }
   :global(.bcn-dr-detail__obs-category) {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     margin-left: var(--spacing-150);
   }
   :global(.bcn-dr-detail__obs-desc) {
     margin: var(--spacing-100) 0 0;
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
   }
   .bcn-dr-detail__download {
     padding-top: var(--spacing-300);
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
 </style>
diff --git a/src/pages/prototypes/monitoring/dashboard.astro b/src/pages/prototypes/monitoring/dashboard.astro
index 5e3cbb1f..792dfaaf 100644
--- a/src/pages/prototypes/monitoring/dashboard.astro
+++ b/src/pages/prototypes/monitoring/dashboard.astro
@@ -68,7 +68,7 @@ const sourceGroups = [
   >
     <BcnStatusChip slot="title-badge" status="cleared" label="Connected" hex="#2e7571" />
     <div slot="utilities">
-      <EsaButton color="ghost" appearance="outline" size="sm">Edit Connection</EsaButton>
+      <EsaButton variant="ghost" appearance="outline" size="sm">Edit Connection</EsaButton>
     </div>
 
     <!-- ═══ 1 · Observation stat cards ═══ -->
@@ -139,7 +139,7 @@ const sourceGroups = [
     <article class="cmt-body" id="cmt-body"></article>
     <span slot="footer" class="cmt-foot">
       <span class="cmt-foot__src" id="cmt-source"></span>
-      <span id="cmt-close"><EsaButton color="ghost" appearance="outline">Close</EsaButton></span>
+      <span id="cmt-close"><EsaButton variant="ghost" appearance="outline">Close</EsaButton></span>
     </span>
   </esa-side-dialog>
   <script type="application/json" id="cmt-data" set:html={JSON.stringify(commitmentDrawerData)}></script>
@@ -240,21 +240,21 @@ const sourceGroups = [
     gap: var(--spacing-400);
     flex-wrap: wrap;
     padding-bottom: var(--spacing-200);
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border-default);
   }
   .cc__title {
     margin: 0;
     font-family: var(--font-decorative);
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-bold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-bold);
+    color: var(--color-content-default);
   }
   .cc__controls { display: flex; align-items: center; gap: var(--spacing-400); flex-wrap: wrap; }
   .cc__ctx { display: inline-flex; align-items: center; gap: var(--spacing-200); }
   .cc__ctx-label {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
 
@@ -266,9 +266,9 @@ const sourceGroups = [
   .cc-group + .cc-group { margin-top: var(--spacing-500); }
   .cc-group__head { display: flex; align-items: center; gap: var(--spacing-250); margin-bottom: var(--spacing-300); }
   .cc-group__name {
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   /* Quiet count badge — 4px radius, light-gray border (design-principles standard). */
   .cc-badge {
@@ -278,11 +278,11 @@ const sourceGroups = [
     min-width: 20px;
     height: 20px;
     padding: 0 var(--spacing-150);
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-secondary);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-secondary);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-100);
     font-variant-numeric: tabular-nums;
   }
@@ -292,9 +292,9 @@ const sourceGroups = [
   .cmt-head { display: flex; flex-direction: column; gap: var(--spacing-200); min-width: 0; }
   .cmt-head__code {
     width: max-content;
-    font-family: var(--font-mono);
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-semibold);
+    font-family: var(--typography-font-family-mono);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-semibold);
     color: var(--color-commitment);
     background: color-mix(in srgb, var(--color-commitment) 12%, white);
     padding: 1px var(--spacing-200);
@@ -302,9 +302,9 @@ const sourceGroups = [
   }
   .cmt-head__title {
     font-family: var(--font-decorative);
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-bold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-bold);
+    color: var(--color-content-default);
     line-height: 1.25;
   }
   /* The CoA text — Besley, preserving the register's own line breaks. */
@@ -312,14 +312,14 @@ const sourceGroups = [
     display: block;
     white-space: pre-wrap;
     font-family: var(--font-decorative);
-    font-size: var(--type-size-200);
+    font-size: var(--font-size-200);
     line-height: 1.6;
-    color: var(--color-text-primary);
-    border: 1px solid var(--color-border);
+    color: var(--color-content-default);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     padding: var(--spacing-400);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
   }
   .cmt-foot { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--spacing-300); }
-  .cmt-foot__src { font-size: var(--type-size-100); color: var(--color-text-tertiary); }
+  .cmt-foot__src { font-size: var(--font-size-100); color: var(--color-content-default-tertiary); }
 </style>
diff --git a/src/pages/prototypes/monitoring/surveys.astro b/src/pages/prototypes/monitoring/surveys.astro
index 26b4e1e1..6d9ffa22 100644
--- a/src/pages/prototypes/monitoring/surveys.astro
+++ b/src/pages/prototypes/monitoring/surveys.astro
@@ -11,7 +11,7 @@
 import AppShell from '../../../layouts/AppShell.astro';
 import PageLayout from '../../../layouts/PageLayout.astro';
 import EsaButton from '@esa/ecology/esa-button.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import FilterContainer from '@esa/ecology/esa-filter-container.astro';
 import FilterClearButton from '@esa/ecology/esa-filter-clear-button.astro';
 import { SURVEYS, SURVEY_STATUS_META, SURVEY_COUNT, PROJECT_NAME } from '../../../data/monitoring';
@@ -76,7 +76,7 @@ const gridPayload = {
         </div>
         <div class="bcn-filterbar__search">
           <esa-text-field id="sv-search" placeholder="Search surveys…" size="md"></esa-text-field>
-          <span id="sv-search-clear" hidden><EsaIconButton icon="x" label="Clear search" size="sm" /></span>
+          <span id="sv-search-clear" hidden><EsaIconButton variant="chrome" iconOnly icon="x" label="Clear search" size="sm" /></span>
         </div>
       </div>
       <div class="bcn-filterbar__bottom">
@@ -95,7 +95,7 @@ const gridPayload = {
     <!-- ═══ Surveys grid ═══ -->
     <div id="sv-grid" class="sv-grid"></div>
     <div class="table-footer">
-      <span id="sv-download"><EsaButton color="ghost" appearance="outline" size="sm" icon="download">Download (CSV)</EsaButton></span>
+      <span id="sv-download"><EsaButton variant="ghost" appearance="outline" size="sm" icon="download">Download (CSV)</EsaButton></span>
       <div class="row-count-data">
         Total surveys: <span id="sv-total">0</span>
         <span id="sv-filtered" class="filtered-rows-count" hidden></span>
@@ -270,28 +270,28 @@ const gridPayload = {
      primitives — checked esa-* (no data-grid lego; AG Grid is the kit) and Beacon. */
 
   /* Filter bar (Tracker / Fish parity) */
-  .bcn-filterbar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-200); margin-bottom: var(--spacing-400); }
+  .bcn-filterbar { background: var(--color-background-elevation-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-200); margin-bottom: var(--spacing-400); }
   .bcn-filterbar__top { display: flex; align-items: center; gap: var(--spacing-400); padding: var(--spacing-300) var(--spacing-400); flex-wrap: wrap; }
-  .bcn-filterbar__bottom { display: flex; align-items: center; gap: var(--spacing-300); padding: var(--spacing-300) var(--spacing-400); border-top: 1px solid var(--color-border); flex-wrap: wrap; }
+  .bcn-filterbar__bottom { display: flex; align-items: center; gap: var(--spacing-300); padding: var(--spacing-300) var(--spacing-400); border-top: 1px solid var(--color-border-default); flex-wrap: wrap; }
   .bcn-filterbar__group { display: inline-flex; align-items: center; gap: var(--spacing-300); }
-  .bcn-filterbar__label { font-size: var(--type-size-150); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); white-space: nowrap; }
+  .bcn-filterbar__label { font-size: var(--font-size-150); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-tertiary); white-space: nowrap; }
   .bcn-filterbar__search { margin-left: auto; display: inline-flex; align-items: center; gap: var(--spacing-150); min-width: 300px; }
   .bcn-filterbar__search :global(esa-text-field) { flex: 1; }
   .bcn-filterbar__clear { margin-left: auto; }
 
   /* Grid host + footer */
   .sv-grid { width: 100%; height: calc(100vh - 320px); min-height: 540px; }
-  .table-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-400); padding: var(--spacing-200) var(--spacing-400); background: var(--color-background); border: 1px solid var(--color-border); border-top: 0; border-radius: 0 0 var(--radius-100) var(--radius-100); }
-  .row-count-data { display: flex; align-items: center; gap: var(--spacing-400); font-size: var(--type-size-100); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
-  .filtered-rows-count { color: var(--color-text-tertiary); }
+  .table-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-400); padding: var(--spacing-200) var(--spacing-400); background: var(--color-background-default); border: 1px solid var(--color-border-default); border-top: 0; border-radius: 0 0 var(--radius-100) var(--radius-100); }
+  .row-count-data { display: flex; align-items: center; gap: var(--spacing-400); font-size: var(--font-size-100); color: var(--color-content-default-secondary); font-variant-numeric: tabular-nums; }
+  .filtered-rows-count { color: var(--color-content-default-tertiary); }
   .filtered-rows-count[hidden] { display: none; }
 
   /* AG Grid injected cells (global) */
   :global(.ag-cell.bcn-grid-status-cell) { display: flex; align-items: center; }
-  :global(.bcn-grid-chip) { display: inline-flex; align-items: center; gap: var(--spacing-150); padding: 1px var(--spacing-200); border-radius: var(--radius-100); font-size: 0.75rem; line-height: 1.5; font-weight: var(--font-weight-semibold); white-space: nowrap; background: color-mix(in srgb, var(--_chip) 16%, transparent); color: color-mix(in srgb, var(--_chip) 70%, #1a1a1a); }
+  :global(.bcn-grid-chip) { display: inline-flex; align-items: center; gap: var(--spacing-150); padding: 1px var(--spacing-200); border-radius: var(--radius-100); font-size: 0.75rem; line-height: 1.5; font-weight: var(--typography-font-weight-semibold); white-space: nowrap; background: color-mix(in srgb, var(--_chip) 16%, transparent); color: color-mix(in srgb, var(--_chip) 70%, #1a1a1a); }
   :global(.bcn-grid-chip__dot) { width: 7px; height: 7px; border-radius: 50%; background: var(--_chip); flex-shrink: 0; }
-  :global(.bcn-grid-name) { color: var(--color-text-link); font-weight: var(--font-weight-regular); text-decoration: underline; font-variant-numeric: tabular-nums; }
-  :global(.bcn-grid-name:hover) { color: var(--color-primary-hover); }
-  :global(.bcn-grid-dl) { display: inline-flex; align-items: center; justify-content: center; color: var(--color-secondary); }
-  :global(.bcn-grid-dl:hover) { color: var(--color-primary); }
+  :global(.bcn-grid-name) { color: var(--color-content-link); font-weight: var(--typography-font-weight-regular); text-decoration: underline; font-variant-numeric: tabular-nums; }
+  :global(.bcn-grid-name:hover) { color: var(--color-background-brand-hover); }
+  :global(.bcn-grid-dl) { display: inline-flex; align-items: center; justify-content: center; color: var(--color-background-brand-muted); }
+  :global(.bcn-grid-dl:hover) { color: var(--color-background-brand); }
 </style>
diff --git a/src/pages/prototypes/permit-tracking.astro b/src/pages/prototypes/permit-tracking.astro
index fe24a41b..9234762e 100644
--- a/src/pages/prototypes/permit-tracking.astro
+++ b/src/pages/prototypes/permit-tracking.astro
@@ -23,7 +23,7 @@ import AppShell from '../../layouts/AppShell.astro';
 import PageLayout from '../../layouts/PageLayout.astro';
 import '../../styles/beacon-map.css'; // shared Leaflet chrome (.leaflet-tooltip restyle for all map pages)
 import EsaButton from '@esa/ecology/esa-button.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import EsaIcon from '@esa/ecology/esa-icon.astro';
 import EsaBadge from '@esa/ecology/esa-badge.astro';
 import EsaCard from '@esa/ecology/esa-card.astro';
@@ -164,7 +164,7 @@ const payload = {
     ]}
   >
     <div slot="utilities">
-      <span id="notif-open"><EsaButton color="ghost" appearance="outline" size="sm" icon="bell">Notifications</EsaButton></span>
+      <span id="notif-open"><EsaButton variant="ghost" appearance="outline" size="sm" icon="bell">Notifications</EsaButton></span>
     </div>
 
     <!-- No "New Permit" here on purpose: permits ARE source documents — this page
@@ -185,7 +185,7 @@ const payload = {
             <esa-button-toggle id="status-toggle" value="all" size="md"></esa-button-toggle>
           </div>
           <span class="map-filterbar__actions">
-            <span id="download-kmz"><EsaButton color="ghost" appearance="outline" size="sm" icon="download">Download KMZ</EsaButton></span>
+            <span id="download-kmz"><EsaButton variant="ghost" appearance="outline" size="sm" icon="download">Download KMZ</EsaButton></span>
           </span>
         </div>
 
@@ -285,7 +285,7 @@ const payload = {
             </div>
             <div class="bcn-filterbar__search">
               <esa-text-field id="pt-search" placeholder="Search permits…" size="md"></esa-text-field>
-              <span id="pt-search-clear" hidden><EsaIconButton icon="x" label="Clear search" size="sm" /></span>
+              <span id="pt-search-clear" hidden><EsaIconButton variant="chrome" iconOnly icon="x" label="Clear search" size="sm" /></span>
             </div>
           </div>
           <div class="bcn-filterbar__bottom">
@@ -302,8 +302,8 @@ const payload = {
         <div class="bulk-bar" id="bulk-bar" hidden>
           <span class="bulk-bar__count" id="bulk-count">0 selected</span>
           <esa-select id="bulk-status" placeholder="Set status…"></esa-select>
-          <span id="bulk-apply"><EsaButton color="primary" size="sm">Apply status</EsaButton></span>
-          <span id="bulk-clear"><EsaButton color="ghost" appearance="outline" size="sm">Clear selection</EsaButton></span>
+          <span id="bulk-apply"><EsaButton variant="primary" size="sm">Apply status</EsaButton></span>
+          <span id="bulk-clear"><EsaButton variant="ghost" appearance="outline" size="sm">Clear selection</EsaButton></span>
         </div>
 
         <div class="bcn-view-pane" id="pane-permits">
@@ -314,7 +314,7 @@ const payload = {
         </div>
 
         <div class="table-footer">
-          <span id="pt-download"><EsaButton color="ghost" appearance="outline" size="sm" icon="download">Download as CSV</EsaButton></span>
+          <span id="pt-download"><EsaButton variant="ghost" appearance="outline" size="sm" icon="download">Download as CSV</EsaButton></span>
           <div class="row-count-data">
             Total Records: <span id="pt-total">0</span>
             <span id="pt-filtered" class="filtered-rows-count" hidden></span>
@@ -523,7 +523,7 @@ const payload = {
           </div>
           <div class="pd__compose-foot">
             <span class="pd__compose-hint">Posting as Andy Lovseth</span>
-            <span id="pd-comment-post"><EsaButton color="primary" size="sm">Post comment</EsaButton></span>
+            <span id="pd-comment-post"><EsaButton variant="primary" size="sm">Post comment</EsaButton></span>
           </div>
         </div>
       </section>
@@ -538,8 +538,8 @@ const payload = {
       </section>
     </div>
     <div slot="footer" class="pd__footer">
-      <span id="pd-cancel"><EsaButton color="ghost" appearance="outline" size="md">Cancel</EsaButton></span>
-      <span id="pd-save"><EsaButton color="primary" size="md">Save</EsaButton></span>
+      <span id="pd-cancel"><EsaButton variant="ghost" appearance="outline" size="md">Cancel</EsaButton></span>
+      <span id="pd-save"><EsaButton variant="primary" size="md">Save</EsaButton></span>
     </div>
   </esa-side-dialog>
 
@@ -583,8 +583,8 @@ const payload = {
       </ul>
     </div>
     <div slot="footer" class="notif__footer">
-      <span id="notif-cancel"><EsaButton color="ghost" appearance="outline" size="md">Cancel</EsaButton></span>
-      <span id="notif-save"><EsaButton color="primary" size="md">Save preferences</EsaButton></span>
+      <span id="notif-cancel"><EsaButton variant="ghost" appearance="outline" size="md">Cancel</EsaButton></span>
+      <span id="notif-save"><EsaButton variant="primary" size="md">Save preferences</EsaButton></span>
     </div>
   </esa-dialog>
 
@@ -1975,8 +1975,8 @@ const payload = {
     --side-dialog-inset: 44px;
   }
   #permit-dialog.is-stacked {
-    --color-backdrop: transparent;
-    --backdrop-filter: none;
+    --color-background-overlay-backdrop: transparent;
+    --side-dialog-backdrop-filter: none;
   }
 
   /* Pre-upgrade FOUC guard: only the default (Map) panel shows until the lego defines */
@@ -1990,7 +1990,7 @@ const payload = {
     width: 100%;
     height: 70vh;
     min-height: 480px;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
     overflow: hidden;
   }
@@ -2016,8 +2016,8 @@ const payload = {
     flex-wrap: wrap;
     margin-bottom: var(--spacing-300);
     padding: var(--spacing-250) var(--spacing-400);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
   }
   .map-filterbar__group {
@@ -2028,13 +2028,13 @@ const payload = {
   .map-filterbar__divider {
     width: 1px;
     align-self: stretch;
-    background: var(--color-border);
+    background: var(--color-border-default);
     margin: 0 var(--spacing-100);
   }
   .map-filterbar__label {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
   .map-filterbar__actions {
@@ -2053,18 +2053,18 @@ const payload = {
     flex-direction: column;
     gap: var(--spacing-150);
     padding: var(--spacing-300) var(--spacing-400);
-    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
+    background: color-mix(in srgb, var(--color-background-elevation-raised) 94%, transparent);
     backdrop-filter: blur(4px);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
-    box-shadow: var(--shadow-400);
+    box-shadow: var(--elevation-5);
     font-size: 0.875rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .map-legend__title {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .map-legend__row {
     display: flex;
@@ -2085,8 +2085,8 @@ const payload = {
     gap: var(--spacing-200);
     margin-top: var(--spacing-400);
     padding: var(--spacing-300) var(--spacing-400);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
   }
   .burndown__head {
@@ -2098,16 +2098,16 @@ const payload = {
   }
   .burndown__title {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .burndown__summary {
     font-size: 0.875rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .burndown__summary strong {
     color: var(--st-cleared);
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--typography-font-weight-bold);
   }
   .burndown__bar {
     display: flex;
@@ -2117,7 +2117,7 @@ const payload = {
     background: var(--bcn-gray-100);
   }
   .burndown__bar > :global(div + div) {
-    border-left: 1px solid var(--color-surface);
+    border-left: 1px solid var(--color-background-elevation-raised);
   }
   .burndown__legend {
     list-style: none;
@@ -2132,7 +2132,7 @@ const payload = {
     align-items: center;
     gap: var(--spacing-150);
     font-size: 0.875rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .burndown__legend-item[data-empty='true'] {
     opacity: 0.4;
@@ -2144,14 +2144,14 @@ const payload = {
     flex-shrink: 0;
   }
   .burndown__legend-label {
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .burndown__legend-mi {
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .burndown__legend-pct {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
 
   /* ═══ Insight cards (lists injected by JS → ins-* classes are :global) ═══
@@ -2173,20 +2173,20 @@ const payload = {
     flex-direction: column;
     gap: var(--spacing-200);
     padding: var(--spacing-400);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
   }
   .ins-card__title {
     margin: 0;
     font-size: 0.9375rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .ins-card__sub {
     margin: calc(-1 * var(--spacing-100)) 0 0;
     font-size: 0.8125rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .ins-list {
     list-style: none;
@@ -2202,7 +2202,7 @@ const payload = {
     padding: var(--spacing-200) 0;
   }
   :global(.ins-row + .ins-row) {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   :global(.ins-row[data-ins-permit]) {
     cursor: pointer;
@@ -2226,11 +2226,11 @@ const payload = {
     flex-direction: column;
     gap: 1px;
     font-size: 0.875rem;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   :global(.ins-row__sub) {
     font-size: 0.75rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   :global(.ins-row__val) {
     display: flex;
@@ -2238,8 +2238,8 @@ const payload = {
     align-items: flex-end;
     gap: 1px;
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
   }
@@ -2258,8 +2258,8 @@ const payload = {
     gap: var(--spacing-200);
     margin-top: var(--spacing-400);
     padding: var(--spacing-400);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
   }
   .ctb__head {
@@ -2272,13 +2272,13 @@ const payload = {
   .ctb__title {
     margin: 0;
     font-size: 0.9375rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .ctb__sub {
     margin: 0;
     font-size: 0.8125rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .ctb__axisrow {
     display: grid;
@@ -2294,12 +2294,12 @@ const payload = {
     top: 0;
     transform: translateX(-50%);
     font-size: 0.75rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
   :global(.ctb-tick--today) {
-    color: var(--color-primary);
-    font-weight: var(--font-weight-semibold);
+    color: var(--color-background-brand);
+    font-weight: var(--typography-font-weight-semibold);
   }
   .ctb__rows {
     list-style: none;
@@ -2312,7 +2312,7 @@ const payload = {
     gap: var(--spacing-400);
     align-items: center;
     padding: var(--spacing-200) 0;
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
     cursor: pointer;
   }
   :global(.ctb-row:hover) {
@@ -2323,13 +2323,13 @@ const payload = {
     flex-direction: column;
     gap: 1px;
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   :global(.ctb-row__sub) {
     font-size: 0.75rem;
-    font-weight: var(--font-weight-regular);
-    color: var(--color-text-tertiary);
+    font-weight: var(--typography-font-weight-regular);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -2355,7 +2355,7 @@ const payload = {
     width: 12px;
     height: 12px;
     border-radius: 50%;
-    border: 2px solid var(--color-surface);
+    border: 2px solid var(--color-background-elevation-raised);
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
   }
   :global(.ctb-row__meta) {
@@ -2366,8 +2366,8 @@ const payload = {
     min-width: 0;
     text-align: right;
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     font-variant-numeric: tabular-nums;
   }
 
@@ -2378,8 +2378,8 @@ const payload = {
     gap: var(--spacing-300);
     margin-bottom: var(--spacing-300);
     padding: var(--spacing-200) var(--spacing-400);
-    background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
-    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
+    background: color-mix(in srgb, var(--color-background-brand) 5%, var(--color-background-elevation-raised));
+    border: 1px solid color-mix(in srgb, var(--color-background-brand) 25%, var(--color-border-default));
     border-radius: var(--radius-200);
   }
   .bulk-bar[hidden] {
@@ -2387,8 +2387,8 @@ const payload = {
   }
   .bulk-bar__count {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     margin-right: var(--spacing-200);
   }
   .bulk-bar :global(esa-select) {
@@ -2410,8 +2410,8 @@ const payload = {
   /* ═══ Filter bar — carded two-band, faithful copy of requirement-tracker's
      page glue. Every control inside is a lego. ═══ */
   .bcn-filterbar {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     margin-bottom: var(--spacing-400);
   }
@@ -2427,7 +2427,7 @@ const payload = {
     align-items: center;
     gap: var(--spacing-300);
     padding: var(--spacing-300) var(--spacing-400);
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--color-border-default);
     flex-wrap: wrap;
   }
   .bcn-filterbar__group {
@@ -2436,9 +2436,9 @@ const payload = {
     gap: var(--spacing-300);
   }
   .bcn-filterbar__label {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
   .bcn-filterbar__search {
@@ -2477,8 +2477,8 @@ const payload = {
     justify-content: space-between;
     gap: var(--spacing-400);
     padding: var(--spacing-200) var(--spacing-400);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
     border-top: 0;
     border-radius: 0 0 var(--radius-100) var(--radius-100);
   }
@@ -2486,12 +2486,12 @@ const payload = {
     display: flex;
     align-items: center;
     gap: var(--spacing-400);
-    font-size: var(--type-size-100);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-100);
+    color: var(--color-content-default-secondary);
     font-variant-numeric: tabular-nums;
   }
   .filtered-rows-count {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .filtered-rows-count[hidden] {
     display: none;
@@ -2512,7 +2512,7 @@ const payload = {
     border-radius: var(--radius-100);
     font-size: 0.75rem;
     line-height: 1.5;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     white-space: nowrap;
     background: color-mix(in srgb, var(--_chip) 16%, transparent);
     color: color-mix(in srgb, var(--_chip) 70%, #1a1a1a);
@@ -2541,9 +2541,9 @@ const payload = {
   }
   .sd__title {
     margin: 0;
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .sd__meta {
     display: grid;
@@ -2551,8 +2551,8 @@ const payload = {
     gap: var(--spacing-300) var(--spacing-400);
     margin: 0;
     padding: var(--spacing-400);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
   }
   .sd__kv {
@@ -2562,20 +2562,20 @@ const payload = {
   }
   .sd__kv dt {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--typography-font-weight-medium);
     color: var(--form-label-color);
   }
   .sd__kv dd {
     margin: 0;
     font-size: 0.9375rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .sd__section {
     margin: 0;
     font-size: 0.9375rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .sd__section :global(.esa-badge) {
     vertical-align: middle;
@@ -2599,15 +2599,15 @@ const payload = {
     width: 100%;
     padding: var(--spacing-300);
     text-align: left;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
     cursor: pointer;
     transition: border-color 120ms ease, background 120ms ease;
   }
   .sd-permit__btn:hover {
     background: var(--grid-row-bg-hover);
-    border-color: var(--color-border-strong);
+    border-color: var(--color-border-default-strong);
   }
   .sd-permit__main {
     display: flex;
@@ -2618,12 +2618,12 @@ const payload = {
   }
   .sd-permit__name {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .sd-permit__agency {
     font-size: 0.8125rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .sd-permit__meta {
     display: flex;
@@ -2642,11 +2642,11 @@ const payload = {
     padding: 1px var(--spacing-200);
     border-radius: var(--radius-full);
     font-size: 0.6875rem;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     text-transform: uppercase;
     letter-spacing: 0.03em;
-    background: var(--color-text-primary);
-    color: var(--color-surface);
+    background: var(--color-content-default);
+    color: var(--color-background-elevation-raised);
     white-space: nowrap;
   }
   .sd-permit__gating[hidden] {
@@ -2654,11 +2654,11 @@ const payload = {
   }
   .sd-permit__date {
     font-size: 0.8125rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
   .sd-permit__btn :global(.esa-icon) {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     flex-shrink: 0;
   }
 
@@ -2678,9 +2678,9 @@ const payload = {
   }
   .pd__title {
     margin: 0;
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .pd__section {
     padding-block: var(--spacing-400);
@@ -2689,20 +2689,20 @@ const payload = {
     padding-top: var(--spacing-100);
   }
   .pd__section + .pd__section {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .pd__section-head {
     display: flex;
     align-items: center;
     gap: var(--spacing-200);
     margin: 0 0 var(--spacing-300);
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .pd__section-head :global(.esa-icon) {
     flex-shrink: 0;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .pd__group {
     display: flex;
@@ -2716,9 +2716,9 @@ const payload = {
   }
   /* Read-only values slotted into BcnKeyValue (mirrors its __val tier) */
   .pd__kv-val {
-    font-size: var(--form-font-size-md);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--typography-label-md-font-size);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .pd__footer {
     display: flex;
@@ -2761,7 +2761,7 @@ const payload = {
      and its label sit close together (the default 1.3/1.6 leave a big gap). */
   .exec__hero-headline {
     --stat-value-size: clamp(3rem, 7vw, 4.25rem);
-    --stat-value-weight: var(--font-weight-bold);
+    --stat-value-weight: var(--typography-font-weight-bold);
     --line-height-tight: 1;
     --line-height-normal: 1.35;
   }
@@ -2781,7 +2781,7 @@ const payload = {
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    height: calc(var(--type-size-700, 2.25rem) * 1.3);
+    height: calc(var(--font-size-700, 2.25rem) * 1.3);
   }
   .exec__kpi-icon {
     display: inline-flex;
@@ -2790,8 +2790,8 @@ const payload = {
     width: 32px;
     height: 32px;
     border-radius: var(--radius-full);
-    background: var(--color-surface-sunken);
-    color: var(--color-text-tertiary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-content-default-tertiary);
     flex-shrink: 0;
   }
   .exec__kpi-icon--up {
@@ -2806,9 +2806,9 @@ const payload = {
   .exec__asof {
     margin: var(--spacing-400) 0 0;
     text-align: right;
-    font-size: var(--type-size-100);
+    font-size: var(--font-size-100);
     font-style: italic;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
 
   /* Status donut (conic-gradient; hero % in the hole) + legend */
@@ -2835,7 +2835,7 @@ const payload = {
     position: absolute;
     inset: 30px;
     border-radius: var(--radius-full);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -2843,15 +2843,15 @@ const payload = {
     gap: 1px;
   }
   .exec__donut-pct {
-    font-family: var(--font-display, var(--font-sans));
-    font-size: var(--type-size-500);
-    font-weight: var(--font-weight-bold);
-    color: var(--color-text-primary);
+    font-family: var(--typography-font-family-display, var(--typography-font-family-sans));
+    font-size: var(--font-size-500);
+    font-weight: var(--typography-font-weight-bold);
+    color: var(--color-content-default);
     line-height: 1;
   }
   .exec__donut-cap {
-    font-size: var(--type-size-100);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-100);
+    color: var(--color-content-default-tertiary);
   }
   .exec__legend {
     list-style: none;
@@ -2867,7 +2867,7 @@ const payload = {
     grid-template-columns: auto minmax(0, 1fr) auto auto;
     align-items: center;
     gap: var(--spacing-200);
-    font-size: var(--type-size-150);
+    font-size: var(--font-size-150);
     white-space: nowrap;
   }
   :global(.exec-legend__item[data-empty='true']) {
@@ -2880,17 +2880,17 @@ const payload = {
     flex-shrink: 0;
   }
   :global(.exec-legend__label) {
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     overflow: hidden;
     text-overflow: ellipsis;
   }
   :global(.exec-legend__mi) {
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     font-variant-numeric: tabular-nums;
   }
   :global(.exec-legend__pct) {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     font-variant-numeric: tabular-nums;
     min-width: 34px;
     text-align: right;
@@ -2917,18 +2917,18 @@ const payload = {
     gap: var(--spacing-300);
   }
   :global(.exec-path__name) {
-    font-size: var(--type-size-250);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-250);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   :global(.exec-path__metric) {
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
     font-variant-numeric: tabular-nums;
   }
   :global(.exec-path__metric strong) {
     color: var(--st-cleared);
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--typography-font-weight-bold);
   }
   :global(.exec-path__bar) {
     display: flex;
@@ -2941,19 +2941,19 @@ const payload = {
     height: 100%;
   }
   :global(.exec-path__seg + .exec-path__seg) {
-    border-left: 1px solid var(--color-surface);
+    border-left: 1px solid var(--color-background-elevation-raised);
   }
   :global(.exec-path__foot) {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
     gap: var(--spacing-300);
-    font-size: var(--type-size-100);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-100);
+    color: var(--color-content-default-tertiary);
   }
   :global(.exec-path__clearby) {
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-secondary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-secondary);
     font-variant-numeric: tabular-nums;
   }
 
@@ -2973,11 +2973,11 @@ const payload = {
     overflow: visible;
   }
   :global(.bu-grid) {
-    stroke: var(--color-border-light);
+    stroke: var(--color-border-default-subtle);
     stroke-width: 1;
   }
   :global(.bu-target) {
-    stroke: var(--color-text-tertiary);
+    stroke: var(--color-content-default-tertiary);
     stroke-width: 1.5;
     stroke-dasharray: 2 3;
   }
@@ -2990,7 +2990,7 @@ const payload = {
     opacity: 0.75;
   }
   :global(.bu-today) {
-    stroke: var(--color-primary);
+    stroke: var(--color-background-brand);
     stroke-width: 1;
     stroke-dasharray: 3 3;
     opacity: 0.6;
@@ -3008,22 +3008,22 @@ const payload = {
   }
   :global(.bu-dot) {
     fill: var(--st-cleared);
-    stroke: var(--color-surface);
+    stroke: var(--color-background-elevation-raised);
     stroke-width: 1.5;
   }
   :global(.bu-ylabel) {
-    fill: var(--color-text-tertiary);
+    fill: var(--color-content-default-tertiary);
     font-size: 12.5px;
     text-anchor: end;
     dominant-baseline: middle;
   }
   :global(.bu-xlabel) {
-    fill: var(--color-text-tertiary);
+    fill: var(--color-content-default-tertiary);
     font-size: 12.5px;
     text-anchor: middle;
   }
   :global(.bu-todaylabel) {
-    fill: var(--color-primary);
+    fill: var(--color-background-brand);
     font-size: 13.5px;
     font-weight: 600;
     text-anchor: middle;
@@ -3041,8 +3041,8 @@ const payload = {
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-200) var(--spacing-500);
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
   }
   .exec__burnup-legend li {
     display: flex;
@@ -3064,7 +3064,7 @@ const payload = {
     border-top-style: dashed;
   }
   .exec__burnup-key--target {
-    border-top-color: var(--color-text-tertiary);
+    border-top-color: var(--color-content-default-tertiary);
     border-top-style: dotted;
   }
 
@@ -3115,7 +3115,7 @@ const payload = {
   :global(.pd-comment--empty) {
     display: block;
     font-size: 0.875rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   :global(.pd-comment__avatar) {
     display: inline-flex;
@@ -3124,10 +3124,10 @@ const payload = {
     width: 28px;
     height: 28px;
     border-radius: 50%;
-    background: var(--_c, var(--color-secondary));
+    background: var(--_c, var(--color-background-brand-muted));
     color: #fff;
     font-size: 0.6875rem;
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--typography-font-weight-bold);
     flex-shrink: 0;
     letter-spacing: 0.02em;
   }
@@ -3150,25 +3150,25 @@ const payload = {
   }
   :global(.pd-comment__author) {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   :global(.pd-comment__time) {
     font-size: 0.75rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   :global(.pd-comment__text) {
     margin: 0;
     font-size: 0.875rem;
     line-height: 1.5;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     white-space: pre-wrap;
     word-break: break-word;
   }
   :global(.pd-mention) {
-    color: var(--color-primary);
-    font-weight: var(--font-weight-semibold);
-    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    color: var(--color-background-brand);
+    font-weight: var(--typography-font-weight-semibold);
+    background: color-mix(in srgb, var(--color-background-brand) 10%, transparent);
     border-radius: var(--radius-050);
     padding: 0 2px;
   }
@@ -3184,10 +3184,10 @@ const payload = {
     height: 18px;
     padding: 0 5px;
     border-radius: var(--radius-full);
-    background: var(--color-surface-sunken);
-    color: var(--color-text-secondary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-content-default-secondary);
     font-size: 0.6875rem;
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--typography-font-weight-bold);
     vertical-align: middle;
     margin-left: var(--spacing-100);
   }
@@ -3213,10 +3213,10 @@ const payload = {
     list-style: none;
     margin: 0;
     padding: var(--spacing-100);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
-    box-shadow: var(--shadow-400);
+    box-shadow: var(--elevation-5);
     max-height: 208px;
     overflow-y: auto;
   }
@@ -3230,7 +3230,7 @@ const payload = {
     padding: var(--spacing-200);
     border-radius: var(--radius-100);
     font-size: 0.875rem;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     cursor: pointer;
   }
   :global(.pd-mention-opt:hover) {
@@ -3244,7 +3244,7 @@ const payload = {
   }
   .pd__compose-hint {
     font-size: 0.8125rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   /* Notification settings dialog */
@@ -3257,10 +3257,10 @@ const payload = {
     margin: 0;
     font-size: 0.9375rem;
     line-height: 1.6;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .notif__lede strong {
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .notif__list {
     list-style: none;
@@ -3277,7 +3277,7 @@ const payload = {
     padding: var(--spacing-300) 0;
   }
   .notif__row + .notif__row {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .notif__text {
     display: flex;
@@ -3287,12 +3287,12 @@ const payload = {
   }
   .notif__title {
     font-size: 0.9375rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .notif__sub {
     font-size: 0.8125rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .notif :global(esa-switch-toggle) {
     flex-shrink: 0;
diff --git a/src/pages/prototypes/project-dashboard.astro b/src/pages/prototypes/project-dashboard.astro
index 3c84e139..042d611c 100644
--- a/src/pages/prototypes/project-dashboard.astro
+++ b/src/pages/prototypes/project-dashboard.astro
@@ -91,7 +91,7 @@ import { PROJECT_INFO } from '../../data/project-data';
                 id: 'boundary',
                 ring: PROJECT_BOUNDARY_RING,
                 label: `${PROJECT.name} boundary`,
-                color: 'var(--color-secondary)',
+                color: 'var(--color-background-brand-muted)',
               },
             ]}
             lines={[
@@ -99,17 +99,17 @@ import { PROJECT_INFO } from '../../data/project-data';
                 id: 'alignment',
                 path: PROJECT_ALIGNMENT_PATH,
                 label: 'Tunnel alignment',
-                color: 'var(--color-secondary)',
+                color: 'var(--color-background-brand-muted)',
               },
             ]}
             sourceName="Boundary source"
             sourceLabel={BOUNDARY_SOURCE}
             legend={[
-              { label: 'Project boundary', color: 'var(--color-secondary)', shape: 'area' },
-              { label: 'Tunnel alignment', color: 'var(--color-secondary)', shape: 'line' },
+              { label: 'Project boundary', color: 'var(--color-background-brand-muted)', shape: 'area' },
+              { label: 'Tunnel alignment', color: 'var(--color-background-brand-muted)', shape: 'line' },
             ]}
           >
-            <EsaButton slot="modal-actions" color="ghost" appearance="outline" size="sm">
+            <EsaButton slot="modal-actions" variant="ghost" appearance="outline" size="sm">
               Upload boundary
             </EsaButton>
           </BcnFootprintMap>
diff --git a/src/pages/prototypes/requirement-reference.astro b/src/pages/prototypes/requirement-reference.astro
index ca9be6d4..64371374 100644
--- a/src/pages/prototypes/requirement-reference.astro
+++ b/src/pages/prototypes/requirement-reference.astro
@@ -10,7 +10,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import EsaButton from '@esa/ecology/esa-button.astro';
 import EsaPill from '@esa/ecology/esa-pill.astro';
 import EsaIcon from '@esa/ecology/esa-icon.astro';
-import EsaIconLink from '@esa/ecology/esa-icon-link.astro';
+import EsaIconLink from '@esa/ecology/esa-button.astro';
 import BcnRequirementReference from '../../components/bcn/BcnRequirementReference.astro';
 import { resolveFields, type RequirementReference } from '../../components/bcn/requirement-reference';
 import { withBase } from '../../lib/base';
@@ -110,8 +110,8 @@ const trioCount = (r: RequirementReference) => [r.species, r.season, r.construct
       <iframe class="pdf__frame" src={`${withBase('/source-docs/feir-sample.pdf')}?v=187#view=FitH`} title="Source document — 3600 Alameda FEIR (sample)"></iframe>
     </div>
     <span slot="footer" class="srcfoot">
-      <EsaIconLink href={withBase('/source-docs/feir-sample.pdf')} icon="external-link" size="sm" weight="medium">Open full document</EsaIconLink>
-      <span id="source-close"><EsaButton color="primary" size="sm">Close</EsaButton></span>
+      <EsaIconLink variant="chrome" href={withBase('/source-docs/feir-sample.pdf')} icon="external-link" size="sm">Open full document</EsaIconLink>
+      <span id="source-close"><EsaButton variant="primary" size="sm">Close</EsaButton></span>
     </span>
   </esa-side-dialog>
 </BaseLayout>
@@ -128,31 +128,31 @@ const trioCount = (r: RequirementReference) => [r.species, r.season, r.construct
   /* ═══ Lab scaffolding (not product chrome) ═══ */
   .lab { max-width: 960px; margin: 0 auto; padding: var(--spacing-700, 2.5rem) var(--spacing-500) var(--spacing-800, 4rem); display: flex; flex-direction: column; gap: var(--spacing-700, 2.5rem); }
   .lab__head { display: flex; flex-direction: column; gap: var(--spacing-300); }
-  .lab__title { margin: 0; font-family: var(--font-decorative); font-size: 2rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .lab__intro { margin: 0; max-width: 74ch; font-size: var(--type-size-200, 1rem); line-height: 1.6; color: var(--color-text-secondary); }
-  .lab__intro strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
+  .lab__title { margin: 0; font-family: var(--font-decorative); font-size: 2rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .lab__intro { margin: 0; max-width: 74ch; font-size: var(--font-size-200, 1rem); line-height: 1.6; color: var(--color-content-default-secondary); }
+  .lab__intro strong { color: var(--color-content-default); font-weight: var(--typography-font-weight-semibold); }
   .lab__intro em { font-style: italic; }
 
   .opt { display: flex; flex-direction: column; gap: var(--spacing-300); }
   .opt__bar { display: flex; align-items: baseline; gap: var(--spacing-300); flex-wrap: wrap; }
-  .opt__name { font-size: var(--type-size-300, 1.125rem); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .opt__note { font-size: var(--type-size-100, 0.875rem); color: var(--color-text-tertiary); }
-  .opt__stage { display: flex; flex-direction: column; gap: var(--spacing-400); padding: var(--spacing-600, 2rem); background: var(--color-surface, #fff); border: 1px dashed var(--bcn-gray-200); border-radius: var(--radius-400, 0.75rem); }
+  .opt__name { font-size: var(--font-size-300, 1.125rem); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .opt__note { font-size: var(--font-size-100, 0.875rem); color: var(--color-content-default-tertiary); }
+  .opt__stage { display: flex; flex-direction: column; gap: var(--spacing-400); padding: var(--spacing-600, 2rem); background: var(--color-background-elevation-raised, #fff); border: 1px dashed var(--bcn-gray-200); border-radius: var(--radius-400, 0.75rem); }
 
   /* Muted dialog-header echo (context only — not part of the component). */
   .ctx { display: inline-flex; align-items: center; gap: var(--spacing-200); flex-wrap: wrap; padding: var(--spacing-200) var(--spacing-300); background: var(--bcn-gray-50); border: 1px dashed var(--bcn-gray-300); border-radius: var(--radius-300, 0.5rem); align-self: flex-start; opacity: 0.9; }
-  .ctx__tag { font-size: var(--type-size-100, 0.875rem); color: var(--color-text-tertiary); }
-  .ctx__title { font-family: var(--font-decorative); font-size: 1.125rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
+  .ctx__tag { font-size: var(--font-size-100, 0.875rem); color: var(--color-content-default-tertiary); }
+  .ctx__title { font-family: var(--font-decorative); font-size: 1.125rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
   /* bcn-lego-checked: this purple Commitment-ID badge echoes the dialog header for
      context only (Beacon identity token --color-commitment; no esa- purple variant) —
      it is NOT part of the component. Lab scaffolding. */
-  .commitment-id { flex-shrink: 0; padding: 0.125rem 0.375rem; border-radius: var(--radius-100, 0.25rem); font-size: var(--type-size-100, 0.875rem); font-weight: var(--font-weight-semibold); line-height: 1.4; white-space: nowrap; color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); }
+  .commitment-id { flex-shrink: 0; padding: 0.125rem 0.375rem; border-radius: var(--radius-100, 0.25rem); font-size: var(--font-size-100, 0.875rem); font-weight: var(--typography-font-weight-semibold); line-height: 1.4; white-space: nowrap; color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); }
 
   /* ═══ Shared PDF drawer (esa-side-dialog slotted body) ═══ */
   .srcbar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-300); padding-bottom: var(--spacing-300); margin-bottom: var(--spacing-300); border-bottom: 1px solid var(--bcn-gray-200); flex-wrap: wrap; }
-  .srcbar__doc { display: inline-flex; align-items: center; gap: var(--spacing-200); font-size: var(--type-size-100, 0.875rem); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .srcbar__doc :global(.esa-icon) { color: var(--color-text-secondary); }
-  .srcbar__loc { font-size: var(--type-size-100, 0.875rem); color: var(--color-text-tertiary); }
+  .srcbar__doc { display: inline-flex; align-items: center; gap: var(--spacing-200); font-size: var(--font-size-100, 0.875rem); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .srcbar__doc :global(.esa-icon) { color: var(--color-content-default-secondary); }
+  .srcbar__loc { font-size: var(--font-size-100, 0.875rem); color: var(--color-content-default-tertiary); }
   .pdf { height: calc(100vh - 11rem); min-height: 360px; border: 1px solid var(--bcn-gray-200); border-radius: var(--radius-300, 0.5rem); overflow: hidden; background: var(--bcn-gray-100); }
   .pdf__frame { width: 100%; height: 100%; border: 0; }
   .srcfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-400); width: 100%; }
diff --git a/src/pages/prototypes/requirement-tracker.astro b/src/pages/prototypes/requirement-tracker.astro
index 1a4bcd35..4054f0e2 100644
--- a/src/pages/prototypes/requirement-tracker.astro
+++ b/src/pages/prototypes/requirement-tracker.astro
@@ -19,10 +19,10 @@ import PageLayout from '../../layouts/PageLayout.astro';
 import EsaIcon from '@esa/ecology/esa-icon.astro';
 import EsaButton from '@esa/ecology/esa-button.astro';
 import EsaBadge from '@esa/ecology/esa-badge.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import EsaPill from '@esa/ecology/esa-pill.astro';
 import EsaEmptyState from '@esa/ecology/esa-empty-state.astro';
-import EsaIconLink from '@esa/ecology/esa-icon-link.astro';
+import EsaIconLink from '@esa/ecology/esa-button.astro';
 import EsaCollapsible from '@esa/ecology/esa-collapsible.astro';
 import FilterContainer from '@esa/ecology/esa-filter-container.astro';
 import FilterClearButton from '@esa/ecology/esa-filter-clear-button.astro';
@@ -196,7 +196,7 @@ const prologisNav = [
         </div>
         <div class="bcn-filterbar__search">
           <esa-text-field id="tt-search" placeholder="Search requirements…" size="md"></esa-text-field>
-          <span id="tt-search-clear" hidden><EsaIconButton icon="x" label="Clear search" size="sm" /></span>
+          <span id="tt-search-clear" hidden><EsaIconButton variant="chrome" iconOnly icon="x" label="Clear search" size="sm" /></span>
         </div>
       </div>
       <div class="bcn-filterbar__bottom">
@@ -220,7 +220,7 @@ const prologisNav = [
 
       <!-- Grid footer: download · record count -->
       <div class="table-footer">
-        <span id="tt-download"><EsaButton color="ghost" appearance="outline" size="sm" icon="download">Download as CSV</EsaButton></span>
+        <span id="tt-download"><EsaButton variant="ghost" appearance="outline" size="sm" icon="download">Download as CSV</EsaButton></span>
         <div class="row-count-data">
           Total Records: <span id="tt-total">0</span>
           <span id="tt-filtered" class="filtered-rows-count" hidden></span>
@@ -252,7 +252,7 @@ const prologisNav = [
   <esa-dialog
     id="rd"
     size="lg"
-    style="--_dialog-width: min(1920px, 94vw); --_dialog-padding: 0; --_dialog-bg: var(--color-surface, #fff); --_dialog-header-border: var(--color-border, #dcdcdc); --z-modal-backdrop: 1150; --z-modal: 1200;"
+    style="--_dialog-width: min(1920px, 94vw); --_dialog-padding: 0; --_dialog-bg: var(--color-background-elevation-raised, #fff); --_dialog-header-border: var(--color-border-default, #dcdcdc); --z-modal-backdrop: 1150; --z-modal: 1200;"
   >
     <!-- Own close button (not show-close-button) so the header scrim can cover it -->
     <div slot="header" class="bcn-dialog__head">
@@ -270,7 +270,7 @@ const prologisNav = [
           </span>
         </h1>
       </div>
-      <span class="bcn-dialog__head-close" id="rd-close"><EsaIconButton icon="x" label="Close dialog" /></span>
+      <span class="bcn-dialog__head-close" id="rd-close"><EsaIconButton variant="chrome" iconOnly icon="x" label="Close dialog" /></span>
       <div class="bcn-dialog__head-scrim" aria-hidden="true"></div>
     </div>
 
@@ -335,8 +335,8 @@ const prologisNav = [
             <span class="bcn-evidence-sheet__expected">Expected: <span id="rd-exp-evidence">—</span></span>
           </div>
           <div class="bcn-evidence-sheet__head-actions">
-            <span id="rd-evidence-download-all"><EsaIconButton icon="download" label="Download all evidence as .zip" size="md" /></span>
-            <span id="rd-evidence-close"><EsaIconButton icon="x" label="Close evidence" size="md" /></span>
+            <span id="rd-evidence-download-all"><EsaIconButton variant="chrome" iconOnly icon="download" label="Download all evidence as .zip" size="md" /></span>
+            <span id="rd-evidence-close"><EsaIconButton variant="chrome" iconOnly icon="x" label="Close evidence" size="md" /></span>
           </div>
         </header>
         <div class="bcn-evidence-sheet__body">
@@ -351,7 +351,7 @@ const prologisNav = [
         <!-- Wrapper carries the id/aria the sheet JS toggles; click bubbles from the
              EsaButton (same pattern as Cancel/Save). Keeps the sheet wiring unchanged. -->
         <span id="rd-evidence-trigger" class="bcn-dialog__evidence-btn" aria-controls="rd-evidence-drawer" aria-expanded="false">
-          <EsaButton color="ghost">
+          <EsaButton variant="ghost">
             <span class="bcn-dialog__evidence-btn-label">
               <EsaIcon name="paperclip" size="sm" paths="<path d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/>" />
               Add Evidence
@@ -359,8 +359,8 @@ const prologisNav = [
             </span>
           </EsaButton>
         </span>
-        <span id="rd-cancel"><EsaButton color="ghost" appearance="outline">Cancel</EsaButton></span>
-        <span id="rd-save"><EsaButton color="primary">Save</EsaButton></span>
+        <span id="rd-cancel"><EsaButton variant="ghost" appearance="outline">Cancel</EsaButton></span>
+        <span id="rd-save"><EsaButton variant="primary">Save</EsaButton></span>
       </div>
     </div>
   </esa-dialog>
@@ -380,21 +380,21 @@ const prologisNav = [
       <esa-file-upload label="Add files" multiple accept=".pdf,.csv,.xlsx,.jpg,.jpeg,.png,.gif,.bmp,.zip"></esa-file-upload>
     </div>
     <span slot="footer" class="bcn-edit-foot">
-      <span id="rd-eoc-editor-cancel"><EsaButton color="ghost" appearance="outline">Cancel</EsaButton></span>
-      <span id="rd-eoc-editor-save"><EsaButton color="primary">Save</EsaButton></span>
+      <span id="rd-eoc-editor-cancel"><EsaButton variant="ghost" appearance="outline">Cancel</EsaButton></span>
+      <span id="rd-eoc-editor-save"><EsaButton variant="primary">Save</EsaButton></span>
     </span>
   </esa-side-dialog>
 
   <!-- Source-document viewer = esa-side-dialog lego at page root (half-page). The
        BcnRequirementReference [data-bcn-source] trigger opens it; lifts above the
        requirement dialog (z 1200) like the eoc editor. -->
-  <esa-side-dialog id="rd-source-drawer" heading={sourceDocTitle} size="lg" style="--_width: 66vw; --z-modal: 1300; --z-modal-backdrop: 1250; --backdrop-filter: blur(4px);">
+  <esa-side-dialog id="rd-source-drawer" heading={sourceDocTitle} size="lg" style="--_width: 66vw; --z-modal: 1300; --z-modal-backdrop: 1250; --side-dialog-backdrop-filter: blur(4px);">
     <div class="bcn-source-pdf">
       <!-- Custom viewer chrome: navpanes=0/pagemode=none hide the thumbnail sidebar. -->
       <iframe class="bcn-source-pdf__frame" src={`${sourcePdf}?v=187#view=FitH&navpanes=0&pagemode=none`} title={`Source document — ${sourceDocTitle} (sample)`}></iframe>
     </div>
     <span slot="footer" class="bcn-source-foot">
-      <EsaIconLink href={sourceDocHref} trailing="arrow-right" size="sm" weight="medium">Open Source Document</EsaIconLink>
+      <EsaIconLink variant="chrome" href={sourceDocHref} iconRight="arrow-right" size="sm">Open Source Document</EsaIconLink>
     </span>
   </esa-side-dialog>
 
@@ -812,8 +812,8 @@ const prologisNav = [
   /* ═══ Filter bar — carded two-band (prod parity). Card shell + dividers + labels
      are composition glue; every control inside is a lego. ═══ */
   .bcn-filterbar {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     margin-bottom: var(--spacing-400);
   }
@@ -829,17 +829,17 @@ const prologisNav = [
     align-items: center;
     gap: var(--spacing-300);
     padding: var(--spacing-300) var(--spacing-400);
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--color-border-default);
     flex-wrap: wrap;
   }
   .bcn-filterbar__group { display: inline-flex; align-items: center; gap: var(--spacing-300); }
   .bcn-filterbar__label {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
-  .bcn-filterbar__divider { width: 1px; align-self: stretch; background: var(--color-border); margin: 0 var(--spacing-100); }
+  .bcn-filterbar__divider { width: 1px; align-self: stretch; background: var(--color-border-default); margin: 0 var(--spacing-100); }
   .bcn-filterbar__na { display: inline-flex; align-items: center; }
   .bcn-filterbar__search { margin-left: auto; display: inline-flex; align-items: center; gap: var(--spacing-150); min-width: 300px; }
   .bcn-filterbar__search :global(esa-text-field) { flex: 1; }
@@ -865,8 +865,8 @@ const prologisNav = [
     justify-content: space-between;
     gap: var(--spacing-400);
     padding: var(--spacing-200) var(--spacing-400);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
     border-top: 0;
     border-radius: 0 0 var(--radius-100) var(--radius-100);
   }
@@ -874,11 +874,11 @@ const prologisNav = [
     display: flex;
     align-items: center;
     gap: var(--spacing-400);
-    font-size: var(--type-size-100);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-100);
+    color: var(--color-content-default-secondary);
     font-variant-numeric: tabular-nums;
   }
-  .filtered-rows-count { color: var(--color-text-tertiary); }
+  .filtered-rows-count { color: var(--color-content-default-tertiary); }
   .filtered-rows-count[hidden] { display: none; }
 
   /* ═══ AG Grid cell renderers (global — AG Grid injects cells outside scope) ═══ */
@@ -891,7 +891,7 @@ const prologisNav = [
     border-radius: var(--radius-100);
     font-size: 0.75rem;
     line-height: 1.5;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     white-space: nowrap;
     background: color-mix(in srgb, var(--_chip) 16%, transparent);
     color: color-mix(in srgb, var(--_chip) 70%, #1a1a1a);
@@ -904,16 +904,16 @@ const prologisNav = [
     flex-shrink: 0;
   }
   :global(.bcn-grid-name) {
-    color: var(--color-text-link);
-    font-weight: var(--font-weight-regular);
+    color: var(--color-content-link);
+    font-weight: var(--typography-font-weight-regular);
     text-decoration: underline;
   }
-  :global(.bcn-grid-name:hover) { color: var(--color-primary-hover); }
+  :global(.bcn-grid-name:hover) { color: var(--color-background-brand-hover); }
 
   /* ═══ Requirement dialog SHELL — esa-dialog + bcn-* section components compose
      the content; these rules are the header, the fixed-height dual-scroll stage,
      and the slide-up evidence sheet geometry. ═══ */
-  .bcn-dialog__head { position: relative; flex: 1; display: flex; align-items: center; gap: var(--spacing-300); min-width: 0; padding: var(--spacing-500); background: var(--color-background); }
+  .bcn-dialog__head { position: relative; flex: 1; display: flex; align-items: center; gap: var(--spacing-300); min-width: 0; padding: var(--spacing-500); background: var(--color-background-default); }
   .bcn-dialog__head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
   /* Close → EsaIconButton; wrapper just anchors it right, above the header scrim */
   .bcn-dialog__head-close { flex-shrink: 0; margin-left: auto; z-index: 1; }
@@ -925,14 +925,14 @@ const prologisNav = [
      vertically-centered type badge. Badges keep the body font (no mono). */
   .bcn-dialog__title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-100); margin: 0; min-width: 0; }
   .bcn-dialog__title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-200); min-width: 0; }
-  .bcn-dialog__title-name { font-family: var(--font-decorative); font-size: 1.5rem; font-weight: var(--font-weight-semibold); line-height: 1.2; color: var(--color-text-primary); }
+  .bcn-dialog__title-name { font-family: var(--font-decorative); font-size: 1.5rem; font-weight: var(--typography-font-weight-semibold); line-height: 1.2; color: var(--color-content-default); }
   /* Commitment-ID badge — faithful port of Beacon .client-commitment-id (purple
      --color-commitment on a 12% tint), minus Roboto Mono. */
-  .bcn-dialog__badge { flex-shrink: 0; padding: 0.125rem 0.375rem; border-radius: var(--radius-100); font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); line-height: 1.4; white-space: nowrap; }
+  .bcn-dialog__badge { flex-shrink: 0; padding: 0.125rem 0.375rem; border-radius: var(--radius-100); font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); line-height: 1.4; white-space: nowrap; }
   .bcn-dialog__badge--commitment { color: var(--color-commitment); background: color-mix(in srgb, var(--color-commitment) 12%, white); }
   /* Besley glyphs sit low in their line box; nudge the type badge down to optically
      center it against the title's cap height. */
-  .bcn-dialog__badge--type { color: var(--color-text-secondary); background: var(--color-surface-sunken); transform: translateY(2px); }
+  .bcn-dialog__badge--type { color: var(--color-content-default-secondary); background: var(--color-background-elevation-sunken); transform: translateY(2px); }
 
   /* Footer slot: left Add-Evidence ghost trigger + right action row (Cancel/Save). */
   .bcn-dialog__footer { display: flex; flex-direction: column; width: 100%; min-width: 0; gap: var(--spacing-300); }
@@ -951,18 +951,18 @@ const prologisNav = [
   /* Each column scrolls independently within the fixed-height stage. gap-700 = plenty
      of breathing room between the reference block and Discussion. */
   .bcn-dialog__main { overflow-y: auto; min-height: 0; padding: var(--spacing-500); display: flex; flex-direction: column; gap: var(--spacing-700); min-width: 0; }
-  .bcn-dialog__side { overflow-y: auto; min-height: 0; padding: var(--spacing-500); border-left: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--spacing-400); background: var(--color-background); min-width: 0; }
+  .bcn-dialog__side { overflow-y: auto; min-height: 0; padding: var(--spacing-500); border-left: 1px solid var(--color-border-default); display: flex; flex-direction: column; gap: var(--spacing-400); background: var(--color-background-default); min-width: 0; }
 
   /* Lists — page-level sidebar text links (esa-icon + <a>) inside an EsaCollapsible. */
   .bcn-lists { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-200); margin: 0; padding: 0; list-style: none; }
-  .bcn-list-link { display: inline-flex; align-items: center; gap: var(--spacing-200); font-size: var(--form-font-size-md); font-weight: var(--font-weight-medium); color: var(--color-primary); text-decoration: none; }
+  .bcn-list-link { display: inline-flex; align-items: center; gap: var(--spacing-200); font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-medium); color: var(--color-background-brand); text-decoration: none; }
   .bcn-list-link:hover { text-decoration: underline; }
-  .bcn-list-link :global(.esa-icon) { color: var(--color-text-tertiary); flex-shrink: 0; }
+  .bcn-list-link :global(.esa-icon) { color: var(--color-content-default-tertiary); flex-shrink: 0; }
   /* Not-Applicable toggle: a divider ties it to the Details section instead of floating. */
-  .bcn-na-row { display: flex; align-items: center; padding-top: var(--spacing-400); border-top: 1px solid var(--color-border); }
+  .bcn-na-row { display: flex; align-items: center; padding-top: var(--spacing-400); border-top: 1px solid var(--color-border-default); }
 
   /* Source-document drawer (esa-side-dialog slotted body) */
-  .bcn-source-pdf { height: calc(100vh - 10rem); min-height: 360px; border: 1px solid var(--color-border); border-radius: var(--radius-300); overflow: hidden; background: var(--color-surface-sunken); }
+  .bcn-source-pdf { height: calc(100vh - 10rem); min-height: 360px; border: 1px solid var(--color-border-default); border-radius: var(--radius-300); overflow: hidden; background: var(--color-background-elevation-sunken); }
   .bcn-source-pdf__frame { width: 100%; height: 100%; border: 0; }
   .bcn-source-foot { display: flex; align-items: center; width: 100%; }
 
@@ -972,23 +972,23 @@ const prologisNav = [
   /* Slides up from the bottom of the stage, ~90% height. Bounded to the stage (a % of
      it, never a px floor) so esa-dialog's shadow panel (which clips overflow) never
      paints the sheet under the header. */
-  .bcn-evidence-sheet { position: absolute; left: var(--spacing-500); right: var(--spacing-500); bottom: 0; z-index: 5; height: 90%; min-height: 0; display: flex; flex-direction: column; background: var(--color-surface); border-top: 1px solid var(--color-border); border-radius: var(--radius-400) var(--radius-400) 0 0; box-shadow: none; transform: translateY(100%); transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 300ms ease; }
+  .bcn-evidence-sheet { position: absolute; left: var(--spacing-500); right: var(--spacing-500); bottom: 0; z-index: 5; height: 90%; min-height: 0; display: flex; flex-direction: column; background: var(--color-background-elevation-raised); border-top: 1px solid var(--color-border-default); border-radius: var(--radius-400) var(--radius-400) 0 0; box-shadow: none; transform: translateY(100%); transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 300ms ease; }
   .bcn-dialog__shell.is-evidence-open .bcn-evidence-sheet { transform: translateY(0); box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.18); }
-  .bcn-evidence-sheet__head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-300); padding: var(--spacing-400) var(--spacing-500); border-bottom: 1px solid var(--color-border); }
+  .bcn-evidence-sheet__head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-300); padding: var(--spacing-400) var(--spacing-500); border-bottom: 1px solid var(--color-border-default); }
   .bcn-evidence-sheet__heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-  .bcn-evidence-sheet__title { display: inline-flex; align-items: center; gap: var(--spacing-200); font-size: var(--type-size-200); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .bcn-evidence-sheet__expected { font-size: 0.8125rem; color: var(--color-text-tertiary); }
+  .bcn-evidence-sheet__title { display: inline-flex; align-items: center; gap: var(--spacing-200); font-size: var(--font-size-200); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .bcn-evidence-sheet__expected { font-size: 0.8125rem; color: var(--color-content-default-tertiary); }
   .bcn-evidence-sheet__head-actions { display: flex; align-items: center; gap: var(--spacing-050); flex-shrink: 0; }
   .bcn-evidence-sheet__body { flex: 1; overflow-y: auto; padding: var(--spacing-500); display: flex; flex-direction: column; gap: var(--spacing-400); }
 
   /* ── Evidence-of-Compliance editor (esa-side-dialog lego) — only body composition is ours ── */
   .bcn-edit-files-field { display: flex; flex-direction: column; gap: var(--spacing-200); }
-  .bcn-edit-files-field__label { font-size: 0.875rem; font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
+  .bcn-edit-files-field__label { font-size: 0.875rem; font-weight: var(--typography-font-weight-medium); color: var(--color-content-default); }
   .bcn-edit-foot { display: flex; gap: var(--spacing-300); justify-content: flex-end; }
 
   @media (max-width: 860px) {
     .bcn-dialog__grid { grid-template-columns: 1fr; }
-    .bcn-dialog__side { border-left: 0; border-top: 1px solid var(--color-border); }
+    .bcn-dialog__side { border-left: 0; border-top: 1px solid var(--color-border-default); }
   }
 </style>
 
@@ -996,6 +996,6 @@ const prologisNav = [
      scope, so override globally; only this page loads this rule). -->
 <style is:global>
   .page-layout__title h1 .esa-icon {
-    color: var(--color-secondary) !important;
+    color: var(--color-background-brand-muted) !important;
   }
 </style>
diff --git a/src/pages/prototypes/settings/tenants.astro b/src/pages/prototypes/settings/tenants.astro
index 2742d7ec..c291a3d4 100644
--- a/src/pages/prototypes/settings/tenants.astro
+++ b/src/pages/prototypes/settings/tenants.astro
@@ -107,10 +107,10 @@ const moduleOptions = MODULES.filter((m) => m !== 'Core');
       </div>
 
       <div class="cluster" data-gap="sm" slot="footer" style="--justify: flex-end">
-        <EsaButton color="ghost" appearance="outline" size="sm" id="new-tenant-cancel">
+        <EsaButton variant="ghost" appearance="outline" size="sm" id="new-tenant-cancel">
           Cancel
         </EsaButton>
-        <EsaButton color="primary" size="sm">Create tenant</EsaButton>
+        <EsaButton variant="primary" size="sm">Create tenant</EsaButton>
       </div>
     </esa-side-dialog>
   </PageLayout>
diff --git a/src/pages/prototypes/site-clearance-bio.astro b/src/pages/prototypes/site-clearance-bio.astro
index 78489a66..66a3ea0e 100644
--- a/src/pages/prototypes/site-clearance-bio.astro
+++ b/src/pages/prototypes/site-clearance-bio.astro
@@ -49,7 +49,7 @@ import AppShell from '../../layouts/AppShell.astro';
 import PageLayout from '../../layouts/PageLayout.astro';
 import '../../styles/beacon-map.css'; // shared Leaflet chrome (.leaflet-tooltip restyle for all map pages)
 import EsaButton from '@esa/ecology/esa-button.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import EsaIcon from '@esa/ecology/esa-icon.astro';
 import EsaBadge from '@esa/ecology/esa-badge.astro';
 import EsaCollapsible from '@esa/ecology/esa-collapsible.astro';
@@ -244,7 +244,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
             <span id="map-clear-filters"><FilterClearButton /></span>
             <div class="map-filterbar__buffer">
               <esa-switch-toggle id="buffer-toggle" label="Work Area Buffer" size="sm"></esa-switch-toggle>
-              <span id="buffer-edit"><EsaIconButton icon="pencil" label="Edit work area buffer" size="sm" /></span>
+              <span id="buffer-edit"><EsaIconButton variant="chrome" iconOnly icon="pencil" label="Edit work area buffer" size="sm" /></span>
             </div>
           </div>
         </div>
@@ -273,7 +273,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
                     class="map-legend__dot"
                     style={
                       status === 'provisional-block'
-                        ? `background:var(--color-surface); border: 2px solid var(${STATUS_META[status].colorVar}); box-sizing: border-box;`
+                        ? `background:var(--color-background-elevation-raised); border: 2px solid var(${STATUS_META[status].colorVar}); box-sizing: border-box;`
                         : `background:var(${STATUS_META[status].colorVar});`
                     }
                   />
@@ -309,7 +309,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
                 <div
                   style={`height:100%; flex: 0 0 ${(countFor(s) / totalWas) * 100}%; background:${
                     s === 'provisional-block'
-                      ? `repeating-linear-gradient(135deg, var(--st-provisional-block) 0 4px, var(--color-surface) 4px 7px)`
+                      ? `repeating-linear-gradient(135deg, var(--st-provisional-block) 0 4px, var(--color-background-elevation-raised) 4px 7px)`
                       : `var(${STATUS_META[s].colorVar})`
                   };`}
                   title={`${STATUS_META[s].label}: ${countFor(s)}`}
@@ -325,7 +325,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
                     class="readiness__swatch"
                     style={
                       status === 'provisional-block'
-                        ? `background:var(--color-surface); border: 2px solid var(${STATUS_META[status].colorVar}); box-sizing: border-box;`
+                        ? `background:var(--color-background-elevation-raised); border: 2px solid var(${STATUS_META[status].colorVar}); box-sizing: border-box;`
                         : `background:var(${STATUS_META[status].colorVar});`
                     }
                   />
@@ -348,7 +348,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
             </div>
             <div class="bcn-filterbar__search">
               <esa-text-field id="gc-search" placeholder="Search work areas…" size="md"></esa-text-field>
-              <span id="gc-search-clear" hidden><EsaIconButton icon="x" label="Clear search" size="sm" /></span>
+              <span id="gc-search-clear" hidden><EsaIconButton variant="chrome" iconOnly icon="x" label="Clear search" size="sm" /></span>
             </div>
           </div>
           <div class="bcn-filterbar__bottom">
@@ -368,7 +368,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
         </div>
 
         <div class="table-footer">
-          <span id="gc-download"><EsaButton color="ghost" appearance="outline" size="sm" icon="download">Download as CSV</EsaButton></span>
+          <span id="gc-download"><EsaButton variant="ghost" appearance="outline" size="sm" icon="download">Download as CSV</EsaButton></span>
           <div class="row-count-data">
             Total Records: <span id="gc-total">0</span>
             <span id="gc-filtered" class="filtered-rows-count" hidden></span>
@@ -441,7 +441,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
           Biological clearance
           <span class="bioclear__add">
             <span class="dd__count" id="dd-count">0 reviews</span>
-            <span id="dd-add"><EsaButton color="ghost" appearance="outline" size="sm">Add review</EsaButton></span>
+            <span id="dd-add"><EsaButton variant="ghost" appearance="outline" size="sm">Add review</EsaButton></span>
           </span>
         </h3>
 
@@ -458,8 +458,8 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
           <esa-text-field id="dd-reviewer" label="Reviewer" placeholder="Name (org)" size="sm"></esa-text-field>
           <esa-textarea id="dd-note" label="Note" rows="2" auto-resize size="sm"></esa-textarea>
           <div class="dd__formactions">
-            <span id="dd-cancel"><EsaButton color="ghost" appearance="outline" size="sm">Cancel</EsaButton></span>
-            <span id="dd-save"><EsaButton color="primary" size="sm">Save review</EsaButton></span>
+            <span id="dd-cancel"><EsaButton variant="ghost" appearance="outline" size="sm">Cancel</EsaButton></span>
+            <span id="dd-save"><EsaButton variant="primary" size="sm">Save review</EsaButton></span>
           </div>
         </div>
 
@@ -483,7 +483,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
           </div>
           <div class="wa__compose-foot">
             <span class="wa__compose-hint">Posting as Andy Lovseth</span>
-            <span id="wa-comment-post"><EsaButton color="primary" size="sm">Post comment</EsaButton></span>
+            <span id="wa-comment-post"><EsaButton variant="primary" size="sm">Post comment</EsaButton></span>
           </div>
         </div>
       </section>
@@ -551,7 +551,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
            tab, pans/zooms + pulses the marker (the ch2 go-to machinery). Hidden
            while editing — a mid-edit jump would discard the form. -->
       <span id="wa-showmap" class="wa__footer-start">
-        <EsaButton color="ghost" appearance="outline" size="md">
+        <EsaButton variant="ghost" appearance="outline" size="md">
           <EsaIcon
             name="map-pin"
             size="sm"
@@ -560,9 +560,9 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
           Show on map
         </EsaButton>
       </span>
-      <span id="wa-edit-btn"><EsaButton color="ghost" appearance="outline" size="md">Edit site details</EsaButton></span>
-      <span id="wa-cancel" hidden><EsaButton color="ghost" appearance="outline" size="md">Cancel</EsaButton></span>
-      <span id="wa-save" hidden><EsaButton color="primary" size="md">Save</EsaButton></span>
+      <span id="wa-edit-btn"><EsaButton variant="ghost" appearance="outline" size="md">Edit site details</EsaButton></span>
+      <span id="wa-cancel" hidden><EsaButton variant="ghost" appearance="outline" size="md">Cancel</EsaButton></span>
+      <span id="wa-save" hidden><EsaButton variant="primary" size="md">Save</EsaButton></span>
     </div>
   </esa-side-dialog>
 
@@ -611,7 +611,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     <div slot="footer" class="wa__footer">
       <!-- "Show on map" (round-5 ch5) — same jump as the work-area drawer's. -->
       <span id="obs-showmap" class="wa__footer-start">
-        <EsaButton color="ghost" appearance="outline" size="md">
+        <EsaButton variant="ghost" appearance="outline" size="md">
           <EsaIcon
             name="map-pin"
             size="sm"
@@ -638,8 +638,8 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
       </div>
     </div>
     <div slot="footer" class="wa__footer">
-      <span id="buf-cancel"><EsaButton color="ghost" appearance="outline" size="md">Cancel</EsaButton></span>
-      <span id="buf-save"><EsaButton color="primary" size="md">Save</EsaButton></span>
+      <span id="buf-cancel"><EsaButton variant="ghost" appearance="outline" size="md">Cancel</EsaButton></span>
+      <span id="buf-save"><EsaButton variant="primary" size="md">Save</EsaButton></span>
     </div>
   </esa-dialog>
 
@@ -649,10 +649,10 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     <span class="gate__chipwrap"><BcnStatusChip status="cleared" label="—" hex={STATUS_META.cleared.hex} /></span>
   </template>
   <template id="dd-edit-tpl">
-    <span class="rev__edit"><EsaIconButton icon="pencil" label="Edit review" size="sm" /></span>
+    <span class="rev__edit"><EsaIconButton variant="chrome" iconOnly icon="pencil" label="Edit review" size="sm" /></span>
   </template>
   <template id="note-del-tpl">
-    <span class="wnote__del"><EsaIconButton icon="trash-2" label="Delete note" size="sm" /></span>
+    <span class="wnote__del"><EsaIconButton variant="chrome" iconOnly icon="trash-2" label="Delete note" size="sm" /></span>
   </template>
 </AppShell>
 
@@ -1211,7 +1211,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
       // hollow markers (a solid segment would read as Blocked).
       const fill =
         status === 'provisional-block'
-          ? 'repeating-linear-gradient(135deg, var(--st-provisional-block) 0 4px, var(--color-surface) 4px 7px)'
+          ? 'repeating-linear-gradient(135deg, var(--st-provisional-block) 0 4px, var(--color-background-elevation-raised) 4px 7px)'
           : `var(--st-${status})`;
       div.style.cssText = `height:100%; flex: 0 0 ${(n / total) * 100}%; background:${fill};`;
       div.title = `${stLabel(status)}: ${n}`;
@@ -2449,7 +2449,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     width: 100%;
     height: 70vh;
     min-height: 480px;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
     overflow: hidden;
   }
@@ -2511,8 +2511,8 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     display: flex;
     flex-direction: column;
     margin-bottom: var(--spacing-300);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
   }
   .map-filterbar__row {
@@ -2523,12 +2523,12 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     padding: var(--spacing-250) var(--spacing-400);
   }
   .map-filterbar__row + .map-filterbar__row {
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--color-border-default);
   }
   .map-filterbar__label {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
   /* Go-to jumps (ch2) — right-aligned in the View row, beside the presets.
@@ -2543,10 +2543,11 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     gap: var(--spacing-200);
   }
   .map-filterbar__goto :global(esa-combobox) {
-    /* esa-combobox sm reads the Beacon form tokens (28px / 12px) — re-point
-       them to the filter legos' 32px / --type-size-150 line, scoped here. */
-    --form-height-sm: 32px;
-    --form-font-size-sm: var(--type-size-150);
+    /* The old 28-to-32px height re-point died with the hub's --form-height
+       surface; sm now sizes from --spacing padding like the filter legos beside
+       it, so the row shares a line without an override. Font alignment stays —
+       the shadow input inherits it from the host. */
+    font-size: var(--font-size-150);
   }
   #goto-wa {
     width: 200px;
@@ -2578,7 +2579,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     display: flex;
     align-items: center;
     justify-content: center;
-    background: color-mix(in srgb, var(--color-surface) 78%, transparent);
+    background: color-mix(in srgb, var(--color-background-elevation-raised) 78%, transparent);
     backdrop-filter: blur(2px);
   }
   .map-empty[hidden] {
@@ -2597,9 +2598,9 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
   .comp-picker esa-dropdown-menu {
     display: inline-flex;
     align-items: center;
-    /* The panel items read --type-size-200 — step it down one notch here so
+    /* The panel items read --font-size-200 — step it down one notch here so
        the open list matches the trigger's quieter scale. */
-    --type-size-200: 0.875rem;
+    --font-size-200: 0.875rem;
   }
   .comp-picker__trigger {
     display: inline-flex;
@@ -2613,17 +2614,17 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     font: inherit;
     font-size: 0.875rem;
     line-height: 1.3;
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-secondary);
     cursor: pointer;
     white-space: nowrap;
   }
   .comp-picker__trigger:hover {
-    background: var(--color-surface-sunken, var(--color-background));
-    color: var(--color-text-primary);
+    background: var(--color-background-elevation-sunken, var(--color-background-default));
+    color: var(--color-content-default);
   }
   .comp-picker__trigger :global(.esa-icon) {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     flex-shrink: 0;
   }
 
@@ -2637,7 +2638,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     margin: 0;
     font-size: 0.875rem;
     line-height: 1.5;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   /* Legend overlay — statuses + the two observation symbols (the violet is a
@@ -2651,18 +2652,18 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     flex-direction: column;
     gap: var(--spacing-150);
     padding: var(--spacing-300) var(--spacing-400);
-    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
+    background: color-mix(in srgb, var(--color-background-elevation-raised) 94%, transparent);
     backdrop-filter: blur(4px);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
-    box-shadow: var(--shadow-400);
+    box-shadow: var(--elevation-5);
     font-size: 0.875rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .map-legend__title {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .map-legend__row {
     display: flex;
@@ -2673,7 +2674,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     width: 12px;
     height: 12px;
     border-radius: 50%;
-    box-shadow: 0 0 0 2px var(--color-surface);
+    box-shadow: 0 0 0 2px var(--color-background-elevation-raised);
     flex-shrink: 0;
   }
   .map-legend__ring {
@@ -2692,7 +2693,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     height: 8px;
     border-radius: 50%;
     border: 1.5px solid var(--obs-color);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     box-sizing: border-box;
     flex-shrink: 0;
     margin-inline: 2px;
@@ -2705,8 +2706,8 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     gap: var(--spacing-200);
     margin-top: var(--spacing-400);
     padding: var(--spacing-300) var(--spacing-400);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
   }
   .readiness__head {
@@ -2718,26 +2719,26 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
   }
   .readiness__title {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .readiness__summary {
     font-size: 0.875rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .readiness__summary strong {
     color: var(--st-cleared);
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--typography-font-weight-bold);
   }
   .readiness__bar {
     display: flex;
     height: 10px;
     border-radius: var(--radius-full);
     overflow: hidden;
-    background: var(--color-background);
+    background: var(--color-background-default);
   }
   .readiness__bar > :global(div + div) {
-    border-left: 1px solid var(--color-surface);
+    border-left: 1px solid var(--color-background-elevation-raised);
   }
   .readiness__legend {
     list-style: none;
@@ -2752,7 +2753,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     align-items: center;
     gap: var(--spacing-150);
     font-size: 0.875rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .readiness__legend-item[data-empty='true'] {
     opacity: 0.4;
@@ -2764,11 +2765,11 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     flex-shrink: 0;
   }
   .readiness__legend-label {
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .readiness__legend-count {
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     font-variant-numeric: tabular-nums;
   }
 
@@ -2796,8 +2797,8 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
   :global(.feed-heading) {
     margin: 0 0 var(--spacing-200);
     font-size: 1rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   :global(.feed-day__list) {
     list-style: none;
@@ -2827,9 +2828,9 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     margin-top: 1px;
     padding: 0.125rem 0.375rem;
     border-radius: var(--radius-100);
-    font-family: var(--font-mono, monospace);
-    font-size: var(--type-size-100); /* ID token — meta-scale, like the catalog badges */
-    font-weight: var(--font-weight-semibold);
+    font-family: var(--typography-font-family-mono, monospace);
+    font-size: var(--font-size-100); /* ID token — meta-scale, like the catalog badges */
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.4;
     letter-spacing: 0;
     text-transform: uppercase;
@@ -2840,8 +2841,8 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     background: color-mix(in srgb, var(--obs-color) 12%, white);
   }
   :global(.entry__badge--wa) {
-    color: var(--color-primary);
-    background: color-mix(in srgb, var(--color-primary) 10%, white);
+    color: var(--color-background-brand);
+    background: color-mix(in srgb, var(--color-background-brand) 10%, white);
   }
   :global(.entry__body) {
     flex: 1;
@@ -2858,14 +2859,14 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     line-height: 1.45;
   }
   :global(.entry__type) {
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   :global(.entry__sep) {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   :global(.entry__primary) {
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   :global(.entry__line .gate__chipwrap) {
     vertical-align: text-bottom;
@@ -2875,24 +2876,24 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     margin: 0;
     font-size: 0.875rem;
     line-height: 1.45;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   :global(.entry__meta) {
     flex-shrink: 0;
     font-size: 0.8125rem; /* one step below the 0.875rem base — the ch1 floor */
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
     text-align: right;
   }
   :global(.entry--empty) {
     padding: var(--spacing-200) 0;
     font-size: 0.875rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   /* Card dress (feed rows + drawer conflict/impact rows) — clickable jump-offs */
   :global(.entry--card) {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
     cursor: pointer;
     transition:
@@ -2901,7 +2902,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
   }
   :global(.entry--card:hover) {
     background: var(--grid-row-bg-hover);
-    border-color: var(--color-border-strong);
+    border-color: var(--color-border-default-strong);
   }
   /* ═══ Print — clean landscape snapshot of the map tab ═══ */
   /* The Activity tab needs no print rules for the same reason the Data tab has
@@ -2936,12 +2937,12 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     }
     .print-header__title {
       font-size: 16pt;
-      font-weight: var(--font-weight-bold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-bold);
+      color: var(--color-content-default);
     }
     .print-header__meta {
       font-size: 9pt;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
     .map-wrap {
       height: 380pt;
@@ -2950,15 +2951,15 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     }
     .readiness {
       break-inside: avoid;
-      border-color: var(--color-border, #ccc);
+      border-color: var(--color-border-default, #ccc);
     }
   }
 
   /* ═══ Filter bar — carded two-band, faithful copy of requirement-tracker's
      page glue. Every control inside is a lego. ═══ */
   .bcn-filterbar {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     margin-bottom: var(--spacing-400);
   }
@@ -2974,7 +2975,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     align-items: center;
     gap: var(--spacing-300);
     padding: var(--spacing-300) var(--spacing-400);
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--color-border-default);
     flex-wrap: wrap;
   }
   .bcn-filterbar__group {
@@ -2983,9 +2984,9 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     gap: var(--spacing-300);
   }
   .bcn-filterbar__label {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
   .bcn-filterbar__search {
@@ -3021,8 +3022,8 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     justify-content: space-between;
     gap: var(--spacing-400);
     padding: var(--spacing-200) var(--spacing-400);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
     border-top: 0;
     border-radius: 0 0 var(--radius-100) var(--radius-100);
   }
@@ -3030,12 +3031,12 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     display: flex;
     align-items: center;
     gap: var(--spacing-400);
-    font-size: var(--type-size-100);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-100);
+    color: var(--color-content-default-secondary);
     font-variant-numeric: tabular-nums;
   }
   .filtered-rows-count {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .filtered-rows-count[hidden] {
     display: none;
@@ -3055,7 +3056,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     border-radius: var(--radius-100);
     font-size: 0.75rem;
     line-height: 1.5;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     white-space: nowrap;
     background: color-mix(in srgb, var(--_chip) 16%, transparent);
     color: color-mix(in srgb, var(--_chip) 70%, #1a1a1a);
@@ -3075,12 +3076,12 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
      not border, so the chip metrics don't shift against its solid siblings. */
   :global(.bcn-status-chip[data-status='provisional-block']),
   :global(.bcn-grid-chip[data-status='provisional-block']) {
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     box-shadow: inset 0 0 0 1.5px var(--st-provisional-block);
   }
   :global(.bcn-status-chip[data-status='provisional-block'] .bcn-status-chip__dot),
   :global(.bcn-grid-chip[data-status='provisional-block'] .bcn-grid-chip__dot) {
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     box-shadow: inset 0 0 0 1.5px var(--st-provisional-block);
   }
 
@@ -3111,14 +3112,14 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
   }
   .wa__title {
     margin: 0;
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .wa__subtitle {
     margin: 0;
     font-size: 0.875rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   /* ═══ Dates band (v2) — always-visible decision inputs directly under the
      header. Full-bleed: negative margins eat the lego body's --spacing-500
@@ -3129,8 +3130,8 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     gap: var(--spacing-200) var(--spacing-300);
     margin: calc(-1 * var(--spacing-500, 1.5rem)) calc(-1 * var(--spacing-500, 1.5rem)) 0;
     padding: var(--spacing-250) var(--spacing-500, 1.5rem);
-    background: var(--color-background);
-    border-bottom: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border-bottom: 1px solid var(--color-border-default);
   }
 
   /* ═══ Read-mode section rhythm — balanced breaks between the dates band, the
@@ -3148,7 +3149,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
   #wa-read > .wa__more {
     margin-top: var(--spacing-500);
     padding-top: var(--spacing-500);
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--color-border-default);
   }
 
   /* ═══ Comments thread (per work area) — ported from permit tracking
@@ -3174,7 +3175,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
   :global(.wc-comment--empty) {
     display: block;
     font-size: 0.875rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   :global(.wc-comment__avatar) {
     display: inline-flex;
@@ -3183,10 +3184,10 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     width: 28px;
     height: 28px;
     border-radius: 50%;
-    background: var(--_c, var(--color-secondary));
+    background: var(--_c, var(--color-background-brand-muted));
     color: #fff;
     font-size: 0.6875rem;
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--typography-font-weight-bold);
     flex-shrink: 0;
     letter-spacing: 0.02em;
   }
@@ -3209,25 +3210,25 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
   }
   :global(.wc-comment__author) {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   :global(.wc-comment__time) {
     font-size: 0.75rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   :global(.wc-comment__text) {
     margin: 0;
     font-size: 0.875rem;
     line-height: 1.5;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     white-space: pre-wrap;
     word-break: break-word;
   }
   :global(.wc-mention) {
-    color: var(--color-primary);
-    font-weight: var(--font-weight-semibold);
-    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    color: var(--color-background-brand);
+    font-weight: var(--typography-font-weight-semibold);
+    background: color-mix(in srgb, var(--color-background-brand) 10%, transparent);
     border-radius: var(--radius-050);
     padding: 0 2px;
   }
@@ -3243,10 +3244,10 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     height: 18px;
     padding: 0 5px;
     border-radius: var(--radius-full);
-    background: var(--color-surface-sunken);
-    color: var(--color-text-secondary);
+    background: var(--color-background-elevation-sunken);
+    color: var(--color-content-default-secondary);
     font-size: 0.6875rem;
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--typography-font-weight-bold);
     vertical-align: middle;
     margin-left: var(--spacing-100);
   }
@@ -3270,10 +3271,10 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     list-style: none;
     margin: 0;
     padding: var(--spacing-100);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
-    box-shadow: var(--shadow-400);
+    box-shadow: var(--elevation-5);
     max-height: 208px;
     overflow-y: auto;
   }
@@ -3287,7 +3288,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     padding: var(--spacing-200);
     border-radius: var(--radius-100);
     font-size: 0.875rem;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
     cursor: pointer;
   }
   :global(.wc-mention-opt:hover) {
@@ -3301,7 +3302,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
   }
   .wa__compose-hint {
     font-size: 0.8125rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   /* ═══ Inline biological-clearance section — the gate's review history lives
@@ -3326,7 +3327,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     display: none;
   }
   .wa__more-item + .wa__more-item {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .wa__more-item[hidden] + .wa__more-item {
     border-top: none;
@@ -3337,12 +3338,12 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     gap: var(--spacing-200);
     margin: 0 0 var(--spacing-300);
     font-size: 0.9375rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .wa__section :global(.esa-icon) {
     flex-shrink: 0;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .wa__section :global(.esa-badge) {
     vertical-align: middle;
@@ -3380,16 +3381,16 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
   }
   .dd__count {
     font-size: 0.9375rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .dd__form {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-300);
     padding: var(--spacing-300) var(--spacing-400);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
   }
   .dd__form[hidden] {
@@ -3427,7 +3428,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     top: 20px;
     bottom: 2px;
     width: 2px;
-    background: var(--color-border);
+    background: var(--color-border-default);
   }
   :global(.rev__dot) {
     width: 16px;
@@ -3435,8 +3436,8 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     border-radius: var(--radius-full);
     margin-top: 2px;
     z-index: 1;
-    background: var(--color-surface);
-    border: 2px solid var(--color-border-strong);
+    background: var(--color-background-elevation-raised);
+    border: 2px solid var(--color-border-default-strong);
     box-sizing: border-box;
   }
   :global(.rev__main) {
@@ -3452,13 +3453,13 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     gap: var(--spacing-200);
     margin: 0;
     font-size: 1rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   :global(.rev__when) {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-secondary);
   }
   :global(.rev__edit) {
     margin-left: auto;
@@ -3471,26 +3472,26 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
   }
   :global(.rev__until) {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-secondary);
   }
   :global(.rev__current) {
     display: inline-flex;
     align-items: center;
     padding: 1px var(--spacing-200);
     border-radius: var(--radius-full);
-    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
+    background: color-mix(in srgb, var(--color-background-brand) 10%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-background-brand) 30%, transparent);
     font-size: 0.75rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-background-brand);
     white-space: nowrap;
   }
   :global(.rev__note) {
     margin: 0;
     font-size: 0.9375rem;
     line-height: 1.55;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   /* A node being edited becomes the form (the pencil swap) — drop the rail
      grid so the form spans the full width. */
@@ -3518,14 +3519,14 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     gap: var(--spacing-300);
     margin-top: var(--spacing-300);
     padding: var(--spacing-300) var(--spacing-400);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
   }
   .we__addnote-title {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
 
   /* Observation impact list — entry-row cards (set by the renderer caller). */
@@ -3548,12 +3549,12 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
   .wa__note {
     margin: 0;
     padding: var(--spacing-300) var(--spacing-400);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
     font-size: 1rem;
     line-height: 1.6;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     white-space: pre-line;
   }
   .wa__note--log {
@@ -3579,8 +3580,8 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     flex-direction: column;
     gap: var(--spacing-100);
     padding: var(--spacing-300) var(--spacing-400);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
   }
   :global(.wnote__head) {
@@ -3591,8 +3592,8 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
   }
   :global(.wnote__meta) {
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
   }
   :global(.wnote__del) {
     flex-shrink: 0;
@@ -3601,7 +3602,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     margin: 0;
     font-size: 1rem;
     line-height: 1.6;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     white-space: pre-line;
   }
 
@@ -3617,7 +3618,7 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     padding: var(--spacing-200) 0;
   }
   .wa__activity :global(.entry + .entry) {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
 
   /* Observation meta grid */
@@ -3627,13 +3628,13 @@ const ICON_CHEVRON_DOWN = "<path d='m6 9 6 6 6-6'/>";
     gap: var(--spacing-300) var(--spacing-400);
     margin: 0;
     padding: var(--spacing-400);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
   }
   .wa__kv-val {
-    font-size: var(--form-font-size-md);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--typography-label-md-font-size);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
 </style>
diff --git a/src/pages/prototypes/site-clearance-simple.astro b/src/pages/prototypes/site-clearance-simple.astro
index 81944bcf..f86715e6 100644
--- a/src/pages/prototypes/site-clearance-simple.astro
+++ b/src/pages/prototypes/site-clearance-simple.astro
@@ -219,7 +219,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     </div>
 
     <div slot="footer" class="wa__footer">
-      <span id="wa-close"><EsaButton color="ghost" appearance="outline" size="md">Close</EsaButton></span>
+      <span id="wa-close"><EsaButton variant="ghost" appearance="outline" size="md">Close</EsaButton></span>
     </div>
   </esa-side-dialog>
 
@@ -267,8 +267,8 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     </div>
 
     <div slot="footer" class="wa__footer">
-      <span id="dd-cancel"><EsaButton color="ghost" appearance="outline" size="md">Cancel</EsaButton></span>
-      <span id="dd-save"><EsaButton color="primary" size="md">Save status</EsaButton></span>
+      <span id="dd-cancel"><EsaButton variant="ghost" appearance="outline" size="md">Cancel</EsaButton></span>
+      <span id="dd-save"><EsaButton variant="primary" size="md">Save status</EsaButton></span>
     </div>
   </esa-side-dialog>
 
@@ -285,15 +285,15 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
   /* ── Composition glue only (bcn-lego-checked above). ─────────────────────── */
   .cmp-note {
     display: flex; gap: var(--spacing-300); align-items: flex-start;
-    background: var(--color-surface-sunken); border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-sunken); border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300); padding: var(--spacing-400);
-    margin-bottom: var(--spacing-500); color: var(--color-text-secondary);
+    margin-bottom: var(--spacing-500); color: var(--color-content-default-secondary);
   }
-  .cmp-note p { margin: 0; font-size: var(--type-size-200); line-height: 1.5; }
-  .cmp-note strong { color: var(--color-text-primary); }
+  .cmp-note p { margin: 0; font-size: var(--font-size-200); line-height: 1.5; }
+  .cmp-note strong { color: var(--color-content-default); }
 
   /* Work-area list — a quiet row table (not a status-bordered card). */
-  .wa-list { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-300); overflow: hidden; background: var(--color-surface); }
+  .wa-list { display: flex; flex-direction: column; border: 1px solid var(--color-border-default); border-radius: var(--radius-300); overflow: hidden; background: var(--color-background-elevation-raised); }
   .wa-list__head, .wa-row {
     display: grid;
     grid-template-columns: minmax(150px, 1.4fr) minmax(140px, 1.4fr) minmax(110px, 0.9fr) minmax(150px, 1fr);
@@ -301,67 +301,67 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     padding: var(--spacing-300) var(--spacing-400);
   }
   .wa-list__head {
-    background: var(--color-surface-sunken); border-bottom: 1px solid var(--color-border);
-    font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary);
+    background: var(--color-background-elevation-sunken); border-bottom: 1px solid var(--color-border-default);
+    font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-secondary);
   }
-  .wa-row { width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--color-border); cursor: pointer; font: inherit; }
+  .wa-row { width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--color-border-default); cursor: pointer; font: inherit; }
   .wa-row:last-child { border-bottom: none; }
-  .wa-row:hover { background: var(--color-surface-sunken); }
-  .wa-row__id { display: block; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .wa-row__method, .wa-row__county { display: block; font-size: var(--type-size-100); color: var(--color-text-tertiary); margin-top: 2px; }
-  .wa-row__seg { display: block; color: var(--color-text-primary); }
-  .wa-row__start { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
+  .wa-row:hover { background: var(--color-background-elevation-sunken); }
+  .wa-row__id { display: block; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .wa-row__method, .wa-row__county { display: block; font-size: var(--font-size-100); color: var(--color-content-default-tertiary); margin-top: 2px; }
+  .wa-row__seg { display: block; color: var(--color-content-default); }
+  .wa-row__start { color: var(--color-content-default-secondary); font-variant-numeric: tabular-nums; }
 
   /* Drawer shells */
   .wa__header { display: flex; flex-direction: column; gap: var(--spacing-150); }
   .wa__headmain { display: flex; align-items: center; gap: var(--spacing-300); flex-wrap: wrap; }
-  .wa__title { margin: 0; font-size: var(--type-size-400); font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
-  .wa__subtitle { margin: 0; font-size: var(--type-size-200); color: var(--color-text-secondary); }
+  .wa__title { margin: 0; font-size: var(--font-size-400); font-weight: var(--typography-font-weight-bold); color: var(--color-content-default); }
+  .wa__subtitle { margin: 0; font-size: var(--font-size-200); color: var(--color-content-default-secondary); }
   .wa { display: flex; flex-direction: column; gap: var(--spacing-500); }
-  .wa__section { display: flex; align-items: center; gap: var(--spacing-200); margin: 0 0 var(--spacing-300); font-size: var(--type-size-200); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
+  .wa__section { display: flex; align-items: center; gap: var(--spacing-200); margin: 0 0 var(--spacing-300); font-size: var(--font-size-200); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
 
   /* Dates band — full-bleed against the lego body padding. */
   .band {
     display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--spacing-400);
-    background: var(--color-surface-sunken); border-block: 1px solid var(--color-border);
+    background: var(--color-background-elevation-sunken); border-block: 1px solid var(--color-border-default);
     padding: var(--spacing-400); margin-inline: calc(-1 * var(--spacing-500));
     padding-inline: var(--spacing-500);
   }
-  .wa__kv-val { font-size: var(--form-font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
-  .band__alert { font-weight: var(--font-weight-semibold); color: var(--st-blocked); font-variant-numeric: tabular-nums; }
+  .wa__kv-val { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); font-variant-numeric: tabular-nums; }
+  .band__alert { font-weight: var(--typography-font-weight-semibold); color: var(--st-blocked); font-variant-numeric: tabular-nums; }
 
-  .decide { margin: 0; font-size: var(--type-size-200); color: var(--color-text-secondary); }
+  .decide { margin: 0; font-size: var(--font-size-200); color: var(--color-content-default-secondary); }
 
   /* 2×2 disciplines board */
   .board { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-300); }
   .board__cell {
     display: flex; flex-direction: column; gap: var(--spacing-200); align-items: flex-start;
     padding: var(--spacing-350); text-align: left; cursor: pointer; font: inherit;
-    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-300);
+    background: var(--color-background-elevation-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-300);
     transition: border-color 150ms ease, background 150ms ease;
   }
-  .board__cell:hover { border-color: var(--color-border-strong); background: var(--color-surface-sunken); }
+  .board__cell:hover { border-color: var(--color-border-default-strong); background: var(--color-background-elevation-sunken); }
   .board__cellhead { display: flex; align-items: center; gap: var(--spacing-200); width: 100%; }
-  .board__dim { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  .board__chev { margin-left: auto; color: var(--color-text-tertiary); display: inline-flex; }
+  .board__dim { font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
+  .board__chev { margin-left: auto; color: var(--color-content-default-tertiary); display: inline-flex; }
   .board__unreviewed {
-    font-size: var(--type-size-100); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary);
-    border: 1px dashed var(--color-border-strong); border-radius: var(--radius-full); padding: 2px var(--spacing-250);
+    font-size: var(--font-size-100); font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default-tertiary);
+    border: 1px dashed var(--color-border-default-strong); border-radius: var(--radius-full); padding: 2px var(--spacing-250);
   }
-  .board__meta { font-size: var(--type-size-100); color: var(--color-text-tertiary); }
+  .board__meta { font-size: var(--font-size-100); color: var(--color-content-default-tertiary); }
 
-  .wa__note { margin: 0; padding-left: var(--spacing-400); border-left: 2px solid var(--color-border-strong); color: var(--color-text-secondary); font-size: var(--type-size-200); line-height: 1.5; white-space: pre-line; }
+  .wa__note { margin: 0; padding-left: var(--spacing-400); border-left: 2px solid var(--color-border-default-strong); color: var(--color-content-default-secondary); font-size: var(--font-size-200); line-height: 1.5; white-space: pre-line; }
 
   /* Discipline editor */
   .dd__form { display: flex; flex-direction: column; gap: var(--spacing-400); }
   .we__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-300); }
-  .dd__hint { margin: 0 0 var(--spacing-300); font-size: var(--type-size-100); color: var(--color-text-tertiary); }
+  .dd__hint { margin: 0 0 var(--spacing-300); font-size: var(--font-size-100); color: var(--color-content-default-tertiary); }
   .dd__log { list-style: none; margin: 0 0 var(--spacing-400); padding: 0; display: flex; flex-direction: column; gap: var(--spacing-300); }
   .dd__log:empty { display: none; }
-  .dd__log-item { padding: var(--spacing-300); background: var(--color-surface-sunken); border-radius: var(--radius-200); }
-  .dd__log-meta { font-size: var(--type-size-100); color: var(--color-text-tertiary); margin-bottom: 2px; }
-  .dd__log-text { font-size: var(--type-size-200); color: var(--color-text-secondary); white-space: pre-line; }
-  .dd__addnote { display: flex; flex-direction: column; gap: var(--spacing-300); padding-top: var(--spacing-300); border-top: 1px solid var(--color-border); }
+  .dd__log-item { padding: var(--spacing-300); background: var(--color-background-elevation-sunken); border-radius: var(--radius-200); }
+  .dd__log-meta { font-size: var(--font-size-100); color: var(--color-content-default-tertiary); margin-bottom: 2px; }
+  .dd__log-text { font-size: var(--font-size-200); color: var(--color-content-default-secondary); white-space: pre-line; }
+  .dd__addnote { display: flex; flex-direction: column; gap: var(--spacing-300); padding-top: var(--spacing-300); border-top: 1px solid var(--color-border-default); }
 
   .wa__footer { display: flex; gap: var(--spacing-300); justify-content: flex-end; }
 
@@ -423,7 +423,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     (chip.querySelector('.bcn-status-chip__label') as HTMLElement).textContent = meta.label;
     // Provisional block reads hollow — white fill, red ring (the page idiom).
     if (status === 'provisional-block') {
-      chip.style.background = 'var(--color-surface)';
+      chip.style.background = 'var(--color-background-elevation-raised)';
       chip.style.boxShadow = `inset 0 0 0 1px ${meta.hex}`;
     } else {
       chip.style.background = '';
diff --git a/src/pages/prototypes/site-clearance.astro b/src/pages/prototypes/site-clearance.astro
index 52f13c7b..7a571a7f 100644
--- a/src/pages/prototypes/site-clearance.astro
+++ b/src/pages/prototypes/site-clearance.astro
@@ -50,7 +50,7 @@ import AppShell from '../../layouts/AppShell.astro';
 import PageLayout from '../../layouts/PageLayout.astro';
 import '../../styles/beacon-map.css'; // shared Leaflet chrome (.leaflet-tooltip restyle for all map pages)
 import EsaButton from '@esa/ecology/esa-button.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import EsaIcon from '@esa/ecology/esa-icon.astro';
 import EsaBadge from '@esa/ecology/esa-badge.astro';
 import EsaPill from '@esa/ecology/esa-pill.astro';
@@ -123,7 +123,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
      renders label strings only), esa-collapsible ×3 (flush — the v2 drawer's Buffer
      conflicts / Notes / Activity summary rows; JS updates the SSR title span for live
      counts), esa-button (incl. the decision block's "Confirm block" on the lego's
-     NATIVE color="danger" variant with --color-danger re-pointed to
+     NATIVE color="danger" variant with --color-background-utility-danger re-pointed to
      --st-provisional-block so the button sits in the same red family as the block's
      tint/border/ink, + both drawers' "Show on map" — its map-pin EsaIcon rides the
      label slot; the registry has no map glyph), esa-icon-button (search clear + the
@@ -236,7 +236,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
                     class="map-legend__dot"
                     style={
                       status === 'provisional-block'
-                        ? `background:var(--color-surface); border: 2px solid var(${STATUS_META[status].colorVar}); box-sizing: border-box;`
+                        ? `background:var(--color-background-elevation-raised); border: 2px solid var(${STATUS_META[status].colorVar}); box-sizing: border-box;`
                         : `background:var(${STATUS_META[status].colorVar});`
                     }
                   />
@@ -272,7 +272,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
                 <div
                   style={`height:100%; flex: 0 0 ${(countFor(s) / totalWas) * 100}%; background:${
                     s === 'provisional-block'
-                      ? `repeating-linear-gradient(135deg, var(--st-provisional-block) 0 4px, var(--color-surface) 4px 7px)`
+                      ? `repeating-linear-gradient(135deg, var(--st-provisional-block) 0 4px, var(--color-background-elevation-raised) 4px 7px)`
                       : `var(${STATUS_META[s].colorVar})`
                   };`}
                   title={`${STATUS_META[s].label}: ${countFor(s)}`}
@@ -288,7 +288,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
                     class="readiness__swatch"
                     style={
                       status === 'provisional-block'
-                        ? `background:var(--color-surface); border: 2px solid var(${STATUS_META[status].colorVar}); box-sizing: border-box;`
+                        ? `background:var(--color-background-elevation-raised); border: 2px solid var(${STATUS_META[status].colorVar}); box-sizing: border-box;`
                         : `background:var(${STATUS_META[status].colorVar});`
                     }
                   />
@@ -311,7 +311,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
             </div>
             <div class="bcn-filterbar__search">
               <esa-text-field id="gc-search" placeholder="Search work areas…" size="md"></esa-text-field>
-              <span id="gc-search-clear" hidden><EsaIconButton icon="x" label="Clear search" size="sm" /></span>
+              <span id="gc-search-clear" hidden><EsaIconButton variant="chrome" iconOnly icon="x" label="Clear search" size="sm" /></span>
             </div>
           </div>
           <div class="bcn-filterbar__bottom">
@@ -331,7 +331,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
         </div>
 
         <div class="table-footer">
-          <span id="gc-download"><EsaButton color="ghost" appearance="outline" size="sm" icon="download">Download as CSV</EsaButton></span>
+          <span id="gc-download"><EsaButton variant="ghost" appearance="outline" size="sm" icon="download">Download as CSV</EsaButton></span>
           <div class="row-count-data">
             Total Records: <span id="gc-total">0</span>
             <span id="gc-filtered" class="filtered-rows-count" hidden></span>
@@ -449,13 +449,13 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
         <div class="decide__row decide__row--warn" id="wa-decide-warn" hidden>
           <EsaIcon name="alert-triangle" size="sm" paths={ICON_ALERT} />
           <span class="decide__warntext" id="wa-decide-warntext"></span>
-          <span id="wa-edit-start"><EsaButton color="ghost" appearance="outline" size="sm">Edit start</EsaButton></span>
+          <span id="wa-edit-start"><EsaButton variant="ghost" appearance="outline" size="sm">Edit start</EsaButton></span>
         </div>
         <!-- Confirm block rides esa-button's native danger color, re-pointed to
              the status red (--st-provisional-block) by the prov variant's CSS
              so it sits in the same red family as the block's tint/border/ink. -->
         <div class="decide__actions" id="wa-decide-actions" hidden>
-          <span id="wa-confirm-block"><EsaButton color="danger" size="sm">Confirm block</EsaButton></span>
+          <span id="wa-confirm-block"><EsaButton variant="danger" size="sm">Confirm block</EsaButton></span>
         </div>
       </div>
 
@@ -566,7 +566,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
            tab, pans/zooms + pulses the marker (the ch2 go-to machinery). Hidden
            while editing — a mid-edit jump would discard the form. -->
       <span id="wa-showmap" class="wa__footer-start">
-        <EsaButton color="ghost" appearance="outline" size="md">
+        <EsaButton variant="ghost" appearance="outline" size="md">
           <EsaIcon
             name="map-pin"
             size="sm"
@@ -575,9 +575,9 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
           Show on map
         </EsaButton>
       </span>
-      <span id="wa-edit-btn"><EsaButton color="ghost" appearance="outline" size="md">Edit site details</EsaButton></span>
-      <span id="wa-cancel" hidden><EsaButton color="ghost" appearance="outline" size="md">Cancel</EsaButton></span>
-      <span id="wa-save" hidden><EsaButton color="primary" size="md">Save</EsaButton></span>
+      <span id="wa-edit-btn"><EsaButton variant="ghost" appearance="outline" size="md">Edit site details</EsaButton></span>
+      <span id="wa-cancel" hidden><EsaButton variant="ghost" appearance="outline" size="md">Cancel</EsaButton></span>
+      <span id="wa-save" hidden><EsaButton variant="primary" size="md">Save</EsaButton></span>
     </div>
   </esa-side-dialog>
 
@@ -599,7 +599,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     <div class="wa">
       <div class="dd__bar">
         <span class="dd__count" id="dd-count">0 reviews</span>
-        <span id="dd-add"><EsaButton color="ghost" appearance="outline" size="sm">Add review</EsaButton></span>
+        <span id="dd-add"><EsaButton variant="ghost" appearance="outline" size="sm">Add review</EsaButton></span>
       </div>
 
       <!-- Add/Edit review form — inline at the top when adding; swapped into a
@@ -618,8 +618,8 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
         <esa-textarea id="dd-note" label="Note" rows="2" auto-resize size="sm"></esa-textarea>
         <esa-input-tag id="dd-stips" label="Stipulations" placeholder="Add stipulation…" tags-below size="sm"></esa-input-tag>
         <div class="dd__formactions">
-          <span id="dd-cancel"><EsaButton color="ghost" appearance="outline" size="sm">Cancel</EsaButton></span>
-          <span id="dd-save"><EsaButton color="primary" size="sm">Save review</EsaButton></span>
+          <span id="dd-cancel"><EsaButton variant="ghost" appearance="outline" size="sm">Cancel</EsaButton></span>
+          <span id="dd-save"><EsaButton variant="primary" size="sm">Save review</EsaButton></span>
         </div>
       </div>
 
@@ -627,7 +627,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       <ol class="revs" id="dd-history"></ol>
     </div>
     <div slot="footer" class="wa__footer">
-      <span id="dd-close"><EsaButton color="ghost" appearance="outline" size="md">Close</EsaButton></span>
+      <span id="dd-close"><EsaButton variant="ghost" appearance="outline" size="md">Close</EsaButton></span>
     </div>
   </esa-side-dialog>
 
@@ -677,7 +677,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     <div slot="footer" class="wa__footer">
       <!-- "Show on map" (round-5 ch5) — same jump as the work-area drawer's. -->
       <span id="obs-showmap" class="wa__footer-start">
-        <EsaButton color="ghost" appearance="outline" size="md">
+        <EsaButton variant="ghost" appearance="outline" size="md">
           <EsaIcon
             name="map-pin"
             size="sm"
@@ -698,7 +698,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     <EsaPill label="—" removable={false} size="sm" />
   </template>
   <template id="dd-edit-tpl">
-    <span class="rev__edit"><EsaIconButton icon="pencil" label="Edit review" size="sm" /></span>
+    <span class="rev__edit"><EsaIconButton variant="chrome" iconOnly icon="pencil" label="Edit review" size="sm" /></span>
   </template>
 
   <!-- (Round-5 ch3: the per-kind feed icons are gone — the deterministic entry
@@ -1236,7 +1236,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       // hollow markers (a solid segment would read as Blocked).
       const fill =
         status === 'provisional-block'
-          ? 'repeating-linear-gradient(135deg, var(--st-provisional-block) 0 4px, var(--color-surface) 4px 7px)'
+          ? 'repeating-linear-gradient(135deg, var(--st-provisional-block) 0 4px, var(--color-background-elevation-raised) 4px 7px)'
           : `var(--st-${status})`;
       div.style.cssText = `height:100%; flex: 0 0 ${(n / total) * 100}%; background:${fill};`;
       div.title = `${stLabel(status)}: ${n}`;
@@ -2838,7 +2838,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     width: 100%;
     height: 70vh;
     min-height: 480px;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
     overflow: hidden;
   }
@@ -2900,8 +2900,8 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     display: flex;
     flex-direction: column;
     margin-bottom: var(--spacing-300);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
   }
   .map-filterbar__row {
@@ -2912,12 +2912,12 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     padding: var(--spacing-250) var(--spacing-400);
   }
   .map-filterbar__row + .map-filterbar__row {
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--color-border-default);
   }
   .map-filterbar__label {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
   /* Go-to jumps (ch2) — right-aligned in the View row, beside the presets.
@@ -2932,10 +2932,11 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     gap: var(--spacing-200);
   }
   .map-filterbar__goto :global(esa-combobox) {
-    /* esa-combobox sm reads the Beacon form tokens (28px / 12px) — re-point
-       them to the filter legos' 32px / --type-size-150 line, scoped here. */
-    --form-height-sm: 32px;
-    --form-font-size-sm: var(--type-size-150);
+    /* The old 28-to-32px height re-point died with the hub's --form-height
+       surface; sm now sizes from --spacing padding like the filter legos beside
+       it, so the row shares a line without an override. Font alignment stays —
+       the shadow input inherits it from the host. */
+    font-size: var(--font-size-150);
   }
   #goto-wa {
     width: 200px;
@@ -2955,18 +2956,18 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     flex-direction: column;
     gap: var(--spacing-150);
     padding: var(--spacing-300) var(--spacing-400);
-    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
+    background: color-mix(in srgb, var(--color-background-elevation-raised) 94%, transparent);
     backdrop-filter: blur(4px);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
-    box-shadow: var(--shadow-400);
+    box-shadow: var(--elevation-5);
     font-size: 0.875rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .map-legend__title {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .map-legend__row {
     display: flex;
@@ -2977,7 +2978,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     width: 12px;
     height: 12px;
     border-radius: 50%;
-    box-shadow: 0 0 0 2px var(--color-surface);
+    box-shadow: 0 0 0 2px var(--color-background-elevation-raised);
     flex-shrink: 0;
   }
   .map-legend__ring {
@@ -2996,7 +2997,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     height: 8px;
     border-radius: 50%;
     border: 1.5px solid var(--obs-color);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     box-sizing: border-box;
     flex-shrink: 0;
     margin-inline: 2px;
@@ -3009,8 +3010,8 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     gap: var(--spacing-200);
     margin-top: var(--spacing-400);
     padding: var(--spacing-300) var(--spacing-400);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
   }
   .readiness__head {
@@ -3022,26 +3023,26 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
   }
   .readiness__title {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .readiness__summary {
     font-size: 0.875rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .readiness__summary strong {
     color: var(--st-cleared);
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--typography-font-weight-bold);
   }
   .readiness__bar {
     display: flex;
     height: 10px;
     border-radius: var(--radius-full);
     overflow: hidden;
-    background: var(--color-background);
+    background: var(--color-background-default);
   }
   .readiness__bar > :global(div + div) {
-    border-left: 1px solid var(--color-surface);
+    border-left: 1px solid var(--color-background-elevation-raised);
   }
   .readiness__legend {
     list-style: none;
@@ -3056,7 +3057,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     align-items: center;
     gap: var(--spacing-150);
     font-size: 0.875rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .readiness__legend-item[data-empty='true'] {
     opacity: 0.4;
@@ -3068,11 +3069,11 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     flex-shrink: 0;
   }
   .readiness__legend-label {
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .readiness__legend-count {
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     font-variant-numeric: tabular-nums;
   }
 
@@ -3086,8 +3087,8 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     flex-direction: column;
     gap: var(--spacing-300);
     padding: var(--spacing-400);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
   }
   .tl__head {
@@ -3100,13 +3101,13 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
   .tl__title {
     margin: 0;
     font-size: 1rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .tl__sub {
     margin: 0;
     font-size: 0.875rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .tl__axisrow {
     display: grid;
@@ -3122,12 +3123,12 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     top: 0;
     transform: translateX(-50%);
     font-size: 0.8125rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
   :global(.tl-tick--today) {
-    color: var(--color-primary);
-    font-weight: var(--font-weight-semibold);
+    color: var(--color-background-brand);
+    font-weight: var(--typography-font-weight-semibold);
   }
   .tl__chart {
     position: relative;
@@ -3142,7 +3143,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     bottom: 0;
     width: 2px;
     margin-left: -1px;
-    background: color-mix(in srgb, var(--color-primary) 45%, transparent);
+    background: color-mix(in srgb, var(--color-background-brand) 45%, transparent);
     pointer-events: none;
     z-index: 1;
   }
@@ -3157,13 +3158,13 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     gap: var(--spacing-200);
     margin: 0 0 var(--spacing-100);
     font-size: 0.9375rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   :global(.tl-lane__count) {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-regular);
-    color: var(--color-text-tertiary);
+    font-weight: var(--typography-font-weight-regular);
+    color: var(--color-content-default-tertiary);
     font-variant-numeric: tabular-nums;
   }
   :global(.tl-lane__rows) {
@@ -3177,7 +3178,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     gap: var(--spacing-400);
     align-items: center;
     padding: var(--spacing-150) 0;
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
     cursor: pointer;
   }
   :global(.tl-row:hover) {
@@ -3188,13 +3189,13 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     flex-direction: column;
     gap: 1px;
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   :global(.tl-row__sub) {
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-regular);
-    color: var(--color-text-tertiary);
+    font-weight: var(--typography-font-weight-regular);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -3203,7 +3204,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     position: relative;
     height: 14px;
     border-radius: var(--radius-full);
-    background: var(--color-background);
+    background: var(--color-background-default);
   }
   :global(.tl-dot) {
     position: absolute;
@@ -3212,20 +3213,20 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     width: 12px;
     height: 12px;
     border-radius: 50%;
-    border: 2px solid var(--color-surface);
+    border: 2px solid var(--color-background-elevation-raised);
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
   }
   /* Provisional = hollow dot — the same visual grammar as the map markers */
   :global(.tl-dot--hollow) {
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     border: 2.5px solid var(--st-provisional-block);
     box-shadow: none;
   }
   :global(.tl-row__meta) {
     text-align: right;
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
   }
@@ -3233,15 +3234,15 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     display: block;
     padding: var(--spacing-200) 0;
     font-size: 0.875rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     cursor: default;
   }
   .tl__excluded {
     margin: 0;
     padding-top: var(--spacing-200);
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
     font-size: 0.875rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
 
   /* ═══ Activity feed (Tab 4) — two-column grid: date-grouped card feed left
@@ -3270,8 +3271,8 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     position: sticky;
     top: var(--spacing-400);
     padding: var(--spacing-300) var(--spacing-400);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
   }
   @media (max-width: 1100px) {
@@ -3304,8 +3305,8 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
   :global(.feed-heading) {
     margin: 0 0 var(--spacing-200);
     font-size: 1rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   :global(.feed-day__list) {
     list-style: none;
@@ -3335,9 +3336,9 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     margin-top: 1px;
     padding: 0.125rem 0.375rem;
     border-radius: var(--radius-100);
-    font-family: var(--font-mono, monospace);
-    font-size: var(--type-size-100); /* ID token — meta-scale, like the catalog badges */
-    font-weight: var(--font-weight-semibold);
+    font-family: var(--typography-font-family-mono, monospace);
+    font-size: var(--font-size-100); /* ID token — meta-scale, like the catalog badges */
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.4;
     letter-spacing: 0;
     text-transform: uppercase;
@@ -3348,8 +3349,8 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     background: color-mix(in srgb, var(--obs-color) 12%, white);
   }
   :global(.entry__badge--wa) {
-    color: var(--color-primary);
-    background: color-mix(in srgb, var(--color-primary) 10%, white);
+    color: var(--color-background-brand);
+    background: color-mix(in srgb, var(--color-background-brand) 10%, white);
   }
   :global(.entry__body) {
     flex: 1;
@@ -3366,14 +3367,14 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     line-height: 1.45;
   }
   :global(.entry__type) {
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   :global(.entry__sep) {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   :global(.entry__primary) {
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   :global(.entry__line .gate__chipwrap) {
     vertical-align: text-bottom;
@@ -3383,24 +3384,24 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     margin: 0;
     font-size: 0.875rem;
     line-height: 1.45;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   :global(.entry__meta) {
     flex-shrink: 0;
     font-size: 0.8125rem; /* one step below the 0.875rem base — the ch1 floor */
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
     text-align: right;
   }
   :global(.entry--empty) {
     padding: var(--spacing-200) 0;
     font-size: 0.875rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   /* Card dress (feed rows + drawer conflict/impact rows) — clickable jump-offs */
   :global(.entry--card) {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
     cursor: pointer;
     transition:
@@ -3409,7 +3410,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
   }
   :global(.entry--card:hover) {
     background: var(--grid-row-bg-hover);
-    border-color: var(--color-border-strong);
+    border-color: var(--color-border-default-strong);
   }
   /* Upcoming-rail dress — flush separated rows in the narrow sticky rail; the
      meta drops under the line instead of fighting for the right edge. */
@@ -3419,7 +3420,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     flex-wrap: wrap;
   }
   :global(.entry--up + .entry--up) {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   :global(.entry--up .entry__meta) {
     flex-basis: 100%;
@@ -3459,12 +3460,12 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     }
     .print-header__title {
       font-size: 16pt;
-      font-weight: var(--font-weight-bold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-bold);
+      color: var(--color-content-default);
     }
     .print-header__meta {
       font-size: 9pt;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
     .map-wrap {
       height: 380pt;
@@ -3473,15 +3474,15 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     }
     .readiness {
       break-inside: avoid;
-      border-color: var(--color-border, #ccc);
+      border-color: var(--color-border-default, #ccc);
     }
   }
 
   /* ═══ Filter bar — carded two-band, faithful copy of requirement-tracker's
      page glue. Every control inside is a lego. ═══ */
   .bcn-filterbar {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     margin-bottom: var(--spacing-400);
   }
@@ -3497,7 +3498,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     align-items: center;
     gap: var(--spacing-300);
     padding: var(--spacing-300) var(--spacing-400);
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--color-border-default);
     flex-wrap: wrap;
   }
   .bcn-filterbar__group {
@@ -3506,9 +3507,9 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     gap: var(--spacing-300);
   }
   .bcn-filterbar__label {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
   .bcn-filterbar__search {
@@ -3544,8 +3545,8 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     justify-content: space-between;
     gap: var(--spacing-400);
     padding: var(--spacing-200) var(--spacing-400);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
     border-top: 0;
     border-radius: 0 0 var(--radius-100) var(--radius-100);
   }
@@ -3553,12 +3554,12 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     display: flex;
     align-items: center;
     gap: var(--spacing-400);
-    font-size: var(--type-size-100);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-100);
+    color: var(--color-content-default-secondary);
     font-variant-numeric: tabular-nums;
   }
   .filtered-rows-count {
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .filtered-rows-count[hidden] {
     display: none;
@@ -3578,7 +3579,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     border-radius: var(--radius-100);
     font-size: 0.75rem;
     line-height: 1.5;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     white-space: nowrap;
     background: color-mix(in srgb, var(--_chip) 16%, transparent);
     color: color-mix(in srgb, var(--_chip) 70%, #1a1a1a);
@@ -3598,12 +3599,12 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
      not border, so the chip metrics don't shift against its solid siblings. */
   :global(.bcn-status-chip[data-status='provisional-block']),
   :global(.bcn-grid-chip[data-status='provisional-block']) {
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     box-shadow: inset 0 0 0 1.5px var(--st-provisional-block);
   }
   :global(.bcn-status-chip[data-status='provisional-block'] .bcn-status-chip__dot),
   :global(.bcn-grid-chip[data-status='provisional-block'] .bcn-grid-chip__dot) {
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     box-shadow: inset 0 0 0 1.5px var(--st-provisional-block);
   }
 
@@ -3634,14 +3635,14 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
   }
   .wa__title {
     margin: 0;
-    font-size: var(--type-size-400);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--font-size-400);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .wa__subtitle {
     margin: 0;
     font-size: 0.875rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   /* ═══ Dates band (v2) — always-visible decision inputs directly under the
      header. Full-bleed: negative margins eat the lego body's --spacing-500
@@ -3652,8 +3653,8 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     gap: var(--spacing-200) var(--spacing-300);
     margin: calc(-1 * var(--spacing-500, 1.5rem)) calc(-1 * var(--spacing-500, 1.5rem)) 0;
     padding: var(--spacing-250) var(--spacing-500, 1.5rem);
-    background: var(--color-background);
-    border-bottom: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border-bottom: 1px solid var(--color-border-default);
   }
   .band.band--4 {
     grid-template-columns: repeat(4, 1fr);
@@ -3662,8 +3663,8 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     display: none;
   }
   .band__alert {
-    font-size: var(--form-font-size-md);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--typography-label-md-font-size);
+    font-weight: var(--typography-font-weight-semibold);
     color: color-mix(in srgb, var(--st-blocked) 72%, #1a1a1a);
   }
 
@@ -3676,8 +3677,8 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     gap: var(--spacing-200);
     padding: var(--spacing-250) var(--spacing-300);
     border-radius: var(--radius-200);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
   }
   .decide[hidden] {
     display: none;
@@ -3689,7 +3690,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
        status red so button, tint, border and ink share one family (the hub's
        default danger #ef4444 visibly clashes with the field-map #d73027;
        hover derives automatically via the lego's color-mix). */
-    --color-danger: var(--st-provisional-block);
+    --color-background-utility-danger: var(--st-provisional-block);
   }
   .decide[data-variant='blocked'] {
     background: color-mix(in srgb, var(--st-blocked) 10%, transparent);
@@ -3700,9 +3701,9 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     min-width: 0;
     margin: 0;
     font-size: 0.9375rem;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.45;
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .decide[data-variant='prov'] .decide__line {
     color: color-mix(in srgb, var(--st-provisional-block) 72%, #1a1a1a);
@@ -3713,12 +3714,12 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
   /* The short observation-ID token leading the provisional fact line (JS-built) */
   .decide :global(.obs-id) {
     margin-right: var(--spacing-100);
-    font-family: var(--font-mono, monospace);
+    font-family: var(--typography-font-family-mono, monospace);
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--typography-font-weight-medium);
     padding: 1px var(--spacing-200);
     border-radius: var(--radius-100);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     border: 1px solid color-mix(in srgb, var(--st-provisional-block) 45%, transparent);
     color: color-mix(in srgb, var(--st-provisional-block) 72%, #1a1a1a);
     white-space: nowrap;
@@ -3739,7 +3740,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     flex: 1;
     min-width: 0;
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: 1.45;
     color: color-mix(in srgb, var(--st-blocked) 72%, #1a1a1a);
   }
@@ -3764,9 +3765,9 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     align-items: flex-start;
     gap: var(--spacing-150);
     padding: var(--spacing-250) var(--spacing-300);
-    border: 1px solid var(--color-border-light);
+    border: 1px solid var(--color-border-default-subtle);
     border-radius: var(--radius-200);
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     font-family: inherit;
     text-align: left;
     cursor: pointer;
@@ -3775,8 +3776,8 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       background 120ms ease;
   }
   .board__cell:hover {
-    border-color: var(--color-border-strong);
-    background: var(--grid-row-bg-hover, var(--color-background));
+    border-color: var(--color-border-default-strong);
+    background: var(--grid-row-bg-hover, var(--color-background-default));
   }
   .board__cellhead {
     display: flex;
@@ -3788,8 +3789,8 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     flex: 1;
     min-width: 0;
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .board__count[hidden],
   .board__chipwrap[hidden],
@@ -3798,11 +3799,11 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
   }
   .board__chev {
     display: inline-flex;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .board__meta {
     font-size: 0.8125rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
 
   /* Collapsible summary rows — the v2 demotions, divider-stacked */
@@ -3817,7 +3818,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     display: none;
   }
   .wa__more-item + .wa__more-item {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
   .wa__more-item[hidden] + .wa__more-item {
     border-top: none;
@@ -3828,12 +3829,12 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     gap: var(--spacing-200);
     margin: 0 0 var(--spacing-300);
     font-size: 0.9375rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .wa__section :global(.esa-icon) {
     flex-shrink: 0;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .wa__section :global(.esa-badge) {
     vertical-align: middle;
@@ -3868,11 +3869,11 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     display: inline-flex;
     align-items: center;
     padding: 2px var(--spacing-250);
-    border: 1px dashed var(--color-border-strong);
+    border: 1px dashed var(--color-border-default-strong);
     border-radius: var(--radius-full);
-    font-size: var(--type-size-100);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-tertiary);
+    font-size: var(--font-size-100);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-tertiary);
     white-space: nowrap;
   }
   /* display:inline-flex beats the UA [hidden] rule — re-assert it. */
@@ -3898,8 +3899,8 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     --side-dialog-inset: 44px;
   }
   #disc-dialog.is-stacked {
-    --color-backdrop: transparent;
-    --backdrop-filter: none;
+    --color-background-overlay-backdrop: transparent;
+    --side-dialog-backdrop-filter: none;
   }
 
   /* ═══ Discipline drawer — count/add bar, review form, history rail ═══ */
@@ -3911,16 +3912,16 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
   }
   .dd__count {
     font-size: 0.9375rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .dd__form {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-300);
     padding: var(--spacing-300) var(--spacing-400);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
   }
   .dd__form[hidden] {
@@ -3963,7 +3964,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     top: 20px;
     bottom: 2px;
     width: 2px;
-    background: var(--color-border);
+    background: var(--color-border-default);
   }
   :global(.rev__dot) {
     width: 16px;
@@ -3971,13 +3972,13 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     border-radius: var(--radius-full);
     margin-top: 2px;
     z-index: 1;
-    background: var(--color-surface);
-    border: 2px solid var(--color-border-strong);
+    background: var(--color-background-elevation-raised);
+    border: 2px solid var(--color-border-default-strong);
     box-sizing: border-box;
   }
   /* Scheduled (outcome-less) review — hollow node in the schedule blue */
   :global(.rev__dot--scheduled) {
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     border-color: var(--st-survey-scheduled);
   }
   :global(.rev__main) {
@@ -3993,13 +3994,13 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     gap: var(--spacing-200);
     margin: 0;
     font-size: 1rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   :global(.rev__when) {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-secondary);
   }
   :global(.rev__edit) {
     margin-left: auto;
@@ -4012,26 +4013,26 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
   }
   :global(.rev__until) {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
+    font-weight: var(--typography-font-weight-medium);
+    color: var(--color-content-default-secondary);
   }
   :global(.rev__current) {
     display: inline-flex;
     align-items: center;
     padding: 1px var(--spacing-200);
     border-radius: var(--radius-full);
-    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
+    background: color-mix(in srgb, var(--color-background-brand) 10%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-background-brand) 30%, transparent);
     font-size: 0.75rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-background-brand);
     white-space: nowrap;
   }
   :global(.rev__note) {
     margin: 0;
     font-size: 0.9375rem;
     line-height: 1.55;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   /* A node being edited becomes the form (the pencil swap) — drop the rail
      grid so the form spans the full width. */
@@ -4059,14 +4060,14 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     gap: var(--spacing-300);
     margin-top: var(--spacing-300);
     padding: var(--spacing-300) var(--spacing-400);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
   }
   .we__addnote-title {
     font-size: 0.875rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
 
   /* Buffer-conflict / impact lists — the ch3 entry rows (cards, set by the
@@ -4092,12 +4093,12 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
   .wa__note {
     margin: 0;
     padding: var(--spacing-300) var(--spacing-400);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
     font-size: 1rem;
     line-height: 1.6;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     white-space: pre-line;
   }
   .wa__note--log {
@@ -4121,20 +4122,20 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     flex-direction: column;
     gap: var(--spacing-100);
     padding: var(--spacing-300) var(--spacing-400);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
   }
   :global(.wnote__meta) {
     font-size: 0.8125rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default-tertiary);
   }
   :global(.wnote__text) {
     margin: 0;
     font-size: 1rem;
     line-height: 1.6;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
     white-space: pre-line;
   }
 
@@ -4150,7 +4151,7 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     padding: var(--spacing-200) 0;
   }
   .wa__activity :global(.entry + .entry) {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-default-subtle);
   }
 
   /* Observation meta grid */
@@ -4160,13 +4161,13 @@ const ICON_CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     gap: var(--spacing-300) var(--spacing-400);
     margin: 0;
     padding: var(--spacing-400);
-    background: var(--color-background);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-300);
   }
   .wa__kv-val {
-    font-size: var(--form-font-size-md);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-size: var(--typography-label-md-font-size);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
 </style>
diff --git a/src/pages/prototypes/work-area-drawer-specimen.astro b/src/pages/prototypes/work-area-drawer-specimen.astro
index ecd09d85..82b55129 100644
--- a/src/pages/prototypes/work-area-drawer-specimen.astro
+++ b/src/pages/prototypes/work-area-drawer-specimen.astro
@@ -36,7 +36,7 @@
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import EsaButton from '@esa/ecology/esa-button.astro';
 import EsaIcon from '@esa/ecology/esa-icon.astro';
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 import EsaBadge from '@esa/ecology/esa-badge.astro';
 import EsaCollapsible from '@esa/ecology/esa-collapsible.astro';
 import BcnStatusChip from '../../components/bcn/BcnStatusChip.astro';
@@ -213,7 +213,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
                   <span>within buffer · est. through {formatDate(until184)}</span>
                 </p>
                 <div class="decide__actions">
-                  <EsaButton color="danger" size="sm">Confirm block</EsaButton>
+                  <EsaButton variant="danger" size="sm">Confirm block</EsaButton>
                 </div>
               </div>
 
@@ -266,7 +266,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
               </div>
             </div>
             <footer class="drawer__foot">
-              <EsaButton color="ghost" appearance="outline" size="md">Edit site details</EsaButton>
+              <EsaButton variant="ghost" appearance="outline" size="md">Edit site details</EsaButton>
             </footer>
           </article>
         </figure>
@@ -301,7 +301,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
                   </span>
                 </div>
                 <div class="decide__actions">
-                  <EsaButton color="ghost" appearance="outline" size="sm">Edit start</EsaButton>
+                  <EsaButton variant="ghost" appearance="outline" size="sm">Edit start</EsaButton>
                 </div>
               </div>
 
@@ -340,7 +340,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
               </div>
             </div>
             <footer class="drawer__foot">
-              <EsaButton color="ghost" appearance="outline" size="md">Edit site details</EsaButton>
+              <EsaButton variant="ghost" appearance="outline" size="md">Edit site details</EsaButton>
             </footer>
           </article>
         </figure>
@@ -429,7 +429,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
               </div>
             </div>
             <footer class="drawer__foot">
-              <EsaButton color="ghost" appearance="outline" size="md">Edit site details</EsaButton>
+              <EsaButton variant="ghost" appearance="outline" size="md">Edit site details</EsaButton>
             </footer>
           </article>
 
@@ -439,14 +439,14 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
               <div class="drawer__headrow">
                 <h4 class="drawer__title">Biological review</h4>
                 <BcnStatusChip status={g010bio.status} label={meta(g010bio.status).label} hex={meta(g010bio.status).hex} />
-                <span class="drawer__close"><EsaIconButton icon="x" label="Close review history" size="sm" /></span>
+                <span class="drawer__close"><EsaIconButton variant="chrome" iconOnly icon="x" label="Close review history" size="sm" /></span>
               </div>
               <p class="drawer__sub">{wa010.id} · the latest completed review sets this status</p>
             </header>
             <div class="drawer__body">
               <div class="child__bar">
                 <span class="child__count">2 reviews</span>
-                <EsaButton color="ghost" appearance="outline" size="sm">Add review</EsaButton>
+                <EsaButton variant="ghost" appearance="outline" size="sm">Add review</EsaButton>
               </div>
               <ol class="revs">
                 <li class="rev" data-kind="scheduled">
@@ -486,7 +486,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
               </ol>
             </div>
             <footer class="drawer__foot">
-              <EsaButton color="ghost" appearance="outline" size="md">Close</EsaButton>
+              <EsaButton variant="ghost" appearance="outline" size="md">Close</EsaButton>
             </footer>
           </article>
         </div>
@@ -577,8 +577,8 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
                     {formatDate(wa184.plannedStartDate)} (in {daysUntil(wa184.plannedStartDate!)} days)
                   </p>
                   <div class="action__btns">
-                    <EsaButton color="primary" size="sm">Confirm block</EsaButton>
-                    <EsaButton color="ghost" appearance="outline" size="sm">Review gates</EsaButton>
+                    <EsaButton variant="primary" size="sm">Confirm block</EsaButton>
+                    <EsaButton variant="ghost" appearance="outline" size="sm">Review gates</EsaButton>
                   </div>
                 </div>
               </section>
@@ -639,7 +639,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
               </div>
             </div>
             <footer class="drawer__foot">
-              <EsaButton color="ghost" appearance="outline" size="md">Edit clearance</EsaButton>
+              <EsaButton variant="ghost" appearance="outline" size="md">Edit clearance</EsaButton>
             </footer>
           </article>
         </figure>
@@ -670,7 +670,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
                     Planned start {formatDate(wa014.plannedStartDate)} lands before both pending reviews.
                   </p>
                   <div class="action__btns">
-                    <EsaButton color="ghost" appearance="outline" size="sm">Edit planned start</EsaButton>
+                    <EsaButton variant="ghost" appearance="outline" size="sm">Edit planned start</EsaButton>
                   </div>
                 </div>
               </section>
@@ -723,7 +723,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
               </div>
             </div>
             <footer class="drawer__foot">
-              <EsaButton color="ghost" appearance="outline" size="md">Edit clearance</EsaButton>
+              <EsaButton variant="ghost" appearance="outline" size="md">Edit clearance</EsaButton>
             </footer>
           </article>
         </figure>
@@ -804,7 +804,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
                   <blockquote class="note note--sm">{wa014.biologistNote}</blockquote>
                 </BcnKeyValue>
                 <div class="disc-panel__foot">
-                  <EsaButton color="ghost" appearance="outline" size="sm">Edit biological review</EsaButton>
+                  <EsaButton variant="ghost" appearance="outline" size="sm">Edit biological review</EsaButton>
                 </div>
               </section>
 
@@ -815,8 +815,8 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
                 </div>
                 <p class="empty">No cultural resources review has been recorded for this work area.</p>
                 <div class="disc-panel__foot">
-                  <EsaButton color="ghost" appearance="outline" size="sm">Add review</EsaButton>
-                  <EsaButton color="ghost" appearance="outline" size="sm">Mark no review required</EsaButton>
+                  <EsaButton variant="ghost" appearance="outline" size="sm">Add review</EsaButton>
+                  <EsaButton variant="ghost" appearance="outline" size="sm">Mark no review required</EsaButton>
                 </div>
               </section>
 
@@ -832,7 +832,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
                 <BcnKeyValue label="Determination note"><span class="kv-text">{g014noise.note}</span></BcnKeyValue>
                 <BcnKeyValue label="Survey record" value="No noise survey on record" />
                 <div class="disc-panel__foot">
-                  <EsaButton color="ghost" appearance="outline" size="sm">Edit noise review</EsaButton>
+                  <EsaButton variant="ghost" appearance="outline" size="sm">Edit noise review</EsaButton>
                 </div>
               </section>
 
@@ -852,12 +852,12 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
                   This review lands one day after the planned start ({formatDate(wa014.plannedStartDate)}).
                 </p>
                 <div class="disc-panel__foot">
-                  <EsaButton color="ghost" appearance="outline" size="sm">Edit geology review</EsaButton>
+                  <EsaButton variant="ghost" appearance="outline" size="sm">Edit geology review</EsaButton>
                 </div>
               </section>
             </div>
             <footer class="drawer__foot">
-              <EsaButton color="ghost" appearance="outline" size="md">Edit site details</EsaButton>
+              <EsaButton variant="ghost" appearance="outline" size="md">Edit site details</EsaButton>
             </footer>
           </article>
         </figure>
@@ -944,7 +944,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
                         {formatDate(swha.estEndDate)}.
                       </p>
                       <div class="action__btns">
-                        <EsaButton color="primary" size="sm">Confirm block</EsaButton>
+                        <EsaButton variant="primary" size="sm">Confirm block</EsaButton>
                       </div>
                     </div>
                   </div>
@@ -999,7 +999,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
                     <p class="step__title">Notification <span class="step__when">not on record</span></p>
                     <p class="step__text">No 30-day landowner notification recorded.</p>
                     <div class="step__act">
-                      <EsaButton color="ghost" appearance="outline" size="sm">Record notification</EsaButton>
+                      <EsaButton variant="ghost" appearance="outline" size="sm">Record notification</EsaButton>
                     </div>
                   </div>
                 </li>
@@ -1039,7 +1039,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
                       <li class="check__row">
                         <span class="check__dot" data-none="true"></span>
                         <span class="check__dim">Cultural Resources</span>
-                        <span class="check__act"><EsaButton color="ghost" appearance="outline" size="sm">Add review</EsaButton></span>
+                        <span class="check__act"><EsaButton variant="ghost" appearance="outline" size="sm">Add review</EsaButton></span>
                         <span class="check__state">Not reviewed</span>
                       </li>
                     </ul>
@@ -1065,7 +1065,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
                       ({formatDate(g014noise.reviewDate)}) — move the start or expedite the reviews.
                     </p>
                     <div class="step__act">
-                      <EsaButton color="ghost" appearance="outline" size="sm">Edit planned start</EsaButton>
+                      <EsaButton variant="ghost" appearance="outline" size="sm">Edit planned start</EsaButton>
                     </div>
                   </div>
                 </li>
@@ -1095,7 +1095,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
 
   <style>
     :global(body) {
-      background: var(--color-background);
+      background: var(--color-background-default);
     }
 
     /* ═══ Page frame ═══ */
@@ -1116,19 +1116,19 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       margin: 0;
       font-family: var(--font-decorative);
       font-size: 2rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
     }
     .spec__intro {
       margin: 0;
       max-width: 86ch;
-      font-size: var(--type-size-200, 1rem);
+      font-size: var(--font-size-200, 1rem);
       line-height: 1.6;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
     .spec__intro strong {
-      color: var(--color-text-primary);
-      font-weight: var(--font-weight-semibold);
+      color: var(--color-content-default);
+      font-weight: var(--typography-font-weight-semibold);
     }
 
     /* ═══ v2 deep dive ═══ */
@@ -1145,8 +1145,8 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     .v2__title {
       margin: 0;
       font-size: 1.5rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
     }
     .v2__changes {
       margin: 0;
@@ -1159,11 +1159,11 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     .v2__changes li {
       font-size: 1rem;
       line-height: 1.55;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
     .v2__changes strong {
-      color: var(--color-text-primary);
-      font-weight: var(--font-weight-semibold);
+      color: var(--color-content-default);
+      font-weight: var(--typography-font-weight-semibold);
     }
     .v2__pair {
       display: grid;
@@ -1180,8 +1180,8 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     .v2__sub {
       margin: var(--spacing-300) 0 0;
       font-size: 1.1875rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
     }
 
     /* Date band — always-visible decision inputs directly under the header
@@ -1191,15 +1191,15 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       grid-template-columns: repeat(3, 1fr);
       gap: var(--spacing-200) var(--spacing-300);
       padding: var(--spacing-250) var(--spacing-400);
-      background: var(--color-background);
-      border-bottom: 1px solid var(--color-border);
+      background: var(--color-background-default);
+      border-bottom: 1px solid var(--color-border-default);
     }
     .band--4 {
       grid-template-columns: repeat(4, 1fr);
     }
     .band__alert {
-      font-size: var(--form-font-size-md);
-      font-weight: var(--font-weight-semibold);
+      font-size: var(--typography-label-md-font-size);
+      font-weight: var(--typography-font-weight-semibold);
       color: color-mix(in srgb, var(--st-blocked) 72%, #1a1a1a);
     }
 
@@ -1213,8 +1213,8 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       gap: var(--spacing-200);
       padding: var(--spacing-250) var(--spacing-300);
       border-radius: var(--radius-200);
-      background: var(--color-background);
-      border: 1px solid var(--color-border);
+      background: var(--color-background-default);
+      border: 1px solid var(--color-border-default);
     }
     .decide--prov {
       background: color-mix(in srgb, var(--st-provisional-block) 6%, transparent);
@@ -1222,7 +1222,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       /* Confirm block is the serious action — esa-button's own danger variant,
          re-pointed from the hub's #ef4444 to the page's committed status red
          so button, border, and ink stay one red family. */
-      --color-danger: var(--st-provisional-block);
+      --color-background-utility-danger: var(--st-provisional-block);
     }
     .decide--blocked {
       background: color-mix(in srgb, var(--st-blocked) 10%, transparent);
@@ -1231,9 +1231,9 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     .decide__line {
       margin: 0;
       font-size: 0.9375rem;
-      font-weight: var(--font-weight-semibold);
+      font-weight: var(--typography-font-weight-semibold);
       line-height: 1.45;
-      color: var(--color-text-primary);
+      color: var(--color-content-default);
     }
     /* Row 1 of the slim confirm: badge + fact, full width, wraps freely. */
     .decide__line--fact {
@@ -1256,12 +1256,12 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     }
     .obs-id {
       flex-shrink: 0;
-      font-family: var(--font-mono);
+      font-family: var(--typography-font-family-mono);
       font-size: 0.8125rem;
       font-weight: 500;
       padding: 1px var(--spacing-200);
       border-radius: var(--radius-100);
-      background: var(--color-surface);
+      background: var(--color-background-elevation-raised);
       border: 1px solid color-mix(in srgb, var(--st-provisional-block) 45%, transparent);
       color: color-mix(in srgb, var(--st-provisional-block) 72%, #1a1a1a);
       white-space: nowrap;
@@ -1279,7 +1279,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       flex: 1;
       min-width: 0;
       font-size: 0.875rem;
-      font-weight: var(--font-weight-semibold);
+      font-weight: var(--typography-font-weight-semibold);
       line-height: 1.45;
       color: color-mix(in srgb, var(--st-blocked) 72%, #1a1a1a);
     }
@@ -1290,18 +1290,18 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       cursor: pointer;
       text-align: left;
       font-family: inherit;
-      border: 1px solid var(--color-border-light);
-      background: var(--color-surface);
+      border: 1px solid var(--color-border-default-subtle);
+      background: var(--color-background-elevation-raised);
       transition: border-color 120ms ease, background 120ms ease;
     }
     .board__cell--btn:hover {
-      border-color: var(--color-border-strong);
-      background: var(--grid-row-bg-hover, var(--color-background));
+      border-color: var(--color-border-default-strong);
+      background: var(--grid-row-bg-hover, var(--color-background-default));
     }
     .board__cell--btn[data-active] {
-      border-color: var(--color-primary);
-      box-shadow: inset 0 0 0 1px var(--color-primary);
-      background: var(--color-primary-subtle);
+      border-color: var(--color-background-brand);
+      box-shadow: inset 0 0 0 1px var(--color-background-brand);
+      background: var(--color-background-brand-subtle);
     }
     .board__cellhead {
       display: flex;
@@ -1315,7 +1315,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     }
     .board__chev {
       display: inline-flex;
-      color: var(--color-text-tertiary);
+      color: var(--color-content-default-tertiary);
     }
 
     /* ═══ The parent → child drawer stack (static depiction of esa-side-dialog
@@ -1354,7 +1354,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     }
     .drawer__close {
       margin-left: auto;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
 
     /* Child drawer — review history */
@@ -1366,8 +1366,8 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     }
     .child__count {
       font-size: 0.9375rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
     }
     .revs {
       list-style: none;
@@ -1394,7 +1394,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       top: 20px;
       bottom: 2px;
       width: 2px;
-      background: var(--color-border);
+      background: var(--color-border-default);
     }
     .rev__dot {
       width: 16px;
@@ -1402,8 +1402,8 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       border-radius: var(--radius-full);
       margin-top: 2px;
       z-index: 1;
-      background: var(--color-surface);
-      border: 2px solid var(--color-border-strong);
+      background: var(--color-background-elevation-raised);
+      border: 2px solid var(--color-border-default-strong);
     }
     .rev[data-kind='scheduled'] .rev__dot {
       border-color: var(--st-survey-scheduled);
@@ -1425,13 +1425,13 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       gap: var(--spacing-200);
       margin: 0;
       font-size: 1rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
     }
     .rev__when {
       font-size: 0.875rem;
-      font-weight: var(--font-weight-medium);
-      color: var(--color-text-secondary);
+      font-weight: var(--typography-font-weight-medium);
+      color: var(--color-content-default-secondary);
     }
     .rev__chiprow {
       display: flex;
@@ -1441,34 +1441,34 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     }
     .rev__until {
       font-size: 0.875rem;
-      font-weight: var(--font-weight-medium);
-      color: var(--color-text-secondary);
+      font-weight: var(--typography-font-weight-medium);
+      color: var(--color-content-default-secondary);
     }
     .rev__current {
       display: inline-flex;
       align-items: center;
       padding: 1px var(--spacing-200);
       border-radius: var(--radius-full);
-      background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-      border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
+      background: color-mix(in srgb, var(--color-background-brand) 10%, transparent);
+      border: 1px solid color-mix(in srgb, var(--color-background-brand) 30%, transparent);
       font-size: 0.75rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-background-brand);
       white-space: nowrap;
     }
     .rev__note {
       margin: 0;
       font-size: 0.9375rem;
       line-height: 1.55;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
 
     /* Data-model note */
     .model-note {
       max-width: 86ch;
       padding: var(--spacing-400) var(--spacing-500);
-      background: var(--color-surface);
-      border: 1px solid var(--color-border);
+      background: var(--color-background-elevation-raised);
+      border: 1px solid var(--color-border-default);
       border-radius: var(--radius-300);
       display: flex;
       flex-direction: column;
@@ -1477,26 +1477,26 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     .model-note__title {
       margin: 0;
       font-size: 1rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
     }
     .model-note__text {
       margin: 0;
       font-size: 0.9375rem;
       line-height: 1.6;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
     .model-note__text code {
-      font-family: var(--font-mono);
+      font-family: var(--typography-font-family-mono);
       font-size: 0.875em;
       padding: 1px 5px;
       border-radius: var(--radius-100);
-      background: var(--color-background);
-      border: 1px solid var(--color-border-light);
+      background: var(--color-background-default);
+      border: 1px solid var(--color-border-default-subtle);
     }
     .model-note__text strong {
-      color: var(--color-text-primary);
-      font-weight: var(--font-weight-semibold);
+      color: var(--color-content-default);
+      font-weight: var(--typography-font-weight-semibold);
     }
 
     /* ═══ Round 1 (reference) ═══ */
@@ -1505,7 +1505,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       flex-direction: column;
       gap: var(--spacing-500);
       padding-top: var(--spacing-600);
-      border-top: 1px solid var(--color-border);
+      border-top: 1px solid var(--color-border-default);
     }
     .round1__head {
       display: flex;
@@ -1515,15 +1515,15 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     .round1__title {
       margin: 0;
       font-size: 1.5rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
     }
     .round1__line {
       margin: 0;
       max-width: 86ch;
       font-size: 1rem;
       line-height: 1.55;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
 
     /* ═══ Concept columns ═══ */
@@ -1552,8 +1552,8 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       gap: var(--spacing-250);
       margin: 0;
       font-size: 1.25rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
     }
     .concept__num {
       display: inline-flex;
@@ -1562,17 +1562,17 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       width: 28px;
       height: 28px;
       border-radius: var(--radius-full);
-      background: var(--color-primary);
+      background: var(--color-background-brand);
       color: #fff;
       font-size: 1rem;
-      font-weight: var(--font-weight-semibold);
+      font-weight: var(--typography-font-weight-semibold);
       flex-shrink: 0;
     }
     .concept__line {
       margin: 0;
       font-size: 1rem;
       line-height: 1.5;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
     .concept__pt {
       display: flex;
@@ -1582,8 +1582,8 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     .concept__pt-label {
       margin: var(--spacing-150) 0 0;
       font-size: 0.9375rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
     }
     .concept__pt ul {
       margin: 0;
@@ -1595,7 +1595,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     .concept__pt li {
       font-size: 0.9375rem;
       line-height: 1.5;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
 
     /* ═══ Mockup framing ═══ */
@@ -1607,15 +1607,15 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     }
     .mockup__case {
       font-size: 0.875rem;
-      font-weight: var(--font-weight-semibold);
+      font-weight: var(--typography-font-weight-semibold);
       line-height: 1.5;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
 
     /* ═══ Drawer shell (static stand-in for esa-side-dialog) ═══ */
     .drawer {
-      background: var(--color-surface);
-      border: 1px solid var(--color-border);
+      background: var(--color-background-elevation-raised);
+      border: 1px solid var(--color-border-default);
       border-radius: var(--radius-300);
       box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
       overflow: hidden;
@@ -1625,7 +1625,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       flex-direction: column;
       gap: 2px;
       padding: var(--spacing-400);
-      border-bottom: 1px solid var(--color-border);
+      border-bottom: 1px solid var(--color-border-default);
     }
     .drawer__headrow {
       display: flex;
@@ -1634,14 +1634,14 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     }
     .drawer__title {
       margin: 0;
-      font-size: var(--type-size-400);
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-size: var(--font-size-400);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
     }
     .drawer__sub {
       margin: 0;
       font-size: 0.875rem;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
     .drawer__body {
       display: flex;
@@ -1654,8 +1654,8 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       justify-content: flex-end;
       gap: var(--spacing-200);
       padding: var(--spacing-300) var(--spacing-400);
-      border-top: 1px solid var(--color-border);
-      background: var(--color-surface);
+      border-top: 1px solid var(--color-border-default);
+      background: var(--color-background-elevation-raised);
     }
     .drawer__section {
       display: flex;
@@ -1663,29 +1663,29 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       gap: var(--spacing-200);
       margin: 0 0 var(--spacing-300);
       font-size: 0.9375rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
     }
     .drawer__section :global(.esa-icon) {
       flex-shrink: 0;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
     .drawer__more {
       display: flex;
       flex-direction: column;
     }
     .drawer__more :global(.esa-collapsible + .esa-collapsible) {
-      border-top: 1px solid var(--color-border-light);
+      border-top: 1px solid var(--color-border-default-subtle);
     }
 
     /* Provisional-block chips — the OUTLINED-red hollow variant (the live page's
        committed idiom: white fill + red ring + hollow dot). */
     :global(.bcn-status-chip[data-status='provisional-block']) {
-      background: var(--color-surface);
+      background: var(--color-background-elevation-raised);
       box-shadow: inset 0 0 0 1.5px var(--st-provisional-block);
     }
     :global(.bcn-status-chip[data-status='provisional-block'] .bcn-status-chip__dot) {
-      background: var(--color-surface);
+      background: var(--color-background-elevation-raised);
       box-shadow: inset 0 0 0 1.5px var(--st-provisional-block);
     }
 
@@ -1694,11 +1694,11 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       display: inline-flex;
       align-items: center;
       padding: 2px var(--spacing-250);
-      border: 1px dashed var(--color-border-strong);
+      border: 1px dashed var(--color-border-default-strong);
       border-radius: var(--radius-full);
-      font-size: var(--type-size-100);
-      font-weight: var(--font-weight-medium);
-      color: var(--color-text-tertiary);
+      font-size: var(--font-size-100);
+      font-weight: var(--typography-font-weight-medium);
+      color: var(--color-content-default-tertiary);
       white-space: nowrap;
     }
 
@@ -1709,8 +1709,8 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       gap: var(--spacing-250);
       padding: var(--spacing-400);
       border-radius: var(--radius-300);
-      background: var(--color-background);
-      border: 1px solid var(--color-border);
+      background: var(--color-background-default);
+      border: 1px solid var(--color-border-default);
     }
     .action--provisional {
       background: color-mix(in srgb, var(--st-provisional-block) 6%, transparent);
@@ -1723,8 +1723,8 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     .action__title {
       margin: 0;
       font-size: 1.0625rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
     }
     .action--provisional .action__title {
       color: color-mix(in srgb, var(--st-provisional-block) 72%, #1a1a1a);
@@ -1733,17 +1733,17 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       margin: 0;
       font-size: 0.9375rem;
       line-height: 1.55;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
     .action__text strong {
       color: color-mix(in srgb, var(--st-provisional-block) 72%, #1a1a1a);
-      font-weight: var(--font-weight-semibold);
+      font-weight: var(--typography-font-weight-semibold);
     }
     .action__facts {
       margin: 0;
       font-size: 0.875rem;
-      font-weight: var(--font-weight-medium);
-      color: var(--color-text-secondary);
+      font-weight: var(--typography-font-weight-medium);
+      color: var(--color-content-default-secondary);
     }
     .action__conflict {
       display: flex;
@@ -1751,7 +1751,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       gap: var(--spacing-150);
       margin: 0;
       font-size: 0.9375rem;
-      font-weight: var(--font-weight-semibold);
+      font-weight: var(--typography-font-weight-semibold);
       line-height: 1.45;
       color: color-mix(in srgb, var(--st-blocked) 72%, #1a1a1a);
     }
@@ -1776,18 +1776,18 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       align-items: flex-start;
       gap: var(--spacing-150);
       padding: var(--spacing-250) var(--spacing-300);
-      border: 1px solid var(--color-border-light);
+      border: 1px solid var(--color-border-default-subtle);
       border-radius: var(--radius-200);
-      background: var(--color-surface);
+      background: var(--color-background-elevation-raised);
     }
     .board__dim {
       font-size: 0.875rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
     }
     .board__meta {
       font-size: 0.8125rem;
-      color: var(--color-text-tertiary);
+      color: var(--color-content-default-tertiary);
     }
 
     /* ═══ Shared row idioms (conflict / survey / note / dates / empty) ═══ */
@@ -1805,8 +1805,8 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       justify-content: space-between;
       gap: var(--spacing-300);
       padding: var(--spacing-250) var(--spacing-300);
-      background: var(--color-surface);
-      border: 1px solid var(--color-border);
+      background: var(--color-background-elevation-raised);
+      border: 1px solid var(--color-border-default);
       border-radius: var(--radius-300);
     }
     .conflict__main {
@@ -1816,8 +1816,8 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       min-width: 0;
       flex: 1;
       font-size: 0.9375rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
     }
     .conflict__meta {
       display: flex;
@@ -1825,38 +1825,38 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       align-items: flex-end;
       gap: 2px;
       font-size: 0.875rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
       white-space: nowrap;
     }
     .conflict__sub {
       font-size: 0.8125rem;
-      font-weight: var(--font-weight-regular);
-      color: var(--color-text-tertiary);
+      font-weight: var(--typography-font-weight-regular);
+      color: var(--color-content-default-tertiary);
     }
     .survey {
       padding: var(--spacing-100) 0;
     }
     .survey__link {
       font-size: 0.9375rem;
-      font-weight: var(--font-weight-medium);
-      color: var(--color-secondary);
+      font-weight: var(--typography-font-weight-medium);
+      color: var(--color-background-brand-muted);
       text-decoration: none;
       cursor: pointer;
     }
     .survey__link:hover {
-      color: var(--color-secondary-hover);
+      color: var(--color-background-brand-muted-hover);
       text-decoration: underline;
     }
     .note {
       margin: 0;
       padding: var(--spacing-300) var(--spacing-400);
-      background: var(--color-background);
-      border: 1px solid var(--color-border);
+      background: var(--color-background-default);
+      border: 1px solid var(--color-border-default);
       border-radius: var(--radius-300);
       font-size: 1rem;
       line-height: 1.6;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
       white-space: pre-line;
     }
     .note--sm {
@@ -1871,12 +1871,12 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     .empty {
       margin: 0;
       font-size: 0.875rem;
-      color: var(--color-text-tertiary);
+      color: var(--color-content-default-tertiary);
     }
     .kv-text {
       font-size: 0.9375rem;
       line-height: 1.5;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
 
     /* ═══ Concept 2 — rollup strip + discipline switcher + panel ═══ */
@@ -1885,8 +1885,8 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       align-items: center;
       gap: var(--spacing-250);
       padding: var(--spacing-250) var(--spacing-300);
-      background: var(--color-background);
-      border: 1px solid var(--color-border);
+      background: var(--color-background-default);
+      border: 1px solid var(--color-border-default);
       border-radius: var(--radius-200);
     }
     .strip :global(.esa-icon) {
@@ -1896,11 +1896,11 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     .strip__text {
       font-size: 0.875rem;
       line-height: 1.45;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
     .strip__text strong {
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
     }
 
     .disc-tabs {
@@ -1914,20 +1914,20 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       align-items: center;
       gap: var(--spacing-100);
       padding: var(--spacing-200) var(--spacing-100);
-      border: 1px solid var(--color-border);
+      border: 1px solid var(--color-border-default);
       border-radius: var(--radius-200);
-      background: var(--color-surface);
+      background: var(--color-background-elevation-raised);
       font-family: inherit;
       cursor: pointer;
       transition: border-color 120ms ease, background 120ms ease;
     }
     .disc-tabs [role='tab']:hover {
-      border-color: var(--color-border-strong);
+      border-color: var(--color-border-default-strong);
     }
     .disc-tabs [role='tab'][aria-selected='true'] {
-      border-color: var(--color-primary);
-      background: var(--color-primary-subtle);
-      box-shadow: inset 0 0 0 1px var(--color-primary);
+      border-color: var(--color-background-brand);
+      background: var(--color-background-brand-subtle);
+      box-shadow: inset 0 0 0 1px var(--color-background-brand);
     }
     .disc-tabs__dot {
       width: 10px;
@@ -1936,13 +1936,13 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       flex-shrink: 0;
     }
     .disc-tabs__dot[data-none='true'] {
-      background: var(--color-surface);
-      border: 1px dashed var(--color-border-strong);
+      background: var(--color-background-elevation-raised);
+      border: 1px dashed var(--color-border-default-strong);
     }
     .disc-tabs__label {
       font-size: 0.875rem;
-      font-weight: var(--font-weight-medium);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-medium);
+      color: var(--color-content-default);
     }
 
     .disc-panel {
@@ -1950,9 +1950,9 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       flex-direction: column;
       gap: var(--spacing-300);
       padding: var(--spacing-400);
-      border: 1px solid var(--color-border);
+      border: 1px solid var(--color-border-default);
       border-radius: var(--radius-300);
-      background: var(--color-surface);
+      background: var(--color-background-elevation-raised);
     }
     .disc-panel[hidden] {
       display: none;
@@ -1964,8 +1964,8 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     }
     .disc-panel__when {
       font-size: 0.875rem;
-      font-weight: var(--font-weight-medium);
-      color: var(--color-text-secondary);
+      font-weight: var(--typography-font-weight-medium);
+      color: var(--color-content-default-secondary);
     }
     .disc-panel__warn {
       display: flex;
@@ -1973,7 +1973,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       gap: var(--spacing-150);
       margin: 0;
       font-size: 0.875rem;
-      font-weight: var(--font-weight-semibold);
+      font-weight: var(--typography-font-weight-semibold);
       line-height: 1.45;
       color: color-mix(in srgb, var(--st-blocked) 72%, #1a1a1a);
     }
@@ -2014,7 +2014,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       top: 28px;
       bottom: 4px;
       width: 2px;
-      background: var(--color-border);
+      background: var(--color-border-default);
     }
     .step__dot {
       display: flex;
@@ -2023,14 +2023,14 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       width: 24px;
       height: 24px;
       border-radius: var(--radius-full);
-      background: var(--color-surface);
-      border: 2px solid var(--color-border-strong);
+      background: var(--color-background-elevation-raised);
+      border: 2px solid var(--color-border-default-strong);
       margin-top: 0;
       z-index: 1;
     }
     .step[data-state='done'] .step__dot {
-      background: var(--color-primary);
-      border-color: var(--color-primary);
+      background: var(--color-background-brand);
+      border-color: var(--color-background-brand);
     }
     .step[data-state='done'] .step__dot::after {
       content: '';
@@ -2068,7 +2068,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     }
     .step[data-state='future'] .step__dot {
       border-style: dashed;
-      border-color: var(--color-border-strong);
+      border-color: var(--color-border-default-strong);
     }
     .step__content {
       display: flex;
@@ -2084,13 +2084,13 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       gap: var(--spacing-200);
       margin: 0;
       font-size: 1rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
     }
     .step__when {
       font-size: 0.875rem;
-      font-weight: var(--font-weight-medium);
-      color: var(--color-text-secondary);
+      font-weight: var(--typography-font-weight-medium);
+      color: var(--color-content-default-secondary);
     }
     .step[data-state='live-red'] .step__when {
       color: color-mix(in srgb, var(--st-provisional-block) 72%, #1a1a1a);
@@ -2099,7 +2099,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       margin: 0;
       font-size: 0.9375rem;
       line-height: 1.5;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
     .step__flag {
       display: flex;
@@ -2107,7 +2107,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       gap: var(--spacing-150);
       margin: 0;
       font-size: 0.9375rem;
-      font-weight: var(--font-weight-semibold);
+      font-weight: var(--typography-font-weight-semibold);
       line-height: 1.45;
       color: color-mix(in srgb, var(--st-blocked) 72%, #1a1a1a);
     }
@@ -2138,7 +2138,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       padding: var(--spacing-200) 0;
     }
     .check__row + .check__row {
-      border-top: 1px solid var(--color-border-light);
+      border-top: 1px solid var(--color-border-default-subtle);
     }
     .check__dot {
       width: 10px;
@@ -2147,18 +2147,18 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
       justify-self: center;
     }
     .check__dot[data-none='true'] {
-      background: var(--color-surface);
-      border: 1px dashed var(--color-border-strong);
+      background: var(--color-background-elevation-raised);
+      border: 1px dashed var(--color-border-default-strong);
     }
     .check__dim {
       font-size: 0.9375rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
     }
     .check__state {
       grid-column: 2 / -1;
       font-size: 0.875rem;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
     .check__act {
       grid-row: 1;
@@ -2169,8 +2169,8 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     .evaluate {
       max-width: 86ch;
       padding: var(--spacing-500);
-      background: var(--color-surface);
-      border: 1px solid var(--color-border);
+      background: var(--color-background-elevation-raised);
+      border: 1px solid var(--color-border-default);
       border-radius: var(--radius-300);
       display: flex;
       flex-direction: column;
@@ -2179,8 +2179,8 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     .evaluate__title {
       margin: 0;
       font-size: 1.25rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
+      font-weight: var(--typography-font-weight-semibold);
+      color: var(--color-content-default);
     }
     .evaluate__list {
       margin: 0;
@@ -2192,7 +2192,7 @@ const CHEVRON = "<path d='m9 18 6-6-6-6'/>";
     .evaluate__list li {
       font-size: 1rem;
       line-height: 1.55;
-      color: var(--color-text-secondary);
+      color: var(--color-content-default-secondary);
     }
   </style>
 </BaseLayout>
diff --git a/src/pages/shell.astro b/src/pages/shell.astro
index c3181f02..549d3f9f 100644
--- a/src/pages/shell.astro
+++ b/src/pages/shell.astro
@@ -76,18 +76,18 @@ import AppShell from '../layouts/AppShell.astro';
   .demo__title {
     margin: 0;
     font-size: 1.75rem;
-    font-weight: var(--font-weight-bold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-bold);
+    color: var(--color-content-default);
   }
   .demo__subtitle {
     margin: var(--spacing-100) 0 0;
     font-size: 0.9375rem;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .demo__count {
     font-size: 0.875rem;
     font-weight: 600;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
   }
   .demo__grid {
     display: grid;
@@ -99,21 +99,21 @@ import AppShell from '../layouts/AppShell.astro';
     flex-direction: column;
     gap: var(--spacing-200);
     padding: var(--spacing-400);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--spacing-200);
   }
   .demo__card-title {
     margin: 0;
     font-size: 1.0625rem;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-content-default);
   }
   .demo__card-body {
     margin: 0;
     font-size: 0.9375rem;
     line-height: 1.5;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
   .demo__pill {
     align-self: flex-start;
@@ -128,15 +128,15 @@ import AppShell from '../layouts/AppShell.astro';
   }
   .demo__pill--in-progress {
     background: color-mix(in srgb, var(--bcn-status-in-progress) 18%, transparent);
-    color: var(--color-warning-strong, #b45309);
+    color: var(--color-content-utility-warning, #b45309);
   }
   .demo__pill--completed {
     background: var(--color-success-100);
-    color: var(--color-success-strong, #15803d);
+    color: var(--color-content-utility-success, #15803d);
   }
   .demo__filler {
     font-size: 0.9375rem;
-    color: var(--color-text-tertiary);
+    color: var(--color-content-default-tertiary);
     max-width: 60ch;
   }
 </style>
diff --git a/src/styles/beacon-map.css b/src/styles/beacon-map.css
index 05af5ac4..fc662675 100644
--- a/src/styles/beacon-map.css
+++ b/src/styles/beacon-map.css
@@ -12,27 +12,27 @@
    specificity fight with leaflet.css regardless of bundle order. */
 .leaflet-container .leaflet-tooltip {
   padding: 6px 12px;
-  font-family: var(--font-sans, inherit);
+  font-family: var(--typography-font-family-sans, inherit);
   font-size: 0.9375rem;
-  font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--typography-font-weight-semibold, 600);
   line-height: 1.4;
-  color: var(--color-text-primary, #3d3d3d);
-  background: var(--color-surface, #ffffff);
-  border: 1px solid var(--color-border, #dcdcdc);
+  color: var(--color-content-default, #3d3d3d);
+  background: var(--color-background-elevation-raised, #ffffff);
+  border: 1px solid var(--color-border-default, #dcdcdc);
   border-radius: var(--radius-100, 4px);
-  box-shadow: var(--shadow-300, 0 6px 24px -6px rgba(0, 0, 0, 0.07));
+  box-shadow: var(--elevation-4, 0 6px 24px -6px rgba(0, 0, 0, 0.07));
 }
 
 /* Directional arrows follow the overridden surface color. */
 .leaflet-container .leaflet-tooltip-top::before {
-  border-top-color: var(--color-surface, #ffffff);
+  border-top-color: var(--color-background-elevation-raised, #ffffff);
 }
 .leaflet-container .leaflet-tooltip-bottom::before {
-  border-bottom-color: var(--color-surface, #ffffff);
+  border-bottom-color: var(--color-background-elevation-raised, #ffffff);
 }
 .leaflet-container .leaflet-tooltip-left::before {
-  border-left-color: var(--color-surface, #ffffff);
+  border-left-color: var(--color-background-elevation-raised, #ffffff);
 }
 .leaflet-container .leaflet-tooltip-right::before {
-  border-right-color: var(--color-surface, #ffffff);
+  border-right-color: var(--color-background-elevation-raised, #ffffff);
 }
diff --git a/src/styles/theme-beacon.css b/src/styles/theme-beacon.css
index b7f88e40..a7470c1a 100644
--- a/src/styles/theme-beacon.css
+++ b/src/styles/theme-beacon.css
@@ -10,7 +10,7 @@
  * system (component-tokens.css says so — "Faithful port of the Angular lib…
  * aligned with Beacon's UiSize"). So Beacon barely diverges from the hub:
  *   - Color ramps (green/blue/orange/yellow/red) are IDENTICAL to Beacon's.
- *   - --color-primary (teal-900 #005862) is EXACTLY Beacon's $primary.
+ *   - --color-background-brand (teal-900 #005862) is EXACTLY Beacon's $primary.
  * This file only re-points the handful of real deltas + adds Beacon's own
  * spoke tokens. Verbatim Beacon look, expressed through ecology's vocabulary.
  *
@@ -32,13 +32,13 @@
      component shows (primary-subtle, primary-border, secondary) must come from
      Beacon's own ramp (raw --bcn-teal-* below), or it renders off-brand.
      Source: ../Beacon/Beacon.Web/src/scss/variables/_colors.scss $palette + semantics. */
-  --color-primary:         var(--bcn-teal-900);   /* $primary  = teal-900 #005862 */
-  --color-primary-hover:   #00474f;               /* color.adjust($primary, -10% L) */
-  --color-primary-active:  #003940;
-  --color-primary-subtle:  var(--bcn-teal-50);    /* was hub teal-50 #f0fdfa */
-  --color-primary-border:  var(--bcn-teal-200);   /* was hub teal-200 #99f6e4 */
-  --color-secondary:       var(--bcn-teal-500);   /* $secondary = teal-500 #00918b */
-  --color-secondary-hover: var(--bcn-teal-800);   /* teal-800 #0a6562 */
+  --color-background-brand:         var(--bcn-teal-900);   /* $primary  = teal-900 #005862 */
+  --color-background-brand-hover:   #00474f;               /* color.adjust($primary, -10% L) */
+  --color-background-brand-active:  #003940;
+  --color-background-brand-subtle:  var(--bcn-teal-50);    /* was hub teal-50 #f0fdfa */
+  --color-border-brand:  var(--bcn-teal-200);   /* was hub teal-200 #99f6e4 */
+  --color-background-brand-muted:       var(--bcn-teal-500);   /* $secondary = teal-500 #00918b */
+  --color-background-brand-muted-hover: var(--bcn-teal-800);   /* teal-800 #0a6562 */
 
   /* ===== FEEDBACK + AI — match Beacon's ui-button palette =====
      Re-point the hub's semantic feedback tokens to the exact colors Beacon's
@@ -52,59 +52,62 @@
      pulses, critical cards, grid chips, flags). Set here because red vs orange
      had drifted too close to read apart at dot size (Andy):
 
-       CRITICAL / OVERDUE    red    --color-danger   (#e5484d, red-9)
+       CRITICAL / OVERDUE    red    --color-background-utility-danger   (#e5484d, red-9)
        ATTENTION / URGENT /
-       IN PROGRESS           amber  --color-warning  (#f59e0b — moved off
+       IN PROGRESS           amber  --color-background-utility-warning  (#f59e0b — moved off
                                     orange #f2770e; ESA orange stays a BRAND
                                     accent, never a severity)
-       ON TRACK / COMPLETE   green  --color-success  (#2e7571, $green-700)
+       ON TRACK / COMPLETE   green  --color-background-utility-success  (#2e7571, $green-700)
        QUIET / NOT STARTED   gray   --bcn-status-not-started (gray-300)
-       INFORMATIONAL         azure  --color-info     (#228be6)
+       INFORMATIONAL         azure  --color-background-utility-info     (#228be6)
 
      Every status dot, chip, and tint derives from these five — no parallel
      literals. The --bcn-status-* layer below re-points here. */
-  --color-success: #2e7571;                 /* Beacon success = $green-700 (was #22c55e) */
-  --color-warning: #f59e0b;                 /* amber-500 — severity amber, distinct from red (was orange #f2770e) */
-  --color-info:    #228be6;                 /* Beacon $info (standalone azure, not on the blue ramp) */
-  --color-ai:       #699cc6;                /* Beacon ai = $blue-500 (hub default is copper) */
-  --color-ai-hover: #4c75a9;                /* Beacon ai hover = $blue-700 */
+  --color-background-utility-success: #2e7571;                 /* Beacon success = $green-700 (was #22c55e) */
+  --color-background-utility-warning: #f59e0b;                 /* amber-500 — severity amber, distinct from red (was orange #f2770e) */
+  --color-background-utility-info:    #228be6;                 /* Beacon $info (standalone azure, not on the blue ramp) */
+  --color-background-ai:       #699cc6;                /* Beacon ai = $blue-500 (hub default is copper) */
+  --color-background-ai-hover: #4c75a9;                /* Beacon ai hover = $blue-700 */
 
   /* ===== NEUTRAL CHAIN — Beacon's warmer grays =====
      Re-point the whole neutral chain to Beacon's --bcn-gray-* ramp (raw material
      below; primitives never move). Warms body text vs the hub's cool grays:
      text-primary #171717 → #3d3d3d. Symmetric with cb-fish. */
-  --color-text-primary:   var(--bcn-gray-900);
-  --color-text-secondary: var(--bcn-gray-700);
-  --color-text-tertiary:  var(--bcn-gray-600);
-  --color-text-muted:     var(--bcn-gray-500);
-  --color-border:         var(--bcn-gray-200);
-  --color-border-light:   var(--bcn-gray-100);
-  --color-border-strong:  var(--bcn-gray-300);
-  --color-background:     var(--bcn-gray-50);
-  --color-surface-sunken: var(--bcn-gray-100);
+  --color-content-default:   var(--bcn-gray-900);
+  --color-content-default-secondary: var(--bcn-gray-700);
+  --color-content-default-tertiary:  var(--bcn-gray-600);
+  /* Spoke-owned: the hub merged text-secondary and text-muted into one
+     --color-content-default-secondary. Beacon keeps the distinction (gray-700
+     vs gray-500), so muted lives on as a bcn- token, not a hub name. */
+  --bcn-content-muted:    var(--bcn-gray-500);
+  --color-border-default:         var(--bcn-gray-200);
+  --color-border-default-subtle:   var(--bcn-gray-100);
+  --color-border-default-strong:  var(--bcn-gray-300);
+  --color-background-default:     var(--bcn-gray-50);
+  --color-background-elevation-sunken: var(--bcn-gray-100);
 
   /* ===== MONO / DECORATIVE FACES ===== */
   /* Beacon ships Roboto Mono (not the hub default DM Mono) for code/id displays. */
-  --font-mono: 'Roboto Mono', ui-monospace, monospace;
+  --typography-font-family-mono: 'Roboto Mono', ui-monospace, monospace;
   /* Opt-in serif voice (setup wizard). Beacon-only — the hub has no equivalent;
-     --font-display stays sans. Components reach for this token explicitly. */
+     --typography-font-family-display stays sans. Components reach for this token explicitly. */
   --font-decorative: 'Besley', serif;
 
   /* ===== FORM SIZING — Beacon's compact heights =====
-     Beacon's UiSize runs smaller than the hub's defaults (xs 28 / sm 32 / md 40 /
-     lg 48). Re-point to Beacon's _form-inputs.scss: 24 / 28 / 36 / 44. */
-  --form-height-xs: 24px;
-  --form-height-sm: 28px;
-  --form-height-md: 36px;
-  --form-height-lg: 44px;
+     GONE 2026-08-24: the hub removed --form-height-* with no successor (controls
+     size from --spacing-* padding + text; migrations.json form-height row). The
+     declarations that sat here (Beacon's _form-inputs.scss scale: xs 24 / sm 28 /
+     md 36 / lg 44) were inert after the merge, so they are deleted rather than
+     left looking load-bearing. Restoring Beacon's compact density is a hub
+     request (/request-lego), not a theme override. */
 
   /* Beacon rounds every control to a flat 4px ($input-border-radius = $radius-md
      = 4px). The hub defaults md/lg to 8px (--radius-200), so buttons + inputs
      read more rounded than Beacon. Re-point all four to 4px (--radius-100). */
-  --form-radius-xs: var(--radius-100);
-  --form-radius-sm: var(--radius-100);
-  --form-radius-md: var(--radius-100);
-  --form-radius-lg: var(--radius-100);
+  --radius-sm: var(--radius-100);
+  --radius-sm: var(--radius-100);
+  --radius-md: var(--radius-100);
+  --radius-md: var(--radius-100);
 
   /* Beacon's warning fill (#f2770e) is dark enough for white text — its ui-button
      uses white fg on warning. The hub default is dark text (for its lighter amber);
@@ -132,7 +135,7 @@
 
   /* Beacon's true teal ramp (_colors.scss $palette). The hub ships a generic
      teal that only matches Beacon at 900 — these are Beacon's actual brand teal.
-     Raw material: feeds the --color-primary* / --color-secondary* re-points above. */
+     Raw material: feeds the --color-background-brand* / --color-background-brand-muted* re-points above. */
   --bcn-teal-50:  #effefb;
   --bcn-teal-100: #eef5f4;
   --bcn-teal-200: #b9d6d2;
@@ -165,9 +168,9 @@
      status-color standard above (was a parallel set of near-miss literals:
      #ef4444 beside danger #e5484d, #22c55e beside success #2e7571). */
   --bcn-status-not-started: var(--bcn-gray-300);
-  --bcn-status-in-progress: var(--color-warning);
-  --bcn-status-completed:   var(--color-success);
-  --bcn-status-overdue:     var(--color-danger);
+  --bcn-status-in-progress: var(--color-background-utility-warning);
+  --bcn-status-completed:   var(--color-background-utility-success);
+  --bcn-status-overdue:     var(--color-background-utility-danger);
   /* On Hold is DARKER than not-started, not lighter: a component someone
      deliberately paused is a decision, where not-started is an absence. Added
      with the component index, which is the first surface to render all four
@@ -186,7 +189,7 @@
   --bcn-citation-bg: #f6f3ed;
 
   /* Aldo — the help & guidance mark (compass in a circle, named for Aldo Leopold).
-     Aldo green is deliberately its own accent, NOT --color-primary (#005862): the
+     Aldo green is deliberately its own accent, NOT --color-background-brand (#005862): the
      guide reads as a distinct presence, never another primary action. Copper era
      retired 2026-04; green is the settled color. */
   --bcn-aldo:     #08908b;
@@ -212,7 +215,7 @@
      mark; the picker frames a photo the same way), and a ring that only half the
      surfaces follow is worse than no ring. Raw values live here per token discipline. */
   --bcn-seal-ring-width: 3px;
-  --bcn-seal-ring-color: var(--color-surface);
+  --bcn-seal-ring-color: var(--color-background-elevation-raised);
   --bcn-seal-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
 
   /* ===== Entity mark palette — the 20 identity swatches =====

From ef345287ed7f108739e215b1ad60ed634c094b66 Mon Sep 17 00:00:00 2001
From: Andrew Lovseth <andy.lovseth@gmail.com>
Date: Mon, 24 Aug 2026 15:46:09 -0700
Subject: [PATCH 6/6] Dedupe the migrated radius re-points; record the scope
 widening

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Rd8hgM9z8vV2kHXScSDe8B
---
 src/styles/theme-beacon.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/styles/theme-beacon.css b/src/styles/theme-beacon.css
index a7470c1a..aab40784 100644
--- a/src/styles/theme-beacon.css
+++ b/src/styles/theme-beacon.css
@@ -101,12 +101,12 @@
      left looking load-bearing. Restoring Beacon's compact density is a hub
      request (/request-lego), not a theme override. */
 
-  /* Beacon rounds every control to a flat 4px ($input-border-radius = $radius-md
-     = 4px). The hub defaults md/lg to 8px (--radius-200), so buttons + inputs
-     read more rounded than Beacon. Re-point all four to 4px (--radius-100). */
+  /* Beacon rounds to a flat 4px ($input-border-radius = $radius-md = 4px).
+     WIDER THAN BEFORE (2026-08-24): the old --form-radius-* re-point scoped the
+     4px to form controls; the hub deleted that surface, so migrate-tokens moved
+     it onto the semantic --radius-sm/md aliases — which every md-radius consumer
+     (cards, dialogs, popovers) now inherits, matching prod's flatter chrome. */
   --radius-sm: var(--radius-100);
-  --radius-sm: var(--radius-100);
-  --radius-md: var(--radius-100);
   --radius-md: var(--radius-100);
 
   /* Beacon's warning fill (#f2770e) is dark enough for white text — its ui-button