:root {
    /* 颜色 */
    --color-primary: #7392f8; /* 主色调 */
    --color-secondary: #6c757d; /* 次要色调 */
    --color-success: #33da98; /* 成功/正确状态颜色 */
    --color-danger: #fb5151; /* 错误/危险状态颜色 */
    --color-warning: #ffb82e; /* 警告状态颜色 */
    --color-info: #17a2b8; /* 信息提示颜色 */
    --color-light: #f8f9fa; /* 浅色背景 */
    --color-dark: #343a40; /* 深色文字或背景 */
    --color-disabled: #c7c6d4; /* 禁用状态颜色 */

    /* 按钮颜色 */
    --button-color: linear-gradient(180deg, #7595ff 30%, #8fa9ff 100%);
    --button-danger-color: var(--color-danger);
    --button-danger-secondary-color: rgba(251, 27, 34, 0.1);
    --button-default-color: #f3f3f3;
    --button-color-active: var(--color-primary);
    --button-color-disabled: var(--color-disabled);

    /* 字体大小 */
    --font-size-base: 14px; /* 基础字体大小 */
    --font-size-sm: 12px; /* 小号字体大小 */
    --font-size-lg: 16px; /* 大号字体大小 */

    /* 边距和填充 */
    --spacing-xs: 4px; /* 极小间距 */
    --spacing-sm: 6px; /* 小间距 */
    --spacing-md: 8px; /* 中等间距 */
    --spacing-lg: 12px; /* 大间距 */
    --spacing-xl: 16px; /* 极大间距 */

    /* 圆角 */
    --border-radius-sm: 20px; /* 小圆角 */
    --border-radius: 24px; /* 默认圆角 */
    --border-radius-lg: 100px; /* 大圆角 */

    /* 边框 */
    --border-width: 1px; /* 边框宽度 */
    --border-color: #f3f3f3; /* 边框颜色 */

    /* 阴影 */
    /* TODO 没有统一标准，自己补 */
    --box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.075);
    --box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    --box-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.175);

    /* 背景 */
    --background-color: linear-gradient(0deg, #fff 0%, #ebeeff 100%);
    --background-color-light: linear-gradient(180deg, #fff 61%, #fff6f0 100%);

    /* 动画过渡时间 */
    --transition-time: 0.3s; /* 过渡动画时间 */
}

.tt-primary-button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 32px;
    color: #fcfcfc;
    font-size: 14px;
    font-weight: 400;
    border-radius: 100px;
    background: linear-gradient(180deg, #7595ff 30%, #8fa9ff 100%);
}

.tt-primary-bottom-button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    color: #fcfcfc;
    font-size: 16px;
    font-weight: 400;
    border-radius: 100px;
    background: linear-gradient(180deg, #7595ff 30%, #8fa9ff 100%);
}

.tt-default-button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 32px;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    border-radius: 100px;
    border: 1px solid #c7c6d4;
}