/* ========================================
   TDesign Design Tokens
   基于腾讯 TDesign 设计体系的 CSS 变量定义
   ======================================== */

:root {
    /* === 品牌色 (Brand Colors) === */
    --td-brand-color: #0052D9;
    --td-brand-color-hover: #366EF4;
    --td-brand-color-active: #003CAB;
    --td-brand-color-disabled: #B5C7FF;
    --td-brand-color-focus: #D9E1FF;
    --td-brand-color-light: #F2F3FF;

    /* === 功能色 (Functional Colors) === */
    --td-success-color: #2BA471;
    --td-success-color-hover: #56C08D;
    --td-success-color-active: #008858;
    --td-success-color-light: #E3F9E9;

    --td-warning-color: #E37318;
    --td-warning-color-hover: #FA9550;
    --td-warning-color-active: #BE5A00;
    --td-warning-color-light: #FFF1E9;

    --td-error-color: #D54941;
    --td-error-color-hover: #F6685D;
    --td-error-color-active: #AD352F;
    --td-error-color-light: #FFF0ED;

    /* === 文字色 (Text Colors) === */
    --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: #0052D9;
    --td-text-color-link: #003CAB;

    /* === 背景色 (Background Colors) === */
    --td-bg-color-page: #F0F2F5;
    --td-bg-color-container: #FFFFFF;
    --td-bg-color-container-hover: #F3F3F3;
    --td-bg-color-container-active: #E8E8E8;
    --td-bg-color-secondarycontainer: #F3F3F3;
    --td-bg-color-component: #E8E8E8;
    --td-bg-color-component-hover: #DDDDDD;
    --td-bg-color-component-disabled: #EEEEEE;
    --td-bg-color-specialcomponent: #FFFFFF;

    /* === 边框色 (Border Colors) === */
    --td-border-level-1-color: #E7E7E7;
    --td-border-level-2-color: #DDDDDD;
    --td-component-stroke: #DCDCDC;

    /* === 灰度色 (Gray Colors) === */
    --td-gray-color-1: #F3F3F3;
    --td-gray-color-2: #EEEEEE;
    --td-gray-color-3: #E8E8E8;
    --td-gray-color-4: #DDDDDD;
    --td-gray-color-5: #C6C6C6;
    --td-gray-color-6: #A6A6A6;
    --td-gray-color-7: #8B8B8B;
    --td-gray-color-8: #777777;
    --td-gray-color-9: #5E5E5E;
    --td-gray-color-10: #4B4B4B;
    --td-gray-color-11: #393939;
    --td-gray-color-12: #2C2C2C;
    --td-gray-color-13: #242424;
    --td-gray-color-14: #181818;

    /* === 字体 (Typography) === */
    --td-font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --td-font-size-s: 12px;
    --td-font-size: 14px;
    --td-font-size-l: 16px;
    --td-font-size-xl: 18px;
    --td-font-size-xxl: 20px;
    --td-line-height-s: 20px;
    --td-line-height: 22px;
    --td-line-height-l: 24px;
    --td-line-height-xl: 28px;
    --td-font-weight: 400;
    --td-font-weight-medium: 500;
    --td-font-weight-bold: 600;

    /* === 间距 (Spacing) === */
    --td-spacer-1: 4px;
    --td-spacer-2: 8px;
    --td-spacer-3: 12px;
    --td-spacer-4: 16px;
    --td-spacer-5: 20px;
    --td-spacer-6: 24px;
    --td-spacer-7: 32px;
    --td-spacer-8: 40px;
    --td-spacer-9: 48px;

    /* === 圆角 (Border Radius) === */
    --td-radius-small: 3px;
    --td-radius-default: 6px;
    --td-radius-medium: 9px;
    --td-radius-large: 12px;
    --td-radius-round: 999px;
    --td-radius-circle: 50%;

    /* === 投影 (Shadows) === */
    --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 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1);
    --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px 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;

    /* === 布局尺寸 (Layout) === */
    --td-header-height: 56px;
    --td-sidebar-width: 232px;
    --td-sidebar-collapsed-width: 64px;

    /* === 组件尺寸 (Component Sizes) === */
    --td-comp-size-xs: 24px;
    --td-comp-size-s: 28px;
    --td-comp-size-m: 32px;
    --td-comp-size-l: 36px;
    --td-comp-size-xl: 40px;
    --td-comp-size-xxl: 48px;

    /* === 过渡动画 (Transitions) === */
    --td-anim-time-fn-easing: cubic-bezier(0.38, 0, 0.24, 1);
    --td-anim-time-fn-ease-out: cubic-bezier(0, 0, 0.15, 1);
    --td-anim-time-fn-ease-in: cubic-bezier(0.82, 0, 1, 0.9);
    --td-anim-duration-base: 0.2s;
    --td-anim-duration-moderate: 0.24s;
    --td-anim-duration-slow: 0.3s;

    /* === Z-Index 层级 === */
    --td-zindex-default: 0;
    --td-zindex-popup: 5500;
    --td-zindex-dialog: 6000;
    --td-zindex-select: 6500;
    --td-zindex-message: 7000;
    --td-zindex-notification: 7500;
    --td-zindex-loading: 8000;
}