@d4gger/design-system 2.7.0 → 3.0.1

package/dist/tokens.css

@@ -1,20 +1,20 @@
 :root, [data-dsx-theme="dark"] {
-  --dsx-color-accent-1: #12101f;
-  --dsx-color-accent-2: #1b1530;
-  --dsx-color-accent-3: #291f47;
-  --dsx-color-accent-4: #362a5e;
-  --dsx-color-accent-5: #443577;
-  --dsx-color-accent-6: #533f92;
-  --dsx-color-accent-7: #654eb0;
-  --dsx-color-accent-8: #7854c9;
-  --dsx-color-accent-9: #8b5cf6;
-  --dsx-color-accent-10: #a78bfa;
-  --dsx-color-accent-11: #c4aef2;
-  --dsx-color-accent-12: #ede9fe;
-  --dsx-color-accent-contrast: #14101f;
-  --dsx-color-accent-surface: rgba(237, 233, 254, 0.18);
-  --dsx-color-accent-indicator: #c4aef2;
-  --dsx-color-accent-track: color-mix(in srgb, #a78bfa 35%, #8b5cf6);
+  --dsx-color-accent-1: #0f012b;
+  --dsx-color-accent-2: #1b0043;
+  --dsx-color-accent-3: #28005d;
+  --dsx-color-accent-4: #3c0084;
+  --dsx-color-accent-5: #4e00a9;
+  --dsx-color-accent-6: #5f09c8;
+  --dsx-color-accent-7: #6d25de;
+  --dsx-color-accent-8: #7b3fee;
+  --dsx-color-accent-9: #8553f6;
+  --dsx-color-accent-10: #6f20e4;
+  --dsx-color-accent-11: #bfb1ff;
+  --dsx-color-accent-12: #ded8ff;
+  --dsx-color-accent-contrast: #ffffff;
+  --dsx-color-accent-surface: rgba(40, 0, 93, 0.2);
+  --dsx-color-accent-indicator: #bfb1ff;
+  --dsx-color-accent-track: #8553f6;
   --dsx-color-gray-1: #0c0d12;
   --dsx-color-gray-2: #131419;
   --dsx-color-gray-3: #1a1c22;
@@ -27,10 +27,10 @@
   --dsx-color-gray-10: #8b90a3;
   --dsx-color-gray-11: #aeb2bf;
   --dsx-color-gray-12: #eef0f4;
-  --dsx-color-primary: #8b5cf6;
-  --dsx-color-primary-container: #a78bfa;
-  --dsx-color-on-primary: #000000;
-  --dsx-color-on-primary-container: #3b1774;
+  --dsx-color-primary: #8553f6;
+  --dsx-color-primary-container: #28005d;
+  --dsx-color-on-primary: #ffffff;
+  --dsx-color-on-primary-container: #bfb1ff;
   --dsx-color-secondary: #9a92a8;
   --dsx-color-secondary-container: #d8d3e0;
   --dsx-color-on-secondary: #0c0d12;
@@ -50,50 +50,233 @@
   --dsx-color-outline: #747a94;
   --dsx-color-outline-variant: #40434f;
   --dsx-color-shadow: #06070a;
-  --dsx-color-success: #4fc4bb;
-  --dsx-color-success-container: #7fe0d6;
+  --dsx-color-success: #2fbf6d;
+  --dsx-color-success-container: #002a12;
   --dsx-color-on-success: #0c0d12;
-  --dsx-color-on-success-container: #123f3a;
-  --dsx-color-error: #f04265;
-  --dsx-color-error-container: #772233;
-  --dsx-color-on-error: #0c0d12;
-  --dsx-color-on-error-container: #f4d7dd;
-  --dsx-color-warning: #ec3cab;
-  --dsx-color-warning-container: #6f2052;
+  --dsx-color-on-success-container: #68d98f;
+  --dsx-color-error: #dc1e40;
+  --dsx-color-error-container: #46000c;
+  --dsx-color-on-error: #ffffff;
+  --dsx-color-on-error-container: #ff9f9f;
+  --dsx-color-warning: #f5a623;
+  --dsx-color-warning-container: #311d00;
   --dsx-color-on-warning: #0c0d12;
-  --dsx-color-on-warning-container: #f4d7e9;
+  --dsx-color-on-warning-container: #f4ae4a;
   --dsx-color-info: #5aa8e0;
-  --dsx-color-info-container: #2f5f8f;
-  --dsx-color-on-info: #081018;
-  --dsx-color-on-info-container: #cfe8fb;
+  --dsx-color-info-container: #00243b;
+  --dsx-color-on-info: #0c0d12;
+  --dsx-color-on-info-container: #82c6f8;
   --dsx-color-disabled-text: #8b90a3;
   --dsx-color-disabled-border: #292c35;
   --dsx-color-disabled-surface: #333640;
-  --dsx-color-high-contrast: #ede9fe;
+  --dsx-color-high-contrast: #ded8ff;
   --dsx-color-on-high-contrast: #0c0d12;
-  --dsx-color-high-contrast-container: color-mix(in srgb, #ede9fe 12%, transparent);
-  --dsx-color-high-contrast-border: color-mix(in srgb, #ede9fe 56%, transparent);
+  --dsx-color-high-contrast-container: color-mix(in srgb, #ded8ff 12%, transparent);
+  --dsx-color-high-contrast-border: color-mix(in srgb, #ded8ff 56%, transparent);
   --dsx-color-text-inverse: #0c0d12;
-  --dsx-color-inverse-background: #ede9fe;
+  --dsx-color-inverse-background: #ded8ff;
   --dsx-color-on-inverse-background: #0c0d12;
-  --dsx-color-inverse-surface: color-mix(in srgb, #ede9fe 12%, transparent);
+  --dsx-color-inverse-surface: color-mix(in srgb, #ded8ff 12%, transparent);
   --dsx-color-on-inverse-surface: #0c0d12;
+  --dsx-color-accent-rift-1: #0f012b;
+  --dsx-color-accent-rift-2: #1b0043;
+  --dsx-color-accent-rift-3: #28005d;
+  --dsx-color-accent-rift-4: #3c0084;
+  --dsx-color-accent-rift-5: #4e00a9;
+  --dsx-color-accent-rift-6: #5f09c8;
+  --dsx-color-accent-rift-7: #6d25de;
+  --dsx-color-accent-rift-8: #7b3fee;
+  --dsx-color-accent-rift-9: #8553f6;
+  --dsx-color-accent-rift-10: #6f20e4;
+  --dsx-color-accent-rift-11: #bfb1ff;
+  --dsx-color-accent-rift-12: #ded8ff;
+  --dsx-color-accent-warp-1: #000e18;
+  --dsx-color-accent-warp-2: #001926;
+  --dsx-color-accent-warp-3: #002537;
+  --dsx-color-accent-warp-4: #003851;
+  --dsx-color-accent-warp-5: #004968;
+  --dsx-color-accent-warp-6: #005a7e;
+  --dsx-color-accent-warp-7: #006993;
+  --dsx-color-accent-warp-8: #007aaa;
+  --dsx-color-accent-warp-9: #197dab;
+  --dsx-color-accent-warp-10: #006289;
+  --dsx-color-accent-warp-11: #7cc8f4;
+  --dsx-color-accent-warp-12: #bae5ff;
+  --dsx-color-accent-ray-1: #1a001c;
+  --dsx-color-accent-ray-2: #29002c;
+  --dsx-color-accent-ray-3: #3b003f;
+  --dsx-color-accent-ray-4: #56005c;
+  --dsx-color-accent-ray-5: #6e0076;
+  --dsx-color-accent-ray-6: #86008e;
+  --dsx-color-accent-ray-7: #9c00a6;
+  --dsx-color-accent-ray-8: #b300bf;
+  --dsx-color-accent-ray-9: #c32cce;
+  --dsx-color-accent-ray-10: #a200ac;
+  --dsx-color-accent-ray-11: #f88fff;
+  --dsx-color-accent-ray-12: #fdcaff;
+  --dsx-color-accent-astral-1: #1e0010;
+  --dsx-color-accent-astral-2: #2e001b;
+  --dsx-color-accent-astral-3: #420029;
+  --dsx-color-accent-astral-4: #60003d;
+  --dsx-color-accent-astral-5: #7b0050;
+  --dsx-color-accent-astral-6: #940061;
+  --dsx-color-accent-astral-7: #ac0072;
+  --dsx-color-accent-astral-8: #c60083;
+  --dsx-color-accent-astral-9: #d82292;
+  --dsx-color-accent-astral-10: #b20075;
+  --dsx-color-accent-astral-11: #ff98cb;
+  --dsx-color-accent-astral-12: #ffcee4;
+  --dsx-color-accent-spark-1: #080f00;
+  --dsx-color-accent-spark-2: #101a00;
+  --dsx-color-accent-spark-3: #1a2700;
+  --dsx-color-accent-spark-4: #293a00;
+  --dsx-color-accent-spark-5: #364c00;
+  --dsx-color-accent-spark-6: #435d00;
+  --dsx-color-accent-spark-7: #4f6d00;
+  --dsx-color-accent-spark-8: #5c7e00;
+  --dsx-color-accent-spark-9: #afe82c;
+  --dsx-color-accent-spark-10: #95c900;
+  --dsx-color-accent-spark-11: #a0d238;
+  --dsx-color-accent-spark-12: #c6ef81;
+  --dsx-color-success-1: #001105;
+  --dsx-color-success-2: #001c0a;
+  --dsx-color-success-3: #002a12;
+  --dsx-color-success-4: #003f1e;
+  --dsx-color-success-5: #005228;
+  --dsx-color-success-6: #006432;
+  --dsx-color-success-7: #00753c;
+  --dsx-color-success-8: #008746;
+  --dsx-color-success-9: #2fbf6d;
+  --dsx-color-success-10: #00a155;
+  --dsx-color-success-11: #68d98f;
+  --dsx-color-success-12: #9ff5b9;
+  --dsx-color-error-1: #200003;
+  --dsx-color-error-2: #320006;
+  --dsx-color-error-3: #46000c;
+  --dsx-color-error-4: #660016;
+  --dsx-color-error-5: #82001e;
+  --dsx-color-error-6: #9d0027;
+  --dsx-color-error-7: #b6002e;
+  --dsx-color-error-8: #d20037;
+  --dsx-color-error-9: #dc1e40;
+  --dsx-color-error-10: #b3002e;
+  --dsx-color-error-11: #ff9f9f;
+  --dsx-color-error-12: #ffd1d0;
+  --dsx-color-warning-1: #150a00;
+  --dsx-color-warning-2: #211200;
+  --dsx-color-warning-3: #311d00;
+  --dsx-color-warning-4: #482d00;
+  --dsx-color-warning-5: #5d3b00;
+  --dsx-color-warning-6: #714900;
+  --dsx-color-warning-7: #845600;
+  --dsx-color-warning-8: #996400;
+  --dsx-color-warning-9: #f5a623;
+  --dsx-color-warning-10: #d38b00;
+  --dsx-color-warning-11: #f4ae4a;
+  --dsx-color-warning-12: #ffd6a3;
+  --dsx-color-info-1: #000e1a;
+  --dsx-color-info-2: #001829;
+  --dsx-color-info-3: #00243b;
+  --dsx-color-info-4: #003757;
+  --dsx-color-info-5: #00486f;
+  --dsx-color-info-6: #005887;
+  --dsx-color-info-7: #00679d;
+  --dsx-color-info-8: #1a77b0;
+  --dsx-color-info-9: #5aa8e0;
+  --dsx-color-info-10: #2e8cc9;
+  --dsx-color-info-11: #82c6f8;
+  --dsx-color-info-12: #c0e3ff;
+  --dsx-color-accent-indicator: #bfb1ff;
+  --dsx-color-accent-track: #8553f6;
+  --dsx-color-accent-contrast: #ffffff;
+  --dsx-color-accent-surface: rgba(40, 0, 93, 0.2);
+  --dsx-color-border-subtle: #333640;
+  --dsx-color-border-strong: #565b70;
   --dsx-effect-shadow-1: 0 1px 2px rgba(8, 9, 12, 0.24);
   --dsx-effect-shadow-2: 0 2px 8px rgba(8, 9, 12, 0.32);
   --dsx-effect-shadow-3: 0 4px 16px rgba(8, 9, 12, 0.40);
   --dsx-effect-shadow-4: 0 8px 24px rgba(8, 9, 12, 0.48);
   --dsx-effect-shadow-5: 0 16px 40px rgba(8, 9, 12, 0.56);
   --dsx-effect-shadow-6: 0 24px 64px rgba(8, 9, 12, 0.64);
-  --dsx-effect-ring-focus: rgba(139, 92, 246, 0.64);
-  --dsx-effect-shadow-accent: rgba(139, 92, 246, 0.28);
-  --dsx-effect-shadow-accent-strong: rgba(139, 92, 246, 0.40);
+  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-rift-9) 64%, transparent);
+  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-rift-9) 28%, transparent);
+  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-rift-9) 40%, transparent);
   --dsx-effect-shadow-card: rgba(8, 9, 12, 0.40);
   --dsx-effect-shadow-card-strong: rgba(8, 9, 12, 0.56);
   --dsx-effect-panel-glass-background: rgba(41, 44, 53, 0.20);
-  --dsx-effect-hover-primary: rgba(139, 92, 246, 0.08);
-  --dsx-effect-pressed-primary: rgba(139, 92, 246, 0.16);
-  --dsx-effect-hover-secondary: rgba(139, 92, 246, 0.03);
-  --dsx-effect-hover-ghost: rgba(139, 92, 246, 0.06);
+  --dsx-effect-panel-glass-rim-highlight: rgba(255, 255, 255, 0.16);
+  --dsx-effect-panel-glass-rim: rgba(255, 255, 255, 0.06);
+  --dsx-effect-panel-glass-border: rgba(255, 255, 255, 0.14);
+  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 8%, transparent);
+  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 16%, transparent);
+  --dsx-effect-hover-secondary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 3%, transparent);
+  --dsx-effect-hover-ghost: color-mix(in srgb, var(--dsx-color-accent-rift-9) 6%, transparent);
+  --dsx-sheet-min-height: 80vh;
+  --dsx-sheet-width: 380px;
+  --dsx-sheet-width-sm: 320px;
+  --dsx-sheet-width-lg: 480px;
+  --dsx-chart-min-height: 240px;
+  --dsx-data-table-empty-height: 192px;
+  --dsx-sidebar-width: 272px;
+  --dsx-sidebar-width-collapsed: 72px;
+  --dsx-calendar-width: 320px;
+  --dsx-combobox-content-width: 320px;
+  --dsx-combobox-list-max-height: 300px;
+  --dsx-dialog-content-width: 560px;
+  --dsx-dialog-content-width-lg: 720px;
+  --dsx-drawer-min-height: 30vh;
+  --dsx-drawer-min-height-sm: 24vh;
+  --dsx-drawer-min-height-lg: 50vh;
+  --dsx-drawer-min-height-full: 100vh;
+  --dsx-rich-text-editor-min-height: 220px;
+  --dsx-empty-state-max-width: 600px;
+  --dsx-empty-state-min-height: 400px;
+  --dsx-input-otp-slot-width: 36px;
+  --dsx-input-otp-slot-height: 44px;
+  --dsx-input-otp-separator-width: 12px;
+  --dsx-kbd-font-size-sm: 11px;
+  --dsx-kbd-min-width: 1.75em;
+  --dsx-kbd-padding-block-sm: 2px;
+  --dsx-kbd-padding-inline-sm: 5px;
+  --dsx-kbd-padding-block-md: 3px;
+  --dsx-kbd-padding-inline-md: 7px;
+  --dsx-navigation-menu-indicator-size: 10px;
+  --dsx-notification-center-badge-font-size: 10px;
+  --dsx-notification-center-panel-width: 320px;
+  --dsx-notification-center-list-max-height: 400px;
+  --dsx-notification-center-item-dot-offset: 6px;
+  --dsx-resizable-grip-radius: 2px;
+  --dsx-slider-min-width: 160px;
+  --dsx-slider-axis-length: 160px;
+  --dsx-switch-width: 44px;
+  --dsx-switch-height: 24px;
+  --dsx-switch-width-sm: 36px;
+  --dsx-switch-height-sm: 20px;
+  --dsx-switch-thumb-size: 20px;
+  --dsx-switch-thumb-size-sm: 16px;
+  --dsx-switch-thumb-translate: 20px;
+  --dsx-switch-thumb-translate-sm: 16px;
+  --dsx-textarea-min-height-base: 80px;
+  --dsx-tag-font-size-sm: 11px;
+  --dsx-toast-viewport-width: 390px;
+  --dsx-tooltip-max-width: 200px;
+  --dsx-size-dialog-sm-width: 400px;
+  --dsx-size-menu-min-width: 180px;
+  --dsx-size-popover-min-width: 200px;
+  --dsx-size-popover-max-width: 380px;
+  --dsx-size-scroll-thumb-size: 6px;
+  --dsx-size-color-picker-width: 320px;
+  --dsx-size-field-label-max: 160px;
+  --dsx-size-field-label-min: 80px;
+  --dsx-size-xs: calc(16px * var(--dsx-density-scale, 1));
+  --dsx-size-sm: calc(20px * var(--dsx-density-scale, 1));
+  --dsx-size-md: calc(24px * var(--dsx-density-scale, 1));
+  --dsx-size-lg: calc(32px * var(--dsx-density-scale, 1));
+  --dsx-size-xl: calc(40px * var(--dsx-density-scale, 1));
+  --dsx-size-2xl: calc(48px * var(--dsx-density-scale, 1));
+  --dsx-size-3xl: calc(56px * var(--dsx-density-scale, 1));
+  --dsx-size-4xl: calc(64px * var(--dsx-density-scale, 1));
+  --dsx-container-max-width: 1280px;
   --dsx-motion-duration-fast: 150ms;
   --dsx-motion-duration-normal: 250ms;
   --dsx-motion-duration-slow: 350ms;
@@ -133,14 +316,6 @@
   --dsx-space-3xl: calc(64px * var(--dsx-density-scale, 1));
   --dsx-space-margin: calc(24px * var(--dsx-density-scale, 1));
   --dsx-space-gutter: calc(24px * var(--dsx-density-scale, 1));
-  --dsx-size-xs: calc(16px * var(--dsx-density-scale, 1));
-  --dsx-size-sm: calc(20px * var(--dsx-density-scale, 1));
-  --dsx-size-md: calc(24px * var(--dsx-density-scale, 1));
-  --dsx-size-lg: calc(32px * var(--dsx-density-scale, 1));
-  --dsx-size-xl: calc(40px * var(--dsx-density-scale, 1));
-  --dsx-size-2xl: calc(48px * var(--dsx-density-scale, 1));
-  --dsx-size-3xl: calc(56px * var(--dsx-density-scale, 1));
-  --dsx-size-4xl: calc(64px * var(--dsx-density-scale, 1));
   --dsx-border-width-none: 0px;
   --dsx-border-width-xs: 0.5px;
   --dsx-border-width-sm: 1px;
@@ -154,76 +329,94 @@
   --dsx-radius-xl: 16px;
   --dsx-radius-2xl: 24px;
   --dsx-radius-full: 9999px;
-  --dsx-typography-display-large-font-family: Fraunces, Merriweather, Manrope, Georgia, serif;
+  --dsx-typography-display-large-font-family: Science Gothic, Arial Narrow, ui-sans-serif, system-ui, sans-serif;
   --dsx-typography-display-large-font-size: 64px;
-  --dsx-typography-display-large-font-weight: 600;
+  --dsx-typography-display-large-font-weight: 700;
   --dsx-typography-display-large-line-height: 1.1;
   --dsx-typography-display-large-letter-spacing: -0.02em;
+  --dsx-typography-display-large-font-variation-settings: "wdth" 115, "CTRS" 30, "slnt" 0;
   --dsx-typography-display-large-text-transform: none;
   --dsx-typography-display-large-text-decoration: none;
-  --dsx-typography-display-medium-font-family: Fraunces, Merriweather, Manrope, Georgia, serif;
+  --dsx-typography-display-medium-font-family: Science Gothic, Arial Narrow, ui-sans-serif, system-ui, sans-serif;
   --dsx-typography-display-medium-font-size: 48px;
-  --dsx-typography-display-medium-font-weight: 600;
+  --dsx-typography-display-medium-font-weight: 700;
   --dsx-typography-display-medium-line-height: 1.15;
   --dsx-typography-display-medium-letter-spacing: -0.02em;
+  --dsx-typography-display-medium-font-variation-settings: "wdth" 110, "CTRS" 26, "slnt" 0;
   --dsx-typography-display-medium-text-transform: none;
   --dsx-typography-display-medium-text-decoration: none;
-  --dsx-typography-headline-large-font-family: Fraunces, Merriweather, Manrope, Georgia, serif;
+  --dsx-typography-headline-large-font-family: Science Gothic, Arial Narrow, ui-sans-serif, system-ui, sans-serif;
   --dsx-typography-headline-large-font-size: 32px;
-  --dsx-typography-headline-large-font-weight: 600;
+  --dsx-typography-headline-large-font-weight: 650;
   --dsx-typography-headline-large-line-height: 1.2;
   --dsx-typography-headline-large-letter-spacing: -0.01em;
+  --dsx-typography-headline-large-font-variation-settings: "wdth" 106, "CTRS" 18, "slnt" 0;
   --dsx-typography-headline-large-text-transform: none;
   --dsx-typography-headline-large-text-decoration: none;
-  --dsx-typography-headline-medium-font-family: Fraunces, Merriweather, Manrope, Georgia, serif;
+  --dsx-typography-headline-medium-font-family: Science Gothic, Arial Narrow, ui-sans-serif, system-ui, sans-serif;
   --dsx-typography-headline-medium-font-size: 24px;
   --dsx-typography-headline-medium-font-weight: 600;
   --dsx-typography-headline-medium-line-height: 1.25;
   --dsx-typography-headline-medium-letter-spacing: 0;
+  --dsx-typography-headline-medium-font-variation-settings: "wdth" 103, "CTRS" 12, "slnt" 0;
   --dsx-typography-headline-medium-text-transform: none;
   --dsx-typography-headline-medium-text-decoration: none;
-  --dsx-typography-body-large-font-family: Manrope;
+  --dsx-typography-body-large-font-family: Science Gothic, ui-sans-serif, system-ui, sans-serif;
   --dsx-typography-body-large-font-size: 16px;
   --dsx-typography-body-large-font-weight: 400;
   --dsx-typography-body-large-line-height: 1.5;
   --dsx-typography-body-large-letter-spacing: 0;
+  --dsx-typography-body-large-font-variation-settings: "wdth" 100, "CTRS" 0, "slnt" 0;
   --dsx-typography-body-large-text-transform: none;
   --dsx-typography-body-large-text-decoration: none;
-  --dsx-typography-body-medium-font-family: Manrope;
+  --dsx-typography-body-medium-font-family: Science Gothic, ui-sans-serif, system-ui, sans-serif;
   --dsx-typography-body-medium-font-size: 14px;
   --dsx-typography-body-medium-font-weight: 400;
   --dsx-typography-body-medium-line-height: 1.5;
   --dsx-typography-body-medium-letter-spacing: 0;
+  --dsx-typography-body-medium-font-variation-settings: "wdth" 100, "CTRS" 0, "slnt" 0;
   --dsx-typography-body-medium-text-transform: none;
   --dsx-typography-body-medium-text-decoration: none;
-  --dsx-typography-body-small-font-family: Manrope;
+  --dsx-typography-body-small-font-family: Science Gothic, ui-sans-serif, system-ui, sans-serif;
   --dsx-typography-body-small-font-size: 12px;
   --dsx-typography-body-small-font-weight: 400;
   --dsx-typography-body-small-line-height: 1.4;
   --dsx-typography-body-small-letter-spacing: 0;
+  --dsx-typography-body-small-font-variation-settings: "wdth" 100, "CTRS" 0, "slnt" 0;
   --dsx-typography-body-small-text-transform: none;
   --dsx-typography-body-small-text-decoration: none;
-  --dsx-typography-label-large-font-family: Manrope;
+  --dsx-typography-label-large-font-family: Science Gothic, ui-sans-serif, system-ui, sans-serif;
   --dsx-typography-label-large-font-size: 14px;
   --dsx-typography-label-large-font-weight: 600;
   --dsx-typography-label-large-line-height: 1.4;
   --dsx-typography-label-large-letter-spacing: 0.02em;
+  --dsx-typography-label-large-font-variation-settings: "wdth" 98, "CTRS" 6, "slnt" 0;
   --dsx-typography-label-large-text-transform: none;
   --dsx-typography-label-large-text-decoration: none;
-  --dsx-typography-label-medium-font-family: Manrope;
+  --dsx-typography-label-medium-font-family: Science Gothic, ui-sans-serif, system-ui, sans-serif;
   --dsx-typography-label-medium-font-size: 12px;
   --dsx-typography-label-medium-font-weight: 600;
   --dsx-typography-label-medium-line-height: 1.4;
   --dsx-typography-label-medium-letter-spacing: 0.08em;
+  --dsx-typography-label-medium-font-variation-settings: "wdth" 94, "CTRS" 8, "slnt" 0;
   --dsx-typography-label-medium-text-transform: uppercase;
   --dsx-typography-label-medium-text-decoration: none;
-  --dsx-typography-label-small-font-family: Manrope;
+  --dsx-typography-label-small-font-family: Science Gothic, ui-sans-serif, system-ui, sans-serif;
   --dsx-typography-label-small-font-size: 12px;
   --dsx-typography-label-small-font-weight: 600;
   --dsx-typography-label-small-line-height: 1.4;
   --dsx-typography-label-small-letter-spacing: 0.02em;
+  --dsx-typography-label-small-font-variation-settings: "wdth" 96, "CTRS" 6, "slnt" 0;
   --dsx-typography-label-small-text-transform: none;
   --dsx-typography-label-small-text-decoration: none;
+  --dsx-typography-code-font-family: JetBrains Mono, SFMono-Regular, Consolas, monospace;
+  --dsx-typography-code-font-size: 0.875em;
+  --dsx-typography-code-font-weight: 400;
+  --dsx-typography-code-line-height: 1.5;
+  --dsx-typography-code-letter-spacing: -0.02em;
+  --dsx-typography-code-font-variation-settings: normal;
+  --dsx-typography-code-text-transform: none;
+  --dsx-typography-code-text-decoration: none;
   --dsx-z-index-elevated: 1;
   --dsx-z-index-elevated-strong: 2;
   --dsx-z-index-overlay-local: 10;
@@ -235,23 +428,163 @@
   --dsx-z-index-toast: 100;
 }
 
+[data-accent-color='rift'] {
+  --dsx-color-accent-1: var(--dsx-color-accent-rift-1);
+  --dsx-color-accent-2: var(--dsx-color-accent-rift-2);
+  --dsx-color-accent-3: var(--dsx-color-accent-rift-3);
+  --dsx-color-accent-4: var(--dsx-color-accent-rift-4);
+  --dsx-color-accent-5: var(--dsx-color-accent-rift-5);
+  --dsx-color-accent-6: var(--dsx-color-accent-rift-6);
+  --dsx-color-accent-7: var(--dsx-color-accent-rift-7);
+  --dsx-color-accent-8: var(--dsx-color-accent-rift-8);
+  --dsx-color-accent-9: var(--dsx-color-accent-rift-9);
+  --dsx-color-accent-10: var(--dsx-color-accent-rift-10);
+  --dsx-color-accent-11: var(--dsx-color-accent-rift-11);
+  --dsx-color-accent-12: var(--dsx-color-accent-rift-12);
+  --dsx-color-primary: var(--dsx-color-accent-rift-9);
+  --dsx-color-primary-container: var(--dsx-color-accent-rift-3);
+  --dsx-color-on-primary: #ffffff;
+  --dsx-color-on-primary-container: var(--dsx-color-accent-rift-11);
+  --dsx-color-accent-indicator: var(--dsx-color-accent-rift-11);
+  --dsx-color-accent-track: var(--dsx-color-accent-rift-9);
+  --dsx-color-accent-contrast: #ffffff;
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-rift-3) 20%, transparent);
+  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-rift-9) 64%, transparent);
+  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-rift-9) 28%, transparent);
+  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-rift-9) 40%, transparent);
+  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 8%, transparent);
+  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 16%, transparent);
+}
+
+[data-accent-color='warp'] {
+  --dsx-color-accent-1: var(--dsx-color-accent-warp-1);
+  --dsx-color-accent-2: var(--dsx-color-accent-warp-2);
+  --dsx-color-accent-3: var(--dsx-color-accent-warp-3);
+  --dsx-color-accent-4: var(--dsx-color-accent-warp-4);
+  --dsx-color-accent-5: var(--dsx-color-accent-warp-5);
+  --dsx-color-accent-6: var(--dsx-color-accent-warp-6);
+  --dsx-color-accent-7: var(--dsx-color-accent-warp-7);
+  --dsx-color-accent-8: var(--dsx-color-accent-warp-8);
+  --dsx-color-accent-9: var(--dsx-color-accent-warp-9);
+  --dsx-color-accent-10: var(--dsx-color-accent-warp-10);
+  --dsx-color-accent-11: var(--dsx-color-accent-warp-11);
+  --dsx-color-accent-12: var(--dsx-color-accent-warp-12);
+  --dsx-color-primary: var(--dsx-color-accent-warp-9);
+  --dsx-color-primary-container: var(--dsx-color-accent-warp-3);
+  --dsx-color-on-primary: #ffffff;
+  --dsx-color-on-primary-container: var(--dsx-color-accent-warp-11);
+  --dsx-color-accent-indicator: var(--dsx-color-accent-warp-11);
+  --dsx-color-accent-track: var(--dsx-color-accent-warp-9);
+  --dsx-color-accent-contrast: #ffffff;
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-warp-3) 20%, transparent);
+  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-warp-9) 64%, transparent);
+  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-warp-9) 28%, transparent);
+  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-warp-9) 40%, transparent);
+  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-warp-9) 8%, transparent);
+  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-warp-9) 16%, transparent);
+}
+
+[data-accent-color='ray'] {
+  --dsx-color-accent-1: var(--dsx-color-accent-ray-1);
+  --dsx-color-accent-2: var(--dsx-color-accent-ray-2);
+  --dsx-color-accent-3: var(--dsx-color-accent-ray-3);
+  --dsx-color-accent-4: var(--dsx-color-accent-ray-4);
+  --dsx-color-accent-5: var(--dsx-color-accent-ray-5);
+  --dsx-color-accent-6: var(--dsx-color-accent-ray-6);
+  --dsx-color-accent-7: var(--dsx-color-accent-ray-7);
+  --dsx-color-accent-8: var(--dsx-color-accent-ray-8);
+  --dsx-color-accent-9: var(--dsx-color-accent-ray-9);
+  --dsx-color-accent-10: var(--dsx-color-accent-ray-10);
+  --dsx-color-accent-11: var(--dsx-color-accent-ray-11);
+  --dsx-color-accent-12: var(--dsx-color-accent-ray-12);
+  --dsx-color-primary: var(--dsx-color-accent-ray-9);
+  --dsx-color-primary-container: var(--dsx-color-accent-ray-3);
+  --dsx-color-on-primary: #ffffff;
+  --dsx-color-on-primary-container: var(--dsx-color-accent-ray-11);
+  --dsx-color-accent-indicator: var(--dsx-color-accent-ray-11);
+  --dsx-color-accent-track: var(--dsx-color-accent-ray-9);
+  --dsx-color-accent-contrast: #ffffff;
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-ray-3) 20%, transparent);
+  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-ray-9) 64%, transparent);
+  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-ray-9) 28%, transparent);
+  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-ray-9) 40%, transparent);
+  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-ray-9) 8%, transparent);
+  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-ray-9) 16%, transparent);
+}
+
+[data-accent-color='astral'] {
+  --dsx-color-accent-1: var(--dsx-color-accent-astral-1);
+  --dsx-color-accent-2: var(--dsx-color-accent-astral-2);
+  --dsx-color-accent-3: var(--dsx-color-accent-astral-3);
+  --dsx-color-accent-4: var(--dsx-color-accent-astral-4);
+  --dsx-color-accent-5: var(--dsx-color-accent-astral-5);
+  --dsx-color-accent-6: var(--dsx-color-accent-astral-6);
+  --dsx-color-accent-7: var(--dsx-color-accent-astral-7);
+  --dsx-color-accent-8: var(--dsx-color-accent-astral-8);
+  --dsx-color-accent-9: var(--dsx-color-accent-astral-9);
+  --dsx-color-accent-10: var(--dsx-color-accent-astral-10);
+  --dsx-color-accent-11: var(--dsx-color-accent-astral-11);
+  --dsx-color-accent-12: var(--dsx-color-accent-astral-12);
+  --dsx-color-primary: var(--dsx-color-accent-astral-9);
+  --dsx-color-primary-container: var(--dsx-color-accent-astral-3);
+  --dsx-color-on-primary: #ffffff;
+  --dsx-color-on-primary-container: var(--dsx-color-accent-astral-11);
+  --dsx-color-accent-indicator: var(--dsx-color-accent-astral-11);
+  --dsx-color-accent-track: var(--dsx-color-accent-astral-9);
+  --dsx-color-accent-contrast: #ffffff;
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-astral-3) 20%, transparent);
+  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-astral-9) 64%, transparent);
+  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-astral-9) 28%, transparent);
+  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-astral-9) 40%, transparent);
+  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-astral-9) 8%, transparent);
+  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-astral-9) 16%, transparent);
+}
+
+[data-accent-color='spark'] {
+  --dsx-color-accent-1: var(--dsx-color-accent-spark-1);
+  --dsx-color-accent-2: var(--dsx-color-accent-spark-2);
+  --dsx-color-accent-3: var(--dsx-color-accent-spark-3);
+  --dsx-color-accent-4: var(--dsx-color-accent-spark-4);
+  --dsx-color-accent-5: var(--dsx-color-accent-spark-5);
+  --dsx-color-accent-6: var(--dsx-color-accent-spark-6);
+  --dsx-color-accent-7: var(--dsx-color-accent-spark-7);
+  --dsx-color-accent-8: var(--dsx-color-accent-spark-8);
+  --dsx-color-accent-9: var(--dsx-color-accent-spark-9);
+  --dsx-color-accent-10: var(--dsx-color-accent-spark-10);
+  --dsx-color-accent-11: var(--dsx-color-accent-spark-11);
+  --dsx-color-accent-12: var(--dsx-color-accent-spark-12);
+  --dsx-color-primary: var(--dsx-color-accent-spark-9);
+  --dsx-color-primary-container: var(--dsx-color-accent-spark-3);
+  --dsx-color-on-primary: #0c0d12;
+  --dsx-color-on-primary-container: var(--dsx-color-accent-spark-11);
+  --dsx-color-accent-indicator: var(--dsx-color-accent-spark-11);
+  --dsx-color-accent-track: var(--dsx-color-accent-spark-9);
+  --dsx-color-accent-contrast: #0c0d12;
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-spark-3) 20%, transparent);
+  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-spark-9) 64%, transparent);
+  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-spark-9) 28%, transparent);
+  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-spark-9) 40%, transparent);
+  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-spark-9) 8%, transparent);
+  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-spark-9) 16%, transparent);
+}
+
 [data-dsx-theme="light"] {
-  --dsx-color-accent-1: #faf8ff;
-  --dsx-color-accent-2: #f3eefe;
-  --dsx-color-accent-3: #e4d9fc;
-  --dsx-color-accent-4: #d3c2f9;
-  --dsx-color-accent-5: #c2aaf5;
-  --dsx-color-accent-6: #b494ef;
-  --dsx-color-accent-7: #a47ce8;
-  --dsx-color-accent-8: #8e5edd;
-  --dsx-color-accent-9: #8b5cf6;
-  --dsx-color-accent-10: #7c3aed;
-  --dsx-color-accent-11: #6d28d9;
-  --dsx-color-accent-12: #3b1774;
-  --dsx-color-accent-contrast: #14101f;
-  --dsx-color-accent-surface: rgba(59, 23, 116, 0.14);
-  --dsx-color-accent-indicator: #3b1774;
-  --dsx-color-accent-track: color-mix(in srgb, #a47ce8 30%, #8b5cf6);
+  --dsx-color-accent-1: #fafaff;
+  --dsx-color-accent-2: #f1efff;
+  --dsx-color-accent-3: #e6e2ff;
+  --dsx-color-accent-4: #d9d3ff;
+  --dsx-color-accent-5: #cbc1ff;
+  --dsx-color-accent-6: #bbacff;
+  --dsx-color-accent-7: #a992ff;
+  --dsx-color-accent-8: #9672ff;
+  --dsx-color-accent-9: #8553f6;
+  --dsx-color-accent-10: #6d15e3;
+  --dsx-color-accent-11: #5211ac;
+  --dsx-color-accent-12: #28005d;
+  --dsx-color-accent-contrast: #ffffff;
+  --dsx-color-accent-surface: rgba(230, 226, 255, 0.2);
+  --dsx-color-accent-indicator: #28005d;
+  --dsx-color-accent-track: #8553f6;
   --dsx-color-gray-1: #fbfbfc;
   --dsx-color-gray-2: #f4f5f7;
   --dsx-color-gray-3: #eef0f4;
@@ -264,10 +597,10 @@
   --dsx-color-gray-10: #565b70;
   --dsx-color-gray-11: #40434f;
   --dsx-color-gray-12: #2c2f3d;
-  --dsx-color-primary: #8b5cf6;
-  --dsx-color-primary-container: #e4d9fc;
-  --dsx-color-on-primary: #000000;
-  --dsx-color-on-primary-container: #3b1774;
+  --dsx-color-primary: #8553f6;
+  --dsx-color-primary-container: #d9d3ff;
+  --dsx-color-on-primary: #ffffff;
+  --dsx-color-on-primary-container: #28005d;
   --dsx-color-secondary: #6b6478;
   --dsx-color-secondary-container: #e6e2ec;
   --dsx-color-on-secondary: #ffffff;
@@ -287,50 +620,312 @@
   --dsx-color-outline: #79849f;
   --dsx-color-outline-variant: #d3d6dd;
   --dsx-color-shadow: #c3c8d4;
-  --dsx-color-success: #0c817a;
-  --dsx-color-success-container: #c7f5f0;
-  --dsx-color-on-success: #ffffff;
-  --dsx-color-on-success-container: #0b5c54;
-  --dsx-color-error: #d01137;
-  --dsx-color-error-container: #f6dfe4;
+  --dsx-color-success: #009d53;
+  --dsx-color-success-container: #c3f5d0;
+  --dsx-color-on-success: #0c0d12;
+  --dsx-color-on-success-container: #002a12;
+  --dsx-color-error: #dc1e40;
+  --dsx-color-error-container: #ffdddc;
   --dsx-color-on-error: #ffffff;
-  --dsx-color-on-error-container: #6a1b2a;
-  --dsx-color-warning: #c11582;
-  --dsx-color-warning-container: #f6dfee;
-  --dsx-color-on-warning: #ffffff;
-  --dsx-color-on-warning-container: #6a1b4d;
-  --dsx-color-info: #2f6fb0;
-  --dsx-color-info-container: #dceefc;
-  --dsx-color-on-info: #ffffff;
-  --dsx-color-on-info-container: #1c4a73;
+  --dsx-color-on-error-container: #46000c;
+  --dsx-color-warning: #f5a623;
+  --dsx-color-warning-container: #ffe1bc;
+  --dsx-color-on-warning: #0c0d12;
+  --dsx-color-on-warning-container: #311d00;
+  --dsx-color-info: #5aa8e0;
+  --dsx-color-info-container: #d0eaff;
+  --dsx-color-on-info: #0c0d12;
+  --dsx-color-on-info-container: #00243b;
   --dsx-color-disabled-text: #8b90a3;
   --dsx-color-disabled-border: #d3d6dd;
   --dsx-color-disabled-surface: #e2e4e9;
-  --dsx-color-high-contrast: #3b1774;
+  --dsx-color-high-contrast: #28005d;
   --dsx-color-on-high-contrast: #fbfbfc;
-  --dsx-color-high-contrast-container: color-mix(in srgb, #3b1774 14%, transparent);
-  --dsx-color-high-contrast-border: color-mix(in srgb, #3b1774 48%, transparent);
+  --dsx-color-high-contrast-container: color-mix(in srgb, #28005d 14%, transparent);
+  --dsx-color-high-contrast-border: color-mix(in srgb, #28005d 48%, transparent);
   --dsx-color-text-inverse: #fbfbfc;
-  --dsx-color-inverse-background: #3b1774;
+  --dsx-color-inverse-background: #28005d;
   --dsx-color-on-inverse-background: #fbfbfc;
-  --dsx-color-inverse-surface: color-mix(in srgb, #3b1774 14%, transparent);
+  --dsx-color-inverse-surface: color-mix(in srgb, #28005d 14%, transparent);
   --dsx-color-on-inverse-surface: #fbfbfc;
+  --dsx-color-accent-rift-1: #fafaff;
+  --dsx-color-accent-rift-2: #f1efff;
+  --dsx-color-accent-rift-3: #e6e2ff;
+  --dsx-color-accent-rift-4: #d9d3ff;
+  --dsx-color-accent-rift-5: #cbc1ff;
+  --dsx-color-accent-rift-6: #bbacff;
+  --dsx-color-accent-rift-7: #a992ff;
+  --dsx-color-accent-rift-8: #9672ff;
+  --dsx-color-accent-rift-9: #8553f6;
+  --dsx-color-accent-rift-10: #6d15e3;
+  --dsx-color-accent-rift-11: #5211ac;
+  --dsx-color-accent-rift-12: #28005d;
+  --dsx-color-accent-warp-1: #f6fbff;
+  --dsx-color-accent-warp-2: #e3f4ff;
+  --dsx-color-accent-warp-3: #ccecff;
+  --dsx-color-accent-warp-4: #b8e0f8;
+  --dsx-color-accent-warp-5: #a5d2ec;
+  --dsx-color-accent-warp-6: #8dc2e1;
+  --dsx-color-accent-warp-7: #6cb0d6;
+  --dsx-color-accent-warp-8: #479ac7;
+  --dsx-color-accent-warp-9: #197dab;
+  --dsx-color-accent-warp-10: #005f85;
+  --dsx-color-accent-warp-11: #004e6e;
+  --dsx-color-accent-warp-12: #002537;
+  --dsx-color-accent-ray-1: #fff8ff;
+  --dsx-color-accent-ray-2: #fee9ff;
+  --dsx-color-accent-ray-3: #fed8ff;
+  --dsx-color-accent-ray-4: #fcc2ff;
+  --dsx-color-accent-ray-5: #f7abfb;
+  --dsx-color-accent-ray-6: #ed94f2;
+  --dsx-color-accent-ray-7: #e373ea;
+  --dsx-color-accent-ray-8: #d34cdd;
+  --dsx-color-accent-ray-9: #c32cce;
+  --dsx-color-accent-ray-10: #9d00a8;
+  --dsx-color-accent-ray-11: #75007d;
+  --dsx-color-accent-ray-12: #3b003f;
+  --dsx-color-accent-astral-1: #fff8fb;
+  --dsx-color-accent-astral-2: #ffebf3;
+  --dsx-color-accent-astral-3: #ffdbeb;
+  --dsx-color-accent-astral-4: #ffc6e0;
+  --dsx-color-accent-astral-5: #ffaed5;
+  --dsx-color-accent-astral-6: #ff90c8;
+  --dsx-color-accent-astral-7: #f86fb7;
+  --dsx-color-accent-astral-8: #ea47a4;
+  --dsx-color-accent-astral-9: #d82292;
+  --dsx-color-accent-astral-10: #ad0072;
+  --dsx-color-accent-astral-11: #820055;
+  --dsx-color-accent-astral-12: #420029;
+  --dsx-color-accent-spark-1: #f5ffe7;
+  --dsx-color-accent-spark-2: #e6faca;
+  --dsx-color-accent-spark-3: #d7f1b2;
+  --dsx-color-accent-spark-4: #c8e69d;
+  --dsx-color-accent-spark-5: #b8d886;
+  --dsx-color-accent-spark-6: #a4c967;
+  --dsx-color-accent-spark-7: #8cb830;
+  --dsx-color-accent-spark-8: #77a100;
+  --dsx-color-accent-spark-9: #afe82c;
+  --dsx-color-accent-spark-10: #92c600;
+  --dsx-color-accent-spark-11: #3a5100;
+  --dsx-color-accent-spark-12: #1a2700;
+  --dsx-color-success-1: #f0fff4;
+  --dsx-color-success-2: #d7fce0;
+  --dsx-color-success-3: #c3f5d0;
+  --dsx-color-success-4: #b1e9c0;
+  --dsx-color-success-5: #9ddcaf;
+  --dsx-color-success-6: #82ce99;
+  --dsx-color-success-7: #5abf7d;
+  --dsx-color-success-8: #23ab60;
+  --dsx-color-success-9: #2fbf6d;
+  --dsx-color-success-10: #009d53;
+  --dsx-color-success-11: #00572b;
+  --dsx-color-success-12: #002a12;
+  --dsx-color-error-1: #fff9f8;
+  --dsx-color-error-2: #ffeceb;
+  --dsx-color-error-3: #ffdddc;
+  --dsx-color-error-4: #ffcac9;
+  --dsx-color-error-5: #ffb4b3;
+  --dsx-color-error-6: #ff9999;
+  --dsx-color-error-7: #ff747a;
+  --dsx-color-error-8: #f44b5b;
+  --dsx-color-error-9: #dc1e40;
+  --dsx-color-error-10: #ae002c;
+  --dsx-color-error-11: #8a0021;
+  --dsx-color-error-12: #46000c;
+  --dsx-color-warning-1: #fff9f3;
+  --dsx-color-warning-2: #ffeeda;
+  --dsx-color-warning-3: #ffe1bc;
+  --dsx-color-warning-4: #f8d2a2;
+  --dsx-color-warning-5: #edc28c;
+  --dsx-color-warning-6: #e2b06e;
+  --dsx-color-warning-7: #d69940;
+  --dsx-color-warning-8: #c38100;
+  --dsx-color-warning-9: #f5a623;
+  --dsx-color-warning-10: #cf8900;
+  --dsx-color-warning-11: #633f00;
+  --dsx-color-warning-12: #311d00;
+  --dsx-color-info-1: #f6fbff;
+  --dsx-color-info-2: #e5f3ff;
+  --dsx-color-info-3: #d0eaff;
+  --dsx-color-info-4: #bbdefa;
+  --dsx-color-info-5: #a8d0ef;
+  --dsx-color-info-6: #91c0e5;
+  --dsx-color-info-7: #72aedb;
+  --dsx-color-info-8: #5098cc;
+  --dsx-color-info-9: #5aa8e0;
+  --dsx-color-info-10: #2689c7;
+  --dsx-color-info-11: #004c76;
+  --dsx-color-info-12: #00243b;
+  --dsx-color-accent-indicator: #28005d;
+  --dsx-color-accent-track: #8553f6;
+  --dsx-color-accent-contrast: #ffffff;
+  --dsx-color-accent-surface: rgba(230, 226, 255, 0.2);
+  --dsx-color-border-subtle: #c3c8d4;
+  --dsx-color-border-strong: #8b90a3;
   --dsx-effect-shadow-1: 0 1px 2px rgba(44, 47, 61, 0.12);
   --dsx-effect-shadow-2: 0 2px 8px rgba(44, 47, 61, 0.18);
   --dsx-effect-shadow-3: 0 4px 16px rgba(44, 47, 61, 0.24);
   --dsx-effect-shadow-4: 0 8px 24px rgba(44, 47, 61, 0.32);
   --dsx-effect-shadow-5: 0 16px 40px rgba(44, 47, 61, 0.40);
   --dsx-effect-shadow-6: 0 24px 64px rgba(44, 47, 61, 0.48);
-  --dsx-effect-ring-focus: rgba(139, 92, 246, 0.56);
-  --dsx-effect-shadow-accent: rgba(139, 92, 246, 0.24);
-  --dsx-effect-shadow-accent-strong: rgba(139, 92, 246, 0.36);
+  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-rift-9) 56%, transparent);
+  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-rift-9) 24%, transparent);
+  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-rift-9) 36%, transparent);
   --dsx-effect-shadow-card: rgba(44, 47, 61, 0.18);
   --dsx-effect-shadow-card-strong: rgba(44, 47, 61, 0.32);
-  --dsx-effect-panel-glass-background: rgba(251, 251, 252, 0.20);
-  --dsx-effect-hover-primary: rgba(139, 92, 246, 0.06);
-  --dsx-effect-pressed-primary: rgba(139, 92, 246, 0.12);
-  --dsx-effect-hover-secondary: rgba(139, 92, 246, 0.03);
-  --dsx-effect-hover-ghost: rgba(139, 92, 246, 0.06);
+  --dsx-effect-panel-glass-background: rgba(255, 255, 255, 0.60);
+  --dsx-effect-panel-glass-rim-highlight: rgba(255, 255, 255, 0.60);
+  --dsx-effect-panel-glass-rim: rgba(255, 255, 255, 0.40);
+  --dsx-effect-panel-glass-border: rgba(255, 255, 255, 0.50);
+  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 6%, transparent);
+  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 12%, transparent);
+  --dsx-effect-hover-secondary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 3%, transparent);
+  --dsx-effect-hover-ghost: color-mix(in srgb, var(--dsx-color-accent-rift-9) 6%, transparent);
+}
+
+[data-dsx-theme="light"] [data-accent-color='rift'],
+[data-dsx-theme="light"][data-accent-color='rift'] {
+  --dsx-color-accent-1: var(--dsx-color-accent-rift-1);
+  --dsx-color-accent-2: var(--dsx-color-accent-rift-2);
+  --dsx-color-accent-3: var(--dsx-color-accent-rift-3);
+  --dsx-color-accent-4: var(--dsx-color-accent-rift-4);
+  --dsx-color-accent-5: var(--dsx-color-accent-rift-5);
+  --dsx-color-accent-6: var(--dsx-color-accent-rift-6);
+  --dsx-color-accent-7: var(--dsx-color-accent-rift-7);
+  --dsx-color-accent-8: var(--dsx-color-accent-rift-8);
+  --dsx-color-accent-9: var(--dsx-color-accent-rift-9);
+  --dsx-color-accent-10: var(--dsx-color-accent-rift-10);
+  --dsx-color-accent-11: var(--dsx-color-accent-rift-11);
+  --dsx-color-accent-12: var(--dsx-color-accent-rift-12);
+  --dsx-color-primary: var(--dsx-color-accent-rift-9);
+  --dsx-color-primary-container: var(--dsx-color-accent-rift-4);
+  --dsx-color-on-primary: #ffffff;
+  --dsx-color-on-primary-container: var(--dsx-color-accent-rift-12);
+  --dsx-color-accent-indicator: var(--dsx-color-accent-rift-12);
+  --dsx-color-accent-track: var(--dsx-color-accent-rift-9);
+  --dsx-color-accent-contrast: #ffffff;
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-rift-3) 20%, transparent);
+  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-rift-9) 56%, transparent);
+  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-rift-9) 24%, transparent);
+  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-rift-9) 36%, transparent);
+  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 6%, transparent);
+  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 12%, transparent);
+}
+
+[data-dsx-theme="light"] [data-accent-color='warp'],
+[data-dsx-theme="light"][data-accent-color='warp'] {
+  --dsx-color-accent-1: var(--dsx-color-accent-warp-1);
+  --dsx-color-accent-2: var(--dsx-color-accent-warp-2);
+  --dsx-color-accent-3: var(--dsx-color-accent-warp-3);
+  --dsx-color-accent-4: var(--dsx-color-accent-warp-4);
+  --dsx-color-accent-5: var(--dsx-color-accent-warp-5);
+  --dsx-color-accent-6: var(--dsx-color-accent-warp-6);
+  --dsx-color-accent-7: var(--dsx-color-accent-warp-7);
+  --dsx-color-accent-8: var(--dsx-color-accent-warp-8);
+  --dsx-color-accent-9: var(--dsx-color-accent-warp-9);
+  --dsx-color-accent-10: var(--dsx-color-accent-warp-10);
+  --dsx-color-accent-11: var(--dsx-color-accent-warp-11);
+  --dsx-color-accent-12: var(--dsx-color-accent-warp-12);
+  --dsx-color-primary: var(--dsx-color-accent-warp-9);
+  --dsx-color-primary-container: var(--dsx-color-accent-warp-4);
+  --dsx-color-on-primary: #ffffff;
+  --dsx-color-on-primary-container: var(--dsx-color-accent-warp-12);
+  --dsx-color-accent-indicator: var(--dsx-color-accent-warp-12);
+  --dsx-color-accent-track: var(--dsx-color-accent-warp-9);
+  --dsx-color-accent-contrast: #ffffff;
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-warp-3) 20%, transparent);
+  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-warp-9) 56%, transparent);
+  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-warp-9) 24%, transparent);
+  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-warp-9) 36%, transparent);
+  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-warp-9) 6%, transparent);
+  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-warp-9) 12%, transparent);
+}
+
+[data-dsx-theme="light"] [data-accent-color='ray'],
+[data-dsx-theme="light"][data-accent-color='ray'] {
+  --dsx-color-accent-1: var(--dsx-color-accent-ray-1);
+  --dsx-color-accent-2: var(--dsx-color-accent-ray-2);
+  --dsx-color-accent-3: var(--dsx-color-accent-ray-3);
+  --dsx-color-accent-4: var(--dsx-color-accent-ray-4);
+  --dsx-color-accent-5: var(--dsx-color-accent-ray-5);
+  --dsx-color-accent-6: var(--dsx-color-accent-ray-6);
+  --dsx-color-accent-7: var(--dsx-color-accent-ray-7);
+  --dsx-color-accent-8: var(--dsx-color-accent-ray-8);
+  --dsx-color-accent-9: var(--dsx-color-accent-ray-9);
+  --dsx-color-accent-10: var(--dsx-color-accent-ray-10);
+  --dsx-color-accent-11: var(--dsx-color-accent-ray-11);
+  --dsx-color-accent-12: var(--dsx-color-accent-ray-12);
+  --dsx-color-primary: var(--dsx-color-accent-ray-9);
+  --dsx-color-primary-container: var(--dsx-color-accent-ray-4);
+  --dsx-color-on-primary: #ffffff;
+  --dsx-color-on-primary-container: var(--dsx-color-accent-ray-12);
+  --dsx-color-accent-indicator: var(--dsx-color-accent-ray-12);
+  --dsx-color-accent-track: var(--dsx-color-accent-ray-9);
+  --dsx-color-accent-contrast: #ffffff;
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-ray-3) 20%, transparent);
+  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-ray-9) 56%, transparent);
+  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-ray-9) 24%, transparent);
+  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-ray-9) 36%, transparent);
+  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-ray-9) 6%, transparent);
+  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-ray-9) 12%, transparent);
+}
+
+[data-dsx-theme="light"] [data-accent-color='astral'],
+[data-dsx-theme="light"][data-accent-color='astral'] {
+  --dsx-color-accent-1: var(--dsx-color-accent-astral-1);
+  --dsx-color-accent-2: var(--dsx-color-accent-astral-2);
+  --dsx-color-accent-3: var(--dsx-color-accent-astral-3);
+  --dsx-color-accent-4: var(--dsx-color-accent-astral-4);
+  --dsx-color-accent-5: var(--dsx-color-accent-astral-5);
+  --dsx-color-accent-6: var(--dsx-color-accent-astral-6);
+  --dsx-color-accent-7: var(--dsx-color-accent-astral-7);
+  --dsx-color-accent-8: var(--dsx-color-accent-astral-8);
+  --dsx-color-accent-9: var(--dsx-color-accent-astral-9);
+  --dsx-color-accent-10: var(--dsx-color-accent-astral-10);
+  --dsx-color-accent-11: var(--dsx-color-accent-astral-11);
+  --dsx-color-accent-12: var(--dsx-color-accent-astral-12);
+  --dsx-color-primary: var(--dsx-color-accent-astral-9);
+  --dsx-color-primary-container: var(--dsx-color-accent-astral-4);
+  --dsx-color-on-primary: #ffffff;
+  --dsx-color-on-primary-container: var(--dsx-color-accent-astral-12);
+  --dsx-color-accent-indicator: var(--dsx-color-accent-astral-12);
+  --dsx-color-accent-track: var(--dsx-color-accent-astral-9);
+  --dsx-color-accent-contrast: #ffffff;
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-astral-3) 20%, transparent);
+  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-astral-9) 56%, transparent);
+  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-astral-9) 24%, transparent);
+  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-astral-9) 36%, transparent);
+  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-astral-9) 6%, transparent);
+  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-astral-9) 12%, transparent);
+}
+
+[data-dsx-theme="light"] [data-accent-color='spark'],
+[data-dsx-theme="light"][data-accent-color='spark'] {
+  --dsx-color-accent-1: var(--dsx-color-accent-spark-1);
+  --dsx-color-accent-2: var(--dsx-color-accent-spark-2);
+  --dsx-color-accent-3: var(--dsx-color-accent-spark-3);
+  --dsx-color-accent-4: var(--dsx-color-accent-spark-4);
+  --dsx-color-accent-5: var(--dsx-color-accent-spark-5);
+  --dsx-color-accent-6: var(--dsx-color-accent-spark-6);
+  --dsx-color-accent-7: var(--dsx-color-accent-spark-7);
+  --dsx-color-accent-8: var(--dsx-color-accent-spark-8);
+  --dsx-color-accent-9: var(--dsx-color-accent-spark-9);
+  --dsx-color-accent-10: var(--dsx-color-accent-spark-10);
+  --dsx-color-accent-11: var(--dsx-color-accent-spark-11);
+  --dsx-color-accent-12: var(--dsx-color-accent-spark-12);
+  --dsx-color-primary: var(--dsx-color-accent-spark-9);
+  --dsx-color-primary-container: var(--dsx-color-accent-spark-4);
+  --dsx-color-on-primary: #0c0d12;
+  --dsx-color-on-primary-container: var(--dsx-color-accent-spark-12);
+  --dsx-color-accent-indicator: var(--dsx-color-accent-spark-12);
+  --dsx-color-accent-track: var(--dsx-color-accent-spark-9);
+  --dsx-color-accent-contrast: #0c0d12;
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-spark-3) 20%, transparent);
+  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-spark-9) 56%, transparent);
+  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-spark-9) 24%, transparent);
+  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-spark-9) 36%, transparent);
+  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-spark-9) 6%, transparent);
+  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-spark-9) 12%, transparent);
 }
 
 
@@ -346,15 +941,6 @@
   --dsx-motion-duration-spin: 900ms;
   --dsx-motion-duration-blink: 1s;
   --dsx-motion-duration-shimmer: 1.4s;
-  --dsx-sheet-min-height: 80vh;
-  /* Intentional fixed chart floor to preserve existing composition height. */
-  --dsx-chart-min-height: 240px;
-  /* Intentional fixed empty-state height to preserve current table spacing. */
-  --dsx-data-table-empty-height: 96px;
-  /* Intentional fixed sheet width to preserve current side panel sizing. */
-  --dsx-sheet-width: 380px;
-  --dsx-sheet-width-sm: 320px;
-  --dsx-sheet-width-lg: 480px;
   --dsx-breakpoint-sm: 640px;
   --dsx-breakpoint-md: 768px;
   --dsx-breakpoint-lg: 1024px;
@@ -370,47 +956,22 @@
   --dsx-shadow-blur-md: 24px;
   --dsx-shadow-blur-lg: 32px;
   --dsx-shadow-blur-xl: 40px;
-  --dsx-sidebar-width: 256px;
-  --dsx-sidebar-width-collapsed: 64px;
-  --dsx-calendar-width: 320px;
-  --dsx-combobox-content-width: 320px;
-  --dsx-combobox-list-max-height: 300px;
   --dsx-combobox-list-gap: var(--dsx-space-0-5);
   --dsx-dialog-content-width-sm: var(--dsx-size-dialog-sm-width);
-  --dsx-dialog-content-width: 560px;
-  --dsx-dialog-content-width-lg: 720px;
   --dsx-dialog-viewport-gap: var(--dsx-space-xl);
   --dsx-drawer-handle-width: var(--dsx-size-2xl);
   --dsx-drawer-handle-height: var(--dsx-space-xs);
-  --dsx-drawer-min-height: 30vh;
-  --dsx-drawer-min-height-sm: 24vh;
-  --dsx-drawer-min-height-lg: 50vh;
-  --dsx-drawer-min-height-full: 100vh;
-  --dsx-rich-text-editor-min-height: 220px;
-  --dsx-empty-state-max-width: 600px;
-  --dsx-empty-state-min-height: 400px;
-  --dsx-input-otp-slot-width: 36px;
-  --dsx-input-otp-slot-height: 44px;
-  --dsx-input-otp-separator-width: 12px;
   --dsx-input-otp-caret-width: var(--dsx-border-width-lg);
   --dsx-input-otp-caret-height: var(--dsx-size-sm);
   --dsx-input-otp-separator-height: var(--dsx-border-width-lg);
   --dsx-copy-field-action-min-width: var(--dsx-size-3xl);
   --dsx-kbd-padding-block-sm: var(--dsx-space-0-5);
   --dsx-kbd-padding-inline-sm: var(--dsx-space-1-5);
-  --dsx-kbd-font-size-sm: 11px;
-  --dsx-kbd-min-width: 1.75em;
   --dsx-kbd-padding-block-md: var(--dsx-border-width-xl);
-  --dsx-kbd-padding-inline-md: 7px;
-  --dsx-navigation-menu-indicator-size: 10px;
-  --dsx-notification-center-badge-font-size: 10px;
   --dsx-notification-center-badge-padding-block: var(--dsx-space-0-5);
   --dsx-notification-center-badge-padding-inline: var(--dsx-space-xs);
-  --dsx-notification-center-panel-width: 320px;
-  --dsx-notification-center-list-max-height: 400px;
   --dsx-notification-center-item-gap: var(--dsx-space-0-5);
   --dsx-notification-center-item-dot-size: var(--dsx-space-sm);
-  --dsx-notification-center-item-dot-offset: 6px;
   --dsx-popover-min-width: var(--dsx-size-popover-min-width);
   --dsx-popover-max-width: var(--dsx-size-popover-max-width);
   --dsx-progress-height: var(--dsx-space-sm);
@@ -418,11 +979,39 @@
   --dsx-resizable-handle-thickness-active: var(--dsx-border-width-xl);
   --dsx-resizable-grip-width: var(--dsx-space-xs);
   --dsx-resizable-grip-height: var(--dsx-size-xs);
-  --dsx-resizable-grip-radius: 2px;
   --dsx-icon-stroke-width: 1.75;
   --dsx-icon-stroke-width-strong: 2.25;
   --dsx-control-separator-color: var(--dsx-color-outline-variant);
   --dsx-control-separator-color-strong: var(--dsx-color-outline);
+
+  /* Boundary hierarchy (F2, DESIGN.md). Six boundary roles, each a paired
+     width + colour token. Components consume the role, not a raw
+     --dsx-border-width-* / --dsx-color-outline*.
+
+     Phase 1: structural / control / separator / divider stay 1px — a surface
+     edge or a seam is a 1px line, and the way to make a seam quieter is a
+     lower-contrast colour (separator uses outline-variant), never a thinner
+     one (sub-pixel borders round to 0 on non-retina screens).
+
+     Phase 2 (2026-09-06): emphasis states — selected and high-contrast — read
+     at 2px, painted as an *inset ring* (box-shadow), not a wider border, so
+     there is no layout shift when a card becomes selected and the ring stays
+     crisp at every display density. The -width token feeds the ring spread. */
+  --dsx-boundary-structural-width: var(--dsx-border-width-sm);
+  --dsx-boundary-structural-color: var(--dsx-color-outline);
+  --dsx-boundary-control-width: var(--dsx-border-width-sm);
+  --dsx-boundary-control-color: var(--dsx-color-outline);
+  --dsx-boundary-separator-width: var(--dsx-border-width-sm);
+  --dsx-boundary-separator-color: var(--dsx-color-outline-variant);
+  --dsx-boundary-divider-width: var(--dsx-border-width-sm);
+  --dsx-boundary-divider-color: var(--dsx-color-outline);
+  --dsx-boundary-selected-width: var(--dsx-border-width-lg);
+  --dsx-boundary-selected-color: var(--dsx-color-accent-indicator);
+  --dsx-boundary-selected-ring: inset 0 0 0 var(--dsx-boundary-selected-width) var(--dsx-boundary-selected-color);
+  --dsx-boundary-high-contrast-width: var(--dsx-border-width-lg);
+  --dsx-boundary-high-contrast-color: var(--dsx-color-high-contrast-border);
+  --dsx-boundary-high-contrast-ring: inset 0 0 0 var(--dsx-boundary-high-contrast-width) var(--dsx-boundary-high-contrast-color);
+
   --dsx-grouped-radius: var(--dsx-rounded-md);
   /* Segmented control / tabs active indicator — elevated surface above the track. */
   /* Dark: surface-overlay sits visually above surface-raised (the track bg).     */
@@ -440,7 +1029,11 @@
   --dsx-color-panel-solid: var(--dsx-color-surface-raised);
   --dsx-color-panel-translucent: var(--dsx-effect-panel-glass-background);
   --dsx-color-panel-border: var(--dsx-color-outline);
-  --dsx-color-panel-border-translucent: var(--dsx-color-outline-variant);
+  /* Glass edges use the designed rim token, not outline-variant: on dark,
+     outline-variant (#40434f) dissolves into near-black and glass borders
+     read as missing (confirmed live 2026-09-19: borderless dropdown). The
+     light block below keeps outline-variant, which reads correctly there. */
+  --dsx-color-panel-border-translucent: var(--dsx-effect-panel-glass-border);
 
   /* Hover/effect tokens — referenced by baseMenu.css, baseTabs.css, calendar.css */
   --dsx-effect-hover-layer: var(--dsx-effect-hover-primary);
@@ -450,29 +1043,22 @@
   --dsx-accent-surface: var(--dsx-color-accent-surface);
   --dsx-accent-indicator: var(--dsx-color-accent-indicator);
   --dsx-accent-track: var(--dsx-color-accent-track);
-  --dsx-slider-min-width: 160px;
-  --dsx-slider-axis-length: 160px;
   --dsx-stepper-connector-thickness: var(--dsx-border-width-lg);
   --dsx-stepper-content-offset: var(--dsx-space-0-5);
-  --dsx-switch-width: 44px;
-  --dsx-switch-height: 24px;
-  --dsx-switch-width-sm: 36px;
-  --dsx-switch-height-sm: 20px;
-  --dsx-switch-thumb-size: 20px;
-  --dsx-switch-thumb-size-sm: 16px;
-  --dsx-switch-thumb-translate: 20px;
-  --dsx-switch-thumb-translate-sm: 16px;
   --dsx-switch-padding: var(--dsx-space-0-5);
-  --dsx-textarea-min-height-base: 80px;
   --dsx-timeline-connector-thickness: var(--dsx-border-width-lg);
   --dsx-timeline-marker-padding: var(--dsx-space-0-5);
   --dsx-timeline-dot-size: var(--dsx-space-sm);
-  --dsx-toast-viewport-width: 390px;
   --dsx-toast-viewport-mobile-inset: var(--dsx-space-3);
-  --dsx-tooltip-max-width: 200px;
   --dsx-visually-hidden-size: var(--dsx-border-width-sm);
   --dsx-focus-ring-offset: 2px;
   --dsx-motion-easing-decelerate: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+/* Added 2026-09-15 alongside dsx-motion-collapse — decelerate had no accelerate
+   counterpart, and every entrance reveal in motion.css needed one to have an exit to
+   pair with. Standard easeInCubic (easings.net) — slow start, fast end, the mirror-image
+   FEEL of an ease-out, not a literal point-reflection of decelerate's own curve (which is
+   close enough to symmetric that reflecting it barely changes the numbers). */
+--dsx-motion-easing-accelerate: cubic-bezier(0.55, 0.055, 0.675, 0.19);
   /* z-index scale for layered surfaces */
   --dsx-z-index-dropdown: 50;
   --dsx-z-index-sticky: 60;
@@ -493,6 +1079,12 @@
   --dsx-shadow-elevation-2: var(--dsx-effect-shadow-2);
   --dsx-shadow-elevation-3: var(--dsx-effect-shadow-3);
   --dsx-shadow-elevation-4: var(--dsx-effect-shadow-4);
+  /* Step 5 (Spotlight: toasts, dragged panels). Step 6 stays raw until an
+     occupant earns it — no elevation-6 alias by decision (B4 Q3). */
+  --dsx-shadow-elevation-5: var(--dsx-effect-shadow-5);
+  /* Menu-tier control point (B4 Q3): every menu-family content rides step 3
+     unless a component file reasserts it locally for cascade order. */
+  --dsx-menu-content-elevation: var(--dsx-shadow-elevation-3);
   --dsx-shadow-panel-shadow: var(--dsx-effect-shadow-3);
 
   /* ── Constructed shadows ────────────────────────────────────────────── */
@@ -526,28 +1118,27 @@
   /* --dsx-effect-hover-emphasis-layer, which would otherwise be circular. */
   --dsx-effect-hover-emphasis-layer: color-mix(in srgb, var(--dsx-color-primary) 10%, transparent);
   --dsx-effect-pressed-layer: color-mix(in srgb, var(--dsx-color-primary) 18%, transparent);
-  /* Stronger hover layer for menu/select items — 15% alpha for visibility */
-  /* across all accent variants (violet, warp, ray) in dark mode.      */
-  --dsx-effect-hover-emphasis-strong: color-mix(in srgb, var(--dsx-color-primary) 15%, transparent);
+  /* Stronger hover layer for menu/select items. Was 15%, then 24% — still
+     too faint to read on hover-only (mouse) states, where no focus ring
+     backs it up, in both themes (review 2026-09-19: context-menu hover
+     nearly invisible light + dark). 32% for real legibility across
+     rift/warp/ray; the glass panel's own translucency compounds under it. */
+  --dsx-effect-hover-emphasis-strong: color-mix(in srgb, var(--dsx-color-primary) 32%, transparent);
 
   /* ── Disabled state layers ──────────────────────────────────────────── */
   --dsx-effect-disabled-layer: var(--dsx-color-disabled-surface);
   --dsx-effect-disabled-checked-layer: color-mix(in srgb, var(--dsx-color-primary) 30%, transparent);
 
   /* ── Semantic color aliases ─────────────────────────────────────────── */
+  /* Named semantic alias, permanent — "the muted seam between list rows".
+     Not on the 2.8.0 compat-removal list (docs/design-system/color-naming-cleanup.md §1). */
   --dsx-color-separator-muted: var(--dsx-color-outline-variant);
-  --dsx-color-text-disabled: var(--dsx-color-disabled-text);
   --dsx-cursor-disabled: not-allowed;
   --dsx-cursor-not-allowed: not-allowed;
   --dsx-cursor-pointer: pointer;
   --dsx-cursor-wait: wait;
 
-  /* ── Shadow shorthand aliases ───────────────────────────────────────── */
-  --dsx-shadow-sm: var(--dsx-shadow-elevation-1);
-  --dsx-shadow-2: var(--dsx-effect-shadow-2);
-  --dsx-shadow-3: var(--dsx-effect-shadow-3);
-  --dsx-shadow-md: var(--dsx-shadow-elevation-2);
-  --dsx-shadow-xl: var(--dsx-shadow-elevation-4);
+  /* ── Shadow shorthand ───────────────────────────────────────────────── */
   --dsx-shadow-card-md: 0 4px 16px var(--dsx-effect-shadow-card);
 
   /* ── Blur utilities ─────────────────────────────────────────────────── */
@@ -563,7 +1154,6 @@
   --dsx-z-index-popover: 60;
 
   /* ── Color extensions ───────────────────────────────────────────────── */
-  --dsx-color-accent: var(--dsx-color-primary);
   --dsx-color-primary-ghost: color-mix(in srgb, var(--dsx-color-primary) 8%, transparent);
   --dsx-color-primary-alpha: color-mix(in srgb, var(--dsx-color-primary) 15%, transparent);
 
@@ -582,6 +1172,18 @@
   --dsx-semantic-primary-foreground: var(--dsx-color-on-primary);
   --dsx-semantic-ring: var(--dsx-shadow-focus-ring);
 
+  /* ── Raw display-white ──────────────────────────────────────────────── */
+  /* NOT a semantic color — never consume this for text/background/border
+     roles, use a real semantic token for those. Only for effects that need
+     the literal white channel regardless of theme/accent (a mix-blend-mode:
+     difference checkmark, a motion sweep's saturation peak) — see
+     color-swatch.css's __check and motion.css's .dsx-motion-scan. */
+  --dsx-raw-white: #ffffff;
+  /* Literal black channel, same contract as --dsx-raw-white above: only for
+     effects that need the channel itself (the ColorSwatch check on light
+     fills), never for semantic roles. */
+  --dsx-raw-black: #000000;
+
   /* ── Chart categorical palette ──────────────────────────────────────── */
   /* Chart.tsx cycles these per series (index % 5) + 1. Previously undefined,
      so every Pie slice fell back to the SVG initial fill (black). */
@@ -603,22 +1205,6 @@
   --dsx-typography-code-line-height: 1.5;
   --dsx-typography-font-weight-bold: 700;
   --dsx-typography-kbd-line-height: 1;
-
-  /* ── Component size tokens ──────────────────────────────────────────── */
-  --dsx-size-dialog-sm-width: 400px;
-  --dsx-size-menu-min-width: 180px;
-  --dsx-size-popover-min-width: 200px;
-  --dsx-size-popover-max-width: 380px;
-  --dsx-size-scroll-thumb-size: 6px;
-  --dsx-size-color-picker-width: 320px;
-  /* Was 280px: with minmax()'s non-flexible track sized before the 1fr
-     content column, a max this large claimed nearly the whole row at
-     realistic form widths (~360px), crushing the content column to a
-     sliver. 160px leaves the content column usable at common field widths
-     while still fitting normal label text ("Email address", "Password"). */
-  --dsx-size-field-label-max: 160px;
-  --dsx-size-field-label-min: 80px;
-  --dsx-container-max-width: 1280px;
 }
 
 :root,
@@ -731,186 +1317,23 @@
   --dsx-rounded-full: 9999px;
 }
 
-:root,
-[data-dsx-theme='dark'] {
-  --dsx-runtime-accent-rift-9: #8b5cf6;
-  --dsx-runtime-accent-rift-10: #a78bfa;
-  --dsx-runtime-accent-rift-11: #c4aef2;
-  --dsx-runtime-accent-rift-12: #ede9fe;
-  --dsx-runtime-accent-rift-primary: #8b5cf6;
-  --dsx-runtime-accent-rift-primary-container: #a78bfa;
-  --dsx-runtime-accent-rift-on-primary: #14101f;
-  --dsx-runtime-accent-rift-on-primary-container: #3b1774;
-  --dsx-runtime-accent-rift-indicator: #c4aef2;
-  --dsx-runtime-accent-rift-surface: rgba(237, 233, 254, 0.18);
-  --dsx-runtime-accent-rift-contrast: #14101f;
-  --dsx-runtime-accent-rift-track: color-mix(in srgb, #a78bfa 35%, #8b5cf6);
-  --dsx-runtime-accent-rift-ring-focus: rgba(139, 92, 246, 0.64);
-  --dsx-runtime-accent-rift-shadow: rgba(139, 92, 246, 0.28);
-  --dsx-runtime-accent-rift-shadow-strong: rgba(139, 92, 246, 0.4);
-  --dsx-runtime-accent-rift-hover: rgba(139, 92, 246, 0.08);
-  --dsx-runtime-accent-rift-pressed: rgba(139, 92, 246, 0.16);
-  --dsx-runtime-accent-warp-9: #36ace2;
-  --dsx-runtime-accent-warp-10: #63bee8;
-  --dsx-runtime-accent-warp-11: #7ac8ec;
-  --dsx-runtime-accent-warp-12: #b8e2f5;
-  --dsx-runtime-accent-warp-primary: #36ace2;
-  --dsx-runtime-accent-warp-primary-container: #63bee8;
-  --dsx-runtime-accent-warp-on-primary: #14101f;
-  --dsx-runtime-accent-warp-on-primary-container: #0a3447;
-  --dsx-runtime-accent-warp-indicator: #7ac8ec;
-  --dsx-runtime-accent-warp-surface: rgba(184, 226, 245, 0.18);
-  --dsx-runtime-accent-warp-contrast: #14101f;
-  --dsx-runtime-accent-warp-track: color-mix(in srgb, #63bee8 35%, #36ace2);
-  --dsx-runtime-accent-warp-ring-focus: rgba(54, 172, 226, 0.64);
-  --dsx-runtime-accent-warp-shadow: rgba(54, 172, 226, 0.28);
-  --dsx-runtime-accent-warp-shadow-strong: rgba(54, 172, 226, 0.4);
-  --dsx-runtime-accent-warp-hover: rgba(54, 172, 226, 0.08);
-  --dsx-runtime-accent-warp-pressed: rgba(54, 172, 226, 0.16);
-  --dsx-runtime-accent-ray-9: #d663de;
-  --dsx-runtime-accent-ray-10: #e18de7;
-  --dsx-runtime-accent-ray-11: #e7a3ec;
-  --dsx-runtime-accent-ray-12: #f6def8;
-  --dsx-runtime-accent-ray-primary: #d663de;
-  --dsx-runtime-accent-ray-primary-container: #e18de7;
-  --dsx-runtime-accent-ray-on-primary: #14101f;
-  --dsx-runtime-accent-ray-on-primary-container: #601565;
-  --dsx-runtime-accent-ray-indicator: #e7a3ec;
-  --dsx-runtime-accent-ray-surface: rgba(246, 222, 248, 0.18);
-  --dsx-runtime-accent-ray-contrast: #14101f;
-  --dsx-runtime-accent-ray-track: color-mix(in srgb, #e18de7 35%, #d663de);
-  --dsx-runtime-accent-ray-ring-focus: rgba(214, 99, 222, 0.64);
-  --dsx-runtime-accent-ray-shadow: rgba(214, 99, 222, 0.28);
-  --dsx-runtime-accent-ray-shadow-strong: rgba(214, 99, 222, 0.4);
-  --dsx-runtime-accent-ray-hover: rgba(214, 99, 222, 0.08);
-  --dsx-runtime-accent-ray-pressed: rgba(214, 99, 222, 0.16);
-}
-
-[data-dsx-theme='light'] {
-  --dsx-runtime-accent-rift-9: #8b5cf6;
-  --dsx-runtime-accent-rift-10: #7c3aed;
-  --dsx-runtime-accent-rift-11: #6d28d9;
-  --dsx-runtime-accent-rift-12: #3b1774;
-  --dsx-runtime-accent-rift-primary: #8b5cf6;
-  --dsx-runtime-accent-rift-primary-container: #e4d9fc;
-  --dsx-runtime-accent-rift-on-primary: #14101f;
-  --dsx-runtime-accent-rift-on-primary-container: #3b1774;
-  --dsx-runtime-accent-rift-indicator: #3b1774;
-  --dsx-runtime-accent-rift-surface: rgba(59, 23, 116, 0.14);
-  --dsx-runtime-accent-rift-contrast: #14101f;
-  --dsx-runtime-accent-rift-track: color-mix(in srgb, #a47ce8 30%, #8b5cf6);
-  --dsx-runtime-accent-rift-ring-focus: rgba(139, 92, 246, 0.56);
-  --dsx-runtime-accent-rift-shadow: rgba(139, 92, 246, 0.24);
-  --dsx-runtime-accent-rift-shadow-strong: rgba(139, 92, 246, 0.36);
-  --dsx-runtime-accent-rift-hover: rgba(139, 92, 246, 0.06);
-  --dsx-runtime-accent-rift-pressed: rgba(139, 92, 246, 0.12);
-  --dsx-runtime-accent-warp-9: #36ace2;
-  --dsx-runtime-accent-warp-10: #1e98cf;
-  --dsx-runtime-accent-warp-11: #197fae;
-  --dsx-runtime-accent-warp-12: #0a3447;
-  --dsx-runtime-accent-warp-primary: #36ace2;
-  --dsx-runtime-accent-warp-primary-container: #dbe9f0;
-  --dsx-runtime-accent-warp-on-primary: #14101f;
-  --dsx-runtime-accent-warp-on-primary-container: #0a3447;
-  --dsx-runtime-accent-warp-indicator: #0a3447;
-  --dsx-runtime-accent-warp-surface: rgba(10, 52, 71, 0.14);
-  --dsx-runtime-accent-warp-contrast: #14101f;
-  --dsx-runtime-accent-warp-track: color-mix(in srgb, #1e98cf 30%, #36ace2);
-  --dsx-runtime-accent-warp-ring-focus: rgba(54, 172, 226, 0.56);
-  --dsx-runtime-accent-warp-shadow: rgba(54, 172, 226, 0.24);
-  --dsx-runtime-accent-warp-shadow-strong: rgba(54, 172, 226, 0.36);
-  --dsx-runtime-accent-warp-hover: rgba(54, 172, 226, 0.06);
-  --dsx-runtime-accent-warp-pressed: rgba(54, 172, 226, 0.12);
-  --dsx-runtime-accent-ray-9: #d663de;
-  --dsx-runtime-accent-ray-10: #cd40d7;
-  --dsx-runtime-accent-ray-11: #bc2ac6;
-  --dsx-runtime-accent-ray-12: #601565;
-  --dsx-runtime-accent-ray-primary: #d663de;
-  --dsx-runtime-accent-ray-primary-container: #eddcef;
-  --dsx-runtime-accent-ray-on-primary: #14101f;
-  --dsx-runtime-accent-ray-on-primary-container: #601565;
-  --dsx-runtime-accent-ray-indicator: #601565;
-  --dsx-runtime-accent-ray-surface: rgba(96, 21, 101, 0.14);
-  --dsx-runtime-accent-ray-contrast: #14101f;
-  --dsx-runtime-accent-ray-track: color-mix(in srgb, #cd40d7 30%, #d663de);
-  --dsx-runtime-accent-ray-ring-focus: rgba(214, 99, 222, 0.56);
-  --dsx-runtime-accent-ray-shadow: rgba(214, 99, 222, 0.24);
-  --dsx-runtime-accent-ray-shadow-strong: rgba(214, 99, 222, 0.36);
-  --dsx-runtime-accent-ray-hover: rgba(214, 99, 222, 0.06);
-  --dsx-runtime-accent-ray-pressed: rgba(214, 99, 222, 0.12);
-}
-
-[data-accent-color='rift'] {
-  --dsx-color-accent-9: var(--dsx-runtime-accent-rift-9);
-  --dsx-color-accent-10: var(--dsx-runtime-accent-rift-10);
-  --dsx-color-accent-11: var(--dsx-runtime-accent-rift-11);
-  --dsx-color-accent-12: var(--dsx-runtime-accent-rift-12);
-  --dsx-color-primary: var(--dsx-runtime-accent-rift-primary);
-  --dsx-color-primary-container: var(--dsx-runtime-accent-rift-primary-container);
-  --dsx-color-on-primary: var(--dsx-runtime-accent-rift-on-primary);
-  --dsx-color-on-primary-container: var(--dsx-runtime-accent-rift-on-primary-container);
-  --dsx-color-accent-indicator: var(--dsx-runtime-accent-rift-indicator);
-  --dsx-color-accent-surface: var(--dsx-runtime-accent-rift-surface);
-  --dsx-color-accent-contrast: var(--dsx-runtime-accent-rift-contrast);
-  --dsx-color-accent-track: var(--dsx-runtime-accent-rift-track);
-  --dsx-effect-ring-focus: var(--dsx-runtime-accent-rift-ring-focus);
-  --dsx-effect-shadow-accent: var(--dsx-runtime-accent-rift-shadow);
-  --dsx-effect-shadow-accent-strong: var(--dsx-runtime-accent-rift-shadow-strong);
-  --dsx-effect-hover-primary: var(--dsx-runtime-accent-rift-hover);
-  --dsx-effect-pressed-primary: var(--dsx-runtime-accent-rift-pressed);
-}
-
-[data-accent-color='warp'] {
-  --dsx-color-accent-9: var(--dsx-runtime-accent-warp-9);
-  --dsx-color-accent-10: var(--dsx-runtime-accent-warp-10);
-  --dsx-color-accent-11: var(--dsx-runtime-accent-warp-11);
-  --dsx-color-accent-12: var(--dsx-runtime-accent-warp-12);
-  --dsx-color-primary: var(--dsx-runtime-accent-warp-primary);
-  --dsx-color-primary-container: var(--dsx-runtime-accent-warp-primary-container);
-  --dsx-color-on-primary: var(--dsx-runtime-accent-warp-on-primary);
-  --dsx-color-on-primary-container: var(--dsx-runtime-accent-warp-on-primary-container);
-  --dsx-color-accent-indicator: var(--dsx-runtime-accent-warp-indicator);
-  --dsx-color-accent-surface: var(--dsx-runtime-accent-warp-surface);
-  --dsx-color-accent-contrast: var(--dsx-runtime-accent-warp-contrast);
-  --dsx-color-accent-track: var(--dsx-runtime-accent-warp-track);
-  --dsx-effect-ring-focus: var(--dsx-runtime-accent-warp-ring-focus);
-  --dsx-effect-shadow-accent: var(--dsx-runtime-accent-warp-shadow);
-  --dsx-effect-shadow-accent-strong: var(--dsx-runtime-accent-warp-shadow-strong);
-  --dsx-effect-hover-primary: var(--dsx-runtime-accent-warp-hover);
-  --dsx-effect-pressed-primary: var(--dsx-runtime-accent-warp-pressed);
-}
-
-[data-accent-color='ray'] {
-  --dsx-color-accent-9: var(--dsx-runtime-accent-ray-9);
-  --dsx-color-accent-10: var(--dsx-runtime-accent-ray-10);
-  --dsx-color-accent-11: var(--dsx-runtime-accent-ray-11);
-  --dsx-color-accent-12: var(--dsx-runtime-accent-ray-12);
-  --dsx-color-primary: var(--dsx-runtime-accent-ray-primary);
-  --dsx-color-primary-container: var(--dsx-runtime-accent-ray-primary-container);
-  --dsx-color-on-primary: var(--dsx-runtime-accent-ray-on-primary);
-  --dsx-color-on-primary-container: var(--dsx-runtime-accent-ray-on-primary-container);
-  --dsx-color-accent-indicator: var(--dsx-runtime-accent-ray-indicator);
-  --dsx-color-accent-surface: var(--dsx-runtime-accent-ray-surface);
-  --dsx-color-accent-contrast: var(--dsx-runtime-accent-ray-contrast);
-  --dsx-color-accent-track: var(--dsx-runtime-accent-ray-track);
-  --dsx-effect-ring-focus: var(--dsx-runtime-accent-ray-ring-focus);
-  --dsx-effect-shadow-accent: var(--dsx-runtime-accent-ray-shadow);
-  --dsx-effect-shadow-accent-strong: var(--dsx-runtime-accent-ray-shadow-strong);
-  --dsx-effect-hover-primary: var(--dsx-runtime-accent-ray-hover);
-  --dsx-effect-pressed-primary: var(--dsx-runtime-accent-ray-pressed);
-}
-
 [data-dsx-theme='light'] {
   --dsx-effect-hover-primary: var(--dsx-effect-hover-emphasis-layer);
   --dsx-effect-pressed-primary: var(--dsx-effect-pressed-layer);
   --dsx-effect-hover-ghost: var(--dsx-effect-hover-layer);
   --dsx-opacity-disabled: 0.5;
+  /* F2: light structural edges are the softer outline-variant (matches the
+     pre-F2 [data-dsx-theme='light'] .dsx-card / .dsx-alert override). */
+  --dsx-boundary-structural-color: var(--dsx-color-outline-variant);
   /* Lighter overlay for light mode */
   --dsx-effect-overlay: rgba(44, 47, 61, 0.4);
   --dsx-effect-overlay-backdrop-filter: blur(2px);
   /* Segmented/tabs indicator: in light mode, surface (lighter) sits above surface-raised (track). */
   --dsx-control-active-background: var(--dsx-color-surface);
   --dsx-control-active-border: var(--dsx-color-outline);
+  /* Glass edges stay outline-variant on light: the white rim token designed
+     for dark glass would dissolve into the light page. */
+  --dsx-color-panel-border-translucent: var(--dsx-color-outline-variant);
 }
 
 [data-dsx-theme='dark'][data-gray-color='neutral'] {