/**
 * CSS 变量定义
 * 主题定制和颜色管理
 */

/* ==========================================================================
   颜色变量 (Color Variables)
   ========================================================================== */

:root {
    /* 主要颜色 */
    --color-primary: #4caf50;
    --color-primary-dark: #116113;
    --color-primary-light: #63d868;

    /* 文本颜色 */
    --color-text: #333;
    --color-text-light: #999;
    --color-text-lighter: #ccc;
    --color-text-dark: #1a1a1a;

    /* 背景颜色 - 浅色模式 */
    --color-bg: #f7f7f7 !important;
    --color-bg-dark: #2F2F2F;
    --color-bg-white: #fff;
    --color-bg-gray: #f8f9fa;
    
    /* 边框颜色 */
    --color-border: #eee;
    --color-border-dark: #4a4a4a;
    --color-border-light: #d1d1d1;
    
    /* 功能颜色 */
    --color-success: #05B80C;
    --color-warning: #856404;
    --color-danger: #721c24;
    --color-info: #004085;
    
    /* 链接颜色 */
    --color-link: #4CAF50;
    --color-link-hover: #48AF51;
    
    /* 阴影颜色 */
    --shadow-sm: rgba(0, 0, 0, 0.1);
    --shadow-md: rgba(0, 0, 0, 0.1);
    --shadow-lg: rgba(0, 0, 0, 0.15);
    
    /* 圆角半径 */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 16px;
    
    /* 字体设置 */
    --font-family-base: "\5FAE\8F6F\96C5\9ED1", arial;
    --font-family-heading: "\5FAE\8F6F\96C5\9ED1", arial;
    --font-family-code: "SF Mono", "Fira Code", "Consolas", monospace;
    
    --font-size-base: 14px;
    --font-size-sm: 12px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-xxl: 20px;
    --font-size-title: 24px;
    --font-size-heading: 26px;
    
    --line-height-base: 1.5;
    --line-height-tight: 1.4;
    --line-height-loose: 1.8;
    
    /* 间距系统 */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 15px;
    --space-lg: 20px;
    --space-xl: 30px;
    
    /* 布局尺寸 */
    --container-width: 1170px;
    --header-height: 60px;
    --sidebar-width: 410px;
    --main-content-width: 740px;
    
    /* 过渡动画 */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ==========================================================================
   深色模式变量覆盖
   ========================================================================== */

html.dark-mode {
    --color-text: #c0c0c0;
    --color-text-light: #888;
    --color-text-lighter: #666;
    --color-text-dark: #B0B0B0;

    --color-bg: #2F2F2F;
    --color-bg-white: #252525;
    --color-bg-gray: #3a3a3a;

    --color-border: #404040;
    --color-border-dark: #5a5a5a;

    --color-link: #6cb2eb;
    --color-link-hover: #48AF51;

    --shadow-sm: rgba(0, 0, 0, 0.3);
    --shadow-md: rgba(0, 0, 0, 0.4);
    --shadow-lg: rgba(0, 0, 0, 0.5);
}