@maxsteinwender/sort-ui 1.2.0 → 1.4.1

package/dist/styles.css

@@ -13621,7 +13621,7 @@ video {
   display: none;
 }
 
-/* ===== Sort UI Theme 1 — Light ===== */
+/* ===== Sort UI Default Blue — Light ===== */
 
 :root {
   --background: 0 0% 100%;
@@ -13689,49 +13689,171 @@ video {
   --shadow-tab-active:          inset 0px 0px 0px 1px var(--border-darker), 0px 1px 2px 0px rgba(0,0,0,0.05), inset 0px -1px 0px 0px rgba(0,0,0,0.08);
   --shadow-text: 0px 0.5px 1px rgba(0,0,0,0.15);
   /* --shadow-tooltip removed — use --shadow-modal-sm instead */
-  /* Sort UI Font Size Tokens — Desktop */
-  --font-size-xs:  12px;
-  --font-size-sm:  14px;
-  --font-size-md:  16px;
-  --font-size-lg:  18px;
-  --font-size-xl:  20px;
-  --font-size-2xl: 24px;
-  --font-size-3xl: 30px;
-  --font-size-4xl: 36px;
-  --font-size-5xl: 48px;
-  --font-size-6xl: 60px;
-  --font-size-7xl: 72px;
-  --font-size-8xl: 96px;
-  --font-size-9xl: 128px;
-  /* Sort UI Font Weight Tokens */
-  --font-weight-light:     300;
+  /* Sort UI Font Size Tokens — Desktop (rem-based, 16px root) */
+  --font-size-xs:  0.75rem;
+  /* 12px */
+  --font-size-sm:  0.875rem;
+  /* 14px */
+  --font-size-md:  1rem;
+  /* 16px */
+  --font-size-lg:  1.125rem;
+  /* 18px */
+  --font-size-xl:  1.25rem;
+  /* 20px */
+  --font-size-2xl: 1.5rem;
+  /* 24px */
+  --font-size-3xl: 1.875rem;
+  /* 30px */
+  --font-size-4xl: 2.25rem;
+  /* 36px */
+  --font-size-5xl: 3rem;
+  /* 48px */
+  --font-size-6xl: 3.75rem;
+  /* 60px */
+  --font-size-7xl: 4.5rem;
+  /* 72px */
+  --font-size-8xl: 6rem;
+  /* 96px */
+  --font-size-9xl: 8rem;
+  /* 128px */
+  /* Sort UI Font Weight Tokens — Regular to Bold only (no Light/Extrabold/Black) */
   --font-weight-normal:    400;
   --font-weight-medium:    500;
   --font-weight-semibold:  600;
   --font-weight-bold:      700;
-  --font-weight-extrabold: 800;
-  --font-weight-black:     900;
-  /* Sort UI Line Height Tokens — Desktop */
-  --leading-3:  12px;
-  --leading-4:  16px;
-  --leading-5:  20px;
-  --leading-6:  24px;
-  --leading-7:  28px;
-  --leading-8:  32px;
-  --leading-9:  36px;
-  --leading-10: 40px;
-  --leading-11: 48px;
-  --leading-12: 60px;
-  --leading-13: 72px;
-  --leading-14: 96px;
-  --leading-15: 128px;
-  /* Sort UI Letter Spacing Tokens */
-  --tracking-tighter: -0.8px;
-  --tracking-tight:   -0.4px;
-  --tracking-normal:  0px;
-  --tracking-wide:    0.4px;
-  --tracking-wider:   0.8px;
-  --tracking-widest:  1.6px;
+  /* Sort UI Line Height Tokens — Desktop (rem-based, paired with Font Size scale) */
+  --leading-3:  0.75rem;
+  /* 12px */
+  --leading-4:  1rem;
+  /* 16px */
+  --leading-5:  1.25rem;
+  /* 20px */
+  --leading-6:  1.5rem;
+  /* 24px */
+  --leading-7:  1.75rem;
+  /* 28px */
+  --leading-8:  2rem;
+  /* 32px */
+  --leading-9:  2.25rem;
+  /* 36px */
+  --leading-10: 2.5rem;
+  /* 40px */
+  --leading-11: 3rem;
+  /* 48px */
+  --leading-12: 3.75rem;
+  /* 60px */
+  --leading-13: 4.5rem;
+  /* 72px */
+  --leading-14: 6rem;
+  /* 96px */
+  --leading-15: 8rem;
+  /* 128px */
+  /* Sort UI Letter Spacing Tokens — em-based (scales with each element's own font-size, matches Tailwind's default scale) */
+  --tracking-tighter: -0.05em;
+  /* -0.8px at 16px */
+  --tracking-tight:   -0.025em;
+  /* -0.4px at 16px */
+  --tracking-normal:  0em;
+  --tracking-wide:    0.025em;
+  /* 0.4px at 16px */
+  --tracking-wider:   0.05em;
+  /* 0.8px at 16px */
+  --tracking-widest:  0.1em;
+  /* 1.6px at 16px */
+  /* Sort UI Type Scale Tokens — semantic size/weight/leading/family/tracking per role
+       (aligned to shadcn/ui typography — see docs/superpowers/specs/2026-07-06-type-scale-shadcn-alignment-design.md)
+       Note: --text-{role}-* here is an unrelated naming coincidence with the pre-existing
+       --text-muted color token (theme-scoped, defined elsewhere in this file) — --text-muted-size
+       is a Type Scale property, --text-muted is a color; they don't collide, just look similar. */
+  --text-display-1-size:     var(--font-size-8xl);
+  --text-display-1-weight:   var(--font-weight-bold);
+  --text-display-1-leading:  var(--leading-14);
+  --text-display-1-family:   var(--font-quote);
+  --text-display-1-tracking: var(--tracking-tighter);
+  --text-display-2-size:     var(--font-size-7xl);
+  --text-display-2-weight:   var(--font-weight-bold);
+  --text-display-2-leading:  var(--leading-13);
+  --text-display-2-family:   var(--font-quote);
+  --text-display-2-tracking: var(--tracking-tighter);
+  --text-display-3-size:     var(--font-size-6xl);
+  --text-display-3-weight:   var(--font-weight-bold);
+  --text-display-3-leading:  var(--leading-12);
+  --text-display-3-family:   var(--font-quote);
+  --text-display-3-tracking: var(--tracking-tight);
+  --text-display-4-size:     var(--font-size-5xl);
+  --text-display-4-weight:   var(--font-weight-bold);
+  --text-display-4-leading:  var(--leading-11);
+  --text-display-4-family:   var(--font-quote);
+  --text-display-4-tracking: var(--tracking-tight);
+  --text-h1-size:     var(--font-size-4xl);
+  --text-h1-weight:   var(--font-weight-semibold);
+  --text-h1-leading:  var(--leading-10);
+  --text-h1-family:   var(--font-headline);
+  --text-h1-tracking: var(--tracking-tight);
+  --text-h2-size:     var(--font-size-3xl);
+  --text-h2-weight:   var(--font-weight-semibold);
+  --text-h2-leading:  var(--leading-9);
+  --text-h2-family:   var(--font-headline);
+  --text-h2-tracking: var(--tracking-normal);
+  --text-h3-size:     var(--font-size-2xl);
+  --text-h3-weight:   var(--font-weight-bold);
+  --text-h3-leading:  var(--leading-8);
+  --text-h3-family:   var(--font-body);
+  --text-h3-tracking: var(--tracking-normal);
+  --text-h4-size:     var(--font-size-xl);
+  --text-h4-weight:   var(--font-weight-bold);
+  --text-h4-leading:  var(--leading-7);
+  --text-h4-family:   var(--font-body);
+  --text-h4-tracking: var(--tracking-normal);
+  --text-large-size:     var(--font-size-lg);
+  --text-large-weight:   var(--font-weight-semibold);
+  --text-large-leading:  var(--leading-7);
+  --text-large-family:   var(--font-body);
+  --text-large-tracking: var(--tracking-normal);
+  --text-p-size:     var(--font-size-md);
+  --text-p-weight:   var(--font-weight-normal);
+  --text-p-leading:  var(--leading-6);
+  --text-p-family:   var(--font-body);
+  --text-p-tracking: var(--tracking-normal);
+  --text-lead-size:     var(--font-size-xl);
+  --text-lead-weight:   var(--font-weight-normal);
+  --text-lead-leading:  var(--leading-7);
+  --text-lead-family:   var(--font-body);
+  --text-lead-tracking: var(--tracking-normal);
+  --text-small-size:     var(--font-size-sm);
+  --text-small-weight:   var(--font-weight-medium);
+  --text-small-leading:  1;
+  --text-small-family:   var(--font-body);
+  --text-small-tracking: var(--tracking-normal);
+  --text-muted-size:     var(--font-size-sm);
+  --text-muted-weight:   var(--font-weight-normal);
+  --text-muted-leading:  var(--leading-5);
+  --text-muted-family:   var(--font-body);
+  --text-muted-tracking: var(--tracking-normal);
+  --text-code-size:     var(--font-size-sm);
+  --text-code-weight:   var(--font-weight-normal);
+  --text-code-leading:  var(--leading-5);
+  --text-code-family:   var(--font-code);
+  --text-code-tracking: var(--tracking-normal);
+  --text-inline-code-size:     var(--font-size-sm);
+  --text-inline-code-weight:   var(--font-weight-semibold);
+  --text-inline-code-family:   var(--font-code);
+  --text-inline-code-tracking: var(--tracking-normal);
+  --text-blockquote-size:     var(--font-size-md);
+  --text-blockquote-weight:   var(--font-weight-normal);
+  --text-blockquote-leading:  var(--leading-6);
+  --text-blockquote-family:   var(--font-quote);
+  --text-blockquote-tracking: var(--tracking-normal);
+  --text-table-size:     var(--font-size-md);
+  --text-table-weight:   var(--font-weight-normal);
+  --text-table-leading:  var(--leading-6);
+  --text-table-family:   var(--font-body);
+  --text-table-tracking: var(--tracking-normal);
+  --text-list-size:     var(--font-size-md);
+  --text-list-weight:   var(--font-weight-normal);
+  --text-list-leading:  var(--leading-6);
+  --text-list-family:   var(--font-body);
+  --text-list-tracking: var(--tracking-normal);
   /* Sort UI Spacing Tokens */
   --spacing-none: 0px;
   --spacing-1:    1px;
@@ -13808,7 +13930,7 @@ video {
   --sidebar-accent-foreground: 240 10.5% 7.5%;
   --sidebar-border: 240 5.9% 90%;
   --sidebar-ring: 221 96.9% 62.5%;
-  /* === GENERATED TOKENS START === Theme-1-Light */
+  /* === GENERATED TOKENS START === Default-Blue-Light */
   /* icon tokens */
   --icon-default: #111115;
   --icon-default-subtle: #4e4e55;
@@ -13830,6 +13952,7 @@ video {
   --icon-informative: #437dfc;
   --icon-success: #4fc660;
   --icon-warning: #f27313;
+  --icon-on-primary: #ffffff;
   /* text tokens */
   --text-default: #111115;
   --text-subtle: #4e4e55;
@@ -13852,6 +13975,7 @@ video {
   --text-informative: #2b5df3;
   --text-success: #3ea44b;
   --text-warning: #e35706;
+  --text-on-primary: #ffffff;
   /* border tokens */
   --border-default: rgba(39, 39, 42, 0.1);
   --border-darker: rgba(39, 39, 42, 0.15);
@@ -14046,6 +14170,8 @@ video {
   --bg-state-soft-loading: rgba(39, 39, 42, 0.06);
   --bg-state-ghost-loading: rgba(39, 39, 42, 0.06);
   --bg-state-ghost-loading-inverted: rgba(255, 255, 255, 0.08);
+  --overlay-on-primary: rgba(255, 255, 255, 0.1);
+  --overlay-on-primary-border: rgba(255, 255, 255, 0.2);
   /* === GENERATED TOKENS END === */
   /* Social button brand colors */
   --social-brand-default: #111115;
@@ -14065,7 +14191,7 @@ video {
   --focus-ring-offset: 1px;
 }
 
-/* ===== Sort UI Theme 1 — Dark ===== */
+/* ===== Sort UI Default Blue — Dark ===== */
 
 .dark {
   --background: 240 5.9% 10%;
@@ -14120,7 +14246,7 @@ video {
   --sidebar-accent-foreground: 0 0% 100%;
   --sidebar-border: 240 3.7% 20%;
   --sidebar-ring: 225 89.3% 56.1%;
-  /* === GENERATED TOKENS START === Theme-1-Dark */
+  /* === GENERATED TOKENS START === Default-Blue-Dark */
   /* icon tokens */
   --icon-default: #ffffff;
   --icon-default-subtle: rgba(255, 255, 255, 0.7);
@@ -14142,6 +14268,7 @@ video {
   --icon-informative: #9ac4fe;
   --icon-success: #99efae;
   --icon-warning: #f7bb77;
+  --icon-on-primary: #ffffff;
   /* text tokens */
   --text-default: #ffffff;
   --text-subtle: rgba(255, 255, 255, 0.7);
@@ -14164,6 +14291,7 @@ video {
   --text-informative: #65a0fd;
   --text-success: #66dc7e;
   --text-warning: #f38f36;
+  --text-on-primary: #ffffff;
   /* border tokens */
   --border-default: rgba(255, 255, 255, 0.1);
   --border-darker: rgba(255, 255, 255, 0.15);
@@ -14355,70 +14483,76 @@ video {
   --bg-state-soft-loading: rgba(255, 255, 255, 0.08);
   --bg-state-ghost-loading: rgba(255, 255, 255, 0.08);
   --bg-state-ghost-loading-inverted: rgba(39, 39, 42, 0.04);
+  --overlay-on-primary: rgba(255, 255, 255, 0.1);
+  --overlay-on-primary-border: rgba(255, 255, 255, 0.2);
   /* === GENERATED TOKENS END === */
 }
 
-/* ===== Sort UI Theme 2 — Light ===== */
+/* ===== Sort UI Neutral Violet — Light ===== */
+
+/* Structurally identical to Default Blue Light — see docs/superpowers/specs/2026-07-06-theme-2-neutral-violet-redesign-design.md.
+     Only two deviations: Primary Button is zinc/black (Group A), accent is violet instead of blue (Group B). */
 
 .theme-2 {
   --background: 0 0% 100%;
-  --foreground: 30 9.1% 12.9%;
+  --foreground: 240 10.5% 7.5%;
   --card: 0 0% 100%;
-  --card-foreground: 30 9.1% 12.9%;
+  --card-foreground: 240 10.5% 7.5%;
   --popover: 0 0% 100%;
-  --popover-foreground: 30 9.1% 12.9%;
-  --primary: 26 89.6% 51.2%;
+  --popover-foreground: 240 10.5% 7.5%;
+  /* Group A — Primary Button: zinc-900 (shadcn "zinc" preset value) */
+  --primary: 240 5.9% 10%;
   --primary-foreground: 0 0% 100%;
   --secondary: 0 0% 100%;
-  --secondary-foreground: 30 9.1% 12.9%;
-  --muted: 60 4.8% 95.9%;
-  --muted-foreground: 26 6.1% 44.7%;
-  --accent: 60 9.1% 97.8%;
-  --accent-foreground: 30 9.1% 12.9%;
-  --destructive: 350 81.2% 58.2%;
+  --secondary-foreground: 240 10.5% 7.5%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.5% 45.1%;
+  --accent: 0 0% 98%;
+  --accent-foreground: 240 10.5% 7.5%;
+  --destructive: 1 77.6% 58%;
   --destructive-foreground: 0 0% 100%;
-  --border: 30 6% 88%;
-  --input: 30 6% 88%;
-  --ring: 26 89.6% 51.2%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  /* Group B — Accent: violet */
+  --ring: 258 90% 66%;
   /* Sort UI State Tokens */
-  --primary-hover: 26 89.6% 45%;
-  --primary-press: 26 89.6% 39%;
-  --destructive-hover: 350 81.2% 52%;
-  --destructive-press: 350 81.2% 46%;
+  --primary-hover: 240 3.7% 15.9%;
+  --primary-press: 240 5.9% 4%;
+  --destructive-hover: 1 77.6% 52%;
+  --destructive-press: 1 77.6% 46%;
   /* Sort UI Extended Semantic Tokens */
   --success: 129 51.1% 54.3%;
   --success-foreground: 0 0% 100%;
   --warning: 46 84.8% 49%;
   --warning-foreground: 0 0% 100%;
-  --informative: 26 89.6% 51.2%;
+  --informative: 258 90% 66%;
   --informative-foreground: 0 0% 100%;
   --overlay: 0 0% 0%;
   /* Sort UI Text Tokens */
-  --text-default: 30 9.1% 12.9%;
-  --text-subtle: 30 6% 28%;
-  --text-muted: 26 6.1% 44.7%;
-  --text-hint: 26 4% 60%;
-  /* Chart Colors */
-  --chart-1: 26 89.6% 51.2%;
-  --chart-2: 171 46% 49.4%;
-  --chart-3: 46 84.8% 49%;
-  --chart-4: 350 81.2% 58.2%;
-  --chart-5: 193 65.7% 54.3%;
-  /* Sidebar vars verified 2026-04-14 — Theme-2 uses warm neutral palette (hue ~26-30°) */
+  --text-default: 240 10.5% 7.5%;
+  --text-subtle: 240 4.2% 26%;
+  --text-muted: 240 3.5% 45.1%;
+  --text-hint: 240 2.5% 62%;
+  /* Chart Colors — same palette as Default Blue, chart-1 swapped to violet */
+  --chart-1: 258 90% 66%;
+  --chart-2: 129 51.1% 54.3%;
+  --chart-3: 26 89.6% 51.2%;
+  --chart-4: 1 77.6% 58%;
+  --chart-5: 268 97.8% 64.9%;
   /* Sidebar */
   --sidebar-background: 0 0% 100%;
-  --sidebar-foreground: 30 9.1% 12.9%;
-  --sidebar-primary: 26 89.6% 51.2%;
+  --sidebar-foreground: 240 10.5% 7.5%;
+  --sidebar-primary: 258 90% 66%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 60 4.8% 95.9%;
-  --sidebar-accent-foreground: 30 9.1% 12.9%;
-  --sidebar-border: 30 6% 88%;
-  --sidebar-ring: 26 89.6% 51.2%;
-  /* === GENERATED TOKENS START === Theme-2-Light */
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 10.5% 7.5%;
+  --sidebar-border: 240 5.9% 90%;
+  --sidebar-ring: 258 90% 66%;
+  /* === GENERATED TOKENS START === Neutral-Violet-Light */
   /* icon tokens */
-  --icon-default: #24211e;
-  --icon-default-subtle: #57534d;
-  --icon-default-muted: #79716b;
+  --icon-default: #111115;
+  --icon-default-subtle: #4e4e55;
+  --icon-default-muted: #6f6f77;
   --icon-default-disabled: rgba(39, 39, 42, 0.25);
   --icon-inverted-default: #ffffff;
   --icon-inverted-subtle: rgba(255, 255, 255, 0.65);
@@ -14428,18 +14562,19 @@ video {
   --icon-white-subtle: rgba(255, 255, 255, 0.65);
   --icon-white-muted: rgba(255, 255, 255, 0.5);
   --icon-white-disabled: rgba(255, 255, 255, 0.35);
-  --icon-black-default: #24211e;
-  --icon-black-subtle: #57534d;
-  --icon-black-muted: #79716b;
+  --icon-black-default: #111115;
+  --icon-black-subtle: #4e4e55;
+  --icon-black-muted: #6f6f77;
   --icon-black-disabled: rgba(39, 39, 42, 0.35);
-  --icon-destructive: #eb3e5b;
-  --icon-informative: #f27313;
-  --icon-success: #44b8a7;
-  --icon-warning: #e7b413;
+  --icon-destructive: #e74341;
+  --icon-informative: #8655fd;
+  --icon-success: #4fc660;
+  --icon-warning: #f27313;
+  --icon-on-primary: #ffffff;
   /* text tokens */
-  --text-default: #24211e;
-  --text-subtle: #57534d;
-  --text-muted: #79716b;
+  --text-default: #111115;
+  --text-subtle: #4e4e55;
+  --text-muted: #6f6f77;
   --text-hint: rgba(39, 39, 42, 0.3);
   --text-inverted-default: #ffffff;
   --text-inverted-subtle: rgba(255, 255, 255, 0.7);
@@ -14449,24 +14584,25 @@ video {
   --text-white-subtle: rgba(255, 255, 255, 0.7);
   --text-white-muted: rgba(255, 255, 255, 0.5);
   --text-white-hint: rgba(255, 255, 255, 0.3);
-  --text-dark-default: #24211e;
-  --text-dark-subtle: #57534d;
-  --text-dark-muted: #79716b;
+  --text-dark-default: #111115;
+  --text-dark-subtle: #4e4e55;
+  --text-dark-muted: #6f6f77;
   --text-dark-hint: rgba(39, 39, 42, 0.35);
-  --text-destructive: #d91a45;
-  --text-primary: #f27313;
-  --text-informative: #e35706;
-  --text-success: #35966a;
-  --text-warning: #c68b0b;
+  --text-destructive: #d42422;
+  --text-primary: #8655fd;
+  --text-informative: #762bf5;
+  --text-success: #3ea44b;
+  --text-warning: #e35706;
+  --text-on-primary: #ffffff;
   /* border tokens */
   --border-default: rgba(39, 39, 42, 0.1);
   --border-darker: rgba(39, 39, 42, 0.15);
-  --border-accent: #24211e;
+  --border-accent: #111115;
   --border-accent-inverted: #ffffff;
-  --border-destructive: #eb3e5b;
-  --border-informative: #3eb5d7;
-  --border-success: #44b8a7;
-  --border-warning: #e7b413;
+  --border-destructive: #e74341;
+  --border-informative: #8655fd;
+  --border-success: #4fc660;
+  --border-warning: #f27313;
   --border-red: rgba(238, 110, 108, 0.2);
   --border-orange: rgba(243, 143, 54, 0.2);
   --border-amber: rgba(245, 189, 30, 0.2);
@@ -14486,41 +14622,39 @@ video {
   --border-rose: rgba(241, 110, 129, 0.2);
   --border-inverted: rgba(255, 255, 255, 0.2);
   --border-white: rgba(255, 255, 255, 0.2);
-  --border-highlight: rgba(243, 143, 54, 0.4);
-  --border-highlight-destructive: rgba(241, 110, 129, 0.4);
+  --border-highlight: rgba(161, 133, 253, 0.4);
+  --border-highlight-destructive: rgba(238, 110, 108, 0.4);
   --border-strong: rgba(39, 39, 42, 0.25);
-  --border-input-highlight: rgba(243, 143, 54, 0.4);
+  --border-input-highlight: rgba(39, 39, 42, 0.4);
   /* bg tokens */
   --bg-default: #ffffff;
-  --bg-subtle: #fafaf9;
-  --bg-muted: #f5f5f4;
+  --bg-subtle: #fafafa;
+  --bg-muted: #f4f4f5;
   --bg-card: #ffffff;
-  --bg-inverted: #24211e;
-  /* WCAG AA — primary states meet 4.5:1 against white text.
-       Was #f27313 (2.90:1) — critical fail. Tailwind orange-700/800/900. */
-  --bg-state-primary: #c2410c;
-  /* 6.50:1 */
-  --bg-state-primary-hover: #9a3412;
-  /* 8.50:1 — darker on hover */
-  --bg-state-primary-press: #7c2d12;
-  /* 11.0:1 — darker on press */
+  --bg-inverted: #18181b;
+  --bg-state-primary: #18181b;
+  /* zinc-900 */
+  --bg-state-primary-hover: #222225;
+  /* zinc-800 */
+  --bg-state-primary-press: #09090b;
+  /* zinc-950 */
   --bg-state-disabled: rgba(39, 39, 42, 0.08);
   --bg-state-secondary: #ffffff;
-  --bg-state-secondary-hover: #fafaf9;
-  --bg-state-secondary-press: #f5f5f4;
+  --bg-state-secondary-hover: #fafafa;
+  --bg-state-secondary-press: #f4f4f5;
   --bg-state-soft: rgba(39, 39, 42, 0.06);
   --bg-state-soft-hover: rgba(39, 39, 42, 0.08);
   --bg-state-soft-press: rgba(39, 39, 42, 0.1);
   --bg-state-ghost: rgba(39, 39, 42, 0.0001);
   --bg-state-ghost-hover: rgba(39, 39, 42, 0.06);
   --bg-state-ghost-press: rgba(39, 39, 42, 0.08);
-  --bg-state-destructive: #c4334d;
-  --bg-state-destructive-hover: #d4445f;
-  --bg-state-destructive-press: #c4334d;
-  --bg-state-brand: #f27313;
-  --bg-state-brand-hover: #f38f36;
-  --bg-state-brand-press: #f27313;
-  --bg-badge-inverted: #24211e;
+  --bg-state-destructive: #c0392b;
+  --bg-state-destructive-hover: #d44538;
+  --bg-state-destructive-press: #c0392b;
+  --bg-state-brand: #8655fd;
+  --bg-state-brand-hover: #a185fd;
+  --bg-state-brand-press: #8655fd;
+  --bg-badge-inverted: #111115;
   --bg-badge-default: #ffffff;
   --bg-badge-red: rgba(238, 110, 108, 0.1);
   --bg-badge-orange: rgba(243, 143, 54, 0.1);
@@ -14543,12 +14677,12 @@ video {
   --bg-input: #ffffff;
   --bg-input-soft: rgba(39, 39, 42, 0.06);
   --bg-badge-white: rgba(255, 255, 255, 0.1);
-  --bg-switch-default: #e7e5e4;
+  --bg-switch-default: #e9e9ec;
   --bg-switch-handle: #ffffff;
-  --bg-switch-handle-disabled: #fafaf9;
-  --bg-switch-active: #44b8a7;
-  --bg-state-primary-loading: #f7bb77;
-  --bg-state-destructive-loading: #f49fa9;
+  --bg-switch-handle-disabled: #fafafa;
+  --bg-switch-active: #4fc660;
+  --bg-state-primary-loading: #a1a1a9;
+  --bg-state-destructive-loading: #f4a6a5;
   --bg-basic-red-subtle: #fae3e3;
   --bg-basic-red-accent: #e74341;
   --bg-basic-red-contrast: #77221f;
@@ -14617,149 +14751,157 @@ video {
   --bg-basic-fuchsia-strong: #9a15b1;
   --bg-basic-pink-strong: #b61a5c;
   --bg-basic-rose-strong: #b6133a;
-  --bg-basic-gray-subtle: #f5f5f4;
-  --bg-basic-gray-accent: #79716b;
-  --bg-basic-gray-strong: #44403b;
-  --bg-basic-gray-contrast: #24211e;
+  --bg-basic-gray-subtle: #f4f4f5;
+  --bg-basic-gray-accent: #6f6f77;
+  --bg-basic-gray-strong: #36363a;
+  --bg-basic-gray-contrast: #18181b;
   --bg-checkbox-default: #ffffff;
-  --bg-checkbox-active: #f27313;
+  --bg-checkbox-active: #8655fd;
   --bg-checkbox-disabled: rgba(39, 39, 42, 0.06);
-  --bg-checkbox-active-hover: #f38f36;
+  --bg-checkbox-active-hover: #a185fd;
   --bg-basic-gray-alpha-10: rgba(39, 39, 42, 0.1);
   --bg-input-disabled: rgba(39, 39, 42, 0.06);
-  --bg-switch-disabled: #f5f5f4;
-  --bg-switch-active-disabled: #adf4e5;
-  --bg-switch-default-hover: #d6d3d1;
-  --bg-switch-active-hover: #359489;
-  --bg-card-inverted: #312c2b;
+  --bg-switch-disabled: #f4f4f5;
+  --bg-switch-active-disabled: #c6f6d2;
+  --bg-switch-default-hover: #dadadd;
+  --bg-switch-active-hover: #3ea44b;
+  --bg-card-inverted: #222225;
   --bg-state-ghost-inverted: rgba(255, 255, 255, 0.0001);
   --bg-state-ghost-hover-inverted: rgba(255, 255, 255, 0.08);
   --bg-state-ghost-press-inverted: rgba(255, 255, 255, 0.15);
   --bg-basic-gray-alpha-2: rgba(39, 39, 42, 0.02);
   --bg-basic-gray-alpha-4: rgba(39, 39, 42, 0.04);
   --bg-basic-gray-alpha-15: rgba(39, 39, 42, 0.15);
-  --bg-state-gray: #24211e;
+  --bg-state-gray: #111115;
   --bg-sidebar: #ffffff;
-  --bg-sidebar-subtle: #fef8ee;
-  --bg-card-subtle: #fafaf9;
+  --bg-sidebar-subtle: #fafafa;
+  --bg-card-subtle: #fafafa;
   --bg-overlay: rgba(39, 39, 42, 0.06);
-  --bg-state-brand-loading: #f7bb77;
-  --bg-switch-default-2: #14110f;
+  --bg-state-brand-loading: #beb0fd;
+  --bg-switch-default-2: #111115;
   --bg-state-secondary-loading: #ffffff;
   --bg-state-soft-loading: rgba(39, 39, 42, 0.06);
   --bg-state-ghost-loading: rgba(39, 39, 42, 0.06);
   --bg-state-ghost-loading-inverted: rgba(255, 255, 255, 0.08);
+  --overlay-on-primary: rgba(255, 255, 255, 0.1);
+  --overlay-on-primary-border: rgba(255, 255, 255, 0.2);
   /* === GENERATED TOKENS END === */
 }
 
-/* ===== Sort UI Theme 2 — Dark ===== */
+/* ===== Sort UI Neutral Violet — Dark ===== */
+
+/* Structurally identical to Default Blue Dark — see docs/superpowers/specs/2026-07-06-theme-2-neutral-violet-redesign-design.md.
+     Group A — Primary Button is INVERTED (near-white bg, dark text via --text-on-primary/--icon-on-primary).
+     Group B — accent is violet instead of orange. */
 
 .theme-2.dark {
-  --background: 30 9.1% 12.9%;
+  --background: 240 5.9% 10%;
   --foreground: 0 0% 100%;
-  --card: 10 6.5% 18%;
+  --card: 240 4.2% 13.9%;
   --card-foreground: 0 0% 100%;
-  --popover: 10 6.5% 18%;
+  --popover: 240 4.2% 13.9%;
   --popover-foreground: 0 0% 100%;
-  --primary: 22 94.8% 45.7%;
-  --primary-foreground: 0 0% 100%;
-  --secondary: 10 6.5% 18%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+  --secondary: 240 3.7% 15.9%;
   --secondary-foreground: 0 0% 100%;
   --muted: 0 0% 0%;
-  --muted-foreground: 30 5% 60%;
-  --accent: 24 14.3% 6.9%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 240 10.5% 7.5%;
   --accent-foreground: 0 0% 100%;
-  --destructive: 350 81.2% 58.2%;
+  --destructive: 1 77.6% 58%;
   --destructive-foreground: 0 0% 100%;
-  --border: 10 6% 22%;
-  --input: 10 6% 22%;
-  --ring: 22 94.8% 45.7%;
+  --border: 240 3.7% 20%;
+  --input: 240 3.7% 20%;
+  --ring: 252 89% 71%;
   /* Sort UI State Tokens */
-  --primary-hover: 22 94.8% 40%;
-  --primary-press: 22 94.8% 34%;
-  --destructive-hover: 350 81.2% 52%;
-  --destructive-press: 350 81.2% 46%;
+  --primary-hover: 0 0% 89%;
+  --primary-press: 0 0% 83%;
+  --destructive-hover: 1 77.6% 52%;
+  --destructive-press: 1 77.6% 46%;
   /* Sort UI Extended Semantic Tokens */
   --success: 132 62.8% 63.1%;
   --success-foreground: 0 0% 100%;
   --warning: 49 92% 51%;
   --warning-foreground: 0 0% 100%;
-  --informative: 28 88.7% 58.2%;
+  --informative: 252 89% 71%;
   --informative-foreground: 0 0% 100%;
   --overlay: 0 0% 0%;
   /* Sort UI Text Tokens */
   --text-default: 0 0% 100%;
-  --text-subtle: 30 5% 72%;
-  --text-muted: 30 5% 60%;
-  --text-hint: 30 4% 48%;
-  /* Chart Colors */
-  --chart-1: 28 88.7% 58.2%;
-  --chart-2: 171 58.5% 57.5%;
-  --chart-3: 49 92% 51%;
-  --chart-4: 351 82.4% 68.8%;
-  --chart-5: 191 83.8% 61.4%;
+  --text-subtle: 240 3% 75%;
+  --text-muted: 240 5% 64.9%;
+  --text-hint: 240 3% 50%;
+  /* Chart Colors — same palette as Default Blue, chart-1 swapped to violet */
+  --chart-1: 252 89% 71%;
+  --chart-2: 132 62.8% 63.1%;
+  --chart-3: 28 88.7% 58.2%;
+  --chart-4: 1 79.2% 66.1%;
+  --chart-5: 267 98.5% 74.5%;
   /* Sidebar */
-  --sidebar-background: 30 9.1% 12.9%;
+  --sidebar-background: 240 5.9% 10%;
   --sidebar-foreground: 0 0% 100%;
-  --sidebar-primary: 22 94.8% 45.7%;
+  --sidebar-primary: 252 89% 71%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 10 6.5% 18%;
+  --sidebar-accent: 240 3.7% 15.9%;
   --sidebar-accent-foreground: 0 0% 100%;
-  --sidebar-border: 10 6% 22%;
-  --sidebar-ring: 22 94.8% 45.7%;
-  /* === GENERATED TOKENS START === Theme-2-Dark */
+  --sidebar-border: 240 3.7% 20%;
+  --sidebar-ring: 252 89% 71%;
+  /* === GENERATED TOKENS START === Neutral-Violet-Dark */
   /* icon tokens */
   --icon-default: #ffffff;
   --icon-default-subtle: rgba(255, 255, 255, 0.7);
   --icon-default-muted: rgba(255, 255, 255, 0.5);
   --icon-default-disabled: rgba(255, 255, 255, 0.25);
-  --icon-inverted-default: #24211e;
-  --icon-inverted-subtle: #57534d;
-  --icon-inverted-muted: #a6a09b;
+  --icon-inverted-default: #111115;
+  --icon-inverted-subtle: #4e4e55;
+  --icon-inverted-muted: #a1a1a9;
   --icon-inverted-disabled: rgba(39, 39, 42, 0.35);
   --icon-white-default: #ffffff;
   --icon-white-subtle: rgba(255, 255, 255, 0.7);
   --icon-white-muted: rgba(255, 255, 255, 0.5);
   --icon-white-disabled: rgba(255, 255, 255, 0.4);
-  --icon-black-default: #24211e;
-  --icon-black-subtle: #57534d;
-  --icon-black-muted: #79716b;
+  --icon-black-default: #111115;
+  --icon-black-subtle: #4e4e55;
+  --icon-black-muted: #6f6f77;
   --icon-black-disabled: rgba(39, 39, 42, 0.35);
-  --icon-destructive: #f49fa9;
-  --icon-informative: #f7bb77;
-  --icon-success: #7ce9d5;
-  --icon-warning: #f5ca0f;
+  --icon-destructive: #f4a6a5;
+  --icon-informative: #beb0fd;
+  --icon-success: #99efae;
+  --icon-warning: #f7bb77;
+  --icon-on-primary: #18181b;
   /* text tokens */
   --text-default: #ffffff;
   --text-subtle: rgba(255, 255, 255, 0.7);
   --text-muted: rgba(255, 255, 255, 0.5);
   --text-hint: rgba(255, 255, 255, 0.3);
-  --text-inverted-default: #24211e;
-  --text-inverted-subtle: #57534d;
-  --text-inverted-muted: #79716b;
+  --text-inverted-default: #111115;
+  --text-inverted-subtle: #4e4e55;
+  --text-inverted-muted: #6f6f77;
   --text-inverted-hint: rgba(39, 39, 42, 0.35);
   --text-white-default: #ffffff;
   --text-white-subtle: rgba(255, 255, 255, 0.7);
   --text-white-muted: rgba(255, 255, 255, 0.5);
   --text-white-hint: rgba(255, 255, 255, 0.3);
-  --text-dark-default: #24211e;
-  --text-dark-subtle: #57534d;
-  --text-dark-muted: #79716b;
+  --text-dark-default: #111115;
+  --text-dark-subtle: #4e4e55;
+  --text-dark-muted: #6f6f77;
   --text-dark-hint: rgba(39, 39, 42, 0.35);
-  --text-destructive: #f16e81;
-  --text-primary: #f38f36;
-  --text-informative: #f38f36;
-  --text-success: #56d197;
-  --text-warning: #f5ca0f;
+  --text-destructive: #ed6664;
+  --text-primary: #a185fd;
+  --text-informative: #a185fd;
+  --text-success: #66dc7e;
+  --text-warning: #f38f36;
+  --text-on-primary: #18181b;
   /* border tokens */
   --border-default: rgba(255, 255, 255, 0.1);
   --border-darker: rgba(255, 255, 255, 0.15);
   --border-accent: #ffffff;
-  --border-accent-inverted: #24211e;
-  --border-destructive: #f16e81;
-  --border-informative: #4ad0ef;
-  --border-success: #53d2be;
-  --border-warning: #f5ca0f;
+  --border-accent-inverted: #111115;
+  --border-destructive: #ed6664;
+  --border-informative: #a185fd;
+  --border-success: #66dc7e;
+  --border-warning: #f38f36;
   --border-red: rgba(238, 110, 108, 0.2);
   --border-orange: rgba(243, 143, 54, 0.2);
   --border-amber: rgba(245, 189, 30, 0.2);
@@ -14779,24 +14921,22 @@ video {
   --border-rose: rgba(241, 110, 129, 0.2);
   --border-inverted: rgba(39, 39, 42, 0.1);
   --border-white: rgba(255, 255, 255, 0.2);
-  --border-highlight: rgba(243, 143, 54, 0.4);
-  --border-highlight-destructive: rgba(241, 110, 129, 0.4);
+  --border-highlight: rgba(161, 133, 253, 0.4);
+  --border-highlight-destructive: rgba(238, 110, 108, 0.4);
   --border-strong: rgba(255, 255, 255, 0.25);
-  --border-input-highlight: rgba(243, 143, 54, 0.4);
+  --border-input-highlight: rgba(255, 255, 255, 0.45);
   /* bg tokens */
-  --bg-default: #301108;
-  --bg-subtle: #14110f;
-  --bg-muted: #0c0a09;
-  --bg-card: #301108;
+  --bg-default: #18181b;
+  --bg-subtle: #111115;
+  --bg-muted: #09090b;
+  --bg-card: #222225;
   --bg-inverted: #ffffff;
-  /* WCAG AA — primary states meet 4.5:1 against white text.
-       Was #e35706 (3.73:1) — failed AA. Tailwind orange-700/800/900. */
-  --bg-state-primary: #c2410c;
-  /* 6.50:1 */
-  --bg-state-primary-hover: #9a3412;
-  /* 8.50:1 — darker on hover */
-  --bg-state-primary-press: #7c2d12;
-  /* 11.0:1 — darker on press */
+  --bg-state-primary: #fafafa;
+  /* zinc-50 — inverted per user decision */
+  --bg-state-primary-hover: #e9e9ec;
+  /* zinc-200 */
+  --bg-state-primary-press: #dadadd;
+  /* zinc-300 */
   --bg-state-disabled: rgba(255, 255, 255, 0.08);
   --bg-state-secondary: rgba(255, 255, 255, 0.04);
   --bg-state-secondary-hover: rgba(255, 255, 255, 0.08);
@@ -14807,12 +14947,12 @@ video {
   --bg-state-ghost: rgba(255, 255, 255, 0.0001);
   --bg-state-ghost-hover: rgba(255, 255, 255, 0.08);
   --bg-state-ghost-press: rgba(255, 255, 255, 0.15);
-  --bg-state-destructive: #c4334d;
-  --bg-state-destructive-hover: #d4445f;
-  --bg-state-destructive-press: #c4334d;
-  --bg-state-brand: #e35706;
-  --bg-state-brand-hover: #f27313;
-  --bg-state-brand-press: #e35706;
+  --bg-state-destructive: #c0392b;
+  --bg-state-destructive-hover: #d44538;
+  --bg-state-destructive-press: #c0392b;
+  --bg-state-brand: #8655fd;
+  --bg-state-brand-hover: #a185fd;
+  --bg-state-brand-press: #8655fd;
   --bg-badge-inverted: #ffffff;
   --bg-badge-default: rgba(255, 255, 255, 0.1);
   --bg-badge-red: rgba(238, 110, 108, 0.1);
@@ -14836,12 +14976,12 @@ video {
   --bg-input: rgba(255, 255, 255, 0.06);
   --bg-input-soft: rgba(255, 255, 255, 0.08);
   --bg-badge-white: rgba(255, 255, 255, 0.1);
-  --bg-switch-default: #57534d;
+  --bg-switch-default: #4e4e55;
   --bg-switch-handle: #ffffff;
-  --bg-switch-handle-disabled: #fafaf9;
-  --bg-switch-active: #44b8a7;
-  --bg-state-primary-loading: #f7bb77;
-  --bg-state-destructive-loading: #f49fa9;
+  --bg-switch-handle-disabled: #fafafa;
+  --bg-switch-active: #4fc660;
+  --bg-state-primary-loading: #6f6f77;
+  --bg-state-destructive-loading: #f4a6a5;
   --bg-basic-red-subtle: #77221f;
   --bg-basic-red-accent: #e74341;
   --bg-basic-red-contrast: #fae3e3;
@@ -14910,20 +15050,20 @@ video {
   --bg-basic-fuchsia-strong: #dd72fa;
   --bg-basic-pink-strong: #ea6eb3;
   --bg-basic-rose-strong: #f16e81;
-  --bg-basic-gray-subtle: #24211e;
-  --bg-basic-gray-accent: #79716b;
-  --bg-basic-gray-strong: #a6a09b;
-  --bg-basic-gray-contrast: #f5f5f4;
+  --bg-basic-gray-subtle: #18181b;
+  --bg-basic-gray-accent: #6f6f77;
+  --bg-basic-gray-strong: #a1a1a9;
+  --bg-basic-gray-contrast: #f4f4f5;
   --bg-checkbox-default: rgba(255, 255, 255, 0.06);
-  --bg-checkbox-active: #f27313;
+  --bg-checkbox-active: #8655fd;
   --bg-checkbox-disabled: rgba(255, 255, 255, 0.06);
-  --bg-checkbox-active-hover: #f38f36;
+  --bg-checkbox-active-hover: #a185fd;
   --bg-basic-gray-alpha-10: rgba(255, 255, 255, 0.15);
   --bg-input-disabled: rgba(255, 255, 255, 0.15);
-  --bg-switch-disabled: #d6d3d1;
-  --bg-switch-active-disabled: #adf4e5;
-  --bg-switch-default-hover: #79716b;
-  --bg-switch-active-hover: #53d2be;
+  --bg-switch-disabled: #dadadd;
+  --bg-switch-active-disabled: #c6f6d2;
+  --bg-switch-default-hover: #6f6f77;
+  --bg-switch-active-hover: #66dc7e;
   --bg-card-inverted: #ffffff;
   --bg-state-ghost-inverted: rgba(39, 39, 42, 0.0001);
   --bg-state-ghost-hover-inverted: rgba(39, 39, 42, 0.04);
@@ -14932,22 +15072,24 @@ video {
   --bg-basic-gray-alpha-4: rgba(255, 255, 255, 0.08);
   --bg-basic-gray-alpha-15: rgba(255, 255, 255, 0.2);
   --bg-state-gray: #ffffff;
-  --bg-sidebar: #301108;
-  --bg-sidebar-subtle: #441c0d;
-  --bg-card-subtle: #301108;
+  --bg-sidebar: #18181b;
+  --bg-sidebar-subtle: #18181b;
+  --bg-card-subtle: #36363a;
   --bg-overlay: rgba(9, 9, 11, 0.65);
-  --bg-state-brand-loading: #f7bb77;
+  --bg-state-brand-loading: #beb0fd;
   --bg-switch-default-2: #ffffff;
   --bg-state-secondary-loading: rgba(255, 255, 255, 0.04);
   --bg-state-soft-loading: rgba(255, 255, 255, 0.08);
   --bg-state-ghost-loading: rgba(255, 255, 255, 0.08);
   --bg-state-ghost-loading-inverted: rgba(39, 39, 42, 0.04);
+  --overlay-on-primary: rgba(24, 24, 27, 0.1);
+  --overlay-on-primary-border: rgba(24, 24, 27, 0.2);
   /* === GENERATED TOKENS END === */
 }
 
 /* ===== Sort UI Font Family Mode — Font B ===== */
 
-/* Independent of color theme — combine freely with Theme-1 or Theme-2 */
+/* Independent of color theme — combine freely with Default Blue or Neutral Violet */
 
 .font-b {
   --font-headline: var(--font-geist-sans);
@@ -15081,6 +15223,207 @@ button,
   }
 }
 
+.text-display-1  {
+  font-size: var(--text-display-1-size);
+  font-weight: var(--text-display-1-weight);
+  line-height: var(--text-display-1-leading);
+  font-family: var(--text-display-1-family);
+  letter-spacing: var(--text-display-1-tracking);
+}
+
+.text-display-2  {
+  font-size: var(--text-display-2-size);
+  font-weight: var(--text-display-2-weight);
+  line-height: var(--text-display-2-leading);
+  font-family: var(--text-display-2-family);
+  letter-spacing: var(--text-display-2-tracking);
+}
+
+.text-display-3  {
+  font-size: var(--text-display-3-size);
+  font-weight: var(--text-display-3-weight);
+  line-height: var(--text-display-3-leading);
+  font-family: var(--text-display-3-family);
+  letter-spacing: var(--text-display-3-tracking);
+}
+
+.text-display-4  {
+  font-size: var(--text-display-4-size);
+  font-weight: var(--text-display-4-weight);
+  line-height: var(--text-display-4-leading);
+  font-family: var(--text-display-4-family);
+  letter-spacing: var(--text-display-4-tracking);
+}
+
+.text-h1         {
+  font-size: var(--text-h1-size);
+  font-weight: var(--text-h1-weight);
+  line-height: var(--text-h1-leading);
+  font-family: var(--text-h1-family);
+  letter-spacing: var(--text-h1-tracking);
+}
+
+.text-h2         {
+  font-size: var(--text-h2-size);
+  font-weight: var(--text-h2-weight);
+  line-height: var(--text-h2-leading);
+  font-family: var(--text-h2-family);
+  letter-spacing: var(--text-h2-tracking);
+}
+
+.text-h3         {
+  font-size: var(--text-h3-size);
+  font-weight: var(--text-h3-weight);
+  line-height: var(--text-h3-leading);
+  font-family: var(--text-h3-family);
+  letter-spacing: var(--text-h3-tracking);
+}
+
+.text-h4         {
+  font-size: var(--text-h4-size);
+  font-weight: var(--text-h4-weight);
+  line-height: var(--text-h4-leading);
+  font-family: var(--text-h4-family);
+  letter-spacing: var(--text-h4-tracking);
+}
+
+.text-large      {
+  font-size: var(--text-large-size);
+  font-weight: var(--text-large-weight);
+  line-height: var(--text-large-leading);
+  font-family: var(--text-large-family);
+  letter-spacing: var(--text-large-tracking);
+}
+
+.text-p          {
+  font-size: var(--text-p-size);
+  font-weight: var(--text-p-weight);
+  line-height: var(--text-p-leading);
+  font-family: var(--text-p-family);
+  letter-spacing: var(--text-p-tracking);
+}
+
+.text-lead       {
+  font-size: var(--text-lead-size);
+  font-weight: var(--text-lead-weight);
+  line-height: var(--text-lead-leading);
+  font-family: var(--text-lead-family);
+  letter-spacing: var(--text-lead-tracking);
+  color: var(--text-muted);
+}
+
+.text-small      {
+  font-size: var(--text-small-size);
+  font-weight: var(--text-small-weight);
+  line-height: var(--text-small-leading);
+  font-family: var(--text-small-family);
+  letter-spacing: var(--text-small-tracking);
+}
+
+/* !important on color only: Tailwind auto-generates a `.text-muted { color: hsl(var(--muted)) }`
+     utility from the pre-existing `colors.muted.DEFAULT` theme entry (tailwind.config.ts) — utilities
+     always beat components regardless of specificity, so without !important this role's color is
+     silently hijacked to the wrong (background-surface) muted token instead of --text-muted. */
+
+.text-muted      {
+  font-size: var(--text-muted-size);
+  font-weight: var(--text-muted-weight);
+  line-height: var(--text-muted-leading);
+  font-family: var(--text-muted-family);
+  letter-spacing: var(--text-muted-tracking);
+  color: var(--text-muted) !important;
+}
+
+.text-code       {
+  font-size: var(--text-code-size);
+  font-weight: var(--text-code-weight);
+  line-height: var(--text-code-leading);
+  font-family: var(--text-code-family);
+  letter-spacing: var(--text-code-tracking);
+}
+
+.text-inline-code {
+  font-size: var(--text-inline-code-size);
+  font-weight: var(--text-inline-code-weight);
+  font-family: var(--text-inline-code-family);
+  letter-spacing: var(--text-inline-code-tracking);
+  position: relative;
+  border-radius: var(--radius-xs);
+  background-color: hsl(var(--muted));
+  padding: 0.2rem 0.3rem;
+}
+
+.text-blockquote {
+  font-size: var(--text-blockquote-size);
+  font-weight: var(--text-blockquote-weight);
+  line-height: var(--text-blockquote-leading);
+  font-family: var(--text-blockquote-family);
+  letter-spacing: var(--text-blockquote-tracking);
+  font-style: italic;
+  margin-top: 1.5rem;
+  border-left: 2px solid hsl(var(--border));
+  padding-left: 1.5rem;
+}
+
+.text-table-wrapper {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.text-table {
+  width: 100%;
+  font-size: var(--text-table-size);
+  font-weight: var(--text-table-weight);
+  line-height: var(--text-table-leading);
+  font-family: var(--text-table-family);
+  letter-spacing: var(--text-table-tracking);
+}
+
+.text-table-row {
+  margin: 0;
+  border-top: 1px solid hsl(var(--border));
+  padding: 0;
+}
+
+.text-table-row:nth-child(even) {
+  background-color: hsl(var(--muted));
+}
+
+.text-table-cell {
+  border: 1px solid hsl(var(--border));
+  padding: 0.5rem 1rem;
+  text-align: left;
+}
+
+.text-table-header-cell {
+  border: 1px solid hsl(var(--border));
+  padding: 0.5rem 1rem;
+  text-align: left;
+  font-weight: var(--font-weight-bold);
+}
+
+.text-list {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+  margin-left: 1.5rem;
+  list-style-type: disc;
+  font-size: var(--text-list-size);
+  font-weight: var(--text-list-weight);
+  line-height: var(--text-list-leading);
+  font-family: var(--text-list-family);
+  letter-spacing: var(--text-list-tracking);
+}
+
+.text-list > li {
+  margin-top: 0.5rem;
+}
+
+.text-list > li::marker {
+  color: hsl(var(--primary));
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -16104,6 +16447,10 @@ button,
   width: 80%;
 }
 
+.w-44 {
+  width: 11rem;
+}
+
 .w-48 {
   width: 12rem;
 }
@@ -16112,6 +16459,10 @@ button,
   width: 1.25rem;
 }
 
+.w-56 {
+  width: 14rem;
+}
+
 .w-6 {
   width: 1.5rem;
 }
@@ -16699,6 +17050,14 @@ button,
   resize: both;
 }
 
+.snap-x {
+  scroll-snap-type: x var(--tw-scroll-snap-strictness);
+}
+
+.snap-mandatory {
+  --tw-scroll-snap-strictness: mandatory;
+}
+
 .scroll-m-20 {
   scroll-margin: 5rem;
 }
@@ -17175,22 +17534,22 @@ button,
   border-color: var(--bg-checkbox-active);
 }
 
+.border-\[var\(--overlay-on-primary-border\)\] {
+  border-color: var(--overlay-on-primary-border);
+}
+
 .border-destructive\/50 {
   border-color: hsl(var(--destructive) / 0.5);
 }
 
-.border-primary {
-  border-color: hsl(var(--primary));
+.border-informative {
+  border-color: hsl(var(--informative));
 }
 
 .border-sidebar-border {
   border-color: hsl(var(--sidebar-border));
 }
 
-.border-sui-bg-basic-blue-accent {
-  border-color: var(--bg-basic-blue-accent);
-}
-
 .border-sui-bg-default {
   border-color: var(--bg-default);
 }
@@ -17379,6 +17738,10 @@ button,
   background-color: var(--bg-checkbox-disabled);
 }
 
+.bg-\[var\(--overlay-on-primary\)\] {
+  background-color: var(--overlay-on-primary);
+}
+
 .bg-\[var\(--sb-bg\2c var\(--social-brand-default\)\)\] {
   background-color: var(--sb-bg,var(--social-brand-default));
 }
@@ -17443,6 +17806,10 @@ button,
   background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
 }
 
+.bg-informative {
+  background-color: hsl(var(--informative));
+}
+
 .bg-muted {
   background-color: hsl(var(--muted));
 }
@@ -18559,7 +18926,7 @@ button,
 }
 
 .font-black {
-  font-weight: var(--font-weight-black);
+  font-weight: 900;
 }
 
 .font-bold {
@@ -18567,11 +18934,11 @@ button,
 }
 
 .font-extrabold {
-  font-weight: var(--font-weight-extrabold);
+  font-weight: 800;
 }
 
 .font-light {
-  font-weight: var(--font-weight-light);
+  font-weight: 300;
 }
 
 .font-medium {
@@ -18675,10 +19042,42 @@ button,
   line-height: 1.25;
 }
 
+.-tracking-normal {
+  letter-spacing: calc(var(--tracking-normal) * -1);
+}
+
+.-tracking-tight {
+  letter-spacing: calc(var(--tracking-tight) * -1);
+}
+
+.-tracking-tighter {
+  letter-spacing: calc(var(--tracking-tighter) * -1);
+}
+
+.-tracking-wide {
+  letter-spacing: calc(var(--tracking-wide) * -1);
+}
+
+.-tracking-wider {
+  letter-spacing: calc(var(--tracking-wider) * -1);
+}
+
+.-tracking-widest {
+  letter-spacing: calc(var(--tracking-widest) * -1);
+}
+
+.tracking-normal {
+  letter-spacing: var(--tracking-normal);
+}
+
 .tracking-tight {
   letter-spacing: var(--tracking-tight);
 }
 
+.tracking-tighter {
+  letter-spacing: var(--tracking-tighter);
+}
+
 .tracking-wide {
   letter-spacing: var(--tracking-wide);
 }
@@ -18769,6 +19168,10 @@ button,
   color: var(--icon-inverted-subtle);
 }
 
+.text-icon-on-primary {
+  color: var(--icon-on-primary);
+}
+
 .text-icon-success {
   color: var(--icon-success);
 }
@@ -18793,10 +19196,6 @@ button,
   color: var(--icon-white-subtle);
 }
 
-.text-informative {
-  color: hsl(var(--informative));
-}
-
 .text-muted {
   color: hsl(var(--muted));
 }
@@ -18913,6 +19312,10 @@ button,
   color: var(--text-muted);
 }
 
+.text-sui-text-on-primary {
+  color: var(--text-on-primary);
+}
+
 .text-sui-text-primary {
   color: var(--text-primary);
 }
@@ -19218,6 +19621,10 @@ button,
   --tw-ring-inset: inset;
 }
 
+.ring-informative {
+  --tw-ring-color: hsl(var(--informative));
+}
+
 .ring-primary {
   --tw-ring-color: hsl(var(--primary));
 }
@@ -19467,6 +19874,50 @@ button,
   --lexical-indent-base-value: 40px;
 }
 
+.\[--scroll-fade-reveal\:8rem\] {
+  --scroll-fade-reveal: 8rem;
+}
+
+.\[--scroll-fade-size\:16px\] {
+  --scroll-fade-size: 16px;
+}
+
+.\[--scroll-fade-size\:2rem\] {
+  --scroll-fade-size: 2rem;
+}
+
+.\[--scroll-fade-size\:3rem\] {
+  --scroll-fade-size: 3rem;
+}
+
+.\[--scroll-fade-t-size\:2rem\] {
+  --scroll-fade-t-size: 2rem;
+}
+
+.\[--shimmer-angle\:45deg\] {
+  --shimmer-angle: 45deg;
+}
+
+.\[--shimmer-color\:\.\.\.\] {
+  --shimmer-color: ...;
+}
+
+.\[--shimmer-duration\:3\.5s\] {
+  --shimmer-duration: 3.5s;
+}
+
+.\[--shimmer-duration\:3s\] {
+  --shimmer-duration: 3s;
+}
+
+.\[--shimmer-spread\:3rem\] {
+  --shimmer-spread: 3rem;
+}
+
+.\[--shimmer-spread\:4rem\] {
+  --shimmer-spread: 4rem;
+}
+
 .\[text-decoration\:underline_line-through\] {
   text-decoration: underline line-through;
 }
@@ -19493,28 +19944,489 @@ button,
 
 @media (max-width: 767px) {
   :root {
-    --font-size-lg:  16px;
-    --font-size-xl:  18px;
-    --font-size-2xl: 20px;
-    --font-size-3xl: 24px;
-    --font-size-4xl: 30px;
-    --font-size-5xl: 36px;
-    --font-size-6xl: 48px;
-    --font-size-7xl: 60px;
-    --font-size-8xl: 72px;
-    --font-size-9xl: 96px;
-    --leading-7:  24px;
-    --leading-8:  28px;
-    --leading-9:  32px;
-    --leading-10: 36px;
-    --leading-11: 40px;
-    --leading-12: 48px;
-    --leading-13: 60px;
-    --leading-14: 72px;
-    --leading-15: 96px;
+    --font-size-lg:  1rem;
+    /* 16px */
+    --font-size-xl:  1.125rem;
+    /* 18px */
+    --font-size-2xl: 1.25rem;
+    /* 20px */
+    --font-size-3xl: 1.5rem;
+    /* 24px */
+    --font-size-4xl: 1.875rem;
+    /* 30px */
+    --font-size-5xl: 2.25rem;
+    /* 36px */
+    --font-size-6xl: 3rem;
+    /* 48px */
+    --font-size-7xl: 3.75rem;
+    /* 60px */
+    --font-size-8xl: 4.5rem;
+    /* 72px */
+    --font-size-9xl: 6rem;
+    /* 96px */
+    --leading-7:  1.5rem;
+    /* 24px */
+    --leading-8:  1.75rem;
+    /* 28px */
+    --leading-9:  2rem;
+    /* 32px */
+    --leading-10: 2.25rem;
+    /* 36px */
+    --leading-11: 2.5rem;
+    /* 40px */
+    --leading-12: 3rem;
+    /* 48px */
+    --leading-13: 3.75rem;
+    /* 60px */
+    --leading-14: 4.5rem;
+    /* 72px */
+    --leading-15: 6rem;
+    /* 96px */
+  }
+}
+
+/* ===== Sort UI Shimmer — animated text-highlight utility ===== */
+
+/* Ported from shadcn/ui's `shimmer` util (ui.shadcn.com/docs/utils/shimmer).
+   The shadcn source is Tailwind v4 (@utility/@theme/--value); this project is
+   Tailwind v3, so it's ported to raw utility classes + @property + an explicit
+   dark-theme override. The effect derives its base color from `currentColor`,
+   so it automatically follows whatever `text-sui-*` token is applied — no
+   hardcoded colors. Customize via arbitrary CSS vars, e.g.
+   `[--shimmer-duration:3s] [--shimmer-spread:3rem] [--shimmer-angle:45deg]`. */
+
+@property --shimmer-angle {
+  syntax: "<angle>";
+
+  inherits: true;
+
+  initial-value: 20deg;
+}
+
+@keyframes sui-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+
+  to   {
+    background-position: 0 0;
+  }
+}
+
+/* Unlayered (NOT inside @layer utilities) on purpose: Tailwind v3's JIT purges
+   @layer utilities/components rules whose class names don't literally appear in
+   the scanned content. `shimmer` may be applied dynamically or copied from
+   shadcn examples, so keeping these raw keeps them from being tree-shaken away. */
+
+.shimmer {
+  --_spread: var(--shimmer-spread, calc(3ch + 40px));
+  --_base: currentColor;
+  --_highlight: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha * 0.2)));
+  background-image: var(--shimmer-image, linear-gradient(
+    calc(90deg + var(--shimmer-angle)),
+    var(--_base) calc(50% - var(--_spread)),
+    color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * 0.5),
+    var(--_highlight) 50%,
+    color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * 0.5),
+    var(--_base) calc(50% + var(--_spread))
+  ));
+  background-repeat: no-repeat;
+  background-size: calc(200% + var(--_spread) * 2) 100%;
+  background-position: 0 0;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
+  animation: sui-shimmer var(--shimmer-duration, 2s) linear infinite;
+}
+
+.shimmer:where([dir="rtl"], [dir="rtl"] *) {
+  animation-direction: reverse;
+}
+
+.shimmer-once    {
+  animation-iteration-count: 1;
+}
+
+.shimmer-reverse {
+  animation-direction: reverse;
+}
+
+.shimmer-none    {
+  --shimmer-image: none;
+  --shimmer-text-fill: currentColor;
+}
+
+/* Dark themes (.dark and .theme-2.dark both carry the `dark` class) get a
+   brighter highlight so the sweep stays visible on dark surfaces. Unlayered,
+   so it wins over the @layer utilities base rule. */
+
+.dark .shimmer {
+  --_highlight: var(--shimmer-color, oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4)));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shimmer {
+    animation: none;
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+  }
+}
+
+/* ===== Sort UI Scroll Fade — scroll-aware edge fade for scroll containers ===== */
+
+/* Ported from shadcn/ui's `scroll-fade` util (ui.shadcn.com/docs/utils/scroll-fade).
+   Same v4→v3 porting approach as shimmer above: raw utility classes instead of
+   @utility/@theme, kept unlayered so Tailwind's JIT purge can't tree-shake them.
+   Uses CSS scroll-driven animations (animation-timeline: scroll()) to track scroll
+   position where supported (Chromium); @supports not(...) provides a static
+   always-faded fallback for browsers without scroll-timeline support (Safari/Firefox
+   as of this writing). Depth defaults (min(12%, 2.5rem) fade size, 6rem reveal
+   distance) match shadcn's v4 defaults (--spacing * 10 / * 24 with the default
+   0.25rem --spacing unit) — hardcoded since this project has no global --spacing
+   scalar to reference. */
+
+@property --scroll-fade-t {
+  syntax: "<length-percentage>";
+
+  inherits: false;
+
+  initial-value: 0px;
+}
+
+@property --scroll-fade-b {
+  syntax: "<length-percentage>";
+
+  inherits: false;
+
+  initial-value: 0px;
+}
+
+@property --scroll-fade-s {
+  syntax: "<length-percentage>";
+
+  inherits: false;
+
+  initial-value: 0px;
+}
+
+@property --scroll-fade-e {
+  syntax: "<length-percentage>";
+
+  inherits: false;
+
+  initial-value: 0px;
+}
+
+@property --scroll-fade-mask {
+  syntax: "*";
+
+  inherits: false;
+}
+
+@keyframes scroll-fade-reveal-t {
+  from {
+    --scroll-fade-t: 0px;
+  }
+
+  to   {
+    --scroll-fade-t: var(--_scroll-fade-size-t, var(--scroll-fade-size, min(12%, 2.5rem)));
+  }
+}
+
+@keyframes scroll-fade-reveal-b {
+  from {
+    --scroll-fade-b: var(--_scroll-fade-size-b, var(--scroll-fade-size, min(12%, 2.5rem)));
+  }
+
+  to   {
+    --scroll-fade-b: 0px;
   }
 }
 
+@keyframes scroll-fade-reveal-s {
+  from {
+    --scroll-fade-s: 0px;
+  }
+
+  to   {
+    --scroll-fade-s: var(--_scroll-fade-size-s, var(--scroll-fade-size, min(12%, 2.5rem)));
+  }
+}
+
+@keyframes scroll-fade-reveal-e {
+  from {
+    --scroll-fade-e: var(--_scroll-fade-size-e, var(--scroll-fade-size, min(12%, 2.5rem)));
+  }
+
+  to   {
+    --scroll-fade-e: 0px;
+  }
+}
+
+/* scroll-fade / scroll-fade-y — vertical edge fade (top + bottom) */
+
+.scroll-fade,
+.scroll-fade-y {
+  --_scroll-fade-size-t: var(--scroll-fade-t-size, var(--scroll-fade-size, min(12%, 2.5rem)));
+  --_scroll-fade-size-b: var(--scroll-fade-b-size, var(--scroll-fade-size, min(12%, 2.5rem)));
+  --scroll-fade-block: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--scroll-fade-t, 0px),
+    #000 calc(100% - var(--scroll-fade-b, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+  mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+@supports (animation-timeline: scroll()) {
+  .scroll-fade,
+  .scroll-fade-y {
+    animation: scroll-fade-reveal-t 1ms ease-in-out, scroll-fade-reveal-b 1ms ease-in-out;
+    animation-timeline: scroll(self y), scroll(self y);
+    animation-range: 0 var(--scroll-fade-reveal, 6rem), calc(100% - var(--scroll-fade-reveal, 6rem)) 100%;
+    animation-fill-mode: both;
+  }
+}
+
+@supports not (animation-timeline: scroll()) {
+  .scroll-fade,
+  .scroll-fade-y {
+    --scroll-fade-t: var(--_scroll-fade-size-t);
+    --scroll-fade-b: var(--_scroll-fade-size-b);
+  }
+}
+
+/* scroll-fade-x — horizontal edge fade (start + end, RTL-aware) */
+
+.scroll-fade-x {
+  --_scroll-fade-size-s: var(--scroll-fade-s-size, var(--scroll-fade-size, min(12%, 2.5rem)));
+  --_scroll-fade-size-e: var(--scroll-fade-e-size, var(--scroll-fade-size, min(12%, 2.5rem)));
+  --scroll-fade-inline: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-s, 0px),
+    #000 calc(100% - var(--scroll-fade-e, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
+  mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+.scroll-fade-x:where([dir="rtl"], [dir="rtl"] *) {
+  --scroll-fade-inline: linear-gradient(
+    to left,
+    transparent 0,
+    #000 var(--scroll-fade-s, 0px),
+    #000 calc(100% - var(--scroll-fade-e, 0px)),
+    transparent 100%
+  );
+}
+
+@supports (animation-timeline: scroll()) {
+  .scroll-fade-x {
+    animation: scroll-fade-reveal-s 1ms ease-in-out, scroll-fade-reveal-e 1ms ease-in-out;
+    animation-timeline: scroll(self inline), scroll(self inline);
+    animation-range: 0 var(--scroll-fade-reveal, 6rem), calc(100% - var(--scroll-fade-reveal, 6rem)) 100%;
+    animation-fill-mode: both;
+  }
+}
+
+@supports not (animation-timeline: scroll()) {
+  .scroll-fade-x {
+    --scroll-fade-s: var(--_scroll-fade-size-s);
+    --scroll-fade-e: var(--_scroll-fade-size-e);
+  }
+}
+
+/* scroll-fade-t / -b — single top/bottom edge fade */
+
+.scroll-fade-t {
+  --_scroll-fade-size-t: var(--scroll-fade-t-size, var(--scroll-fade-size, min(12%, 2.5rem)));
+  --scroll-fade-mask: linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-t, 0px), #000 100%);
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+@supports (animation-timeline: scroll()) {
+  .scroll-fade-t {
+    animation: scroll-fade-reveal-t 1ms ease-in-out;
+    animation-timeline: scroll(self y);
+    animation-range: 0 var(--scroll-fade-reveal, 6rem);
+    animation-fill-mode: both;
+  }
+}
+
+@supports not (animation-timeline: scroll()) {
+  .scroll-fade-t {
+    --scroll-fade-t: var(--_scroll-fade-size-t);
+  }
+}
+
+.scroll-fade-b {
+  --_scroll-fade-size-b: var(--scroll-fade-b-size, var(--scroll-fade-size, min(12%, 2.5rem)));
+  --scroll-fade-mask: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--scroll-fade-b, 0px)), transparent 100%);
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+@supports (animation-timeline: scroll()) {
+  .scroll-fade-b {
+    animation: scroll-fade-reveal-b 1ms ease-in-out;
+    animation-timeline: scroll(self y);
+    animation-range: calc(100% - var(--scroll-fade-reveal, 6rem)) 100%;
+    animation-fill-mode: both;
+  }
+}
+
+@supports not (animation-timeline: scroll()) {
+  .scroll-fade-b {
+    --scroll-fade-b: var(--_scroll-fade-size-b);
+  }
+}
+
+/* scroll-fade-l / -r — single left/right edge fade (physical, not RTL-aware) */
+
+.scroll-fade-l {
+  --_scroll-fade-size-s: var(--scroll-fade-s-size, var(--scroll-fade-size, min(12%, 2.5rem)));
+  --scroll-fade-mask: linear-gradient(to right, transparent 0, #000 var(--scroll-fade-s, 0px), #000 100%);
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+@supports (animation-timeline: scroll()) {
+  .scroll-fade-l {
+    animation: scroll-fade-reveal-s 1ms ease-in-out;
+    animation-timeline: scroll(self x);
+    animation-range: 0 var(--scroll-fade-reveal, 6rem);
+    animation-fill-mode: both;
+  }
+}
+
+@supports not (animation-timeline: scroll()) {
+  .scroll-fade-l {
+    --scroll-fade-s: var(--_scroll-fade-size-s);
+  }
+}
+
+.scroll-fade-r {
+  --_scroll-fade-size-e: var(--scroll-fade-e-size, var(--scroll-fade-size, min(12%, 2.5rem)));
+  --scroll-fade-mask: linear-gradient(to right, #000 0, #000 calc(100% - var(--scroll-fade-e, 0px)), transparent 100%);
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+@supports (animation-timeline: scroll()) {
+  .scroll-fade-r {
+    animation: scroll-fade-reveal-e 1ms ease-in-out;
+    animation-timeline: scroll(self x);
+    animation-range: calc(100% - var(--scroll-fade-reveal, 6rem)) 100%;
+    animation-fill-mode: both;
+  }
+}
+
+@supports not (animation-timeline: scroll()) {
+  .scroll-fade-r {
+    --scroll-fade-e: var(--_scroll-fade-size-e);
+  }
+}
+
+/* scroll-fade-s / -e — single logical start/end edge fade (RTL-aware) */
+
+.scroll-fade-s {
+  --_scroll-fade-size-s: var(--scroll-fade-s-size, var(--scroll-fade-size, min(12%, 2.5rem)));
+  --scroll-fade-mask: linear-gradient(to right, transparent 0, #000 var(--scroll-fade-s, 0px), #000 100%);
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+.scroll-fade-s:where([dir="rtl"], [dir="rtl"] *) {
+  --scroll-fade-mask: linear-gradient(to left, transparent 0, #000 var(--scroll-fade-s, 0px), #000 100%);
+}
+
+@supports (animation-timeline: scroll()) {
+  .scroll-fade-s {
+    animation: scroll-fade-reveal-s 1ms ease-in-out;
+    animation-timeline: scroll(self inline);
+    animation-range: 0 var(--scroll-fade-reveal, 6rem);
+    animation-fill-mode: both;
+  }
+}
+
+@supports not (animation-timeline: scroll()) {
+  .scroll-fade-s {
+    --scroll-fade-s: var(--_scroll-fade-size-s);
+  }
+}
+
+.scroll-fade-e {
+  --_scroll-fade-size-e: var(--scroll-fade-e-size, var(--scroll-fade-size, min(12%, 2.5rem)));
+  --scroll-fade-mask: linear-gradient(to right, #000 0, #000 calc(100% - var(--scroll-fade-e, 0px)), transparent 100%);
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+.scroll-fade-e:where([dir="rtl"], [dir="rtl"] *) {
+  --scroll-fade-mask: linear-gradient(to left, #000 0, #000 calc(100% - var(--scroll-fade-e, 0px)), transparent 100%);
+}
+
+@supports (animation-timeline: scroll()) {
+  .scroll-fade-e {
+    animation: scroll-fade-reveal-e 1ms ease-in-out;
+    animation-timeline: scroll(self inline);
+    animation-range: calc(100% - var(--scroll-fade-reveal, 6rem)) 100%;
+    animation-fill-mode: both;
+  }
+}
+
+@supports not (animation-timeline: scroll()) {
+  .scroll-fade-e {
+    --scroll-fade-e: var(--_scroll-fade-size-e);
+  }
+}
+
+.scroll-fade-none {
+  --scroll-fade-mask: none;
+}
+
+/* No prefers-reduced-motion override here (unlike .shimmer above) — the scroll-
+   timeline drives a mask purely off actual user-initiated scroll position, not an
+   autoplaying/decorative effect, so it isn't the kind of motion that setting
+   targets. shadcn's upstream source doesn't disable it either. */
+
 .file\:border-0::file-selector-button {
   border-width: 0px;
 }
@@ -19798,6 +20710,10 @@ button,
   content: var(--tw-content);
 }
 
+.last\:border-b-0:last-child {
+  border-bottom-width: 0px;
+}
+
 .focus-within\:bg-sui-bg-input:focus-within {
   background-color: var(--bg-input);
 }
@@ -20143,8 +21059,8 @@ button,
   color: var(--text-muted);
 }
 
-.group.toast .group-\[\.toast\]\:text-sui-text-white-default {
-  color: var(--text-white-default);
+.group.toast .group-\[\.toast\]\:text-sui-text-on-primary {
+  color: var(--text-on-primary);
 }
 
 .group.toaster .group-\[\.toaster\]\:text-sui-text-default {
@@ -20314,8 +21230,8 @@ button,
   border-color: var(--border-accent);
 }
 
-.data-\[state\=checked\]\:border-primary[data-state="checked"] {
-  border-color: hsl(var(--primary));
+.data-\[state\=checked\]\:border-informative[data-state="checked"] {
+  border-color: hsl(var(--informative));
 }
 
 .data-\[state\=checked\]\:border-sui-bg-checkbox-active[data-state="checked"] {
@@ -20492,9 +21408,9 @@ button,
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.data-\[state\=active\]\:shadow-sm[data-state="active"] {
-  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+.data-\[state\=active\]\:shadow-default[data-state="active"] {
+  --tw-shadow: var(--shadow-default);
+  --tw-shadow-colored: var(--shadow-default);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
@@ -20561,8 +21477,8 @@ button,
   --tw-ring-inset: inset;
 }
 
-.data-\[state\=checked\]\:ring-primary[data-state="checked"] {
-  --tw-ring-color: hsl(var(--primary));
+.data-\[state\=checked\]\:ring-informative[data-state="checked"] {
+  --tw-ring-color: hsl(var(--informative));
 }
 
 .data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
@@ -21250,6 +22166,10 @@ button,
   flex-shrink: 0;
 }
 
+.\[\&\>\*\]\:snap-start>* {
+  scroll-snap-align: start;
+}
+
 .\[\&\>button\:first-child\]\:rounded-l-md>button:first-child {
   border-top-left-radius: var(--radius-md);
   border-bottom-left-radius: var(--radius-md);
@@ -21651,12 +22571,16 @@ button,
   color: var(--icon-destructive);
 }
 
+.\[\&_i\]\:text-icon-on-primary i {
+  color: var(--icon-on-primary);
+}
+
 .\[\&_i\]\:text-icon-white-default i {
   color: var(--icon-white-default);
 }
 
-.\[\&_i\]\:text-sui-bg-basic-blue-strong i {
-  color: var(--bg-basic-blue-strong);
+.\[\&_i\]\:text-sui-text-informative i {
+  color: var(--text-informative);
 }
 
 .\[\&_i\]\:\[text-shadow\:none\] i {
@@ -21687,6 +22611,16 @@ button,
   color: var(--bg-basic-blue-strong);
 }
 
+.\[\&_img\]\:size-full img {
+  width: 100%;
+  height: 100%;
+}
+
+.\[\&_img\]\:object-cover img {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
 .\[\&_p\]\:leading-relaxed p {
   line-height: 1.625;
 }
@@ -21756,12 +22690,16 @@ button,
   color: var(--icon-destructive);
 }
 
+.\[\&_svg\]\:text-icon-on-primary svg {
+  color: var(--icon-on-primary);
+}
+
 .\[\&_svg\]\:text-icon-white-default svg {
   color: var(--icon-white-default);
 }
 
-.\[\&_svg\]\:text-sui-bg-basic-blue-strong svg {
-  color: var(--bg-basic-blue-strong);
+.\[\&_svg\]\:text-sui-text-informative svg {
+  color: var(--text-informative);
 }
 
 .\[\&_svg\]\:\[text-shadow\:none\] svg {
@@ -21825,12 +22763,12 @@ button,
     background-color: color-mix(in srgb,#fff 15%,var(--sb-bg,var(--social-brand-default)));
   }
 
-  .\[\@media\(hover\:hover\)\]\:hover\:bg-sidebar-accent:hover {
-    background-color: hsl(var(--sidebar-accent));
+  .\[\@media\(hover\:hover\)\]\:hover\:bg-informative:hover {
+    background-color: hsl(var(--informative));
   }
 
-  .\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-basic-blue-accent:hover {
-    background-color: var(--bg-basic-blue-accent);
+  .\[\@media\(hover\:hover\)\]\:hover\:bg-sidebar-accent:hover {
+    background-color: hsl(var(--sidebar-accent));
   }
 
   .\[\@media\(hover\:hover\)\]\:hover\:bg-sui-bg-basic-gray-alpha-2:hover {
@@ -21885,10 +22823,6 @@ button,
     color: hsl(var(--sidebar-accent-foreground));
   }
 
-  .\[\@media\(hover\:hover\)\]\:hover\:text-sui-bg-basic-blue-strong:hover {
-    color: var(--bg-basic-blue-strong);
-  }
-
   .\[\@media\(hover\:hover\)\]\:hover\:text-sui-text-default:hover {
     color: var(--text-default);
   }