/* ============================================================
 * 悠悠AI 设计令牌层（tokens.css）
 * ------------------------------------------------------------
 * 这个文件是**唯一的设计令牌来源**。各页面不再各自定义 :root 变量，
 * 只引用这里的语义变量。改一次配色，全站（前台首页/定价/钱包/排行/
 * 文档/登录/注册、用户中心、管理后台）同时生效。
 *
 * ## 为什么把它从 design-system.css 里单独拆出来
 *
 * design-system.css 里除了令牌，还有一整套组件样式（.btn / .card /
 * .modal / .table …）。组件样式带布局属性（display、padding、height），
 * 直接套到现有页面上会和页面自己的组件规则打架 —— 那些页面已经有一套
 * 能用的组件，只是配色和圆角不对。
 *
 * 所以接入分两步走，互不干扰：
 *   第一步（本文件）只换令牌。页面所有颜色/圆角都写成 var(--x)，
 *     换掉变量值 = 全站换肤，而布局一个字节都没动。这是「无感更新」
 *     在 CSS 层面的实现方式：改的是取值，不是结构。
 *   第二步（design-system.css）逐页重写结构时再启用组件层。
 *
 * ## 加载顺序
 *
 * 本文件必须在各页面自己的 <style> **之后**加载。页面里的
 * `:root{--brand:#FFFFFF}` 与这里特异性相同（0,1,0），后加载者胜出，
 * 于是页面那份旧值被自动覆盖，不需要删掉页面里的旧变量 ——
 * 留着它们反而更安全：万一本文件加载失败，页面回落到旧配色而不是白屏。
 *
 * ## 为什么推倒重来而不是在旧 theme.css 上打补丁
 *
 * 旧版每个页面各写一份 :root，同一个 --brand 在 8 个文件里有 8 份拷贝。
 * 结果是：前台 4 个页面只有 11 个变量（没有 --bg-panel / --danger），
 * 后台有 30 多个，docs 又缺 --bg-code 的浅色覆盖。想统一换色就得改 8 处，
 * 且必然漏掉几处 —— 这次 UI 重置正好把这个债一次还清。
 *
 * ## 三态主题（auto / light / dark）
 *
 * 浅色变量的表达方式必须是**两条选择器**：
 *   :root[data-theme="light"]                 → 用户显式选浅色
 *   @media(prefers-color-scheme:light)
 *     :root:not([data-theme="dark"])          → auto 且系统是浅色
 *
 * 不能只写 @media：那样用户手动选浅色时，系统是深色的浏览器不会跟随，
 * 「切换按钮点了没反应」。也不能只写 [data-theme="light"]：auto 模式
 * 下没有这个属性，浅色系统会得到深色页面。
 *
 * 暗色是默认值（写在 :root 里），所以深色系统 + auto 不需要任何选择器命中。
 *
 * ## 与 theme.js 的契约
 *
 * theme.js 在 auto 模式下会 **移除** data-theme 属性（而不是设成 "auto"），
 * 因为 CSS 里没有 auto 分支，且 :root:not([data-theme="dark"]) 会因属性
 * 存在而失效。本文件的 @media 分支依赖这个行为，两边必须一致。
 * ============================================================ */

/* ---------- 暗色（默认） ---------- */
:root {
    /* --- 品牌色 ---
     * 图中主色是蓝紫渐变（#5B8CFF → #8B6BFF）。取 #5B7CFF 作为单一
     * 品牌色（按钮、链接、选中态），渐变只用在 hero 与强调块 ——
     * 纯色能保证「文字压在品牌色上」时的对比度可预测，渐变不行。 */
    --brand: #5B7CFF;
    --brand-hover: #7B94FF;
    --brand-active: #4A69E6;
    --brand-soft: rgba(91, 124, 255, .14);
    --brand-fg: #A8BEFF;
    /* 品牌渐变：只用于 hero 标题、CTA、图表高亮 */
    --brand-grad: linear-gradient(135deg, #5B7CFF 0%, #8B6BFF 100%);
    /* 品牌底上的前景色：不能写死 #fff。
     * 暗色下渐变偏亮（#5B7CFF），白字对比度只有 3.64，不达小字 4.5 线；
     * 深色字反而有 5.27。浅色下渐变偏暗，白字 4.82 合格。 */
    --brand-on: #0B0F17;
    --brand-grad-soft: linear-gradient(135deg, rgba(91,124,255,.18) 0%, rgba(139,107,255,.18) 100%);

    /* --- 语义色 --- */
    --success: #22C55E;
    --success-fg: #4ADE80;
    --success-soft: rgba(34, 197, 94, .14);
    --warning: #F59E0B;
    --warning-fg: #FBBF24;
    --warning-soft: rgba(245, 158, 11, .14);
    --danger: #EF4444;
    --danger-fg: #F87171;
    --danger-soft: rgba(239, 68, 68, .14);
    --info: #38BDF8;
    --info-soft: rgba(56, 189, 248, .14);
    /* 奖牌色：榜单前三名。必须走令牌，不能写死在页面里，
     * 否则浅色下 #F59E0B 金色在白底上对比度仅 2.0，字看不清。暗色用高亮色，
     * 浅色用压暗一档的同色相。 */
    --medal-1: #FBBF24;
    --medal-1-soft: rgba(217, 119, 6, .18);
    --medal-2: #94A3B8;
    --medal-2-soft: rgba(148, 163, 184, .18);
    --medal-3: #C08552;
    --medal-3-soft: rgba(180, 120, 60, .18);

    /* --- 背景层次（图里是 4 层：页面 / 卡片 / 浮起 / 悬停） ---
     * 暗色下越上层越亮，这样卡片能从页面里「浮」出来。
     * 注意 --bg-base 不是纯黑：纯黑配白字在 OLED 上对比过强，
     * 长时间阅读眼睛很累；#0B0F17 带一点蓝，与品牌色同色系。 */
    --bg-base: #0B0F17;
    --bg-panel: #111725;
    --bg-elevated: #182033;
    --bg-hover: #1F2937;
    --bg-code: #0D1117;
    /* 代码块专用底色：深浅两态都保持深色。
     *
     * 为什么不能复用 --bg-code：代码高亮依赖深底 + 亮色 token
     * （#86EFAC 绿 / #93C5FD 蓝 / #FCD34D 黄）。这些颜色在浅底上
     * 对比度只有 1.2~1.6，等于看不见。而 --bg-code 在浅色主题下
     * 是 #F3F5FA（近白），代码块会变成「浅灰字压白底」。
     * 所以代码块单独用这个恒深令牌，浅色下也不变。 */
    --bg-code-solid: #0D1117;
    --bg-mask: rgba(3, 6, 12, .72);
    /* 侧栏/顶栏：比 panel 略深，与内容区形成边界 */
    --bg-shell: #0E131E;

    /* --- 文字 --- */
    --text-primary: #E8EDF7;
    --text-secondary: #9BA8BF;
    --text-muted: #6B7891;
    --text-inverse: #0B0F17;

    /* --- 边框 --- */
    --border: #1F2937;
    --border-light: #2D3A4F;
    --border-strong: #3B4A63;

    /* --- 圆角 ---
     * 旧版是 0（全直角），图里是明显圆角。统一成 4 档，
     * 组件只允许引用这几档，避免出现 6px/7px/8px 混用。 */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-full: 999px;

    /* --- 阴影 ---
     * 暗色下阴影几乎看不见，改用「内发光 + 描边」表达层次。
     * 这里保留阴影变量供浅色模式与浮层（下拉/弹窗）使用。 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .35);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .45);
    --shadow-brand: 0 8px 28px rgba(91, 124, 255, .28);

    /* --- 字体 --- */
    --font: "Inter", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
            system-ui, -apple-system, sans-serif;
    --mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Code", Consolas,
            "Liberation Mono", monospace;

    /* --- 尺寸 --- */
    --max-w: 1240px;
    --sidebar-w: 232px;
    --topbar-h: 60px;
    --gutter: 24px;

    /* --- 图表调色板 ---
     * 单独一组而不是复用 --brand：图表需要 6~8 个可区分的色相，
     * 拿品牌色当唯一色会得到一整排同色柱子，等于没有信息。
     * 这组色在暗色下饱和度略降，避免刺眼。 */
    --c1: #5B7CFF;
    --c2: #22C55E;
    --c3: #F59E0B;
    --c4: #A855F7;
    --c5: #EC4899;
    --c6: #06B6D4;
    --c7: #EF4444;
    --c8: #8B95A8;

    /* --- 过渡 --- */
    --t-fast: 120ms;
    --t-base: 180ms;
    --t-slow: 280ms;
    --ease: cubic-bezier(.4, 0, .2, 1);

    color-scheme: dark;
}

/* ---------- 浅色 ----------
 * 显式选择 + 跟随系统两条路径，理由见文件头。 */
:root[data-theme="light"] {
    --brand: #4A66E8;
    --brand-hover: #3A55D4;
    --brand-active: #2F47B8;
    --brand-soft: rgba(74, 102, 232, .10);
    --brand-fg: #3A55D4;
    --brand-grad: linear-gradient(135deg, #4A66E8 0%, #7B5BE8 100%);
    /* 浅色下渐变已压暗，白字 4.82 达 AA */
    --brand-on: #FFFFFF;
    --brand-grad-soft: linear-gradient(135deg, rgba(74,102,232,.10) 0%, rgba(123,91,232,.10) 100%);

    --success: #16A34A;
    --success-fg: #15803D;
    --success-soft: rgba(22, 163, 74, .10);
    --warning: #D97706;
    --warning-fg: #B45309;
    --warning-soft: rgba(217, 119, 6, .10);
    --danger: #DC2626;
    --danger-fg: #B91C1C;
    --danger-soft: rgba(220, 38, 38, .10);
    --info: #0284C7;
    --info-soft: rgba(2, 132, 199, .10);
    /* 奖牌色浅色分支：压暗一档，保证在白底上可读 */
    --medal-1: #B45309;
    --medal-1-soft: rgba(217, 119, 6, .12);
    --medal-2: #64748B;
    --medal-2-soft: rgba(100, 116, 139, .12);
    --medal-3: #92400E;
    --medal-3-soft: rgba(146, 64, 14, .12);

    /* 浅色下越上层越白，靠阴影而不是亮度表达层次 */
    --bg-base: #F6F8FC;
    --bg-panel: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-hover: #F0F3F9;
    --bg-code: #F3F5FA;
    --bg-mask: rgba(15, 23, 42, .45);
    --bg-shell: #FFFFFF;

    --text-primary: #0F172A;
    --text-secondary: #52627A;
    --text-muted: #66748C;
    --text-inverse: #FFFFFF;

    --border: #E3E8F0;
    --border-light: #EDF1F7;
    --border-strong: #CBD5E1;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, .08);
    --shadow-lg: 0 12px 40px rgba(15, 23, 42, .12);
    --shadow-brand: 0 8px 24px rgba(74, 102, 232, .22);

    --c1: #4A66E8;
    --c2: #16A34A;
    --c3: #D97706;
    --c4: #9333EA;
    --c5: #DB2777;
    --c6: #0891B2;
    --c7: #DC2626;
    --c8: #64748B;

    color-scheme: light;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --brand: #4A66E8;
        --brand-hover: #3A55D4;
        --brand-active: #2F47B8;
        --brand-soft: rgba(74, 102, 232, .10);
        --brand-fg: #3A55D4;
        --brand-grad: linear-gradient(135deg, #4A66E8 0%, #7B5BE8 100%);
        /* 浅色下渐变已压暗，白字 4.82 达 AA */
        --brand-on: #FFFFFF;
        --brand-grad-soft: linear-gradient(135deg, rgba(74,102,232,.10) 0%, rgba(123,91,232,.10) 100%);

        --success: #16A34A;
        --success-fg: #15803D;
        --success-soft: rgba(22, 163, 74, .10);
        --warning: #D97706;
        --warning-fg: #B45309;
        --warning-soft: rgba(217, 119, 6, .10);
        --danger: #DC2626;
        --danger-fg: #B91C1C;
        --danger-soft: rgba(220, 38, 38, .10);
        --info: #0284C7;
        --info-soft: rgba(2, 132, 199, .10);
        /* 奖牌色浅色分支：压暗一档，保证在白底上可读 */
        --medal-1: #B45309;
        --medal-1-soft: rgba(217, 119, 6, .12);
        --medal-2: #64748B;
        --medal-2-soft: rgba(100, 116, 139, .12);
        --medal-3: #92400E;
        --medal-3-soft: rgba(146, 64, 14, .12);

        --bg-base: #F6F8FC;
        --bg-panel: #FFFFFF;
        --bg-elevated: #FFFFFF;
        --bg-hover: #F0F3F9;
        --bg-code: #F3F5FA;
        --bg-mask: rgba(15, 23, 42, .45);
        --bg-shell: #FFFFFF;

        --text-primary: #0F172A;
        --text-secondary: #52627A;
        --text-muted: #66748C;
        --text-inverse: #FFFFFF;

        --border: #E3E8F0;
        --border-light: #EDF1F7;
        --border-strong: #CBD5E1;

        --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
        --shadow-md: 0 4px 16px rgba(15, 23, 42, .08);
        --shadow-lg: 0 12px 40px rgba(15, 23, 42, .12);
        --shadow-brand: 0 8px 24px rgba(74, 102, 232, .22);

        --c1: #4A66E8;
        --c2: #16A34A;
        --c3: #D97706;
        --c4: #9333EA;
        --c5: #DB2777;
        --c6: #0891B2;
        --c7: #DC2626;
        --c8: #64748B;

        color-scheme: light;
    }
}