@trading-game/design-intelligence-layer 0.17.4 → 1.0.1

package/src/styles.css

@@ -10,11 +10,79 @@
  */
 
 /* Fonts — Plus Jakarta Sans (all) */
-@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
+
+/* Overlay enter/exit animation utilities (animate-in/out, fade, zoom, slide)
+   — part of the styles contract; without it consumer dialogs/menus teleport. */
+@import "tw-animate-css";
 
 
 /* ── Tailwind theme bridge — maps CSS vars to utility classes ── */
 @theme inline {
+  /* ── New semantic layer (Quill grammar) ── */
+  --color-background-primary-canvas: var(--background-primary-canvas);
+  --color-background-primary-surface: var(--background-primary-surface);
+  --color-background-secondary-surface: var(--background-secondary-surface);
+  --color-background-hover-default: var(--background-hover-default);
+  --color-background-pressed-default: var(--background-pressed-default);
+  --color-background-brand-default: var(--background-brand-default);
+  --color-background-brand-hover: var(--background-brand-hover);
+  --color-background-brand-pressed: var(--background-brand-pressed);
+  /* background-brand-container is a layered value (gradient + base) — consume
+     it with `background: var(--background-brand-container)`, not a bg-* utility. */
+  --color-background-inverse-surface: var(--background-inverse-surface);
+  --color-background-overlay-default: var(--background-overlay-default);
+  --color-background-static-white: var(--background-static-white);
+  --color-text-static-black: var(--text-static-black);
+  --color-background-demo-solid: var(--background-demo-solid);
+  --color-background-demo-default: var(--background-demo-default);
+  --color-text-demo-default: var(--text-demo-default);
+  --color-background-success-solid: var(--background-success-solid);
+  --color-background-error-solid: var(--background-error-solid);
+  --color-background-warning-solid: var(--background-warning-solid);
+  --color-text-on-status-static: var(--text-on-status-static);
+  --color-text-brand-default: var(--text-brand-default);
+  --color-text-brand-hover: var(--text-brand-hover);
+  --color-background-brand-selected: var(--background-brand-selected);
+  --color-text-brand-selected: var(--text-brand-selected);
+  --color-border-brand-selected: var(--border-brand-selected);
+  --color-background-success-default: var(--background-success-default);
+  --color-background-error-default: var(--background-error-default);
+  --color-background-warning-default: var(--background-warning-default);
+  --color-background-information-default: var(--background-information-default);
+  --color-border-default-default: var(--border-default-default);
+  --color-border-prominent-default: var(--border-prominent-default);
+  --color-border-neutral-default: var(--border-neutral-default);
+  --color-border-success-default: var(--border-success-default);
+  --color-border-error-default: var(--border-error-default);
+  --color-border-warning-default: var(--border-warning-default);
+  --color-border-information-default: var(--border-information-default);
+  --color-text-prominent-default: var(--text-prominent-default);
+  --color-text-subtle-default: var(--text-subtle-default);
+  --color-text-disabled-default: var(--text-disabled-default);
+  --color-text-prominent-inverse: var(--text-prominent-inverse);
+  --color-text-subtle-inverse: var(--text-subtle-inverse);
+  --color-text-on-brand-static: var(--text-on-brand-static);
+  --color-text-brand-container-static: var(--text-brand-container-static);
+  --color-text-success-default: var(--text-success-default);
+  --color-text-error-default: var(--text-error-default);
+  --color-text-warning-default: var(--text-warning-default);
+  --color-text-information-default: var(--text-information-default);
+  --color-icon-prominent-default: var(--icon-prominent-default);
+  --color-icon-subtle-default: var(--icon-subtle-default);
+  --color-icon-disabled-default: var(--icon-disabled-default);
+  --color-icon-success-default: var(--icon-success-default);
+  --color-icon-error-default: var(--icon-error-default);
+  --color-icon-warning-default: var(--icon-warning-default);
+  --color-icon-information-default: var(--icon-information-default);
+  --color-ring-focus-default: var(--ring-focus-default);
+  --color-ring-focus-strong: var(--ring-focus-strong);
+  --color-ring-focus-soft: var(--ring-focus-soft);
+  --color-ring-error-default: var(--ring-error-default);
+  --color-ring-error-soft: var(--ring-error-soft);
+  --color-ring-brand-soft: var(--ring-brand-soft);
+  --color-background-secondary-wash: var(--background-secondary-wash);
+  --color-background-static-white-wash: var(--background-static-white-wash);
   --color-prominent: var(--prominent);
   --color-on-prominent: var(--on-prominent);
   --color-on-prominent-static-inverse: var(--on-prominent-static-inverse);
@@ -87,11 +155,12 @@
   --radius-2xl: calc(var(--radius) + 8px);
   --radius-3xl: calc(var(--radius) + 12px);
   --radius-4xl: calc(var(--radius) + 16px);
-  /* ── Transitions — duration ── */
+  /* ── Transitions — duration (fast/base/slow resolve through the
+        semantic motion roles; instant/open/blink stay primitive) ── */
   --duration-instant: var(--primitive-duration-instant);
-  --duration-fast: var(--primitive-duration-fast);
-  --duration-base: var(--primitive-duration-base);
-  --duration-slow: var(--primitive-duration-slow);
+  --duration-fast: var(--motion-hover);
+  --duration-base: var(--motion-surface);
+  --duration-slow: var(--motion-progress);
   --duration-open: var(--primitive-duration-open);
   --duration-blink: var(--primitive-duration-blink);
   /* ── Transitions — easing ── */
@@ -99,6 +168,11 @@
   --ease-enter: var(--primitive-ease-enter);
   --ease-exit: var(--primitive-ease-exit);
   --ease-linear: var(--primitive-ease-linear);
+  --ease-spring: var(--primitive-ease-spring);
+  --ease-overshoot: var(--primitive-ease-overshoot);
+  /* ── Named animations ── */
+  --animate-button-shimmer: button-shimmer 4s linear infinite;
+  --animate-skeleton-sweep: skeleton-sweep 1.6s var(--primitive-ease-standard) infinite;
 }
 
 /* ══════════════════════════════════════════════════════════════
@@ -109,117 +183,175 @@
   --font-plus-jakarta-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
   --radius: 0.625rem;
 
-  /* ── Blue scale ── */
-  --primitive-blue-50: oklch(0.93 0.05 267);
-  /* #E6E6FF */
-  --primitive-blue-100: oklch(0.77 0.14 267);
-  /* #B8B8FF */
-  --primitive-blue-200: oklch(0.66 0.21 267);
-  /* #8A8AFF */
-  --primitive-blue-300: oklch(0.57 0.26 267);
-  /* #5C5CFF */
-  --primitive-blue-400: oklch(0.51 0.285 267);
-  /* #3939FF */
-  --primitive-blue-500: oklch(0.476 0.297 267.4);
-  /* #2323FF — brand blue */
-  --primitive-blue-600: oklch(0.40 0.27 265);
-  /* #0B0BD2 */
-  --primitive-blue-700: oklch(0.31 0.21 264);
-  /* #0000A5 */
-  --primitive-blue-800: oklch(0.23 0.16 264);
-  /* #000078 */
-  --primitive-blue-900: oklch(0.15 0.10 264);
-  /* #00004C */
-  --primitive-blue-1000: oklch(0.07 0.05 264);
-  /* #00001F */
-
-  /* ── Monochrome scale ── */
-  --primitive-mono-50: oklch(1 0 0);
-  /* #FFFFFF */
-  --primitive-mono-100: oklch(0.95 0 0);
-  /* #EEEEEE */
-  --primitive-mono-200: oklch(0.90 0 0);
-  /* #EEEEEE */
-  --primitive-mono-300: oklch(0.84 0 0);
-  /* #CCCCCC */
-  --primitive-mono-400: oklch(0.79 0 0);
-  /* #BBBBBB */
-  --primitive-mono-500: oklch(0.74 0 0);
-  /* #AAAAAA */
-  --primitive-mono-600: oklch(0.63 0 0);
-  /* #888888 */
-  --primitive-mono-700: oklch(0.51 0 0);
-  /* #666666 */
-  --primitive-mono-800: oklch(0.39 0 0);
-  /* #444444 */
-  --primitive-mono-900: oklch(0.25 0 0);
-  /* #222222 */
-  --primitive-mono-1000: oklch(0 0 0);
-  /* #000000 */
-
-  /* ── Green ── */
-  --primitive-green-400: oklch(0.492 0.162 144);
-  /* #008832 */
-
-  /* ── Sky ── */
-  --primitive-sky-600: oklch(0.6 0.18 245);
-  /* #3DAAFF */
-
-  /* ── Red ── */
-  --primitive-red-600: #F92E26;
-  /* #F92E26 */
-  --primitive-red-500: oklch(0.653 0.234 18.5);
-  /* #FF3355 */
-
-  /* ── Orange ── */
-  --primitive-orange-600: oklch(0.52 0.168 38);
-  /* #D45200 */
-  --primitive-orange-500: oklch(0.62 0.185 38);
-  /* #FF6600 */
-  --primitive-orange-400: oklch(0.751 0.179 58.3);
-  /* #FF8C00 */
-
-  /* ── Amber ── */
-  --primitive-amber-300: #FDCA8A;
-  /* #FDCA8A — credit/boost badge surface (peach, contrast on grey card) */
-  --primitive-amber-600: #F9840F;
-  /* #F9840F — warm orange-amber; boost badge background base */
-  --primitive-amber-900: oklch(0.30 0.10 52);
-  /* #521900 — deep amber/brown; credit/boost badge label text */
-
-  /* ── Yellow ── */
-  --primitive-yellow-500: oklch(0.65 0.16 82);
-  /* #E0AE00 — golden warning yellow; clearly distinct from orange/red */
-
-  /* ── Violet ── */
-  --primitive-violet-500: oklch(0.601 0.263 301.6);
-  /* #A040FF */
-
-  /* ── Mono alpha scale ── */
-  --primitive-mono-alpha-4:  oklch(0 0 0 / 4%);
-  --primitive-mono-alpha-8:  oklch(0 0 0 / 8%);
-  --primitive-mono-alpha-16: oklch(0 0 0 / 16%);
-  --primitive-mono-alpha-24: oklch(0 0 0 / 24%);
-  --primitive-mono-alpha-32: oklch(0 0 0 / 32%);
-  --primitive-mono-alpha-40: oklch(0 0 0 / 40%);
-  --primitive-mono-alpha-50: oklch(0 0 0 / 50%);
-  --primitive-mono-alpha-64: oklch(0 0 0 / 64%);
-  --primitive-mono-alpha-80: oklch(0 0 0 / 80%);
-
-  /* ── Blue alpha scale ── */
-  --primitive-blue-alpha-4:  oklch(0.476 0.297 267.4 / 4%);
-  --primitive-blue-alpha-8:  oklch(0.476 0.297 267.4 / 8%);
-  --primitive-blue-alpha-16: oklch(0.476 0.297 267.4 / 16%);
-  --primitive-blue-alpha-24: oklch(0.476 0.297 267.4 / 24%);
-  --primitive-blue-alpha-32: oklch(0.476 0.297 267.4 / 32%);
-  --primitive-blue-alpha-40: oklch(0.476 0.297 267.4 / 40%);
-  --primitive-blue-alpha-50: oklch(0.476 0.297 267.4 / 50%);
-  --primitive-blue-alpha-64: oklch(0.476 0.297 267.4 / 64%);
-  --primitive-blue-alpha-80: oklch(0.476 0.297 267.4 / 80%);
-
-  /* ── Overlay ── */
-  --primitive-black-50: var(--primitive-mono-alpha-50);
-  /* @deprecated — use --primitive-mono-alpha-50 */
+  /* ── Blue scale ── */  /* brand #2323FF at 600 · 25 = light canvas · 1000 = dark canvas */
+  --primitive-blue-25: #F7F8FC;
+  --primitive-blue-50: #E6F3FF;
+  --primitive-blue-100: #BFD8FF;
+  --primitive-blue-200: #99B7FF;
+  --primitive-blue-300: #7392FF;
+  --primitive-blue-400: #4D6BFF;
+  --primitive-blue-500: #3445FF;
+  --primitive-blue-600: #2323FF;
+  --primitive-blue-700: #0606C7;
+  --primitive-blue-800: #00008F;
+  --primitive-blue-900: #000057;
+  --primitive-blue-1000: #00001F;
+
+  /* ── Mono scale ── */
+  --primitive-mono-50: #FFFFFF;
+  --primitive-mono-100: #F1F1F1;
+  --primitive-mono-200: #E3E3E3;
+  --primitive-mono-300: #D5D5D5;
+  --primitive-mono-400: #C6C6C6;
+  --primitive-mono-500: #B8B8B8;
+  --primitive-mono-600: #AAAAAA;
+  --primitive-mono-700: #8E8E8E;
+  --primitive-mono-800: #717171;
+  --primitive-mono-900: #555555;
+  --primitive-mono-1000: #393939;
+  --primitive-mono-1100: #1C1C1C;
+  --primitive-mono-1200: #000000;
+
+  /* ── Green scale ── */  /* status base at 600 */
+  --primitive-green-50: #E6FFEA;
+  --primitive-green-100: #BFFFCC;
+  --primitive-green-200: #99FEAF;
+  --primitive-green-300: #73F593;
+  --primitive-green-400: #4DE778;
+  --primitive-green-500: #26D45E;
+  --primitive-green-600: #00BD46;
+  --primitive-green-700: #00A632;
+  --primitive-green-800: #008420;
+  --primitive-green-900: #005712;
+  --primitive-green-1000: #001F06;
+
+  /* ── Red scale ── */  /* status base at 600 */
+  --primitive-red-50: #FFE6E6;
+  --primitive-red-100: #FFBFBF;
+  --primitive-red-200: #FF9999;
+  --primitive-red-300: #FF7373;
+  --primitive-red-400: #FF514D;
+  --primitive-red-500: #FF3A36;
+  --primitive-red-600: #FE2925;
+  --primitive-red-700: #C70C08;
+  --primitive-red-800: #8F0000;
+  --primitive-red-900: #570000;
+  --primitive-red-1000: #1F0000;
+
+  /* ── Amber scale ── */  /* status base at 600 */
+  --primitive-amber-50: #FFF8E0;
+  --primitive-amber-100: #FFEDBB;
+  --primitive-amber-200: #FFE196;
+  --primitive-amber-300: #FFD370;
+  --primitive-amber-400: #FFC34B;
+  --primitive-amber-500: #FFB125;
+  --primitive-amber-600: #F49E00;
+  --primitive-amber-700: #C78200;
+  --primitive-amber-800: #8F6300;
+  --primitive-amber-900: #573F00;
+  --primitive-amber-1000: #1F1700;
+
+  /* ── Azure scale ── */  /* game accent + information base at 600 · sky ≈ 500 */
+  --primitive-azure-50: #D9F0FF;
+  --primitive-azure-100: #B5E1FF;
+  --primitive-azure-200: #91D2FF;
+  --primitive-azure-300: #6CC2FF;
+  --primitive-azure-400: #51B2FF;
+  --primitive-azure-500: #3BA1F1;
+  --primitive-azure-600: #2A90E0;
+  --primitive-azure-700: #0F73C1;
+  --primitive-azure-800: #00548F;
+  --primitive-azure-900: #003457;
+  --primitive-azure-1000: #00131F;
+
+  /* ── Ember scale ── */  /* game accent · base at 500 */
+  --primitive-ember-50: #FDEFE8;
+  --primitive-ember-100: #F9D1BF;
+  --primitive-ember-200: #F4B496;
+  --primitive-ember-300: #F0976D;
+  --primitive-ember-400: #EC7943;
+  --primitive-ember-500: #E85C1A;
+  --primitive-ember-600: #C14B13;
+  --primitive-ember-700: #983B0F;
+  --primitive-ember-800: #6F2B0B;
+  --primitive-ember-900: #461B07;
+  --primitive-ember-1000: #1C0B03;
+
+  /* ── Violet scale ── */  /* game accent · base at 500 · lilac ≈ 200 */
+  --primitive-violet-50: #F3E8FD;
+  --primitive-violet-100: #E1C5FB;
+  --primitive-violet-200: #CFA3F8;
+  --primitive-violet-300: #BE81F5;
+  --primitive-violet-400: #AC5EF3;
+  --primitive-violet-500: #9A3CF0;
+  --primitive-violet-600: #8012E5;
+  --primitive-violet-700: #640EB3;
+  --primitive-violet-800: #480A81;
+  --primitive-violet-900: #2C064F;
+  --primitive-violet-1000: #10021D;
+
+  /* ── Jade scale ── */  /* game accent · base at 500 */
+  --primitive-jade-50: #E7FEF4;
+  --primitive-jade-100: #ACFAD9;
+  --primitive-jade-200: #71F6BD;
+  --primitive-jade-300: #36F2A2;
+  --primitive-jade-400: #0EDB84;
+  --primitive-jade-500: #0AA060;
+  --primitive-jade-600: #088650;
+  --primitive-jade-700: #076C41;
+  --primitive-jade-800: #055231;
+  --primitive-jade-900: #033721;
+  --primitive-jade-1000: #021D12;
+
+  /* ── White alpha — lifts and glazes on dark surfaces ── */
+  --primitive-white-alpha-4: rgb(255 255 255 / 4%);
+  --primitive-white-alpha-6: rgb(255 255 255 / 6%);
+  --primitive-white-alpha-8: rgb(255 255 255 / 8%);
+  --primitive-white-alpha-12: rgb(255 255 255 / 12%);
+  --primitive-white-alpha-16: rgb(255 255 255 / 16%);
+  --primitive-white-alpha-20: rgb(255 255 255 / 20%);
+  --primitive-white-alpha-24: rgb(255 255 255 / 24%);
+  --primitive-white-alpha-32: rgb(255 255 255 / 32%);
+  --primitive-white-alpha-40: rgb(255 255 255 / 40%);
+  --primitive-white-alpha-50: rgb(255 255 255 / 50%);
+  --primitive-white-alpha-64: rgb(255 255 255 / 64%);
+  --primitive-white-alpha-80: rgb(255 255 255 / 80%);
+
+  /* ── Black alpha — fills, glazes, and scrims on light surfaces ── */
+  --primitive-black-alpha-4: rgb(0 0 0 / 4%);
+  --primitive-black-alpha-6: rgb(0 0 0 / 6%);
+  --primitive-black-alpha-8: rgb(0 0 0 / 8%);
+  --primitive-black-alpha-12: rgb(0 0 0 / 12%);
+  --primitive-black-alpha-16: rgb(0 0 0 / 16%);
+  --primitive-black-alpha-20: rgb(0 0 0 / 20%);
+  --primitive-black-alpha-24: rgb(0 0 0 / 24%);
+  --primitive-black-alpha-32: rgb(0 0 0 / 32%);
+  --primitive-black-alpha-40: rgb(0 0 0 / 40%);
+  --primitive-black-alpha-50: rgb(0 0 0 / 50%);
+  --primitive-black-alpha-64: rgb(0 0 0 / 64%);
+  --primitive-black-alpha-80: rgb(0 0 0 / 80%);
+
+  /* ── Blue alpha — frosted brand washes ── */
+  --primitive-blue-alpha-4: rgb(35 35 255 / 4%);
+  --primitive-blue-alpha-8: rgb(35 35 255 / 8%);
+  --primitive-blue-alpha-16: rgb(35 35 255 / 16%);
+  --primitive-blue-alpha-24: rgb(35 35 255 / 24%);
+  --primitive-blue-alpha-32: rgb(35 35 255 / 32%);
+  --primitive-blue-alpha-40: rgb(35 35 255 / 40%);
+  --primitive-blue-alpha-50: rgb(35 35 255 / 50%);
+  --primitive-blue-alpha-64: rgb(35 35 255 / 64%);
+  --primitive-blue-alpha-80: rgb(35 35 255 / 80%);
+
+  /* @deprecated — old mono-alpha names; use black-alpha. Deleted when the component walk completes. */
+  --primitive-mono-alpha-4: var(--primitive-black-alpha-4);
+  --primitive-mono-alpha-8: var(--primitive-black-alpha-8);
+  --primitive-mono-alpha-16: var(--primitive-black-alpha-16);
+  --primitive-mono-alpha-24: var(--primitive-black-alpha-24);
+  --primitive-mono-alpha-32: var(--primitive-black-alpha-32);
+  --primitive-mono-alpha-40: var(--primitive-black-alpha-40);
+  --primitive-mono-alpha-50: var(--primitive-black-alpha-50);
+  --primitive-mono-alpha-64: var(--primitive-black-alpha-64);
+  --primitive-mono-alpha-80: var(--primitive-black-alpha-80);
 
   /* ── Transitions — Duration scale ── */
   --primitive-duration-instant:  50ms;
@@ -244,6 +376,10 @@
   /* accelerates — elements leaving the screen */
   --primitive-ease-linear:    linear;
   /* constant speed — sidebar width, progress bar */
+  --primitive-ease-spring:    cubic-bezier(0.3, 1.25, 0.4, 1);
+  /* liquid travel — slight overshoot, settles (selection indicators) */
+  --primitive-ease-overshoot: cubic-bezier(0.2, 1.8, 0.4, 1);
+  /* pops & ticks — icon arrival, chip tick, success check */
 
   /* ── Layout — Standard responsive grid (gutter / margin) ── */
   --primitive-layout-gutter-none: 0px;
@@ -255,6 +391,58 @@
   --primitive-layout-diagram-max-default: 319px;
   --primitive-layout-diagram-max-small: 599px;
   --primitive-layout-diagram-max-medium: 1135px;
+
+  /* ── Typography — Font size scale (px) ── */
+  --primitive-font-size-10: 10px;
+  --primitive-font-size-12: 12px;
+  --primitive-font-size-14: 14px;
+  --primitive-font-size-16: 16px;
+  --primitive-font-size-18: 18px;
+  --primitive-font-size-20: 20px;
+  --primitive-font-size-22: 22px;
+  --primitive-font-size-24: 24px;
+  --primitive-font-size-26: 26px;
+  --primitive-font-size-30: 30px;
+  --primitive-font-size-32: 32px;
+  --primitive-font-size-36: 36px;
+  --primitive-font-size-40: 40px;
+  --primitive-font-size-56: 56px;
+
+  /* ── Typography — Line-height scale (px) ── */
+  --primitive-line-height-16: 16px;
+  --primitive-line-height-20: 20px;
+  --primitive-line-height-24: 24px;
+  --primitive-line-height-28: 28px;
+  --primitive-line-height-32: 32px;
+  --primitive-line-height-36: 36px;
+  --primitive-line-height-40: 40px;
+  --primitive-line-height-48: 48px;
+  --primitive-line-height-64: 64px;
+
+  /* ── Typography — Font weight scale ── */
+  --primitive-font-weight-regular: 400;
+  --primitive-font-weight-medium: 500;
+  --primitive-font-weight-semibold: 600;
+  --primitive-font-weight-bold: 700;
+  --primitive-font-weight-extrabold: 800;
+
+  /* ── Typography — Letter-spacing (tracking) scale ── */
+  --primitive-tracking-tightest: -0.03em;
+  /* display */
+  --primitive-tracking-tighter: -0.025em;
+  /* h1 */
+  --primitive-tracking-tight: -0.02em;
+  /* h2 */
+  --primitive-tracking-snug: -0.015em;
+  /* h3 */
+  --primitive-tracking-close: -0.01em;
+  /* h4 */
+  --primitive-tracking-normal: 0em;
+  /* h5, body */
+  --primitive-tracking-loose: 0.005em;
+  /* caption */
+  --primitive-tracking-widest: 0.12em;
+  /* overline */
 }
 
 /* ══════════════════════════════════════════════════════════════
@@ -262,95 +450,372 @@
    UI role and meaning. References primitives only.
    ══════════════════════════════════════════════════════════════ */
 :root {
-  --prominent: var(--primitive-mono-50);
-  /* #FFFFFF — light surface (page chrome, cards) */
-  --on-prominent: var(--primitive-mono-1000);
-  /* #000000 — text/icon color for use on prominent surfaces */
-  --prominent-inverse: var(--primitive-mono-1000);
-  /* #000000 — dark surface for use on light pages (e.g. toasts) */
-  --on-prominent-inverse: var(--primitive-mono-50);
-  /* #FFFFFF — text/icon color for use on prominent-inverse surfaces */
-  --primary: var(--primitive-blue-500);
-  /* #2323FF — brand primary surface */
-  --on-primary: var(--primitive-mono-50);
-  /* #FFFFFF — text/icon color for use on primary surfaces */
+  /* ── Typography — Semantic type styles ──
+     One block per text style. The four fluid headings (display, h1/h2/h3)
+     carry both a -desktop and -mobile value per property — the equivalent of a
+     Figma variable with a Desktop mode and a Mobile mode. The component layer
+     (the .display, .h1, etc. classes) clamps between the two. Fixed-size
+     styles (h4–h6, body-*, caption, overline) carry one value each. */
+  --type-display-weight: var(--primitive-font-weight-extrabold);
+  --type-display-tracking: var(--primitive-tracking-tightest);
+  --type-display-size-desktop: var(--primitive-font-size-56);
+  --type-display-size-mobile: var(--primitive-font-size-36);
+  --type-display-line-desktop: var(--primitive-line-height-64);
+  --type-display-line-mobile: var(--primitive-line-height-40);
+
+  --type-h1-weight: var(--primitive-font-weight-bold);
+  --type-h1-tracking: var(--primitive-tracking-tighter);
+  --type-h1-size-desktop: var(--primitive-font-size-40);
+  --type-h1-size-mobile: var(--primitive-font-size-30);
+  --type-h1-line-desktop: var(--primitive-line-height-48);
+  --type-h1-line-mobile: var(--primitive-line-height-36);
+
+  --type-h2-weight: var(--primitive-font-weight-bold);
+  --type-h2-tracking: var(--primitive-tracking-tight);
+  --type-h2-size-desktop: var(--primitive-font-size-32);
+  --type-h2-size-mobile: var(--primitive-font-size-26);
+  --type-h2-line-desktop: var(--primitive-line-height-40);
+  --type-h2-line-mobile: var(--primitive-line-height-32);
+
+  --type-h3-weight: var(--primitive-font-weight-semibold);
+  --type-h3-tracking: var(--primitive-tracking-snug);
+  --type-h3-size-desktop: var(--primitive-font-size-24);
+  --type-h3-size-mobile: var(--primitive-font-size-22);
+  --type-h3-line-desktop: var(--primitive-line-height-32);
+  --type-h3-line-mobile: var(--primitive-line-height-28);
+
+  --type-h4-weight: var(--primitive-font-weight-semibold);
+  --type-h4-tracking: var(--primitive-tracking-close);
+  --type-h4-size: var(--primitive-font-size-20);
+  --type-h4-line: var(--primitive-line-height-28);
+
+  --type-h5-weight: var(--primitive-font-weight-semibold);
+  --type-h5-tracking: var(--primitive-tracking-normal);
+  --type-h5-size: var(--primitive-font-size-18);
+  --type-h5-line: var(--primitive-line-height-24);
+
+  --type-h6-weight: var(--primitive-font-weight-semibold);
+  --type-h6-tracking: var(--primitive-tracking-normal);
+  --type-h6-size: var(--primitive-font-size-16);
+  --type-h6-line: var(--primitive-line-height-24);
+
+  --type-label-weight: var(--primitive-font-weight-medium);
+  --type-label-tracking: var(--primitive-tracking-normal);
+  --type-label-size: var(--primitive-font-size-14);
+  --type-label-line: var(--primitive-line-height-20);
+
+  --type-body-lg-weight: var(--primitive-font-weight-regular);
+  --type-body-lg-size: var(--primitive-font-size-18);
+  --type-body-lg-line: var(--primitive-line-height-28);
+
+  --type-body-md-weight: var(--primitive-font-weight-regular);
+  --type-body-md-size: var(--primitive-font-size-16);
+  --type-body-md-line: var(--primitive-line-height-24);
+
+  --type-body-sm-weight: var(--primitive-font-weight-regular);
+  --type-body-sm-size: var(--primitive-font-size-14);
+  --type-body-sm-line: var(--primitive-line-height-20);
+
+  --type-caption-weight: var(--primitive-font-weight-medium);
+  --type-caption-tracking: var(--primitive-tracking-loose);
+  --type-caption-size: var(--primitive-font-size-12);
+  --type-caption-line: var(--primitive-line-height-16);
+
+  --type-overline-weight: var(--primitive-font-weight-semibold);
+  --type-overline-tracking: var(--primitive-tracking-widest);
+  --type-overline-size: var(--primitive-font-size-12);
+  --type-overline-line: var(--primitive-line-height-16);
+
+  /* ── Colour — semantic tokens (Quill grammar: {element}-{role}-{variant}) ──
+     Light values here; the dark theme overrides live in the `.dark` block
+     below. Every value points at a primitive scale step, an alpha primitive,
+     or a color-mix() recipe over those. */
+
+  /* Background */
+  --background-primary-canvas: var(--primitive-blue-25);
+  --background-primary-surface: var(--primitive-mono-50);
+  --background-secondary-surface: var(--primitive-mono-100);
+  --background-hover-default: var(--primitive-black-alpha-4);
+  --background-pressed-default: var(--primitive-black-alpha-8);
+  --background-brand-default: var(--primitive-blue-600);
+  --background-brand-hover: color-mix(in srgb, black 16%, var(--background-brand-default));
+  --background-brand-pressed: color-mix(in srgb, black 32%, var(--background-brand-default));
+  --background-secondary-wash: color-mix(in srgb, var(--background-secondary-surface) 80%, transparent);
+  /* pressed wash on outline chips */
+  --background-static-white-wash: var(--primitive-white-alpha-80);
+  /* hover on the white on-brand button fills */
+  /* Tinted canvas — the screen background: a blue tint melting into the
+     canvas with a soft centred aurora — the Refined composition, in token math. One token, two layers; consume via
+     `background: var(--background-tinted-canvas)` on the page root (an
+     app-shell decision — components never paint it). Every stop is token
+     math (blue primitives mixed into the canvas), and both themes end on
+     background-primary-canvas so long pages melt in without a seam. */
+  --background-tinted-canvas:
+    radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--primitive-blue-400) 24%, transparent), transparent 55%),
+    linear-gradient(180deg,
+      color-mix(in srgb, var(--primitive-blue-600) 12%, var(--background-primary-canvas)) 0%,
+      color-mix(in srgb, var(--primitive-blue-600) 4%, var(--background-primary-canvas)) 55%,
+      var(--background-primary-canvas) 100%);
+  --background-brand-container:
+    linear-gradient(rgb(255 255 255 / 92%), rgb(255 255 255 / 92%)),
+    var(--primitive-blue-600);
+  /* Two layers, not a flattened colour: brand base + white 92% glaze on top,
+     exactly like a Figma fill stack. Static — same in both themes. Layered
+     values paint via `background`, not `background-color`. */
+  --background-inverse-surface: var(--primitive-mono-1100);
+
+  /* Status backgrounds — pale tint surfaces for Alert / Section Message */
+  /* Solid status fills + their shared static ink (badges, chips) */
+  /* Demo badge role — rides the ember scale, static in both themes */
+  /* Static pair — never flips; for elements on fixed-colour art panels */
+  --background-static-white: var(--primitive-mono-50);
+  --text-static-black: var(--primitive-mono-1100);
+  --background-demo-solid: var(--primitive-ember-500);
+  --background-demo-default: var(--primitive-ember-50);
+  --text-demo-default: var(--primitive-ember-500);
+  --background-success-solid: var(--primitive-green-600);
+  --background-error-solid: var(--primitive-red-600);
+  --background-warning-solid: var(--primitive-amber-600);
+  --text-on-status-static: var(--primitive-mono-50);
+  /* white on the bright 600 fills — deliberate style call, below AA on green/amber */
+  /* Brand-coloured text on the canvas (links, ghost badges) */
+  --text-brand-default: var(--primitive-blue-600);
+  --text-brand-hover: var(--primitive-blue-700);
+  /* Selection — brand-selected states (active nav, chosen chip, current page).
+     Light: a 10% brand tint, solid-mixed over the surface. Dark deliberately
+     diverges (not a mirror): stronger solid fill, lighter ink and border,
+     because a 10% wash vanishes on near-black and blue-400 ink loses AA. */
+  --background-brand-selected: color-mix(in srgb, var(--primitive-blue-600) 10%, var(--primitive-mono-50));
+  --text-brand-selected: var(--primitive-blue-600);
+  --border-brand-selected: var(--primitive-blue-600);
+  /* Chrome — floating mobile chrome (Bottom Navigation), straight from the
+     Refined Mobile file: heavy near-solid frost + a soft ambient lift. The
+     ambient shadow is the ONE sanctioned exception to the no-shadow rule:
+     floating chrome over scrolling content needs separation; inline
+     components still never carry shadows. The bubble is a top-lit gloss
+     over the brand-selected fill; layered values paint via `background:`.
+     Chrome ink resolves through text-subtle-default (2026-09-03, AA fix —
+     was the Refined file's #8A8AA0/#9A9AC4 literals, 3.4:1 on the light
+     frost); the frost/border/shadow literals remain until an ink scale
+     joins the palette. */
+  --background-chrome-default: rgb(255 255 255 / 78%);
+  --border-chrome-default: rgb(10 10 60 / 8%);
+  --shadow-chrome-default: 0 12px 30px rgb(10 10 60 / 14%);
+  --text-chrome-subtle: var(--text-subtle-default);
+  --background-chrome-selected:
+    linear-gradient(rgb(255 255 255 / 55%), rgb(255 255 255 / 15%)),
+    var(--background-brand-selected);
+  --chrome-highlight-default: var(--primitive-white-alpha-80);
+  --text-chrome-selected: var(--primitive-blue-600);
+  --background-success-default: var(--primitive-green-50);
+  --background-error-default: var(--primitive-red-50);
+  --background-warning-default: var(--primitive-amber-50);
+  --background-information-default: var(--primitive-azure-50);
+  --background-overlay-default: var(--primitive-black-alpha-50);
+
+  /* Border */
+  --border-default-default: var(--primitive-mono-200);
+  --border-prominent-default: var(--primitive-mono-1100);
+
+  /* Status borders — solid status-600 outline, same in both themes */
+  --border-neutral-default: var(--primitive-mono-500);
+  /* soft hairline for neutral tint chips */
+  --border-success-default: var(--primitive-green-600);
+  --border-error-default: var(--primitive-red-600);
+  --border-warning-default: var(--primitive-amber-600);
+  --border-information-default: var(--primitive-azure-600);
+
+  /* Text */
+  --text-prominent-default: var(--primitive-mono-1100);
+  --text-subtle-default: var(--primitive-mono-900);
+  --text-disabled-default: var(--primitive-mono-500);
+  --text-prominent-inverse: var(--primitive-mono-50);
+  --text-subtle-inverse: color-mix(in srgb, var(--text-prominent-inverse) 78%, var(--background-inverse-surface));
+  /* supporting copy on the inverse surface (Toast description) — a real
+     mixed ink, not an opacity hack; the ingredients flip per theme. */
+  --text-on-brand-static: var(--primitive-mono-50);
+  --text-brand-container-static: var(--primitive-blue-600);
+  --text-success-default: var(--primitive-green-600);
+  --text-error-default: var(--primitive-red-600);
+  --text-warning-default: var(--primitive-amber-600);
+  --text-information-default: var(--primitive-azure-600);
+
+  /* Icon — aliases of text today; a separate namespace so icons can diverge
+     later (icons only need 3:1, so they may one day get brighter steps). */
+  --icon-prominent-default: var(--text-prominent-default);
+  --icon-subtle-default: var(--text-subtle-default);
+  --icon-disabled-default: var(--text-disabled-default);
+  --icon-success-default: var(--text-success-default);
+  --icon-error-default: var(--text-error-default);
+  --icon-warning-default: var(--text-warning-default);
+  --icon-information-default: var(--text-information-default);
+
+  /* Ring */
+  --ring-focus-default: var(--primitive-blue-600);
+  --ring-focus-strong: color-mix(in srgb, var(--ring-focus-default) 50%, transparent);
+  /* the 3px control focus ring */
+  --ring-focus-soft: color-mix(in srgb, var(--ring-focus-default) 8%, transparent);
+  /* the soft text-field focus ring */
+  --ring-error-default: var(--text-error-default);
+  --ring-error-soft: color-mix(in srgb, var(--ring-error-default) 20%, transparent);
+  /* invalid-field ring */
+  --ring-brand-soft: color-mix(in srgb, var(--background-brand-default) 40%, transparent);
+  /* brand hairline ring — sidebar icon-rail hover/active */
+
+  /* ── @deprecated aliases — the old semantic layer, repointed at the new
+     tokens. Each is deleted when the last component using it migrates. ── */
+  --prominent: var(--background-primary-canvas);
+  --on-prominent: var(--text-prominent-default);
+  --prominent-inverse: var(--background-inverse-surface);
+  --on-prominent-inverse: var(--text-prominent-inverse);
+  --primary: var(--background-brand-default);
+  --on-primary: var(--text-on-brand-static);
   --primary-inverse: var(--primitive-mono-50);
-  /* #FFFFFF — inverted primary surface for use on dark/coloured areas */
-  --on-primary-inverse: var(--primitive-blue-500);
-  /* #2323FF — text/icon color for use on primary-inverse surfaces */
-  --primary-hover: oklch(0.403 0.251 267.5);
-  /* @deprecated — use the on-X / X-inverse / on-X-inverse pairs above. Kept for backwards compat with external consumers referencing these via var(). */
-  --on-prominent-static-inverse: var(--on-prominent-inverse);
-  --surface-inverse-static: var(--primary-inverse);
-  --subtle: oklch(0.96 0 0);
-  --on-subtle: oklch(0.52 0 0);
-  --on-disabled: var(--primitive-mono-400);
-
-  --border-subtle: oklch(0.92 0 0);
-  --border: var(--border-subtle);
-  /* @deprecated alias — use --border-subtle or --border-prominent */
-  --border-prominent: var(--primitive-mono-1000);
-  /* #000000 */
-  --secondary-hover: var(--primitive-mono-100);
-  /* #EEEEEE */
-  --ring: var(--primitive-blue-500);
-  --overlay: var(--primitive-black-50);
-  --semantic-win: var(--primitive-green-400);
+  --on-primary-inverse: var(--text-brand-container-static);
+  --primary-hover: var(--background-brand-hover);
+  --on-prominent-static-inverse: var(--text-prominent-inverse);
+  --surface-inverse-static: var(--primitive-mono-50);
+  --subtle: var(--primitive-mono-100);
+  --on-subtle: var(--text-subtle-default);
+  --on-disabled: var(--text-disabled-default);
+
+  --border-subtle: var(--border-default-default);
+  --border: var(--border-default-default);
+  --border-prominent: var(--border-prominent-default);
+  --secondary-hover: var(--background-hover-default);
+  --ring: var(--ring-focus-default);
+  --overlay: var(--background-overlay-default);
+  --semantic-win: var(--text-success-default);
   --on-semantic-win: var(--primitive-mono-50);
-  /* #FFFFFF — text/icon color for use on semantic-win surfaces */
-  --semantic-loss: var(--primitive-red-500);
+  --semantic-loss: var(--text-error-default);
   --on-semantic-loss: var(--primitive-mono-50);
-  /* #FFFFFF — text/icon color for use on semantic-loss surfaces */
-  --semantic-info: var(--primitive-sky-600);
-  --semantic-error: var(--primitive-red-600);
-  --semantic-warning: var(--primitive-yellow-500);
+  --semantic-info: var(--text-information-default);
+  --semantic-error: var(--text-error-default);
+  --semantic-warning: var(--text-warning-default);
   --on-semantic-warning: var(--primitive-mono-50);
-  /* #FFFFFF — text/icon color for use on semantic-warning surfaces */
-  --semantic-demo: var(--primitive-orange-500);
-  /* #FF6600 — red-orange for "demo account" / "test mode" badges; independent
-     of severity (warning/danger), reserved for marking non-real-money flows */
-  --semantic-demo-surface: color-mix(in oklch, var(--semantic-demo) 10%, var(--prominent));
-  /* Opaque light-peach version of the demo tint — solid color so the badge
-     looks the same on any background (mirrors --semantic-boost-surface for credit) */
-  --semantic-boost: var(--primitive-amber-600);
-  /* #F9840F — boost badge surface */
-  --semantic-boost-surface: oklch(1 0 0 / 0.22);
-  /* Frosted glass surface for credit/boost badges — translucent white that
-     composes over whatever surface sits behind it (typically a coloured
-     hero card). Pair with backdrop-blur and `text-on-primary` for the
-     classic glass-chip look. */
-  --on-semantic-boost: var(--primitive-amber-900);
-  /* #521900 — text/icon color for use on semantic-boost surfaces */
-  --tabs: var(--primitive-mono-alpha-4);
+  --semantic-demo: #FF6600;
+  /* TODO revisit with Badge — demo-account marker, outside the status set */
+  --semantic-demo-surface: color-mix(in srgb, var(--semantic-demo) 10%, var(--primitive-mono-50));
+  --semantic-boost: #F9840F;
+  /* TODO revisit with Badge — credit/boost marker, outside the status set */
+  --semantic-boost-surface: rgb(255 255 255 / 22%);
+  --on-semantic-boost: #521900;
+  /* TODO revisit with Badge */
+  --tabs: var(--primitive-black-alpha-4);
   --tabs-active: var(--primitive-mono-50);
 
   --semantic-layout-diagram-max-default: var(--primitive-layout-diagram-max-default);
   --semantic-layout-diagram-max-small: var(--primitive-layout-diagram-max-small);
   --semantic-layout-diagram-max-medium: var(--primitive-layout-diagram-max-medium);
 
-  /* ── Transitions — Semantic duration ── */
-  --transition-duration-interactive: var(--primitive-duration-fast);
-  /* buttons, inputs, badges, checkboxes, toggles, tabs hover */
-  --transition-duration-surface:     var(--primitive-duration-base);
-  /* dropdowns, popovers, tooltips, accordions, navigation menus */
-  --transition-duration-overlay-close: var(--primitive-duration-slow);
-  /* dialogs, sheets, drawers, alert-dialogs closing */
-  --transition-duration-overlay-open:  var(--primitive-duration-open);
-  /* sheets, drawers entering */
-  --transition-duration-structural:  var(--primitive-duration-base);
-  /* sidebar collapse, progress fill, layout changes */
-
-  /* ── Transitions — Semantic easing ── */
-  --transition-ease-interactive: var(--primitive-ease-standard);
-  /* buttons, inputs — bidirectional state changes */
-  --transition-ease-enter:       var(--primitive-ease-enter);
-  /* overlays / surfaces entering */
-  --transition-ease-exit:        var(--primitive-ease-exit);
-  /* overlays / surfaces leaving */
-  --transition-ease-structural:  var(--primitive-ease-linear);
-  /* sidebar, progress — constant-speed structural changes */
+  /* ── Motion — Semantic roles ─────────────────────────────────
+     The duration and ease utilities resolve through these, so a
+     role retunes every consumer in one line. Roles never flip in
+     dark. Press is a pattern, not a utility: apply with
+     `active:duration-0` so the glaze lands the frame it happens
+     and fades on release. */
+  --motion-hover: var(--primitive-duration-fast);
+  /* hover tints & fills arriving (backs the duration-fast utility) */
+  --motion-hover-ease: var(--primitive-ease-standard);
+  --motion-press: 0ms;
+  /* pressed state lands instantly */
+  --motion-press-release: var(--primitive-duration-fast);
+  /* …and fades out on release */
+  --motion-surface: var(--primitive-duration-base);
+  /* menus, popovers, tooltips (backs the duration-base utility) */
+  --motion-surface-enter: var(--primitive-ease-enter);
+  --motion-surface-exit: var(--primitive-ease-exit);
+  --motion-overlay-open: 320ms;
+  /* dialogs, sheets, drawers entering (ease-enter) */
+  --motion-overlay-close: 250ms;
+  /* …and leaving (ease-exit) — exits are quicker */
+  --motion-structural: var(--primitive-duration-base);
+  /* sidebar collapse, accordion, chevrons */
+  --motion-structural-ease: var(--primitive-ease-linear);
+  --motion-progress: var(--primitive-duration-slow);
+  /* bars & timers (backs the duration-slow utility) */
+  --motion-progress-ease: var(--primitive-ease-linear);
+
+  /* ── Motion — Signature moves ────────────────────────────────
+     The liquid selection language, named. Travel pairs with
+     ease-spring; pop pairs with ease-overshoot. */
+  --motion-travel-lead: 200ms;
+  /* liquid indicator leading edge */
+  --motion-travel-trail: 380ms;
+  /* liquid indicator trailing edge, dragged behind */
+  --motion-pop: 450ms;
+  /* arrival pop — icon lift, chip tick, success check */
+}
+
+/* ══════════════════════════════════════════════════════════════
+   DARK THEME — semantic overrides only.
+   Primitives never change; each semantic token repoints to a
+   different step. Activate with class="dark" or data-theme="dark".
+   ══════════════════════════════════════════════════════════════ */
+.dark,
+[data-theme="dark"] {
+  /* Background */
+  --background-primary-canvas: var(--primitive-blue-1000);
+  --background-primary-surface: color-mix(in srgb, white 6%, var(--primitive-blue-1000));
+  --background-secondary-surface: color-mix(in srgb, white 12%, var(--primitive-blue-1000));
+  /* solid #1F1F3A — one glaze step above the card (6%) */
+  /* solid #0F0F2C — base + white glaze, flattened */
+  --background-hover-default: var(--primitive-white-alpha-12);
+  --background-pressed-default: var(--primitive-white-alpha-20);
+  --background-brand-default: var(--primitive-blue-400);
+  /* brand-hover / brand-pressed need no override — the black state layer
+     recipe re-derives from the dark brand automatically */
+  --background-inverse-surface: var(--primitive-mono-50);
+
+  /* Status backgrounds — solid base + 24% status glaze */
+  --background-success-default: color-mix(in srgb, var(--primitive-green-600) 24%, var(--primitive-blue-1000));
+  --background-error-default: color-mix(in srgb, var(--primitive-red-600) 24%, var(--primitive-blue-1000));
+  --background-warning-default: color-mix(in srgb, var(--primitive-amber-600) 24%, var(--primitive-blue-1000));
+  --background-information-default: color-mix(in srgb, var(--primitive-azure-600) 24%, var(--primitive-blue-1000));
+  --background-overlay-default: var(--primitive-black-alpha-64);
+
+  /* Border */
+  --border-default-default: var(--primitive-white-alpha-12);
+  --border-prominent-default: var(--primitive-mono-50);
+  --border-neutral-default: var(--primitive-white-alpha-12);
+
+  /* Text */
+  --text-prominent-default: var(--primitive-mono-50);
+  --text-subtle-default: var(--primitive-mono-600);
+  --text-disabled-default: var(--primitive-mono-800);
+  --text-prominent-inverse: var(--primitive-mono-1100);
+  /* status + on-brand + brand-container are static — no overrides */
+
+  /* Ring */
+  --ring-focus-default: var(--primitive-blue-400);
+  --text-brand-default: var(--primitive-blue-400);
+  --text-brand-hover: var(--primitive-blue-300);
+  --background-brand-selected: color-mix(in srgb, var(--primitive-blue-400) 24%, var(--primitive-blue-1000));
+  --background-tinted-canvas:
+    radial-gradient(circle at 60% 15%, color-mix(in srgb, var(--primitive-blue-400) 28%, transparent), transparent 55%),
+    linear-gradient(180deg,
+      color-mix(in srgb, var(--primitive-blue-400) 14%, var(--background-primary-canvas)) 0%,
+      var(--background-primary-canvas) 100%);
+  --text-brand-selected: var(--primitive-blue-200);
+  --border-brand-selected: var(--primitive-blue-300);
+  --background-chrome-default: rgb(20 20 44 / 72%);
+  --border-chrome-default: rgb(255 255 255 / 14%);
+  --shadow-chrome-default: 0 12px 30px rgb(0 0 20 / 50%);
+  --text-chrome-subtle: var(--text-subtle-default);
+  --background-chrome-selected:
+    linear-gradient(rgb(255 255 255 / 10%), rgb(255 255 255 / 0%)),
+    var(--background-brand-selected);
+  --chrome-highlight-default: var(--primitive-white-alpha-24);
+  --text-chrome-selected: var(--primitive-mono-50);
+
+  /* @deprecated aliases that don't resolve through a flipping token */
+  --primary-inverse: var(--primitive-mono-50);
+  --subtle: color-mix(in srgb, white 8%, var(--primitive-blue-1000));
+  --tabs: var(--primitive-white-alpha-8);
+  --tabs-active: color-mix(in srgb, white 12%, var(--primitive-blue-1000));
 }
 
+
 /* ══════════════════════════════════════════════════════════════
    RESPONSIVE LAYOUT — Standard grid (columns / gutter / margin)
    ══════════════════════════════════════════════════════════════ */
@@ -389,28 +854,312 @@
    Component-specific tokens. References semantics or primitives.
    ══════════════════════════════════════════════════════════════ */
 :root {
-  --card: var(--primitive-mono-50);
-  --card-foreground: oklch(0.07 0.012 165);
-  --popover: var(--primitive-mono-50);
-  --popover-foreground: oklch(0.07 0.012 165);
+  --card: var(--background-primary-surface);
+  --card-foreground: var(--text-prominent-default);
+  --popover: var(--background-primary-surface);
+  --popover-foreground: var(--text-prominent-default);
   --input: var(--border-subtle);
   /* Sunken dark fill for Input/InputGroup variant="inverse" — sits on
      coloured surfaces (brand-blue, etc.) where a frosted-white fill would
      blend into the surrounding chrome. 35 % black overlay deepens the
      surface enough for white text to read cleanly. */
-  --input-inverse-surface: oklch(0 0 0 / 0.35);
+  --input-inverse-surface: rgb(0 0 0 / 35%);
+  /* ── Accordion — component type tokens (private) ──
+     Typography follows the same three-layer model as color: these reference
+     primitives only and are consumed by Accordion alone — retuning them
+     never affects any other component. */
+  --accordion-trigger-font-size: var(--primitive-font-size-14);
+  --accordion-trigger-font-weight: var(--primitive-font-weight-medium);
+  --accordion-trigger-line-height: var(--primitive-line-height-20);
+  --accordion-content-font-size: var(--primitive-font-size-14);
+  --accordion-content-font-weight: var(--primitive-font-weight-regular);
+  --accordion-content-line-height: var(--primitive-line-height-20);
+  /* ── Banner — component type tokens (private) ──
+     The editorial gradient panel: extrabold title, medium supporting line,
+     extrabold pill CTA — matching the design file's 800/500/800 weights. */
+  --banner-title-font-size: var(--primitive-font-size-18);
+  --banner-title-font-weight: var(--primitive-font-weight-semibold);
+  --banner-title-line-height: var(--primitive-line-height-24);
+  --banner-description-font-size: var(--primitive-font-size-12);
+  --banner-description-font-weight: var(--primitive-font-weight-medium);
+  --banner-description-line-height: var(--primitive-line-height-16);
+  --banner-action-font-size: var(--primitive-font-size-12);
+  --banner-action-font-weight: var(--primitive-font-weight-semibold);
+  --banner-action-line-height: var(--primitive-line-height-16);
+  /* ── Menu family — shared type tokens (private) ──
+     One deliberate shared anatomy for Command, Context Menu, Dropdown
+     Menu, Menubar, and Select rows: retune here, every menu follows. */
+  --menu-item-font-size: var(--primitive-font-size-14);
+  --menu-item-line-height: var(--primitive-line-height-20);
+  --menu-item-font-weight: var(--primitive-font-weight-regular);
+  --menu-heading-font-size: var(--primitive-font-size-12);
+  --menu-heading-line-height: var(--primitive-line-height-16);
+  --menu-trigger-font-size: var(--primitive-font-size-14);
+  --menu-trigger-font-weight: var(--primitive-font-weight-medium);
+  --menu-trigger-line-height: var(--primitive-line-height-20);
+  --menu-shortcut-font-size: var(--primitive-font-size-12);
+  --menu-shortcut-font-weight: var(--primitive-font-weight-regular);
+  --menu-shortcut-line-height: var(--primitive-line-height-16);
+  --menu-heading-font-weight: var(--primitive-font-weight-medium);
+  /* ── Chip — component type tokens (private) ── */
+  --chip-font-size-md: var(--primitive-font-size-14);
+  --chip-line-height-md: var(--primitive-line-height-20);
+  --chip-font-size-sm: var(--primitive-font-size-12);
+  --chip-line-height-sm: var(--primitive-line-height-16);
+  --chip-font-weight: var(--primitive-font-weight-semibold);
+  /* ── Calendar — component type tokens (private) ── */
+  --calendar-caption-font-size: var(--primitive-font-size-14);
+  --calendar-caption-font-weight: var(--primitive-font-weight-semibold);
+  --calendar-caption-line-height: var(--primitive-line-height-20);
+  --calendar-weekday-font-size: var(--primitive-font-size-12);
+  --calendar-weekday-font-weight: var(--primitive-font-weight-medium);
+  --calendar-weekday-line-height: var(--primitive-line-height-16);
+  --calendar-day-font-size: var(--primitive-font-size-14);
+  --calendar-day-font-weight: var(--primitive-font-weight-regular);
+  --calendar-day-line-height: var(--primitive-line-height-20);
+  /* ── Button — component type tokens (private) ──
+     One primitive step per size (18/16/14), icons tracking the height. */
+  --button-font-size-lg: var(--primitive-font-size-18);
+  --button-line-height-lg: var(--primitive-line-height-24);
+  --button-font-size-md: var(--primitive-font-size-16);
+  --button-line-height-md: var(--primitive-line-height-24);
+  --button-font-size-sm: var(--primitive-font-size-14);
+  --button-line-height-sm: var(--primitive-line-height-20);
+  --button-font-weight: var(--primitive-font-weight-semibold);
+  /* ── Breadcrumb — component type tokens (private) ── */
+  --breadcrumb-font-size: var(--primitive-font-size-14);
+  --breadcrumb-font-weight: var(--primitive-font-weight-regular);
+  --breadcrumb-line-height: var(--primitive-line-height-20);
+  --breadcrumb-page-font-weight: var(--primitive-font-weight-medium);
+  /* ── Section Message — component type tokens (private) ──
+     Line-heights follow the foundation's pairing for each size (14→20, 12→16),
+     replacing the old 1.375 ratio that rendered fractional 19.25/16.5px. */
+  --section-message-title-font-size: var(--primitive-font-size-14);
+  --section-message-title-font-weight: var(--primitive-font-weight-semibold);
+  --section-message-title-line-height: var(--primitive-line-height-20);
+  --section-message-description-font-size: var(--primitive-font-size-14);
+  --section-message-description-font-weight: var(--primitive-font-weight-regular);
+  --section-message-description-line-height: var(--primitive-line-height-20);
+  /* sm density — one scale step below md */
+  --section-message-title-font-size-sm: var(--primitive-font-size-12);
+  --section-message-title-line-height-sm: var(--primitive-line-height-16);
+  --section-message-description-font-size-sm: var(--primitive-font-size-12);
+  --section-message-description-line-height-sm: var(--primitive-line-height-16);
+  /* ── Alert Dialog — component type tokens (private) ── */
+  --alert-dialog-title-font-size: var(--primitive-font-size-18);
+  --alert-dialog-title-font-weight: var(--primitive-font-weight-semibold);
+  --alert-dialog-title-line-height: var(--primitive-line-height-24);
+  --alert-dialog-description-font-size: var(--primitive-font-size-14);
+  --alert-dialog-description-font-weight: var(--primitive-font-weight-regular);
+  --alert-dialog-description-line-height: var(--primitive-line-height-20);
+  /* ── Dialog — component type tokens (private) ──
+     Same ladder as Alert Dialog: 18/semibold/24 title, 14/regular/20 body. */
+  --dialog-title-font-size: var(--primitive-font-size-18);
+  --dialog-title-font-weight: var(--primitive-font-weight-semibold);
+  --dialog-title-line-height: var(--primitive-line-height-24);
+  --dialog-description-font-size: var(--primitive-font-size-14);
+  --dialog-description-font-weight: var(--primitive-font-weight-regular);
+  --dialog-description-line-height: var(--primitive-line-height-20);
+  /* ── Drawer — component type tokens (private) ──
+     Same ladder as Dialog: 18/semibold/24 title, 14/regular/20 body. */
+  --drawer-title-font-size: var(--primitive-font-size-18);
+  --drawer-title-font-weight: var(--primitive-font-weight-semibold);
+  --drawer-title-line-height: var(--primitive-line-height-24);
+  --drawer-description-font-size: var(--primitive-font-size-14);
+  --drawer-description-font-weight: var(--primitive-font-weight-regular);
+  --drawer-description-line-height: var(--primitive-line-height-20);
+  /* ── Empty — component type tokens (private) ──
+     Same ladder as Dialog: 18/semibold/24 title, 14/regular/20 body. */
+  --empty-title-font-size: var(--primitive-font-size-18);
+  --empty-title-font-weight: var(--primitive-font-weight-semibold);
+  --empty-title-line-height: var(--primitive-line-height-24);
+  --empty-description-font-size: var(--primitive-font-size-14);
+  --empty-description-font-weight: var(--primitive-font-weight-regular);
+  --empty-description-line-height: var(--primitive-line-height-20);
+  /* ── Field — component type tokens (private) ──
+     Legend 16/medium/24 (label variant one step down), body 14/regular/20;
+     FieldError rides the description ladder in error ink. */
+  --field-legend-font-size: var(--primitive-font-size-16);
+  --field-legend-font-weight: var(--primitive-font-weight-medium);
+  --field-legend-line-height: var(--primitive-line-height-24);
+  --field-legend-label-font-size: var(--primitive-font-size-14);
+  --field-legend-label-font-weight: var(--primitive-font-weight-medium);
+  --field-legend-label-line-height: var(--primitive-line-height-20);
+  /* Label rides the control's text step per size; helper text stays 12
+     at every size (help text shouldn't shout). */
+  --field-label-font-size-sm: var(--primitive-font-size-12);
+  --field-label-line-height-sm: var(--primitive-line-height-16);
+  --field-label-font-size-md: var(--primitive-font-size-14);
+  --field-label-line-height-md: var(--primitive-line-height-20);
+  --field-label-font-size-lg: var(--primitive-font-size-16);
+  --field-label-line-height-lg: var(--primitive-line-height-24);
+  --field-label-font-weight: var(--primitive-font-weight-medium);
+  --field-description-font-size: var(--primitive-font-size-12);
+  --field-description-font-weight: var(--primitive-font-weight-regular);
+  --field-description-line-height: var(--primitive-line-height-16);
+  /* ── Input — component type tokens (private) ──
+     One primitive step per size (12/14/16), matching the Field label ladder. */
+  --input-font-size-sm: var(--primitive-font-size-12);
+  --input-line-height-sm: var(--primitive-line-height-16);
+  --input-font-size-md: var(--primitive-font-size-14);
+  --input-line-height-md: var(--primitive-line-height-20);
+  --input-font-size-lg: var(--primitive-font-size-16);
+  --input-line-height-lg: var(--primitive-line-height-24);
+  --input-font-weight: var(--primitive-font-weight-regular);
+  /* ── Input OTP — component type tokens (private) ──
+     Digits ride the input md step (14/regular/20). */
+  --input-otp-font-size: var(--primitive-font-size-14);
+  --input-otp-font-weight: var(--primitive-font-weight-regular);
+  --input-otp-line-height: var(--primitive-line-height-20);
+  /* ── Native Select — component type tokens (private) ──
+     Same ladder as Input (12/14/16, regular). */
+  --native-select-font-size-sm: var(--primitive-font-size-12);
+  --native-select-line-height-sm: var(--primitive-line-height-16);
+  --native-select-font-size-md: var(--primitive-font-size-14);
+  --native-select-line-height-md: var(--primitive-line-height-20);
+  --native-select-font-size-lg: var(--primitive-font-size-16);
+  --native-select-line-height-lg: var(--primitive-line-height-24);
+  --native-select-font-weight: var(--primitive-font-weight-regular);
+  /* ── Select — component type tokens (private) ──
+     Trigger rides the input ladder (12/14/16, regular); rows use the menu family. */
+  --select-font-size-sm: var(--primitive-font-size-12);
+  --select-line-height-sm: var(--primitive-line-height-16);
+  --select-font-size-md: var(--primitive-font-size-14);
+  --select-line-height-md: var(--primitive-line-height-20);
+  --select-font-size-lg: var(--primitive-font-size-16);
+  --select-line-height-lg: var(--primitive-line-height-24);
+  --select-font-weight: var(--primitive-font-weight-regular);
+  /* ── Textarea — component type tokens (private) ──
+     Rides the input md step (14/regular/20). */
+  --textarea-font-size: var(--primitive-font-size-14);
+  --textarea-font-weight: var(--primitive-font-weight-regular);
+  --textarea-line-height: var(--primitive-line-height-20);
+  /* ── Sheet — component type tokens (private) ──
+     Same ladder as Dialog: 18/semibold/24 title, 14/regular/20 body. */
+  --sheet-title-font-size: var(--primitive-font-size-18);
+  --sheet-title-font-weight: var(--primitive-font-weight-semibold);
+  --sheet-title-line-height: var(--primitive-line-height-24);
+  --sheet-description-font-size: var(--primitive-font-size-14);
+  --sheet-description-font-weight: var(--primitive-font-weight-regular);
+  --sheet-description-line-height: var(--primitive-line-height-20);
+  /* ── Table — component type tokens (private) ──
+     Cells 14/regular/20; header + footer 14/medium/20. */
+  --table-font-size: var(--primitive-font-size-14);
+  --table-font-weight: var(--primitive-font-weight-regular);
+  --table-line-height: var(--primitive-line-height-20);
+  --table-head-font-weight: var(--primitive-font-weight-medium);
+  /* ── Bottom Navigation — component type tokens (private) ──
+     12/medium/16 labels; the active destination goes semibold. */
+  --bottom-navigation-label-font-size: var(--primitive-font-size-12);
+  --bottom-navigation-label-font-weight: var(--primitive-font-weight-medium);
+  --bottom-navigation-label-line-height: var(--primitive-line-height-16);
+  --bottom-navigation-label-active-font-weight: var(--primitive-font-weight-semibold);
+  /* ── Sidebar — component type tokens (private) ──
+     Menu rows 14/regular/20 (sm 12/16); labels + badges 12/medium/16.
+     Active rows go semibold via the data-active rule below. */
+  --sidebar-menu-font-size: var(--primitive-font-size-14);
+  --sidebar-menu-line-height: var(--primitive-line-height-20);
+  --sidebar-menu-font-size-sm: var(--primitive-font-size-12);
+  --sidebar-menu-line-height-sm: var(--primitive-line-height-16);
+  --sidebar-menu-font-weight: var(--primitive-font-weight-regular);
+  --sidebar-menu-active-font-weight: var(--primitive-font-weight-semibold);
+  --sidebar-label-font-size: var(--primitive-font-size-12);
+  --sidebar-label-line-height: var(--primitive-line-height-16);
+  --sidebar-label-font-weight: var(--primitive-font-weight-medium);
+  /* ── Tabs — component type tokens (private) ──
+     Trigger rides one primitive step per list size (12/14/16); active goes
+     semibold via the data-state rule below. */
+  --tabs-trigger-font-size-sm: var(--primitive-font-size-12);
+  --tabs-trigger-line-height-sm: var(--primitive-line-height-16);
+  --tabs-trigger-font-size-md: var(--primitive-font-size-14);
+  --tabs-trigger-line-height-md: var(--primitive-line-height-20);
+  --tabs-trigger-font-size-lg: var(--primitive-font-size-16);
+  --tabs-trigger-line-height-lg: var(--primitive-line-height-24);
+  --tabs-trigger-font-weight: var(--primitive-font-weight-regular);
+  --tabs-trigger-active-font-weight: var(--primitive-font-weight-semibold);
+  /* ── Toggle — component type tokens (private) ── */
+  --toggle-font-size: var(--primitive-font-size-14);
+  --toggle-font-weight: var(--primitive-font-weight-medium);
+  --toggle-line-height: var(--primitive-line-height-20);
+  /* ── Tooltip — component type tokens (private) ── */
+  --tooltip-font-size: var(--primitive-font-size-14);
+  --tooltip-font-weight: var(--primitive-font-weight-medium);
+  --tooltip-line-height: var(--primitive-line-height-20);
+  /* ── Item — component type tokens (private) ──
+     List rows: 14/medium/20 title, 14/regular/20 body. */
+  --item-title-font-size: var(--primitive-font-size-14);
+  --item-title-font-weight: var(--primitive-font-weight-medium);
+  --item-title-line-height: var(--primitive-line-height-20);
+  --item-description-font-size: var(--primitive-font-size-14);
+  --item-description-font-weight: var(--primitive-font-weight-regular);
+  --item-description-line-height: var(--primitive-line-height-20);
+  /* ── Numpad — component type tokens (private) ──
+     Bare digit keys: 20/medium/28. */
+  --numpad-font-size: var(--primitive-font-size-20);
+  --numpad-font-weight: var(--primitive-font-weight-medium);
+  --numpad-line-height: var(--primitive-line-height-28);
+  /* ── Pagination — component type tokens (private) ── */
+  --pagination-font-size: var(--primitive-font-size-14);
+  --pagination-font-weight: var(--primitive-font-weight-semibold);
+  --pagination-line-height: var(--primitive-line-height-20);
+  /* ── Popover — component type tokens (private) ── */
+  --popover-title-font-size: var(--primitive-font-size-14);
+  --popover-title-font-weight: var(--primitive-font-weight-medium);
+  --popover-title-line-height: var(--primitive-line-height-20);
+  --popover-description-font-size: var(--primitive-font-size-14);
+  --popover-description-font-weight: var(--primitive-font-weight-regular);
+  --popover-description-line-height: var(--primitive-line-height-20);
+  /* ── Label — component type tokens (private) ── */
+  --label-font-size: var(--primitive-font-size-14);
+  --label-font-weight: var(--primitive-font-weight-medium);
+  --label-line-height: var(--primitive-line-height-20);
+  /* ── Link — component type tokens (private) ──
+     One primitive step per size (16/14/12), semibold like Button. */
+  --link-font-size-lg: var(--primitive-font-size-16);
+  --link-line-height-lg: var(--primitive-line-height-24);
+  --link-font-size-md: var(--primitive-font-size-14);
+  --link-line-height-md: var(--primitive-line-height-20);
+  --link-font-size-sm: var(--primitive-font-size-12);
+  --link-line-height-sm: var(--primitive-line-height-16);
+  --link-font-weight: var(--primitive-font-weight-semibold);
+  /* ── Avatar — component type tokens (private) ──
+     The initials scale with the avatar's own size prop (not the viewport):
+     12px in a 24px circle, 16px in a 48px one. Weight stays 400, matching
+     what the component rendered before it had tokens. */
+  --avatar-fallback-font-size-sm: var(--primitive-font-size-12);
+  --avatar-fallback-line-height-sm: var(--primitive-line-height-16);
+  --avatar-fallback-font-size: var(--primitive-font-size-14);
+  --avatar-fallback-line-height: var(--primitive-line-height-20);
+  --avatar-fallback-font-size-xl: var(--primitive-font-size-16);
+  --avatar-fallback-line-height-xl: var(--primitive-line-height-24);
+  --avatar-fallback-font-weight: var(--primitive-font-weight-regular);
+  --avatar-group-count-font-size: var(--primitive-font-size-14);
+  --avatar-group-count-line-height: var(--primitive-line-height-20);
+  --avatar-group-count-font-weight: var(--primitive-font-weight-regular);
+  /* ── Badge — component type tokens (private) ──
+     Four sizes; xs is the 10px stamp scale used for status and catalogue
+     corner pills, below the shared type scale's 12px floor. */
+  --badge-font-size-xs: var(--primitive-font-size-10);
+  --badge-line-height-xs: var(--primitive-line-height-16);
+  --badge-font-size-sm: var(--primitive-font-size-12);
+  --badge-line-height-sm: var(--primitive-line-height-16);
+  --badge-font-size-md: var(--primitive-font-size-14);
+  --badge-line-height-md: var(--primitive-line-height-20);
+  --badge-font-size-lg: var(--primitive-font-size-16);
+  --badge-line-height-lg: var(--primitive-line-height-24);
+  --badge-font-weight: var(--primitive-font-weight-semibold);
   --alert-info-text: var(--semantic-info);
   --alert-info-border: var(--semantic-info);
   --alert-error-text: var(--semantic-error);
   --alert-error-border: var(--semantic-error);
-  --slider-range: oklch(0.476 0.297 267.4 / 40%);
-  --sidebar: var(--primitive-mono-50);
-  --sidebar-foreground: oklch(0.07 0.012 165);
+  --slider-range: var(--primitive-blue-alpha-40);
+  --sidebar: var(--background-primary-surface);
+  --sidebar-foreground: var(--text-prominent-default);
   --sidebar-primary: var(--primary);
-  --sidebar-primary-foreground: var(--primitive-mono-50);
-  --sidebar-accent: oklch(0.96 0 0);
-  --sidebar-accent-foreground: oklch(0.12 0.015 160);
-  --sidebar-border: oklch(0.92 0 0);
+  --sidebar-primary-foreground: var(--text-on-brand-static);
+  --sidebar-accent: var(--primitive-mono-100);
+  --sidebar-accent-foreground: var(--text-prominent-default);
+  --sidebar-border: var(--border-default-default);
   --sidebar-ring: var(--ring);
 }
 
@@ -421,7 +1170,7 @@
   }
 
   body {
-    @apply bg-prominent text-on-prominent font-sans antialiased;
+    @apply bg-background-primary-canvas text-text-prominent-default font-sans antialiased;
   }
 }
 
@@ -446,6 +1195,12 @@
   100%  { transform: translateX(100%); opacity: 1; }
 }
 
+/* Skeleton — directional loading sweep (replaces the generic pulse) */
+@keyframes skeleton-sweep {
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(100%); }
+}
+
 /* Spinner — pill-style activity indicator */
 @keyframes spinner-fade {
   0% {
@@ -453,83 +1208,710 @@
   }
 
   100% {
-    opacity: 0.2;
+    opacity: 0.15;
+  }
+}
+
+/* ── GameLoadingBlock ────────────────────────────────────────────────
+   Brand-blue dotted splash backdrop. The dot colour is derived from the
+   --on-primary token (not a raw white) so it tracks the palette; the dot
+   grid is a background-image, which Tailwind utilities can't express
+   cleanly, so it lives here as a class. */
+.game-loader-backdrop {
+  background-color: var(--primary);
+  background-image: radial-gradient(
+    color-mix(in oklch, var(--on-primary) 16%, transparent) 1px,
+    transparent 1px
+  );
+  background-size: 14px 14px;
+}
+
+/* Exit reveal — the monogram hangs, snaps outward, and the app is revealed
+   behind it (X/Twitter-style). Suppressed under prefers-reduced-motion by
+   the component, which falls back to a plain fade. */
+@keyframes game-loader-zoom {
+  0% {
+    transform: scale(1);
+    animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1);
+  }
+
+  22% {
+    transform: scale(0.85);
+    animation-timing-function: cubic-bezier(0.7, 0, 0.85, 0.35);
+  }
+
+  100% {
+    transform: scale(22);
   }
 }
 
-/* Typography — Heading scale (Plus Jakarta Sans · Semibold 600 · LS 1.5px) */
-.heading-h1 {
+.game-loader-mark {
+  transform-origin: center;
+  will-change: transform;
+}
+
+.game-loader-mark-exit {
+  animation: game-loader-zoom 0.34s forwards;
+}
+
+/* Progress-bar shimmer — sweeps across the filled portion while a stage is
+   still loading, so a held bar still reads as "working". */
+@keyframes game-loader-sweep {
+  0% {
+    left: -60%;
+  }
+
+  100% {
+    left: 110%;
+  }
+}
+
+.game-loader-shimmer {
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in oklch, var(--primary) 35%, transparent),
+    transparent
+  );
+  animation: game-loader-sweep 1.4s ease-in-out infinite;
+}
+
+/* ─────────────────────────────────────────────────────────────────
+   Typography — Plus Jakarta Sans
+   Sentence-case headings in mixed weights (600–800) with tight tracking,
+   and a Regular-weight body. 8-point aligned; the top four heading sizes
+   scale fluidly on small screens via clamp().
+
+   Weight roles:
+     400 Regular    — body
+     500 Medium     — captions, dense UI
+     600 SemiBold   — subheads, emphasis
+     700 Bold       — headings
+     800 ExtraBold  — display
+   ───────────────────────────────────────────────────────────────── */
+
+/* Display & headings (600–800) — the top four scale fluidly. Both font-size
+   AND line-height clamp between each style's -mobile and -desktop tokens, so
+   they land on the 8-point grid at each end: e.g. display 56/64 (desktop) →
+   36/40 (mobile). Every number below is a semantic --type-* token (§ above),
+   never a raw literal — the vw-based midpoint is the interpolation formula
+   itself, not a "value," so it stays inline.
+
+   ONE CLASS PER TIER — sizes, line-heights and weights come from the
+   --type-* tokens, which carry both mobile and desktop values, so a tier
+   never changes name between breakpoints. h1–h6 are style names, not HTML
+   tags. Changing a tier's look is a one-line token edit here and updates
+   every product. */
+.display {
   font-family: var(--font-plus-jakarta-sans);
-  font-weight: 600;
-  font-size: 72px;
-  line-height: 72px;
-  letter-spacing: 1.5px;
-  text-transform: uppercase;
+  font-weight: var(--type-display-weight);
+  font-size: clamp(var(--type-display-size-mobile), 1.4rem + 4vw, var(--type-display-size-desktop));
+  line-height: clamp(var(--type-display-line-mobile), 1.48rem + 4.8vw, var(--type-display-line-desktop));
+  letter-spacing: var(--type-display-tracking);
 }
 
-.heading-h2 {
+.h1 {
   font-family: var(--font-plus-jakarta-sans);
-  font-weight: 600;
-  font-size: 64px;
-  line-height: 64px;
-  letter-spacing: 1.5px;
-  text-transform: uppercase;
+  font-weight: var(--type-h1-weight);
+  font-size: clamp(var(--type-h1-size-mobile), 1.6rem + 2vw, var(--type-h1-size-desktop));
+  line-height: clamp(var(--type-h1-line-mobile), 1.92rem + 2.4vw, var(--type-h1-line-desktop));
+  letter-spacing: var(--type-h1-tracking);
 }
 
-.heading-h3 {
+.h2 {
   font-family: var(--font-plus-jakarta-sans);
-  font-weight: 600;
-  font-size: 48px;
-  line-height: 48px;
-  letter-spacing: 1.5px;
-  text-transform: uppercase;
+  font-weight: var(--type-h2-weight);
+  font-size: clamp(var(--type-h2-size-mobile), 1.4rem + 1.2vw, var(--type-h2-size-desktop));
+  line-height: clamp(var(--type-h2-line-mobile), 1.7rem + 1.6vw, var(--type-h2-line-desktop));
+  letter-spacing: var(--type-h2-tracking);
 }
 
-.heading-h4 {
+.h3 {
   font-family: var(--font-plus-jakarta-sans);
-  font-weight: 600;
-  font-size: 40px;
-  line-height: 40px;
-  letter-spacing: 1.5px;
-  text-transform: uppercase;
+  font-weight: var(--type-h3-weight);
+  font-size: clamp(var(--type-h3-size-mobile), 1.3rem + 0.4vw, var(--type-h3-size-desktop));
+  line-height: clamp(var(--type-h3-line-mobile), 1.6rem + 0.8vw, var(--type-h3-line-desktop));
+  letter-spacing: var(--type-h3-tracking);
 }
 
-.heading-xs {
+.h4 {
   font-family: var(--font-plus-jakarta-sans);
-  font-weight: 600;
-  font-size: 24px;
-  line-height: 24px;
-  letter-spacing: 1.5px;
-  text-transform: uppercase;
+  font-weight: var(--type-h4-weight);
+  font-size: var(--type-h4-size);
+  line-height: var(--type-h4-line);
+  letter-spacing: var(--type-h4-tracking);
+}
+
+.h5 {
+  font-family: var(--font-plus-jakarta-sans);
+  font-weight: var(--type-h5-weight);
+  font-size: var(--type-h5-size);
+  line-height: var(--type-h5-line);
+  letter-spacing: var(--type-h5-tracking);
 }
 
-/* Typography — Body scale (Plus Jakarta Sans · Semibold 600) */
+.h6 {
+  font-family: var(--font-plus-jakarta-sans);
+  font-weight: var(--type-h6-weight);
+  font-size: var(--type-h6-size);
+  line-height: var(--type-h6-line);
+  letter-spacing: var(--type-h6-tracking);
+}
+
+/* Body (400–600) */
 .body-lg {
   font-family: var(--font-plus-jakarta-sans);
-  font-weight: 600;
-  font-size: 18px;
-  line-height: 28px;
+  font-weight: var(--type-body-lg-weight);
+  font-size: var(--type-body-lg-size);
+  line-height: var(--type-body-lg-line);
 }
 
 .body-md {
   font-family: var(--font-plus-jakarta-sans);
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 24px;
+  font-weight: var(--type-body-md-weight);
+  font-size: var(--type-body-md-size);
+  line-height: var(--type-body-md-line);
 }
 
 .body-sm {
   font-family: var(--font-plus-jakarta-sans);
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
+  font-weight: var(--type-body-sm-weight);
+  font-size: var(--type-body-sm-size);
+  line-height: var(--type-body-sm-line);
+}
+
+/* Label — identifying text on interactive/dense UI (form labels, item
+   titles, table headers, tooltips). Medium weight for scannability. */
+.label-text {
+  font-family: var(--font-plus-jakarta-sans);
+  font-weight: var(--type-label-weight);
+  font-size: var(--type-label-size);
+  line-height: var(--type-label-line);
+  letter-spacing: var(--type-label-tracking);
+}
+
+.caption {
+  font-family: var(--font-plus-jakarta-sans);
+  font-weight: var(--type-caption-weight);
+  font-size: var(--type-caption-size);
+  line-height: var(--type-caption-line);
+  letter-spacing: var(--type-caption-tracking);
+}
+
+/* ── Component type classes ───────────────────────────────────
+   Plain CSS, not Tailwind utilities: a generated `text-*` utility is
+   indistinguishable from a text-colour utility to tailwind-merge, which
+   strips one of them inside cn(). Named `type-*` so it is left alone.
+   Each class reads only that component's own private tokens. */
+.type-accordion-trigger {
+  font-size: var(--accordion-trigger-font-size);
+  line-height: var(--accordion-trigger-line-height);
+  font-weight: var(--accordion-trigger-font-weight);
+}
+
+.type-accordion-content {
+  font-size: var(--accordion-content-font-size);
+  line-height: var(--accordion-content-line-height);
+  font-weight: var(--accordion-content-font-weight);
+}
+
+.type-badge-xs {
+  font-size: var(--badge-font-size-xs);
+  line-height: var(--badge-line-height-xs);
+  font-weight: var(--badge-font-weight);
+}
+
+.type-badge-sm {
+  font-size: var(--badge-font-size-sm);
+  line-height: var(--badge-line-height-sm);
+  font-weight: var(--badge-font-weight);
+}
+
+.type-badge-md {
+  font-size: var(--badge-font-size-md);
+  line-height: var(--badge-line-height-md);
+  font-weight: var(--badge-font-weight);
+}
+
+.type-badge-lg {
+  font-size: var(--badge-font-size-lg);
+  line-height: var(--badge-line-height-lg);
+  font-weight: var(--badge-font-weight);
+}
+
+.type-avatar-fallback {
+  font-size: var(--avatar-fallback-font-size);
+  line-height: var(--avatar-fallback-line-height);
+  font-weight: var(--avatar-fallback-font-weight);
+}
+
+/* Sizes come off the Avatar root's data-size, so the fallback follows the
+   circle it sits in. sm and xl differ; default and lg share the base. */
+[data-slot="avatar"][data-size="sm"] .type-avatar-fallback {
+  font-size: var(--avatar-fallback-font-size-sm);
+  line-height: var(--avatar-fallback-line-height-sm);
+}
+
+[data-slot="avatar"][data-size="xl"] .type-avatar-fallback {
+  font-size: var(--avatar-fallback-font-size-xl);
+  line-height: var(--avatar-fallback-line-height-xl);
+}
+
+.type-avatar-group-count {
+  font-size: var(--avatar-group-count-font-size);
+  line-height: var(--avatar-group-count-line-height);
+  font-weight: var(--avatar-group-count-font-weight);
+}
+
+.type-alert-dialog-title {
+  font-size: var(--alert-dialog-title-font-size);
+  line-height: var(--alert-dialog-title-line-height);
+  font-weight: var(--alert-dialog-title-font-weight);
+}
+
+.type-alert-dialog-description {
+  font-size: var(--alert-dialog-description-font-size);
+  line-height: var(--alert-dialog-description-line-height);
+  font-weight: var(--alert-dialog-description-font-weight);
+}
+
+.type-dialog-title {
+  font-size: var(--dialog-title-font-size);
+  line-height: var(--dialog-title-line-height);
+  font-weight: var(--dialog-title-font-weight);
+}
+
+.type-dialog-description {
+  font-size: var(--dialog-description-font-size);
+  line-height: var(--dialog-description-line-height);
+  font-weight: var(--dialog-description-font-weight);
+}
+
+.type-drawer-title {
+  font-size: var(--drawer-title-font-size);
+  line-height: var(--drawer-title-line-height);
+  font-weight: var(--drawer-title-font-weight);
 }
 
-.body-xs {
+.type-drawer-description {
+  font-size: var(--drawer-description-font-size);
+  line-height: var(--drawer-description-line-height);
+  font-weight: var(--drawer-description-font-weight);
+}
+
+.type-empty-title {
+  font-size: var(--empty-title-font-size);
+  line-height: var(--empty-title-line-height);
+  font-weight: var(--empty-title-font-weight);
+}
+
+.type-empty-description {
+  font-size: var(--empty-description-font-size);
+  line-height: var(--empty-description-line-height);
+  font-weight: var(--empty-description-font-weight);
+}
+
+.type-field-legend {
+  font-size: var(--field-legend-font-size);
+  line-height: var(--field-legend-line-height);
+  font-weight: var(--field-legend-font-weight);
+}
+
+.type-field-legend-label {
+  font-size: var(--field-legend-label-font-size);
+  line-height: var(--field-legend-label-line-height);
+  font-weight: var(--field-legend-label-font-weight);
+}
+
+.type-label {
+  font-size: var(--label-font-size);
+  line-height: var(--label-line-height);
+  font-weight: var(--label-font-weight);
+}
+
+.type-link-lg {
+  font-size: var(--link-font-size-lg);
+  line-height: var(--link-line-height-lg);
+  font-weight: var(--link-font-weight);
+}
+
+.type-link-md {
+  font-size: var(--link-font-size-md);
+  line-height: var(--link-line-height-md);
+  font-weight: var(--link-font-weight);
+}
+
+.type-link-sm {
+  font-size: var(--link-font-size-sm);
+  line-height: var(--link-line-height-sm);
+  font-weight: var(--link-font-weight);
+}
+
+.type-numpad {
+  font-size: var(--numpad-font-size);
+  line-height: var(--numpad-line-height);
+  font-weight: var(--numpad-font-weight);
+}
+
+.type-pagination {
+  font-size: var(--pagination-font-size);
+  line-height: var(--pagination-line-height);
+  font-weight: var(--pagination-font-weight);
+}
+
+.type-popover-title {
+  font-size: var(--popover-title-font-size);
+  line-height: var(--popover-title-line-height);
+  font-weight: var(--popover-title-font-weight);
+}
+
+.type-popover-description {
+  font-size: var(--popover-description-font-size);
+  line-height: var(--popover-description-line-height);
+  font-weight: var(--popover-description-font-weight);
+}
+
+.type-field-label-sm {
+  font-size: var(--field-label-font-size-sm);
+  line-height: var(--field-label-line-height-sm);
+  font-weight: var(--field-label-font-weight);
+}
+
+.type-field-label-md {
+  font-size: var(--field-label-font-size-md);
+  line-height: var(--field-label-line-height-md);
+  font-weight: var(--field-label-font-weight);
+}
+
+.type-field-label-lg {
+  font-size: var(--field-label-font-size-lg);
+  line-height: var(--field-label-line-height-lg);
+  font-weight: var(--field-label-font-weight);
+}
+
+.type-field-description {
+  font-size: var(--field-description-font-size);
+  line-height: var(--field-description-line-height);
+  font-weight: var(--field-description-font-weight);
+}
+
+.type-input-sm {
+  font-size: var(--input-font-size-sm);
+  line-height: var(--input-line-height-sm);
+  font-weight: var(--input-font-weight);
+}
+
+.type-input-md {
+  font-size: var(--input-font-size-md);
+  line-height: var(--input-line-height-md);
+  font-weight: var(--input-font-weight);
+}
+
+.type-input-lg {
+  font-size: var(--input-font-size-lg);
+  line-height: var(--input-line-height-lg);
+  font-weight: var(--input-font-weight);
+}
+
+.type-input-otp {
+  font-size: var(--input-otp-font-size);
+  line-height: var(--input-otp-line-height);
+  font-weight: var(--input-otp-font-weight);
+}
+
+.type-native-select-sm {
+  font-size: var(--native-select-font-size-sm);
+  line-height: var(--native-select-line-height-sm);
+  font-weight: var(--native-select-font-weight);
+}
+
+.type-native-select-md {
+  font-size: var(--native-select-font-size-md);
+  line-height: var(--native-select-line-height-md);
+  font-weight: var(--native-select-font-weight);
+}
+
+.type-native-select-lg {
+  font-size: var(--native-select-font-size-lg);
+  line-height: var(--native-select-line-height-lg);
+  font-weight: var(--native-select-font-weight);
+}
+
+.type-select-sm {
+  font-size: var(--select-font-size-sm);
+  line-height: var(--select-line-height-sm);
+  font-weight: var(--select-font-weight);
+}
+
+.type-select-md {
+  font-size: var(--select-font-size-md);
+  line-height: var(--select-line-height-md);
+  font-weight: var(--select-font-weight);
+}
+
+.type-select-lg {
+  font-size: var(--select-font-size-lg);
+  line-height: var(--select-line-height-lg);
+  font-weight: var(--select-font-weight);
+}
+
+.type-textarea {
+  font-size: var(--textarea-font-size);
+  line-height: var(--textarea-line-height);
+  font-weight: var(--textarea-font-weight);
+}
+
+.type-sheet-title {
+  font-size: var(--sheet-title-font-size);
+  line-height: var(--sheet-title-line-height);
+  font-weight: var(--sheet-title-font-weight);
+}
+
+.type-sheet-description {
+  font-size: var(--sheet-description-font-size);
+  line-height: var(--sheet-description-line-height);
+  font-weight: var(--sheet-description-font-weight);
+}
+
+.type-table {
+  font-size: var(--table-font-size);
+  line-height: var(--table-line-height);
+  font-weight: var(--table-font-weight);
+}
+
+.type-table-head {
+  font-size: var(--table-font-size);
+  line-height: var(--table-line-height);
+  font-weight: var(--table-head-font-weight);
+}
+
+.type-bottom-navigation-label {
+  font-size: var(--bottom-navigation-label-font-size);
+  line-height: var(--bottom-navigation-label-line-height);
+  font-weight: var(--bottom-navigation-label-font-weight);
+}
+
+/* Bottom Navigation — the arriving icon pops on an overshoot spring; the
+   label never moves. */
+[data-slot="bottom-navigation-item"] svg {
+  transition: transform var(--motion-pop) var(--primitive-ease-overshoot);
+}
+
+[data-slot="bottom-navigation-item"][data-active] svg {
+  transform: translateY(-1px) scale(1.1);
+}
+
+.type-sidebar-menu {
+  font-size: var(--sidebar-menu-font-size);
+  line-height: var(--sidebar-menu-line-height);
+  font-weight: var(--sidebar-menu-font-weight);
+}
+
+.type-sidebar-menu-sm {
+  font-size: var(--sidebar-menu-font-size-sm);
+  line-height: var(--sidebar-menu-line-height-sm);
+  font-weight: var(--sidebar-menu-font-weight);
+}
+
+.type-sidebar-label {
+  font-size: var(--sidebar-label-font-size);
+  line-height: var(--sidebar-label-line-height);
+  font-weight: var(--sidebar-label-font-weight);
+}
+
+/* Sidebar — active menu rows go semibold. */
+[data-sidebar="menu-button"][data-active="true"],
+[data-sidebar="menu-sub-button"][data-active="true"] {
+  font-weight: var(--sidebar-menu-active-font-weight);
+}
+
+/* Tabs — the list's data-size drives the trigger type; active is semibold. */
+[data-slot="tabs-list"][data-size="sm"] [data-slot="tabs-trigger"] {
+  font-size: var(--tabs-trigger-font-size-sm);
+  line-height: var(--tabs-trigger-line-height-sm);
+  font-weight: var(--tabs-trigger-font-weight);
+}
+
+[data-slot="tabs-list"][data-size="md"] [data-slot="tabs-trigger"] {
+  font-size: var(--tabs-trigger-font-size-md);
+  line-height: var(--tabs-trigger-line-height-md);
+  font-weight: var(--tabs-trigger-font-weight);
+}
+
+[data-slot="tabs-list"][data-size="lg"] [data-slot="tabs-trigger"] {
+  font-size: var(--tabs-trigger-font-size-lg);
+  line-height: var(--tabs-trigger-line-height-lg);
+  font-weight: var(--tabs-trigger-font-weight);
+}
+
+[data-slot="tabs-list"] [data-slot="tabs-trigger"][data-state="active"] {
+  font-weight: var(--tabs-trigger-active-font-weight);
+}
+
+.type-toggle {
+  font-size: var(--toggle-font-size);
+  line-height: var(--toggle-line-height);
+  font-weight: var(--toggle-font-weight);
+}
+
+.type-tooltip {
+  font-size: var(--tooltip-font-size);
+  line-height: var(--tooltip-line-height);
+  font-weight: var(--tooltip-font-weight);
+}
+
+.type-item-title {
+  font-size: var(--item-title-font-size);
+  line-height: var(--item-title-line-height);
+  font-weight: var(--item-title-font-weight);
+}
+
+.type-item-description {
+  font-size: var(--item-description-font-size);
+  line-height: var(--item-description-line-height);
+  font-weight: var(--item-description-font-weight);
+}
+
+
+/* Input Group — the group carries the input ladder so addons, prefixes, and
+   kbd hints inherit it; the input and buttons inside set their own. */
+[data-slot="input-group"][data-size="sm"] {
+  font-size: var(--input-font-size-sm);
+  line-height: var(--input-line-height-sm);
+  font-weight: var(--input-font-weight);
+}
+
+[data-slot="input-group"][data-size="md"] {
+  font-size: var(--input-font-size-md);
+  line-height: var(--input-line-height-md);
+  font-weight: var(--input-font-weight);
+}
+
+[data-slot="input-group"][data-size="lg"] {
+  font-size: var(--input-font-size-lg);
+  line-height: var(--input-line-height-lg);
+  font-weight: var(--input-font-weight);
+}
+
+.type-menu-item {
+  font-size: var(--menu-item-font-size);
+  line-height: var(--menu-item-line-height);
+  font-weight: var(--menu-item-font-weight);
+}
+.type-menu-heading {
+  font-size: var(--menu-heading-font-size);
+  line-height: var(--menu-heading-line-height);
+  font-weight: var(--menu-heading-font-weight);
+}
+
+.type-menu-trigger {
+  font-size: var(--menu-trigger-font-size);
+  line-height: var(--menu-trigger-line-height);
+  font-weight: var(--menu-trigger-font-weight);
+}
+
+.type-menu-shortcut {
+  font-size: var(--menu-shortcut-font-size);
+  line-height: var(--menu-shortcut-line-height);
+  font-weight: var(--menu-shortcut-font-weight);
+}
+.type-chip-md {
+  font-size: var(--chip-font-size-md);
+  line-height: var(--chip-line-height-md);
+  font-weight: var(--chip-font-weight);
+}
+.type-chip-sm {
+  font-size: var(--chip-font-size-sm);
+  line-height: var(--chip-line-height-sm);
+  font-weight: var(--chip-font-weight);
+}
+.type-calendar-caption {
+  font-size: var(--calendar-caption-font-size);
+  line-height: var(--calendar-caption-line-height);
+  font-weight: var(--calendar-caption-font-weight);
+}
+.type-calendar-weekday {
+  font-size: var(--calendar-weekday-font-size);
+  line-height: var(--calendar-weekday-line-height);
+  font-weight: var(--calendar-weekday-font-weight);
+}
+.type-calendar-day {
+  font-size: var(--calendar-day-font-size);
+  line-height: var(--calendar-day-line-height);
+  font-weight: var(--calendar-day-font-weight);
+}
+.type-button-lg {
+  font-size: var(--button-font-size-lg);
+  line-height: var(--button-line-height-lg);
+  font-weight: var(--button-font-weight);
+}
+.type-button-md {
+  font-size: var(--button-font-size-md);
+  line-height: var(--button-line-height-md);
+  font-weight: var(--button-font-weight);
+}
+.type-button-sm {
+  font-size: var(--button-font-size-sm);
+  line-height: var(--button-line-height-sm);
+  font-weight: var(--button-font-weight);
+}
+.type-breadcrumb {
+  font-size: var(--breadcrumb-font-size);
+  line-height: var(--breadcrumb-line-height);
+  font-weight: var(--breadcrumb-font-weight);
+}
+.type-breadcrumb-page {
+  font-weight: var(--breadcrumb-page-font-weight);
+}
+.type-banner-title {
+  font-size: var(--banner-title-font-size);
+  line-height: var(--banner-title-line-height);
+  font-weight: var(--banner-title-font-weight);
+  letter-spacing: var(--primitive-tracking-tight);
+}
+.type-banner-description {
+  font-size: var(--banner-description-font-size);
+  line-height: var(--banner-description-line-height);
+  font-weight: var(--banner-description-font-weight);
+}
+.type-banner-action {
+  font-size: var(--banner-action-font-size);
+  line-height: var(--banner-action-line-height);
+  font-weight: var(--banner-action-font-weight);
+}
+.type-section-message-title {
+  font-size: var(--section-message-title-font-size);
+  line-height: var(--section-message-title-line-height);
+  font-weight: var(--section-message-title-font-weight);
+}
+
+.type-section-message-description {
+  font-size: var(--section-message-description-font-size);
+  line-height: var(--section-message-description-line-height);
+  font-weight: var(--section-message-description-font-weight);
+}
+.type-section-message-title-sm {
+  font-size: var(--section-message-title-font-size-sm);
+  line-height: var(--section-message-title-line-height-sm);
+  font-weight: var(--section-message-title-font-weight);
+}
+.type-section-message-description-sm {
+  font-size: var(--section-message-description-font-size-sm);
+  line-height: var(--section-message-description-line-height-sm);
+  font-weight: var(--section-message-description-font-weight);
+}
+
+.overline {
   font-family: var(--font-plus-jakarta-sans);
-  font-weight: 600;
-  font-size: 8px;
-  line-height: 12px;
+  font-weight: var(--type-overline-weight);
+  font-size: var(--type-overline-size);
+  line-height: var(--type-overline-line);
+  letter-spacing: var(--type-overline-tracking);
+  text-transform: uppercase;
+  /* `overline` is also a built-in Tailwind text-decoration utility, which
+     would draw a literal line above the text. Explicitly clear it — this is
+     a type token (eyebrow/tag label), not a decoration. */
+  text-decoration: none;
 }
 
 /* ── Result block — icon motion ─────────────────────────────── */