/* ============================================================
   tokens.css — 设计令牌(单一来源)
   颜色 / 字阶 / 间距 / 圆角 / 阴影 / 动效
   深色为默认主题(:root),浅色由 [data-theme="light"] 覆写。
   所有颜色经 CSS 变量引用,SVG 图表的 fill/stroke 亦引用变量,
   切换主题时图表自动变色,无需重绘。
   ============================================================ */

:root {
  /* —— 品牌主色 —— */
  --c-teal:        #34d7c8;   /* 主青(信号/神经) */
  --c-teal-soft:   #7ff0e6;
  --c-teal-deep:   #1a9e92;
  --c-blue:        #4d7cff;   /* 辅蓝(科技/数据) */
  --c-blue-soft:   #8aa9ff;
  --c-amber:       #f5a623;   /* 信号琥珀(高亮/数字) */
  --c-violet:      #9b6dff;   /* 紫(前沿/扩展推演) */
  --c-magenta:     #ff5d9e;

  /* —— 语义色(风险/状态) —— */
  --c-danger:      #ff5c5c;   /* 高 */
  --c-warn:        #f5a623;   /* 中 */
  --c-ok:          #34d7a4;   /* 低 / 已突破 */
  --c-info:        #4d7cff;

  /* —— 深色主题基底 —— */
  --bg-0:          #070b16;   /* 最底层(页面) */
  --bg-1:          #0a0f1f;   /* 主背景 */
  --bg-2:          #0f1629;   /* 区块 */
  --panel:         #131c33;   /* 卡片面板 */
  --panel-2:       #18223d;   /* 次级面板 / 表头 */
  --panel-hover:   #1d294a;
  --line:          #233152;   /* 边框线 */
  --line-soft:     #1a2540;

  /* —— 文本 —— */
  --txt-1:         #eaf0fb;   /* 主文本 */
  --txt-2:         #aebbd4;   /* 次文本 */
  --txt-3:         #7e8cad;   /* 弱文本 / 注脚 */
  --txt-4:         #56648a;   /* 最弱 / 占位 */
  --txt-on-accent: #051018;   /* 落在亮色块上的深字 */

  /* —— 渐变与发光 —— */
  --grad-brand:    linear-gradient(135deg, var(--c-teal) 0%, var(--c-blue) 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(52,215,200,.16), rgba(77,124,255,.16));
  --grad-panel:    linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,0));
  --glow-teal:     0 0 0 1px rgba(52,215,200,.35), 0 8px 30px -8px rgba(52,215,200,.45);
  --glow-soft:     0 0 28px -6px rgba(77,124,255,.4);

  /* —— 阴影 —— */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 6px 18px -6px rgba(0,0,0,.55);
  --sh-3: 0 18px 48px -16px rgba(0,0,0,.7);

  /* —— 圆角 —— */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* —— 间距比例 —— */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* —— 字阶 —— */
  --f-display: clamp(2.4rem, 5vw, 4rem);
  --f-h1:      clamp(1.9rem, 3.4vw, 2.8rem);
  --f-h2:      clamp(1.45rem, 2.4vw, 1.95rem);
  --f-h3:      clamp(1.15rem, 1.6vw, 1.4rem);
  --f-h4:      1.05rem;
  --f-body:    1rem;
  --f-sm:      .875rem;
  --f-xs:      .78rem;
  --f-2xs:     .7rem;

  /* —— 数字/英文 字重显示 —— */
  --f-num: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* —— 布局尺寸 —— */
  --topbar-h:    58px;
  --sidebar-w:   268px;
  --toc-w:       210px;
  --content-max: 1080px;

  /* —— 动效 —— */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .15s;
  --t-mid:  .28s;
  --t-slow: .5s;

  --z-topbar: 100;
  --z-sidebar: 90;
  --z-drawer: 200;
}

/* ============================================================
   浅色主题 — 临床/学术风(可一键切换)
   ============================================================ */
[data-theme="light"] {
  --bg-0:        #eef1f7;
  --bg-1:        #f5f7fb;
  --bg-2:        #ffffff;
  --panel:       #ffffff;
  --panel-2:     #f1f4fa;
  --panel-hover: #e9eef8;
  --line:        #d8dfec;
  --line-soft:   #e6ebf4;

  --txt-1:       #0f1830;
  --txt-2:       #41506e;
  --txt-3:       #66748f;
  --txt-4:       #93a0b8;
  --txt-on-accent: #ffffff;

  --c-teal:      #0f9c8e;
  --c-teal-deep: #0b7d72;
  --c-blue:      #2f5fe0;
  --c-amber:     #c9810f;
  --c-violet:    #7a4fe0;

  --c-danger:    #d83b3b;
  --c-warn:      #c9810f;
  --c-ok:        #0f9c6e;

  --grad-panel:  linear-gradient(160deg, rgba(15,24,48,.018), rgba(15,24,48,0));
  --grad-brand-soft: linear-gradient(135deg, rgba(15,156,142,.12), rgba(47,95,224,.1));
  --glow-teal:   0 0 0 1px rgba(15,156,142,.25), 0 10px 30px -12px rgba(15,156,142,.35);
  --glow-soft:   0 8px 24px -12px rgba(47,95,224,.3);

  --sh-1: 0 1px 2px rgba(20,40,80,.06);
  --sh-2: 0 6px 18px -8px rgba(20,40,80,.16);
  --sh-3: 0 18px 44px -18px rgba(20,40,80,.24);
}