/** 基础色阶定义 **/
:root,
#mount[data-theme="light"],
#mount:not([data-theme="dark"]) {
  /* 中性灰阶（light） */
  --c-00: #000000;
  --c-22: #222222;
  --c-33: #333333;
  --c-66: #666666;
  --c-83: #838383;
  --c-99: #999999;
  --c-c7: #c7c7c7;
  --c-cc: #cccccc;
  --c-e6: #e6e6e6;
  --c-f5: #f5f5f5;
  --c-ff: #ffffff;
  /* 品牌主色阶（light） */
  --p-main: #ea4c89;
  --p-hover: #ec5e95;
  --p-active: #e34a85;
  --p-special: #ee71a2;
  --p-disabled: #f4a5c4;
  --p-text-disabled: #f9c9dc;
  --p-weak: #fdedf3;
  /* Surface 层级（light，TC 填充-1） */
  --s-1: #f3f5f6;
  --s-1-hover: #f6f8f9;
  --s-1-active: #edf1f2;
  --s-1-weak: #fafbfb;
  /* 输入/边框（light，TC 填充-2） */
  --input-bg-base: #fafbfc;
  --input-border: #ecf0f7;
  --input-border-strong: #e0e0e6;
  --input-bg-strong: #fafdff;
}

:root[data-theme="dark"],
[data-theme="dark"] {
  /* 中性灰阶（dark） */
  --c-00: #ffffff;
  --c-22: #dbdbdb;
  --c-33: #dbdbdb;
  --c-66: #b3b3b3;
  --c-83: #838383;
  --c-99: #707070;
  --c-c7: #666666;
  --c-cc: #5c5c5c;
  --c-e6: #3b3b3b;
  --c-f5: #262626;
  --c-ff: #222222;
  /* 品牌主色阶（dark） */
  --p-main: #e23c7c;
  --p-hover: #ea4c89;
  --p-active: #d5467d;
  --p-special: #a93a65;
  --p-disabled: #7e2f4d;
  --p-text-disabled: #522335;
  --p-weak: #26171d;
  /* Surface 层级（dark，TC 填充-1） */
  --s-1: #2d2e2f;
  --s-1-hover: #323434;
  --s-1-active: #202121;
  --s-1-weak: #262627;
  /* 输入/边框（dark，TC 填充-2） */
  --input-bg-base: #2b2d30;
  --input-border: #3e434b;
  --input-border-strong: #43474b;
  --input-bg-strong: #1f2123;
}

:root,
#mount [data-theme] {
  /* 业务/通用变量引用色阶（全局可见，含 Shadow DOM） */
  --primary: var(--p-main);
  --primary-hover: var(--p-hover);
  --primary-inverse: #fff;
  --modal-background: var(--s-1);
  --modal-border: var(--input-border);
  --modal-text: var(--c-22);
  --modal-text-secondary: var(--c-66);
  --modal-error: var(--p-main);
  --modal-required: #f53f3f;
  --modal-success: #68cd52;
  --modal-button-background: var(--p-main);
  --modal-button-text: var(--c-ff);
  --modal-input-background: var(--input-bg-base);
  --modal-check-color: var(--p-main);
  --background-color: var(--c-ff);
  --background-light-green: var(--s-1-weak, #f5f7f9);
  --text-black-2: var(--c-22);
  --text-gray-2: var(--c-22);
  --text-gray-6: var(--c-66);
  --text-gray-9: var(--c-99);
  --text-gray-c2: var(--c-c7);
  --switch-background-color: var(--c-c7, hsl(205deg, 16%, 77%));
  --float-ball-more-button-border-color: var(--c-f5, #f6f6f6);
  --float-ball-more-button-background-color: var(--c-ff);
  --float-ball-more-button-hover-color: var(--p-weak);
  --float-ball-more-button-svg-color: #6c6f73;
  --service-bg-hover: var(--s-1-hover, #f7faff);
  --service-bg: var(--s-1-weak, #fafbfb);
}

#mount {
  --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
    "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  /* PC/H5 兼容的字号、间距、圆角、阴影变量 */
  --f-12: 12px;
  --f-14: 14px;
  --f-15: 15px;
  --f-16: 16px;
  --f-18: 18px;
  --f-20: 20px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-24: 24px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --control-height-lg: 44px;
  --width-28: 28px;
  --width-24: 24px;
  --width-20: 20px;
  --width-18: 18px;
  --width-16: 16px;
  --width-label-md: 56px;
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.12);

  /* 常规变量 */
  --line-height: 1.5;
  --font-weight: 400;
  --font-size: 16px;
  --border-radius: 4px;
  --border-width: 2px;
  --outline-width: 3px;
  --spacing: 16px;
  --typography-spacing-vertical: 24px;
  --block-spacing-vertical: calc(var(--spacing) * 2);
  --block-spacing-horizontal: var(--spacing);
  --grid-spacing-vertical: 0;
  --grid-spacing-horizontal: var(--spacing);
  --form-element-spacing-vertical: 12px;
  --form-element-spacing-horizontal: 16px;
  --nav-element-spacing-vertical: 16px;
  --nav-element-spacing-horizontal: 8px;
  --nav-link-spacing-vertical: 8px;
  --nav-link-spacing-horizontal: 8px;
  --form-label-font-weight: var(--font-weight);
  --transition: 0.2s ease-in-out;
  --modal-overlay-backdrop-filter: blur(4px);
  --switch-color: var(--primary-inverse);
  --switch-checked-background-color: var(--primary);
  --icon-xia: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkZyYW1lIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTguMDAyOTEgOS42Nzk4M0wzLjgzMzM5IDUuNTEyMjFMMy4wMjUzOSA2LjMxOTgzTDguMDAzMjkgMTEuMjk1MUwxMi45NzYyIDYuMzE5ODNMMTIuMTY3OSA1LjUxMjIxTDguMDAyOTEgOS42Nzk4M1oiIGZpbGw9IiM4MzgzODMiLz4KPC9nPgo8L3N2Zz4K");
  /* 兼容旧变量：主色直接引用品牌主色阶 */
  --primary: var(--p-main);
  --primary-hover: var(--p-hover);
  --primary-inverse: #fff;
  /* Modal 业务变量引用色阶 */
  --modal-background: var(--s-1);
  --modal-border: var(--input-border);
  --modal-text: var(--c-22);
  --modal-text-secondary: var(--c-66);
  --modal-error: var(--p-main);
  --modal-required: #f53f3f;
  --modal-success: #68cd52;
  --modal-button-background: var(--p-main);
  --modal-button-text: var(--c-ff);
  --modal-input-background: var(--input-bg-base);
  --modal-check-color: var(--p-main);
  --background-color: var(--c-ff);
  --background-light-green: var(--s-1-weak, #f5f7f9);
  --text-black-2: var(--c-22);
  --text-gray-2: var(--c-22);
  --text-gray-6: var(--c-66);
  --text-gray-9: var(--c-99);
  --text-gray-c2: var(--c-c7);
  --switch-background-color: var(--c-c7, hsl(205deg, 16%, 77%));
  --float-ball-more-button-border-color: var(--c-f5, #f6f6f6);
  --float-ball-more-button-background-color: var(--c-ff);
  --float-ball-more-button-hover-color: var(--p-weak);
  --float-ball-more-button-svg-color: #6c6f73;
  --service-bg-hover: var(--s-1-hover, #f7faff);
  --service-bg: var(--s-1-weak, #fafbfb);
  line-height: var(--line-height);
  font-family: var(--font-family);
  font-size: var(--font-size);
}

@media (max-width: 480px) {
  :root,
  #mount {
    --f-12: 10px;
    --f-14: 12px;
    --f-15: 13px;
    --f-16: 14px;
    --f-18: 16px;
    --f-20: 18px;
    --space-4: 4px;
    --space-6: 4px;
    --space-8: 6px;
    --space-12: 8px;
    --space-16: 12px;
    --space-18: 14px;
    --space-24: 18px;
    --radius-8: 6px;
    --radius-12: 10px;
    --radius-16: 12px;
    --control-height-lg: 38px;
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1);
    --width-28: 24px;
    --width-24: 20px;
    --width-20: 16px;
    --width-18: 14px;
    --width-16: 12px;
    --width-label-md: 52px;
  }
}

#mount * {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}
