:root {
  color-scheme: dark;

  --global-max-width: 1680px;

  /* 导航栏高度变量 - 用于动态调整3楼导航位置 */
  --fixed-nav-height: 30px;
  
    /* ============================================
   * 背景颜色
   * ============================================ */
  --color-bg-primary: #1C1C1C;       /* 主要背景 */
  --color-bg-secondary: #333;  /* 第二背景 */
  --color-bg-input:#454545; /*第三背景*/
  --color-bg-suitable:#454545; /*鼠标经过内容按钮背景*/
  --color-bg-proper:#454545; /*内容页背景*/
  --color-bg-tertiary: #E0E0E0;   /* 第六背景 - 禁用状态、占位符 */
  --color-bg-dark: #D0532D;       /* 第七背景 - 代码块、特殊区域 */
    /* ============================================
   * 按钮颜色
   * ============================================ */
  --color-bg-button: #454545;        /* 全局按钮背景 */
  --color-bg-gray: #666;          /* 全局按钮经过背景 */
   --focus-shadow: none;
   /* 文字颜色
   * ============================================ */
   --color-text-suitable:#FFF; /*全局字体颜色*/
  --color-text-secondary: #FFF;   /* 顶部导航 主标题颜色 =  */
  --color-text-primary: #EEEEEC;     /* 二级导航 第二标题颜色  内容文章标题  */
  --color-text-light: #EEEEEC;             /*  三级导航   标签 侧边栏文章标题等*/
  --color-text-subtitle: #FFF;   /* 顶部导航  高亮标题 */
  --color-text-proper: #FFF; /*二级导航 高亮标题*/
  --color-text-white: #FFF;  /* 按钮颜色*/
 
 /**图标 特殊标题颜色**/
 --color-text-red:#FF2600;
 
    /* ============================================
   * 基础颜色 - 纯文字
   * ============================================ */
  --color-white: #FFF;      /* 纯白 - 用于深色背景上的文字、按钮文字等 */
  --color-secondary: #EEEEEC; /**文章内容字体颜色**/
  --color-subtitle: #999;
  --color-black: #000;      /* 代码高亮 */
  /* ============================================
  
  
  /* ============================================
   * 边框颜色
   * ============================================ */
  --color-border-secondary: #333; /* 顶部导航 高亮展示边框 */
  --color-border-suitable: #555;  /* 二级导航 高亮展示边框 */
  --color-border-primary: #333;   /* 主要边框  */
  --color-border-proper: #444;/*次要边框*/

  

  /* ============================================
   * 链接颜色
   * ============================================ */
  --color-link: #CCC;             /* 链接默认颜色   color: var(--color-link);   */
  --color-link-visited: #666;     /* 已访问链接颜色 */
  --color-link-secondary: #444; /*内容页边框 */
  --color-link-proper:#CCC;/*次要边框*/
  --color-link-hover:#AAA; /*全局鼠标经过默认颜色*/
  /* ============================================
   * 圆角
   * ============================================ */
  --border-radius-sm: 4px;        /* 小圆角 - 标签、小按钮 */
  --border-radius-md: 8px;        /* 中圆角 - 卡片、输入框 */
  --border-radius-lg: 12px;       /* 大圆角 - 大卡片、模态框 */
  --border-radius-full: 50%;      /* 完全圆角 - 圆形元素、头像 */

  /* ============================================
   * 间距
   * ============================================ */
  --spacing-xs: 4px;              /* 超小间距 */
  --spacing-sm: 8px;              /* 小间距 - 紧凑布局 */
  --spacing-md: 16px;             /* 中间距 - 标准间距 */
  --spacing-lg: 24px;             /* 大间距 - 区块间距 */
  --spacing-xl: 32px;             /* 超大间距 - 大区块 */
  --spacing-2xl: 48px;            /* 2倍超大间距 - 页面间距 */

  /* ============================================
   * 字体大小
   * ============================================ */
  --font-size-xs: 12px;           /* 超小字体 - 注释、辅助文字 font-size: var(--font-size-xs);*/
  --font-size-sm: 13px;           /* 小字体 - 侧边栏、元数据 */
  --font-size-base: 14px;         /* 基础字体 - 正文*/
  --font-size-md: 16px;           /* 中等字体 - 稍大正文 */
  --font-size-lg: 18px;           /* 大字体 - 小标题 */
  --font-size-xl: 20px;           /* 超大字体 - 副标题 */
  --font-size-2xl: 24px;          /* 2倍超大字体 - 主标题 */

  /* ============================================
   * 字体粗细
   * ============================================ */
  --font-weight-normal: 400;      /* 正常粗细 */
  --font-weight-medium: 500;      /* 中等粗细 */
  --font-weight-semibold: 600;    /* 半粗 */
  --font-weight-bold: 700;        /* 粗体 */

  /* ============================================
   * 行高
   * ============================================ */
  --line-height-tight: 1.4;       /* 紧凑行高 - 标题 */
  --line-height-normal: 1.6;      /* 正常行高 - 正文 */
  --line-height-relaxed: 1.8;     /* 宽松行高 - 大段文字 */

  /* ============================================
   * 过渡动画
   * ============================================ */
  --transition-fast: 0.2s ease;   /* 快速过渡 - 悬停效果 */
  --transition-base: 0.3s ease;   /* 标准过渡 - 一般动画 */
  --transition-slow: 0.5s ease;   /* 慢速过渡 - 复杂动画 */

  /* ============================================
   * 阴影
   * ============================================ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);   /* 小阴影 - 轻微提升 */
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);    /* 中阴影 - 卡片默认 */
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);   /* 大阴影 - 悬停提升 */
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.2);   /* 超大阴影 - 模态框 */

  /* ============================================
   * 层级 (z-index)
   * ============================================ */
  --z-index-dropdown: 1000;       /* 下拉菜单 */
  --z-index-sticky: 1020;         /* 粘性定位元素 */
  --z-index-fixed: 1030;          /* 固定定位元素 */
  --z-index-modal-backdrop: 1040; /* 模态框背景遮罩 */
  --z-index-modal: 1050;          /* 模态框 */
  --z-index-popover: 1060;        /* 弹出层 */
  --z-index-tooltip: 1070;        /* 工具提示 */
}