/* 
 * SMSI Monitor - 主题系统
 * 亮暗主题CSS变量定义
 */

/* ==================== 亮色主题（默认） ==================== */
:root {
    /* 文字颜色 */
    --text-primary: #2c3e50;
    --text-secondary: #6c757d;
    --text-tertiary: #95a5a6;
    
    /* 背景颜色 */
    --bg-page: #f5f5f5;
    --bg-card: #ffffff;
    --bg-light: #f8f9fa;
    --bg-hover: #e9ecef;
    
    /* 边框颜色 */
    --border-color: #e0e0e0;
    --border-hover: #2C3E50;
    
    /* 功能颜色 */
    --color-success: #81C784;
    --color-danger: #E57373;
    --color-warning: #FF9800;
    --color-info: #2196F3;
    
    /* 字体大小 */
    --font-size-xs: 10px;
    --font-size-sm: 11px;
    --font-size-base: 12px;
    --font-size-md: 13px;
    --font-size-lg: 14px;
    --font-size-xl: 16px;
    --font-size-2xl: 18px;
    --font-size-3xl: 24px;
    --font-size-4xl: 28px;
    
    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    
    /* 阴影 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==================== 暗色主题 ==================== */
[data-theme="dark"] {
    /* 文字颜色 */
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-tertiary: #808080;
    
    /* 背景颜色 */
    --bg-page: #1a1a1a;
    --bg-card: #2d2d2d;
    --bg-light: #3a3a3a;
    --bg-hover: #404040;
    
    /* 边框颜色 */
    --border-color: #404040;
    --border-hover: #606060;
    
    /* 功能颜色保持不变 */
    --color-success: #81C784;
    --color-danger: #E57373;
    --color-warning: #FF9800;
    --color-info: #2196F3;
    
    /* 阴影 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* ==================== 主题切换动画 ==================== */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease;
}

/* 禁用某些元素的过渡 */
canvas,
img,
video {
    transition: none !important;
}