@webority/theme 0.98.0 → 0.100.0

package/scss/_tokens.generated.scss

@@ -0,0 +1,831 @@
+// Generated by @webority/tokens 0.100.0 from its token source. Do not edit; run webority brand --library.
+
+:root {
+    --wui-primary: #4F46E5;
+    --wui-primary-hover: #6366F1;
+    --wui-primary-pressed: #4338CA;
+    --wui-primary-50: #818CF8;
+    --wui-primary-30: #A5B4FC;
+    --wui-primary-20: #C7D2FE;
+    --wui-primary-15: #DDE1FD;
+    --wui-primary-10: #E0E7FF;
+    --wui-primary-5: #EEF2FF;
+    --wui-text-heading: #071437;
+    --wui-text-1: #252F4A;
+    --wui-text-2: #4B5675;
+    --wui-text-3: #626A82;
+    --wui-text-4: #99A1B7;
+    --wui-text-5: #C4CADA;
+    --wui-bg-page: #F4F6F8;
+    --wui-bg-light: #FFFFFF;
+    --wui-bg-elevated: #F9FBFC;
+    --wui-bg-muted: #F5F6FA;
+    --wui-field-bg: #F9FBFC;
+    --wui-field-border: #DFE2EA;
+    --wui-field-border-hover: #C4CADA;
+    --wui-border-light: #EBEDF3;
+    --wui-border-soft: #F4F6F8;
+    --wui-border-strong: #C4CADA;
+    --wui-progress-track: #E1E5EE;
+    --wui-scrollbar: rgba(145, 158, 171, 0.45);
+    --wui-scrollbar-hover: rgba(145, 158, 171, 0.65);
+    --wui-scrollbar-active: rgba(145, 158, 171, 0.85);
+    --wui-surface-soft: #F2EFFE;
+    --wui-surface-violet: #ECE4FE;
+    --wui-surface-violet-soft: #FCFCFC;
+    --wui-surface-mute: #F9FBFC;
+    --wui-ink: #000000;
+    --wui-fg-2: var(--wui-text-1);
+    --wui-fg-3: var(--wui-text-2);
+    --wui-fg-4: var(--wui-text-3);
+    --wui-fg-5: var(--wui-text-5);
+    --wui-neutral-border-dark: #EBEDF3;
+    --wui-neutral-border-light: #F9FBFC;
+    --wui-neutral-bg-dark: #F5F6FA;
+    --wui-neutral-bg-light: #F9FBFC;
+    --wui-accent-dark: var(--wui-primary-pressed);
+    --wui-primary-text: #ffffff;
+    --wui-primary-ink: var(--wui-primary);
+    --wui-info-text: #1460ba;
+    --wui-info-active: #056EE9;
+    --wui-info: #056EE9;
+    --wui-info-50: #8DC2FF;
+    --wui-info-30: #BBDBFF;
+    --wui-info-20: #D1E6FF;
+    --wui-info-10: #E9F3FF;
+    --wui-info-5: #F3F9FF;
+    --wui-success-text: #0e7531;
+    --wui-success-strong: #0e7531;
+    --wui-success-active: #04B440;
+    --wui-success: #04B440;
+    --wui-success-50: #8BE3A9;
+    --wui-success-30: #BAEECC;
+    --wui-success-20: #D1F4DD;
+    --wui-success-10: #E8FAEE;
+    --wui-success-5: #F3FCF6;
+    --wui-warning-text: #876100;
+    --wui-warning-strong: #9A6B00;
+    --wui-warning-strong-hover: #855C00;
+    --wui-warning-active: #DFA000;
+    --wui-warning: #DFA000;
+    --wui-warning-50: #FBD880;
+    --wui-warning-30: #FDE8B3;
+    --wui-warning-20: #FDEFCC;
+    --wui-warning-10: #FFF8E6;
+    --wui-warning-5: #FEFBF2;
+    --wui-danger-text: #CF1735;
+    --wui-danger-strong: #C81340;
+    --wui-danger-strong-hover: #AB1036;
+    --wui-danger-active: #E82646;
+    --wui-danger: #E82646;
+    --wui-danger-50: #FC94AD;
+    --wui-danger-30: #FDBFCE;
+    --wui-danger-20: #FED4DE;
+    --wui-danger-10: #FFEAEF;
+    --wui-danger-5: #FEF4F6;
+    --wui-chart-1: var(--wui-primary);
+    --wui-chart-2: #eb6834;
+    --wui-chart-3: #1baf7a;
+    --wui-chart-4: #eda100;
+    --wui-chart-5: #e87ba4;
+    --wui-chart-6: #008300;
+    --wui-chart-7: #2a78d6;
+    --wui-chart-8: #e34948;
+    --wui-chart-seq-0: var(--wui-bg-muted);
+    --wui-chart-seq-1: var(--wui-primary-10);
+    --wui-chart-seq-2: var(--wui-primary-20);
+    --wui-chart-seq-3: var(--wui-primary-30);
+    --wui-chart-seq-4: var(--wui-primary-50);
+    --wui-chart-seq-5: var(--wui-primary-hover);
+    --wui-chart-seq-6: var(--wui-primary-pressed);
+    --wui-chart-diverging-low: #e34948;
+    --wui-chart-diverging-mid: #c4cada;
+    --wui-chart-diverging-high: #2a78d6;
+    --wui-chart-neutral: #99a1b7;
+    --wui-dark-bg-page: #0f1117;
+    --wui-dark-bg-elevated: #0d0f15;
+    --wui-dark-bg-muted: #232733;
+    --wui-dark-bg-surface: #181b23;
+    --wui-dark-border: #2a2f3a;
+    --wui-dark-border-strong: #3a414f;
+    --wui-dark-field-border: #2a2f3a;
+    --wui-dark-field-border-hover: #3a414f;
+    --wui-dark-progress-track: #323845;
+    --wui-dark-text: #e6e8ee;
+    --wui-dark-text-muted: #b4b9c6;
+    --wui-dark-text-subtle: #8a90a0;
+    --wui-dark-primary: #9590ef;
+    --wui-dark-primary-hover: #a29df1;
+    --wui-dark-chart-2: #d95926;
+    --wui-dark-chart-3: #199e70;
+    --wui-dark-chart-4: #c98500;
+    --wui-dark-chart-5: #d55181;
+    --wui-dark-chart-6: #008300;
+    --wui-dark-chart-7: #3987e5;
+    --wui-dark-chart-8: #e66767;
+    --wui-dark-chart-seq-0: #20242f;
+    --wui-dark-chart-seq-1: #262c45;
+    --wui-dark-chart-seq-2: #2f3a70;
+    --wui-dark-chart-seq-3: #3b4ba0;
+    --wui-dark-chart-seq-4: #5168d2;
+    --wui-dark-chart-seq-5: #7a90ef;
+    --wui-dark-chart-seq-6: #b3c1f7;
+    --wui-dark-chart-diverging-low: #e66767;
+    --wui-dark-chart-diverging-mid: #3a414f;
+    --wui-dark-chart-diverging-high: #3987e5;
+    --wui-dark-chart-neutral: #5d6475;
+    --wui-space-none: 0px;
+    --wui-space-xxs: 2px;
+    --wui-space-xs: 4px;
+    --wui-space-sm: 8px;
+    --wui-space-md: 12px;
+    --wui-space-lg: 16px;
+    --wui-space-xl: 24px;
+    --wui-space-2xl: 32px;
+    --wui-space-3xl: 48px;
+    --wui-space-4xl: 64px;
+    --wui-radius-none: 0px;
+    --wui-radius-sm: 8px;
+    --wui-radius-md: 10px;
+    --wui-radius-lg: 14px;
+    --wui-radius-xl: 16px;
+    --wui-radius-pill: 9999px;
+    --wui-fs-xs: clamp(0.7544rem, 0.73rem + 0.1vw, 0.8125rem);
+    --wui-fs-sm: clamp(0.8194rem, 0.7902rem + 0.1198vw, 0.875rem);
+    --wui-fs-base: clamp(0.9613rem, 0.9005rem + 0.2491vw, 1.05rem);
+    --wui-fs-lg: clamp(1.065rem, 0.9795rem + 0.3507vw, 1.25rem);
+    --wui-fs-xl: clamp(1.2719rem, 1.15rem + 0.5vw, 1.5rem);
+    --wui-fs-2xl: clamp(1.5437rem, 1.3rem + 1vw, 2rem);
+    --wui-fs-3xl: clamp(1.9269rem, 1.5006rem + 1.749vw, 2.75rem);
+    --wui-fs-4xl: clamp(2.3094rem, 1.7rem + 2.5vw, 3.5rem);
+    --wui-fs-5xl: clamp(2.8144rem, 1.9001rem + 3.751vw, 4.5rem);
+    --wui-fs-6xl: clamp(3.5406rem, 2.1991rem + 5.5035vw, 6rem);
+    --wui-fs-7xl: clamp(4rem, 2.7012rem + 5.3286vw, 7.4969rem);
+    --wui-fs-8xl: clamp(4.5019rem, 2.8311rem + 6.8543vw, 9rem);
+    --wui-fw-normal: 400;
+    --wui-fw-medium: 500;
+    --wui-fw-semibold: 600;
+    --wui-fw-bold: 700;
+    --wui-font-ui: "Webority Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --wui-font-display: "Webority Serif", Cambria, Georgia, "Times New Roman", "Noto Serif", serif;
+    --wui-font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    --wui-shadow-card: none;
+    --wui-shadow-popover: 0px 8px 28px -6px rgba(7, 20, 55, 0.14);
+    --wui-shadow-modal: 0px 24px 60px -16px rgba(7, 20, 55, 0.28);
+    --wui-shadow-drawer: 0px 24px 60px -16px rgba(7, 20, 55, 0.28);
+    --wui-duration-fast: 150ms;
+    --wui-duration-default: 250ms;
+    --wui-duration-slow: 400ms;
+    --wui-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+    --wui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --wui-ease-ui: cubic-bezier(0.32, 0.72, 0, 1);
+    --wui-ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --wui-section-sm: 80px;
+    --wui-section-md: 96px;
+    --wui-section-lg: 120px;
+    --wui-control-sm: 32px;
+    --wui-control-md: 36px;
+    --wui-control-lg: 44px;
+    --wui-container-max: 1512px;
+    --wui-container-pad: 24px;
+    --wui-table-pad: 20px;
+    --wui-z-dropdown: 1000;
+    --wui-z-sticky: 1020;
+    --wui-z-shell-sidebar: 1025;
+    --wui-z-fixed: 1030;
+    --wui-z-shell: 1040;
+    --wui-z-shell-scrim: 1044;
+    --wui-z-shell-drawer: 1045;
+    --wui-z-modal-backdrop: 1500;
+    --wui-z-modal: 1505;
+    --wui-z-tour: 1550;
+    --wui-z-menu: 1600;
+    --wui-z-popover: 1600;
+    --wui-z-tooltip: 1650;
+    --wui-z-toast: 1700;
+    --color-bg: var(--wui-bg-page);
+    --color-bg-subtle: var(--wui-bg-elevated);
+    --color-bg-muted: var(--wui-bg-muted);
+    --color-surface: var(--wui-bg-light);
+    --color-surface-inverse: var(--wui-text-heading);
+    --color-surface-inverse-raised: color-mix(in srgb, var(--color-text-inverse) 5%, var(--color-surface-inverse));
+    --color-surface-inverse-elevated: color-mix(in srgb, var(--color-text-inverse) 9%, var(--color-surface-inverse));
+    --color-text: var(--wui-text-heading);
+    --color-text-body: var(--wui-text-1);
+    --color-text-muted: var(--wui-text-2);
+    --color-text-subtle: var(--wui-text-3);
+    --color-text-inverse: var(--wui-bg-light);
+    --color-link: var(--wui-primary-ink);
+    --color-border: var(--wui-border-light);
+    --color-border-subtle: var(--wui-border-soft);
+    --color-border-strong: var(--wui-border-strong);
+    --color-field-bg: var(--wui-field-bg);
+    --color-field-border: var(--wui-field-border);
+    --color-field-border-hover: var(--wui-field-border-hover);
+    --color-field-border-focus: var(--wui-primary-30);
+    --color-focus-ring: var(--color-primary-text);
+    --color-scrim: color-mix(in srgb, var(--wui-text-heading) 45%, transparent);
+    --color-scrim-strong: color-mix(in srgb, var(--wui-text-heading) 62%, transparent);
+    --color-on-scrim: var(--wui-bg-light);
+    --color-progress-track: var(--wui-progress-track);
+    --color-progress-label: var(--wui-bg-light);
+    --color-thumb: var(--wui-bg-light);
+    --color-scrollbar: var(--wui-scrollbar);
+    --color-scrollbar-hover: var(--wui-scrollbar-hover);
+    --color-scrollbar-active: var(--wui-scrollbar-active);
+    --color-primary: var(--wui-primary);
+    --color-primary-hover: var(--wui-primary-pressed);
+    --color-primary-soft: var(--wui-primary-10);
+    --color-primary-text: var(--wui-primary-ink);
+    --color-on-primary: var(--wui-primary-text);
+    --color-primary-wash: color-mix(in srgb, var(--color-primary) 8%, transparent);
+    --color-primary-wash-strong: color-mix(in srgb, var(--color-primary) 20%, transparent);
+    --color-neutral: color-mix(in srgb, var(--color-text) 8%, transparent);
+    --color-neutral-hover: color-mix(in srgb, var(--color-text) 12%, transparent);
+    --color-neutral-pressed: color-mix(in srgb, var(--color-text) 16%, transparent);
+    --color-neutral-soft: color-mix(in srgb, var(--color-text-subtle) 16%, transparent);
+    --color-neutral-text: var(--color-text-muted);
+    --color-on-neutral: var(--color-text);
+    --color-success: var(--wui-success);
+    --color-success-pressed: var(--wui-success-active);
+    --color-success-soft: var(--wui-success-10);
+    --color-success-border: var(--wui-success-30);
+    --color-success-text: var(--wui-success-text);
+    --color-success-text-on-soft: var(--wui-success-text);
+    --color-success-strong: var(--wui-success-strong);
+    --color-on-success: #FFFFFF;
+    --color-on-success-strong: #FFFFFF;
+    --color-warning: var(--wui-warning);
+    --color-warning-pressed: var(--wui-warning-active);
+    --color-warning-soft: var(--wui-warning-10);
+    --color-warning-border: var(--wui-warning-30);
+    --color-warning-text: var(--wui-warning-text);
+    --color-warning-text-on-soft: var(--wui-warning-text);
+    --color-warning-strong: var(--wui-warning-strong);
+    --color-warning-strong-hover: var(--wui-warning-strong-hover);
+    --color-on-warning: #FFFFFF;
+    --color-on-warning-strong: #FFFFFF;
+    --color-danger: var(--wui-danger);
+    --color-danger-pressed: var(--wui-danger-active);
+    --color-danger-soft: var(--wui-danger-10);
+    --color-danger-border: var(--wui-danger-30);
+    --color-danger-text: var(--wui-danger-text);
+    --color-danger-text-on-soft: var(--wui-danger-text);
+    --color-danger-strong: var(--wui-danger-strong);
+    --color-danger-strong-hover: var(--wui-danger-strong-hover);
+    --color-on-danger: #FFFFFF;
+    --color-on-danger-strong: #FFFFFF;
+    --color-info: var(--wui-info);
+    --color-info-pressed: var(--wui-info-active);
+    --color-info-soft: var(--wui-info-10);
+    --color-info-border: var(--wui-info-30);
+    --color-info-text: var(--wui-info-text);
+    --color-info-text-on-soft: var(--wui-info-text);
+    --color-info-strong: var(--wui-info-active);
+    --color-on-info: #FFFFFF;
+    --color-on-info-strong: #FFFFFF;
+    --color-chart-1: var(--wui-primary);
+    --color-chart-2: var(--wui-chart-2);
+    --color-chart-3: var(--wui-chart-3);
+    --color-chart-4: var(--wui-chart-4);
+    --color-chart-5: var(--wui-chart-5);
+    --color-chart-6: var(--wui-chart-6);
+    --color-chart-7: var(--wui-chart-7);
+    --color-chart-8: var(--wui-chart-8);
+    --color-chart-seq-0: var(--wui-bg-muted);
+    --color-chart-seq-1: var(--wui-primary-10);
+    --color-chart-seq-2: var(--wui-primary-20);
+    --color-chart-seq-3: var(--wui-primary-30);
+    --color-chart-seq-4: var(--wui-primary-50);
+    --color-chart-seq-5: var(--wui-primary-hover);
+    --color-chart-seq-6: var(--wui-primary-pressed);
+    --color-chart-diverging-low: var(--wui-chart-diverging-low);
+    --color-chart-diverging-mid: var(--wui-chart-diverging-mid);
+    --color-chart-diverging-high: var(--wui-chart-diverging-high);
+    --color-chart-neutral: var(--wui-chart-neutral);
+    --color-chart-grid: var(--color-border);
+    --color-chart-axis: var(--color-border-strong);
+    --color-chart-label: var(--color-text-subtle);
+    --wui-close-filter: none;
+    --wui-pressed-overlay: color-mix(in srgb, currentColor 12%, transparent);
+    --wui-hero-gradient: radial-gradient(ellipse 120% 80% at 50% 30%, #818CF8 0%, #4F46E5 35%, #4338CA 75%, #312E81 100%);
+    --wui-cta-gradient: radial-gradient(ellipse 120% 100% at 50% 50%, #312E81 0%, #1E1B4B 60%, #0F0D2E 100%);
+    --wui-lh-heading: 1.2;
+    --wui-lh-body: 1.55;
+    --wui-lh-display: 1.05;
+    --wui-field-sm-radius: var(--wui-radius-sm);
+    --wui-field-md-radius: var(--wui-radius-sm);
+    --wui-field-lg-radius: var(--wui-radius-sm);
+    --wui-focus-ring-width: var(--wui-space-xxs);
+    --wui-focus-ring-offset: var(--wui-space-xxs);
+    --wui-focus-ring-shadow: 0 0 0 2px var(--color-primary-soft);
+    --wui-press-scale: 0.96;
+    --wui-press-duration: 80ms;
+    --wui-press-opacity: 0.5;
+    --wui-thumb-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    --wui-thumb-shadow-hover: 0 2px 12px rgba(0, 0, 0, 0.2);
+    --wui-card-shadow-lifted: none;
+    --wui-card-shadow-lifted-hover: none;
+    --wui-table-md-padding-x: var(--wui-table-pad);
+    --wui-container-md-padding-x: var(--wui-container-pad);
+    --wui-disabled-opacity: 0.5;
+}
+
+@media (min-width: 768px) {
+    :root {
+        --wui-container-pad: var(--wui-space-4xl);
+    }
+}
+
+@media (max-width: 575.98px), (pointer: coarse) {
+    :root {
+        --wui-control-md: 44px;
+    }
+}
+
+:root[data-theme="dark"],
+:root[data-bs-theme="dark"] {
+    --wui-primary-50: color-mix(in srgb, var(--wui-dark-primary) 62%, var(--wui-dark-bg-surface));
+    --wui-primary-30: color-mix(in srgb, var(--wui-dark-primary) 40%, var(--wui-dark-bg-surface));
+    --wui-primary-20: color-mix(in srgb, var(--wui-dark-primary) 26%, var(--wui-dark-bg-surface));
+    --wui-primary-15: color-mix(in srgb, var(--wui-dark-primary) 21%, var(--wui-dark-bg-surface));
+    --wui-primary-10: color-mix(in srgb, var(--wui-dark-primary) 16%, var(--wui-dark-bg-surface));
+    --wui-primary-5: color-mix(in srgb, var(--wui-dark-primary) 10%, var(--wui-dark-bg-surface));
+    --wui-surface-soft: color-mix(in srgb, var(--wui-dark-primary) 10%, var(--wui-dark-bg-surface));
+    --wui-surface-violet-soft: color-mix(in srgb, var(--wui-dark-primary) 6%, var(--wui-dark-bg-surface));
+    --wui-surface-mute: var(--wui-dark-bg-muted);
+    --wui-neutral-bg-dark: var(--wui-dark-bg-muted);
+    --wui-neutral-bg-light: var(--wui-dark-bg-surface);
+    --wui-danger-5: color-mix(in srgb, var(--wui-danger) 10%, var(--wui-dark-bg-surface));
+    --wui-chart-1: var(--wui-dark-primary);
+    --wui-chart-2: var(--wui-dark-chart-2);
+    --wui-chart-3: var(--wui-dark-chart-3);
+    --wui-chart-4: var(--wui-dark-chart-4);
+    --wui-chart-5: var(--wui-dark-chart-5);
+    --wui-chart-6: var(--wui-dark-chart-6);
+    --wui-chart-7: var(--wui-dark-chart-7);
+    --wui-chart-8: var(--wui-dark-chart-8);
+    --wui-chart-seq-0: var(--wui-dark-chart-seq-0);
+    --wui-chart-seq-1: var(--wui-dark-chart-seq-1);
+    --wui-chart-seq-2: var(--wui-dark-chart-seq-2);
+    --wui-chart-seq-3: var(--wui-dark-chart-seq-3);
+    --wui-chart-seq-4: var(--wui-dark-chart-seq-4);
+    --wui-chart-seq-5: var(--wui-dark-chart-seq-5);
+    --wui-chart-seq-6: var(--wui-dark-chart-seq-6);
+    --wui-chart-diverging-low: var(--wui-dark-chart-diverging-low);
+    --wui-chart-diverging-mid: var(--wui-dark-chart-diverging-mid);
+    --wui-chart-diverging-high: var(--wui-dark-chart-diverging-high);
+    --wui-chart-neutral: var(--wui-dark-chart-neutral);
+    --color-bg: var(--wui-dark-bg-page);
+    --color-bg-subtle: var(--wui-dark-bg-elevated);
+    --color-bg-muted: var(--wui-dark-bg-muted);
+    --color-surface: var(--wui-dark-bg-surface);
+    --color-surface-inverse: var(--wui-dark-text);
+    --color-text: var(--wui-dark-text);
+    --color-text-body: var(--wui-dark-text);
+    --color-text-muted: var(--wui-dark-text-muted);
+    --color-text-subtle: var(--wui-dark-text-subtle);
+    --color-text-inverse: var(--wui-text-heading);
+    --color-link: var(--wui-dark-primary);
+    --color-border: var(--wui-dark-border);
+    --color-border-subtle: color-mix(in srgb, var(--wui-dark-border) 50%, transparent);
+    --color-border-strong: var(--wui-dark-border-strong);
+    --color-field-bg: var(--wui-dark-bg-muted);
+    --color-field-border: var(--wui-dark-field-border);
+    --color-field-border-hover: var(--wui-dark-field-border-hover);
+    --color-field-border-focus: var(--wui-dark-primary);
+    --color-scrim: color-mix(in srgb, #000000 45%, transparent);
+    --color-scrim-strong: color-mix(in srgb, #000000 62%, transparent);
+    --color-progress-track: var(--wui-dark-progress-track);
+    --color-progress-label: #0F0F0F;
+    --color-thumb: color-mix(in srgb, var(--wui-dark-text) 12%, var(--wui-dark-bg-muted));
+    --color-scrollbar: rgba(255, 255, 255, 0.18);
+    --color-scrollbar-hover: rgba(255, 255, 255, 0.28);
+    --color-scrollbar-active: rgba(255, 255, 255, 0.4);
+    --color-primary: var(--wui-dark-primary);
+    --color-primary-hover: var(--wui-dark-primary-hover);
+    --color-primary-soft: color-mix(in srgb, var(--wui-primary) 20%, transparent);
+    --color-primary-text: var(--wui-dark-primary);
+    --color-on-primary: #0F0F0F;
+    --color-success: #30C780;
+    --color-success-pressed: color-mix(in srgb, var(--color-success) 85%, white);
+    --color-success-soft: color-mix(in srgb, var(--wui-success) 18%, transparent);
+    --color-success-border: color-mix(in srgb, var(--color-success) 40%, transparent);
+    --color-success-text: color-mix(in srgb, var(--wui-success) 75%, white);
+    --color-success-text-on-soft: color-mix(in srgb, var(--wui-success) 65%, white);
+    --color-success-strong: var(--color-success-text);
+    --color-on-success: #0F0F1A;
+    --color-on-success-strong: #0F0F0F;
+    --color-warning: #FBBF24;
+    --color-warning-pressed: color-mix(in srgb, var(--color-warning) 85%, white);
+    --color-warning-soft: color-mix(in srgb, var(--wui-warning) 18%, transparent);
+    --color-warning-border: color-mix(in srgb, var(--color-warning) 40%, transparent);
+    --color-warning-text: color-mix(in srgb, var(--wui-warning) 75%, white);
+    --color-warning-text-on-soft: color-mix(in srgb, var(--wui-warning) 65%, white);
+    --color-warning-strong: var(--color-warning-text);
+    --color-warning-strong-hover: color-mix(in srgb, var(--color-warning-strong) 85%, white);
+    --color-on-warning: #0F0F1A;
+    --color-on-warning-strong: #0F0F0F;
+    --color-danger: #F87171;
+    --color-danger-pressed: color-mix(in srgb, var(--color-danger) 85%, white);
+    --color-danger-soft: color-mix(in srgb, var(--wui-danger) 18%, transparent);
+    --color-danger-border: color-mix(in srgb, var(--color-danger) 40%, transparent);
+    --color-danger-text: color-mix(in srgb, var(--wui-danger) 75%, white);
+    --color-danger-text-on-soft: color-mix(in srgb, var(--wui-danger) 65%, white);
+    --color-danger-strong: var(--color-danger-text);
+    --color-danger-strong-hover: color-mix(in srgb, var(--color-danger-strong) 85%, white);
+    --color-on-danger: #0F0F1A;
+    --color-on-danger-strong: #0F0F0F;
+    --color-info: #60A5FA;
+    --color-info-pressed: color-mix(in srgb, var(--color-info) 85%, white);
+    --color-info-soft: color-mix(in srgb, var(--wui-info) 18%, transparent);
+    --color-info-border: color-mix(in srgb, var(--color-info) 40%, transparent);
+    --color-info-text: color-mix(in srgb, var(--wui-info) 75%, white);
+    --color-info-text-on-soft: color-mix(in srgb, var(--wui-info) 65%, white);
+    --color-info-strong: var(--color-info-text);
+    --color-on-info: #0F0F1A;
+    --color-on-info-strong: #0F0F0F;
+    --color-chart-1: var(--wui-dark-primary);
+    --color-chart-2: var(--wui-dark-chart-2);
+    --color-chart-3: var(--wui-dark-chart-3);
+    --color-chart-4: var(--wui-dark-chart-4);
+    --color-chart-5: var(--wui-dark-chart-5);
+    --color-chart-6: var(--wui-dark-chart-6);
+    --color-chart-7: var(--wui-dark-chart-7);
+    --color-chart-8: var(--wui-dark-chart-8);
+    --color-chart-seq-0: var(--wui-dark-chart-seq-0);
+    --color-chart-seq-1: var(--wui-dark-chart-seq-1);
+    --color-chart-seq-2: var(--wui-dark-chart-seq-2);
+    --color-chart-seq-3: var(--wui-dark-chart-seq-3);
+    --color-chart-seq-4: var(--wui-dark-chart-seq-4);
+    --color-chart-seq-5: var(--wui-dark-chart-seq-5);
+    --color-chart-seq-6: var(--wui-dark-chart-seq-6);
+    --color-chart-diverging-low: var(--wui-dark-chart-diverging-low);
+    --color-chart-diverging-mid: var(--wui-dark-chart-diverging-mid);
+    --color-chart-diverging-high: var(--wui-dark-chart-diverging-high);
+    --color-chart-neutral: var(--wui-dark-chart-neutral);
+    --wui-close-filter: invert(1) grayscale(100%) brightness(200%);
+    --wui-thumb-shadow: 0 2px 6px rgba(255, 255, 255, 0.1);
+    --wui-thumb-shadow-hover: 0 2px 12px rgba(255, 255, 255, 0.2);
+    --bs-body-color: var(--color-text);
+    --bs-emphasis-color: var(--color-text);
+    --bs-secondary-color: var(--color-text-muted);
+    --bs-tertiary-color: var(--color-text-subtle);
+    --bs-body-bg: var(--color-bg);
+    --bs-border-color: var(--color-border);
+    --bs-secondary-bg: var(--color-surface);
+    --bs-tertiary-bg: var(--color-bg-muted);
+    --bs-body-bg-rgb: 15, 17, 23;
+    --bs-body-color-rgb: 230, 232, 238;
+    --bs-emphasis-color-rgb: 230, 232, 238;
+    --bs-secondary-color-rgb: 180, 185, 198;
+    --bs-tertiary-color-rgb: 138, 144, 160;
+    --bs-secondary-bg-rgb: 24, 27, 35;
+    --bs-tertiary-bg-rgb: 35, 39, 51;
+    --bs-border-color-rgb: 42, 47, 58;
+    color-scheme: dark;
+}
+
+[data-theme="dark"]:not(:root),
+[data-bs-theme="dark"]:not(:root) {
+    --wui-primary-50: color-mix(in srgb, var(--wui-dark-primary) 62%, var(--wui-dark-bg-surface));
+    --wui-primary-30: color-mix(in srgb, var(--wui-dark-primary) 40%, var(--wui-dark-bg-surface));
+    --wui-primary-20: color-mix(in srgb, var(--wui-dark-primary) 26%, var(--wui-dark-bg-surface));
+    --wui-primary-15: color-mix(in srgb, var(--wui-dark-primary) 21%, var(--wui-dark-bg-surface));
+    --wui-primary-10: color-mix(in srgb, var(--wui-dark-primary) 16%, var(--wui-dark-bg-surface));
+    --wui-primary-5: color-mix(in srgb, var(--wui-dark-primary) 10%, var(--wui-dark-bg-surface));
+    --wui-surface-soft: color-mix(in srgb, var(--wui-dark-primary) 10%, var(--wui-dark-bg-surface));
+    --wui-surface-violet-soft: color-mix(in srgb, var(--wui-dark-primary) 6%, var(--wui-dark-bg-surface));
+    --wui-surface-mute: var(--wui-dark-bg-muted);
+    --wui-neutral-bg-dark: var(--wui-dark-bg-muted);
+    --wui-neutral-bg-light: var(--wui-dark-bg-surface);
+    --wui-danger-5: color-mix(in srgb, var(--wui-danger) 10%, var(--wui-dark-bg-surface));
+    --wui-chart-1: var(--wui-dark-primary);
+    --wui-chart-2: var(--wui-dark-chart-2);
+    --wui-chart-3: var(--wui-dark-chart-3);
+    --wui-chart-4: var(--wui-dark-chart-4);
+    --wui-chart-5: var(--wui-dark-chart-5);
+    --wui-chart-6: var(--wui-dark-chart-6);
+    --wui-chart-7: var(--wui-dark-chart-7);
+    --wui-chart-8: var(--wui-dark-chart-8);
+    --wui-chart-seq-0: var(--wui-dark-chart-seq-0);
+    --wui-chart-seq-1: var(--wui-dark-chart-seq-1);
+    --wui-chart-seq-2: var(--wui-dark-chart-seq-2);
+    --wui-chart-seq-3: var(--wui-dark-chart-seq-3);
+    --wui-chart-seq-4: var(--wui-dark-chart-seq-4);
+    --wui-chart-seq-5: var(--wui-dark-chart-seq-5);
+    --wui-chart-seq-6: var(--wui-dark-chart-seq-6);
+    --wui-chart-diverging-low: var(--wui-dark-chart-diverging-low);
+    --wui-chart-diverging-mid: var(--wui-dark-chart-diverging-mid);
+    --wui-chart-diverging-high: var(--wui-dark-chart-diverging-high);
+    --wui-chart-neutral: var(--wui-dark-chart-neutral);
+    --color-bg: var(--wui-dark-bg-page);
+    --color-bg-subtle: var(--wui-dark-bg-elevated);
+    --color-bg-muted: var(--wui-dark-bg-muted);
+    --color-surface: var(--wui-dark-bg-surface);
+    --color-surface-inverse: var(--wui-dark-text);
+    --color-text: var(--wui-dark-text);
+    --color-text-body: var(--wui-dark-text);
+    --color-text-muted: var(--wui-dark-text-muted);
+    --color-text-subtle: var(--wui-dark-text-subtle);
+    --color-text-inverse: var(--wui-text-heading);
+    --color-link: var(--wui-dark-primary);
+    --color-border: var(--wui-dark-border);
+    --color-border-subtle: color-mix(in srgb, var(--wui-dark-border) 50%, transparent);
+    --color-border-strong: var(--wui-dark-border-strong);
+    --color-field-bg: var(--wui-dark-bg-muted);
+    --color-field-border: var(--wui-dark-field-border);
+    --color-field-border-hover: var(--wui-dark-field-border-hover);
+    --color-field-border-focus: var(--wui-dark-primary);
+    --color-scrim: color-mix(in srgb, #000000 45%, transparent);
+    --color-scrim-strong: color-mix(in srgb, #000000 62%, transparent);
+    --color-progress-track: var(--wui-dark-progress-track);
+    --color-progress-label: #0F0F0F;
+    --color-thumb: color-mix(in srgb, var(--wui-dark-text) 12%, var(--wui-dark-bg-muted));
+    --color-scrollbar: rgba(255, 255, 255, 0.18);
+    --color-scrollbar-hover: rgba(255, 255, 255, 0.28);
+    --color-scrollbar-active: rgba(255, 255, 255, 0.4);
+    --color-primary: var(--wui-dark-primary);
+    --color-primary-hover: var(--wui-dark-primary-hover);
+    --color-primary-soft: color-mix(in srgb, var(--wui-primary) 20%, transparent);
+    --color-primary-text: var(--wui-dark-primary);
+    --color-on-primary: #0F0F0F;
+    --color-success: #30C780;
+    --color-success-pressed: color-mix(in srgb, var(--color-success) 85%, white);
+    --color-success-soft: color-mix(in srgb, var(--wui-success) 18%, transparent);
+    --color-success-border: color-mix(in srgb, var(--color-success) 40%, transparent);
+    --color-success-text: color-mix(in srgb, var(--wui-success) 75%, white);
+    --color-success-text-on-soft: color-mix(in srgb, var(--wui-success) 65%, white);
+    --color-success-strong: var(--color-success-text);
+    --color-on-success: #0F0F1A;
+    --color-on-success-strong: #0F0F0F;
+    --color-warning: #FBBF24;
+    --color-warning-pressed: color-mix(in srgb, var(--color-warning) 85%, white);
+    --color-warning-soft: color-mix(in srgb, var(--wui-warning) 18%, transparent);
+    --color-warning-border: color-mix(in srgb, var(--color-warning) 40%, transparent);
+    --color-warning-text: color-mix(in srgb, var(--wui-warning) 75%, white);
+    --color-warning-text-on-soft: color-mix(in srgb, var(--wui-warning) 65%, white);
+    --color-warning-strong: var(--color-warning-text);
+    --color-warning-strong-hover: color-mix(in srgb, var(--color-warning-strong) 85%, white);
+    --color-on-warning: #0F0F1A;
+    --color-on-warning-strong: #0F0F0F;
+    --color-danger: #F87171;
+    --color-danger-pressed: color-mix(in srgb, var(--color-danger) 85%, white);
+    --color-danger-soft: color-mix(in srgb, var(--wui-danger) 18%, transparent);
+    --color-danger-border: color-mix(in srgb, var(--color-danger) 40%, transparent);
+    --color-danger-text: color-mix(in srgb, var(--wui-danger) 75%, white);
+    --color-danger-text-on-soft: color-mix(in srgb, var(--wui-danger) 65%, white);
+    --color-danger-strong: var(--color-danger-text);
+    --color-danger-strong-hover: color-mix(in srgb, var(--color-danger-strong) 85%, white);
+    --color-on-danger: #0F0F1A;
+    --color-on-danger-strong: #0F0F0F;
+    --color-info: #60A5FA;
+    --color-info-pressed: color-mix(in srgb, var(--color-info) 85%, white);
+    --color-info-soft: color-mix(in srgb, var(--wui-info) 18%, transparent);
+    --color-info-border: color-mix(in srgb, var(--color-info) 40%, transparent);
+    --color-info-text: color-mix(in srgb, var(--wui-info) 75%, white);
+    --color-info-text-on-soft: color-mix(in srgb, var(--wui-info) 65%, white);
+    --color-info-strong: var(--color-info-text);
+    --color-on-info: #0F0F1A;
+    --color-on-info-strong: #0F0F0F;
+    --color-chart-1: var(--wui-dark-primary);
+    --color-chart-2: var(--wui-dark-chart-2);
+    --color-chart-3: var(--wui-dark-chart-3);
+    --color-chart-4: var(--wui-dark-chart-4);
+    --color-chart-5: var(--wui-dark-chart-5);
+    --color-chart-6: var(--wui-dark-chart-6);
+    --color-chart-7: var(--wui-dark-chart-7);
+    --color-chart-8: var(--wui-dark-chart-8);
+    --color-chart-seq-0: var(--wui-dark-chart-seq-0);
+    --color-chart-seq-1: var(--wui-dark-chart-seq-1);
+    --color-chart-seq-2: var(--wui-dark-chart-seq-2);
+    --color-chart-seq-3: var(--wui-dark-chart-seq-3);
+    --color-chart-seq-4: var(--wui-dark-chart-seq-4);
+    --color-chart-seq-5: var(--wui-dark-chart-seq-5);
+    --color-chart-seq-6: var(--wui-dark-chart-seq-6);
+    --color-chart-diverging-low: var(--wui-dark-chart-diverging-low);
+    --color-chart-diverging-mid: var(--wui-dark-chart-diverging-mid);
+    --color-chart-diverging-high: var(--wui-dark-chart-diverging-high);
+    --color-chart-neutral: var(--wui-dark-chart-neutral);
+    --wui-close-filter: invert(1) grayscale(100%) brightness(200%);
+    --wui-thumb-shadow: 0 2px 6px rgba(255, 255, 255, 0.1);
+    --wui-thumb-shadow-hover: 0 2px 12px rgba(255, 255, 255, 0.2);
+    --bs-body-color: var(--color-text);
+    --bs-emphasis-color: var(--color-text);
+    --bs-secondary-color: var(--color-text-muted);
+    --bs-tertiary-color: var(--color-text-subtle);
+    --bs-body-bg: var(--color-bg);
+    --bs-border-color: var(--color-border);
+    --bs-secondary-bg: var(--color-surface);
+    --bs-tertiary-bg: var(--color-bg-muted);
+    --bs-body-bg-rgb: 15, 17, 23;
+    --bs-body-color-rgb: 230, 232, 238;
+    --bs-emphasis-color-rgb: 230, 232, 238;
+    --bs-secondary-color-rgb: 180, 185, 198;
+    --bs-tertiary-color-rgb: 138, 144, 160;
+    --bs-secondary-bg-rgb: 24, 27, 35;
+    --bs-tertiary-bg-rgb: 35, 39, 51;
+    --bs-border-color-rgb: 42, 47, 58;
+}
+
+// Zero specificity, so a component's own class on a themed section or inside it keeps its colour.
+:where([data-theme="dark"]:not(:root)),
+:where([data-bs-theme="dark"]:not(:root)) {
+    color-scheme: dark;
+    color: var(--color-text);
+}
+
+$wui-dark-layer-names: (
+    wui-primary-50, wui-primary-30, wui-primary-20, wui-primary-15, wui-primary-10, wui-primary-5,
+    wui-surface-soft, wui-surface-violet-soft, wui-surface-mute, wui-neutral-bg-dark, wui-neutral-bg-light, wui-danger-5,
+    wui-chart-1, wui-chart-2, wui-chart-3, wui-chart-4, wui-chart-5, wui-chart-6,
+    wui-chart-7, wui-chart-8, wui-chart-seq-0, wui-chart-seq-1, wui-chart-seq-2, wui-chart-seq-3,
+    wui-chart-seq-4, wui-chart-seq-5, wui-chart-seq-6, wui-chart-diverging-low, wui-chart-diverging-mid, wui-chart-diverging-high,
+    wui-chart-neutral, color-bg, color-bg-subtle, color-bg-muted, color-surface, color-surface-inverse,
+    color-text, color-text-body, color-text-muted, color-text-subtle, color-text-inverse, color-link,
+    color-border, color-border-subtle, color-border-strong, color-field-bg, color-field-border, color-field-border-hover,
+    color-field-border-focus, color-scrim, color-scrim-strong, color-progress-track, color-progress-label, color-thumb,
+    color-scrollbar, color-scrollbar-hover, color-scrollbar-active, color-primary, color-primary-hover, color-primary-soft,
+    color-primary-text, color-on-primary, color-success, color-success-pressed, color-success-soft, color-success-border,
+    color-success-text, color-success-text-on-soft, color-success-strong, color-on-success, color-on-success-strong, color-warning,
+    color-warning-pressed, color-warning-soft, color-warning-border, color-warning-text, color-warning-text-on-soft, color-warning-strong,
+    color-warning-strong-hover, color-on-warning, color-on-warning-strong, color-danger, color-danger-pressed, color-danger-soft,
+    color-danger-border, color-danger-text, color-danger-text-on-soft, color-danger-strong, color-danger-strong-hover, color-on-danger,
+    color-on-danger-strong, color-info, color-info-pressed, color-info-soft, color-info-border, color-info-text,
+    color-info-text-on-soft, color-info-strong, color-on-info, color-on-info-strong, color-chart-1, color-chart-2,
+    color-chart-3, color-chart-4, color-chart-5, color-chart-6, color-chart-7, color-chart-8,
+    color-chart-seq-0, color-chart-seq-1, color-chart-seq-2, color-chart-seq-3, color-chart-seq-4, color-chart-seq-5,
+    color-chart-seq-6, color-chart-diverging-low, color-chart-diverging-mid, color-chart-diverging-high, color-chart-neutral, wui-close-filter,
+    wui-thumb-shadow, wui-thumb-shadow-hover, bs-body-color, bs-emphasis-color, bs-secondary-color, bs-tertiary-color,
+    bs-body-bg, bs-border-color, bs-secondary-bg, bs-tertiary-bg, bs-body-bg-rgb, bs-body-color-rgb,
+    bs-emphasis-color-rgb, bs-secondary-color-rgb, bs-tertiary-color-rgb, bs-secondary-bg-rgb, bs-tertiary-bg-rgb, bs-border-color-rgb
+);
+
+// var() resolves where a name is declared, so the html copies keep the light values for a light box.
+
+html {
+    @each $name in $wui-dark-layer-names {
+        --wui-light-#{$name}: var(--#{$name});
+    }
+}
+
+[data-theme="dark"]:not(:root) [data-theme="light"],
+[data-theme="dark"]:not(:root) [data-bs-theme="light"],
+[data-bs-theme="dark"]:not(:root) [data-theme="light"],
+[data-bs-theme="dark"]:not(:root) [data-bs-theme="light"] {
+    @each $name in $wui-dark-layer-names {
+        --#{$name}: var(--wui-light-#{$name});
+    }
+}
+
+:where([data-theme="dark"]:not(:root) [data-theme="light"]),
+:where([data-theme="dark"]:not(:root) [data-bs-theme="light"]),
+:where([data-bs-theme="dark"]:not(:root) [data-theme="light"]),
+:where([data-bs-theme="dark"]:not(:root) [data-bs-theme="light"]) {
+    color-scheme: light;
+    color: var(--color-text);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root[data-theme="auto"] {
+        --wui-primary-50: color-mix(in srgb, var(--wui-dark-primary) 62%, var(--wui-dark-bg-surface));
+        --wui-primary-30: color-mix(in srgb, var(--wui-dark-primary) 40%, var(--wui-dark-bg-surface));
+        --wui-primary-20: color-mix(in srgb, var(--wui-dark-primary) 26%, var(--wui-dark-bg-surface));
+        --wui-primary-15: color-mix(in srgb, var(--wui-dark-primary) 21%, var(--wui-dark-bg-surface));
+        --wui-primary-10: color-mix(in srgb, var(--wui-dark-primary) 16%, var(--wui-dark-bg-surface));
+        --wui-primary-5: color-mix(in srgb, var(--wui-dark-primary) 10%, var(--wui-dark-bg-surface));
+        --wui-surface-soft: color-mix(in srgb, var(--wui-dark-primary) 10%, var(--wui-dark-bg-surface));
+        --wui-surface-violet-soft: color-mix(in srgb, var(--wui-dark-primary) 6%, var(--wui-dark-bg-surface));
+        --wui-surface-mute: var(--wui-dark-bg-muted);
+        --wui-neutral-bg-dark: var(--wui-dark-bg-muted);
+        --wui-neutral-bg-light: var(--wui-dark-bg-surface);
+        --wui-danger-5: color-mix(in srgb, var(--wui-danger) 10%, var(--wui-dark-bg-surface));
+        --wui-chart-1: var(--wui-dark-primary);
+        --wui-chart-2: var(--wui-dark-chart-2);
+        --wui-chart-3: var(--wui-dark-chart-3);
+        --wui-chart-4: var(--wui-dark-chart-4);
+        --wui-chart-5: var(--wui-dark-chart-5);
+        --wui-chart-6: var(--wui-dark-chart-6);
+        --wui-chart-7: var(--wui-dark-chart-7);
+        --wui-chart-8: var(--wui-dark-chart-8);
+        --wui-chart-seq-0: var(--wui-dark-chart-seq-0);
+        --wui-chart-seq-1: var(--wui-dark-chart-seq-1);
+        --wui-chart-seq-2: var(--wui-dark-chart-seq-2);
+        --wui-chart-seq-3: var(--wui-dark-chart-seq-3);
+        --wui-chart-seq-4: var(--wui-dark-chart-seq-4);
+        --wui-chart-seq-5: var(--wui-dark-chart-seq-5);
+        --wui-chart-seq-6: var(--wui-dark-chart-seq-6);
+        --wui-chart-diverging-low: var(--wui-dark-chart-diverging-low);
+        --wui-chart-diverging-mid: var(--wui-dark-chart-diverging-mid);
+        --wui-chart-diverging-high: var(--wui-dark-chart-diverging-high);
+        --wui-chart-neutral: var(--wui-dark-chart-neutral);
+        --color-bg: var(--wui-dark-bg-page);
+        --color-bg-subtle: var(--wui-dark-bg-elevated);
+        --color-bg-muted: var(--wui-dark-bg-muted);
+        --color-surface: var(--wui-dark-bg-surface);
+        --color-surface-inverse: var(--wui-dark-text);
+        --color-text: var(--wui-dark-text);
+        --color-text-body: var(--wui-dark-text);
+        --color-text-muted: var(--wui-dark-text-muted);
+        --color-text-subtle: var(--wui-dark-text-subtle);
+        --color-text-inverse: var(--wui-text-heading);
+        --color-link: var(--wui-dark-primary);
+        --color-border: var(--wui-dark-border);
+        --color-border-subtle: color-mix(in srgb, var(--wui-dark-border) 50%, transparent);
+        --color-border-strong: var(--wui-dark-border-strong);
+        --color-field-bg: var(--wui-dark-bg-muted);
+        --color-field-border: var(--wui-dark-field-border);
+        --color-field-border-hover: var(--wui-dark-field-border-hover);
+        --color-field-border-focus: var(--wui-dark-primary);
+        --color-scrim: color-mix(in srgb, #000000 45%, transparent);
+        --color-scrim-strong: color-mix(in srgb, #000000 62%, transparent);
+        --color-progress-track: var(--wui-dark-progress-track);
+        --color-progress-label: #0F0F0F;
+        --color-thumb: color-mix(in srgb, var(--wui-dark-text) 12%, var(--wui-dark-bg-muted));
+        --color-scrollbar: rgba(255, 255, 255, 0.18);
+        --color-scrollbar-hover: rgba(255, 255, 255, 0.28);
+        --color-scrollbar-active: rgba(255, 255, 255, 0.4);
+        --color-primary: var(--wui-dark-primary);
+        --color-primary-hover: var(--wui-dark-primary-hover);
+        --color-primary-soft: color-mix(in srgb, var(--wui-primary) 20%, transparent);
+        --color-primary-text: var(--wui-dark-primary);
+        --color-on-primary: #0F0F0F;
+        --color-success: #30C780;
+        --color-success-pressed: color-mix(in srgb, var(--color-success) 85%, white);
+        --color-success-soft: color-mix(in srgb, var(--wui-success) 18%, transparent);
+        --color-success-border: color-mix(in srgb, var(--color-success) 40%, transparent);
+        --color-success-text: color-mix(in srgb, var(--wui-success) 75%, white);
+        --color-success-text-on-soft: color-mix(in srgb, var(--wui-success) 65%, white);
+        --color-success-strong: var(--color-success-text);
+        --color-on-success: #0F0F1A;
+        --color-on-success-strong: #0F0F0F;
+        --color-warning: #FBBF24;
+        --color-warning-pressed: color-mix(in srgb, var(--color-warning) 85%, white);
+        --color-warning-soft: color-mix(in srgb, var(--wui-warning) 18%, transparent);
+        --color-warning-border: color-mix(in srgb, var(--color-warning) 40%, transparent);
+        --color-warning-text: color-mix(in srgb, var(--wui-warning) 75%, white);
+        --color-warning-text-on-soft: color-mix(in srgb, var(--wui-warning) 65%, white);
+        --color-warning-strong: var(--color-warning-text);
+        --color-warning-strong-hover: color-mix(in srgb, var(--color-warning-strong) 85%, white);
+        --color-on-warning: #0F0F1A;
+        --color-on-warning-strong: #0F0F0F;
+        --color-danger: #F87171;
+        --color-danger-pressed: color-mix(in srgb, var(--color-danger) 85%, white);
+        --color-danger-soft: color-mix(in srgb, var(--wui-danger) 18%, transparent);
+        --color-danger-border: color-mix(in srgb, var(--color-danger) 40%, transparent);
+        --color-danger-text: color-mix(in srgb, var(--wui-danger) 75%, white);
+        --color-danger-text-on-soft: color-mix(in srgb, var(--wui-danger) 65%, white);
+        --color-danger-strong: var(--color-danger-text);
+        --color-danger-strong-hover: color-mix(in srgb, var(--color-danger-strong) 85%, white);
+        --color-on-danger: #0F0F1A;
+        --color-on-danger-strong: #0F0F0F;
+        --color-info: #60A5FA;
+        --color-info-pressed: color-mix(in srgb, var(--color-info) 85%, white);
+        --color-info-soft: color-mix(in srgb, var(--wui-info) 18%, transparent);
+        --color-info-border: color-mix(in srgb, var(--color-info) 40%, transparent);
+        --color-info-text: color-mix(in srgb, var(--wui-info) 75%, white);
+        --color-info-text-on-soft: color-mix(in srgb, var(--wui-info) 65%, white);
+        --color-info-strong: var(--color-info-text);
+        --color-on-info: #0F0F1A;
+        --color-on-info-strong: #0F0F0F;
+        --color-chart-1: var(--wui-dark-primary);
+        --color-chart-2: var(--wui-dark-chart-2);
+        --color-chart-3: var(--wui-dark-chart-3);
+        --color-chart-4: var(--wui-dark-chart-4);
+        --color-chart-5: var(--wui-dark-chart-5);
+        --color-chart-6: var(--wui-dark-chart-6);
+        --color-chart-7: var(--wui-dark-chart-7);
+        --color-chart-8: var(--wui-dark-chart-8);
+        --color-chart-seq-0: var(--wui-dark-chart-seq-0);
+        --color-chart-seq-1: var(--wui-dark-chart-seq-1);
+        --color-chart-seq-2: var(--wui-dark-chart-seq-2);
+        --color-chart-seq-3: var(--wui-dark-chart-seq-3);
+        --color-chart-seq-4: var(--wui-dark-chart-seq-4);
+        --color-chart-seq-5: var(--wui-dark-chart-seq-5);
+        --color-chart-seq-6: var(--wui-dark-chart-seq-6);
+        --color-chart-diverging-low: var(--wui-dark-chart-diverging-low);
+        --color-chart-diverging-mid: var(--wui-dark-chart-diverging-mid);
+        --color-chart-diverging-high: var(--wui-dark-chart-diverging-high);
+        --color-chart-neutral: var(--wui-dark-chart-neutral);
+        --wui-close-filter: invert(1) grayscale(100%) brightness(200%);
+        --wui-thumb-shadow: 0 2px 6px rgba(255, 255, 255, 0.1);
+        --wui-thumb-shadow-hover: 0 2px 12px rgba(255, 255, 255, 0.2);
+        --bs-body-color: var(--color-text);
+        --bs-emphasis-color: var(--color-text);
+        --bs-secondary-color: var(--color-text-muted);
+        --bs-tertiary-color: var(--color-text-subtle);
+        --bs-body-bg: var(--color-bg);
+        --bs-border-color: var(--color-border);
+        --bs-secondary-bg: var(--color-surface);
+        --bs-tertiary-bg: var(--color-bg-muted);
+        --bs-body-bg-rgb: 15, 17, 23;
+        --bs-body-color-rgb: 230, 232, 238;
+        --bs-emphasis-color-rgb: 230, 232, 238;
+        --bs-secondary-color-rgb: 180, 185, 198;
+        --bs-tertiary-color-rgb: 138, 144, 160;
+        --bs-secondary-bg-rgb: 24, 27, 35;
+        --bs-tertiary-bg-rgb: 35, 39, 51;
+        --bs-border-color-rgb: 42, 47, 58;
+        color-scheme: dark;
+    }
+}