/* ============================================================
   ExoMind Design Tokens — 全站唯一真相源 · ai-as.cc 品牌绿（2026-10-17 起跨端统一，
   基色基因=小程序 styles/tokens.wxss：#0ec064 填充档 / #088043 文字档，方案见
   docs/brand-token-unification.md；紫蓝最后完整版本=tag v0.2.0-purple-baseline）
   ------------------------------------------------------------
   - 上游消费方**都用 <link> 并列加载**本文件（不是 @import —— 见下）：
       · SSR 页面：`query.py::_render_page` 下发 `<link .../static/tokens.css>`
       · 营销页：`static/landing/index.html` 自己下发
       · 404 页：`query.py::_render_not_found_html` 直接下发
   - 为什么不用 @import：nginx 对 ^/static/ 打 `expires 7d`，而 @import 的相对
     URL 不参与内容哈希 → 「改了本文件但宿主 CSS 没动」时页面 7 天用旧 token 且不报错
     （2026-09-10 改；版本号现由响应层按内容哈希自动生成）
   - 变量名向后兼容:现有页面用的 --accent/--card/--border 等别名
     指向品牌绿色板,故 16 个 SSR 页面无需逐页改 CSS 即自动换肤
   - 改色板/间距/圆角只改这一处
   ============================================================ */

/* ---------- Light（浅色 · 基准；亦作 auto 浅色回退）---------- */
:root,[data-theme="light"],[data-theme="auto"]{
  --bg-canvas:#ffffff; --bg-canvas-subtle:#f6f7fb; --bg-canvas-inset:#f1f3f9;
  --border-default:#d8dde8; --border-muted:#e3e7f0;
  --fg-default:#1a1d29; --fg-muted:#5a6478; --fg-subtle:#6e7681; --fg-on-emphasis:#ffffff;
  /* 文字档用 #088043(白底 5.03/subtle 底 4.69),#0ec064 只做填充(白底仅 2.4)——双档纪律见小程序 tokens.wxss */
  --accent-fg:#088043; --accent-emphasis:#0ec064; --accent-subtle:#e8f6ee;
  /* 大字展示档(2026-10-17 用户反馈「绿要亮、有朝气」后增设):粗体大字(≥24px bold)
     WCAG 只要求 3:1,可亮过文字档——标题/统计大数字用这档(白底 3.46:1)。
     小字/链接仍必须用 --accent-fg;PC 表达层专用,小程序端无此档 */
  --accent-display:#0f9e5c;
  /* 顺利档评分按钮的浅底深字(白底族;深色主题在下方 purple/auto-dark 块覆盖为提亮绿) */
  --rate-good-ink:#066b39;
  --success-fg:#1a7f37; --success-subtle:#dafbe1;
  --attention-fg:#9a6700; --attention-subtle:#fff8c5;
  --danger-fg:#cf222e; --danger-subtle:#ffebe9;
  --done-fg:#8250df; --done-subtle:#fbefff;
  /* 浅色下渐变/glow 减弱,保持清爽 */
  --grad-accent:linear-gradient(135deg,#0ec064 0%,#0a8f4c 100%);
  --grad-accent-soft:linear-gradient(135deg,rgba(14,192,100,.10),rgba(10,143,76,.06));
  --grad-hero:radial-gradient(60% 60% at 50% 0%,rgba(14,192,100,.12),transparent 70%);
  --grad-brand-glow:radial-gradient(40% 60% at 30% 30%,rgba(10,143,76,.18),transparent 70%);
  --shadow-glow:0 8px 30px rgba(14,192,100,.18);
  --shadow-glow-strong:0 12px 40px rgba(10,143,76,.22);
  --bg-glass:rgba(255,255,255,.70);
  --border-glass:rgba(0,0,0,.08);
  --blur-glass:blur(12px);
  /* 弹框/提示专用：浅色底上阴影要轻(旧的写死 rgba(1,4,9,.5) 在浅色主题是团黑雾) */
  --shadow-sm:0 1px 2px rgba(1,4,9,.06),0 1px 3px rgba(1,4,9,.08);
  --shadow-md:0 4px 12px rgba(1,4,9,.10),0 8px 24px rgba(1,4,9,.08);
  --shadow-lg:0 12px 32px rgba(1,4,9,.16),0 24px 56px rgba(1,4,9,.12);
  --bg-overlay-blur:blur(6px);
}
/* ---------- Purple（深色 · 品牌绿 accent;主题键名保留 purple 只为兼容已存偏好）---------- */
[data-theme="purple"]{
  --bg-canvas:#0a0c12; --bg-canvas-subtle:#11141d; --bg-canvas-inset:#06080d;
  --border-default:#232a3a; --border-muted:#1a2030;
  --fg-default:#e6e9f0; --fg-muted:#98a2b6; --fg-subtle:#6a7388; --fg-on-emphasis:#ffffff;
  /* 深底文字档用提亮绿 #3dd68c(色相151°同族;深底 10.42/subtle 底 9.81)——参照小程序沉静档的双档思路反向取值 */
  --accent-fg:#3dd68c; --accent-emphasis:#0ec064; --accent-subtle:rgba(14,192,100,.16);
  --accent-display:#3dd68c;
  --rate-good-ink:#3dd68c;
  --success-fg:#3fb950; --success-subtle:rgba(46,160,67,.15);
  --attention-fg:#e0a83a; --attention-subtle:rgba(187,128,9,.15);
  --danger-fg:#f87171; --danger-subtle:rgba(248,81,73,.15);
  --done-fg:#a78bfa; --done-subtle:rgba(163,113,247,.15);
  --grad-accent:linear-gradient(135deg,#0ec064 0%,#0a8f4c 100%);
  --grad-accent-soft:linear-gradient(135deg,rgba(14,192,100,.18),rgba(10,143,76,.10));
  --grad-hero:radial-gradient(60% 60% at 50% 0%,rgba(14,192,100,.22),transparent 70%);
  --grad-brand-glow:radial-gradient(40% 60% at 30% 30%,rgba(61,214,140,.35),transparent 70%);
  --shadow-glow:0 0 40px rgba(14,192,100,.30);
  --shadow-glow-strong:0 0 60px rgba(61,214,140,.40);
  --bg-glass:rgba(17,20,29,.60);
  --border-glass:rgba(255,255,255,.08);
  --blur-glass:blur(12px);
  /* 弹框/提示专用：深色底靠描边+外扩辉光撑层次,纯黑阴影在深底上不可见 */
  --shadow-sm:0 1px 2px rgba(0,0,0,.40);
  --shadow-md:0 8px 24px rgba(0,0,0,.50),0 0 0 1px rgba(255,255,255,.04);
  --shadow-lg:0 16px 48px rgba(0,0,0,.60),0 0 40px rgba(14,192,100,.18),0 0 0 1px rgba(255,255,255,.06);
  --bg-overlay-blur:blur(6px);
}
/* ---------- auto：跟随系统（系统深色时切深色绿 accent，浅色时继承上方 light）---------- */
@media (prefers-color-scheme: dark){
  [data-theme="auto"]{
    --bg-canvas:#0a0c12; --bg-canvas-subtle:#11141d; --bg-canvas-inset:#06080d;
    --border-default:#232a3a; --border-muted:#1a2030;
    --fg-default:#e6e9f0; --fg-muted:#98a2b6; --fg-subtle:#6a7388; --fg-on-emphasis:#ffffff;
    --accent-fg:#3dd68c; --accent-emphasis:#0ec064; --accent-subtle:rgba(14,192,100,.16);
    --accent-display:#3dd68c;
    --rate-good-ink:#3dd68c;
    --success-fg:#3fb950; --success-subtle:rgba(46,160,67,.15);
    --attention-fg:#e0a83a; --attention-subtle:rgba(187,128,9,.15);
    --danger-fg:#f87171; --danger-subtle:rgba(248,81,73,.15);
    --done-fg:#a78bfa; --done-subtle:rgba(163,113,247,.15);
    --grad-accent:linear-gradient(135deg,#0ec064 0%,#0a8f4c 100%);
    --grad-accent-soft:linear-gradient(135deg,rgba(14,192,100,.18),rgba(10,143,76,.10));
    --grad-hero:radial-gradient(60% 60% at 50% 0%,rgba(14,192,100,.22),transparent 70%);
    --grad-brand-glow:radial-gradient(40% 60% at 30% 30%,rgba(61,214,140,.35),transparent 70%);
    --shadow-glow:0 0 40px rgba(14,192,100,.30);
    --shadow-glow-strong:0 0 60px rgba(61,214,140,.40);
    --bg-glass:rgba(17,20,29,.60);
    --border-glass:rgba(255,255,255,.08);
    --blur-glass:blur(12px);
    /* 与 [data-theme="purple"] 保持一致 */
    --shadow-sm:0 1px 2px rgba(0,0,0,.40);
    --shadow-md:0 8px 24px rgba(0,0,0,.50),0 0 0 1px rgba(255,255,255,.04);
    --shadow-lg:0 16px 48px rgba(0,0,0,.60),0 0 40px rgba(14,192,100,.18),0 0 0 1px rgba(255,255,255,.06);
    --bg-overlay-blur:blur(6px);
  }
}

/* ---------- Token(主题无关)---------- */
:root{
  /* 字体 */
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans',Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular','SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  /* 字号阶梯 */
  --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:15px; --fs-lg:16px;
  --fs-xl:18px; --fs-2xl:20px; --fs-3xl:24px; --fs-4xl:32px; --fs-5xl:44px;
  /* 行高 */
  --lh-tight:1.3; --lh:1.5; --lh-loose:1.625;
  /* 间距(4px 网格) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:56px;
  /* 圆角 */
  --r-sm:4px; --r:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:9999px;
  /* 交互态(2026-09-27 弹框统一时补):焦点环/按下/危险强调,替散落的 filter:brightness() */
  --focus-ring:0 0 0 3px var(--accent-subtle);
  --press-dim:brightness(.92);
  --danger-emphasis:#e5484d;
  /* 复习评分四档(2026-10-17 对比度重排):忘了/吃力/轻松实底白字,顺利浅底深字(与轻松
     实底拉开形态差);3/4 档随主题 accent 走。实算:白/#dc2626=4.83 白/#b45309=5.02
     白/#088043(light 轻松)=5.03 #066b39(light 顺利字)/#e8f6ee=5.95;深色 good-ink
     #3dd68c 对绿 tint 合成底≈9.4 */
  --rate-forgot-bg:#dc2626; --rate-hard-bg:#b45309;
  --rate-good-bg:var(--accent-subtle); --rate-easy-bg:var(--accent-emphasis);
  /* 动效(弹框进出/toast 滑入共用;prefers-reduced-motion 由消费方兜) */
  --dur-1:120ms; --dur-2:200ms; --ease-out:cubic-bezier(.16,1,.3,1);
  /* 遮罩(模态 backdrop,通用半透明黑,主题无关) */
  --bg-overlay:rgba(0,0,0,.55);
  /* 弹框宽度档:统一 modal 的最大宽度档位,避免各页自定 max-width 数值 */
  --modal-w-sm:400px; --modal-w:480px; --modal-w-lg:640px;
  /* 布局宽度 */
  --container-width:1200px; --content-width:760px;
  /* 兼容别名(其他页面旧 css 不破) */
  /* z-index 层级刻度：全站定位元素只允许引用这些 token，禁止散落硬编码
     local=页内浮动(图例/统计/横幅) < nav=吸顶导航(其下拉面板在 nav 层叠上下文内) < overlay=模态遮罩 < toast=最顶 */
  --z-local:10; --z-nav:50; --z-overlay:100; --z-toast:110;
  /* 图谱数据色板(2026-09-13 V3.5,跨端共享;下发真源=exo/wiki/graph_exporter.py type_colors,
     此处为 css 镜像——canvas js 用数据里的 color,css 侧按需引用)。
     原则:中性多色板,避开品牌绿(现 #0ec064 系,2026-10-17 起跨端统一)与类目紫 #8b5cf6 */
  --graph-concept:#0ea5e9; --graph-tool:#ef4444; --graph-project:#f59e0b;
  --graph-organization:#06b6d4; --graph-person:#ec4899; --graph-component:#14b8a6;
  --graph-entity:#78716c; --graph-paper:#f97316; --graph-event:#84cc16;
  --graph-location:#3b82f6; --graph-protocol:#a16207; --graph-fallback:#6b7280;
  --bg:var(--bg-canvas); --card:var(--bg-canvas-subtle); --bg-2:var(--bg-canvas-subtle);
  --border:var(--border-default); --border-strong:var(--border-default);
  --text:var(--fg-default); --dim:var(--fg-muted); --faint:var(--fg-subtle);
  --accent:var(--accent-fg); --accent2:var(--accent-fg); --accent-soft:var(--accent-subtle);
  --green:var(--success-fg); --yellow:var(--attention-fg); --red:var(--danger-fg);
}
