@d4gger/design-system 2.7.0

package/dist/tokens.css

@@ -0,0 +1,954 @@
+: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-gray-1: #0c0d12;
+  --dsx-color-gray-2: #131419;
+  --dsx-color-gray-3: #1a1c22;
+  --dsx-color-gray-4: #21232b;
+  --dsx-color-gray-5: #292c35;
+  --dsx-color-gray-6: #333640;
+  --dsx-color-gray-7: #40434f;
+  --dsx-color-gray-8: #565b70;
+  --dsx-color-gray-9: #6b7080;
+  --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-secondary: #9a92a8;
+  --dsx-color-secondary-container: #d8d3e0;
+  --dsx-color-on-secondary: #0c0d12;
+  --dsx-color-on-secondary-container: #5c5568;
+  --dsx-color-tertiary: #8fa3f0;
+  --dsx-color-tertiary-container: #33407a;
+  --dsx-color-on-tertiary: #081018;
+  --dsx-color-on-tertiary-container: #dbe2fb;
+  --dsx-color-background: #0c0d12;
+  --dsx-color-on-background: #eef0f4;
+  --dsx-color-surface: #191b21;
+  --dsx-color-surface-raised: #23252d;
+  --dsx-color-surface-overlay: #2e313b;
+  --dsx-color-surface-sunken: #0f1116;
+  --dsx-color-on-surface: #eef0f4;
+  --dsx-color-on-surface-variant: #aeb2bf;
+  --dsx-color-outline: #747a94;
+  --dsx-color-outline-variant: #40434f;
+  --dsx-color-shadow: #06070a;
+  --dsx-color-success: #4fc4bb;
+  --dsx-color-success-container: #7fe0d6;
+  --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-warning: #0c0d12;
+  --dsx-color-on-warning-container: #f4d7e9;
+  --dsx-color-info: #5aa8e0;
+  --dsx-color-info-container: #2f5f8f;
+  --dsx-color-on-info: #081018;
+  --dsx-color-on-info-container: #cfe8fb;
+  --dsx-color-disabled-text: #8b90a3;
+  --dsx-color-disabled-border: #292c35;
+  --dsx-color-disabled-surface: #333640;
+  --dsx-color-high-contrast: #ede9fe;
+  --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-text-inverse: #0c0d12;
+  --dsx-color-inverse-background: #ede9fe;
+  --dsx-color-on-inverse-background: #0c0d12;
+  --dsx-color-inverse-surface: color-mix(in srgb, #ede9fe 12%, transparent);
+  --dsx-color-on-inverse-surface: #0c0d12;
+  --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-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-motion-duration-fast: 150ms;
+  --dsx-motion-duration-normal: 250ms;
+  --dsx-motion-duration-slow: 350ms;
+  --dsx-motion-duration-spin: 900ms;
+  --dsx-motion-duration-blink: 1000ms;
+  --dsx-motion-duration-shimmer: 1400ms;
+  --dsx-motion-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --dsx-motion-easing-out: cubic-bezier(0, 0, 0.2, 1);
+  --dsx-motion-easing-in: cubic-bezier(0.4, 0, 1, 1);
+  --dsx-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --dsx-motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --dsx-motion-easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
+  --dsx-opacity-disabled: 0.38;
+  --dsx-opacity-hover: 0.08;
+  --dsx-opacity-pressed: 0.16;
+  --dsx-opacity-subtle: 0.85;
+  --dsx-opacity-muted: 0.4;
+  --dsx-opacity-faded: 0.6;
+  --dsx-opacity-subtle-hover: 0.8;
+  --dsx-space-0: calc(0px * var(--dsx-density-scale, 1));
+  --dsx-space-1: calc(4px * var(--dsx-density-scale, 1));
+  --dsx-space-2: calc(8px * var(--dsx-density-scale, 1));
+  --dsx-space-3: calc(12px * var(--dsx-density-scale, 1));
+  --dsx-space-4: calc(16px * var(--dsx-density-scale, 1));
+  --dsx-space-5: calc(20px * var(--dsx-density-scale, 1));
+  --dsx-space-6: calc(24px * var(--dsx-density-scale, 1));
+  --dsx-space-7: calc(28px * var(--dsx-density-scale, 1));
+  --dsx-space-8: calc(32px * var(--dsx-density-scale, 1));
+  --dsx-space-9: calc(36px * var(--dsx-density-scale, 1));
+  --dsx-space-unit: calc(4px * var(--dsx-density-scale, 1));
+  --dsx-space-xs: calc(4px * var(--dsx-density-scale, 1));
+  --dsx-space-sm: calc(8px * var(--dsx-density-scale, 1));
+  --dsx-space-md: calc(16px * var(--dsx-density-scale, 1));
+  --dsx-space-lg: calc(24px * var(--dsx-density-scale, 1));
+  --dsx-space-xl: calc(32px * var(--dsx-density-scale, 1));
+  --dsx-space-2xl: calc(48px * var(--dsx-density-scale, 1));
+  --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;
+  --dsx-border-width-md: 1.5px;
+  --dsx-border-width-lg: 2px;
+  --dsx-border-width-xl: 3px;
+  --dsx-radius-none: 0px;
+  --dsx-radius-sm: 4px;
+  --dsx-radius-md: 8px;
+  --dsx-radius-lg: 12px;
+  --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-size: 64px;
+  --dsx-typography-display-large-font-weight: 600;
+  --dsx-typography-display-large-line-height: 1.1;
+  --dsx-typography-display-large-letter-spacing: -0.02em;
+  --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-size: 48px;
+  --dsx-typography-display-medium-font-weight: 600;
+  --dsx-typography-display-medium-line-height: 1.15;
+  --dsx-typography-display-medium-letter-spacing: -0.02em;
+  --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-size: 32px;
+  --dsx-typography-headline-large-font-weight: 600;
+  --dsx-typography-headline-large-line-height: 1.2;
+  --dsx-typography-headline-large-letter-spacing: -0.01em;
+  --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-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-text-transform: none;
+  --dsx-typography-headline-medium-text-decoration: none;
+  --dsx-typography-body-large-font-family: Manrope;
+  --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-text-transform: none;
+  --dsx-typography-body-large-text-decoration: none;
+  --dsx-typography-body-medium-font-family: Manrope;
+  --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-text-transform: none;
+  --dsx-typography-body-medium-text-decoration: none;
+  --dsx-typography-body-small-font-family: Manrope;
+  --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-text-transform: none;
+  --dsx-typography-body-small-text-decoration: none;
+  --dsx-typography-label-large-font-family: Manrope;
+  --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-text-transform: none;
+  --dsx-typography-label-large-text-decoration: none;
+  --dsx-typography-label-medium-font-family: Manrope;
+  --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-text-transform: uppercase;
+  --dsx-typography-label-medium-text-decoration: none;
+  --dsx-typography-label-small-font-family: Manrope;
+  --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-text-transform: none;
+  --dsx-typography-label-small-text-decoration: none;
+  --dsx-z-index-elevated: 1;
+  --dsx-z-index-elevated-strong: 2;
+  --dsx-z-index-overlay-local: 10;
+  --dsx-z-index-dropdown: 50;
+  --dsx-z-index-sticky: 60;
+  --dsx-z-index-fixed: 70;
+  --dsx-z-index-overlay: 80;
+  --dsx-z-index-modal: 90;
+  --dsx-z-index-toast: 100;
+}
+
+[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-gray-1: #fbfbfc;
+  --dsx-color-gray-2: #f4f5f7;
+  --dsx-color-gray-3: #eef0f4;
+  --dsx-color-gray-4: #e2e4e9;
+  --dsx-color-gray-5: #d3d6dd;
+  --dsx-color-gray-6: #c3c8d4;
+  --dsx-color-gray-7: #aeb2bf;
+  --dsx-color-gray-8: #8b90a3;
+  --dsx-color-gray-9: #6b7080;
+  --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-secondary: #6b6478;
+  --dsx-color-secondary-container: #e6e2ec;
+  --dsx-color-on-secondary: #ffffff;
+  --dsx-color-on-secondary-container: #3d374a;
+  --dsx-color-tertiary: #4a5fc9;
+  --dsx-color-tertiary-container: #e0e4fb;
+  --dsx-color-on-tertiary: #ffffff;
+  --dsx-color-on-tertiary-container: #2c3a8f;
+  --dsx-color-background: #fbfbfc;
+  --dsx-color-on-background: #2c2f3d;
+  --dsx-color-surface: #f1f2f5;
+  --dsx-color-surface-raised: #e7e9ed;
+  --dsx-color-surface-overlay: #ffffff;
+  --dsx-color-surface-sunken: #f6f7f9;
+  --dsx-color-on-surface: #2c2f3d;
+  --dsx-color-on-surface-variant: #646978;
+  --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-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-disabled-text: #8b90a3;
+  --dsx-color-disabled-border: #d3d6dd;
+  --dsx-color-disabled-surface: #e2e4e9;
+  --dsx-color-high-contrast: #3b1774;
+  --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-text-inverse: #fbfbfc;
+  --dsx-color-inverse-background: #3b1774;
+  --dsx-color-on-inverse-background: #fbfbfc;
+  --dsx-color-inverse-surface: color-mix(in srgb, #3b1774 14%, transparent);
+  --dsx-color-on-inverse-surface: #fbfbfc;
+  --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-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);
+}
+
+
+:root {
+  /* Intentional opacity for secondary / description text. */
+  --dsx-opacity-subtle: 0.85;
+  --dsx-opacity-muted: 0.4;
+  --dsx-opacity-faded: 0.6;
+  --dsx-opacity-subtle-hover: 0.8;
+  --dsx-z-index-elevated: 1;
+  --dsx-z-index-elevated-strong: 2;
+  --dsx-z-index-overlay-local: 10;
+  --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;
+  --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;
+  --dsx-shadow-offset-lg: 16px;
+  --dsx-shadow-blur-xs: 4px;
+  --dsx-shadow-blur-sm: 12px;
+  --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);
+  --dsx-resizable-handle-thickness: var(--dsx-border-width-sm);
+  --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);
+  --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);
+  --dsx-color-panel-border-translucent: var(--dsx-color-outline-variant);
+
+  /* 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-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);
+  /* z-index scale for layered surfaces */
+  --dsx-z-index-dropdown: 50;
+  --dsx-z-index-sticky: 60;
+  --dsx-z-index-fixed: 70;
+  --dsx-z-index-overlay: 80;
+  --dsx-z-index-modal: 90;
+  --dsx-z-index-toast: 100;
+
+  /* ── Spacing extensions (4px grid) ─────────────────────────────────── */
+  --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);
+  --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 — 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);
+
+  /* ── 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 ─────────────────────────────────────────── */
+  --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);
+  --dsx-shadow-card-md: 0 4px 16px var(--dsx-effect-shadow-card);
+
+  /* ── Blur utilities ─────────────────────────────────────────────────── */
+  --dsx-blur-md: blur(12px);
+
+  /* ── Spacing extensions ─────────────────────────────────────────────── */
+  --dsx-space-2xs: 2px;
+
+  /* ── Structural radius aliases ─────────────────────────────────────── */
+  --dsx-rounded-none: var(--dsx-radius-none);
+
+  /* ── Z-index extensions ─────────────────────────────────────────────── */
+  --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);
+
+  /* ── 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);
+
+  /* ── 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;
+  --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,
+[data-dsx-density='comfortable'] {
+  --dsx-density-scale: var(--dsx-scaling-100, 1);
+  --dsx-density-control-height: var(--dsx-size-xl);
+  --dsx-density-control-height-sm: var(--dsx-size-lg);
+  --dsx-density-control-height-lg: var(--dsx-size-2xl);
+  --dsx-density-control-padding-inline: var(--dsx-space-md);
+  --dsx-density-control-padding-inline-sm: var(--dsx-space-sm);
+  --dsx-density-control-padding-inline-lg: var(--dsx-space-lg);
+  --dsx-density-control-padding-block: var(--dsx-space-sm);
+  --dsx-density-control-padding-block-sm: var(--dsx-space-xs);
+  --dsx-density-control-padding-block-lg: var(--dsx-space-md);
+  --dsx-density-textarea-min-height: 80px;
+}
+
+[data-dsx-density='compact'] {
+  --dsx-density-scale: var(--dsx-scaling-95, 0.95);
+  --dsx-density-control-height: var(--dsx-size-lg);
+  --dsx-density-control-height-sm: var(--dsx-size-md);
+  --dsx-density-control-height-lg: var(--dsx-size-xl);
+  --dsx-density-control-padding-inline: var(--dsx-space-sm);
+  --dsx-density-control-padding-inline-sm: var(--dsx-space-sm);
+  --dsx-density-control-padding-inline-lg: var(--dsx-space-md);
+  --dsx-density-control-padding-block: var(--dsx-space-xs);
+  --dsx-density-control-padding-block-sm: var(--dsx-space-0-5);
+  --dsx-density-control-padding-block-lg: var(--dsx-space-sm);
+  --dsx-density-textarea-min-height: 72px;
+}
+
+[data-dsx-scaling='90'] {
+  --dsx-density-scale: var(--dsx-scaling-90, 0.9);
+}
+
+[data-dsx-scaling='95'] {
+  --dsx-density-scale: var(--dsx-scaling-95, 0.95);
+}
+
+[data-dsx-scaling='100'] {
+  --dsx-density-scale: var(--dsx-scaling-100, 1);
+}
+
+[data-dsx-scaling='105'] {
+  --dsx-density-scale: var(--dsx-scaling-105, 1.05);
+}
+
+[data-dsx-scaling='110'] {
+  --dsx-density-scale: var(--dsx-scaling-110, 1.1);
+}
+
+:root,
+[data-panel-background='solid'] {
+  --dsx-panel-background: var(--dsx-color-panel-solid);
+  --dsx-panel-border-color: var(--dsx-color-panel-border);
+  --dsx-panel-shadow: var(--dsx-shadow-elevation-2);
+  --dsx-panel-backdrop-filter: var(--dsx-effect-panel-solid-backdrop-filter);
+}
+
+[data-panel-background='translucent'] {
+  --dsx-panel-background: var(--dsx-color-panel-translucent);
+  --dsx-panel-border-color: var(--dsx-color-panel-border-translucent);
+  --dsx-panel-shadow: var(--dsx-shadow-panel-shadow);
+  --dsx-panel-backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
+}
+
+:root,
+[data-radius='md'] {
+  --dsx-rounded-sm: 4px;
+  --dsx-rounded-md: 8px;
+  --dsx-rounded-lg: 12px;
+  --dsx-rounded-xl: 16px;
+  --dsx-rounded-2xl: 24px;
+  --dsx-rounded-full: 9999px;
+}
+
+[data-radius='none'] {
+  --dsx-rounded-sm: 0px;
+  --dsx-rounded-md: 0px;
+  --dsx-rounded-lg: 0px;
+  --dsx-rounded-xl: 0px;
+  --dsx-rounded-2xl: 0px;
+  --dsx-rounded-full: 0px;
+}
+
+[data-radius='sm'] {
+  --dsx-rounded-sm: 2px;
+  --dsx-rounded-md: 4px;
+  --dsx-rounded-lg: 8px;
+  --dsx-rounded-xl: 12px;
+  --dsx-rounded-2xl: 16px;
+  --dsx-rounded-full: 9999px;
+}
+
+[data-radius='lg'] {
+  --dsx-rounded-sm: 8px;
+  --dsx-rounded-md: 12px;
+  --dsx-rounded-lg: 16px;
+  --dsx-rounded-xl: 24px;
+  --dsx-rounded-2xl: 32px;
+  --dsx-rounded-full: 9999px;
+}
+
+[data-radius='full'] {
+  --dsx-rounded-sm: 9999px;
+  --dsx-rounded-md: 9999px;
+  --dsx-rounded-lg: 9999px;
+  --dsx-rounded-xl: 9999px;
+  --dsx-rounded-2xl: 9999px;
+  --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;
+  /* 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);
+}
+
+[data-dsx-theme='dark'][data-gray-color='neutral'] {
+  --dsx-color-gray-1: #090b0f;
+  --dsx-color-gray-2: #0f1318;
+  --dsx-color-gray-3: #161c24;
+  --dsx-color-gray-4: #1d2530;
+  --dsx-color-gray-5: #252f3d;
+  --dsx-color-gray-6: #2f3b4d;
+  --dsx-color-gray-7: #3b4a61;
+  --dsx-color-gray-8: #51637d;
+  --dsx-color-gray-9: #687c99;
+  --dsx-color-gray-10: #93a1b5;
+  --dsx-color-gray-11: #c7d0dd;
+  --dsx-color-gray-12: #eef2f7;
+  --dsx-color-on-surface-variant: #93a1b5;
+  --dsx-color-outline: #3b4a61;
+  --dsx-color-outline-variant: #51637d;
+  --dsx-color-disabled-border: #2f3b4d;
+  --dsx-color-disabled-text: #93a1b5;
+}
+
+[data-dsx-theme='light'][data-gray-color='neutral'] {
+  --dsx-color-gray-1: #fbfcfd;
+  --dsx-color-gray-2: #f5f7fa;
+  --dsx-color-gray-3: #edf1f5;
+  --dsx-color-gray-4: #e2e8ef;
+  --dsx-color-gray-5: #d5dde7;
+  --dsx-color-gray-6: #c4cfdd;
+  --dsx-color-gray-7: #aebccc;
+  --dsx-color-gray-8: #8b9bb0;
+  --dsx-color-gray-9: #6b7d93;
+  --dsx-color-gray-10: #55657a;
+  --dsx-color-gray-11: #3d4a5d;
+  --dsx-color-gray-12: #1f2937;
+  --dsx-color-on-surface-variant: #55657a;
+  --dsx-color-outline: #c4cfdd;
+  --dsx-color-outline-variant: #aebccc;
+  --dsx-color-disabled-border: #d5dde7;
+  --dsx-color-disabled-text: #6b7d93;
+}