/* 唯一的设计值来源。组件引用语义名称，主题只覆盖颜色。 */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/InterVariable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/InterVariable-Italic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
:root {
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-size-base: 14px;
  --font-size-2xl: calc(1rem * 32 / 14);
  --font-size-xl: calc(1rem * 24 / 14);
  --font-size-lg: calc(1rem * 20 / 14);
  --font-size-md: calc(1rem * 16 / 14);
  --font-size-sm: 1rem;
  --font-size-xs: calc(1rem * 12 / 14);
  --table-first-column-width: 200px;
  --table-text-style-name-width: var(--table-first-column-width);
  --table-text-style-size-width: calc((100% - var(--table-first-column-width)) * 20 / 82);
  --table-text-style-weight-width: calc((100% - var(--table-first-column-width)) * 20 / 82);
  --table-text-style-line-width: calc((100% - var(--table-first-column-width)) * 14 / 82);
  --table-text-style-purpose-width: calc((100% - var(--table-first-column-width)) * 10 / 82);
  --table-text-style-example-width: calc((100% - var(--table-first-column-width)) * 18 / 82);
  --text-xs: var(--font-size-xs);
  --text-sm: var(--font-size-xs);
  --text-body: var(--font-size-sm);
  --text-ui: var(--font-size-sm);
  --text-heading: var(--font-size-lg);
  --text-prose: var(--font-size-sm);
  --text-section: var(--font-size-lg);
  --text-subheading: var(--font-size-lg);
  --line-heading: 1.3;
  --content-section-gap: var(--space-32);
  --text-title: var(--font-size-2xl);
  --line-tight: 1.2;
  --line-body: 1.6;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --radius-preset-small: 2px;
  --radius-preset-default: 4px;
  --radius-preset-soft: 6px;
  --radius-preset-pill: 24px;
  --radius-preview-small: 1px;
  --radius-preview-default: 2px;
  --radius-preview-soft: 3px;
  --radius-preview-pill: 6px;
  --radius-base: var(--radius-preset-default);
  --radius-max: 24px;
  --radius-none: 0;
  --radius-xs: min(var(--radius-base), var(--radius-max));
  --radius-sm: min(calc(var(--radius-base) * 1.5), var(--radius-max));
  --tab-medium-font-size: var(--font-size-xs);
  --tab-large-font-size: var(--font-size-sm);
  --tab-padding-y: var(--button-padding-y);
  --tab-padding-x: var(--button-padding-x);
  --tab-height: calc(round(nearest, var(--font-size-xs) * var(--line-body), 1px) + var(--space-3) * 2);
  --radius-md: min(calc(var(--radius-base) * 2), var(--radius-max));
  --radius-lg: min(calc(var(--radius-base) * 3), var(--radius-max));
  --menu-padding: var(--space-2);
  --popover-gap: var(--space-4);
  --radius-menu: min(var(--radius-max), calc(min(var(--radius-sm), calc(var(--tab-height) / 2)) + var(--menu-padding) + var(--border-width)));
  --radius-full: 9999px;
  --border-width: 1px;
  --border-style: solid;
  --focus-width: 2px;
  --focus-offset: 3px;
  --icon-sm: 12px;
  --icon-search-result: 14px;
  --icon-chevron: 16px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --button-padding-y: var(--space-3);
  --button-padding-x: var(--space-6);
  --button-small-padding-y: var(--space-2);
  --button-small-padding-x: var(--space-4);
  --control-sm: 28px;
  --control-md: 36px;
  --control-lg: 44px;
  --layout-theme-menu: 200px;
  --layout-sidebar: 280px;
  --layout-dialog: 480px;
  --layout-search: 640px;
  --layout-table-min: 520px;
  --table-token-width: var(--table-first-column-width);
  --table-value-width: calc((100% - var(--table-first-column-width)) * 20 / 70);
  --table-purpose-width: calc((100% - var(--table-first-column-width)) * 50 / 70);
  --table-example-purpose-width: calc((100% - var(--table-first-column-width)) * 25 / 70);
  --table-example-width: calc((100% - var(--table-first-column-width)) * 25 / 70);
  --table-palette-token-width: var(--table-first-column-width);
  --table-palette-value-width: calc((100% - var(--table-first-column-width)) * 30 / 55);
  --table-palette-purpose-width: calc((100% - var(--table-first-column-width)) * 25 / 55);
  --table-color-value-width: calc((100% - var(--table-first-column-width)) * 13 / 78);
  --table-color-token-width: var(--table-first-column-width);
  --table-color-source-width: calc((100% - var(--table-first-column-width)) * 19 / 78);
  --layout-color-table-min: 1000px;
  --table-color-purpose-width: calc((100% - var(--table-first-column-width)) * 14 / 78);
  --table-api-property-width: var(--table-first-column-width);
  --table-api-options-width: calc((100% - var(--table-first-column-width)) * 30 / 76);
  --table-api-default-width: calc((100% - var(--table-first-column-width)) * 14 / 76);
  --table-api-purpose-width: calc((100% - var(--table-first-column-width)) * 32 / 76);
  --layout-search-max: 480px;
  --preview-height: 160px;
  --preview-height-mobile: 180px;
  --toolbar-height: 60px;
  --scrollbar-size: 6px;
  --control-pressed-offset: 1px;
  --button-press-duration: 100ms;
  --control-color-duration: 100ms;
  --spinner-size: var(--icon-sm);
  --spinner-stroke-width: calc(var(--stroke-width) * 1px);
  --spinner-duration: 1s;
  --stroke-width: 1.5;
  --stroke-chevron: 1;
  /* 基础模糊样式 */
  --blur-weak: 4px;
  --blur-normal: 8px;
  --blur-strong: 16px;
  /* 场景映射：引用基础模糊样式 */
  --blur-overlay: var(--blur-normal);
  --layout-header: 64px;
  --layout-content: 640px;
  --layout-toc: 240px;
  --layout-column-gap: var(--space-32);
  --toc-track-width: 2px;
  --duration-slow: 700ms;
  --layout-max: calc(var(--layout-content) + var(--layout-toc) + var(--layout-column-gap) + var(--space-24) * 2);
  --duration-fast: 300ms;
  --duration-normal: 500ms;
  --page-entry-duration: var(--duration-slow);
  /* 动效模板：组件复用配方，时长仍引用已有尺度。 */
  --motion-page-offset: var(--space-4);
  --motion-popover-offset: calc(-1 * var(--space-2));
  --motion-dialog-offset: var(--space-4);
  --motion-control-transition: background var(--control-color-duration) var(--easing-ease-in-out), color var(--control-color-duration) var(--easing-ease-in-out), transform var(--button-press-duration) var(--easing-ease-in-out);
  --motion-drawer-transition: transform var(--duration-normal) var(--easing-ease-in-out), visibility var(--duration-normal) var(--easing-ease-in-out);
  --easing-ease-in: ease-in;
  --easing-ease-out: ease-out;
  --easing-ease-in-out: ease-in-out;
  --easing-linear: linear;
  --opacity-disabled: .4;
  --shadow-default: 0 var(--space-2) var(--space-8) var(--color-shadow-default);
  --shadow-dialog: 0 var(--space-2) var(--space-12) var(--color-shadow-dialog);
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-6: 12px;
  --space-8: 16px;
  --space-12: 24px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;
  --space-32: 64px;
  --space-64: 128px;
}

/* Form 按用户提供的界面灰整理；其余保留 Tailwind CSS 官方 26 组色板。
   来源：https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/theme.css
   统一使用 sRGB HEX；透明色使用单一色板色配合显式不透明度。 */
:root {
  --palette-form-50: #FFFFFF;
  --palette-form-100: #F3F3F3;
  --palette-form-200: #E8E8E8;
  --palette-form-300: #CDCDCD;
  --palette-form-400: #AFAFAF;
  --palette-form-500: #8F8F8F;
  --palette-form-600: #5D5D5D;
  --palette-form-700: #414141;
  --palette-form-800: #303030;
  --palette-form-900: #212121;
  --palette-form-950: #0D0D0D;
  --palette-red-50: #FEF2F2;
  --palette-red-100: #FFE2E2;
  --palette-red-200: #FFC9C9;
  --palette-red-300: #FFA2A2;
  --palette-red-400: #FF6467;
  --palette-red-500: #FB2C36;
  --palette-red-600: #E7000B;
  --palette-red-700: #C10007;
  --palette-red-800: #9F0712;
  --palette-red-900: #82181A;
  --palette-red-950: #460809;
  --palette-orange-50: #FFF7ED;
  --palette-orange-100: #FFEDD4;
  --palette-orange-200: #FFD6A7;
  --palette-orange-300: #FFB86A;
  --palette-orange-400: #FF8904;
  --palette-orange-500: #FF6900;
  --palette-orange-600: #F54900;
  --palette-orange-700: #CA3500;
  --palette-orange-800: #9F2D00;
  --palette-orange-900: #7E2A0C;
  --palette-orange-950: #441306;
  --palette-amber-50: #FFFBEB;
  --palette-amber-100: #FEF3C6;
  --palette-amber-200: #FEE685;
  --palette-amber-300: #FFD230;
  --palette-amber-400: #FFB900;
  --palette-amber-500: #FE9A00;
  --palette-amber-600: #E17100;
  --palette-amber-700: #BB4D00;
  --palette-amber-800: #973C00;
  --palette-amber-900: #7B3306;
  --palette-amber-950: #461901;
  --palette-yellow-50: #FEFCE8;
  --palette-yellow-100: #FEF9C2;
  --palette-yellow-200: #FFF085;
  --palette-yellow-300: #FFDF20;
  --palette-yellow-400: #FDC700;
  --palette-yellow-500: #F0B100;
  --palette-yellow-600: #D08700;
  --palette-yellow-700: #A65F00;
  --palette-yellow-800: #894B00;
  --palette-yellow-900: #733E0A;
  --palette-yellow-950: #432004;
  --palette-lime-50: #F7FEE7;
  --palette-lime-100: #ECFCCA;
  --palette-lime-200: #D8F999;
  --palette-lime-300: #BBF451;
  --palette-lime-400: #9AE600;
  --palette-lime-500: #7CCF00;
  --palette-lime-600: #5EA500;
  --palette-lime-700: #497D00;
  --palette-lime-800: #3C6300;
  --palette-lime-900: #35530E;
  --palette-lime-950: #192E03;
  --palette-green-50: #F0FDF4;
  --palette-green-100: #DCFCE7;
  --palette-green-200: #B9F8CF;
  --palette-green-300: #7BF1A8;
  --palette-green-400: #05DF72;
  --palette-green-500: #00C950;
  --palette-green-600: #00A63E;
  --palette-green-700: #008236;
  --palette-green-800: #016630;
  --palette-green-900: #0D542B;
  --palette-green-950: #032E15;
  --palette-emerald-50: #ECFDF5;
  --palette-emerald-100: #D0FAE5;
  --palette-emerald-200: #A4F4CF;
  --palette-emerald-300: #5EE9B5;
  --palette-emerald-400: #00D492;
  --palette-emerald-500: #00BC7D;
  --palette-emerald-600: #009966;
  --palette-emerald-700: #007A55;
  --palette-emerald-800: #006045;
  --palette-emerald-900: #004F3B;
  --palette-emerald-950: #002C22;
  --palette-teal-50: #F0FDFA;
  --palette-teal-100: #CBFBF1;
  --palette-teal-200: #96F7E4;
  --palette-teal-300: #46ECD5;
  --palette-teal-400: #00D5BE;
  --palette-teal-500: #00BBA7;
  --palette-teal-600: #009689;
  --palette-teal-700: #00786F;
  --palette-teal-800: #005F5A;
  --palette-teal-900: #0B4F4A;
  --palette-teal-950: #022F2E;
  --palette-cyan-50: #ECFEFF;
  --palette-cyan-100: #CEFAFE;
  --palette-cyan-200: #A2F4FD;
  --palette-cyan-300: #53EAFD;
  --palette-cyan-400: #00D3F2;
  --palette-cyan-500: #00B8DB;
  --palette-cyan-600: #0092B8;
  --palette-cyan-700: #007595;
  --palette-cyan-800: #005F78;
  --palette-cyan-900: #104E64;
  --palette-cyan-950: #053345;
  --palette-sky-50: #F0F9FF;
  --palette-sky-100: #DFF2FE;
  --palette-sky-200: #B8E6FE;
  --palette-sky-300: #74D4FF;
  --palette-sky-400: #00BCFF;
  --palette-sky-500: #00A6F4;
  --palette-sky-600: #0084D1;
  --palette-sky-700: #0069A8;
  --palette-sky-800: #00598A;
  --palette-sky-900: #024A70;
  --palette-sky-950: #052F4A;
  --palette-blue-50: #EFF6FF;
  --palette-blue-100: #DBEAFE;
  --palette-blue-200: #BEDBFF;
  --palette-blue-300: #8EC5FF;
  --palette-blue-400: #51A2FF;
  --palette-blue-500: #2B7FFF;
  --palette-blue-600: #155DFC;
  --palette-blue-700: #1447E6;
  --palette-blue-800: #193CB8;
  --palette-blue-900: #1C398E;
  --palette-blue-950: #162456;
  --palette-indigo-50: #EEF2FF;
  --palette-indigo-100: #E0E7FF;
  --palette-indigo-200: #C6D2FF;
  --palette-indigo-300: #A3B3FF;
  --palette-indigo-400: #7C86FF;
  --palette-indigo-500: #615FFF;
  --palette-indigo-600: #4F39F6;
  --palette-indigo-700: #432DD7;
  --palette-indigo-800: #372AAC;
  --palette-indigo-900: #312C85;
  --palette-indigo-950: #1E1A4D;
  --palette-violet-50: #F5F3FF;
  --palette-violet-100: #EDE9FE;
  --palette-violet-200: #DDD6FF;
  --palette-violet-300: #C4B4FF;
  --palette-violet-400: #A684FF;
  --palette-violet-500: #8E51FF;
  --palette-violet-600: #7F22FE;
  --palette-violet-700: #7008E7;
  --palette-violet-800: #5D0EC0;
  --palette-violet-900: #4D179A;
  --palette-violet-950: #2F0D68;
  --palette-purple-50: #FAF5FF;
  --palette-purple-100: #F3E8FF;
  --palette-purple-200: #E9D4FF;
  --palette-purple-300: #DAB2FF;
  --palette-purple-400: #C27AFF;
  --palette-purple-500: #AD46FF;
  --palette-purple-600: #9810FA;
  --palette-purple-700: #8200DB;
  --palette-purple-800: #6E11B0;
  --palette-purple-900: #59168B;
  --palette-purple-950: #3C0366;
  --palette-fuchsia-50: #FDF4FF;
  --palette-fuchsia-100: #FAE8FF;
  --palette-fuchsia-200: #F6CFFF;
  --palette-fuchsia-300: #F4A8FF;
  --palette-fuchsia-400: #ED6AFF;
  --palette-fuchsia-500: #E12AFB;
  --palette-fuchsia-600: #C800DE;
  --palette-fuchsia-700: #A800B7;
  --palette-fuchsia-800: #8A0194;
  --palette-fuchsia-900: #721378;
  --palette-fuchsia-950: #4B004F;
  --palette-pink-50: #FDF2F8;
  --palette-pink-100: #FCE7F3;
  --palette-pink-200: #FCCEE8;
  --palette-pink-300: #FDA5D5;
  --palette-pink-400: #FB64B6;
  --palette-pink-500: #F6339A;
  --palette-pink-600: #E60076;
  --palette-pink-700: #C6005C;
  --palette-pink-800: #A3004C;
  --palette-pink-900: #861043;
  --palette-pink-950: #510424;
  --palette-rose-50: #FFF1F2;
  --palette-rose-100: #FFE4E6;
  --palette-rose-200: #FFCCD3;
  --palette-rose-300: #FFA1AD;
  --palette-rose-400: #FF637E;
  --palette-rose-500: #FF2056;
  --palette-rose-600: #EC003F;
  --palette-rose-700: #C70036;
  --palette-rose-800: #A50036;
  --palette-rose-900: #8B0836;
  --palette-rose-950: #4D0218;
  --palette-slate-50: #F8FAFC;
  --palette-slate-100: #F1F5F9;
  --palette-slate-200: #E2E8F0;
  --palette-slate-300: #CAD5E2;
  --palette-slate-400: #90A1B9;
  --palette-slate-500: #62748E;
  --palette-slate-600: #45556C;
  --palette-slate-700: #314158;
  --palette-slate-800: #1D293D;
  --palette-slate-900: #0F172B;
  --palette-slate-950: #020618;
  --palette-gray-50: #F9FAFB;
  --palette-gray-100: #F3F4F6;
  --palette-gray-200: #E5E7EB;
  --palette-gray-300: #D1D5DC;
  --palette-gray-400: #99A1AF;
  --palette-gray-500: #6A7282;
  --palette-gray-600: #4A5565;
  --palette-gray-700: #364153;
  --palette-gray-800: #1E2939;
  --palette-gray-900: #101828;
  --palette-gray-950: #030712;
  --palette-zinc-50: #FAFAFA;
  --palette-zinc-100: #F4F4F5;
  --palette-zinc-200: #E4E4E7;
  --palette-zinc-300: #D4D4D8;
  --palette-zinc-400: #9F9FA9;
  --palette-zinc-500: #71717B;
  --palette-zinc-600: #52525C;
  --palette-zinc-700: #3F3F46;
  --palette-zinc-800: #27272A;
  --palette-zinc-900: #18181B;
  --palette-zinc-950: #09090B;
  --palette-neutral-50: #FAFAFA;
  --palette-neutral-100: #F5F5F5;
  --palette-neutral-200: #E5E5E5;
  --palette-neutral-300: #D4D4D4;
  --palette-neutral-400: #A1A1A1;
  --palette-neutral-500: #737373;
  --palette-neutral-600: #525252;
  --palette-neutral-700: #404040;
  --palette-neutral-800: #262626;
  --palette-neutral-900: #171717;
  --palette-neutral-950: #0A0A0A;
  --palette-stone-50: #FAFAF9;
  --palette-stone-100: #F5F5F4;
  --palette-stone-200: #E7E5E4;
  --palette-stone-300: #D6D3D1;
  --palette-stone-400: #A6A09B;
  --palette-stone-500: #79716B;
  --palette-stone-600: #57534D;
  --palette-stone-700: #44403B;
  --palette-stone-800: #292524;
  --palette-stone-900: #1C1917;
  --palette-stone-950: #0C0A09;
  --palette-mauve-50: #FAFAFA;
  --palette-mauve-100: #F3F1F3;
  --palette-mauve-200: #E7E4E7;
  --palette-mauve-300: #D7D0D7;
  --palette-mauve-400: #A89EA9;
  --palette-mauve-500: #79697B;
  --palette-mauve-600: #594C5B;
  --palette-mauve-700: #463947;
  --palette-mauve-800: #2A212C;
  --palette-mauve-900: #1D161E;
  --palette-mauve-950: #0C090C;
  --palette-olive-50: #FBFBF9;
  --palette-olive-100: #F4F4F0;
  --palette-olive-200: #E8E8E3;
  --palette-olive-300: #D8D8D0;
  --palette-olive-400: #ABAB9C;
  --palette-olive-500: #7C7C67;
  --palette-olive-600: #5B5B4B;
  --palette-olive-700: #474739;
  --palette-olive-800: #2B2B22;
  --palette-olive-900: #1D1D16;
  --palette-olive-950: #0C0C09;
  --palette-mist-50: #F9FBFB;
  --palette-mist-100: #F1F3F3;
  --palette-mist-200: #E3E7E8;
  --palette-mist-300: #D0D6D8;
  --palette-mist-400: #9CA8AB;
  --palette-mist-500: #67787C;
  --palette-mist-600: #4B585B;
  --palette-mist-700: #394447;
  --palette-mist-800: #22292B;
  --palette-mist-900: #161B1D;
  --palette-mist-950: #090B0C;
  --palette-taupe-50: #FBFAF9;
  --palette-taupe-100: #F3F1F1;
  --palette-taupe-200: #E8E4E3;
  --palette-taupe-300: #D8D2D0;
  --palette-taupe-400: #ABA09C;
  --palette-taupe-500: #7C6D67;
  --palette-taupe-600: #5B4F4B;
  --palette-taupe-700: #473C39;
  --palette-taupe-800: #2B2422;
  --palette-taupe-900: #1D1816;
  --palette-taupe-950: #0C0A09;
  --palette-white: #ffffff;
  --palette-black: #000000;
}

/* 阴影颜色语义，阴影尺寸与颜色分别维护。 */
:root {
  --color-shadow-default: color-mix(in srgb, var(--palette-black) 12%, transparent);
  --source-color-shadow-default: "color-mix(in srgb, var(--palette-black) 12%, transparent)";
  --color-shadow-dialog: color-mix(in srgb, var(--palette-black) 20%, transparent);
  --source-color-shadow-dialog: "color-mix(in srgb, var(--palette-black) 20%, transparent)";
}

/* 品牌与状态标准色：组件按同色系选择具体场景的色阶。 */
:root {
  --color-info: var(--palette-blue-500);
  --source-color-info: "var(--palette-blue-500)";
  --color-success: var(--palette-emerald-500);
  --source-color-success: "var(--palette-emerald-500)";
  --color-warning: var(--palette-amber-500);
  --source-color-warning: "var(--palette-amber-500)";
  --color-danger: var(--palette-red-500);
  --source-color-danger: "var(--palette-red-500)";
}

:root, .token-theme-light {
  --color-border-swatch: var(--palette-form-200);
  --source-color-border-swatch: "var(--palette-form-200)";
  --color-bg-sidebar: var(--palette-form-50);
  --source-color-bg-sidebar: "var(--palette-form-50)";
  --color-bg-inverted: var(--palette-form-950);
  --source-color-bg-inverted: "var(--palette-form-950)";
  --color-text-inverted: var(--palette-form-50);
  --source-color-text-inverted: "var(--palette-form-50)";
  --color-bg-primary: var(--palette-form-50);
  --source-color-bg-primary: "var(--palette-form-50)";
  --color-bg-surface: var(--palette-form-50);
  --source-color-bg-surface: "var(--palette-form-50)";
  --color-bg-secondary: var(--palette-form-200);
  --source-color-bg-secondary: "var(--palette-form-200)";
  --color-bg-tertiary: var(--palette-form-100);
  --source-color-bg-tertiary: "var(--palette-form-100)";
  --color-text-primary: var(--palette-form-950);
  --source-color-text-primary: "var(--palette-form-950)";
  --color-text-secondary: var(--palette-form-600);
  --source-color-text-secondary: "var(--palette-form-600)";
  --color-text-tertiary: var(--palette-form-500);
  --source-color-text-tertiary: "var(--palette-form-500)";
  --color-text-disabled: var(--palette-form-500);
  --source-color-text-disabled: "var(--palette-form-500)";
  --color-border-secondary: var(--palette-form-200);
  --source-color-border-secondary: "var(--palette-form-200)";
  --color-border-control: var(--palette-form-200);
  --source-color-border-control: "var(--palette-form-200)";
  --color-border-primary: var(--palette-form-500);
  --source-color-border-primary: "var(--palette-form-500)";
  --color-scrollbar: var(--palette-form-300);
  --source-color-scrollbar: "var(--palette-form-300)";
  --color-scrollbar-hover: var(--palette-form-500);
  --source-color-scrollbar-hover: "var(--palette-form-500)";
  --color-bg-overlay: color-mix(in srgb, var(--palette-black) 70%, transparent);
  --source-color-bg-overlay: "color-mix(in srgb, var(--palette-black) 70%, transparent)";
  color-scheme: light;
  --color-bg-hover: var(--palette-form-100);
  --source-color-bg-hover: "var(--palette-form-100)";
  --color-bg-hover-strong: var(--palette-form-200);
  --source-color-bg-hover-strong: "var(--palette-form-200)";
  --color-state-pressed: var(--palette-black);
  --source-color-state-pressed: "var(--palette-black)";
  --color-bg-pressed: var(--palette-form-300);
  --source-color-bg-pressed: "var(--palette-form-300)";
  --color-bg-selected: var(--palette-form-100);
  --source-color-bg-selected: "var(--palette-form-100)";
}

body.dark, .token-theme-dark {
  --color-border-swatch: var(--palette-form-700);
  --source-color-border-swatch: "var(--palette-form-700)";
  --color-bg-sidebar: var(--palette-form-950);
  --source-color-bg-sidebar: "var(--palette-form-950)";
  --color-bg-inverted: var(--palette-form-50);
  --source-color-bg-inverted: "var(--palette-form-50)";
  --color-text-inverted: var(--palette-form-950);
  --source-color-text-inverted: "var(--palette-form-950)";
  --color-bg-primary: var(--palette-form-950);
  --source-color-bg-primary: "var(--palette-form-950)";
  --color-bg-surface: var(--palette-form-900);
  --source-color-bg-surface: "var(--palette-form-900)";
  --color-bg-secondary: var(--palette-form-800);
  --source-color-bg-secondary: "var(--palette-form-800)";
  --color-bg-tertiary: var(--palette-form-800);
  --source-color-bg-tertiary: "var(--palette-form-800)";
  --color-text-primary: var(--palette-form-50);
  --source-color-text-primary: "var(--palette-form-50)";
  --color-text-secondary: var(--palette-form-500);
  --source-color-text-secondary: "var(--palette-form-500)";
  --color-text-tertiary: var(--palette-form-400);
  --source-color-text-tertiary: "var(--palette-form-400)";
  --color-text-disabled: var(--palette-form-500);
  --source-color-text-disabled: "var(--palette-form-500)";
  --color-border-secondary: color-mix(in srgb, var(--palette-white) 10%, transparent);
  --source-color-border-secondary: "color-mix(in srgb, var(--palette-white) 10%, transparent)";
  --color-border-control: color-mix(in srgb, var(--palette-white) 15%, transparent);
  --source-color-border-control: "color-mix(in srgb, var(--palette-white) 15%, transparent)";
  --color-border-primary: color-mix(in srgb, var(--palette-white) 20%, transparent);
  --source-color-border-primary: "color-mix(in srgb, var(--palette-white) 20%, transparent)";

  --color-bg-overlay: color-mix(in srgb, var(--palette-black) 70%, transparent);
  --source-color-bg-overlay: "color-mix(in srgb, var(--palette-black) 70%, transparent)";
  color-scheme: dark;
  --color-bg-hover: var(--palette-form-800);
  --source-color-bg-hover: "var(--palette-form-800)";
  --color-bg-hover-strong: var(--palette-form-700);
  --source-color-bg-hover-strong: "var(--palette-form-700)";
  --color-state-pressed: var(--palette-black);
  --source-color-state-pressed: "var(--palette-black)";
  --color-bg-pressed: var(--palette-form-900);
  --source-color-bg-pressed: "var(--palette-form-900)";
  --color-bg-selected: var(--palette-form-100);
  --source-color-bg-selected: "var(--palette-form-100)";
}

/* 中性操作独立映射黑白；品牌由主题选择；彩色反馈统一状态尺度。 */
:root, .token-theme-light {
  --color-form-action: var(--palette-form-950);
  --source-color-form-action: "var(--palette-form-950)";
  --color-form-action-hover: var(--palette-form-800);
  --source-color-form-action-hover: "var(--palette-form-800)";
  --color-form-action-pressed: var(--palette-form-800);
  --source-color-form-action-pressed: "var(--palette-form-800)";
  --color-form-action-disabled: var(--palette-form-100);
  --source-color-form-action-disabled: "var(--palette-form-100)";
  --color-form-action-text: var(--palette-form-50);
  --source-color-form-action-text: "var(--palette-form-50)";
  --color-form-action-disabled-text: var(--palette-form-500);
  --source-color-form-action-disabled-text: "var(--palette-form-500)";
  --color-brand: var(--color-form-action);
  --source-color-brand: "var(--color-form-action)";
  --color-brand-hover: var(--color-form-action-hover);
  --source-color-brand-hover: "var(--color-form-action-hover)";
  --color-brand-pressed: var(--color-form-action-pressed);
  --source-color-brand-pressed: "var(--color-form-action-pressed)";
  --color-brand-disabled: var(--color-form-action-disabled);
  --source-color-brand-disabled: "var(--color-form-action-disabled)";
  --color-text-on-brand: var(--color-form-action-text);
  --source-color-text-on-brand: "var(--color-form-action-text)";

  --color-info-hover: var(--palette-blue-600);
  --source-color-info-hover: "var(--palette-blue-600)";
  --color-info-pressed: var(--palette-blue-600);
  --source-color-info-pressed: "var(--palette-blue-600)";
  --color-info-disabled: var(--palette-blue-200);
  --source-color-info-disabled: "var(--palette-blue-200)";
  --color-success-hover: var(--palette-emerald-600);
  --source-color-success-hover: "var(--palette-emerald-600)";
  --color-success-pressed: var(--palette-emerald-600);
  --source-color-success-pressed: "var(--palette-emerald-600)";
  --color-success-disabled: var(--palette-emerald-200);
  --source-color-success-disabled: "var(--palette-emerald-200)";
  --color-warning-hover: var(--palette-amber-600);
  --source-color-warning-hover: "var(--palette-amber-600)";
  --color-warning-pressed: var(--palette-amber-600);
  --source-color-warning-pressed: "var(--palette-amber-600)";
  --color-warning-disabled: var(--palette-amber-200);
  --source-color-warning-disabled: "var(--palette-amber-200)";
  --color-danger-hover: var(--palette-red-600);
  --source-color-danger-hover: "var(--palette-red-600)";
  --color-danger-pressed: var(--palette-red-600);
  --source-color-danger-pressed: "var(--palette-red-600)";
  --color-danger-disabled: var(--palette-red-200);
  --source-color-danger-disabled: "var(--palette-red-200)";
}

body.dark, .token-theme-dark {
  --color-form-action: var(--palette-form-50);
  --source-color-form-action: "var(--palette-form-50)";
  --color-form-action-hover: var(--palette-form-200);
  --source-color-form-action-hover: "var(--palette-form-200)";
  --color-form-action-pressed: var(--palette-form-200);
  --source-color-form-action-pressed: "var(--palette-form-200)";
  --color-form-action-disabled: var(--palette-form-800);
  --source-color-form-action-disabled: "var(--palette-form-800)";
  --color-form-action-text: var(--palette-form-950);
  --source-color-form-action-text: "var(--palette-form-950)";
  --color-form-action-disabled-text: var(--palette-form-500);
  --source-color-form-action-disabled-text: "var(--palette-form-500)";
  --color-brand: var(--color-form-action);
  --source-color-brand: "var(--color-form-action)";
  --color-brand-hover: var(--color-form-action-hover);
  --source-color-brand-hover: "var(--color-form-action-hover)";
  --color-brand-pressed: var(--color-form-action-pressed);
  --source-color-brand-pressed: "var(--color-form-action-pressed)";
  --color-brand-disabled: var(--color-form-action-disabled);
  --source-color-brand-disabled: "var(--color-form-action-disabled)";
  --color-text-on-brand: var(--color-form-action-text);
  --source-color-text-on-brand: "var(--color-form-action-text)";

  --color-info-hover: var(--palette-blue-600);
  --source-color-info-hover: "var(--palette-blue-600)";
  --color-info-pressed: var(--palette-blue-600);
  --source-color-info-pressed: "var(--palette-blue-600)";
  --color-info-disabled: var(--palette-blue-900);
  --source-color-info-disabled: "var(--palette-blue-900)";
  --color-success-hover: var(--palette-emerald-600);
  --source-color-success-hover: "var(--palette-emerald-600)";
  --color-success-pressed: var(--palette-emerald-600);
  --source-color-success-pressed: "var(--palette-emerald-600)";
  --color-success-disabled: var(--palette-emerald-900);
  --source-color-success-disabled: "var(--palette-emerald-900)";
  --color-warning-hover: var(--palette-amber-600);
  --source-color-warning-hover: "var(--palette-amber-600)";
  --color-warning-pressed: var(--palette-amber-600);
  --source-color-warning-pressed: "var(--palette-amber-600)";
  --color-warning-disabled: var(--palette-amber-900);
  --source-color-warning-disabled: "var(--palette-amber-900)";
  --color-danger-hover: var(--palette-red-600);
  --source-color-danger-hover: "var(--palette-red-600)";
  --color-danger-pressed: var(--palette-red-600);
  --source-color-danger-pressed: "var(--palette-red-600)";
  --color-danger-disabled: var(--palette-red-900);
  --source-color-danger-disabled: "var(--palette-red-900)";
}

/* 主题配置只选择语义映射；明暗由上述语义 Token 决定。 */
:root, body, .token-theme-light, .token-theme-dark {
  --color-action-primary: var(--color-form-action);
  --source-color-action-primary: "var(--color-form-action)";
  --color-action-primary-hover: var(--color-form-action-hover);
  --source-color-action-primary-hover: "var(--color-form-action-hover)";
  --color-action-primary-pressed: var(--color-form-action-pressed);
  --source-color-action-primary-pressed: "var(--color-form-action-pressed)";
  --color-action-primary-disabled: var(--color-form-action-disabled);
  --source-color-action-primary-disabled: "var(--color-form-action-disabled)";
  --color-action-primary-text: var(--color-form-action-text);
  --source-color-action-primary-text: "var(--color-form-action-text)";
  --color-action-primary-disabled-text: var(--color-form-action-disabled-text);
  --source-color-action-primary-disabled-text: "var(--color-form-action-disabled-text)";
}
/* 主题色板：Neutral 对应 Form，其余按基础色板完整提供。 */
body[data-accent="red"] {
  --theme-palette-200: var(--palette-red-200);
  --source-theme-palette-200: "var(--palette-red-200)";
  --theme-palette-500: var(--palette-red-500);
  --source-theme-palette-500: "var(--palette-red-500)";
  --theme-palette-600: var(--palette-red-600);
  --source-theme-palette-600: "var(--palette-red-600)";
  --theme-palette-900: var(--palette-red-900);
  --source-theme-palette-900: "var(--palette-red-900)";
}
body[data-accent="orange"] {
  --theme-palette-200: var(--palette-orange-200);
  --source-theme-palette-200: "var(--palette-orange-200)";
  --theme-palette-500: var(--palette-orange-500);
  --source-theme-palette-500: "var(--palette-orange-500)";
  --theme-palette-600: var(--palette-orange-600);
  --source-theme-palette-600: "var(--palette-orange-600)";
  --theme-palette-900: var(--palette-orange-900);
  --source-theme-palette-900: "var(--palette-orange-900)";
}
body[data-accent="amber"] {
  --theme-palette-200: var(--palette-amber-200);
  --source-theme-palette-200: "var(--palette-amber-200)";
  --theme-palette-500: var(--palette-amber-500);
  --source-theme-palette-500: "var(--palette-amber-500)";
  --theme-palette-600: var(--palette-amber-600);
  --source-theme-palette-600: "var(--palette-amber-600)";
  --theme-palette-900: var(--palette-amber-900);
  --source-theme-palette-900: "var(--palette-amber-900)";
}
body[data-accent="yellow"] {
  --theme-palette-200: var(--palette-yellow-200);
  --source-theme-palette-200: "var(--palette-yellow-200)";
  --theme-palette-500: var(--palette-yellow-500);
  --source-theme-palette-500: "var(--palette-yellow-500)";
  --theme-palette-600: var(--palette-yellow-600);
  --source-theme-palette-600: "var(--palette-yellow-600)";
  --theme-palette-900: var(--palette-yellow-900);
  --source-theme-palette-900: "var(--palette-yellow-900)";
}
body[data-accent="lime"] {
  --theme-palette-200: var(--palette-lime-200);
  --source-theme-palette-200: "var(--palette-lime-200)";
  --theme-palette-500: var(--palette-lime-500);
  --source-theme-palette-500: "var(--palette-lime-500)";
  --theme-palette-600: var(--palette-lime-600);
  --source-theme-palette-600: "var(--palette-lime-600)";
  --theme-palette-900: var(--palette-lime-900);
  --source-theme-palette-900: "var(--palette-lime-900)";
}
body[data-accent="green"] {
  --theme-palette-200: var(--palette-green-200);
  --source-theme-palette-200: "var(--palette-green-200)";
  --theme-palette-500: var(--palette-green-500);
  --source-theme-palette-500: "var(--palette-green-500)";
  --theme-palette-600: var(--palette-green-600);
  --source-theme-palette-600: "var(--palette-green-600)";
  --theme-palette-900: var(--palette-green-900);
  --source-theme-palette-900: "var(--palette-green-900)";
}
body[data-accent="emerald"] {
  --theme-palette-200: var(--palette-emerald-200);
  --source-theme-palette-200: "var(--palette-emerald-200)";
  --theme-palette-500: var(--palette-emerald-500);
  --source-theme-palette-500: "var(--palette-emerald-500)";
  --theme-palette-600: var(--palette-emerald-600);
  --source-theme-palette-600: "var(--palette-emerald-600)";
  --theme-palette-900: var(--palette-emerald-900);
  --source-theme-palette-900: "var(--palette-emerald-900)";
}
body[data-accent="teal"] {
  --theme-palette-200: var(--palette-teal-200);
  --source-theme-palette-200: "var(--palette-teal-200)";
  --theme-palette-500: var(--palette-teal-500);
  --source-theme-palette-500: "var(--palette-teal-500)";
  --theme-palette-600: var(--palette-teal-600);
  --source-theme-palette-600: "var(--palette-teal-600)";
  --theme-palette-900: var(--palette-teal-900);
  --source-theme-palette-900: "var(--palette-teal-900)";
}
body[data-accent="cyan"] {
  --theme-palette-200: var(--palette-cyan-200);
  --source-theme-palette-200: "var(--palette-cyan-200)";
  --theme-palette-500: var(--palette-cyan-500);
  --source-theme-palette-500: "var(--palette-cyan-500)";
  --theme-palette-600: var(--palette-cyan-600);
  --source-theme-palette-600: "var(--palette-cyan-600)";
  --theme-palette-900: var(--palette-cyan-900);
  --source-theme-palette-900: "var(--palette-cyan-900)";
}
body[data-accent="sky"] {
  --theme-palette-200: var(--palette-sky-200);
  --source-theme-palette-200: "var(--palette-sky-200)";
  --theme-palette-500: var(--palette-sky-500);
  --source-theme-palette-500: "var(--palette-sky-500)";
  --theme-palette-600: var(--palette-sky-600);
  --source-theme-palette-600: "var(--palette-sky-600)";
  --theme-palette-900: var(--palette-sky-900);
  --source-theme-palette-900: "var(--palette-sky-900)";
}
body[data-accent="blue"] {
  --theme-palette-200: var(--palette-blue-200);
  --source-theme-palette-200: "var(--palette-blue-200)";
  --theme-palette-500: var(--palette-blue-500);
  --source-theme-palette-500: "var(--palette-blue-500)";
  --theme-palette-600: var(--palette-blue-600);
  --source-theme-palette-600: "var(--palette-blue-600)";
  --theme-palette-900: var(--palette-blue-900);
  --source-theme-palette-900: "var(--palette-blue-900)";
}
body[data-accent="indigo"] {
  --theme-palette-200: var(--palette-indigo-200);
  --source-theme-palette-200: "var(--palette-indigo-200)";
  --theme-palette-500: var(--palette-indigo-500);
  --source-theme-palette-500: "var(--palette-indigo-500)";
  --theme-palette-600: var(--palette-indigo-600);
  --source-theme-palette-600: "var(--palette-indigo-600)";
  --theme-palette-900: var(--palette-indigo-900);
  --source-theme-palette-900: "var(--palette-indigo-900)";
}
body[data-accent="violet"] {
  --theme-palette-200: var(--palette-violet-200);
  --source-theme-palette-200: "var(--palette-violet-200)";
  --theme-palette-500: var(--palette-violet-500);
  --source-theme-palette-500: "var(--palette-violet-500)";
  --theme-palette-600: var(--palette-violet-600);
  --source-theme-palette-600: "var(--palette-violet-600)";
  --theme-palette-900: var(--palette-violet-900);
  --source-theme-palette-900: "var(--palette-violet-900)";
}
body[data-accent="purple"] {
  --theme-palette-200: var(--palette-purple-200);
  --source-theme-palette-200: "var(--palette-purple-200)";
  --theme-palette-500: var(--palette-purple-500);
  --source-theme-palette-500: "var(--palette-purple-500)";
  --theme-palette-600: var(--palette-purple-600);
  --source-theme-palette-600: "var(--palette-purple-600)";
  --theme-palette-900: var(--palette-purple-900);
  --source-theme-palette-900: "var(--palette-purple-900)";
}
body[data-accent="fuchsia"] {
  --theme-palette-200: var(--palette-fuchsia-200);
  --source-theme-palette-200: "var(--palette-fuchsia-200)";
  --theme-palette-500: var(--palette-fuchsia-500);
  --source-theme-palette-500: "var(--palette-fuchsia-500)";
  --theme-palette-600: var(--palette-fuchsia-600);
  --source-theme-palette-600: "var(--palette-fuchsia-600)";
  --theme-palette-900: var(--palette-fuchsia-900);
  --source-theme-palette-900: "var(--palette-fuchsia-900)";
}
body[data-accent="pink"] {
  --theme-palette-200: var(--palette-pink-200);
  --source-theme-palette-200: "var(--palette-pink-200)";
  --theme-palette-500: var(--palette-pink-500);
  --source-theme-palette-500: "var(--palette-pink-500)";
  --theme-palette-600: var(--palette-pink-600);
  --source-theme-palette-600: "var(--palette-pink-600)";
  --theme-palette-900: var(--palette-pink-900);
  --source-theme-palette-900: "var(--palette-pink-900)";
}
body[data-accent="rose"] {
  --theme-palette-200: var(--palette-rose-200);
  --source-theme-palette-200: "var(--palette-rose-200)";
  --theme-palette-500: var(--palette-rose-500);
  --source-theme-palette-500: "var(--palette-rose-500)";
  --theme-palette-600: var(--palette-rose-600);
  --source-theme-palette-600: "var(--palette-rose-600)";
  --theme-palette-900: var(--palette-rose-900);
  --source-theme-palette-900: "var(--palette-rose-900)";
}
body[data-accent="slate"] {
  --theme-palette-200: var(--palette-slate-200);
  --source-theme-palette-200: "var(--palette-slate-200)";
  --theme-palette-500: var(--palette-slate-500);
  --source-theme-palette-500: "var(--palette-slate-500)";
  --theme-palette-600: var(--palette-slate-600);
  --source-theme-palette-600: "var(--palette-slate-600)";
  --theme-palette-900: var(--palette-slate-900);
  --source-theme-palette-900: "var(--palette-slate-900)";
}
body[data-accent="gray"] {
  --theme-palette-200: var(--palette-gray-200);
  --source-theme-palette-200: "var(--palette-gray-200)";
  --theme-palette-500: var(--palette-gray-500);
  --source-theme-palette-500: "var(--palette-gray-500)";
  --theme-palette-600: var(--palette-gray-600);
  --source-theme-palette-600: "var(--palette-gray-600)";
  --theme-palette-900: var(--palette-gray-900);
  --source-theme-palette-900: "var(--palette-gray-900)";
}
body[data-accent="zinc"] {
  --theme-palette-200: var(--palette-zinc-200);
  --source-theme-palette-200: "var(--palette-zinc-200)";
  --theme-palette-500: var(--palette-zinc-500);
  --source-theme-palette-500: "var(--palette-zinc-500)";
  --theme-palette-600: var(--palette-zinc-600);
  --source-theme-palette-600: "var(--palette-zinc-600)";
  --theme-palette-900: var(--palette-zinc-900);
  --source-theme-palette-900: "var(--palette-zinc-900)";
}
body[data-accent="palette-neutral"] {
  --theme-palette-200: var(--palette-neutral-200);
  --source-theme-palette-200: "var(--palette-neutral-200)";
  --theme-palette-500: var(--palette-neutral-500);
  --source-theme-palette-500: "var(--palette-neutral-500)";
  --theme-palette-600: var(--palette-neutral-600);
  --source-theme-palette-600: "var(--palette-neutral-600)";
  --theme-palette-900: var(--palette-neutral-900);
  --source-theme-palette-900: "var(--palette-neutral-900)";
}
body[data-accent="stone"] {
  --theme-palette-200: var(--palette-stone-200);
  --source-theme-palette-200: "var(--palette-stone-200)";
  --theme-palette-500: var(--palette-stone-500);
  --source-theme-palette-500: "var(--palette-stone-500)";
  --theme-palette-600: var(--palette-stone-600);
  --source-theme-palette-600: "var(--palette-stone-600)";
  --theme-palette-900: var(--palette-stone-900);
  --source-theme-palette-900: "var(--palette-stone-900)";
}
body[data-accent="taupe"] {
  --theme-palette-200: var(--palette-taupe-200);
  --source-theme-palette-200: "var(--palette-taupe-200)";
  --theme-palette-500: var(--palette-taupe-500);
  --source-theme-palette-500: "var(--palette-taupe-500)";
  --theme-palette-600: var(--palette-taupe-600);
  --source-theme-palette-600: "var(--palette-taupe-600)";
  --theme-palette-900: var(--palette-taupe-900);
  --source-theme-palette-900: "var(--palette-taupe-900)";
}
body[data-accent="mauve"] {
  --theme-palette-200: var(--palette-mauve-200);
  --source-theme-palette-200: "var(--palette-mauve-200)";
  --theme-palette-500: var(--palette-mauve-500);
  --source-theme-palette-500: "var(--palette-mauve-500)";
  --theme-palette-600: var(--palette-mauve-600);
  --source-theme-palette-600: "var(--palette-mauve-600)";
  --theme-palette-900: var(--palette-mauve-900);
  --source-theme-palette-900: "var(--palette-mauve-900)";
}
body[data-accent="mist"] {
  --theme-palette-200: var(--palette-mist-200);
  --source-theme-palette-200: "var(--palette-mist-200)";
  --theme-palette-500: var(--palette-mist-500);
  --source-theme-palette-500: "var(--palette-mist-500)";
  --theme-palette-600: var(--palette-mist-600);
  --source-theme-palette-600: "var(--palette-mist-600)";
  --theme-palette-900: var(--palette-mist-900);
  --source-theme-palette-900: "var(--palette-mist-900)";
}
body[data-accent="olive"] {
  --theme-palette-200: var(--palette-olive-200);
  --source-theme-palette-200: "var(--palette-olive-200)";
  --theme-palette-500: var(--palette-olive-500);
  --source-theme-palette-500: "var(--palette-olive-500)";
  --theme-palette-600: var(--palette-olive-600);
  --source-theme-palette-600: "var(--palette-olive-600)";
  --theme-palette-900: var(--palette-olive-900);
  --source-theme-palette-900: "var(--palette-olive-900)";
}
body[data-accent]:not([data-accent="neutral"]), body[data-accent]:not([data-accent="neutral"]) :is(.token-theme-light, .token-theme-dark) {
  --color-brand: var(--theme-palette-500);
  --source-color-brand: "var(--theme-palette-500)";
  --color-brand-hover: var(--theme-palette-600);
  --source-color-brand-hover: "var(--theme-palette-600)";
  --color-brand-pressed: var(--theme-palette-600);
  --source-color-brand-pressed: "var(--theme-palette-600)";
  --color-brand-disabled: var(--theme-palette-200);
  --source-color-brand-disabled: "var(--theme-palette-200)";
  --color-text-on-brand: var(--color-text-inverted);
  --source-color-text-on-brand: "var(--color-text-inverted)";
  --color-action-primary: var(--color-brand);
  --source-color-action-primary: "var(--color-brand)";
  --color-action-primary-hover: var(--color-brand-hover);
  --source-color-action-primary-hover: "var(--color-brand-hover)";
  --color-action-primary-pressed: var(--color-brand-pressed);
  --source-color-action-primary-pressed: "var(--color-brand-pressed)";
  --color-action-primary-disabled: var(--color-brand-disabled);
  --source-color-action-primary-disabled: "var(--color-brand-disabled)";
  --color-action-primary-text: var(--color-text-on-brand);
  --source-color-action-primary-text: "var(--color-text-on-brand)";
  --color-action-primary-disabled-text: var(--color-text-on-brand);
  --source-color-action-primary-disabled-text: "var(--color-text-on-brand)";
}
body.dark[data-accent]:not([data-accent="neutral"]), body[data-accent]:not([data-accent="neutral"]) .token-theme-dark {
  --color-brand-disabled: var(--theme-palette-900);
  --source-color-brand-disabled: "var(--theme-palette-900)";
}

/* 组件颜色映射：只引用上面的颜色语义。 */
:root, body, .token-theme-light, .token-theme-dark {
  --content-quote-border-width: var(--space-1);
  --content-mark-bg: var(--color-action-primary);
  --content-mark-text: var(--color-action-primary-text);
  --content-link-color: var(--color-text-secondary);
  --content-link-color-hover: var(--color-text-primary);
  --content-link-color-pressed: var(--color-text-primary);
}
body[data-accent]:not([data-accent="neutral"]), body[data-accent]:not([data-accent="neutral"]) :is(.token-theme-light, .token-theme-dark) {
  --content-link-color: var(--color-action-primary);
  --content-link-color-hover: var(--color-action-primary-hover);
  --content-link-color-pressed: var(--color-action-primary-pressed);
}
/* 透明状态层：只改变背景，不影响文字与图标。 */
:root {
}
:root, body, .token-theme-light {
  --button-danger-disabled-foreground: var(--color-text-inverted);
  --source-button-danger-disabled-foreground: "var(--color-text-inverted)";
  --button-primary-foreground: var(--color-action-primary-text);
  --button-primary-disabled-foreground: var(--color-action-primary-disabled-text);
  --button-neutral-bg-disabled: var(--color-bg-hover);
  --button-disabled-foreground: var(--color-text-disabled);
  --source-button-disabled-foreground: "var(--color-text-disabled)";
  --button-secondary-border: var(--color-border-control);
  --source-button-secondary-border: "var(--color-border-control)";
  --button-neutral-bg-hover: var(--color-bg-hover);
  --source-button-neutral-bg-hover: "var(--color-bg-hover)";
  --button-neutral-bg-pressed: var(--button-neutral-bg-hover);
  --source-button-neutral-bg-pressed: "var(--button-neutral-bg-hover)";
  --button-tertiary-bg-hover: var(--color-bg-hover-strong);
  --source-button-tertiary-bg-hover: "var(--color-bg-hover-strong)";
  --button-tertiary-bg-pressed: var(--button-tertiary-bg-hover);
  --source-button-tertiary-bg-pressed: "var(--button-tertiary-bg-hover)";
  --button-ghost-bg-hover: var(--color-bg-hover);
  --source-button-ghost-bg-hover: "var(--color-bg-hover)";
  --button-ghost-bg-pressed: var(--button-ghost-bg-hover);
  --source-button-ghost-bg-pressed: "var(--button-ghost-bg-hover)";
  --button-primary-bg: var(--color-action-primary);
  --source-button-primary-bg: "var(--color-action-primary)";
  --button-primary-bg-hover: var(--color-action-primary-hover);
  --source-button-primary-bg-hover: "var(--color-action-primary-hover)";
  --button-primary-bg-pressed: var(--button-primary-bg-hover);
  --source-button-primary-bg-pressed: "var(--button-primary-bg-hover)";
  --button-primary-bg-disabled: var(--color-action-primary-disabled);
  --source-button-primary-bg-disabled: "var(--color-action-primary-disabled)";
  --button-danger-bg: var(--color-danger);
  --source-button-danger-bg: "var(--color-danger)";
  --button-danger-bg-hover: var(--color-danger-hover);
  --source-button-danger-bg-hover: "var(--color-danger-hover)";
  --button-danger-bg-pressed: var(--button-danger-bg-hover);
  --source-button-danger-bg-pressed: "var(--button-danger-bg-hover)";
  --button-danger-bg-disabled: var(--color-danger-disabled);
  --source-button-danger-bg-disabled: "var(--color-danger-disabled)";
}

body.dark, .token-theme-dark {
  --button-danger-disabled-foreground: var(--color-text-inverted);
  --source-button-danger-disabled-foreground: "var(--color-text-inverted)";
  --button-primary-foreground: var(--color-action-primary-text);
  --button-primary-disabled-foreground: var(--color-action-primary-disabled-text);
  --button-neutral-bg-disabled: var(--color-bg-hover);
  --button-disabled-foreground: var(--color-text-disabled);
  --source-button-disabled-foreground: "var(--color-text-disabled)";
  --button-secondary-border: var(--color-border-control);
  --source-button-secondary-border: "var(--color-border-control)";
  --button-neutral-bg-hover: var(--color-bg-hover);
  --source-button-neutral-bg-hover: "var(--color-bg-hover)";
  --button-neutral-bg-pressed: var(--button-neutral-bg-hover);
  --source-button-neutral-bg-pressed: "var(--button-neutral-bg-hover)";
  --button-tertiary-bg-hover: var(--color-bg-hover-strong);
  --source-button-tertiary-bg-hover: "var(--color-bg-hover-strong)";
  --button-tertiary-bg-pressed: var(--button-tertiary-bg-hover);
  --source-button-tertiary-bg-pressed: "var(--button-tertiary-bg-hover)";
  --button-ghost-bg-hover: var(--color-bg-hover);
  --source-button-ghost-bg-hover: "var(--color-bg-hover)";
  --button-ghost-bg-pressed: var(--button-ghost-bg-hover);
  --source-button-ghost-bg-pressed: "var(--button-ghost-bg-hover)";
  --button-primary-bg: var(--color-action-primary);
  --source-button-primary-bg: "var(--color-action-primary)";
  --button-primary-bg-hover: var(--color-action-primary-hover);
  --source-button-primary-bg-hover: "var(--color-action-primary-hover)";
  --button-primary-bg-pressed: var(--button-primary-bg-hover);
  --source-button-primary-bg-pressed: "var(--button-primary-bg-hover)";
  --button-primary-bg-disabled: var(--color-action-primary-disabled);
  --source-button-primary-bg-disabled: "var(--color-action-primary-disabled)";
  --button-danger-bg: var(--color-danger);
  --source-button-danger-bg: "var(--color-danger)";
  --button-danger-bg-hover: var(--color-danger-hover);
  --source-button-danger-bg-hover: "var(--color-danger-hover)";
  --button-danger-bg-pressed: var(--button-danger-bg-hover);
  --source-button-danger-bg-pressed: "var(--button-danger-bg-hover)";
  --button-danger-bg-disabled: var(--color-danger-disabled);
  --source-button-danger-bg-disabled: "var(--color-danger-disabled)";
}

/* 在主题作用域组合边框，确保颜色随主题重新解析。 */
:root, body, .token-theme-light, .token-theme-dark {
  --border-primary: var(--border-width) var(--border-style) var(--color-border-primary);
  --border-secondary: var(--border-width) var(--border-style) var(--color-border-secondary);
}

/* 圆角配置作用于根，派生尺度自动重算，独立于配色与亮暗。 */
:root[data-radius="small"] { --radius-base: var(--radius-preset-small); }
:root[data-radius="default"] { --radius-base: var(--radius-preset-default); }
:root[data-radius="soft"] { --radius-base: var(--radius-preset-soft); }
:root[data-radius="pill"] { --radius-base: var(--radius-preset-pill); }

/* 基础控件共用尺寸。 */
:root {
  --control-small-font-size: var(--font-size-xs);
  --control-medium-font-size: var(--font-size-xs);
  --control-large-font-size: var(--font-size-sm);
  --control-padding-y: var(--button-padding-y);
  --control-padding-x: var(--button-padding-x);
  --control-small-padding-y: var(--button-small-padding-y);
  --control-small-padding-x: var(--button-small-padding-x);
}

/* 开关：尺寸固定，颜色在主题作用域内重新解析。 */
:root {
  --switch-width: var(--control-md);
  --switch-height: var(--icon-lg);
  --switch-inset: var(--space-1);
  --switch-disabled-thumb-opacity: 1;
  --switch-duration: var(--duration-fast);
  --switch-thumb-transition: transform var(--switch-duration) var(--easing-ease-in-out), background var(--switch-duration) var(--easing-ease-in-out);
}
:root, body, .token-theme-light, .token-theme-dark {
  --switch-off-bg: var(--color-bg-secondary);
  --switch-off-bg-hover: var(--color-bg-hover-strong);
  --switch-on-bg: var(--color-action-primary);
  --switch-on-bg-hover: var(--color-action-primary-hover);
  --color-bg-control-thumb: var(--palette-white);
  --source-color-bg-control-thumb: "var(--palette-white)";
  --switch-off-thumb: var(--color-bg-control-thumb);
  --switch-on-thumb: var(--color-bg-control-thumb);
  --switch-disabled-bg: var(--color-bg-hover);
  --switch-disabled-thumb: var(--color-bg-control-thumb);
  --switch-on-bg-disabled: var(--color-action-primary-disabled);
}

body.dark, .token-theme-dark { --switch-disabled-thumb-opacity: 0.5; }

/* 选择框沿用基础控件尺度，颜色在主题作用域内解析。 */
:root {
  --select-width: var(--layout-theme-menu);
  --select-menu-min-width: var(--layout-theme-menu);
  --select-typeahead-delay: 700ms;
  --control-demo-min-width: calc(var(--space-24) * 3);
  --select-menu-max-height: calc(var(--space-64) * 2);
}
:root, body, .token-theme-light, .token-theme-dark {
  --select-bg: var(--color-bg-primary);
  --select-bg-hover: var(--color-bg-hover);
  --select-menu-bg: var(--color-bg-surface);
  --select-text: var(--color-text-primary);
  --select-option-text: var(--color-text-secondary);
  --select-placeholder: var(--color-text-tertiary);
  --select-border: var(--color-border-control);
  --select-disabled-bg: var(--color-bg-hover);
  --select-disabled-text: var(--color-text-disabled);
  --select-error: var(--color-danger);
}

/* 文本输入、复选与单选共用已有语义颜色。 */
:root {
  --field-width: var(--layout-theme-menu);
  --field-label-gap: var(--space-2);
  --field-label-weight: var(--weight-medium);
  --choice-size: var(--icon-md);
  --scroll-demo-height: var(--space-64);
}
:root, body, .token-theme-light, .token-theme-dark {
  --field-bg: var(--color-bg-primary);
  --field-border: var(--color-border-control);
  --field-text: var(--color-text-primary);
  --field-placeholder: var(--color-text-tertiary);
  --field-disabled-bg: var(--color-bg-hover);
  --field-disabled-text: var(--color-text-disabled);
  --field-error: var(--color-danger);
  --choice-bg: var(--color-bg-primary);
  --choice-border: var(--color-border-control);
  --choice-selected-bg: var(--color-action-primary);
  --choice-mark: var(--color-action-primary-text);
  --choice-disabled-bg: var(--color-bg-hover);
  --choice-selected-bg-disabled: var(--color-action-primary-disabled);
  --choice-disabled-mark: var(--color-action-primary-text);
}

/* 根滚动条与局部滚动区域使用相同的暗色映射。 */
:root:has(body.dark), body.dark, .token-theme-dark {
  --color-scrollbar: var(--palette-form-700);
  --source-color-scrollbar: "var(--palette-form-700)";
  --color-scrollbar-hover: var(--palette-form-600);
  --source-color-scrollbar-hover: "var(--palette-form-600)";
}

/* 容器、浮层、反馈与导航共用语义配色及已有动效尺度。 */
:root {
  --component-menu-height: calc(var(--space-64) * 2 + var(--space-32) + var(--space-20));
  --component-feedback-layer: 80;
  --tooltip-delay: 0ms;
  --toast-duration: 2000ms;
  --progress-height: var(--space-3);
}

/* 插画尺寸固定；线条与色块分别通过语义颜色适配。 */
:root {
  --illustration-size: 160px;
}
:root, body, .token-theme-light, .token-theme-dark {
  --color-illustration-ink: var(--palette-black);
  --source-color-illustration-ink: "var(--palette-black)";
  --color-illustration-fill: var(--color-bg-secondary);
  --source-color-illustration-fill: "var(--color-bg-secondary)";
  --illustration-ink: var(--color-illustration-ink);
  --illustration-fill: var(--color-illustration-fill);
  --color-illustration-paper: var(--color-bg-primary);
  --source-color-illustration-paper: "var(--color-bg-primary)";
  --illustration-paper: var(--color-illustration-paper);
}
body.dark, .token-theme-dark {
  --color-illustration-ink: var(--palette-white);
  --source-color-illustration-ink: "var(--palette-white)";
  --illustration-ink: var(--color-illustration-ink);
}
body[data-accent]:not([data-accent="neutral"]), body[data-accent]:not([data-accent="neutral"]) :is(.token-theme-light,.token-theme-dark) {
  --color-illustration-fill: var(--color-brand);
  --source-color-illustration-fill: "var(--color-brand)";
  --illustration-fill: var(--color-illustration-fill);
}

/* Banner 专用插画配色，普通插画继续适配主题。 */
:root, body, .token-theme-light, .token-theme-dark {
  --color-intro-banner-bg: var(--color-illustration-fill);
  --source-color-intro-banner-bg: "var(--color-illustration-fill)";
  --color-intro-banner-fill: var(--palette-white);
  --source-color-intro-banner-fill: "var(--palette-white)";
  --color-intro-banner-ink: var(--palette-black);
  --source-color-intro-banner-ink: "var(--palette-black)";
  --color-intro-banner-paper: var(--palette-white);
  --source-color-intro-banner-paper: "var(--palette-white)";
}

body.dark, .token-theme-dark {
  --color-intro-banner-ink: var(--palette-white);
  --source-color-intro-banner-ink: "var(--palette-white)";
  --color-intro-banner-fill: color-mix(in srgb, var(--palette-black) 70%, transparent);
  --source-color-intro-banner-fill: "color-mix(in srgb, var(--palette-black) 70%, transparent)";
  --color-intro-banner-paper: color-mix(in srgb, var(--palette-black) 70%, transparent);
  --source-color-intro-banner-paper: "color-mix(in srgb, var(--palette-black) 70%, transparent)";
}


:root { --component-dialog-width: 400px; }

:root {
  --dialog-padding: var(--space-12);
  --radius-dialog: var(--radius-lg);
}

:root { --component-drawer-width: 480px; }

:root { --tooltip-duration: var(--duration-fast); --motion-tooltip-offset: var(--space-1); }

:root { --toast-bg: var(--color-bg-surface); }
body.dark { --toast-bg: var(--color-bg-hover); }