/* ==========================================================================
   优讯云生图 · 设计令牌（Design Tokens）
   对齐主流企业级设计系统规范
   命名与取值与主流组件库 CSS 变量保持一致，可被组件库覆盖复用
   ========================================================================== */

:root {
  /* ---------- 品牌色（Brand / 主蓝 #0052D9） ---------- */
  --td-brand-color-1: #f2f3ff;
  --td-brand-color-2: #d9e1ff;
  --td-brand-color-3: #b5c7ff;
  --td-brand-color-4: #8eabff;
  --td-brand-color-5: #618dff;
  --td-brand-color-6: #366ef4;
  --td-brand-color-7: #0052d9;
  --td-brand-color-8: #003cab;
  --td-brand-color-9: #002a7c;
  --td-brand-color-10: #001a57;

  --td-brand-color: var(--td-brand-color-7);
  --td-brand-color-hover: var(--td-brand-color-6);
  --td-brand-color-active: var(--td-brand-color-8);
  --td-brand-color-disabled: var(--td-brand-color-3);
  --td-brand-color-light: var(--td-brand-color-1);
  --td-brand-color-light-hover: var(--td-brand-color-2);
  --td-brand-color-focus: rgba(0, 82, 217, 0.2);

  /* ---------- 功能色：成功 ---------- */
  --td-success-color-1: #e3f9e9;
  --td-success-color-2: #c6f3d7;
  --td-success-color-3: #92dab2;
  --td-success-color-4: #56c08d;
  --td-success-color-5: #2ba471;
  --td-success-color-6: #008858;
  --td-success-color-7: #006c45;
  --td-success-color-8: #005333;
  --td-success-color: var(--td-success-color-5);
  --td-success-color-hover: var(--td-success-color-4);
  --td-success-color-active: var(--td-success-color-6);
  --td-success-color-light: var(--td-success-color-1);

  /* ---------- 功能色：警示 ---------- */
  --td-warning-color-1: #fff1e9;
  --td-warning-color-2: #ffd9c2;
  --td-warning-color-3: #ffb98a;
  --td-warning-color-4: #ff9e5c;
  --td-warning-color-5: #f27c31;
  --td-warning-color-6: #e37318;
  --td-warning-color-7: #be5a00;
  --td-warning-color-8: #954400;
  --td-warning-color: #e37318;
  --td-warning-color-hover: var(--td-warning-color-4);
  --td-warning-color-active: var(--td-warning-color-7);
  --td-warning-color-light: var(--td-warning-color-1);

  /* ---------- 功能色：错误 ---------- */
  --td-error-color-1: #fff0ed;
  --td-error-color-2: #ffd8d2;
  --td-error-color-3: #ffb9b0;
  --td-error-color-4: #ff9285;
  --td-error-color-5: #f6685d;
  --td-error-color-6: #d54941;
  --td-error-color-7: #ad352f;
  --td-error-color-8: #881f1c;
  --td-error-color: #d54941;
  --td-error-color-hover: var(--td-error-color-5);
  --td-error-color-active: var(--td-error-color-7);
  --td-error-color-light: var(--td-error-color-1);

  /* ---------- 中性灰阶（Gray 1-14） ---------- */
  --td-gray-color-1: #f3f3f3;
  --td-gray-color-2: #eeeeee;
  --td-gray-color-3: #e7e7e7;
  --td-gray-color-4: #dcdcdc;
  --td-gray-color-5: #c5c5c5;
  --td-gray-color-6: #a6a6a6;
  --td-gray-color-7: #8b8b8b;
  --td-gray-color-8: #777777;
  --td-gray-color-9: #5e5e5e;
  --td-gray-color-10: #474747;
  --td-gray-color-11: #2e2e2e;
  --td-gray-color-12: #1f1f1f;
  --td-gray-color-13: #141414;
  --td-gray-color-14: #000000;

  /* ---------- 文字 ---------- */
  --td-text-color-primary: rgba(0, 0, 0, 0.9);
  --td-text-color-secondary: rgba(0, 0, 0, 0.6);
  --td-text-color-placeholder: rgba(0, 0, 0, 0.4);
  --td-text-color-disabled: rgba(0, 0, 0, 0.26);
  --td-text-color-anti: #ffffff;
  --td-text-color-brand: var(--td-brand-color);
  --td-text-color-link: var(--td-brand-color);

  /* ---------- 背景 ---------- */
  --td-bg-color-page: #f3f3f3;
  --td-bg-color-container: #ffffff;
  --td-bg-color-container-hover: #f3f3f3;
  --td-bg-color-container-active: #e7e7e7;
  --td-bg-color-container-select: #ffffff;
  --td-bg-color-secondarycontainer: #f3f3f3;
  --td-bg-color-component: #eeeeee;
  --td-bg-color-component-hover: #e7e7e7;
  --td-bg-color-component-disabled: #f3f3f3;
  --td-bg-color-specialcomponent: #ffffff;
  --td-bg-color-mask: rgba(0, 0, 0, 0.6);

  /* ---------- 描边 ---------- */
  --td-border-level-1-color: #e7e7e7;
  --td-border-level-2-color: #dcdcdc;
  --td-component-stroke: #dcdcdc;
  --td-component-border: #dcdcdc;

  /* ---------- 圆角 ---------- */
  --td-radius-small: 3px;
  --td-radius-default: 6px;
  --td-radius-medium: 9px;
  --td-radius-large: 12px;
  --td-radius-extra-large: 16px;
  --td-radius-round: 999px;
  --td-radius-circle: 50%;

  /* ---------- 阴影（对应浮层层级） ---------- */
  --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08),
    0 2px 4px -1px rgba(0, 0, 0, 0.12);
  --td-shadow-2: 0 4px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.04);
  --td-shadow-3: 0 12px 40px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08);
  --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
  --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
  --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
  --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
  --td-table-shadow-color: rgba(0, 0, 0, 0.08);

  /* ---------- 字体 ---------- */
  --td-font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", "Hiragino Sans GB", "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --td-font-family-medium: var(--td-font-family);
  --td-font-family-monospace: "SFMono-Regular", "Menlo", "Consolas",
    "Liberation Mono", monospace;

  --td-font-size-s: 12px;
  --td-font-size-m: 14px;
  --td-font-size-l: 16px;
  --td-font-size-xl: 20px;
  --td-font-size-2xl: 24px;
  --td-font-size-3xl: 28px;
  --td-font-size-4xl: 32px;

  --td-font-size-body-small: 12px;
  --td-font-size-body-medium: 14px;
  --td-font-size-body-large: 16px;
  --td-font-size-title-small: 16px;
  --td-font-size-title-medium: 20px;
  --td-font-size-title-large: 24px;
  --td-font-size-headline-small: 24px;
  --td-font-size-headline-medium: 32px;
  --td-font-size-headline-large: 40px;
  --td-font-size-display-medium: 48px;
  --td-font-size-display-large: 64px;

  --td-line-height-body-small: 20px;
  --td-line-height-body-medium: 22px;
  --td-line-height-body-large: 24px;
  --td-line-height-title-small: 24px;
  --td-line-height-title-medium: 28px;
  --td-line-height-title-large: 32px;
  --td-line-height-headline-small: 32px;
  --td-line-height-headline-medium: 40px;
  --td-line-height-headline-large: 48px;

  --td-font-weight-regular: 400;
  --td-font-weight-medium: 500;
  --td-font-weight-bold: 600;

  /* ---------- 间距（4px 栅格） ---------- */
  --td-comp-paddingLR-xxs: 4px;
  --td-comp-paddingLR-xs: 8px;
  --td-comp-paddingLR-s: 12px;
  --td-comp-paddingLR-m: 16px;
  --td-comp-paddingLR-l: 24px;
  --td-comp-paddingTB-xxs: 4px;
  --td-comp-paddingTB-xs: 8px;
  --td-comp-paddingTB-s: 12px;
  --td-comp-paddingTB-m: 16px;
  --td-comp-paddingTB-l: 24px;
  --td-comp-margin-xxs: 4px;
  --td-comp-margin-xs: 8px;
  --td-comp-margin-s: 12px;
  --td-comp-margin-m: 16px;
  --td-comp-margin-l: 24px;
  --td-comp-margin-xl: 32px;
  --td-comp-margin-xxl: 40px;
  --td-comp-margin-xxxl: 48px;
  --td-comp-size-xxs: 24px;
  --td-comp-size-xs: 24px;
  --td-comp-size-s: 24px;
  --td-comp-size-m: 32px;
  --td-comp-size-l: 40px;
  --td-comp-size-xl: 48px;

  /* ---------- 动效 ---------- */
  --td-anim-duration-fast: 0.1s;
  --td-anim-duration-base: 0.2s;
  --td-anim-duration-slow: 0.3s;
  --td-anim-timing-ease-default: cubic-bezier(0.38, 0, 0.24, 1);
  --td-anim-timing-ease-in: cubic-bezier(0.82, 0, 1, 1);
  --td-anim-timing-ease-out: cubic-bezier(0, 0, 0.18, 1);

  /* ---------- 页面骨架尺寸 ---------- */
  --console-header-height: 56px;
  --console-sider-width: 232px;
  --console-sider-collapsed-width: 64px;
  --console-content-padding: 24px;
  --console-z-header: 1000;
  --console-z-sider: 900;
  --console-z-mask: 1900;
  --console-z-drawer: 2000;
  --console-z-modal: 2100;
  --console-z-popup: 2200;
  --console-z-message: 2300;
}