/*
 * 南明离火设计系统 - 设计Token (Design Tokens)
 * 版本: 1.0
 * 作者: 南明离火设计团队
 * 最后更新: 2025-11-03
 *
 * 说明：
 * 这个文件包含所有设计token（设计原子变量）
 * 应该在所有其他CSS文件之前加载
 * 变量命名规范：--nmlh-{category}-{property}-{variant}
 */

/* ========================================
   1. 字体系统 (Typography System)
   ======================================== */

:root {
  /* 字体族 (Font Family) */
  --nmlh-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                      "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                      "微软雅黑", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --nmlh-font-mono: "SF Mono", Monaco, Consolas, "Liberation Mono",
                    "Courier New", monospace;

  /* 字体大小 (Font Size) - 基准 1rem = 16px */
  --nmlh-font-size-xs: 0.75rem;      /* 12px - 辅助信息 */
  --nmlh-font-size-sm: 0.875rem;     /* 14px - 次要文字 */
  --nmlh-font-size-base: 1rem;       /* 16px - 正文 */
  --nmlh-font-size-md: 1.125rem;     /* 18px - 小标题 */
  --nmlh-font-size-lg: 1.25rem;      /* 20px - 卡片标题 */
  --nmlh-font-size-xl: 1.5rem;       /* 24px - 章节标题 */
  --nmlh-font-size-2xl: 2rem;        /* 32px - 页面标题 */
  --nmlh-font-size-3xl: 2.5rem;      /* 40px - 主标题 */

  /* 字体粗细 (Font Weight) */
  --nmlh-font-weight-light: 300;     /* 轻 - 装饰性文字 */
  --nmlh-font-weight-normal: 400;    /* 常规 - 正文 */
  --nmlh-font-weight-medium: 500;    /* 中等 - 强调 */
  --nmlh-font-weight-semibold: 600;  /* 半粗 - 小标题 */
  --nmlh-font-weight-bold: 700;      /* 粗 - 标题 */
  --nmlh-font-weight-extrabold: 800; /* 特粗 - 主标题 */

  /* 行高 (Line Height) */
  --nmlh-line-height-tight: 1.2;     /* 紧凑 - 标题 */
  --nmlh-line-height-normal: 1.5;    /* 标准 - 正文 */
  --nmlh-line-height-relaxed: 1.75;  /* 宽松 - 长文本 */
  --nmlh-line-height-loose: 2;       /* 超宽松 - 诗歌/代码 */

  /* 字母间距 (Letter Spacing) */
  --nmlh-letter-spacing-tight: -0.025em;   /* 紧凑 */
  --nmlh-letter-spacing-normal: 0;         /* 正常 */
  --nmlh-letter-spacing-wide: 0.025em;     /* 宽松 */
  --nmlh-letter-spacing-wider: 0.05em;     /* 更宽 */
}

/* ========================================
   2. 间距系统 (Spacing System)
   ======================================== */

:root {
  /* 基于 4px 基准网格，使用 8 点系统 */
  --nmlh-spacing-xs: 0.25rem;   /* 4px - 最小间距 */
  --nmlh-spacing-sm: 0.5rem;    /* 8px - 小间距 */
  --nmlh-spacing-md: 1rem;      /* 16px - 标准间距 */
  --nmlh-spacing-lg: 1.5rem;    /* 24px - 大间距 */
  --nmlh-spacing-xl: 2rem;      /* 32px - 超大间距 */
  --nmlh-spacing-2xl: 3rem;     /* 48px - 章节间距 */
  --nmlh-spacing-3xl: 4rem;     /* 64px - 页面间距 */
}

/* ========================================
   3. 圆角系统 (Border Radius System)
   ======================================== */

:root {
  --nmlh-radius-sm: 6px;         /* 小 - 按钮、徽章 */
  --nmlh-radius-md: 12px;        /* 中 - 输入框、小卡片 */
  --nmlh-radius-lg: 18px;        /* 大 - 主卡片 */
  --nmlh-radius-xl: 24px;        /* 超大 - 模态框 */
  --nmlh-radius-full: 9999px;    /* 圆形 - 头像、标签 */
}

/* ========================================
   4. 阴影系统 (Shadow System)
   ======================================== */

:root {
  /* 标准阴影 */
  --nmlh-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);      /* 小 - 按钮、徽章 */
  --nmlh-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);    /* 中 - 卡片 */
  --nmlh-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);     /* 大 - 下拉菜单 */
  --nmlh-shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.25);   /* 超大 - 模态框 */

  /* 强调阴影 */
  --nmlh-shadow-accent: 0 4px 16px rgba(211, 47, 47, 0.2);  /* 现代红强调 */
  --nmlh-shadow-success: 0 4px 16px rgba(16, 185, 129, 0.2);  /* 成功绿 */
  --nmlh-shadow-danger: 0 4px 16px rgba(239, 68, 68, 0.2);    /* 危险红 */
  --nmlh-shadow-warning: 0 4px 16px rgba(245, 158, 11, 0.2);  /* 警告橙 */

  /* 内阴影 */
  --nmlh-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ========================================
   5. 过渡与动画系统 (Transition & Animation)
   ======================================== */

:root {
  /* 过渡时间 */
  --nmlh-transition-fast: 0.15s ease;      /* 快速 - 悬浮、聚焦 */
  --nmlh-transition-normal: 0.3s ease;     /* 标准 - 一般过渡 */
  --nmlh-transition-slow: 0.5s ease;       /* 慢速 - 页面切换 */

  /* 缓动函数 */
  --nmlh-ease-linear: linear;
  --nmlh-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --nmlh-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --nmlh-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --nmlh-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ========================================
   6. 响应式断点系统 (Breakpoint System)
   ======================================== */

:root {
  --nmlh-breakpoint-xs: 0px;       /* 极小设备（手机竖屏） */
  --nmlh-breakpoint-sm: 576px;     /* 小设备（手机横屏） */
  --nmlh-breakpoint-md: 768px;     /* 中等设备（平板） */
  --nmlh-breakpoint-lg: 992px;     /* 大设备（桌面） */
  --nmlh-breakpoint-xl: 1200px;    /* 超大设备（大桌面） */
  --nmlh-breakpoint-2xl: 1400px;   /* 超超大设备（超宽屏） */
}

/* ========================================
   7. Z-Index 系统 (Z-Index System)
   ======================================== */

:root {
  --nmlh-z-base: 0;              /* 基础层 */
  --nmlh-z-dropdown: 1000;       /* 下拉菜单 */
  --nmlh-z-sticky: 1020;         /* 粘性定位 */
  --nmlh-z-fixed: 1030;          /* 固定定位 */
  --nmlh-z-modal-backdrop: 1040; /* 模态框背景 */
  --nmlh-z-modal: 1050;          /* 模态框 */
  --nmlh-z-popover: 1060;        /* 气泡提示 */
  --nmlh-z-tooltip: 1070;        /* 工具提示 */
  --nmlh-z-notification: 1080;   /* 通知 */
}

/* ========================================
   8. 颜色系统基础 (Color System Base)
   ======================================== */

:root {
  /* 灰度色阶 (Grayscale) */
  --nmlh-gray-50: #F8FAFC;
  --nmlh-gray-100: #F1F5F9;
  --nmlh-gray-200: #E2E8F0;
  --nmlh-gray-300: #CBD5E1;
  --nmlh-gray-400: #94A3B8;
  --nmlh-gray-500: #64748B;
  --nmlh-gray-600: #475569;
  --nmlh-gray-700: #334155;
  --nmlh-gray-800: #1E293B;
  --nmlh-gray-900: #2E2623; /* 专业暖中性灰，完全消除蓝色偏向，与红色主题完美协调 */

  /* 蓝色色阶 (Blue) */

  /* 青色色阶 (Cyan) */

  /* 绿色色阶 (Green) */
  --nmlh-green-50: #F0FDF4;
  --nmlh-green-100: #DCFCE7;
  --nmlh-green-200: #BBF7D0;
  --nmlh-green-300: #86EFAC;
  --nmlh-green-400: #4ADE80;
  --nmlh-green-500: #22C55E;
  --nmlh-green-600: #10B981;
  --nmlh-green-700: #059669;
  --nmlh-green-800: #047857;
  --nmlh-green-900: #065F46;

  /* 红色色阶 (Red) */
  --nmlh-red-50: #FEF2F2;
  --nmlh-red-100: #FEE2E2;
  --nmlh-red-200: #FECACA;
  --nmlh-red-300: #FCA5A5;
  --nmlh-red-400: #F87171;
  --nmlh-red-500: #EF4444;
  --nmlh-red-600: #DC2626;
  --nmlh-red-700: #B91C1C;
  --nmlh-red-800: #991B1B;
  --nmlh-red-900: #7F1D1D;

  /* 橙色色阶 (Orange) */
  --nmlh-orange-50: #FFF7ED;
  --nmlh-orange-100: #FFEDD5;
  --nmlh-orange-200: #FED7AA;
  --nmlh-orange-300: #FDBA74;
  --nmlh-orange-400: #FB923C;
  --nmlh-orange-500: #F59E0B;
  --nmlh-orange-600: #EA580C;
  --nmlh-orange-700: #D97706;
  --nmlh-orange-800: #C2410C;
  --nmlh-orange-900: #9A3412;
}

/* ========================================
   9. 语义化颜色 (Semantic Colors)
   ======================================== */

:root {
  /* 主色调 (Primary) - 现代红 */
  --nmlh-primary: #D32F2F;
  --nmlh-primary-hover: #B71C1C;
  --nmlh-primary-active: #C62828;
  --nmlh-primary-light: #FFEBEE;
  --nmlh-primary-dark: #B71C1C;

  /* 次色调 (Secondary) - 深红 */
  --nmlh-secondary: #E57373;
  --nmlh-secondary-hover: #EF5350;
  --nmlh-secondary-active: #F44336;

  /* 成功 (Success) - 绿色（保持不变） */
  --nmlh-success: #3FA65B;
  --nmlh-success-light: #A7E3B9;
  --nmlh-success-dark: #2E7D32;

  /* 危险 (Danger) - 现代红 */
  --nmlh-danger: #EF4444;
  --nmlh-danger-light: #FCA5A5;
  --nmlh-danger-dark: #DC2626;

  /* 警告 (Warning) - 现代橙 */
  --nmlh-warning: #FFB547;
  --nmlh-warning-light: #FFD580;
  --nmlh-warning-dark: #D97706;

  /* 信息 (Info) - 现代蓝 */
  --nmlh-info: #3B5CCC;
  --nmlh-info-light: #A5B9FF;
  --nmlh-info-dark: #2E47AA;

  /* 渐变色系统 (Gradient Colors) */
  --nmlh-gradient-primary: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%);
  --nmlh-gradient-secondary: linear-gradient(135deg, #E57373 0%, #D32F2F 100%);
  --nmlh-gradient-accent: linear-gradient(135deg, #EF5350 0%, #D32F2F 100%);
  --nmlh-gradient-gold: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);

  /* API 方法颜色 (API Method Colors) */
  --nmlh-api-get: #3FA65B;              /* GET 请求 - 成功绿 */
  --nmlh-api-post: #3B5CCC;             /* POST 请求 - 信息蓝 */
  --nmlh-api-put: #FFB547;              /* PUT 请求 - 警告黄 */
  --nmlh-api-delete: #D32F2F;           /* DELETE 请求 - 危险红 */

  /* 特殊组件颜色 (Special Component Colors) */
  --nmlh-warm-card-bg: #FAF3F0;         /* 温暖主题卡片背景 */
  --nmlh-dark-gray-text: #3B3B3B;       /* 深灰色文字 */
  --nmlh-orange-gradient: #FFA500;      /* 橙色渐变 */
  --nmlh-deep-orange: #FF8C00;          /* 深橙色 */
  --nmlh-purple-600: #8B5CF6;           /* 紫色 */
  --nmlh-gold: #D4AF37;                 /* 标准金色（向后兼容，用于强调和VIP标识） */
  --nmlh-gold-light: #F5E6C3;           /* 浅金色（向后兼容） */

  /* ========================================
     导航栏专用颜色系统 (Navigation Bar Colors)
     ======================================== */
  --nmlh-nav-bg: #D32F2F;               /* 导航栏鲜艳红色背景 */
  --nmlh-nav-text: #FFFFFF;             /* 导航栏白色文字 */
  --nmlh-nav-hover: #FFEBEE;            /* 悬停浅粉红文字 */
  --nmlh-nav-underline: #FFCDD2;        /* 下划线浅粉红 */
  --nmlh-nav-height: 64px;              /* 导航栏高度 */
  --nmlh-nav-shadow: 0 2px 6px rgba(0,0,0,0.04);  /* 轻阴影 */
  --nmlh-nav-padding: 10px 28px;        /* 导航栏内边距 */
}

/* ========================================
   10. RGB 三元组系统 (RGB Triplet System)
   用于 rgba() 函数中需要透明度的场景
   ======================================== */

:root {
  /* 基础颜色 RGB 值 */
  --rgb-white: 255, 255, 255;
  --rgb-black: 0, 0, 0;

  /* 灰度 RGB 值 */
  --rgb-gray-50: 248, 250, 252;
  --rgb-gray-100: 241, 245, 249;
  --rgb-gray-200: 226, 232, 240;
  --rgb-gray-300: 203, 213, 225;
  --rgb-gray-400: 148, 163, 184;
  --rgb-gray-500: 100, 116, 139;
  --rgb-gray-600: 71, 85, 105;
  --rgb-gray-700: 51, 65, 85;
  --rgb-gray-800: 30, 41, 59;
  --rgb-gray-900: 42, 42, 42;  /* 专业暖中性灰（#2A2A2A），完全消除蓝色偏向 */

  /* 蓝色 RGB 值 */

  /* 橙色 RGB 值 */
  --rgb-orange-500: 245, 158, 11;      /* #F59E0B */
  --rgb-orange-600: 234, 88, 12;       /* #EA580C */
  --rgb-orange-400: 251, 146, 60;      /* #FB923C */
  --rgb-orange-600-alt: 255, 165, 0;   /* #FFA500 */
  --rgb-orange-700: 220, 38, 38;       /* #DC3545 */
  --rgb-orange-800: 255, 140, 0;       /* #FF8C00 */

  /* 紫色 RGB 值 */
  --rgb-purple-600: 111, 66, 193;      /* #6f42c1 */

  /* Bootstrap 风格颜色 RGB 值 */
  --rgb-bootstrap-success: 40, 167, 69;     /* #28a745 */
  --rgb-bootstrap-info: 0, 123, 255;        /* #007bff */
  --rgb-bootstrap-warning: 255, 193, 7;     /* #ffc107 */
  --rgb-bootstrap-danger: 220, 53, 69;      /* #dc3545 */

  /* 特殊组件颜色 RGB 值 */
  --rgb-warm-bg-light: 249, 246, 240;       /* #F9F6F0 */
  --rgb-dark-gray-text: 59, 59, 59;         /* #3B3B3B */

  /* 导航栏专用 RGB 值 */
  --rgb-nav-bg: 211, 47, 47;       /* #D32F2F - 导航栏背景 */
  --rgb-nav-hover: 255, 235, 238;  /* #FFEBEE - 悬停文字颜色 */
  --rgb-nav-underline: 255, 205, 210; /* #FFCDD2 - 下划线颜色 */

  /* 红色 RGB 值 */
  --rgb-red-400: 248, 113, 113;        /* #F87171 */
  --rgb-red-500: 239, 68, 68;          /* #EF4444 */
  --rgb-red-600: 220, 38, 38;          /* #DC2626 */
  --rgb-red-700: 185, 28, 28;          /* #B91C1C */
  --rgb-red-800: 153, 27, 27;          /* #991B1B */
  --rgb-red-900: 127, 29, 29;          /* #7F1D1D */
  --rgb-primary: 211, 47, 47;          /* #D32F2F - 主色调 */
  --rgb-secondary: 229, 115, 115;      /* #E57373 - 次色调 */

  /* 量子离火主题专用 RGB 值 */
  --rgb-quantum-bg: 239, 241, 245;       /* hsl(220, 33%, 95%) */
  --rgb-quantum-red-dark: 201, 29, 29;   /* hsl(0, 75%, 45%) */
  --rgb-quantum-red: 223, 36, 36;        /* hsl(0, 75%, 55%) */
  --rgb-quantum-red-mid: 223, 32, 32;    /* hsl(0, 75%, 50%) */
  --rgb-quantum-red-light: 234, 60, 60;  /* hsl(0, 75%, 60%) */
  --rgb-quantum-gray-dark: 15, 18, 26;   /* hsl(210, 28%, 8%) */
  --rgb-quantum-gray-mid: 28, 34, 49;    /* hsl(210, 28%, 15%) */
  --rgb-quantum-gray: 64, 77, 105;       /* hsl(210, 28%, 35%) */

  /* 应用名称专用 RGB 值 */
  --rgb-app-name-brown: 139, 69, 19;     /* #8B4513 - 深棕色 */
  --rgb-app-name-brown-hover: 101, 67, 33; /* #654321 - 悬停棕色 */

  /* 表格边框专用 RGB 值 */
  --rgb-table-border: 233, 236, 239;     /* #E9ECF - 表格边框色 */

  /* 特殊背景色 RGB 值 */
  --rgb-warm-bg: 251, 248, 240;          /* #FBF8F0 - 温暖白色背景 */
  --rgb-warm-light: 254, 252, 243;       /* #FEFCF3 - 温暖浅色背景 */
  --rgb-teal-light: 34, 211, 238;        /* #22D3EE - 亮青色 */
}

/* ========================================
   11. 文字颜色系统 (Text Color System)
   ======================================== */

:root {
  /* 浅色背景用的深色文字 (Dark text for light backgrounds) */
  --nmlh-text-on-light-primary: #1E293B;      /* 深蓝灰主文字（对比度14.8:1 on white） */
  --nmlh-text-on-light-secondary: #475569;    /* 中蓝灰次文字（对比度8.6:1 on white） */
  --nmlh-text-on-light-muted: #64748B;        /* 浅蓝灰弱化文字（对比度7.2:1 on white） */
  --nmlh-text-on-light-disabled: #94A3B8;     /* 禁用文字（对比度4.6:1 on white） */

  /* 深色背景用的浅色文字 (Light text for dark backgrounds) */
  --nmlh-text-on-dark-primary: #FFFFFF;       /* 纯白主文字（对比度16.5:1 on #0A192F） */
  --nmlh-text-on-dark-secondary: #E2E8F0;     /* 浅灰次文字（对比度12.8:1 on #0A192F） */
  --nmlh-text-on-dark-muted: #CBD5E1;         /* 浅蓝灰弱化文字（对比度9.2:1 on #0A192F） */
  --nmlh-text-on-dark-disabled: #94A3B8;      /* 禁用文字（对比度6.5:1 on #0A192F） */

  /* 通用文字颜色（兼容旧代码） */
  --nmlh-text-primary: #1E293B;               /* 默认主文字 = text-on-light-primary */
  --nmlh-text-secondary: #475569;             /* 默认次文字 = text-on-light-secondary */
  --nmlh-text-muted: #64748B;                 /* 默认弱化文字 = text-on-light-muted */
  --nmlh-text-disabled: #94A3B8;              /* 默认禁用文字 */

  /* 特殊背景用的文字颜色 */
  --nmlh-text-on-primary: #FFFFFF;            /* 主色调背景上的文字（白色） */
  --nmlh-text-on-secondary: #FFFFFF;          /* 次色调背景上的文字（白色） */
  --nmlh-text-on-success: #FFFFFF;            /* 成功色背景上的文字（白色） */
  --nmlh-text-on-danger: #FFFFFF;             /* 危险色背景上的文字（白色） */
  --nmlh-text-on-warning: #FFFFFF;            /* 警告色背景上的文字（白色） */
  --nmlh-text-on-info: #FFFFFF;               /* 信息色背景上的文字（白色） */

  /* 背景色系统（配合文字颜色使用） */
  --nmlh-bg-light: #FFFFFF;                   /* 浅色背景（用于卡片、模态框等） */
  --nmlh-bg-light-secondary: #F8F9FA;         /* 次级浅色背景（用于页面背景） */
  --nmlh-bg-light-tertiary: #F1F5F9;          /* 第三级浅色背景（用于禁用状态） */

  --nmlh-bg-dark: var(--nmlh-gray-900);        /* 深色背景（深蓝灰） */
  --nmlh-bg-dark-secondary: var(--nmlh-gray-600);   /* 次级深色背景（中灰） */
  --nmlh-bg-dark-tertiary: #334155;             /* 第三级深色背景（中性灰） */

  /* 背景色系统 - 主题无关 */
  --nmlh-bg-primary: var(--nmlh-gray-900);      /* 深色基调（使用中性灰）*/
  --nmlh-bg-secondary: rgba(15, 23, 42, 0.95);  /* 深色基调半透明（使用gray-900的RGB） */
  --nmlh-bg-tertiary: var(--nmlh-gray-800);     /* 深色基调变体 */
}

/* ========================================
   11. 边框系统 (Border System)
   ======================================== */

:root {
  /* 边框宽度 */
  --nmlh-border-width-thin: 1px;
  --nmlh-border-width-normal: 2px;
  --nmlh-border-width-thick: 4px;

  /* 边框样式 */
  --nmlh-border-style-solid: solid;
  --nmlh-border-style-dashed: dashed;
  --nmlh-border-style-dotted: dotted;
}

/* ========================================
   12. 不透明度系统 (Opacity System)
   ======================================== */

:root {
  --nmlh-opacity-0: 0;
  --nmlh-opacity-10: 0.1;
  --nmlh-opacity-20: 0.2;
  --nmlh-opacity-30: 0.3;
  --nmlh-opacity-40: 0.4;
  --nmlh-opacity-50: 0.5;
  --nmlh-opacity-60: 0.6;
  --nmlh-opacity-70: 0.7;
  --nmlh-opacity-80: 0.8;
  --nmlh-opacity-90: 0.9;
  --nmlh-opacity-100: 1;
}

/* ========================================
   13. 模糊效果系统 (Backdrop Filter)
   ======================================== */

:root {
  --nmlh-blur-sm: blur(4px);
  --nmlh-blur-md: blur(8px);
  --nmlh-blur-lg: blur(16px);
  --nmlh-blur-xl: blur(24px);
}

/* ========================================
   14. 容器尺寸系统 (Container System)
   ======================================== */

:root {
  --nmlh-container-sm: 640px;
  --nmlh-container-md: 768px;
  --nmlh-container-lg: 1024px;
  --nmlh-container-xl: 1280px;
  --nmlh-container-2xl: 1536px;
}

/* ========================================
   15. 图标尺寸系统 (Icon Size System)
   ======================================== */

:root {
  --nmlh-icon-xs: 12px;
  --nmlh-icon-sm: 16px;
  --nmlh-icon-md: 20px;
  --nmlh-icon-lg: 24px;
  --nmlh-icon-xl: 32px;
  --nmlh-icon-2xl: 48px;
}

/* ========================================
   16. 按钮尺寸系统 (Button Size System)
   ======================================== */

:root {
  /* 按钮高度 */
  --nmlh-button-height-sm: 32px;
  --nmlh-button-height-md: 40px;
  --nmlh-button-height-lg: 48px;

  /* 按钮内边距 */
  --nmlh-button-padding-sm: var(--nmlh-spacing-sm) var(--nmlh-spacing-md);
  --nmlh-button-padding-md: var(--nmlh-spacing-sm) var(--nmlh-spacing-lg);
  --nmlh-button-padding-lg: var(--nmlh-spacing-md) var(--nmlh-spacing-xl);
}

/* ========================================
   12. 文件类型颜色系统 (File Type Colors)
   ======================================== */

:root {
  /* 编程语言文件 (Programming Languages) */
  --nmlh-file-java: #f89820;          /* Java文件 - 橙色 */
  --nmlh-file-kotlin: #7F52FF;        /* Kotlin文件 - 紫色 */
  --nmlh-file-js: #F7DF1E;            /* JavaScript文件 - 黄色 */
  --nmlh-file-python: #3776ab;        /* Python文件 - 蓝色 */
  --nmlh-file-cpp: #00599C;           /* C++文件 - 深蓝 */
  --nmlh-file-c: #A8B9CC;             /* C文件 - 浅蓝灰 */

  /* 配置和数据文件 (Configuration and Data Files) */
  --nmlh-file-xml: #e34c26;           /* XML文件 - 橙红色 */
  --nmlh-file-json: #cbcb41;          /* JSON文件 - 黄绿色 */
  --nmlh-file-yaml: #CB171E;          /* YAML文件 - 红色 */
  --nmlh-file-properties: #6DB33F;    /* Properties文件 - 绿色 */

  /* 图片文件 (Image Files) */
  --nmlh-file-image: #4caf50;         /* 通用图片 - 绿色 */
  --nmlh-file-gif: #FF6B6B;           /* GIF文件 - 粉红色 */
  --nmlh-file-svg: #FFB13B;           /* SVG文件 - 橙黄色 */
  --nmlh-file-webp: #4285F4;          /* WebP文件 - 蓝色 */

  /* 库文件和可执行文件 (Library and Executable Files) */
  --nmlh-file-so: #9c27b0;            /* SO文件 - 紫色 */
  --nmlh-file-jar: #ED8B00;           /* JAR文件 - 橙色 */
  --nmlh-file-aar: #3DDC84;           /* AAR文件 - Android绿 */
  --nmlh-file-apk: #3DDC84;           /* APK文件 - Android绿 */

  /* 文档和文本文件 (Document and Text Files) */
  --nmlh-file-markdown: #083fa1;      /* Markdown文件 - 深蓝 */
  --nmlh-file-text: #666666;          /* 文本文件 - 灰色 */
  --nmlh-file-pdf: #FF0000;           /* PDF文件 - 红色 */

  /* 压缩文件 (Archive Files) */
  --nmlh-file-archive: #B7950B;       /* 压缩文件 - 金棕色 */

  /* 特殊Android文件 (Special Android Files) */
  --nmlh-file-manifest: #2ea664;      /* AndroidManifest.xml - 绿色 */
  --nmlh-file-dex: #FF6B35;           /* DEX文件 - 橙色 */
  --nmlh-file-arsc: #2196F3;          /* ARSC文件 - 蓝色 */

  /* 文件夹 (Folders) */
  --nmlh-folder-color: #FFD700;       /* 文件夹图标 - 金色 */
}

/* ========================================
   17. 应用名称颜色系统 (App Name Colors)
   ======================================== */

:root {
  /* 应用名称专用颜色 */
  --nmlh-app-name-brown: #8B4513;     /* 深棕色应用名称 */
  --nmlh-app-name-brown-hover: #654321; /* 悬停深棕色 */
}

/* ========================================
   18. 主题特殊颜色系统 (Theme Special Colors)
   ======================================== */

:root {
  /* 表格边框色 */
  --nmlh-table-border: rgba(233, 236, 239, 0.6);  /* 表格边框颜色 */

  /* 温暖主题背景色 */
  --nmlh-warm-bg: #FBF8F0;            /* 温暖白色背景 */
  --nmlh-warm-light: #FEFCF3;         /* 温暖浅色背景 */

  /* 青华主题背景色 */

  /* 特殊米色和金色系 */
  --nmlh-beige-light: #F5F5DC;        /* 米白色 */
  --nmlh-beige-lemon: #FFFACD;         /* 柠檬色 */

  /* 特殊文字颜色 */
  --nmlh-text-beige: #F5F5DC;         /* 米白色文字 */
  --nmlh-text-warm: #FEFCE8;          /* 温暖白色文字 */
}

/* ========================================
   13. 状态颜色扩展 (Extended Status Colors)
   ======================================== */

:root {
  /* 表格状态颜色 (Table Status Colors) */
  --nmlh-status-danger-text: #c53030;      /* 危险状态文字 */
  --nmlh-status-warning-text: #c05621;     /* 警告状态文字 */
  --nmlh-status-success-text: #2c7a51;     /* 成功状态文字 */
  --nmlh-status-info-text: #2a6baf;        /* 信息状态文字 */

  /* 权限徽章渐变 (Permission Badge Gradients) */
  --nmlh-permission-dangerous-from: #f56565;    /* 危险权限起始色 */
  --nmlh-permission-dangerous-to: #e53e3e;      /* 危险权限结束色 */
  --nmlh-permission-normal-from: #4299e1;       /* 普通权限起始色 */
  --nmlh-permission-normal-to: #3182ce;         /* 普通权限结束色 */
  --nmlh-permission-system-from: #a0aec0;       /* 系统权限起始色 */
  --nmlh-permission-system-to: #718096;         /* 系统权限结束色 */
  --nmlh-permission-signature-from: #48bb78;    /* 签名权限起始色 */
  --nmlh-permission-signature-to: #38a169;      /* 签名权限结束色 */
  --nmlh-permission-unknown-from: #ed8936;      /* 未知权限起始色 */
  --nmlh-permission-unknown-to: #dd6b20;        /* 未知权限结束色 */

  /* 代码高亮背景 (Code Highlight Background) */
  --nmlh-code-bg: rgba(230, 240, 255, 0.5);     /* 代码块浅蓝背景 */
  --nmlh-code-text: #2a6baf;                    /* 代码文字蓝色 */

  /* 交互状态颜色 (Interactive State Colors) */
  --nmlh-hover-bg: rgba(66, 153, 225, 0.08);    /* 悬浮背景色 */
  --nmlh-hover-border: rgba(66, 153, 225, 0.2); /* 悬浮边框色 */
  --nmlh-hover-text: #1a365d;                   /* 悬浮文字色 */

  /* 文件树边框颜色 (File Tree Border Colors) */
  --nmlh-filetree-border: rgba(66, 153, 225, 0.4);  /* 文件树虚线边框 */
}

/* ========================================
   使用说明 (Usage Notes)
   ======================================== */

/*
 * 1. 这些token应该被所有组件和页面样式引用
 * 2. 不要在组件中硬编码颜色、间距等值
 * 3. 主题特定的颜色应该在主题文件中定义（如 red_theme_components.css）
 * 5. 所有新增的设计token必须添加注释说明用途
 * 6. 文件类型颜色应与实际文件类型相对应，提升用户识别度
 * 7. 状态颜色必须确保符合WCAG 2.0对比度标准
 */