/* AUTO-GENERATED from src/design-system/tokens.js. DO NOT EDIT. */
:root {
  color-scheme: light;
  --main-1000: var(--brand-ink);
  --main-900: var(--brand-flow-strong);
  --main-800: var(--brand-flow);
  --main-700: var(--brand-flow);
  --main-600: color-mix(in srgb, var(--brand-flow) 82%, var(--surface-panel));
  --main-500: color-mix(in srgb, var(--brand-flow) 66%, var(--surface-panel));
  --main-400: color-mix(in srgb, var(--brand-flow) 48%, var(--surface-panel));
  --main-300: color-mix(in srgb, var(--brand-flow) 30%, var(--surface-panel));
  --main-200: color-mix(in srgb, var(--brand-flow) 18%, var(--surface-panel));
  --main-100: var(--action-primary-soft);
  --main-50: var(--surface-canvas);
  --main-40: color-mix(in srgb, var(--brand-flow) 9%, var(--surface-canvas));
  --main-30: color-mix(in srgb, var(--brand-flow) 7%, var(--surface-canvas));
  --main-20: color-mix(in srgb, var(--brand-flow) 5%, var(--surface-canvas));
  --main-10: color-mix(in srgb, var(--brand-flow) 3%, var(--surface-canvas));
  --main-5: color-mix(in srgb, var(--brand-flow) 2%, var(--surface-canvas));
  --main-1: color-mix(in srgb, var(--brand-flow) 1%, var(--surface-canvas));
  --main-0: var(--surface-panel);
  --main-color: var(--main-700);
  --main-bright: var(--brand-flow);
  --gray-10000: #000000;
  --gray-2000: #0c0d0d;
  --gray-1000: #151616;
  --gray-900: #1e1f1f;
  --gray-800: #323333;
  --gray-700: #4c4d4d;
  --gray-600: #697070;
  --gray-500: #979999;
  --gray-400: #bdbfbf;
  --gray-300: #d7d9d9;
  --gray-200: #e4e6e6;
  --gray-150: #eef0f0;
  --gray-100: #eff2f2;
  --gray-50: #f5f7f7;
  --gray-25: #f8fafa;
  --gray-10: #fbfcfc;
  --gray-0: #ffffff;
  --color-primary-50: var(--main-50);
  --color-primary-100: var(--main-200);
  --color-primary-500: var(--main-500);
  --color-primary-700: var(--main-700);
  --color-primary-900: var(--main-900);
  --color-secondary-10: var(--gray-10);
  --color-secondary-50: var(--gray-50);
  --color-secondary-100: var(--gray-100);
  --color-secondary-500: var(--gray-700);
  --color-secondary-700: var(--gray-800);
  --color-secondary-900: var(--gray-900);
  --color-success-10: #fafff2;
  --color-success-50: #e6f7e6;
  --color-success-100: #b7eb8f;
  --color-success-500: #52c41a;
  --color-success-700: #389e0d;
  --color-success-900: #135200;
  --color-error-10: #fffaf9;
  --color-error-50: #fff2f0;
  --color-error-100: #ffccc7;
  --color-error-500: #ff4d4f;
  --color-error-700: #cf1322;
  --color-error-900: #820014;
  --color-warning-10: #fffef5;
  --color-warning-50: #fffbe6;
  --color-warning-100: #ffe58f;
  --color-warning-500: #faad14;
  --color-warning-700: #d48806;
  --color-warning-900: #ad6800;
  --color-info-10: #f5fbff;
  --color-info-50: #e6f7ff;
  --color-info-100: #bae7ff;
  --color-info-500: #1890ff;
  --color-info-700: #096dd9;
  --color-info-900: #0050b3;
  --color-accent-10: #f5fffe;
  --color-accent-50: #e6fffb;
  --color-accent-100: #87e8de;
  --color-accent-500: #13c2c2;
  --color-accent-700: #08979c;
  --color-accent-900: #006d75;
  --chart-palette-1: var(--main-500);
  --chart-palette-2: #5ad8a6;
  --chart-palette-3: #f6bd16;
  --chart-palette-4: #f27c7c;
  --chart-palette-5: #9581cc;
  --chart-palette-6: #6dc8ec;
  --chart-palette-7: #ff9d4d;
  --chart-palette-8: #92d050;
  --chart-palette-9: #e885ba;
  --chart-palette-10: #8c8c8c;
  --bg-sider: var(--main-5);
  --light-98: rgb(255 255 255 / 0.98);
  --light-95: rgb(255 255 255 / 0.95);
  --light-90: rgb(255 255 255 / 0.9);
  --light-85: rgb(255 255 255 / 0.85);
  --light-80: rgb(255 255 255 / 0.8);
  --light-75: rgb(255 255 255 / 0.75);
  --light-70: rgb(255 255 255 / 0.7);
  --light-60: rgb(255 255 255 / 0.6);
  --light-50: rgb(255 255 255 / 0.5);
  --light-25: rgb(255 255 255 / 0.25);
  --light-10: rgb(255 255 255 / 0.1);
  --light-5: rgb(255 255 255 / 0.05);
  --light-0: rgb(255 255 255 / 0);
  --dark-98: rgb(0 0 0 / 0.98);
  --dark-95: rgb(0 0 0 / 0.95);
  --dark-90: rgb(0 0 0 / 0.9);
  --dark-85: rgb(0 0 0 / 0.85);
  --dark-80: rgb(0 0 0 / 0.8);
  --dark-75: rgb(0 0 0 / 0.75);
  --dark-70: rgb(0 0 0 / 0.7);
  --dark-60: rgb(0 0 0 / 0.6);
  --dark-50: rgb(0 0 0 / 0.5);
  --dark-25: rgb(0 0 0 / 0.25);
  --dark-10: rgb(0 0 0 / 0.1);
  --dark-5: rgb(0 0 0 / 0.05);
  --dark-0: rgb(0 0 0 / 0);
  --shadow-0: rgb(0 0 0 / 0.02);
  --shadow-1: rgb(0 0 0 / 0.05);
  --shadow-2: rgb(0 0 0 / 0.08);
  --shadow-3: rgb(0 0 0 / 0.12);
  --shadow-4: rgb(0 0 0 / 0.16);
  --shadow-5: rgb(0 0 0 / 0.2);
  --color-trans-light: var(--light-85);
  --color-trans-dark: var(--dark-85);
  --header-height: 45px;
  --page-padding: 22px;
  --scrollbar-width: 4px;
  --wuwui-primitive-brand-flow-light: #1e6bff;
  --wuwui-primitive-brand-flow-dark: #78a7ff;
  --wuwui-primitive-brand-flow-strong-light: #1554d6;
  --wuwui-primitive-brand-flow-strong-dark: #9abaff;
  --wuwui-primitive-brand-sky-light: #00c7ff;
  --wuwui-primitive-brand-sky-dark: #55dcff;
  --wuwui-primitive-brand-ink-light: #0b1f3a;
  --wuwui-primitive-brand-ink-dark: #eef5ff;
  --wuwui-primitive-brand-cloud-light: #f3f8ff;
  --wuwui-primitive-brand-cloud-dark: #13233d;
  --wuwui-primitive-brand-mint-light: #22c55e;
  --wuwui-primitive-brand-mint-dark: #67d98b;
  --wuwui-primitive-brand-orange-light: #ff9f43;
  --wuwui-primitive-brand-orange-dark: #ffbd72;
  --wuwui-primitive-brand-coral-light: #ff6b66;
  --wuwui-primitive-brand-coral-dark: #ff928e;
  --wuwui-primitive-brand-gold-light: #f5c44d;
  --wuwui-primitive-brand-gold-dark: #f8d678;
  --wuwui-primitive-brand-purple-light: #7878ab;
  --wuwui-primitive-brand-purple-dark: #a9a9d2;
  --wuwui-primitive-surface-canvas-light: #f7faff;
  --wuwui-primitive-surface-canvas-dark: #0b1424;
  --wuwui-primitive-surface-sidebar-light: rgb(255 255 255 / 0.82);
  --wuwui-primitive-surface-sidebar-dark: rgb(12 25 45 / 0.9);
  --wuwui-primitive-surface-panel-light: #ffffff;
  --wuwui-primitive-surface-panel-dark: #101e33;
  --wuwui-primitive-surface-elevated-light: #f3f8ff;
  --wuwui-primitive-surface-elevated-dark: #162943;
  --wuwui-primitive-surface-inverse-light: #0b1f3a;
  --wuwui-primitive-surface-inverse-dark: #f4f8ff;
  --wuwui-primitive-surface-scrim-light: rgb(11 31 58 / 0.42);
  --wuwui-primitive-surface-scrim-dark: rgb(0 0 0 / 0.62);
  --wuwui-primitive-text-primary-light: #0b1f3a;
  --wuwui-primitive-text-primary-dark: #eef5ff;
  --wuwui-primitive-text-secondary-light: #61708a;
  --wuwui-primitive-text-secondary-dark: #b9c9df;
  --wuwui-primitive-text-tertiary-light: #5f6f86;
  --wuwui-primitive-text-tertiary-dark: #8498b4;
  --wuwui-primitive-border-subtle-light: #dce7f5;
  --wuwui-primitive-border-subtle-dark: #243b5d;
  --wuwui-primitive-border-strong-light: #c4d7ee;
  --wuwui-primitive-border-strong-dark: #385477;
  --wuwui-primitive-action-primary-light: #1e6bff;
  --wuwui-primitive-action-primary-dark: #78a7ff;
  --wuwui-primitive-action-primary-hover-light: #1554d6;
  --wuwui-primitive-action-primary-hover-dark: #9abaff;
  --wuwui-primitive-action-primary-soft-light: #eaf2ff;
  --wuwui-primitive-action-primary-soft-dark: #1a335a;
  --wuwui-primitive-action-primary-foreground-light: #ffffff;
  --wuwui-primitive-action-primary-foreground-dark: #0b1424;
  --wuwui-primitive-focus-ring-light: rgb(30 107 255 / 0.32);
  --wuwui-primitive-focus-ring-dark: rgb(120 167 255 / 0.48);
  --wuwui-primitive-status-success-surface-light: #eefbf2;
  --wuwui-primitive-status-success-surface-dark: #112a1b;
  --wuwui-primitive-status-success-foreground-light: #166534;
  --wuwui-primitive-status-success-foreground-dark: #a7f3c0;
  --wuwui-primitive-status-success-border-light: #4f9f68;
  --wuwui-primitive-status-success-border-dark: #4f9f68;
  --wuwui-primitive-status-warning-surface-light: #fff7e8;
  --wuwui-primitive-status-warning-surface-dark: #342711;
  --wuwui-primitive-status-warning-foreground-light: #7a4200;
  --wuwui-primitive-status-warning-foreground-dark: #ffd08a;
  --wuwui-primitive-status-warning-border-light: #a8660f;
  --wuwui-primitive-status-warning-border-dark: #b7791f;
  --wuwui-primitive-status-error-surface-light: #fff1f0;
  --wuwui-primitive-status-error-surface-dark: #35191e;
  --wuwui-primitive-status-error-foreground-light: #a61b29;
  --wuwui-primitive-status-error-foreground-dark: #ffb4b0;
  --wuwui-primitive-status-error-border-light: #c74750;
  --wuwui-primitive-status-error-border-dark: #dc5f65;
  --wuwui-primitive-status-info-surface-light: #edf4ff;
  --wuwui-primitive-status-info-surface-dark: #142744;
  --wuwui-primitive-status-info-foreground-light: #174ea6;
  --wuwui-primitive-status-info-foreground-dark: #b5d1ff;
  --wuwui-primitive-status-info-border-light: #467cc5;
  --wuwui-primitive-status-info-border-dark: #5b8fd9;
  --brand-flow: var(--wuwui-primitive-brand-flow-light);
  --brand-flow-strong: var(--wuwui-primitive-brand-flow-strong-light);
  --brand-sky: var(--wuwui-primitive-brand-sky-light);
  --brand-ink: var(--wuwui-primitive-brand-ink-light);
  --brand-cloud: var(--wuwui-primitive-brand-cloud-light);
  --color-status-success: var(--wuwui-primitive-brand-mint-light);
  --color-status-warning: var(--wuwui-primitive-brand-orange-light);
  --color-status-error: var(--wuwui-primitive-brand-coral-light);
  --color-status-attention: var(--wuwui-primitive-brand-gold-light);
  --color-status-neutral: var(--wuwui-primitive-brand-purple-light);
  --status-success-surface: var(--wuwui-primitive-status-success-surface-light);
  --status-success-foreground: var(--wuwui-primitive-status-success-foreground-light);
  --status-success-border: var(--wuwui-primitive-status-success-border-light);
  --status-warning-surface: var(--wuwui-primitive-status-warning-surface-light);
  --status-warning-foreground: var(--wuwui-primitive-status-warning-foreground-light);
  --status-warning-border: var(--wuwui-primitive-status-warning-border-light);
  --status-error-surface: var(--wuwui-primitive-status-error-surface-light);
  --status-error-foreground: var(--wuwui-primitive-status-error-foreground-light);
  --status-error-border: var(--wuwui-primitive-status-error-border-light);
  --status-info-surface: var(--wuwui-primitive-status-info-surface-light);
  --status-info-foreground: var(--wuwui-primitive-status-info-foreground-light);
  --status-info-border: var(--wuwui-primitive-status-info-border-light);
  --surface-canvas: var(--wuwui-primitive-surface-canvas-light);
  --surface-sidebar: var(--wuwui-primitive-surface-sidebar-light);
  --surface-panel: var(--wuwui-primitive-surface-panel-light);
  --surface-elevated: var(--wuwui-primitive-surface-elevated-light);
  --surface-inverse: var(--wuwui-primitive-surface-inverse-light);
  --surface-scrim: var(--wuwui-primitive-surface-scrim-light);
  --text-primary: var(--wuwui-primitive-text-primary-light);
  --text-secondary: var(--wuwui-primitive-text-secondary-light);
  --text-tertiary: var(--wuwui-primitive-text-tertiary-light);
  --border-subtle: var(--wuwui-primitive-border-subtle-light);
  --border-strong: var(--wuwui-primitive-border-strong-light);
  --action-primary: var(--wuwui-primitive-action-primary-light);
  --action-primary-hover: var(--wuwui-primitive-action-primary-hover-light);
  --action-primary-soft: var(--wuwui-primitive-action-primary-soft-light);
  --action-primary-foreground: var(--wuwui-primitive-action-primary-foreground-light);
  --focus-ring: var(--wuwui-primitive-focus-ring-light);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;
  --motion-fast: 150ms;
  --motion-standard: 220ms;
  --motion-slow: 300ms;
  --radius-card: var(--radius-xl);
  --radius-control: var(--radius-md);
  --button-height-md: var(--control-height-md);
  --button-min-width: 96px;
  --button-padding-inline: var(--space-4);
  --button-font-family: var(--font-sans);
  --button-font-size: var(--type-label-m-font-size);
  --button-line-height: var(--type-label-m-line-height);
  --button-font-weight: var(--type-label-m-font-weight);
  --button-letter-spacing: 0;
  --button-radius: var(--radius-control);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --tw-space-px: 1px;
  --tw-space-0-5: 2px;
  --tw-space-1: 4px;
  --tw-space-1-5: 6px;
  --tw-space-2: 8px;
  --tw-space-2-5: 10px;
  --tw-space-3: 12px;
  --tw-space-4: 16px;
  --tw-space-5: 20px;
  --tw-space-6: 24px;
  --tw-space-7: 28px;
  --tw-space-8: 32px;
  --tw-space-10: 40px;
  --tw-space-20: 80px;
  --tw-radius-sm: var(--radius-sm);
  --tw-radius-default: var(--radius-sm);
  --tw-radius-md: 6px;
  --tw-radius-lg: var(--radius-control);
  --tw-radius-xl: var(--radius-lg);
  --tw-radius-2xl: var(--radius-xl);
  --tw-radius-3xl: var(--radius-2xl);
  --tw-radius-4xl: 32px;
  --tw-radius-full: var(--radius-pill);
  --tw-font-size-xs: 12px;
  --tw-line-height-xs: 16px;
  --tw-font-size-sm: 14px;
  --tw-line-height-sm: 20px;
  --tw-font-size-base: 16px;
  --tw-line-height-base: 24px;
  --tw-font-size-lg: 18px;
  --tw-line-height-lg: 28px;
  --tw-font-size-xl: 20px;
  --tw-line-height-xl: 28px;
  --tw-font-size-2xl: 24px;
  --tw-line-height-2xl: 32px;
  --tw-font-size-3xl: 30px;
  --tw-line-height-3xl: 36px;
  --tw-font-size-4xl: 36px;
  --tw-line-height-4xl: 40px;
  --tw-font-size-5xl: 48px;
  --tw-line-height-5xl: 48px;
  --tw-font-size-6xl: 60px;
  --tw-line-height-6xl: 60px;
  --tw-font-size-7xl: 72px;
  --tw-line-height-7xl: 72px;
  --tw-font-size-8xl: 96px;
  --tw-line-height-8xl: 96px;
  --tw-font-size-9xl: 128px;
  --tw-line-height-9xl: 128px;
  --tw-font-weight-thin: 100;
  --tw-font-weight-extralight: 200;
  --tw-font-weight-light: 300;
  --tw-font-weight-normal: 400;
  --tw-font-weight-medium: 500;
  --tw-font-weight-semibold: 600;
  --tw-font-weight-bold: 700;
  --tw-font-weight-extrabold: 800;
  --tw-font-weight-black: 900;
  --tw-shadow-sm: var(--shadow-xs);
  --tw-shadow-default: var(--shadow-control);
  --tw-shadow-md: var(--shadow-medium);
  --tw-shadow-lg: var(--shadow-large);
  --tw-shadow-xl: var(--shadow-floating);
  --tw-shadow-2xl: var(--shadow-modal);
  --tw-shadow-inner: inset 0 2px 4px var(--color-static-black-06);
  --layout-sidebar-width: 240px;
  --layout-sidebar-collapsed-width: 64px;
  --layout-topbar-height: 64px;
  --layout-mobile-navigation-height: 64px;
  --layout-content-inset-top: var(--space-5);
  --layout-content-inset-inline: var(--space-5);
  --layout-content-inset-bottom: var(--space-4);
  --layout-page-padding: 32px;
  --layout-page-max-width: 1280px;
  --layout-page-content-max-width: 72rem;
  --layout-reading-max-width: 64rem;
  --layout-wide-max-width: 80rem;
  --layout-page-gutter: var(--space-4);
  --layout-page-gutter-wide: var(--space-5);
  --layout-page-block-start: var(--space-5);
  --layout-page-block-end: var(--space-6);
  --layout-section-gap: var(--space-5);
  --layout-card-padding: var(--space-5);
  --control-height-sm: 32px;
  --control-height-md: 40px;
  --control-height-lg: 48px;
  --control-target-min: 40px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --breakpoint-mobile: 375px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;
  --font-sans: 'Noto Sans SC Variable', 'Noto Sans SC', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wuwui-radius-control: 8px;
  --wuwui-radius-panel: 12px;
  --font-brand: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SFMono-Regular', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  --easing-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --z-sticky: 20;
  --z-popover: 30;
  --z-drawer: 40;
  --z-modal: 100;
  --z-toast: 120;
  --z-tooltip: 140;
  --color-static-white: #ffffff;
  --color-static-black: #000000;
  --color-static-white-03: rgb(255 255 255 / 0.03);
  --color-static-white-04: rgb(255 255 255 / 0.04);
  --color-static-white-05: rgb(255 255 255 / 0.05);
  --color-static-white-08: rgb(255 255 255 / 0.08);
  --color-static-white-09: rgb(255 255 255 / 0.09);
  --color-static-white-12: rgb(255 255 255 / 0.12);
  --color-static-white-14: rgb(255 255 255 / 0.14);
  --color-static-white-15: rgb(255 255 255 / 0.15);
  --color-static-white-20: rgb(255 255 255 / 0.2);
  --color-static-white-28: rgb(255 255 255 / 0.28);
  --color-static-white-50: rgb(255 255 255 / 0.5);
  --color-static-white-62: rgb(255 255 255 / 0.62);
  --color-static-white-72: rgb(255 255 255 / 0.72);
  --color-static-white-80: rgb(255 255 255 / 0.8);
  --color-static-black-06: rgb(0 0 0 / 0.06);
  --color-static-black-08: rgb(0 0 0 / 0.08);
  --color-static-black-10: rgb(0 0 0 / 0.1);
  --color-static-black-12: rgb(0 0 0 / 0.12);
  --color-static-black-15: rgb(0 0 0 / 0.15);
  --color-static-black-18: rgb(0 0 0 / 0.18);
  --color-static-black-20: rgb(0 0 0 / 0.2);
  --color-static-black-25: rgb(0 0 0 / 0.25);
  --color-static-black-30: rgb(0 0 0 / 0.3);
  --color-static-black-48: rgb(0 0 0 / 0.48);
  --color-static-black-75: rgb(0 0 0 / 0.75);
  --gradient-material-highlight-soft: linear-gradient(180deg, color-mix(in srgb, var(--color-static-white) 18%, transparent), transparent 70%);
  --gradient-material-highlight-medium: linear-gradient(180deg, color-mix(in srgb, var(--color-static-white) 20%, transparent), transparent 58%);
  --gradient-material-highlight-strong: linear-gradient(180deg, color-mix(in srgb, var(--color-static-white) 22%, transparent), transparent 36%);
  --shadow-session-running: 0 0 0 1px color-mix(in srgb, var(--surface-panel) 80%, transparent), 0 0 0 4px color-mix(in srgb, var(--color-status-success) 12%, transparent);
  --shadow-session-running-rest: 0 0 0 1px color-mix(in srgb, var(--surface-panel) 80%, transparent), 0 0 0 3px color-mix(in srgb, var(--color-status-success) 10%, transparent);
  --shadow-session-running-pulse: 0 0 0 1px color-mix(in srgb, var(--surface-panel) 80%, transparent), 0 0 0 5px color-mix(in srgb, var(--color-status-success) 16%, transparent);
  --shadow-nav-selected: inset 0 1px 0 color-mix(in srgb, var(--color-static-white) 52%, transparent), 0 1px 2px color-mix(in srgb, var(--action-primary) 8%, transparent);
  --shadow-settings-nav: inset 0 1px 0 color-mix(in srgb, var(--color-static-white) 58%, transparent);
  --shadow-desktop-menu-bar: 0 0.2rem 0.7rem color-mix(in srgb, var(--brand-ink) 8%, transparent), inset 0 1px color-mix(in srgb, var(--color-static-white) 30%, transparent);
  --shadow-desktop-dock: 0 1rem 2.8rem color-mix(in srgb, var(--brand-ink) 18%, transparent), 0 0.2rem 0.8rem color-mix(in srgb, var(--brand-ink) 10%, transparent), inset 0 1px color-mix(in srgb, var(--color-static-white) 36%, transparent);
  --shadow-desktop-dock-icon: 0 0.3rem 0.75rem color-mix(in srgb, var(--brand-ink) 8%, transparent);
  --shadow-desktop-launcher: 0 1.5rem 4rem color-mix(in srgb, var(--brand-ink) 20%, transparent), 0 0.25rem 1rem color-mix(in srgb, var(--brand-ink) 10%, transparent), inset 0 1px color-mix(in srgb, var(--color-static-white) 38%, transparent);
  --surface-code: #1e1f1f;
  --type-display-xl-font-family: var(--font-sans);
  --type-display-xl-font-size: 56px;
  --type-display-xl-line-height: 64px;
  --type-display-xl-font-weight: 700;
  --type-display-xl-letter-spacing: -0.02em;
  --type-heading-h1-font-family: var(--font-sans);
  --type-heading-h1-font-size: 40px;
  --type-heading-h1-line-height: 48px;
  --type-heading-h1-font-weight: 700;
  --type-heading-h1-letter-spacing: -0.015em;
  --type-heading-h2-font-family: var(--font-sans);
  --type-heading-h2-font-size: 28px;
  --type-heading-h2-line-height: 36px;
  --type-heading-h2-font-weight: 700;
  --type-heading-h2-letter-spacing: -0.01em;
  --type-title-l-font-family: var(--font-sans);
  --type-title-l-font-size: 20px;
  --type-title-l-line-height: 28px;
  --type-title-l-font-weight: 500;
  --type-title-l-letter-spacing: -0.004em;
  --type-body-m-font-family: var(--font-sans);
  --type-body-m-font-size: 15px;
  --type-body-m-line-height: 24px;
  --type-body-m-font-weight: 400;
  --type-body-m-letter-spacing: 0;
  --type-body-m-strong-font-family: var(--font-sans);
  --type-body-m-strong-font-size: 15px;
  --type-body-m-strong-line-height: 24px;
  --type-body-m-strong-font-weight: 600;
  --type-body-m-strong-letter-spacing: 0;
  --type-label-m-font-family: var(--font-sans);
  --type-label-m-font-size: 13px;
  --type-label-m-line-height: 18px;
  --type-label-m-font-weight: 500;
  --type-label-m-letter-spacing: 0.002em;
  --type-data-mono-label-font-family: var(--font-mono);
  --type-data-mono-label-font-size: 12px;
  --type-data-mono-label-line-height: 16px;
  --type-data-mono-label-font-weight: 500;
  --type-data-mono-label-letter-spacing: 0.02em;
  --shadow-panel: 0 12px 32px rgb(30 107 255 / 0.08);
  --shadow-floating: 0 22px 60px rgb(11 31 58 / 0.14);
  --shadow-orb: 0 28px 64px rgb(0 199 255 / 0.2);
  --brand-bright-foreground: #0b1f3a;
  --shadow-control-subtle: 0 3px 4px rgb(11 31 58 / 0.02);
  --shadow-control: 0 4px 12px rgb(11 31 58 / 0.08);
  --shadow-popover: 0 8px 24px rgb(11 31 58 / 0.08), 0 2px 8px rgb(11 31 58 / 0.04);
  --shadow-modal: 0 25px 50px -12px rgb(11 31 58 / 0.25);
  --shadow-xs: 0 1px 4px rgb(11 31 58 / 0.06);
  --shadow-medium: 0 6px 18px rgb(11 31 58 / 0.14);
  --shadow-large: 0 10px 30px rgb(11 31 58 / 0.14);
  --shadow-top: 0 -4px 16px rgb(11 31 58 / 0.12);
  --shadow-composer: 0 -4px 16px rgb(11 31 58 / 0.08), 0 4px 16px rgb(11 31 58 / 0.12);
  --shadow-text: 0 1px 2px rgb(0 0 0 / 0.18);
  --shadow-focus-soft: 0 0 0 2px rgb(30 107 255 / 0.1);
  --color-status-info: var(--brand-flow);
  --color-status-success-soft: var(--color-success-50);
  --color-status-success-strong: var(--color-success-700);
  --color-status-error-soft: var(--color-error-50);
  --color-status-error-strong: var(--color-error-700);
  --color-status-warning-strong: var(--color-warning-700);
  --color-chart-primary: var(--brand-flow);
  --color-chart-secondary: var(--brand-sky);
  --color-chart-tertiary: var(--color-status-neutral);
  --gradient-chart-info: linear-gradient(180deg, color-mix(in srgb, var(--color-status-info) 30%, transparent) 0%, color-mix(in srgb, var(--color-status-info) 5%, transparent) 100%);
  --gradient-chart-success: linear-gradient(180deg, color-mix(in srgb, var(--color-status-success) 30%, transparent) 0%, color-mix(in srgb, var(--color-status-success) 5%, transparent) 100%);
  --gradient-chart-warning: linear-gradient(180deg, color-mix(in srgb, var(--color-status-warning) 30%, transparent) 0%, color-mix(in srgb, var(--color-status-warning) 5%, transparent) 100%);
  --gradient-chart-error: linear-gradient(180deg, color-mix(in srgb, var(--color-status-error) 30%, transparent) 0%, color-mix(in srgb, var(--color-status-error) 5%, transparent) 100%);
  --shadow-chart-info: 0 4px 12px color-mix(in srgb, var(--color-status-info) 15%, transparent);
  --shadow-chart-success: 0 4px 12px color-mix(in srgb, var(--color-status-success) 15%, transparent);
  --shadow-chart-warning: 0 4px 12px color-mix(in srgb, var(--color-status-warning) 15%, transparent);
  --shadow-chart-error: 0 4px 12px color-mix(in srgb, var(--color-status-error) 15%, transparent);
  --color-bg-container: var(--surface-panel);
  --color-bg-elevated: var(--surface-elevated);
  --color-border: var(--border-strong);
  --color-border-secondary: var(--border-subtle);
  --color-text: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-tertiary);
  /* Frappe UI aliases are resolved through WUWUI semantics in both modes. */
  --surface-base: var(--surface-canvas);
  --surface-gray-1: var(--surface-panel);
  --surface-gray-2: var(--surface-elevated);
  --surface-gray-3: color-mix(in srgb, var(--surface-elevated) 78%, var(--surface-canvas));
  --subtle-fg: var(--surface-elevated);
  --ink-base: var(--text-primary);
  --ink-gray-9: var(--text-primary);
  --ink-gray-8: var(--text-primary);
  --ink-gray-7: var(--text-secondary);
  --ink-gray-6: var(--text-secondary);
  --ink-gray-5: var(--text-tertiary);
  --ink-gray-4: var(--text-tertiary);
  --ink-gray-3: var(--text-tertiary);
  --ink-blue-4: var(--status-info-foreground);
  --ink-blue-3: var(--status-info-foreground);
  --ink-green-5: var(--status-success-foreground);
  --ink-orange-5: var(--status-warning-foreground);
  --ink-red-5: var(--status-error-foreground);
  --ink-red-4: var(--status-error-foreground);
  --ink-red-3: var(--status-error-foreground);
  --outline-gray-1: var(--border-subtle);
}

:root.dark {
  color-scheme: dark;
  /* Frappe UI aliases are resolved through WUWUI semantics in both modes. */
  --surface-base: var(--surface-canvas);
  --surface-gray-1: var(--surface-panel);
  --surface-gray-2: var(--surface-elevated);
  --surface-gray-3: color-mix(in srgb, var(--surface-elevated) 78%, var(--surface-canvas));
  --subtle-fg: var(--surface-elevated);
  --ink-base: var(--text-primary);
  --ink-gray-9: var(--text-primary);
  --ink-gray-8: var(--text-primary);
  --ink-gray-7: var(--text-secondary);
  --ink-gray-6: var(--text-secondary);
  --ink-gray-5: var(--text-tertiary);
  --ink-gray-4: var(--text-tertiary);
  --ink-gray-3: var(--text-tertiary);
  --ink-blue-4: var(--status-info-foreground);
  --ink-blue-3: var(--status-info-foreground);
  --ink-green-5: var(--status-success-foreground);
  --ink-orange-5: var(--status-warning-foreground);
  --ink-red-5: var(--status-error-foreground);
  --ink-red-4: var(--status-error-foreground);
  --ink-red-3: var(--status-error-foreground);
  --outline-gray-1: var(--border-subtle);
  --main-1000: var(--brand-ink);
  --main-900: var(--brand-flow-strong);
  --main-800: var(--brand-flow);
  --main-700: var(--brand-flow);
  --main-600: color-mix(in srgb, var(--brand-flow) 82%, var(--surface-panel));
  --main-500: color-mix(in srgb, var(--brand-flow) 66%, var(--surface-panel));
  --main-400: color-mix(in srgb, var(--brand-flow) 48%, var(--surface-panel));
  --main-300: color-mix(in srgb, var(--brand-flow) 30%, var(--surface-panel));
  --main-200: color-mix(in srgb, var(--brand-flow) 18%, var(--surface-panel));
  --main-100: var(--action-primary-soft);
  --main-50: var(--surface-canvas);
  --main-40: color-mix(in srgb, var(--brand-flow) 9%, var(--surface-canvas));
  --main-30: color-mix(in srgb, var(--brand-flow) 7%, var(--surface-canvas));
  --main-20: color-mix(in srgb, var(--brand-flow) 5%, var(--surface-canvas));
  --main-10: color-mix(in srgb, var(--brand-flow) 3%, var(--surface-canvas));
  --main-5: color-mix(in srgb, var(--brand-flow) 2%, var(--surface-canvas));
  --main-1: color-mix(in srgb, var(--brand-flow) 1%, var(--surface-canvas));
  --main-0: var(--surface-panel);
  --main-color: var(--brand-flow);
  --main-bright: var(--brand-flow);
  --gray-10000: #fafafa;
  --gray-2000: #f8fafa;
  --gray-1000: #f5f7f7;
  --gray-900: #eff2f2;
  --gray-800: #eef0f0;
  --gray-700: #e4e6e6;
  --gray-600: #d7d9d9;
  --gray-500: #bdbfbf;
  --gray-400: #979999;
  --gray-300: #697070;
  --gray-200: #4c4d4d;
  --gray-150: #323333;
  --gray-100: #1e1f1f;
  --gray-50: #151616;
  --gray-25: #0c0d0d;
  --gray-10: #080808;
  --gray-0: #030303;
  --color-success-10: #0f1810;
  --color-success-50: #162312;
  --color-success-100: #273921;
  --color-success-500: #52c41a;
  --color-success-700: #73d13d;
  --color-success-900: #95de64;
  --color-error-10: #1a0a0b;
  --color-error-50: #2a1215;
  --color-error-100: #58181c;
  --color-error-500: #ff4d4f;
  --color-error-700: #ff7875;
  --color-error-900: #ffa39e;
  --color-warning-10: #1a1408;
  --color-warning-50: #2b2111;
  --color-warning-100: #614700;
  --color-warning-500: #faad14;
  --color-warning-700: #ffc53d;
  --color-warning-900: #ffd666;
  --color-info-10: #0c0d0d;
  --color-info-50: #111b26;
  --color-info-100: #111d2c;
  --color-info-500: #3d8fff;
  --color-info-700: #40a9ff;
  --color-info-900: #69c0ff;
  --color-accent-10: #081919;
  --color-accent-50: #0f2e2e;
  --color-accent-100: #164e63;
  --color-accent-500: #13c2c2;
  --color-accent-700: #36cfc9;
  --color-accent-900: #5cdbd3;
  --chart-palette-1: var(--main-300);
  --chart-palette-2: #3ea896;
  --chart-palette-3: #d6ad37;
  --chart-palette-4: #cf6666;
  --chart-palette-5: #8672b4;
  --chart-palette-6: #529ab8;
  --chart-palette-7: #d48242;
  --chart-palette-8: #82b354;
  --chart-palette-9: #c46e9e;
  --chart-palette-10: #7a7a7a;
  --bg-sider: #141414;
  --dark-98: rgb(255 255 255 / 0.98);
  --dark-95: rgb(255 255 255 / 0.95);
  --dark-90: rgb(255 255 255 / 0.9);
  --dark-85: rgb(255 255 255 / 0.85);
  --dark-80: rgb(255 255 255 / 0.8);
  --dark-75: rgb(255 255 255 / 0.75);
  --dark-70: rgb(255 255 255 / 0.7);
  --dark-60: rgb(255 255 255 / 0.6);
  --dark-50: rgb(255 255 255 / 0.5);
  --dark-25: rgb(255 255 255 / 0.25);
  --dark-10: rgb(255 255 255 / 0.1);
  --dark-5: rgb(255 255 255 / 0.05);
  --dark-0: rgb(255 255 255 / 0);
  --light-98: rgb(0 0 0 / 0.98);
  --light-95: rgb(0 0 0 / 0.95);
  --light-90: rgb(0 0 0 / 0.9);
  --light-85: rgb(0 0 0 / 0.85);
  --light-80: rgb(0 0 0 / 0.8);
  --light-75: rgb(0 0 0 / 0.75);
  --light-70: rgb(0 0 0 / 0.7);
  --light-60: rgb(0 0 0 / 0.6);
  --light-50: rgb(0 0 0 / 0.5);
  --light-25: rgb(0 0 0 / 0.25);
  --light-10: rgb(0 0 0 / 0.1);
  --light-5: rgb(0 0 0 / 0.05);
  --light-0: rgb(0 0 0 / 0);
  --shadow-0: rgb(255 255 255 / 0.02);
  --shadow-1: rgb(255 255 255 / 0.05);
  --shadow-2: rgb(255 255 255 / 0.08);
  --shadow-3: rgb(255 255 255 / 0.12);
  --shadow-4: rgb(255 255 255 / 0.16);
  --shadow-5: rgb(255 255 255 / 0.2);
  --color-trans-light: rgb(0 0 0 / 0.85);
  --color-trans-dark: rgb(255 255 255 / 0.85);
  --brand-flow: var(--wuwui-primitive-brand-flow-dark);
  --brand-flow-strong: var(--wuwui-primitive-brand-flow-strong-dark);
  --brand-sky: var(--wuwui-primitive-brand-sky-dark);
  --brand-ink: var(--wuwui-primitive-brand-ink-dark);
  --brand-cloud: var(--wuwui-primitive-brand-cloud-dark);
  --color-status-success: var(--wuwui-primitive-brand-mint-dark);
  --color-status-warning: var(--wuwui-primitive-brand-orange-dark);
  --color-status-error: var(--wuwui-primitive-brand-coral-dark);
  --color-status-attention: var(--wuwui-primitive-brand-gold-dark);
  --color-status-neutral: var(--wuwui-primitive-brand-purple-dark);
  --status-success-surface: var(--wuwui-primitive-status-success-surface-dark);
  --status-success-foreground: var(--wuwui-primitive-status-success-foreground-dark);
  --status-success-border: var(--wuwui-primitive-status-success-border-dark);
  --status-warning-surface: var(--wuwui-primitive-status-warning-surface-dark);
  --status-warning-foreground: var(--wuwui-primitive-status-warning-foreground-dark);
  --status-warning-border: var(--wuwui-primitive-status-warning-border-dark);
  --status-error-surface: var(--wuwui-primitive-status-error-surface-dark);
  --status-error-foreground: var(--wuwui-primitive-status-error-foreground-dark);
  --status-error-border: var(--wuwui-primitive-status-error-border-dark);
  --status-info-surface: var(--wuwui-primitive-status-info-surface-dark);
  --status-info-foreground: var(--wuwui-primitive-status-info-foreground-dark);
  --status-info-border: var(--wuwui-primitive-status-info-border-dark);
  --surface-canvas: var(--wuwui-primitive-surface-canvas-dark);
  --surface-sidebar: var(--wuwui-primitive-surface-sidebar-dark);
  --surface-panel: var(--wuwui-primitive-surface-panel-dark);
  --surface-elevated: var(--wuwui-primitive-surface-elevated-dark);
  --surface-inverse: var(--wuwui-primitive-surface-inverse-dark);
  --surface-scrim: var(--wuwui-primitive-surface-scrim-dark);
  --text-primary: var(--wuwui-primitive-text-primary-dark);
  --text-secondary: var(--wuwui-primitive-text-secondary-dark);
  --text-tertiary: var(--wuwui-primitive-text-tertiary-dark);
  --border-subtle: var(--wuwui-primitive-border-subtle-dark);
  --border-strong: var(--wuwui-primitive-border-strong-dark);
  --action-primary: var(--wuwui-primitive-action-primary-dark);
  --action-primary-hover: var(--wuwui-primitive-action-primary-hover-dark);
  --action-primary-soft: var(--wuwui-primitive-action-primary-soft-dark);
  --action-primary-foreground: var(--wuwui-primitive-action-primary-foreground-dark);
  --focus-ring: var(--wuwui-primitive-focus-ring-dark);
  --shadow-panel: 0 14px 38px rgb(0 0 0 / 0.28);
  --shadow-floating: 0 24px 64px rgb(0 0 0 / 0.45);
  --shadow-orb: 0 28px 64px rgb(0 199 255 / 0.12);
  --brand-bright-foreground: #0b1424;
  --shadow-control-subtle: 0 3px 4px rgb(0 0 0 / 0.12);
  --shadow-control: 0 4px 12px rgb(0 0 0 / 0.28);
  --shadow-popover: 0 8px 24px rgb(0 0 0 / 0.32), 0 2px 8px rgb(0 0 0 / 0.2);
  --shadow-modal: 0 25px 50px -12px rgb(0 0 0 / 0.5);
  --shadow-xs: 0 1px 4px rgb(0 0 0 / 0.24);
  --shadow-medium: 0 6px 18px rgb(0 0 0 / 0.36);
  --shadow-large: 0 10px 30px rgb(0 0 0 / 0.42);
  --shadow-top: 0 -4px 16px rgb(0 0 0 / 0.38);
  --shadow-composer: 0 -4px 16px rgb(0 0 0 / 0.28), 0 4px 16px rgb(0 0 0 / 0.36);
  --shadow-text: 0 1px 2px rgb(0 0 0 / 0.48);
  --shadow-focus-soft: 0 0 0 2px rgb(120 167 255 / 0.18);
}

@media (min-width: 1440px) {
  :root {
    --page-padding: 30px;
  }
}

@media (max-width: 1199px) {
  :root {
    --page-padding: 18px;
  }
}

@media (max-width: 768px) {
  :root {
    --page-padding: 14px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --surface-sidebar: var(--surface-panel);
  }

  :root.dark {
    --surface-sidebar: var(--surface-panel);
  }
}

@media (prefers-contrast: more) {
  :root {
    --border-subtle: var(--border-strong);
    --focus-ring: var(--brand-flow);
  }

  :root.dark {
    --border-subtle: var(--border-strong);
    --focus-ring: var(--brand-flow);
  }
}