/**
 * 联创圈 - Design Tokens (设计令牌)
 * 版本: 3.0.0 | 2026-09-12 | 2026-09-11
 * =========================================
 * 这是整个设计系统的唯一真源 (Single Source of Truth)。
 * 所有新页面必须引用此文件，禁止使用硬编码颜色/字号/间距值。
 *
 * Token 规范:
 *   8 种语义色  | 6 种语义字号 | 4 种间距
 *   4 种圆角    | 4 种阴影     | 5 种层级
 *   3 种过渡    | 4 种字重     | 5 种行高
 *   3 种字间距
 *
 * 使用方式:
 *   color: var(--ds-primary-500);
 *   font-size: var(--ds-text-base);
 *   font-weight: var(--ds-font-semibold);
 *   line-height: var(--ds-line-height-normal);
 *   padding: var(--ds-space-md);
 *   background: var(--ds-success-50);
 *
 * 引入方式 (在 components.css 之前加载):
 *   <link rel="stylesheet" href="/static/css/design-tokens.css?v=20260911b">
 * ========================================= */

:root {
    /* ============================================================
     * 1. 语义色彩系统 (8 种语义色, 每种 5 个层级)
     *    规则: 仅允许使用以下变量, 禁止硬编码 hex 值
     *    层级: -50(浅底) / -100(浅色) / -500(基准) / -600(hover) / -700(active)
     * ============================================================ */

        /* Primary - 主色 (蓝) */
    --ds-primary-50:  #eff6ff;
    --ds-primary-100: #dbeafe;
    --ds-primary-200: #bfdbfe;
    --ds-primary-300: #93c5fd;
    --ds-primary-400: #60a5fa;
    --ds-primary-500: #3b82f6;
    --ds-primary-600: #2563eb;
    --ds-primary-700: #1d4ed8;
    --ds-primary-900: #1e3a8a;

    /* Success - 成功 (绿) */
    --ds-success-50:  #f0fdf4;
    --ds-success-100: #dcfce7;
    --ds-success-200: #a7f3d0;
    --ds-success-300: #6ee7b7;
    --ds-success-400: #34d399;
    --ds-success-500: #10b981;
    --ds-success-600: #059669;
    --ds-success-700: #047857;

    /* Warning - 警告 (琥珀) */
    --ds-warning-50:  #fffbeb;
    --ds-warning-100: #fef3c7;
    --ds-warning-200: #fde68a;
    --ds-warning-300: #fcd34d;
    --ds-warning-400: #fbbf24;
    --ds-warning-500: #f59e0b;
    --ds-warning-600: #d97706;
    --ds-warning-700: #b45309;
    --ds-warning-800: #92400e;

    /* Danger - 危险 (红) */
    --ds-danger-50:  #fef2f2;
    --ds-danger-100: #fee2e2;
    --ds-danger-200: #fecaca;
    --ds-danger-300: #fca5a5;
    --ds-danger-400: #f87171;
    --ds-danger-500: #ef4444;
    --ds-danger-600: #dc2626;
    --ds-danger-700: #b91c1c;
    --ds-danger-800: #991b1b;
    --ds-danger-900: #7f1d1d;

    /* Info - 信息 (青) */
    --ds-info-50:  #ecfeff;
    --ds-info-100: #cffafe;
    --ds-info-200: #a5f3fc;
    --ds-info-400: #22d3ee;
    --ds-info-500: #06b6d4;
    --ds-info-600: #0891b2;
    --ds-info-700: #0e7490;

    /* Accent - 强调 (紫) */
    --ds-accent-50:  #f5f3ff;
    --ds-accent-100: #ede9fe;
    --ds-accent-200: #ddd6fe;
    --ds-accent-300: #c4b5fd;
    --ds-accent-400: #a78bfa;
    --ds-accent-500: #8b5cf6;
    --ds-accent-600: #7c3aed;
    --ds-accent-700: #6d28d9;

    /* Highlight - 高亮 (粉) */
    --ds-highlight-50:  #fdf2f8;
    --ds-highlight-100: #fce7f3;
    --ds-highlight-200: #fbcfe8;
    --ds-highlight-400: #f472b6;
    --ds-highlight-500: #ec4899;
    --ds-highlight-600: #db2777;
    --ds-highlight-700: #be185d;

    /* Neutral - 中性 (灰, 12 个层级) */
    --ds-neutral-0:   #ffffff;
    --ds-neutral-50:  #f8fafc;
    --ds-neutral-100: #f1f5f9;
    --ds-neutral-150: #f8fafc;
    --ds-neutral-200: #e2e8f0;
    --ds-neutral-300: #cbd5e1;
    --ds-neutral-400: #94a3b8;
    --ds-neutral-500: #64748b;
    --ds-neutral-600: #475569;
    --ds-neutral-700: #334155;
    --ds-neutral-800: #1e293b;
    --ds-neutral-900: #0f172a;

    /* 语义化文字颜色 */
    --ds-text-primary:   var(--ds-neutral-700);
    --ds-text-secondary: var(--ds-neutral-500);
    --ds-text-3:         #94a3b8;
    --ds-text-muted:     var(--ds-neutral-400);
    --ds-text-contrast:  var(--ds-neutral-600);
    --ds-text-inverse:   #ffffff;
    --ds-text-disabled:  var(--ds-neutral-400);
    /* Link color */
    --ds-text-link: var(--ds-primary-500);
    --ds-text-link-hover: var(--ds-primary-600);
    --ds-text-link-active: var(--ds-primary-700);

    /* Legacy aliases */
    --ds-purple-100: var(--ds-accent-100);
    --ds-purple-700: var(--ds-accent-700);

    /* Spacing - additional */
    --ds-space-2: 0.125rem;


     * 2. 字号体系 Typography Scale
     * ============================================================
     * 6 级语义化字号，禁止在业务代码中使用硬编码 px 字号。
     *
     * display (36px) - 英雄区大标题、落地页主标题、重磅数字
     * title   (24px) - 页面标题、卡片大标题、弹窗标题
     * heading (18px) - 区块标题、卡片副标题、列表项标题
     * base    (15px) - 正文、按钮文字、表格内容、表单输入
     * sm      (13px) - 辅助文字、标签、说明文字、时间戳
     * xs      (12px) - 版权信息、角标、最小可读文字
     *
     * 使用方式：
     *   推荐：在自定义样式中使用 var(--ds-text-base)
     *   快速：添加工具类 class="ds-text-base"
     *
     * 反模式：
     *   禁止直接写 font-size: 14px / 16px 等硬编码值
     *   禁止在组件内随意新增不在此规范内的字号
     *   禁止使用 --ds-text-lg / --ds-text-xl 等旧命名（已废弃）
     *
     * 新增字号审批流程：
     *   1. 先确认现有 6 级字号是否真的无法满足需求
     *   2. 评估是否可以通过字重/颜色/间距来替代字号变化
     *   3. 提交设计评审，说明使用场景和理由
     *   4. 评审通过后，在此文件中新增变量并同步更新工具类
     * ============================================================ */

    /* ---- 语义字号 (6 级) ---- */
    --ds-text-display: 36px;   /* 大标题/英雄区/重磅数字 */
    --ds-text-title:   24px;   /* 页面标题/卡片大标题/弹窗标题 */
    --ds-text-heading: 18px;   /* 区块标题/卡片副标题/列表项标题 */
    --ds-text-base:    15px;   /* 正文/基础文字/按钮/表格/表单 */
    --ds-text-sm:      13px;   /* 辅助文字/标签/说明文字/时间戳 */
    --ds-text-xs:      12px;   /* 最小可读文字/版权信息/角标 */

    /* ---- 字重 (4 级) ---- */
    --ds-font-regular:  400;  /* 常规正文 */
    --ds-font-medium:   500;  /* 中等强调 - 按钮、标签 */
    --ds-font-semibold: 600;  /* 半粗体 - 小标题、表头 */
    --ds-font-bold:     700;  /* 粗体 - 标题、重要数字 */

    /* ---- 行高 (5 级) ---- */
    --ds-line-height-tight:   1.2;   /* 紧凑 - 大标题、数字 */
    --ds-line-height-snug:    1.35;  /* 较紧凑 - 页面标题 */
    --ds-line-height-normal:  1.55;  /* 标准 - 正文（默认） */
    --ds-line-height-relaxed: 1.75;  /* 宽松 - 长文阅读 */
    --ds-line-height-loose:   2;     /* 最宽松 - 诗词/引言 */

    /* ---- 字间距 (3 级) ---- */
    --ds-letter-spacing-tight:  -0.02em;  /* 紧凑 - 大标题 */
    --ds-letter-spacing-normal: 0;        /* 标准 - 正文（默认） */
    --ds-letter-spacing-wide:   0.05em;   /* 宽松 - 标签、全大写文字 */

    /* ---- 字体族 ---- */
    --ds-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                       'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    --ds-font-mono: 'SF Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;

    /* ---- 旧变量兼容映射 (已废弃, 保留原值确保平滑迁移) ----
     * 注意：旧变量保持原有像素值，不会自动映射到新语义字号
     * 迁移方式：将 --ds-text-lg 替换为 --ds-text-heading
     *          将 --ds-text-xl 替换为 --ds-text-title
     *          将 --ds-text-2xl 替换为 --ds-text-display */
    --ds-text-lg:   16px;  /* [已废弃] 旧: 16px → 新语义: heading (18px) */
    --ds-text-xl:   20px;  /* [已废弃] 旧: 20px → 新语义: title (24px) */
    --ds-text-2xl:  28px;  /* [已废弃] 旧: 28px → 新语义: display (36px) */
    --ds-font-normal: 400; /* [已废弃] 旧命名 normal → 新命名: regular */
    --ds-leading-tight:   1.25; /* [已废弃] 旧: 1.25 → 新: --ds-line-height-tight (1.2) */
    --ds-leading-normal:  1.5;  /* [已废弃] 旧: 1.5  → 新: --ds-line-height-normal (1.55) */
    --ds-leading-relaxed: 1.75; /* [已废弃] 与新值一致 */

    /* ============================================================
     * 3. 间距系统 (4 种间距, 基于 4px 基准, 禁止使用其他值)
     * ============================================================ */
    --ds-space-xs: 4px;    /* 微间距: 图标与文字间距 */
    --ds-space-sm: 8px;    /* 小间距: 元素内部间距 */
    --ds-space-md: 16px;   /* 中间距: 卡片内边距、列表间距 */
    --ds-space-lg: 24px;   /* 大间距: 区块间距、页面内边距 */

    /* ============================================================
     * 4. 圆角系统 (4 种圆角)
     * ============================================================ */
    --ds-radius-sm: 4px;    /* 标签、徽章 */
    --ds-radius-md: 8px;    /* 按钮、输入框、小卡片 */
    --ds-radius-lg: 12px;   /* 卡片、弹窗 */
    --ds-radius-full: 9999px; /* 胶囊、圆形头像 */

    /* ============================================================
     * 5. 阴影系统 (4 种阴影)
     * ============================================================ */
    --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
    --ds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.14);

    /* ============================================================
     * 6. Z-index 层级系统 (5 种层级)
     * ============================================================ */
    --ds-z-base:    1;     /* 基础内容 */
    --ds-z-dropdown: 100;  /* 下拉菜单 */
    --ds-z-sticky:  200;   /* 吸顶导航 */
    --ds-z-overlay: 1000;  /* 遮罩层 */
    --ds-z-modal:   1100;  /* 弹窗 */
    --ds-z-toast:   1200;  /* 提示通知 */

    /* ============================================================
     * 7. 过渡动画系统 (3 种速度)
     * ============================================================ */
    --ds-transition-fast: all 0.15s ease;
    --ds-transition:      all 0.25s ease;
    --ds-transition-slow: all 0.4s ease;

    /* ============================================================
     * 8. 响应式断点 (仅供参考, 实际在 @media 中硬编码)
     * ============================================================ */
    --ds-bp-mobile:  768px;
    --ds-bp-tablet:  1024px;
    --ds-bp-desktop: 1280px;

    /* ============================================================
     * 9. 兼容映射 (旧变量 → 新 Token, 确保平滑迁移)
     *    旧代码引用 --lc-* 变量时自动指向新 Token
     * ============================================================ */
    --lc-primary:           var(--ds-primary-500);
    --lc-primary-light:     var(--ds-primary-50);
    --lc-primary-lighter:  var(--ds-primary-100);
    --lc-primary-dark:     var(--ds-primary-600);
    --lc-primary-darker:   var(--ds-primary-700);

    --lc-purple:      var(--ds-accent-500);
    --lc-purple-light: var(--ds-accent-50);
    --lc-amber:       var(--ds-warning-500);
    --lc-amber-light:  var(--ds-warning-50);
    --lc-green:       var(--ds-success-500);
    --lc-green-light:  var(--ds-success-50);
    --lc-pink:        var(--ds-highlight-500);
    --lc-pink-light:   var(--ds-highlight-50);
    --lc-cyan:        var(--ds-info-500);
    --lc-red:         var(--ds-danger-500);
    --lc-red-light:    var(--ds-danger-50);

    --lc-text-primary:   var(--ds-neutral-700);
    --lc-text-secondary: var(--ds-neutral-500);
    --lc-text-muted:     var(--ds-text-muted);
    --lc-bg-page:   var(--ds-neutral-50);
    --lc-bg-card:   #ffffff;
    --lc-bg-hover:  var(--ds-neutral-100);
    --lc-border:       var(--ds-neutral-200);
    --lc-border-light: var(--ds-neutral-100);

    --lc-shadow-xs: var(--ds-shadow-xs);
    --lc-shadow-sm: var(--ds-shadow-sm);
    --lc-shadow-md: var(--ds-shadow-md);
    --lc-shadow-lg: var(--ds-shadow-lg);
    --lc-shadow-xl: var(--ds-shadow-lg);

    --lc-radius-xs:    var(--ds-radius-sm);
    --lc-radius-sm:    var(--ds-radius-sm);
    --lc-radius-md:    var(--ds-radius-md);
    --lc-radius-lg:    var(--ds-radius-lg);
    --lc-radius-xl:    var(--ds-radius-lg);
    --lc-radius-full:  var(--ds-radius-full);

    --lc-space-xs:  var(--ds-space-xs);
    --lc-space-sm:  var(--ds-space-sm);
    --lc-space-md:  var(--ds-space-md);
    --lc-space-lg:  var(--ds-space-lg);
    --lc-space-xl:  var(--ds-space-lg);
    --lc-space-2xl: var(--ds-space-lg);

    --lc-font-family: var(--ds-font-family);
    --lc-font-mono:   var(--ds-font-mono);

    --lc-text-xs:   var(--ds-text-xs);
    --lc-text-sm:   var(--ds-text-sm);
    --lc-text-base: var(--ds-text-base);
    --lc-text-md:   var(--ds-text-lg);
    --lc-text-lg:   var(--ds-text-xl);
    --lc-text-xl:   var(--ds-text-xl);
    --lc-text-2xl:  var(--ds-text-2xl);
    --lc-text-3xl:  var(--ds-text-2xl);

    --lc-font-normal:   var(--ds-font-normal);
    --lc-font-medium:   var(--ds-font-medium);
    --lc-font-semibold: var(--ds-font-semibold);
    --lc-font-bold:     var(--ds-font-bold);
    --lc-font-extrabold: var(--ds-font-bold);

    --lc-leading-tight:   var(--ds-leading-tight);
    --lc-leading-normal:  var(--ds-leading-normal);
    --lc-leading-relaxed: var(--ds-leading-relaxed);
    --lc-leading-loose:   var(--ds-leading-relaxed);

    --lc-bp-mobile:  var(--ds-bp-mobile);
    --lc-bp-tablet:  var(--ds-bp-tablet);
    --lc-bp-desktop: var(--ds-bp-desktop);

    --lc-transition-fast: var(--ds-transition-fast);
    --lc-transition:      var(--ds-transition);
    --lc-transition-slow: var(--ds-transition-slow);

    --lc-z-dropdown: var(--ds-z-dropdown);
    --lc-z-sticky:  var(--ds-z-sticky);
    --lc-z-overlay:  var(--ds-z-overlay);
    --lc-z-modal:   var(--ds-z-modal);
    --lc-z-toast:   var(--ds-z-toast);

    /* 旧项目变量映射 */
    --primary-color: var(--ds-primary-500);
    --primary-dark:  var(--ds-primary-600);
    --primary-light: var(--ds-primary-50);
    --color-primary:      var(--ds-primary-500);
    --color-primary-dark: var(--ds-primary-600);
    --m-primary:      var(--ds-primary-500);
    --m-primary-light: var(--ds-primary-50);
    --am-primary:     var(--ds-primary-500);


    /* === Phase 6 Fix: Additional variable aliases (2026-09-12) === */

    /* Additional radius levels */
    --ds-radius-xs: 2px;
    --ds-radius-xl: 16px;
    --ds-radius-pill: var(--ds-radius-full);

    /* Additional spacing */
    --ds-space-xl: 32px;
    --ds-space-2xl: 48px;

    /* Additional shadow */
    --ds-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.20);

    /* Additional text aliases */
    --ds-text-md: var(--ds-text-base);
    --ds-text-3xl: 32px;
    --ds-text-tertiary: var(--ds-text-3);

    /* Background/border shortcuts */
    --ds-bg-card: var(--ds-neutral-0);
    --ds-bg-hover: var(--ds-neutral-100);
    --ds-bg-active: var(--ds-neutral-200);
    --ds-bg-page: var(--ds-neutral-50);
    --ds-border: var(--ds-neutral-200);
    --ds-border-light: var(--ds-neutral-100);
    --ds-border-hover: var(--ds-neutral-300);
    --ds-border-focus: var(--ds-primary-500);

    /* Leading aliases */
    --ds-leading-loose: var(--ds-line-height-loose);
    --ds-leading-snug: var(--ds-line-height-snug);
    --ds-leading-tight: var(--ds-line-height-tight);
    --ds-leading-normal: var(--ds-line-height-normal);
    --ds-leading-relaxed: var(--ds-line-height-relaxed);

}

/* ============================================================
 * 10. 主题系统 (Theme System)
 *    通过 [data-theme] 属性切换，覆盖 :root 中的变量
 *    支持: light(默认亮色) / dark(暗色) / auto(跟随系统)
 *    所有颜色/背景/边框/阴影变量自动切换，组件无需修改
 * ============================================================ */

/* ---- 暗色主题 ---- */
[data-theme="dark"] {
    /* 语义色保持不变（强调色在暗色下同样适用） */

    /* 中性色反转：暗色背景 → 浅色文字 */
    --ds-neutral-50: #0f172a;   /* 页面背景（暗） */
    --ds-neutral-100: #1e293b;   /* 卡片内底/hover（暗） */
    --ds-neutral-200: #334155;   /* 边框（暗） */
    --ds-neutral-300: #475569;   /* 浅边框/占位（暗） */
    --ds-neutral-400: #64748b;   /* 禁用文字/辅助边框（暗） */
    --ds-neutral-500: #94a3b8;   /* 次要文字 (AA: 6.96:1) */
    --ds-neutral-600: #cbd5e1;   /* 高对比度次要文字 (AAA) */
    --ds-neutral-700: #e2e8f0;   /* 主要文字 (AAA: 14.48:1) */
    --ds-neutral-900: #f8fafc;   /* 标题文字（暗色下最亮） */

    /* 语义化文字颜色 (暗色主题) */
    --ds-text-primary:   var(--ds-neutral-700);
    --ds-text-secondary: var(--ds-neutral-500);
    --ds-text-muted:     var(--ds-neutral-400);
    --ds-text-contrast:  var(--ds-neutral-600);
    --ds-text-inverse:   var(--ds-neutral-900);
    --ds-text-disabled:  var(--ds-neutral-400);
    /* Link color */
    --ds-text-link: var(--ds-primary-500);
    --ds-text-link-hover: var(--ds-primary-600);
    --ds-text-link-active: var(--ds-primary-700);

    /* 语义色微调：暗色下浅底色加深、文字色提亮 */
    --ds-primary-50:  #1e3a5f;
    --ds-primary-100: var(--ds-primary-700);
    --ds-primary-500: #60a5fa;
    --ds-primary-600: var(--ds-primary-500);
    --ds-primary-700: var(--ds-primary-600);

    --ds-success-50:  #064e3b;
    --ds-success-100: #065f46;
    --ds-success-500: #34d399;
    --ds-success-600: var(--ds-success-500);
    --ds-success-700: var(--ds-success-600);

    --ds-warning-50:  #78350f;
    --ds-warning-100: var(--ds-warning-700);
    --ds-warning-500: #fbbf24;
    --ds-warning-600: var(--ds-warning-500);
    --ds-warning-700: var(--ds-warning-600);

    --ds-danger-50:  #7f1d1d;
    --ds-danger-100: #991b1b;
    --ds-danger-500: #f87171;
    --ds-danger-600: var(--ds-danger-500);
    --ds-danger-700: var(--ds-danger-600);

    --ds-info-50:  #164e63;
    --ds-info-100: #155e75;
    --ds-info-500: #22d3ee;
    --ds-info-600: #06b6d4;
    --ds-info-700: #0891b2;

    --ds-accent-50:  #4c1d95;
    --ds-accent-100: #5b21b6;
    --ds-accent-500: #a78bfa;
    --ds-accent-600: var(--ds-accent-500);
    --ds-accent-700: var(--ds-accent-600);

    --ds-highlight-50:  #831843;
    --ds-highlight-100: #9d174d;
    --ds-highlight-500: #f472b6;
    --ds-highlight-600: var(--ds-highlight-500);
    --ds-highlight-700: var(--ds-highlight-600);

    /* 阴影：暗色下阴影更深 */
    --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --ds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);

    /* 兼容映射同步更新 */
    --lc-text-primary:   var(--ds-neutral-700);
    --lc-text-secondary: var(--ds-neutral-500);
    --lc-text-muted:     var(--ds-text-muted);
    --lc-bg-page:   var(--ds-neutral-50);
    --lc-bg-card:   var(--ds-neutral-100);
    --lc-bg-hover:  var(--ds-neutral-200);
    --lc-border:       var(--ds-neutral-200);
    --lc-border-light: var(--ds-neutral-100);

    --color-text-primary:   var(--ds-neutral-700);
    --color-text-secondary: var(--ds-neutral-500);
    --color-text-muted:     var(--ds-text-muted);
    --color-bg-page:   var(--ds-neutral-50);
    --color-bg-card:   var(--ds-neutral-100);
    --color-border:    var(--ds-neutral-200);

    --lc-shadow-xs: var(--ds-shadow-xs);
    --lc-shadow-sm: var(--ds-shadow-sm);
    --lc-shadow-md: var(--ds-shadow-md);
    --lc-shadow-lg: var(--ds-shadow-lg);
}

/* ---- 跟随系统（auto）：未显式设置时由 JS 检测 prefers-color-scheme ---- */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        /* 同暗色主题 */
        --ds-neutral-50: #0f172a;
        --ds-neutral-100: #1e293b;
        --ds-neutral-200: #334155;
        --ds-neutral-300: #475569;
        --ds-neutral-400: #64748b;
        --ds-neutral-500: #94a3b8;
        --ds-neutral-600: #cbd5e1;
        --ds-neutral-700: #e2e8f0;
        --ds-neutral-900: #f8fafc;

        /* 语义化文字颜色 */
        --ds-text-primary:   var(--ds-neutral-700);
        --ds-text-secondary: var(--ds-neutral-500);
        --ds-text-muted:     var(--ds-neutral-400);
        --ds-text-contrast:  var(--ds-neutral-600);
        --ds-text-inverse:   var(--ds-neutral-900);
        --ds-text-disabled:  var(--ds-neutral-400);
    /* Link color */
    --ds-text-link: var(--ds-primary-500);
    --ds-text-link-hover: var(--ds-primary-600);
    --ds-text-link-active: var(--ds-primary-700);

        --ds-primary-50:  #1e3a5f;
        --ds-primary-100: var(--ds-primary-700);
        --ds-primary-500: #60a5fa;
        --ds-primary-600: var(--ds-primary-500);
        --ds-primary-700: var(--ds-primary-600);

        --ds-success-50:  #064e3b;
        --ds-success-100: #065f46;
        --ds-success-500: #34d399;
        --ds-success-600: var(--ds-success-500);
        --ds-success-700: var(--ds-success-600);

        --ds-warning-50:  #78350f;
        --ds-warning-100: var(--ds-warning-700);
        --ds-warning-500: #fbbf24;
        --ds-warning-600: var(--ds-warning-500);
        --ds-warning-700: var(--ds-warning-600);

        --ds-danger-50:  #7f1d1d;
        --ds-danger-100: #991b1b;
        --ds-danger-500: #f87171;
        --ds-danger-600: var(--ds-danger-500);
        --ds-danger-700: var(--ds-danger-600);

        --ds-info-50:  #164e63;
        --ds-info-100: #155e75;
        --ds-info-500: #22d3ee;
        --ds-info-600: #06b6d4;
        --ds-info-700: #0891b2;

        --ds-accent-50:  #4c1d95;
        --ds-accent-100: #5b21b6;
        --ds-accent-500: #a78bfa;
        --ds-accent-600: var(--ds-accent-500);
        --ds-accent-700: var(--ds-accent-600);

        --ds-highlight-50:  #831843;
        --ds-highlight-100: #9d174d;
        --ds-highlight-500: #f472b6;
        --ds-highlight-600: var(--ds-highlight-500);
        --ds-highlight-700: var(--ds-highlight-600);

        --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
        --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
        --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
        --ds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);

        --lc-text-primary:   var(--ds-neutral-700);
        --lc-text-secondary: var(--ds-neutral-500);
        --lc-text-muted:     var(--ds-text-muted);
        --lc-bg-page:   var(--ds-neutral-50);
        --lc-bg-card:   var(--ds-neutral-100);
        --lc-bg-hover:  var(--ds-neutral-200);
        --lc-border:       var(--ds-neutral-200);
        --lc-border-light: var(--ds-neutral-100);

        --color-text-primary:   var(--ds-neutral-700);
        --color-text-secondary: var(--ds-neutral-500);
        --color-text-muted:     var(--ds-text-muted);
        --color-bg-page:   var(--ds-neutral-50);
        --color-bg-card:   var(--ds-neutral-100);
        --color-border:    var(--ds-neutral-200);
    }
}

/* ---- 主题切换平滑过渡 ---- */
[data-theme],
[data-theme] * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* === Merged from themes.css === */
/* !DEPRECATED - This file is superseded by design-tokens.css
   All variables have been consolidated into design-tokens.css
   This file is kept for backward compatibility only.
   Do not add new styles here. Use design-tokens.css instead.
   Created: 2026-09-12 */

/**
 * 联创圈 - 主题系统
 * 3套主题：经典蓝（默认）、科技暗黑、暖橙活力
 * 通过 body[data-theme="xxx"] 切换
 * 桌面端 + 移动端 全覆盖
 */

/* ========================================
 * 主题1：经典蓝（默认）
 * ======================================== */
body[data-theme="classic"] {
    --primary-color: var(--ds-primary-500);
    --primary-dark: var(--ds-primary-600);
    --secondary-color: var(--ds-accent-500);
    --success-color: var(--ds-success-500);
    --warning-color: var(--ds-warning-500);
    --danger-color: var(--ds-danger-500);
    --dark-color: #1f2937;
    --gray-color: #6b7280;
    --light-gray: #f3f4f6;
    --border-color: #e5e7eb;
    --bg-color: var(--ds-neutral-50);
    --card-bg: #ffffff;
    --text-color: #1f2937;
    --text-secondary: #6b7280;
    --navbar-bg: #ffffff;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --radius: 8px;
    --radius-lg: 12px;
    --transition: all 0.3s ease;
    /* 移动端变量 */
    --m-primary: var(--ds-primary-500);
    --m-primary-light: #60a5fa;
    --m-bg: #f5f5f7;
    --m-text: #1d1d1f;
    --m-text-secondary: #86868b;
    --m-border: #e5e5ea;
    --m-card-bg: #ffffff;
    --m-topbar-bg: rgba(255, 255, 255, 0.92);
    --m-tabbar-bg: rgba(255, 255, 255, 0.95);
}

/* ========================================
 * 主题2：科技暗黑
 * ======================================== */
body[data-theme="dark"] {
    --primary-color: #818cf8;
    --primary-dark: var(--ds-primary-500);
    --secondary-color: #22d3ee;
    --success-color: #34d399;
    --warning-color: var(--ds-warning-500);
    --danger-color: #f87171;
    --dark-color: var(--ds-neutral-100);
    --gray-color: var(--ds-neutral-400);
    --light-gray: var(--ds-neutral-900);
    --border-color: var(--ds-neutral-700);
    --bg-color: var(--ds-neutral-900);
    --card-bg: var(--ds-neutral-900);
    --text-color: var(--ds-neutral-100);
    --text-secondary: var(--ds-neutral-400);
    --navbar-bg: var(--ds-neutral-900);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --radius: 8px;
    --radius-lg: 12px;
    --transition: all 0.3s ease;
    /* 移动端变量 */
    --m-primary: #818cf8;
    --m-primary-light: #a5b4fc;
    --m-bg: var(--ds-neutral-900);
    --m-text: var(--ds-neutral-100);
    --m-text-secondary: var(--ds-neutral-400);
    --m-border: var(--ds-neutral-700);
    --m-card-bg: var(--ds-neutral-900);
    --m-topbar-bg: rgba(30, 41, 59, 0.92);
    --m-tabbar-bg: rgba(30, 41, 59, 0.95);
}

/* 暗黑主题 - 桌面端组件覆盖 */
body[data-theme="dark"] {
    background-color: var(--bg-color);
    color: var(--text-color);
}

body[data-theme="dark"] .navbar {
    background: var(--navbar-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] .navbar-brand {
    color: var(--primary-color);
}

body[data-theme="dark"] .navbar-nav a {
    color: var(--text-secondary);
}

body[data-theme="dark"] .navbar-nav a:hover,
body[data-theme="dark"] .navbar-nav a.active {
    color: var(--primary-color);
}

body[data-theme="dark"] .navbar-right a span {
    color: var(--text-color);
}

body[data-theme="dark"] .card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

body[data-theme="dark"] .card-image {
    background: #0d1117;
}

body[data-theme="dark"] .card-meta {
    color: var(--text-secondary);
}

body[data-theme="dark"] .footer {
    background: #0d1117;
    color: var(--text-secondary);
}

body[data-theme="dark"] .footer a {
    color: var(--text-secondary);
}

body[data-theme="dark"] .footer a:hover {
    color: var(--primary-color);
}

body[data-theme="dark"] .btn-outline {
    border-color: var(--border-color);
    color: var(--text-color);
    background: transparent;
}

body[data-theme="dark"] .btn-outline:hover {
    background: var(--light-gray);
    color: var(--primary-color);
}

body[data-theme="dark"] .form-control {
    background: var(--light-gray);
    border-color: var(--border-color);
    color: var(--text-color);
}

body[data-theme="dark"] .form-control::placeholder {
    color: var(--text-secondary);
}

body[data-theme="dark"] .search-box input {
    background: var(--light-gray);
    color: var(--text-color);
    border-color: var(--border-color);
}

body[data-theme="dark"] .search-dropdown {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

body[data-theme="dark"] .search-dropdown .search-result-item:hover {
    background: var(--light-gray);
}

body[data-theme="dark"] .user-menu a {
    color: var(--text-color);
}

body[data-theme="dark"] .category-tab {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

body[data-theme="dark"] .category-tab:hover,
body[data-theme="dark"] .category-tab.active {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}

body[data-theme="dark"] .table-container {
    background: var(--card-bg);
}

body[data-theme="dark"] .table th {
    background: var(--light-gray);
    color: var(--text-color);
}

body[data-theme="dark"] .table td {
    border-bottom-color: var(--border-color);
    color: var(--text-color);
}

body[data-theme="dark"] .table tr:hover {
    background: var(--light-gray);
}

body[data-theme="dark"] .pagination a,
body[data-theme="dark"] .pagination span {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

body[data-theme="dark"] .hero {
    background: linear-gradient(135deg, var(--ds-neutral-900) 0%, var(--ds-neutral-900) 100%);
}

body[data-theme="dark"] .section-title {
    color: var(--text-color);
}

body[data-theme="dark"] .post-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

body[data-theme="dark"] .post-title {
    color: var(--text-color);
}

body[data-theme="dark"] .post-content {
    color: var(--text-secondary);
}

body[data-theme="dark"] .post-stats {
    color: var(--text-secondary);
}

/* 暗黑主题 - 移动端覆盖 */
@media (max-width: 768px) {
    body[data-theme="dark"] {
        background: var(--m-bg);
    }

    body[data-theme="dark"] .m-topbar {
        background: var(--m-topbar-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--m-border);
    }

    body[data-theme="dark"] .m-topbar-brand {
        color: var(--m-text);
    }

    body[data-theme="dark"] .m-topbar-btn {
        color: var(--m-text);
    }

    body[data-theme="dark"] .m-topbar-btn:active {
        background: rgba(255, 255, 255, 0.08);
    }

    body[data-theme="dark"] .m-tabbar {
        background: var(--m-tabbar-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid var(--m-border);
    }

    body[data-theme="dark"] .m-tab {
        color: var(--m-text-secondary);
    }

    body[data-theme="dark"] .m-tab.active {
        color: var(--m-primary);
    }

    body[data-theme="dark"] .m-tabbar::before {
        background: var(--m-border);
    }

    body[data-theme="dark"] .m-tab-center .m-tab-icon-wrapper {
        background: linear-gradient(135deg, var(--m-primary), var(--m-primary-light));
    }

    body[data-theme="dark"] .card {
        background: var(--m-card-bg);
        border: 1px solid var(--m-border);
    }

    body[data-theme="dark"] .post-item {
        background: var(--m-card-bg);
        border: 1px solid var(--m-border);
    }

    body[data-theme="dark"] .section-title {
        color: var(--m-text);
    }

    body[data-theme="dark"] .m-search-overlay {
        background: rgba(0, 0, 0, 0.7);
    }

    body[data-theme="dark"] .m-search-panel {
        background: var(--m-card-bg);
    }

    body[data-theme="dark"] .m-search-input-wrap {
        background: var(--m-bg);
    }

    body[data-theme="dark"] .m-search-input {
        color: var(--m-text);
    }

    body[data-theme="dark"] .m-search-input::placeholder {
        color: var(--m-text-secondary);
    }

    body[data-theme="dark"] .m-search-hot-title {
        color: var(--m-text-secondary);
    }

    body[data-theme="dark"] .m-search-tag {
        background: var(--m-bg);
        color: var(--m-text);
    }

    body[data-theme="dark"] .m-search-tag:active {
        background: var(--light-gray);
    }

    body[data-theme="dark"] .hero {
        background: linear-gradient(135deg, var(--ds-neutral-900) 0%, var(--ds-neutral-900) 100%);
    }

    body[data-theme="dark"] .category-tab {
        background: var(--m-card-bg);
        color: var(--m-text);
        border-color: var(--m-border);
    }

    body[data-theme="dark"] .category-tab.active {
        background: var(--m-primary);
        color: #ffffff;
    }

    body[data-theme="dark"] .pagination a,
    body[data-theme="dark"] .pagination span {
        background: var(--m-card-bg);
        color: var(--m-text);
        border-color: var(--m-border);
    }
}

/* ========================================
 * 主题3：暖橙活力
 * ======================================== */
body[data-theme="warm"] {
    --primary-color: #ea580c;
    --primary-dark: #c2410c;
    --secondary-color: var(--ds-warning-500);
    --success-color: #16a34a;
    --warning-color: #eab308;
    --danger-color: var(--ds-danger-600);
    --dark-color: #292524;
    --gray-color: #78716c;
    --light-gray: var(--ds-warning-100);
    --border-color: #fed7aa;
    --bg-color: var(--ds-warning-50);
    --card-bg: #ffffff;
    --text-color: #292524;
    --text-secondary: #78716c;
    --navbar-bg: #ffffff;
    --shadow: 0 4px 6px -1px rgba(234, 88, 12, 0.1), 0 2px 4px -1px rgba(234, 88, 12, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(234, 88, 12, 0.1), 0 4px 6px -2px rgba(234, 88, 12, 0.05);
    --radius: 8px;
    --radius-lg: 12px;
    --transition: all 0.3s ease;
    /* 移动端变量 */
    --m-primary: #ea580c;
    --m-primary-light: var(--ds-warning-500);
    --m-bg: var(--ds-warning-50);
    --m-text: #292524;
    --m-text-secondary: #78716c;
    --m-border: #fed7aa;
    --m-card-bg: #ffffff;
    --m-topbar-bg: rgba(255, 255, 255, 0.92);
    --m-tabbar-bg: rgba(255, 255, 255, 0.95);
}

/* 暖橙主题 - 桌面端组件覆盖 */
body[data-theme="warm"] {
    background-color: var(--bg-color);
    color: var(--text-color);
}

body[data-theme="warm"] .navbar {
    background: var(--navbar-bg);
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.08);
}

body[data-theme="warm"] .navbar-brand {
    color: var(--primary-color);
}

body[data-theme="warm"] .navbar-nav a.active {
    color: var(--primary-color);
}

body[data-theme="warm"] .navbar-nav a:hover {
    color: var(--primary-color);
}

body[data-theme="warm"] .navbar-nav a.active::after {
    background: var(--primary-color);
}

body[data-theme="warm"] .btn-primary {
    background: linear-gradient(135deg, var(--ds-warning-500), #ea580c);
    border: none;
}

body[data-theme="warm"] .btn-primary:hover {
    background: linear-gradient(135deg, #ea580c, #c2410c);
}

body[data-theme="warm"] .section-title::before {
    background: var(--primary-color);
}

body[data-theme="warm"] .footer {
    background: #292524;
    color: #d6d3d1;
}

body[data-theme="warm"] .footer a {
    color: #d6d3d1;
}

body[data-theme="warm"] .footer a:hover {
    color: var(--secondary-color);
}

body[data-theme="warm"] .card:hover {
    border-color: var(--secondary-color);
}

body[data-theme="warm"] .category-tab:hover,
body[data-theme="warm"] .category-tab.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

body[data-theme="warm"] .hero {
    background: linear-gradient(135deg, #ea580c 0%, var(--ds-warning-500) 100%);
}

body[data-theme="warm"] .stat-card .stat-value {
    color: var(--primary-color);
}

/* 暖橙主题 - 移动端覆盖 */
@media (max-width: 768px) {
    body[data-theme="warm"] {
        background: var(--m-bg);
    }

    body[data-theme="warm"] .m-topbar {
        background: var(--m-topbar-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--m-border);
    }

    body[data-theme="warm"] .m-topbar-brand {
        color: var(--m-primary);
    }

    body[data-theme="warm"] .m-tabbar {
        background: var(--m-tabbar-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid var(--m-border);
    }

    body[data-theme="warm"] .m-tab.active {
        color: var(--m-primary);
    }

    body[data-theme="warm"] .m-tab-center .m-tab-icon-wrapper {
        background: linear-gradient(135deg, var(--m-primary), var(--m-primary-light));
        box-shadow: 0 4px 12px rgba(234, 88, 12, 0.35);
    }

    body[data-theme="warm"] .hero {
        background: linear-gradient(135deg, #ea580c 0%, var(--ds-warning-500) 100%);
    }

    body[data-theme="warm"] .category-tab.active {
        background: var(--m-primary);
        color: white;
    }
}

/* ========================================
 * 主题切换平滑过渡
 * ======================================== */
body,
.navbar,
.card,
.footer,
.btn,
.form-control,
.category-tab,
.m-topbar,
.m-tabbar,
.m-search-panel,
.post-item,
.table-container,
.pagination a,
.pagination span {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}