@d4gger/design-system 3.0.1 → 4.0.0

package/dist/tokens.css

@@ -192,6 +192,7 @@
   --dsx-color-accent-surface: rgba(40, 0, 93, 0.2);
   --dsx-color-border-subtle: #333640;
   --dsx-color-border-strong: #565b70;
+  --dsx-color-accent-border: #bfb1ff;
   --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);
@@ -229,6 +230,7 @@
   --dsx-drawer-min-height-lg: 50vh;
   --dsx-drawer-min-height-full: 100vh;
   --dsx-rich-text-editor-min-height: 220px;
+  --dsx-rich-text-editor-link-popover-width: 320px;
   --dsx-empty-state-max-width: 600px;
   --dsx-empty-state-min-height: 400px;
   --dsx-input-otp-slot-width: 36px;
@@ -426,146 +428,76 @@
   --dsx-z-index-overlay: 80;
   --dsx-z-index-modal: 90;
   --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);
+  --dsx-_accent-rift-primary: var(--dsx-color-accent-rift-9);
+  --dsx-_accent-rift-primary-container: var(--dsx-color-accent-rift-3);
+  --dsx-_accent-rift-on-primary: #ffffff;
+  --dsx-_accent-rift-on-primary-container: var(--dsx-color-accent-rift-11);
+  --dsx-_accent-rift-accent-indicator: var(--dsx-color-accent-rift-11);
+  --dsx-_accent-rift-accent-border: var(--dsx-color-accent-rift-11);
+  --dsx-_accent-rift-accent-track: var(--dsx-color-accent-rift-9);
+  --dsx-_accent-rift-accent-contrast: #ffffff;
+  --dsx-_accent-rift-accent-surface: color-mix(in srgb, var(--dsx-color-accent-rift-3) 20%, transparent);
+  --dsx-_accent-rift-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-rift-9) 64%, transparent);
+  --dsx-_accent-rift-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-rift-9) 28%, transparent);
+  --dsx-_accent-rift-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-rift-9) 40%, transparent);
+  --dsx-_accent-rift-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 8%, transparent);
+  --dsx-_accent-rift-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 16%, transparent);
+  --dsx-_accent-warp-primary: var(--dsx-color-accent-warp-9);
+  --dsx-_accent-warp-primary-container: var(--dsx-color-accent-warp-3);
+  --dsx-_accent-warp-on-primary: #ffffff;
+  --dsx-_accent-warp-on-primary-container: var(--dsx-color-accent-warp-11);
+  --dsx-_accent-warp-accent-indicator: var(--dsx-color-accent-warp-11);
+  --dsx-_accent-warp-accent-border: var(--dsx-color-accent-warp-11);
+  --dsx-_accent-warp-accent-track: var(--dsx-color-accent-warp-9);
+  --dsx-_accent-warp-accent-contrast: #ffffff;
+  --dsx-_accent-warp-accent-surface: color-mix(in srgb, var(--dsx-color-accent-warp-3) 20%, transparent);
+  --dsx-_accent-warp-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-warp-9) 64%, transparent);
+  --dsx-_accent-warp-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-warp-9) 28%, transparent);
+  --dsx-_accent-warp-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-warp-9) 40%, transparent);
+  --dsx-_accent-warp-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-warp-9) 8%, transparent);
+  --dsx-_accent-warp-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-warp-9) 16%, transparent);
+  --dsx-_accent-ray-primary: var(--dsx-color-accent-ray-9);
+  --dsx-_accent-ray-primary-container: var(--dsx-color-accent-ray-3);
+  --dsx-_accent-ray-on-primary: #ffffff;
+  --dsx-_accent-ray-on-primary-container: var(--dsx-color-accent-ray-11);
+  --dsx-_accent-ray-accent-indicator: var(--dsx-color-accent-ray-11);
+  --dsx-_accent-ray-accent-border: var(--dsx-color-accent-ray-11);
+  --dsx-_accent-ray-accent-track: var(--dsx-color-accent-ray-9);
+  --dsx-_accent-ray-accent-contrast: #ffffff;
+  --dsx-_accent-ray-accent-surface: color-mix(in srgb, var(--dsx-color-accent-ray-3) 20%, transparent);
+  --dsx-_accent-ray-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-ray-9) 64%, transparent);
+  --dsx-_accent-ray-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-ray-9) 28%, transparent);
+  --dsx-_accent-ray-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-ray-9) 40%, transparent);
+  --dsx-_accent-ray-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-ray-9) 8%, transparent);
+  --dsx-_accent-ray-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-ray-9) 16%, transparent);
+  --dsx-_accent-astral-primary: var(--dsx-color-accent-astral-9);
+  --dsx-_accent-astral-primary-container: var(--dsx-color-accent-astral-3);
+  --dsx-_accent-astral-on-primary: #ffffff;
+  --dsx-_accent-astral-on-primary-container: var(--dsx-color-accent-astral-11);
+  --dsx-_accent-astral-accent-indicator: var(--dsx-color-accent-astral-11);
+  --dsx-_accent-astral-accent-border: var(--dsx-color-accent-astral-11);
+  --dsx-_accent-astral-accent-track: var(--dsx-color-accent-astral-9);
+  --dsx-_accent-astral-accent-contrast: #ffffff;
+  --dsx-_accent-astral-accent-surface: color-mix(in srgb, var(--dsx-color-accent-astral-3) 20%, transparent);
+  --dsx-_accent-astral-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-astral-9) 64%, transparent);
+  --dsx-_accent-astral-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-astral-9) 28%, transparent);
+  --dsx-_accent-astral-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-astral-9) 40%, transparent);
+  --dsx-_accent-astral-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-astral-9) 8%, transparent);
+  --dsx-_accent-astral-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-astral-9) 16%, transparent);
+  --dsx-_accent-spark-primary: var(--dsx-color-accent-spark-9);
+  --dsx-_accent-spark-primary-container: var(--dsx-color-accent-spark-3);
+  --dsx-_accent-spark-on-primary: #0c0d12;
+  --dsx-_accent-spark-on-primary-container: var(--dsx-color-accent-spark-11);
+  --dsx-_accent-spark-accent-indicator: var(--dsx-color-accent-spark-11);
+  --dsx-_accent-spark-accent-border: var(--dsx-color-accent-spark-11);
+  --dsx-_accent-spark-accent-track: var(--dsx-color-accent-spark-9);
+  --dsx-_accent-spark-accent-contrast: #0c0d12;
+  --dsx-_accent-spark-accent-surface: color-mix(in srgb, var(--dsx-color-accent-spark-3) 20%, transparent);
+  --dsx-_accent-spark-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-spark-9) 64%, transparent);
+  --dsx-_accent-spark-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-spark-9) 28%, transparent);
+  --dsx-_accent-spark-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-spark-9) 40%, transparent);
+  --dsx-_accent-spark-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-spark-9) 8%, transparent);
+  --dsx-_accent-spark-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-spark-9) 16%, transparent);
 }
 
 [data-dsx-theme="light"] {
@@ -583,7 +515,7 @@
   --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-indicator: #5211ac;
   --dsx-color-accent-track: #8553f6;
   --dsx-color-gray-1: #fbfbfc;
   --dsx-color-gray-2: #f4f5f7;
@@ -756,12 +688,13 @@
   --dsx-color-info-10: #2689c7;
   --dsx-color-info-11: #004c76;
   --dsx-color-info-12: #00243b;
-  --dsx-color-accent-indicator: #28005d;
+  --dsx-color-accent-indicator: #5211ac;
   --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-color-accent-border: #9672ff;
   --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);
@@ -781,10 +714,79 @@
   --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);
+  --dsx-_accent-rift-primary: var(--dsx-color-accent-rift-9);
+  --dsx-_accent-rift-primary-container: var(--dsx-color-accent-rift-4);
+  --dsx-_accent-rift-on-primary: #ffffff;
+  --dsx-_accent-rift-on-primary-container: var(--dsx-color-accent-rift-12);
+  --dsx-_accent-rift-accent-indicator: var(--dsx-color-accent-rift-11);
+  --dsx-_accent-rift-accent-border: var(--dsx-color-accent-rift-8);
+  --dsx-_accent-rift-accent-track: var(--dsx-color-accent-rift-9);
+  --dsx-_accent-rift-accent-contrast: #ffffff;
+  --dsx-_accent-rift-accent-surface: color-mix(in srgb, var(--dsx-color-accent-rift-3) 20%, transparent);
+  --dsx-_accent-rift-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-rift-9) 56%, transparent);
+  --dsx-_accent-rift-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-rift-9) 24%, transparent);
+  --dsx-_accent-rift-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-rift-9) 36%, transparent);
+  --dsx-_accent-rift-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 6%, transparent);
+  --dsx-_accent-rift-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 12%, transparent);
+  --dsx-_accent-warp-primary: var(--dsx-color-accent-warp-9);
+  --dsx-_accent-warp-primary-container: var(--dsx-color-accent-warp-4);
+  --dsx-_accent-warp-on-primary: #ffffff;
+  --dsx-_accent-warp-on-primary-container: var(--dsx-color-accent-warp-12);
+  --dsx-_accent-warp-accent-indicator: var(--dsx-color-accent-warp-11);
+  --dsx-_accent-warp-accent-border: var(--dsx-color-accent-warp-8);
+  --dsx-_accent-warp-accent-track: var(--dsx-color-accent-warp-9);
+  --dsx-_accent-warp-accent-contrast: #ffffff;
+  --dsx-_accent-warp-accent-surface: color-mix(in srgb, var(--dsx-color-accent-warp-3) 20%, transparent);
+  --dsx-_accent-warp-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-warp-9) 56%, transparent);
+  --dsx-_accent-warp-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-warp-9) 24%, transparent);
+  --dsx-_accent-warp-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-warp-9) 36%, transparent);
+  --dsx-_accent-warp-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-warp-9) 6%, transparent);
+  --dsx-_accent-warp-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-warp-9) 12%, transparent);
+  --dsx-_accent-ray-primary: var(--dsx-color-accent-ray-9);
+  --dsx-_accent-ray-primary-container: var(--dsx-color-accent-ray-4);
+  --dsx-_accent-ray-on-primary: #ffffff;
+  --dsx-_accent-ray-on-primary-container: var(--dsx-color-accent-ray-12);
+  --dsx-_accent-ray-accent-indicator: var(--dsx-color-accent-ray-11);
+  --dsx-_accent-ray-accent-border: var(--dsx-color-accent-ray-8);
+  --dsx-_accent-ray-accent-track: var(--dsx-color-accent-ray-9);
+  --dsx-_accent-ray-accent-contrast: #ffffff;
+  --dsx-_accent-ray-accent-surface: color-mix(in srgb, var(--dsx-color-accent-ray-3) 20%, transparent);
+  --dsx-_accent-ray-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-ray-9) 56%, transparent);
+  --dsx-_accent-ray-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-ray-9) 24%, transparent);
+  --dsx-_accent-ray-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-ray-9) 36%, transparent);
+  --dsx-_accent-ray-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-ray-9) 6%, transparent);
+  --dsx-_accent-ray-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-ray-9) 12%, transparent);
+  --dsx-_accent-astral-primary: var(--dsx-color-accent-astral-9);
+  --dsx-_accent-astral-primary-container: var(--dsx-color-accent-astral-4);
+  --dsx-_accent-astral-on-primary: #ffffff;
+  --dsx-_accent-astral-on-primary-container: var(--dsx-color-accent-astral-12);
+  --dsx-_accent-astral-accent-indicator: var(--dsx-color-accent-astral-11);
+  --dsx-_accent-astral-accent-border: var(--dsx-color-accent-astral-8);
+  --dsx-_accent-astral-accent-track: var(--dsx-color-accent-astral-9);
+  --dsx-_accent-astral-accent-contrast: #ffffff;
+  --dsx-_accent-astral-accent-surface: color-mix(in srgb, var(--dsx-color-accent-astral-3) 20%, transparent);
+  --dsx-_accent-astral-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-astral-9) 56%, transparent);
+  --dsx-_accent-astral-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-astral-9) 24%, transparent);
+  --dsx-_accent-astral-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-astral-9) 36%, transparent);
+  --dsx-_accent-astral-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-astral-9) 6%, transparent);
+  --dsx-_accent-astral-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-astral-9) 12%, transparent);
+  --dsx-_accent-spark-primary: var(--dsx-color-accent-spark-9);
+  --dsx-_accent-spark-primary-container: var(--dsx-color-accent-spark-4);
+  --dsx-_accent-spark-on-primary: #0c0d12;
+  --dsx-_accent-spark-on-primary-container: var(--dsx-color-accent-spark-12);
+  --dsx-_accent-spark-accent-indicator: var(--dsx-color-accent-spark-11);
+  --dsx-_accent-spark-accent-border: var(--dsx-color-accent-spark-8);
+  --dsx-_accent-spark-accent-track: var(--dsx-color-accent-spark-9);
+  --dsx-_accent-spark-accent-contrast: #0c0d12;
+  --dsx-_accent-spark-accent-surface: color-mix(in srgb, var(--dsx-color-accent-spark-3) 20%, transparent);
+  --dsx-_accent-spark-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-spark-9) 56%, transparent);
+  --dsx-_accent-spark-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-spark-9) 24%, transparent);
+  --dsx-_accent-spark-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-spark-9) 36%, transparent);
+  --dsx-_accent-spark-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-spark-9) 6%, transparent);
+  --dsx-_accent-spark-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-spark-9) 12%, transparent);
 }
 
-[data-dsx-theme="light"] [data-accent-color='rift'],
-[data-dsx-theme="light"][data-accent-color='rift'] {
+[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);
@@ -797,23 +799,23 @@
   --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);
+  --dsx-color-primary: var(--dsx-_accent-rift-primary);
+  --dsx-color-primary-container: var(--dsx-_accent-rift-primary-container);
+  --dsx-color-on-primary: var(--dsx-_accent-rift-on-primary);
+  --dsx-color-on-primary-container: var(--dsx-_accent-rift-on-primary-container);
+  --dsx-color-accent-indicator: var(--dsx-_accent-rift-accent-indicator);
+  --dsx-color-accent-border: var(--dsx-_accent-rift-accent-border);
+  --dsx-color-accent-track: var(--dsx-_accent-rift-accent-track);
+  --dsx-color-accent-contrast: var(--dsx-_accent-rift-accent-contrast);
+  --dsx-color-accent-surface: var(--dsx-_accent-rift-accent-surface);
+  --dsx-effect-ring-focus: var(--dsx-_accent-rift-effect-ring-focus);
+  --dsx-effect-shadow-accent: var(--dsx-_accent-rift-effect-shadow-accent);
+  --dsx-effect-shadow-accent-strong: var(--dsx-_accent-rift-effect-shadow-accent-strong);
+  --dsx-effect-hover-primary: var(--dsx-_accent-rift-effect-hover-primary);
+  --dsx-effect-pressed-primary: var(--dsx-_accent-rift-effect-pressed-primary);
 }
 
-[data-dsx-theme="light"] [data-accent-color='warp'],
-[data-dsx-theme="light"][data-accent-color='warp'] {
+[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);
@@ -826,23 +828,23 @@
   --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);
+  --dsx-color-primary: var(--dsx-_accent-warp-primary);
+  --dsx-color-primary-container: var(--dsx-_accent-warp-primary-container);
+  --dsx-color-on-primary: var(--dsx-_accent-warp-on-primary);
+  --dsx-color-on-primary-container: var(--dsx-_accent-warp-on-primary-container);
+  --dsx-color-accent-indicator: var(--dsx-_accent-warp-accent-indicator);
+  --dsx-color-accent-border: var(--dsx-_accent-warp-accent-border);
+  --dsx-color-accent-track: var(--dsx-_accent-warp-accent-track);
+  --dsx-color-accent-contrast: var(--dsx-_accent-warp-accent-contrast);
+  --dsx-color-accent-surface: var(--dsx-_accent-warp-accent-surface);
+  --dsx-effect-ring-focus: var(--dsx-_accent-warp-effect-ring-focus);
+  --dsx-effect-shadow-accent: var(--dsx-_accent-warp-effect-shadow-accent);
+  --dsx-effect-shadow-accent-strong: var(--dsx-_accent-warp-effect-shadow-accent-strong);
+  --dsx-effect-hover-primary: var(--dsx-_accent-warp-effect-hover-primary);
+  --dsx-effect-pressed-primary: var(--dsx-_accent-warp-effect-pressed-primary);
 }
 
-[data-dsx-theme="light"] [data-accent-color='ray'],
-[data-dsx-theme="light"][data-accent-color='ray'] {
+[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);
@@ -855,23 +857,23 @@
   --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);
+  --dsx-color-primary: var(--dsx-_accent-ray-primary);
+  --dsx-color-primary-container: var(--dsx-_accent-ray-primary-container);
+  --dsx-color-on-primary: var(--dsx-_accent-ray-on-primary);
+  --dsx-color-on-primary-container: var(--dsx-_accent-ray-on-primary-container);
+  --dsx-color-accent-indicator: var(--dsx-_accent-ray-accent-indicator);
+  --dsx-color-accent-border: var(--dsx-_accent-ray-accent-border);
+  --dsx-color-accent-track: var(--dsx-_accent-ray-accent-track);
+  --dsx-color-accent-contrast: var(--dsx-_accent-ray-accent-contrast);
+  --dsx-color-accent-surface: var(--dsx-_accent-ray-accent-surface);
+  --dsx-effect-ring-focus: var(--dsx-_accent-ray-effect-ring-focus);
+  --dsx-effect-shadow-accent: var(--dsx-_accent-ray-effect-shadow-accent);
+  --dsx-effect-shadow-accent-strong: var(--dsx-_accent-ray-effect-shadow-accent-strong);
+  --dsx-effect-hover-primary: var(--dsx-_accent-ray-effect-hover-primary);
+  --dsx-effect-pressed-primary: var(--dsx-_accent-ray-effect-pressed-primary);
 }
 
-[data-dsx-theme="light"] [data-accent-color='astral'],
-[data-dsx-theme="light"][data-accent-color='astral'] {
+[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);
@@ -884,23 +886,23 @@
   --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);
+  --dsx-color-primary: var(--dsx-_accent-astral-primary);
+  --dsx-color-primary-container: var(--dsx-_accent-astral-primary-container);
+  --dsx-color-on-primary: var(--dsx-_accent-astral-on-primary);
+  --dsx-color-on-primary-container: var(--dsx-_accent-astral-on-primary-container);
+  --dsx-color-accent-indicator: var(--dsx-_accent-astral-accent-indicator);
+  --dsx-color-accent-border: var(--dsx-_accent-astral-accent-border);
+  --dsx-color-accent-track: var(--dsx-_accent-astral-accent-track);
+  --dsx-color-accent-contrast: var(--dsx-_accent-astral-accent-contrast);
+  --dsx-color-accent-surface: var(--dsx-_accent-astral-accent-surface);
+  --dsx-effect-ring-focus: var(--dsx-_accent-astral-effect-ring-focus);
+  --dsx-effect-shadow-accent: var(--dsx-_accent-astral-effect-shadow-accent);
+  --dsx-effect-shadow-accent-strong: var(--dsx-_accent-astral-effect-shadow-accent-strong);
+  --dsx-effect-hover-primary: var(--dsx-_accent-astral-effect-hover-primary);
+  --dsx-effect-pressed-primary: var(--dsx-_accent-astral-effect-pressed-primary);
 }
 
-[data-dsx-theme="light"] [data-accent-color='spark'],
-[data-dsx-theme="light"][data-accent-color='spark'] {
+[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);
@@ -913,19 +915,20 @@
   --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);
+  --dsx-color-primary: var(--dsx-_accent-spark-primary);
+  --dsx-color-primary-container: var(--dsx-_accent-spark-primary-container);
+  --dsx-color-on-primary: var(--dsx-_accent-spark-on-primary);
+  --dsx-color-on-primary-container: var(--dsx-_accent-spark-on-primary-container);
+  --dsx-color-accent-indicator: var(--dsx-_accent-spark-accent-indicator);
+  --dsx-color-accent-border: var(--dsx-_accent-spark-accent-border);
+  --dsx-color-accent-track: var(--dsx-_accent-spark-accent-track);
+  --dsx-color-accent-contrast: var(--dsx-_accent-spark-accent-contrast);
+  --dsx-color-accent-surface: var(--dsx-_accent-spark-accent-surface);
+  --dsx-effect-ring-focus: var(--dsx-_accent-spark-effect-ring-focus);
+  --dsx-effect-shadow-accent: var(--dsx-_accent-spark-effect-shadow-accent);
+  --dsx-effect-shadow-accent-strong: var(--dsx-_accent-spark-effect-shadow-accent-strong);
+  --dsx-effect-hover-primary: var(--dsx-_accent-spark-effect-hover-primary);
+  --dsx-effect-pressed-primary: var(--dsx-_accent-spark-effect-pressed-primary);
 }
 
 
@@ -946,7 +949,6 @@
   --dsx-breakpoint-lg: 1024px;
   --dsx-breakpoint-xl: 1280px;
   --dsx-breakpoint-2xl: 1536px;
-  --dsx-backdrop-blur-sm: var(--dsx-effect-overlay-backdrop-blur);
   --dsx-shadow-offset-xs: 1px;
   --dsx-shadow-offset-sm: 4px;
   --dsx-shadow-offset-md: 12px;
@@ -981,8 +983,6 @@
   --dsx-resizable-grip-height: var(--dsx-size-xs);
   --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
@@ -998,51 +998,12 @@
      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).     */
-  /* Light mode override below flips this since the elevation hierarchy inverts.  */
-  --dsx-control-active-background: var(--dsx-color-surface-overlay);
-  --dsx-control-active-foreground: var(--dsx-color-on-surface);
-  --dsx-control-active-border: var(--dsx-color-outline-variant);
-  --dsx-shadow-active-indicator: inset 0 calc(-1 * var(--dsx-border-width-lg)) 0 0 var(--dsx-color-high-contrast-border);
-  --dsx-menu-item-hover-background: var(--dsx-color-high-contrast-container);
-  --dsx-menu-item-hover-foreground: var(--dsx-color-high-contrast);
-  --dsx-menu-item-selected-background: var(--dsx-color-surface);
-  --dsx-menu-item-selected-foreground: var(--dsx-color-high-contrast);
-
-  /* Panel backgrounds — referenced by baseDialog.css */
-  --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);
-  /* 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);
-  --dsx-color-surface-hover: var(--dsx-effect-hover-primary);
-
-  --dsx-accent-contrast: var(--dsx-color-accent-contrast);
-  --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-stepper-connector-thickness: var(--dsx-border-width-lg);
   --dsx-stepper-content-offset: var(--dsx-space-0-5);
   --dsx-switch-padding: var(--dsx-space-0-5);
@@ -1053,12 +1014,14 @@
   --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
+
+  /* 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);
+  --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;
@@ -1071,76 +1034,15 @@
   --dsx-space-0-5: 2px;
   --dsx-space-1-5: 6px;
 
-  /* ── Shadow elevation ───────────────────────────────────────────────── */
-  /* These bridge to the effect-shadow palette. When generated/tokens.css   */
-  /* is updated from the design source, identical names there will take     */
-  /* precedence (generated is imported first at the top of this file).      */
-  --dsx-shadow-elevation-1: var(--dsx-effect-shadow-1);
-  --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 ────────────────────────────────────────────── */
-  --dsx-shadow-focus-ring: 0 0 0 3px var(--dsx-effect-ring-focus);
-  --dsx-shadow-inset-outline: inset 0 0 0 var(--dsx-border-width-sm) var(--dsx-color-outline);
-  --dsx-shadow-active-inset-outline: inset 0 calc(-1 * var(--dsx-border-width-lg)) 0 0 var(--dsx-color-accent-indicator);
-  --dsx-shadow-accent-ring: 0 0 0 3px var(--dsx-effect-shadow-accent);
-  --dsx-shadow-accent-ring-strong: 0 0 0 4px var(--dsx-effect-shadow-accent-strong);
-  --dsx-shadow-accent-glow: 0 4px 16px var(--dsx-effect-shadow-accent);
-  --dsx-shadow-color-swatch-shadow: 0 2px 4px var(--dsx-color-shadow);
-
-  /* ── Overlay (dark default) ─────────────────────────────────────────── */
-  --dsx-effect-overlay: rgba(8, 9, 12, 0.72);
-  --dsx-effect-overlay-backdrop-filter: blur(4px);
-
   /* ── Panel backdrop filters ─────────────────────────────────────────── */
   --dsx-effect-panel-glass-backdrop-filter: blur(16px) saturate(1.6);
   --dsx-effect-panel-solid-backdrop-filter: none;
 
-  /* ── Alpha effect layers ────────────────────────────────────────────── */
-  /* Derived via color-mix so they adapt to accent-color overrides.         */
-  --dsx-effect-accent-alpha-3: color-mix(in srgb, var(--dsx-color-primary) 12%, transparent);
-  --dsx-effect-accent-alpha-4: color-mix(in srgb, var(--dsx-color-primary) 18%, transparent);
-  --dsx-effect-accent-alpha-8: color-mix(in srgb, var(--dsx-color-primary) 40%, transparent);
-  --dsx-effect-gray-alpha-2: color-mix(in srgb, var(--dsx-color-gray-12) 6%, transparent);
-  --dsx-effect-gray-alpha-3: color-mix(in srgb, var(--dsx-color-gray-12) 10%, transparent);
-  --dsx-effect-gray-alpha-4: color-mix(in srgb, var(--dsx-color-gray-12) 15%, transparent);
-
-  /* ── Hover / press semantic layers ─────────────────────────────────── */
-  /* Defined here before the [data-dsx-theme='light'] block below uses     */
-  /* --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. 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-cursor-disabled: not-allowed;
   --dsx-cursor-not-allowed: not-allowed;
   --dsx-cursor-pointer: pointer;
   --dsx-cursor-wait: wait;
 
-  /* ── Shadow shorthand ───────────────────────────────────────────────── */
-  --dsx-shadow-card-md: 0 4px 16px var(--dsx-effect-shadow-card);
-
   /* ── Blur utilities ─────────────────────────────────────────────────── */
   --dsx-blur-md: blur(12px);
 
@@ -1153,57 +1055,37 @@
   /* ── Z-index extensions ─────────────────────────────────────────────── */
   --dsx-z-index-popover: 60;
 
-  /* ── Color extensions ───────────────────────────────────────────────── */
-  --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);
-
   /* ── Typography caption scale ───────────────────────────────────────── */
   --dsx-typography-caption-font-family: inherit;
   --dsx-typography-caption-font-size: 0.75rem;
   --dsx-typography-caption-font-weight: 400;
 
-  /* ── Semantic aliases (calendar / chart shadcn-port compat) ─────────── */
-  --dsx-semantic-border: var(--dsx-color-outline);
-  --dsx-semantic-card: var(--dsx-color-surface-raised);
-  --dsx-semantic-card-foreground: var(--dsx-color-on-surface);
-  --dsx-semantic-muted: var(--dsx-color-surface-sunken);
-  --dsx-semantic-muted-foreground: var(--dsx-color-on-surface-variant);
-  --dsx-semantic-primary: var(--dsx-color-primary);
-  --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). */
-  --dsx-chart-1: var(--dsx-color-primary);
-  --dsx-chart-2: var(--dsx-color-secondary);
-  --dsx-chart-3: var(--dsx-color-tertiary);
-  --dsx-chart-4: var(--dsx-color-success);
-  --dsx-chart-5: var(--dsx-color-error);
-
-  /* ── Surface context ────────────────────────────────────────────────── */
-  --dsx-color-surface-editor-subtle: var(--dsx-color-surface-sunken);
-  --dsx-color-surface-editor-toolbar: var(--dsx-color-surface-raised);
-  --dsx-color-surface-field-autofill: color-mix(in srgb, var(--dsx-color-primary) 5%, var(--dsx-color-surface));
-
   /* ── Typography extras ──────────────────────────────────────────────── */
   --dsx-typography-code-font-size: 0.875em;
   --dsx-typography-code-font-weight: 400;
   --dsx-typography-code-letter-spacing: -0.02em;
   --dsx-typography-code-line-height: 1.5;
   --dsx-typography-font-weight-bold: 700;
+
+  /* Existing typography weight utilities resolve through these aliases. */
+  --dsx-r-font-weight-light: 300;
+  --dsx-r-font-weight-regular: 400;
+  --dsx-r-font-weight-medium: 500;
+  --dsx-r-font-weight-bold: var(--dsx-typography-font-weight-bold);
   --dsx-typography-kbd-line-height: 1;
 }
 
@@ -1322,18 +1204,6 @@
   --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'] {
@@ -1374,4 +1244,116 @@
   --dsx-color-outline-variant: #aebccc;
   --dsx-color-disabled-border: #d5dde7;
   --dsx-color-disabled-text: #6b7d93;
+}
+
+/* Rebind paint aliases at local boundaries. Inherited var() aliases have
+   already resolved in the parent; changing a source color alone cannot update
+   the inherited ring, seam, shadow or effect. Keep non-paint defaults above. */
+:root,
+[data-dsx-theme],
+[data-accent-color],
+[data-gray-color] {
+  --dsx-backdrop-blur-sm: var(--dsx-effect-overlay-backdrop-blur);
+  --dsx-control-separator-color: var(--dsx-color-outline-variant);
+  --dsx-control-separator-color-strong: var(--dsx-color-outline);
+  --dsx-boundary-control-color: var(--dsx-color-outline);
+  --dsx-boundary-separator-color: var(--dsx-color-outline-variant);
+  --dsx-boundary-divider-color: var(--dsx-color-outline);
+  --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-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-control-active-foreground: var(--dsx-color-on-surface);
+  --dsx-shadow-active-indicator: inset 0 calc(-1 * var(--dsx-border-width-lg)) 0 0 var(--dsx-color-high-contrast-border);
+  --dsx-menu-item-hover-background: var(--dsx-color-high-contrast-container);
+  --dsx-menu-item-hover-foreground: var(--dsx-color-high-contrast);
+  --dsx-menu-item-selected-background: var(--dsx-color-surface);
+  --dsx-menu-item-selected-foreground: var(--dsx-color-high-contrast);
+  --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-effect-hover-layer: var(--dsx-effect-hover-primary);
+  --dsx-color-surface-hover: var(--dsx-effect-hover-primary);
+  --dsx-accent-contrast: var(--dsx-color-accent-contrast);
+  --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-shadow-elevation-1: var(--dsx-effect-shadow-1);
+  --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);
+  --dsx-shadow-focus-ring: 0 0 0 3px var(--dsx-effect-ring-focus);
+  --dsx-shadow-inset-outline: inset 0 0 0 var(--dsx-border-width-sm) var(--dsx-color-outline);
+  --dsx-shadow-active-inset-outline: inset 0 calc(-1 * var(--dsx-border-width-lg)) 0 0 var(--dsx-color-accent-indicator);
+  --dsx-shadow-accent-ring: 0 0 0 3px var(--dsx-effect-shadow-accent);
+  --dsx-shadow-accent-ring-strong: 0 0 0 4px var(--dsx-effect-shadow-accent-strong);
+  --dsx-shadow-accent-glow: 0 4px 16px var(--dsx-effect-shadow-accent);
+  --dsx-shadow-color-swatch-shadow: 0 2px 4px var(--dsx-color-shadow);
+  --dsx-effect-accent-alpha-3: color-mix(in srgb, var(--dsx-color-primary) 12%, transparent);
+  --dsx-effect-accent-alpha-4: color-mix(in srgb, var(--dsx-color-primary) 18%, transparent);
+  --dsx-effect-accent-alpha-8: color-mix(in srgb, var(--dsx-color-primary) 40%, transparent);
+  --dsx-effect-gray-alpha-2: color-mix(in srgb, var(--dsx-color-gray-12) 6%, transparent);
+  --dsx-effect-gray-alpha-3: color-mix(in srgb, var(--dsx-color-gray-12) 10%, transparent);
+  --dsx-code-soft-background: var(--dsx-effect-gray-alpha-3);
+  --dsx-effect-gray-alpha-4: color-mix(in srgb, var(--dsx-color-gray-12) 15%, transparent);
+  --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. 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);
+  --dsx-effect-disabled-layer: var(--dsx-color-disabled-surface);
+  --dsx-effect-disabled-checked-layer: color-mix(in srgb, var(--dsx-color-primary) 30%, transparent);
+  /* 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-shadow-card-md: 0 4px 16px var(--dsx-effect-shadow-card);
+  --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);
+  --dsx-semantic-border: var(--dsx-color-outline);
+  --dsx-semantic-card: var(--dsx-color-surface-raised);
+  --dsx-semantic-card-foreground: var(--dsx-color-on-surface);
+  --dsx-semantic-muted: var(--dsx-color-surface-sunken);
+  --dsx-semantic-muted-foreground: var(--dsx-color-on-surface-variant);
+  --dsx-semantic-primary: var(--dsx-color-primary);
+  --dsx-semantic-primary-foreground: var(--dsx-color-on-primary);
+  --dsx-semantic-ring: var(--dsx-shadow-focus-ring);
+  /* Chart.tsx cycles these per series (index % 5) + 1. Previously undefined,
+     so every Pie slice fell back to the SVG initial fill (black). */
+  --dsx-chart-1: var(--dsx-color-primary);
+  --dsx-chart-2: var(--dsx-color-secondary);
+  --dsx-chart-3: var(--dsx-color-tertiary);
+  --dsx-chart-4: var(--dsx-color-success);
+  --dsx-chart-5: var(--dsx-color-error);
+  --dsx-color-surface-editor-subtle: var(--dsx-color-surface-sunken);
+  --dsx-color-surface-editor-toolbar: var(--dsx-color-surface-raised);
+  --dsx-color-surface-field-autofill: color-mix(in srgb, var(--dsx-color-primary) 5%, var(--dsx-color-surface));
+}
+
+:root,
+[data-dsx-theme='dark'] {
+  --dsx-boundary-structural-color: var(--dsx-color-outline);
+  --dsx-control-active-background: var(--dsx-color-surface-overlay);
+  --dsx-control-active-border: var(--dsx-color-outline-variant);
+  --dsx-color-panel-border-translucent: var(--dsx-effect-panel-glass-border);
+  --dsx-effect-overlay: rgba(8, 9, 12, 0.72);
+  --dsx-effect-overlay-backdrop-filter: blur(4px);
+}
+
+[data-dsx-theme='light'] {
+  --dsx-effect-overlay: rgba(44, 47, 61, 0.4);
+  --dsx-effect-overlay-backdrop-filter: blur(2px);
+  --dsx-boundary-structural-color: var(--dsx-color-outline-variant);
+  --dsx-control-active-background: var(--dsx-color-surface);
+  --dsx-control-active-border: var(--dsx-color-outline);
+  --dsx-color-panel-border-translucent: var(--dsx-color-outline-variant);
 }