/**
 * Ting UI - 硅胶质感 CSS 框架
 * 版本: 1.1.0
 * 作者: TingTing
 * 说明: 主题定义
 */

/* ==================== 深色模式 ==================== */
.dark{
    /* 基础颜色 */
    --t-bg: #2d2d2d;
    --t-shadow-dark: #1a1a1a;
    --t-shadow-light: #404040;
    
    /* 背景色变体 */
    --t-bg-light: #2d2d2d;
    --t-bg-dark: #1a1a1a;
    --t-bg-warm: #3a3530;
    --t-bg-cool: #303a40;
    
    /* 文字颜色 */
    --t-text-primary: #e0e0e0;
    --t-text-regular: #b0b0b0;
    --t-text-secondary: #808080;
    --t-text-placeholder: #606060;
    
    /* 主题色 - 在深色模式下稍微调亮 */
    --t-primary: #5cadff;
    --t-primary-light: #7bbdff;
    --t-primary-dark: #409eff;
    --t-success: #85ce61;
    --t-success-light: #a3d97f;
    --t-warning: #ebb563;
    --t-warning-light: #f0c78a;
    --t-warning-active: #f7ba2a;
    --t-danger: #f78989;
    --t-danger-light: #f9a6a6;
    --t-info: #a6a9ad;
    --t-info-light: #bcbec1;
    
    /* 边框和分隔线阴影 - 深色模式 */
    --t-border-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
    --t-inset-border-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
    --t-primary-glow-shadow: 5px 5px 10px rgba(64, 158, 255, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.1);
    --t-danger-glow-shadow: 5px 5px 10px rgba(245, 108, 108, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.1);
    
    /* 对话框相关 - 深色模式 */
    --t-dialog-mask-bg: rgba(0, 0, 0, 0.7);
    --t-dialog-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    
    /* 其他颜色变量 - 深色模式 */
    --t-primary-hex: #5cadff;
    --t-disabled-color: #606266;
    --t-bg-disabled: #1a1a1a;
    --t-border-color-light: rgba(255, 255, 255, 0.05);
    --t-white: #fff;
    --t-white-rgba-10: rgba(255, 255, 255, 0.1);
    --t-white-rgba-20: rgba(255, 255, 255, 0.2);
    --t-white-rgba-30: rgba(255, 255, 255, 0.3);
    --t-white-rgba-50: rgba(255, 255, 255, 0.5);
    --t-white-rgba-70: rgba(255, 255, 255, 0.7);
    --t-white-rgba-80: rgba(255, 255, 255, 0.8);
    --t-white-rgba-90: rgba(255, 255, 255, 0.9);
    --t-white-rgba-95: rgba(255, 255, 255, 0.95);
    --t-black-rgba-2: rgba(0, 0, 0, 0.02);
    --t-black-rgba-5: rgba(0, 0, 0, 0.05);
    --t-black-rgba-10: rgba(0, 0, 0, 0.1);
    --t-black-rgba-12: rgba(0, 0, 0, 0.12);
    --t-black-rgba-15: rgba(0, 0, 0, 0.15);
    --t-black-rgba-20: rgba(0, 0, 0, 0.2);
    --t-black-rgba-30: rgba(0, 0, 0, 0.3);
    --t-black-rgba-40: rgba(0, 0, 0, 0.4);
    --t-black-rgba-50: rgba(0, 0, 0, 0.5);
    --t-black-rgba-60: rgba(0, 0, 0, 0.6);
    --t-black-rgba-85: rgba(0, 0, 0, 0.85);
    --t-black-rgba-90: rgba(0, 0, 0, 0.9);
    --t-primary-rgba-5: rgba(92, 173, 255, 0.05);
    --t-primary-rgba-8: rgba(92, 173, 255, 0.08);
    --t-primary-rgba-10: rgba(92, 173, 255, 0.1);
    --t-primary-rgba-20: rgba(92, 173, 255, 0.2);
    --t-success-rgba-10: rgba(133, 206, 97, 0.1);
    --t-success-rgba-20: rgba(133, 206, 97, 0.2);
    --t-warning-rgba-10: rgba(235, 181, 99, 0.1);
    --t-warning-rgba-20: rgba(235, 181, 99, 0.2);
    --t-danger-rgba-10: rgba(247, 137, 137, 0.1);
    --t-danger-rgba-20: rgba(247, 137, 137, 0.2);
    --t-info-rgba-10: rgba(166, 169, 173, 0.1);
    --t-info-rgba-20: rgba(166, 169, 173, 0.2);
    
    /* 内阴影变体 - 深色模式 */
    --t-inset-shadow-sm: inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.1);
    --t-inset-shadow-md: inset 3px 3px 6px rgba(0, 0, 0, 0.3), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
    --t-inset-shadow-lg: inset 4px 4px 8px rgba(0, 0, 0, 0.3), inset -4px -4px 8px rgba(255, 255, 255, 0.1);
    --t-inset-shadow-xl: inset 5px 5px 10px rgba(0, 0, 0, 0.35), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
    --t-inset-shadow-button: inset 2px 2px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.05);
}

/* ==================== 高对比度主题 ==================== */
.high-contrast{
    /* 基础颜色 */
    --t-bg: #ffffff;
    --t-shadow-dark: #000000;
    --t-shadow-light: #ffffff;
    
    /* 背景色变体 */
    --t-bg-light: #ffffff;
    --t-bg-dark: #000000;
    --t-bg-warm: #fff8e1;
    --t-bg-cool: #e3f2fd;
    
    /* 文字颜色 */
    --t-text-primary: #000000;
    --t-text-regular: #000000;
    --t-text-secondary: #666666;
    --t-text-placeholder: #999999;
    
    /* 主题色 - 高对比度 */
    --t-primary: #0066cc;
    --t-primary-light: #3399ff;
    --t-primary-dark: #004c99;
    --t-success: #006600;
    --t-success-light: #339933;
    --t-warning: #cc6600;
    --t-warning-light: #ff9933;
    --t-warning-active: #ff6600;
    --t-danger: #cc0000;
    --t-danger-light: #ff3333;
    --t-info: #666666;
    --t-info-light: #999999;
    
    /* 边框和分隔线阴影 - 高对比度 */
    --t-border-shadow: 0 1px 0 rgba(255, 255, 255, 1);
    --t-inset-border-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
    --t-primary-glow-shadow: 5px 5px 10px rgba(0, 102, 204, 0.4), -5px -5px 10px rgba(255, 255, 255, 0.9);
    --t-danger-glow-shadow: 5px 5px 10px rgba(204, 0, 0, 0.4), -5px -5px 10px rgba(255, 255, 255, 0.9);
    
    /* 对话框相关 - 高对比度 */
    --t-dialog-mask-bg: rgba(0, 0, 0, 0.8);
    --t-dialog-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    
    /* 其他颜色变量 - 高对比度 */
    --t-primary-hex: #0066cc;
    --t-disabled-color: #cccccc;
    --t-bg-disabled: #f5f5f5;
    --t-border-color-light: rgba(0, 0, 0, 0.2);
    --t-white: #fff;
    --t-white-rgba-10: rgba(255, 255, 255, 0.1);
    --t-white-rgba-20: rgba(255, 255, 255, 0.2);
    --t-white-rgba-30: rgba(255, 255, 255, 0.3);
    --t-white-rgba-50: rgba(255, 255, 255, 0.5);
    --t-white-rgba-70: rgba(255, 255, 255, 0.7);
    --t-white-rgba-80: rgba(255, 255, 255, 0.8);
    --t-white-rgba-90: rgba(255, 255, 255, 0.9);
    --t-white-rgba-95: rgba(255, 255, 255, 0.95);
    --t-black-rgba-2: rgba(0, 0, 0, 0.02);
    --t-black-rgba-5: rgba(0, 0, 0, 0.05);
    --t-black-rgba-10: rgba(0, 0, 0, 0.1);
    --t-black-rgba-12: rgba(0, 0, 0, 0.12);
    --t-black-rgba-15: rgba(0, 0, 0, 0.15);
    --t-black-rgba-20: rgba(0, 0, 0, 0.2);
    --t-black-rgba-30: rgba(0, 0, 0, 0.3);
    --t-black-rgba-40: rgba(0, 0, 0, 0.4);
    --t-black-rgba-50: rgba(0, 0, 0, 0.5);
    --t-black-rgba-60: rgba(0, 0, 0, 0.6);
    --t-black-rgba-85: rgba(0, 0, 0, 0.85);
    --t-black-rgba-90: rgba(0, 0, 0, 0.9);
    --t-primary-rgba-5: rgba(0, 102, 204, 0.05);
    --t-primary-rgba-8: rgba(0, 102, 204, 0.08);
    --t-primary-rgba-10: rgba(0, 102, 204, 0.1);
    --t-primary-rgba-20: rgba(0, 102, 204, 0.2);
    --t-success-rgba-10: rgba(0, 102, 0, 0.1);
    --t-success-rgba-20: rgba(0, 102, 0, 0.2);
    --t-warning-rgba-10: rgba(204, 102, 0, 0.1);
    --t-warning-rgba-20: rgba(204, 102, 0, 0.2);
    --t-danger-rgba-10: rgba(204, 0, 0, 0.1);
    --t-danger-rgba-20: rgba(204, 0, 0, 0.2);
    --t-info-rgba-10: rgba(102, 102, 102, 0.1);
    --t-info-rgba-20: rgba(102, 102, 102, 0.2);
    
    /* 内阴影变体 - 高对比度 */
    --t-inset-shadow-sm: inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.9);
    --t-inset-shadow-md: inset 3px 3px 6px rgba(0, 0, 0, 0.3), inset -3px -3px 6px rgba(255, 255, 255, 0.9);
    --t-inset-shadow-lg: inset 4px 4px 8px rgba(0, 0, 0, 0.25), inset -4px -4px 8px rgba(255, 255, 255, 0.95);
    --t-inset-shadow-xl: inset 5px 5px 10px rgba(0, 0, 0, 0.3), inset -5px -5px 10px rgba(255, 255, 255, 0.95);
    --t-inset-shadow-button: inset 2px 2px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.1);
}

/* ==================== 暖色调主题 ==================== */
.warm-theme{
    /* 基础颜色 */
    --t-bg: #f5f0e8;
    --t-shadow-dark: #d4c8b8;
    --t-shadow-light: #fffaf0;
    
    /* 背景色变体 */
    --t-bg-light: #f5f0e8;
    --t-bg-dark: #e8d8c8;
    --t-bg-warm: #f5f0e8;
    --t-bg-cool: #f0e8e0;
    
    /* 文字颜色 */
    --t-text-primary: #8b4513;
    --t-text-regular: #a0522d;
    --t-text-secondary: #cd853f;
    --t-text-placeholder: #d2b48c;
    
    /* 主题色 - 暖色调 */
    --t-primary: #ff8c00;
    --t-primary-light: #ffa500;
    --t-primary-dark: #ff7f50;
    --t-success: #228b22;
    --t-success-light: #32cd32;
    --t-warning: #ff4500;
    --t-warning-light: #ff6347;
    --t-warning-active: #ff8c00;
    --t-danger: #dc143c;
    --t-danger-light: #ff69b4;
    --t-info: #cd853f;
    --t-info-light: #daa520;
    
    /* 边框和分隔线阴影 - 暖色调 */
    --t-border-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    --t-inset-border-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.05);
    --t-primary-glow-shadow: 5px 5px 10px rgba(255, 140, 0, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.8);
    --t-danger-glow-shadow: 5px 5px 10px rgba(220, 20, 60, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.8);
    
    /* 对话框相关 - 暖色调 */
    --t-dialog-mask-bg: rgba(0, 0, 0, 0.5);
    --t-dialog-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    
    /* 其他颜色变量 - 暖色调 */
    --t-primary-hex: #ff8c00;
    --t-disabled-color: #d2b48c;
    --t-bg-disabled: #faf0e6;
    --t-border-color-light: rgba(0, 0, 0, 0.05);
    --t-white: #fff;
    --t-white-rgba-10: rgba(255, 255, 255, 0.1);
    --t-white-rgba-20: rgba(255, 255, 255, 0.2);
    --t-white-rgba-30: rgba(255, 255, 255, 0.3);
    --t-white-rgba-50: rgba(255, 255, 255, 0.5);
    --t-white-rgba-70: rgba(255, 255, 255, 0.7);
    --t-white-rgba-80: rgba(255, 255, 255, 0.8);
    --t-white-rgba-90: rgba(255, 255, 255, 0.9);
    --t-white-rgba-95: rgba(255, 255, 255, 0.95);
    --t-black-rgba-2: rgba(0, 0, 0, 0.02);
    --t-black-rgba-5: rgba(0, 0, 0, 0.05);
    --t-black-rgba-10: rgba(0, 0, 0, 0.1);
    --t-black-rgba-12: rgba(0, 0, 0, 0.12);
    --t-black-rgba-15: rgba(0, 0, 0, 0.15);
    --t-black-rgba-20: rgba(0, 0, 0, 0.2);
    --t-black-rgba-30: rgba(0, 0, 0, 0.3);
    --t-black-rgba-40: rgba(0, 0, 0, 0.4);
    --t-black-rgba-50: rgba(0, 0, 0, 0.5);
    --t-black-rgba-60: rgba(0, 0, 0, 0.6);
    --t-black-rgba-85: rgba(0, 0, 0, 0.85);
    --t-black-rgba-90: rgba(0, 0, 0, 0.9);
    --t-primary-rgba-5: rgba(255, 140, 0, 0.05);
    --t-primary-rgba-8: rgba(255, 140, 0, 0.08);
    --t-primary-rgba-10: rgba(255, 140, 0, 0.1);
    --t-primary-rgba-20: rgba(255, 140, 0, 0.2);
    --t-success-rgba-10: rgba(34, 139, 34, 0.1);
    --t-success-rgba-20: rgba(34, 139, 34, 0.2);
    --t-warning-rgba-10: rgba(255, 69, 0, 0.1);
    --t-warning-rgba-20: rgba(255, 69, 0, 0.2);
    --t-danger-rgba-10: rgba(220, 20, 60, 0.1);
    --t-danger-rgba-20: rgba(220, 20, 60, 0.2);
    --t-info-rgba-10: rgba(205, 133, 63, 0.1);
    --t-info-rgba-20: rgba(205, 133, 63, 0.2);
    
    /* 内阴影变体 - 暖色调 */
    --t-inset-shadow-sm: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.8);
    --t-inset-shadow-md: inset 3px 3px 6px rgba(0, 0, 0, 0.15), inset -3px -3px 6px rgba(255, 255, 255, 0.8);
    --t-inset-shadow-lg: inset 4px 4px 8px rgba(0, 0, 0, 0.12), inset -4px -4px 8px rgba(255, 255, 255, 0.9);
    --t-inset-shadow-xl: inset 5px 5px 10px rgba(0, 0, 0, 0.15), inset -5px -5px 10px rgba(255, 255, 255, 0.95);
    --t-inset-shadow-button: inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.1);
}

/* ==================== 冷色调主题 ==================== */
.cool-theme{
    /* 基础颜色 */
    --t-bg: #e8f0f5;
    --t-shadow-dark: #b8c4d4;
    --t-shadow-light: #f8fafc;
    
    /* 背景色变体 */
    --t-bg-light: #e8f0f5;
    --t-bg-dark: #d8e4f0;
    --t-bg-warm: #f0e8f5;
    --t-bg-cool: #e8f0f5;
    
    /* 文字颜色 */
    --t-text-primary: #1a365d;
    --t-text-regular: #2d3748;
    --t-text-secondary: #4a5568;
    --t-text-placeholder: #718096;
    
    /* 主题色 - 冷色调 */
    --t-primary: #4299e1;
    --t-primary-light: #63b3ed;
    --t-primary-dark: #3182ce;
    --t-success: #38b2ac;
    --t-success-light: #4fd1c7;
    --t-warning: #ed8936;
    --t-warning-light: #f6ad55;
    --t-warning-active: #ed8936;
    --t-danger: #f56565;
    --t-danger-light: #fc8181;
    --t-info: #4a5568;
    --t-info-light: #718096;
    
    /* 边框和分隔线阴影 - 冷色调 */
    --t-border-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    --t-inset-border-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.05);
    --t-primary-glow-shadow: 5px 5px 10px rgba(66, 153, 225, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.8);
    --t-danger-glow-shadow: 5px 5px 10px rgba(245, 101, 101, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.8);
    
    /* 对话框相关 - 冷色调 */
    --t-dialog-mask-bg: rgba(0, 0, 0, 0.5);
    --t-dialog-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    
    /* 其他颜色变量 - 冷色调 */
    --t-primary-hex: #4299e1;
    --t-disabled-color: #cbd5e0;
    --t-bg-disabled: #f7fafc;
    --t-border-color-light: rgba(0, 0, 0, 0.05);
    --t-white: #fff;
    --t-white-rgba-10: rgba(255, 255, 255, 0.1);
    --t-white-rgba-20: rgba(255, 255, 255, 0.2);
    --t-white-rgba-30: rgba(255, 255, 255, 0.3);
    --t-white-rgba-50: rgba(255, 255, 255, 0.5);
    --t-white-rgba-70: rgba(255, 255, 255, 0.7);
    --t-white-rgba-80: rgba(255, 255, 255, 0.8);
    --t-white-rgba-90: rgba(255, 255, 255, 0.9);
    --t-white-rgba-95: rgba(255, 255, 255, 0.95);
    --t-black-rgba-2: rgba(0, 0, 0, 0.02);
    --t-black-rgba-5: rgba(0, 0, 0, 0.05);
    --t-black-rgba-10: rgba(0, 0, 0, 0.1);
    --t-black-rgba-12: rgba(0, 0, 0, 0.12);
    --t-black-rgba-15: rgba(0, 0, 0, 0.15);
    --t-black-rgba-20: rgba(0, 0, 0, 0.2);
    --t-black-rgba-30: rgba(0, 0, 0, 0.3);
    --t-black-rgba-40: rgba(0, 0, 0, 0.4);
    --t-black-rgba-50: rgba(0, 0, 0, 0.5);
    --t-black-rgba-60: rgba(0, 0, 0, 0.6);
    --t-black-rgba-85: rgba(0, 0, 0, 0.85);
    --t-black-rgba-90: rgba(0, 0, 0, 0.9);
    --t-primary-rgba-5: rgba(66, 153, 225, 0.05);
    --t-primary-rgba-8: rgba(66, 153, 225, 0.08);
    --t-primary-rgba-10: rgba(66, 153, 225, 0.1);
    --t-primary-rgba-20: rgba(66, 153, 225, 0.2);
    --t-success-rgba-10: rgba(56, 178, 172, 0.1);
    --t-success-rgba-20: rgba(56, 178, 172, 0.2);
    --t-warning-rgba-10: rgba(237, 137, 54, 0.1);
    --t-warning-rgba-20: rgba(237, 137, 54, 0.2);
    --t-danger-rgba-10: rgba(245, 101, 101, 0.1);
    --t-danger-rgba-20: rgba(245, 101, 101, 0.2);
    --t-info-rgba-10: rgba(74, 85, 104, 0.1);
    --t-info-rgba-20: rgba(74, 85, 104, 0.2);
    
    /* 内阴影变体 - 冷色调 */
    --t-inset-shadow-sm: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.8);
    --t-inset-shadow-md: inset 3px 3px 6px rgba(0, 0, 0, 0.15), inset -3px -3px 6px rgba(255, 255, 255, 0.8);
    --t-inset-shadow-lg: inset 4px 4px 8px rgba(0, 0, 0, 0.12), inset -4px -4px 8px rgba(255, 255, 255, 0.9);
    --t-inset-shadow-xl: inset 5px 5px 10px rgba(0, 0, 0, 0.15), inset -5px -5px 10px rgba(255, 255, 255, 0.95);
    --t-inset-shadow-button: inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.1);
}

/* 自动适应系统深色模式偏好 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* 基础颜色 */
        --t-bg: #2d2d2d;
        --t-shadow-dark: #1a1a1a;
        --t-shadow-light: #404040;
        
        /* 背景色变体 */
        --t-bg-light: #2d2d2d;
        --t-bg-dark: #1a1a1a;
        --t-bg-warm: #3a3530;
        --t-bg-cool: #303a40;
        
        /* 文字颜色 */
        --t-text-primary: #e0e0e0;
        --t-text-regular: #b0b0b0;
        --t-text-secondary: #808080;
        --t-text-placeholder: #606060;
        
        /* 主题色 - 在深色模式下稍微调亮 */
        --t-primary: #5cadff;
        --t-primary-light: #7bbdff;
        --t-primary-dark: #409eff;
        --t-success: #85ce61;
        --t-success-light: #a3d97f;
        --t-warning: #ebb563;
        --t-warning-light: #f0c78a;
        --t-warning-active: #f7ba2a;
        --t-danger: #f78989;
        --t-danger-light: #f9a6a6;
        --t-info: #a6a9ad;
        --t-info-light: #bcbec1;
        
        /* 边框和分隔线阴影 - 深色模式 */
        --t-border-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
        --t-inset-border-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
        --t-primary-glow-shadow: 5px 5px 10px rgba(64, 158, 255, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.1);
        --t-danger-glow-shadow: 5px 5px 10px rgba(245, 108, 108, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.1);
        
        /* 对话框相关 - 深色模式 */
        --t-dialog-mask-bg: rgba(0, 0, 0, 0.7);
        --t-dialog-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        
        /* 其他颜色变量 - 深色模式 */
        --t-primary-hex: #5cadff;
        --t-disabled-color: #606266;
        --t-bg-disabled: #1a1a1a;
        --t-border-color-light: rgba(255, 255, 255, 0.05);
        --t-white: #fff;
        --t-white-rgba-10: rgba(255, 255, 255, 0.1);
        --t-white-rgba-20: rgba(255, 255, 255, 0.2);
        --t-white-rgba-30: rgba(255, 255, 255, 0.3);
        --t-white-rgba-50: rgba(255, 255, 255, 0.5);
        --t-white-rgba-70: rgba(255, 255, 255, 0.7);
        --t-white-rgba-80: rgba(255, 255, 255, 0.8);
        --t-white-rgba-90: rgba(255, 255, 255, 0.9);
        --t-white-rgba-95: rgba(255, 255, 255, 0.95);
        --t-black-rgba-2: rgba(0, 0, 0, 0.02);
        --t-black-rgba-5: rgba(0, 0, 0, 0.05);
        --t-black-rgba-10: rgba(0, 0, 0, 0.1);
        --t-black-rgba-12: rgba(0, 0, 0, 0.12);
        --t-black-rgba-15: rgba(0, 0, 0, 0.15);
        --t-black-rgba-20: rgba(0, 0, 0, 0.2);
        --t-black-rgba-30: rgba(0, 0, 0, 0.3);
        --t-black-rgba-40: rgba(0, 0, 0, 0.4);
        --t-black-rgba-50: rgba(0, 0, 0, 0.5);
        --t-black-rgba-60: rgba(0, 0, 0, 0.6);
        --t-black-rgba-85: rgba(0, 0, 0, 0.85);
        --t-black-rgba-90: rgba(0, 0, 0, 0.9);
        --t-primary-rgba-5: rgba(92, 173, 255, 0.05);
        --t-primary-rgba-8: rgba(92, 173, 255, 0.08);
        --t-primary-rgba-10: rgba(92, 173, 255, 0.1);
        --t-primary-rgba-20: rgba(92, 173, 255, 0.2);
        --t-success-rgba-10: rgba(133, 206, 97, 0.1);
        --t-success-rgba-20: rgba(133, 206, 97, 0.2);
        --t-warning-rgba-10: rgba(235, 181, 99, 0.1);
        --t-warning-rgba-20: rgba(235, 181, 99, 0.2);
        --t-danger-rgba-10: rgba(247, 137, 137, 0.1);
        --t-danger-rgba-20: rgba(247, 137, 137, 0.2);
        --t-info-rgba-10: rgba(166, 169, 173, 0.1);
        --t-info-rgba-20: rgba(166, 169, 173, 0.2);
        
        /* 内阴影变体 - 深色模式 */
        --t-inset-shadow-sm: inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.1);
        --t-inset-shadow-md: inset 3px 3px 6px rgba(0, 0, 0, 0.3), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
        --t-inset-shadow-lg: inset 4px 4px 8px rgba(0, 0, 0, 0.3), inset -4px -4px 8px rgba(255, 255, 255, 0.1);
        --t-inset-shadow-xl: inset 5px 5px 10px rgba(0, 0, 0, 0.35), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
        --t-inset-shadow-button: inset 2px 2px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.05);
    }
}